*{box-sizing:border-box;margin:0;padding:0}body,body[data-variant="vault"]{--ground:#0a0b0e;--ground-image:radial-gradient(rgba(255,255,255,0.06) 1px,transparent 1px);--ground-size:28px 28px;--ink:#ffffff;--muted:#8d95ab;--surface:#14161f;--surface-blur:0px;--line:#262b3d;--accent:#c8ff00;--accent-ink:#000000;--backdrop:rgba(4,5,8,0.62);--backdrop-blur:6px;--grip:#262b3d;--scroll-thumb:#3b4364;--scroll-thumb-hover:#c8ff00;--font-body:'Space Grotesk',system-ui,sans-serif;--font-display:'Syne',system-ui,sans-serif;--radius-panel:20px;--radius-btn:12px;--border-w:1px;--shadow-panel:-30px 0 70px rgba(0,0,0,0.55);--label-transform:none;--label-tracking:0.08em;--focus-ring:#c8ff00;--panel-inset:14px}body[data-variant="glass"]{--ground:#1b1140;--ground-image:radial-gradient(45rem 30rem at 12% 18%,rgba(120,90,255,0.75),transparent 60%),radial-gradient(38rem 26rem at 82% 24%,rgba(0,209,255,0.6),transparent 62%),radial-gradient(40rem 30rem at 60% 92%,rgba(255,78,168,0.55),transparent 60%);--ground-size:auto;--ink:#ffffff;--muted:rgba(255,255,255,0.66);--surface:rgba(255,255,255,0.12);--surface-blur:22px;--line:rgba(255,255,255,0.24);--accent:rgba(255,255,255,0.92);--accent-ink:#241a4d;--backdrop:rgba(20,10,50,0.34);--backdrop-blur:3px;--grip:rgba(255,255,255,0.4);--scroll-thumb:rgba(255,255,255,0.42);--scroll-thumb-hover:rgba(255,255,255,0.75);--font-body:system-ui,-apple-system,'Segoe UI',sans-serif;--font-display:system-ui,-apple-system,'Segoe UI',sans-serif;--radius-panel:26px;--radius-btn:999px;--border-w:1px;--shadow-panel:-30px 0 80px rgba(20,8,60,0.45);--label-transform:none;--label-tracking:0.06em;--focus-ring:#ffffff}body[data-variant="brutal"]{--ground:#f2f0e9;--ground-image:repeating-linear-gradient(45deg,rgba(0,0,0,0.05) 0 2px,transparent 2px 9px);--ground-size:auto;--ink:#000000;--muted:#3d3d3d;--surface:#ffffff;--surface-blur:0px;--line:#000000;--accent:#ff4d00;--accent-ink:#ffffff;--backdrop:rgba(0,0,0,0.35);--backdrop-blur:0px;--grip:#000000;--scroll-thumb:#000000;--scroll-thumb-hover:#ff4d00;--font-body:ui-monospace,SFMono-Regular,Menlo,monospace;--font-display:'Archivo Black',system-ui,sans-serif;--radius-panel:0px;--radius-btn:0px;--border-w:3px;--shadow-panel:-10px 10px 0 rgba(0,0,0,1);--label-transform:uppercase;--label-tracking:0.12em;--focus-ring:#ff4d00}html,body{height:100%}body{background-color:var(--ground);background-image:var(--ground-image);background-size:var(--ground-size);color:var(--ink);font-family:var(--font-body);display:flex;align-items:center;justify-content:center;overflow:hidden}:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}.drawer-trigger{background:var(--surface);backdrop-filter:blur(var(--surface-blur));-webkit-backdrop-filter:blur(var(--surface-blur));border:var(--border-w) solid var(--line);border-radius:var(--radius-btn);color:var(--ink);font-family:var(--font-body);font-size:0.95rem;font-weight:600;letter-spacing:var(--label-tracking);text-transform:var(--label-transform);padding:0.85rem 1.75rem;cursor:pointer}body[data-variant="brutal"] .drawer-trigger{box-shadow:5px 5px 0 var(--line)}.drawer-backdrop{position:fixed;inset:0;z-index:900;background-color:rgba(0,0,0,0);backdrop-filter:blur(var(--backdrop-blur));-webkit-backdrop-filter:blur(var(--backdrop-blur));visibility:hidden;pointer-events:none}.drawer-backdrop.is-active{visibility:visible;pointer-events:auto}.drawer-panel{position:fixed;top:var(--panel-inset);right:var(--panel-inset);bottom:var(--panel-inset);z-index:950;width:min(400px,calc(88vw - var(--panel-inset)));display:flex;flex-direction:column;background:var(--surface);backdrop-filter:blur(var(--surface-blur));-webkit-backdrop-filter:blur(var(--surface-blur));border:var(--border-w) solid var(--line);border-radius:var(--radius-panel);overflow:hidden;box-shadow:var(--shadow-panel);color:var(--ink);visibility:hidden;touch-action:pan-y}.drawer-panel.is-open{visibility:visible}.drawer-head{position:relative;display:flex;align-items:center;gap:0.9rem;padding:1.15rem 1.25rem;border-bottom:var(--border-w) solid var(--line);cursor:grab;flex:none}.drawer-head:active{cursor:grabbing}.drawer-grip{width:4px;height:26px;border-radius:4px;background:var(--grip);flex:none}.drawer-title{flex:1;font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:var(--label-tracking);text-transform:var(--label-transform)}.drawer-close{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:var(--border-w) solid var(--line);border-radius:var(--radius-btn);color:var(--ink);cursor:pointer;flex:none}.drawer-close:hover{background:var(--accent);color:var(--accent-ink)}.drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem 0.85rem 1.5rem 1.25rem;scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}.drawer-panel.is-animating .drawer-body{overflow:hidden}.drawer-body::-webkit-scrollbar{width:10px}.drawer-body::-webkit-scrollbar-track{background:transparent}.drawer-body::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px;border:3px solid transparent;background-clip:content-box}.drawer-body::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);background-clip:content-box}body[data-variant="brutal"] .drawer-body::-webkit-scrollbar-thumb{border-radius:0}.drawer-group + .drawer-group{margin-top:1.4rem}.drawer-group-label{display:block;font-size:0.66rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:0.35rem}.drawer-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.7rem 0;border-bottom:1px solid var(--line);font-size:0.88rem;cursor:pointer}.drawer-row input{accent-color:var(--accent);width:17px;height:17px;flex:none;cursor:pointer}.drawer-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-top:var(--border-w) solid var(--line)}.drawer-hint{font-size:0.7rem;color:var(--muted);letter-spacing:0.02em}.drawer-save{background:var(--accent);color:var(--accent-ink);border:var(--border-w) solid var(--line);border-radius:var(--radius-btn);font-family:var(--font-body);font-size:0.82rem;font-weight:700;letter-spacing:var(--label-tracking);text-transform:var(--label-transform);padding:0.6rem 1.35rem;cursor:pointer}.showcase-toolbar{position:fixed;top:0.75rem;left:0.75rem;z-index:1000;display:flex;gap:0.25rem;padding:0.25rem;border-radius:var(--radius-btn);background:var(--surface);backdrop-filter:blur(var(--surface-blur));-webkit-backdrop-filter:blur(var(--surface-blur));border:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.7rem}.showcase-toolbar button{background:transparent;border:0;color:var(--muted);padding:0.3rem 0.55rem;border-radius:calc(var(--radius-btn) - 2px);cursor:pointer;font:inherit;letter-spacing:0.04em}.showcase-toolbar button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}@media (max-width:640px){body{--panel-inset:10px}.showcase-toolbar{top:auto;bottom:0.9rem;left:0.9rem}.drawer-hint{display:none}.drawer-foot{justify-content:flex-end;padding-bottom:3.5rem}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.001ms !important;transition-duration:0.001ms !important}}