/* Base surface + the four "spices" as utility classes. Everything else stays component-level.
   Dark theme follows the system (no toggle): add this one line to the page —
   <script>if(matchMedia('(prefers-color-scheme:dark)').matches&&!document.documentElement.dataset.theme)document.documentElement.dataset.theme='dark'</script> */
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;color:var(--ink);font:var(--font-body);-webkit-font-smoothing:antialiased;background-color:var(--paper);background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);background-size:var(--grid-big) var(--grid-big);background-position:-1px -1px;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:var(--grain);mix-blend-mode:multiply;background-image:url("../../../assets/grain.svg")}
:root[data-theme="dark"] body::before{mix-blend-mode:screen}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-text)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
code,kbd{font:400 .92em var(--mono);background:var(--paper-2);padding:.1em .4em;border-radius:var(--r)}
/* spices */
.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);box-shadow:var(--glass-inset),inset 0 0 0 .5px rgba(255,255,255,.08)}
.glass-thin{background:var(--glass-thin);-webkit-backdrop-filter:var(--glass-thin-blur);backdrop-filter:var(--glass-thin-blur);border:1px solid var(--glass-line);box-shadow:var(--glass-inset)}
.metal{background:var(--paper);border:var(--border-metal);box-shadow:var(--shadow-hard)}
.field{background:var(--paper-2);border-radius:var(--r)}
/* one-way reveal */
.rv{transition:opacity var(--dur-reveal) var(--ease),translate var(--dur-reveal) var(--ease)}
.rv.wait{opacity:0;translate:0 var(--reveal-y)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv.wait{opacity:1;translate:0}}