:root{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#1b1526;--color-bg-glow:#2b2142;--color-bg-deep:#150f20;--color-surface:#ffffff0e;--color-surface-2:#2f2745;--color-surface-3:#3a3154;--color-text:#f6efe6;--color-muted:#f6efe69e;--color-accent:#ff6b8b;--color-accent-ink:#1b1526;--color-accent-press:#c2405f;--color-accent-2:#ffd166;--color-accent-2-ink:#1b1526;--color-accent-2-press:#c99a3c;--color-danger:#ff6b6b;--color-ok:#8ff0a4;--color-ok-bg:#5ed87a33;--color-bot:#d6c2ff;--color-bot-bg:#b58cff38;--color-tag:#ffffff1a;--color-notice:#ffd1662e;--color-band:#1b1526e0;--color-scrim:#1b15268c;--color-shadow:#00000061;--font-display:"Jua", system-ui, sans-serif;--font-body:"IBM Plex Sans KR", system-ui, -apple-system, sans-serif;--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:18px;--text-xl:20px;--text-brand:48px;--text-code:40px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-card:18px;--control-h:52px;--control-h-sm:44px;--radius-sm:12px;--radius:16px;--radius-lg:24px;--radius-pill:999px;--shadow-press:0 4px 0 var(--color-shadow);--shadow-press-accent:0 4px 0 var(--color-accent-press);--shadow-press-accent-2:0 3px 0 var(--color-accent-2-press);--shadow-text:0 4px 0 var(--color-shadow);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");--grain-opacity:.07;--board-dot:#f6efe638;--board-lock:#0000004d;--board-lock-edge:#f6efe659;--board-token:var(--color-accent-2);--board-token-ring:var(--color-bg);--board-halo:#1b1526e6;--board-danger:var(--color-danger);font-family:var(--font-body);color:var(--color-text)}body{overscroll-behavior:none;background-color:var(--color-bg);background-image:radial-gradient(130% 70% at 50% 0%, var(--color-bg-glow) 0%, var(--color-bg) 55%, var(--color-bg-deep) 100%);min-height:100dvh;margin:0}body:before{content:"";pointer-events:none;opacity:var(--grain-opacity);background-image:var(--grain);position:fixed;inset:0}.page{max-width:28rem;padding:calc(var(--space-5) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));gap:var(--space-4);flex-direction:column;margin:0 auto;display:flex;position:relative}h1,h2{font-family:var(--font-display);margin:0;font-weight:400}h2{font-size:var(--text-xl)}.brand{font-size:var(--text-brand);color:var(--color-accent);transform-origin:0 100%;text-shadow:var(--shadow-text);align-self:flex-start;line-height:1;transform:rotate(-3deg)}.doodle{right:var(--space-2);top:calc(var(--space-3) + env(safe-area-inset-top));opacity:.16;pointer-events:none;position:absolute}.doodle-a{stroke:var(--color-accent)}.doodle-b{stroke:var(--color-ok)}.doodle-c{stroke:var(--color-accent-2)}.doodle-token{fill:var(--color-accent-2)}.tagline{font-family:var(--font-display);font-size:var(--text-lg);opacity:.92;white-space:pre-line;margin:0}.card{gap:var(--space-3);padding:var(--space-card);border-radius:var(--radius-lg);background:var(--color-surface);flex-direction:column;display:flex}.field{gap:var(--space-2);font-family:var(--font-display);color:var(--color-muted);flex-direction:column;display:flex}.label{font-family:var(--font-display);color:var(--color-muted)}fieldset{gap:var(--space-2);border:0;flex-direction:column;min-width:0;margin:0;padding:0;display:flex}legend{font-family:var(--font-display);color:var(--color-muted);padding:0}input,textarea{font-family:var(--font-body);font-size:var(--text-md);color:var(--color-text);box-sizing:border-box;width:100%;min-height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius);background:var(--color-surface-2);border:0;outline:none}textarea{min-height:0;padding:var(--space-3) var(--space-4);font-family:ui-monospace,monospace;font-size:var(--text-sm)}input:focus-visible,textarea:focus-visible{box-shadow:0 0 0 2px var(--color-accent)}input::placeholder,textarea::placeholder{color:var(--color-muted)}.seg{gap:var(--space-2);padding:var(--space-1);border-radius:var(--radius);background:var(--color-surface-2);display:flex}.seg label{flex:1;position:relative}.seg input{opacity:0;cursor:pointer;width:100%;min-height:0;margin:0;position:absolute;inset:0}.seg span{border-radius:var(--radius-sm);min-height:42px;font-family:var(--font-display);font-size:var(--text-md);color:var(--color-muted);justify-content:center;align-items:center;display:flex}.seg input:checked+span{background:var(--color-accent-2);color:var(--color-accent-2-ink)}.seg input:focus-visible+span{box-shadow:0 0 0 2px var(--color-accent)}button{font-family:var(--font-display);font-size:var(--text-lg);min-height:var(--control-h);padding:0 var(--space-5);border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-accent-ink);box-shadow:var(--shadow-press-accent);cursor:pointer;border:0;transition:transform 80ms,box-shadow 80ms}button:active:not(:disabled){box-shadow:0 1px 0 var(--color-accent-press);transform:translateY(3px)}button:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:var(--color-surface-3);color:var(--color-text);box-shadow:var(--shadow-press)}button.secondary:active:not(:disabled){box-shadow:0 1px 0 var(--color-shadow)}button.accent-2{background:var(--color-accent-2);color:var(--color-accent-2-ink);box-shadow:var(--shadow-press-accent-2)}button.accent-2:active:not(:disabled){box-shadow:0 1px 0 var(--color-accent-2-press)}.notice,.banner{padding:var(--space-3) var(--space-4);border-radius:var(--radius);background:var(--color-notice)}.error{color:var(--color-danger);margin:0}.code-cells{gap:var(--space-3);flex-direction:column;display:flex;position:relative}.code-cells .code-input{color:#0000;caret-color:#0000;opacity:0;background:0 0;border-radius:0;height:100%;min-height:0;margin:0;padding:0;font-size:16px;position:absolute;inset:0}.code-cells .code-input:focus-visible{box-shadow:none}.code-cells .cells{gap:var(--space-2);justify-content:center;display:flex}.code-cells .cell{box-sizing:border-box;border-radius:var(--radius);background:var(--color-surface-2);width:62px;height:70px;font-family:var(--font-display);border:2px solid #0000;justify-content:center;align-items:center;font-size:36px;line-height:1;display:flex}.code-cells .cell.active{border-color:var(--color-accent)}.code-cells .cell.active:after{content:"";background:var(--color-text);width:2px;height:34px;animation:1s steps(2,start) infinite caret}.code-cells.invalid .cell{border-color:var(--color-danger)}.code-cells.invalid .cells{animation:.3s shake}@keyframes caret{to{visibility:hidden}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@media (prefers-reduced-motion:reduce){.code-cells.invalid .cells,.code-cells .cell.active:after,.landing-band{animation:none}}.field-error{text-align:center;font-size:var(--text-sm);color:var(--color-danger);margin:0}.room-header{align-items:center;gap:var(--space-3);display:flex}.room-header .code{font-family:var(--font-display);font-size:var(--text-code);letter-spacing:.1em;color:var(--color-accent-2);flex:1;line-height:1}.room-header button{min-height:38px;padding:0 var(--space-3);font-size:var(--text-md)}.players{gap:var(--space-3);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.players li{align-items:center;gap:var(--space-2);display:flex}.players li .avatar{background:var(--color-surface-2);border-radius:50%;flex:none;justify-content:center;align-items:center;width:36px;height:36px;font-size:19px;line-height:1;display:flex}.players li .name{font-size:var(--text-md)}.players li.offline .name,.players li.offline .avatar{opacity:.4}.tag{font-size:var(--text-xs);border-radius:var(--radius-pill);background:var(--color-tag);color:var(--color-text);white-space:nowrap;padding:4px 9px;line-height:1}.tag.ready{background:var(--color-ok-bg);color:var(--color-ok)}.tag.bot{background:var(--color-bot-bg);color:var(--color-bot)}.tally{font-size:var(--text-xs);font-variant-numeric:tabular-nums;opacity:.7}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.players li button{min-height:30px;padding:0 var(--space-3);font-size:var(--text-sm);margin-left:auto}.ladder{position:relative}.board{touch-action:none;display:block}.countdown{font-family:var(--font-display);color:var(--color-accent-2);pointer-events:none;text-shadow:var(--shadow-text);place-items:center;font-size:6rem;display:grid;position:absolute;inset:0}.hint{font-size:var(--text-sm);color:var(--color-muted);margin:0}.landed{text-align:center;font-size:2rem}.tally-row h2{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-muted);margin:0 0 var(--space-2);text-align:center;font-weight:500}.tally-row ul{justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.tally-row li{align-items:baseline;gap:.2rem;display:flex}.page.play{box-sizing:border-box;max-width:none;height:100dvh;padding:calc(var(--space-2) + env(safe-area-inset-top)) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));gap:var(--space-2)}.play .stage{gap:var(--space-2);aspect-ratio:.55;flex-direction:column;max-width:100%;height:100%;min-height:0;margin:0 auto;display:flex;position:relative}.play .notice,.play .banner{font-size:var(--text-sm);padding-top:.35rem;padding-bottom:.35rem}.play .ladder{flex:1;min-height:0}.play .board{width:100%;height:100%}.play button{min-height:var(--control-h-sm);padding:0 var(--space-4);font-size:var(--text-lg)}.play .stage[data-landed] .ladder:before{content:"";background:var(--color-scrim);position:absolute;inset:0}.landing-band{align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-3);background:var(--color-band);flex-direction:column;animation:.26s band-in;display:flex;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.landing-band .avatar{font-size:44px;line-height:1}.landing-band .name{font-family:var(--font-display);font-size:2rem;font-weight:400;line-height:1.2}.landing-band .landed-text{font-size:var(--text-sm);color:var(--color-muted)}@keyframes band-in{0%{opacity:0;transform:translateY(calc(16px - 50%))}to{opacity:1;transform:translateY(-50%)}}.result-open{right:0;bottom:calc(var(--control-h-sm) + var(--space-3));align-items:center;gap:var(--space-3);display:flex;position:absolute}.result-open .ready-count{font-size:var(--text-sm);color:var(--color-muted);font-variant-numeric:tabular-nums}@media (width<=480px){.room-header .code{font-size:1.75rem}.landed,.landing-band .name{font-size:1.6rem}}.diagnostic{font-size:var(--text-xs);opacity:.6;font-family:ui-monospace,monospace}