/* Base — the minimum a page needs to be on-brand before a single component mounts. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--body-md);line-height:var(--body-lh);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-track);line-height:var(--display-lh-loose);color:var(--text-display)}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--link) 40%,transparent);transition:color var(--transition-state),border-color var(--transition-state)}
a:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
img,svg,video{display:block;max-width:100%}
hr{border:0;border-top:var(--border);margin:0}
::selection{background:color-mix(in oklch,var(--accent) 30%,transparent);color:var(--text-display)}

/* Scrollbars read as instrument chrome, not OS chrome. */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
*::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* Scene beats: a child that reveals when its scene becomes active. */
[data-beat]{opacity:0;transform:translateY(var(--beat-rise))}
[data-beat][data-lit]{animation:ob-beat var(--dur-scene) var(--ease-reveal) forwards;animation-delay:calc(var(--beat-stagger) * var(--beat, 0))}