:root{--color-paper:oklch(96% .018 78);--color-paper-2:oklch(92% .03 82);--color-paper-3:oklch(87% .055 91);--color-ink:oklch(22% .025 42);--color-muted:oklch(49% .028 48);--color-rule:oklch(79% .038 73);--color-accent:oklch(57% .15 28);--color-accent-soft:oklch(79% .09 35);--color-success:oklch(52% .11 151);--color-danger:oklch(54% .16 26);--color-night:oklch(18% .035 38);--color-night-2:oklch(24% .04 43);--color-night-ink:oklch(94% .018 84);--color-focus:oklch(52% .18 255);--font-display:"STKaiti", "KaiTi", "Songti SC", serif;--font-body:"PingFang SC", "Microsoft YaHei", sans-serif;--font-data:"SFMono-Regular", "Menlo", monospace;--space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.25rem;--text-lg:1.56rem;--text-xl:1.95rem;--text-2xl:2.44rem;--text-display:clamp(3rem, 6vw, 6rem);--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1.25rem;--rule-thin:1px;--dur-short:.14s;--dur-medium:.26s;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1)}*{box-sizing:border-box}html,body,#root{min-height:100%;overflow-x:clip}body{color:var(--color-ink);background:var(--color-paper);font-family:var(--font-body);font-size:var(--text-base);margin:0}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}button:active{transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.48}.loading{min-height:100vh;color:var(--color-muted);place-items:center;display:grid}.warmup{background:var(--color-night);min-height:100vh;color:var(--color-night-ink);grid-template-columns:1.05fr 1.45fr;display:grid;position:relative;overflow:hidden}.warmup__copy{z-index:2;align-self:end;padding:8vh 3vw 9vh 6vw}.warmup__copy span{color:var(--color-accent-soft);font:700 var(--text-sm)/1 var(--font-data);letter-spacing:.16em}.warmup__copy h1{max-width:9ch;margin:var(--space-lg) 0;font:500 var(--text-display)/1.05 var(--font-display);overflow-wrap:anywhere}.warmup__copy p{max-width:28ch;color:color-mix(in oklab, var(--color-night-ink) 72%, var(--color-muted));font-size:var(--text-md);margin:0;line-height:1.6}.warmup__photo{background:var(--color-night-2) center/cover no-repeat;border:var(--rule-thin) solid color-mix(in oklab, var(--color-night-ink) 24%, transparent);place-items:center;min-width:0;margin:4vh 3vw 4vh 0;display:grid}.warmup__photo:after{content:"";background:linear-gradient(90deg, var(--color-night), transparent 60%);pointer-events:none;position:absolute;inset:0}.warmup__photo b{color:var(--color-muted);font-weight:400}.join-code{z-index:10;justify-items:end;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);color:var(--color-ink);background:var(--color-paper);border-radius:var(--radius-sm);display:grid;position:fixed;bottom:5vh;right:3vw}.join-code span{font-size:var(--text-sm);color:var(--color-muted)}.join-code strong{font:700 var(--text-2xl)/1 var(--font-data);letter-spacing:.1em}.join-code small{font-size:var(--text-xs);color:var(--color-muted)}.game-stage{min-height:100vh;color:var(--color-night-ink);background:var(--color-night);padding:6vh 6vw;position:relative;overflow:hidden}.game-stage>header{align-items:end;gap:var(--space-2xl);border-bottom:var(--rule-thin) solid color-mix(in oklab, var(--color-night-ink) 20%, transparent);padding-bottom:var(--space-lg);grid-template-columns:minmax(0,1fr) minmax(18rem,.7fr);display:grid}.game-stage header span{color:var(--color-accent-soft);font-size:var(--text-sm)}.game-stage h1{margin:var(--space-xs) 0 0;font:500 clamp(2.5rem, 5vw, 5rem)/1 var(--font-display)}.game-stage header p{color:color-mix(in oklab, var(--color-night-ink) 72%, var(--color-muted));font-size:var(--text-md);margin:0;line-height:1.5}.screen-countdown{font:700 clamp(10rem, 32vw, 32rem)/1 var(--font-data);color:var(--color-accent-soft);animation:count-in var(--dur-medium) var(--ease-out) both;place-items:center;display:grid;position:absolute;inset:0}.ranking{gap:var(--space-sm);max-width:76rem;margin:7vh auto 0;display:grid}.ranking__row{align-items:center;gap:var(--space-lg);grid-template-columns:3rem minmax(9rem,.6fr) minmax(0,2fr) 5rem;display:grid}.ranking__row>b{color:var(--color-accent-soft);font:700 var(--text-lg)/1 var(--font-data)}.ranking__row>span{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-md);overflow:hidden}.ranking__row>i{background:var(--color-night-2);border-radius:999px;height:.8rem;position:relative;overflow:hidden}.ranking__row>i:after{content:"";width:var(--progress);background:var(--color-accent-soft);transform-origin:0;animation:bar-in var(--dur-medium) var(--ease-out) both;position:absolute;inset:0 auto 0 0}.ranking__row>strong{text-align:right;font:700 var(--text-lg)/1 var(--font-data)}.stage-empty{text-align:center;color:var(--color-muted);padding:15vh 0}.spectrum{max-width:75rem;margin:14vh auto 0}.spectrum>div{font:500 var(--text-xl)/1 var(--font-display);justify-content:space-between;display:flex}.spectrum>i{height:1rem;margin:var(--space-xl) 0;background:var(--color-night-2);border-radius:999px;display:block;position:relative}.spectrum>i b{aspect-ratio:1;background:var(--color-accent-soft);width:4rem;transition:left var(--dur-medium) var(--ease-out);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.spectrum>strong{text-align:center;color:var(--color-muted);display:block}.sides{gap:var(--space-lg);grid-template-columns:repeat(2,minmax(0,1fr));max-width:75rem;margin:8vh auto 0;display:grid}.sides>div{align-content:center;justify-items:center;gap:var(--space-md);border:var(--rule-thin) solid color-mix(in oklab, var(--color-night-ink) 18%, transparent);min-height:48vh;transition:transform var(--dur-medium) var(--ease-out), background-color var(--dur-medium) var(--ease-out);display:grid}.sides>div.is-winner{background:var(--color-night-2);transform:translateY(-.75rem)}.sides span{font:500 var(--text-xl)/1 var(--font-display)}.sides strong{font:700 clamp(6rem, 12vw, 12rem)/1 var(--font-data);color:var(--color-accent-soft)}.photo-draw{align-items:center;gap:var(--space-xl);grid-template-columns:repeat(3,minmax(0,1fr));max-width:70rem;min-height:58vh;margin:2vh auto 0;display:grid}.photo-draw>div{aspect-ratio:3/4;border:var(--rule-thin) solid color-mix(in oklab, var(--color-night-ink) 30%, transparent);background:var(--color-night-2);place-items:center;display:grid;transform:rotate(-2deg)}.photo-draw>div:nth-child(2){transform:translateY(-1.5rem)rotate(1deg)}.photo-draw>div:nth-child(3){transform:rotate(3deg)}.photo-draw span{font:700 var(--text-2xl)/1 var(--font-data);color:var(--color-accent-soft)}.photo-draw p{text-align:center;color:var(--color-muted);grid-column:1/-1;margin:0}.result-line{padding:var(--space-sm) var(--space-lg);color:var(--color-ink);background:var(--color-paper);margin:0;position:fixed;bottom:5vh;left:50%;transform:translate(-50%)}.stage-meta{align-items:baseline;gap:var(--space-xs);display:flex;position:fixed;top:3vh;right:3vw}.stage-meta b{font:700 var(--text-lg)/1 var(--font-data)}.stage-meta span,.stage-meta em{color:var(--color-muted);font-size:var(--text-sm);font-style:normal}.stage-meta em{margin-left:var(--space-md)}.ranking__identity{align-items:center;gap:var(--space-sm);min-width:0;display:flex}.ranking__identity img,.ranking__identity>i{object-fit:cover;background:var(--color-paper-2);border-radius:50%;flex:none;width:2.35rem;height:2.35rem}.ranking__identity>i{color:var(--color-accent);place-items:center;font-style:normal;display:grid}.ranking__identity em{color:inherit;text-overflow:ellipsis;white-space:nowrap;font-style:normal;overflow:hidden}.director{min-height:100vh;padding:var(--space-xl)}.director>header{justify-content:space-between;align-items:end;gap:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:var(--rule-thin) solid var(--color-rule);display:flex}.director header span{color:var(--color-muted);font-size:var(--text-sm)}.director header h1{margin:var(--space-xs) 0 0;font:500 var(--text-2xl)/1.1 var(--font-display)}.director header p{white-space:nowrap;margin:0}.director header i{aspect-ratio:1;width:.65rem;margin-right:var(--space-xs);background:var(--color-success);border-radius:50%;display:inline-block}.director__workbench{gap:var(--space-xl);padding-top:var(--space-xl);grid-template-columns:minmax(18rem,.78fr) minmax(0,1.55fr);display:grid}.director__playlist{align-content:start;gap:var(--space-sm);display:grid}.director__playlist h2{margin:0 0 var(--space-sm);font-size:var(--text-md)}.director__playlist article{gap:var(--space-md);padding:var(--space-md);border-top:var(--rule-thin) solid var(--color-rule);color:var(--color-muted);grid-template-columns:2.5rem minmax(0,1fr);display:grid}.director__playlist article.is-active{color:var(--color-ink);background:var(--color-paper-2)}.director__playlist article>b{font-family:var(--font-data)}.director__playlist article div{gap:var(--space-xs);min-width:0;display:grid}.director__playlist article strong{font-size:var(--text-md)}.director__playlist article span{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);overflow:hidden}.director__now{min-height:68vh;padding:var(--space-xl);border:var(--rule-thin) solid var(--color-rule);background:color-mix(in oklab, var(--color-paper) 76%, var(--color-paper-2));flex-direction:column;display:flex}.director__now>span{color:var(--color-accent);font-size:var(--text-sm)}.director__now h2{margin:var(--space-sm) 0;font:500 clamp(2.3rem, 5vw, 5rem)/1 var(--font-display)}.director__now>p{max-width:40ch;color:var(--color-muted);font-size:var(--text-md);line-height:1.6}.director__now dl{gap:var(--space-sm);margin:auto 0 var(--space-xl);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.director__now dl div{border-top:var(--rule-thin) solid var(--color-rule);padding-top:var(--space-sm)}.director__now dt{color:var(--color-muted);font-size:var(--text-sm)}.director__now dd{margin:var(--space-xs) 0 0;font:700 var(--text-xl)/1 var(--font-data)}.director__actions{gap:var(--space-sm);display:flex}.director__actions button{border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-sm);min-height:3.25rem;padding:0 var(--space-lg);color:var(--color-ink);background:var(--color-paper);transition:transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);white-space:nowrap}.director__actions button:hover{background:var(--color-paper-2);transform:translateY(-2px)}.director__actions .is-primary{border-color:var(--color-ink);color:var(--color-paper);background:var(--color-ink)}.director__now>a{margin-top:var(--space-lg);color:var(--color-ink);text-underline-offset:.3em;align-self:flex-start}@keyframes count-in{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@keyframes bar-in{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (width<=768px){.warmup{grid-template-columns:1fr}.warmup__copy{padding:var(--space-xl)}.warmup__photo{min-height:45vh;margin:0 var(--space-lg) var(--space-lg)}.join-code{right:var(--space-lg);bottom:var(--space-lg)}.game-stage{padding:var(--space-xl) var(--space-lg)}.game-stage>header{gap:var(--space-md);grid-template-columns:1fr}.stage-meta{margin-top:var(--space-lg);position:static}.ranking__row{gap:var(--space-sm);grid-template-columns:2rem minmax(6rem,.7fr) minmax(0,1fr) 3rem}.sides{grid-template-columns:1fr}.photo-draw{gap:var(--space-sm)}.director{padding:var(--space-lg)}.director>header{flex-direction:column;align-items:start}.director__workbench{grid-template-columns:1fr}.director__now dl{grid-template-columns:1fr 1fr 1fr}.director__actions{flex-direction:column}.director__actions button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}