html[data-theme]:root { --surface-0: var(--gray-50); --surface-1: var(--gray-0); --text-primary: var(--gray-810); --text-secondary: var(--gray-550); --font-sans: var(--font); color-scheme: light; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html[data-theme="dark"]:root { --surface-0: var(--gray-870); --surface-1: var(--gray-820); --text-primary: var(--gray-60); --text-secondary: var(--gray-300); color-scheme: dark; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; background: var(--surface-0); color: var(--text-primary); font-family: var(--font); -webkit-font-smoothing: antialiased; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
.opts{display:grid;gap:14px;padding:.5rem 0}
.p{position:relative;background:var(--surface-1);border-radius:12px;padding:12px 16px 0;overflow:hidden;touch-action:pan-y;cursor:default}
.bar{display:flex;align-items:center;height:44px;font-family:var(--font);color:var(--text-primary)}
.wm{font-weight:550;font-size:17px;letter-spacing:-0.02em;width:84px;flex:none;font-variation-settings:"XTRA" 440,"YTLC" 528}
.nav{display:flex}
.nav span{padding:0 clamp(5px,1.8vw,12px);font-size:13px;font-weight:450;font-variation-settings:"GRAD" var(--g,0),"XTRA" 446,"YTLC" 530;white-space:nowrap}
.stage{height:118px}
.p canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
@media (max-width:480px){.wm{display:none}}
/* Inter Variable has no grade axis: the prediction is carried by weight */
.nav span { font-weight: calc(450 + var(--g, 0)); text-align: center; }
.nav span::after { content: attr(data-t); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }