:root{--gutter:max(clamp(16px, 5.2vw, 88px), env(safe-area-inset-left), env(safe-area-inset-right));--safe-bottom:env(safe-area-inset-bottom,0px);--hud-top:64px;--hud-bottom:calc(80px + var(--safe-bottom))}@layer components{.home{font-size:15px}.tone-screen{background:var(--color-screen);color:var(--color-paper);--fg:var(--color-paper);--sub:var(--color-muted-dark);--rule:var(--color-line-dark)}.tone-paper{background:var(--color-paper);color:var(--color-ink);--fg:var(--color-ink);--sub:var(--color-muted);--rule:var(--color-line-paper)}.display{font-family:var(--font-display);letter-spacing:-.035em;font-feature-settings:"palt" 1;font-weight:900;line-height:1.04}:lang(en) .display{font-family:var(--font-geist), "Noto Sans TC", sans-serif;font-weight:800}.eyebrow{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;font-size:11px}.mask{margin:-.08em -.04em -.14em;padding:.08em .04em .14em;display:block;overflow:hidden}.mask>span{will-change:transform;display:inline-block}.home .tally-stop{vertical-align:baseline;width:.26em;height:.26em;transform:translateY(-.02em)}.lock{isolation:isolate;position:relative}.lock:before{content:"";pointer-events:none;opacity:0;--c:currentColor;background:linear-gradient(var(--c), var(--c)) 0 0 / 10px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 10px, linear-gradient(var(--c), var(--c)) 100% 0 / 10px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 10px, linear-gradient(var(--c), var(--c)) 100% 100% / 10px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 10px, linear-gradient(var(--c), var(--c)) 0 100% / 10px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 10px;transition:transform var(--m-half) var(--lf-ease-snap), opacity var(--m-tick) linear;background-repeat:no-repeat;position:absolute;inset:-7px;transform:scale(1.18)}.lock:focus-visible:before{opacity:1;transform:scale(1)}@media (hover:hover){.lock:hover:before{opacity:1;transform:scale(1)}}.btn{letter-spacing:-.01em;white-space:nowrap;height:48px;transition:background-color var(--m-tick) linear, color var(--m-tick) linear, transform var(--m-half) var(--lf-ease-enter);will-change:transform;border-radius:999px;align-items:center;gap:.6em;padding:0 22px;font-size:15px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn-tally{background:var(--color-tally);color:#fff}.btn-tally:hover{background:#d93a12}.btn-ghost{box-shadow:inset 0 0 0 1px var(--rule);color:var(--fg)}.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--fg)}.grain:after{content:"";pointer-events:none;opacity:.07;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:absolute;inset:0}}.scene{position:relative}.scene>.pin{height:100svh;position:sticky;top:0;overflow:hidden}.js .pre{opacity:0}.js .pre-rise{transform:translateY(112%)}.js #top .tally-stop{opacity:0}.cue-run{animation:lf-cue calc(var(--m-beat) * 8) var(--lf-ease-io) infinite}@keyframes lf-cue{0%{transform:translate(-12px)}to{transform:translate(64px)}}.talk li{transition:opacity var(--m-tick) linear}.js .talk li[data-state=next]{opacity:0}.talk li[data-state=done]{opacity:.5}.brief-rows>div{transition:background-color var(--m-half) linear}.brief-rows>div[data-state=live]{background:color-mix(in srgb, var(--color-tally) 7%, transparent)}.brief-rows .val{transition:opacity var(--m-half) linear, transform var(--m-half) var(--lf-ease-enter)}.js .brief-rows>div[data-state=next] .val{opacity:0;transform:translateY(6px)}.brief-rows .dot{transition:background-color var(--m-tick) linear, box-shadow var(--m-tick) linear, transform var(--m-half) var(--lf-ease-snap)}.brief-rows>div[data-state=next] .dot{transform:scale(.6)}.art{transition:opacity var(--m-half) linear, transform var(--m-half) var(--lf-ease-enter)}.art+.art{opacity:0;visibility:hidden}.clip{transition:background-color var(--m-tick) linear, color var(--m-tick) linear, box-shadow var(--m-tick) linear}.clip[data-state=next]{box-shadow:inset 0 0 0 1px var(--color-line-dark);color:var(--color-muted-dark)}.clip[data-state=live]{background:var(--color-paper);color:var(--color-ink)}.clip[data-state=done]{background:var(--color-graphite);color:var(--color-paper)}.step-on{transition:opacity var(--m-tick) linear, transform var(--m-half) var(--lf-ease-enter)}.js .step-on[data-on=false]{opacity:0;transform:translateY(8px)}.hud-scrim-top{background:linear-gradient(to bottom, color-mix(in srgb, var(--scrim) 92%, transparent) 30%, transparent)}.hud-scrim-bottom{background:linear-gradient(to top, color-mix(in srgb, var(--scrim) 94%, transparent) 55%, transparent)}@media (prefers-reduced-motion:reduce){.js .pre{opacity:1}.js .pre-rise{transform:none}.js #top .tally-stop{opacity:1}.scene{height:auto!important}.scene>.pin{height:auto;min-height:100svh;position:relative}.btn,.lock:before{transition:none}.btn:active{transform:none}.cue-run{animation:none}.js .talk li[data-state=next]{opacity:1}.js .brief-rows>div[data-state=next] .val,.js .step-on[data-on=false]{opacity:1;transform:none}}.making li{transition:color var(--m-tick) linear}.making li[data-state=next]{color:var(--color-sub)}.making .mk-icon{transition:background-color var(--m-tick) linear, box-shadow var(--m-tick) linear;box-shadow:inset 0 0 0 1px var(--color-line)}.making .mk-check,.making .mk-rec{opacity:0;transition:opacity var(--m-tick) linear, transform var(--m-beat) var(--lf-ease-snap);transform:scale(.6)}.making li[data-state=done] .mk-icon{background:color-mix(in srgb, var(--color-ok) 20%, transparent);color:var(--color-ok);box-shadow:none}.making li[data-state=done] .mk-check{opacity:1;transform:none}.making li[data-state=live] .mk-icon{background:var(--color-tally);box-shadow:none}.making li[data-state=live] .mk-rec{opacity:1;transform:none}.making li[data-state=live] .mk-label{font-weight:600}.making .mk-note{color:var(--color-sub)}.making li[data-state=live] .mk-note{color:var(--color-tally)}
