:root{color-scheme:light;--bg: #f8f9fb;--bg-surface: #ffffff;--panel: rgba(0, 0, 0, .03);--panel-strong: rgba(0, 0, 0, .05);--panel-hover: rgba(0, 0, 0, .07);--overlay: rgba(0, 0, 0, .3);--line: rgba(0, 0, 0, .08);--line-strong: rgba(0, 0, 0, .14);--text: #1a1d23;--soft: #374151;--muted: #5b6270;--success: #047857;--danger: #b91c1c;--warning: #b45309;--accent: #4f46e5;--accent-hover: #4338ca;--accent-ink: #ffffff;--focus-ring: var(--accent);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--theme-color: #f8f9fb;--tile-a: #dc2626;--tile-b: #2563eb;--tile-c: #eab308;--tile-d: #15803d;--tile-e: #7c3aed;--tile-f: #0e7490;--tile-g: #334155;--tile-h: #334155;--tile-i: #334155;--tile-j: #334155;--tile-a-ink: #ffffff;--tile-b-ink: #ffffff;--tile-c-ink: #111827;--tile-d-ink: #ffffff;--tile-e-ink: #ffffff;--tile-f-ink: #ffffff;--tile-g-ink: #ffffff;--tile-h-ink: #ffffff;--tile-i-ink: #ffffff;--tile-j-ink: #ffffff;--tile-a-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 22 20H2Z'/%3E%3C/svg%3E");--tile-b-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 22 12 12 22 2 12Z'/%3E%3C/svg%3E");--tile-c-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");--tile-d-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v18H3Z'/%3E%3C/svg%3E");--tile-e-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20.66 7v10L12 22 3.34 17V7Z'/%3E%3C/svg%3E");--tile-f-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 14.94 8.26 21.8 9.04 16.7 13.72 18.1 20.5 12 17.1 5.9 20.5 7.3 13.72 2.2 9.04 9.06 8.26Z'/%3E%3C/svg%3E");--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-md: 1rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.75rem;--leading-tight: 1.2;--leading-normal: 1.5;--weight-regular: 400;--weight-semibold: 600;--weight-bold: 700;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.5rem;--space-2xl: 4rem;--gutter: 16px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 999px;--width-text: 72ch;--width-layout: 1080px;--width-join: 480px;--header-height: 48px;--transition-fast: .15s ease;--transition-base: .25s ease}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg: #0a0d12;--bg-surface: #161a22;--panel: rgba(255, 255, 255, .045);--panel-strong: rgba(255, 255, 255, .06);--panel-hover: rgba(255, 255, 255, .08);--overlay: rgba(0, 0, 0, .5);--line: rgba(255, 255, 255, .08);--line-strong: rgba(255, 255, 255, .14);--text: #f5f7fa;--soft: #d7dde5;--muted: #a4acb8;--success: #34d399;--danger: #f87171;--warning: #fbbf24;--accent: #818cf8;--accent-hover: #a5b4fc;--accent-ink: #111827;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--theme-color: #0a0d12}}@media not all and (prefers-color-scheme:light){:root[data-default-scheme=dark]{color-scheme:dark;--bg: #0a0d12;--bg-surface: #161a22;--panel: rgba(255, 255, 255, .045);--panel-strong: rgba(255, 255, 255, .06);--panel-hover: rgba(255, 255, 255, .08);--overlay: rgba(0, 0, 0, .5);--line: rgba(255, 255, 255, .08);--line-strong: rgba(255, 255, 255, .14);--text: #f5f7fa;--soft: #d7dde5;--muted: #a4acb8;--success: #34d399;--danger: #f87171;--warning: #fbbf24;--accent: #818cf8;--accent-hover: #a5b4fc;--accent-ink: #111827;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--theme-color: #0a0d12}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body,h1,h2,p,ol,ul,fieldset,legend{margin:0;padding:0}ol,ul{list-style:none}fieldset{border:0;min-inline-size:0}button,input{font:inherit;color:inherit}svg{display:block}a{color:var(--accent)}body{min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-normal);overflow-wrap:anywhere}#app{max-width:var(--width-join);margin-inline:auto;min-height:100vh;min-height:100dvh;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));padding-block-end:max(var(--space-md),env(safe-area-inset-bottom));display:flex;flex-direction:column}.bar{min-height:var(--header-height);display:flex;align-items:center;gap:var(--space-sm);padding-block-start:env(safe-area-inset-top);border-block-end:1px solid var(--line)}.wordmark{display:inline-flex;align-items:center;gap:6px;font-weight:var(--weight-bold);letter-spacing:.01em;flex:none}.spark{inline-size:1em;block-size:1em;fill:var(--accent)}.bar-title{flex:1;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:var(--text-sm)}.bar-pin{margin-inline-start:auto;color:var(--muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.dot{margin-inline-start:auto;inline-size:10px;block-size:10px;border-radius:var(--radius-full);flex:none;background:var(--muted)}.dot.on{background:var(--success)}.screen{flex:1;display:flex;flex-direction:column;gap:var(--space-md);padding-block:var(--space-lg) var(--space-md)}.form,.poll,.cloud-form,.center{flex:1;display:flex;flex-direction:column;gap:var(--space-md)}.center{align-items:center;justify-content:center;text-align:center}.actions{margin-block-start:auto;display:flex;flex-direction:column;gap:var(--space-sm);align-self:stretch;padding-block-start:var(--space-md)}h1{font-size:var(--text-xl);line-height:var(--leading-tight);font-weight:var(--weight-bold)}h1:focus{outline:none}h1:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}h2{font-size:var(--text-md);color:var(--muted);font-weight:var(--weight-semibold)}.prompt{max-block-size:5.2em;overflow-y:auto}.look{font-size:var(--text-lg);color:var(--soft)}.title{color:var(--soft);font-weight:var(--weight-semibold)}.muted{color:var(--muted)}.lead{font-size:var(--text-lg)}.fine{color:var(--muted);font-size:var(--text-sm);text-align:center}.error{color:var(--danger);font-weight:var(--weight-semibold)}.noscript{padding:var(--gutter)}.sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn{min-block-size:56px;padding-inline:var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--panel-strong);font-size:var(--text-md);font-weight:var(--weight-semibold);cursor:pointer;touch-action:manipulation}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.small{min-block-size:48px;padding-inline:var(--space-md)}.btn.link{min-block-size:48px;background:none;border-color:transparent;color:var(--accent);text-decoration:underline;align-self:center}.btn.surprise{align-self:flex-start;padding-inline:var(--space-sm)}.btn.hl{border-color:var(--accent);text-decoration:none}.btn:disabled{opacity:.5;cursor:default}.field{inline-size:100%;min-block-size:56px;padding-inline:var(--space-md);border-radius:var(--radius-md);border:2px solid var(--line-strong);background:var(--bg-surface);font-size:max(16px,var(--text-lg))}.field[aria-invalid=true]{border-color:var(--danger)}.field::placeholder{color:var(--muted)}.pin{text-align:center;font-size:var(--text-2xl);letter-spacing:.3em;font-variant-numeric:tabular-nums}.tile-a{--t: var(--tile-a);--ti: var(--tile-a-ink)}.tile-b{--t: var(--tile-b);--ti: var(--tile-b-ink)}.tile-c{--t: var(--tile-c);--ti: var(--tile-c-ink)}.tile-d{--t: var(--tile-d);--ti: var(--tile-d-ink)}.tile-e{--t: var(--tile-e);--ti: var(--tile-e-ink)}.tile-f{--t: var(--tile-f);--ti: var(--tile-f-ink)}.tile-g{--t: var(--tile-g);--ti: var(--tile-g-ink)}.tile-h{--t: var(--tile-h);--ti: var(--tile-h-ink)}.tile-i{--t: var(--tile-i);--ti: var(--tile-i-ink)}.tile-j{--t: var(--tile-j);--ti: var(--tile-j-ink)}.tiles{display:flex;flex-direction:column;gap:var(--space-sm)}.choices{display:flex;flex-direction:column;gap:var(--space-md)}.legend{margin-block-end:var(--space-md)}.screen.only .choices{flex:1}.tile{position:relative;display:flex;align-items:center;gap:var(--space-sm);inline-size:100%;min-block-size:64px;padding:var(--space-sm) var(--space-md);border:3px solid transparent;border-radius:var(--radius-md);background:var(--t);color:var(--ti);text-align:start;font-size:var(--text-lg);font-weight:var(--weight-semibold);cursor:pointer;touch-action:manipulation;transition:transform var(--transition-fast),opacity var(--transition-fast)}.tile:active:not(:disabled){transform:scale(.98)}.tile:disabled,.tile.off,.tile.static{cursor:default}.tiles:has(.picked) .tile:not(.picked):disabled,.tile.off:not(.picked){opacity:.55}.tile.picked{border-color:var(--text);box-shadow:0 0 0 2px var(--bg)}.tile-face{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-inline-size:0}.shape{inline-size:28px;block-size:28px;flex:none;fill:currentColor}.key{font-weight:var(--weight-bold);min-inline-size:1.25em}.text{flex:1;min-inline-size:0}.note{font-size:var(--text-sm);font-weight:var(--weight-semibold);padding:2px var(--space-sm);border-radius:var(--radius-full);background:var(--bg);color:var(--text);flex:none}.tile-input{position:absolute;opacity:0;inline-size:1px;block-size:1px;margin:0}.tile.choice:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}.tick{inline-size:24px;block-size:24px;flex:none;border:2px solid currentColor;border-radius:6px}.tick.radio{border-radius:var(--radius-full)}.picked .tick{background:currentColor;box-shadow:inset 0 0 0 4px var(--t)}.screen.only{padding-block-start:var(--space-md)}.tiles.grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(22vh,1fr)}.tiles.grid.n1,.tiles.grid.n2{grid-template-columns:1fr}.tiles.grid.n3>:last-child,.tiles.grid.n5>:last-child{grid-column:1 / -1}.tiles.grid .tile{flex-direction:column;justify-content:center;min-block-size:22vh}.tiles.grid .tile-face{flex:none;flex-direction:column;gap:var(--space-xs)}.tiles.grid .shape{inline-size:56px;block-size:56px}.tiles.grid .key{font-size:var(--text-2xl);min-inline-size:0}.tiles.grid .tick{position:absolute;inset-block-start:var(--space-sm);inset-inline-end:var(--space-sm)}.countdown{display:flex;flex-direction:column;gap:var(--space-xs);--bar: var(--accent)}.count-num{align-self:flex-end;font-variant-numeric:tabular-nums;font-weight:var(--weight-bold);font-size:var(--text-lg)}.count-track{block-size:8px;border-radius:var(--radius-full);background:var(--panel-strong);overflow:hidden}.count-bar{block-size:100%;background:var(--bar);transform-origin:left center;will-change:transform}[dir=rtl] .count-bar{transform-origin:right center}.countdown.danger{--bar: var(--danger);color:var(--danger)}.status-h{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);text-align:center;font-size:var(--text-2xl)}.status-h.ok{color:var(--success)}.status-h.bad{color:var(--danger)}.status-icon.big{font-size:var(--text-3xl)}.pop{animation:pop .25s ease-out}@keyframes pop{0%{transform:scale(.85)}}.points{text-align:center;font-size:var(--text-xl);font-weight:var(--weight-bold)}.totals{text-align:center;color:var(--soft);font-variant-numeric:tabular-nums}.your-answer{display:flex;flex-direction:column;gap:var(--space-sm)}.explain{color:var(--soft)}.sent{color:var(--success);font-weight:var(--weight-semibold)}.results{display:flex;flex-direction:column;gap:var(--space-md)}.result{display:flex;flex-direction:column;gap:var(--space-xs)}.result-row{display:flex;align-items:center;gap:var(--space-sm)}.chip{display:flex;flex:1;min-inline-size:0;font-weight:var(--weight-semibold)}.chip .shape{inline-size:20px;block-size:20px;fill:var(--t)}.result-pct{font-variant-numeric:tabular-nums;font-weight:var(--weight-bold)}.result-track{display:block;block-size:12px;border-radius:var(--radius-full);background:var(--panel-strong);overflow:hidden}.result-fill{display:block;block-size:100%;background:var(--t);transform:scaleX(var(--pct, 0));transform-origin:left center}[dir=rtl] .result-fill{transform-origin:right center}.result.mine .chip{text-decoration:underline}.cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:var(--space-xs) var(--space-md)}.cloud li{font-size:calc(var(--text-md) + var(--w, .5) * 1.25rem);font-weight:var(--weight-semibold);line-height:var(--leading-tight)}.cloud li.mine{color:var(--accent)}.counter{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.sent-list ul{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md)}.sent-list li{font-weight:var(--weight-semibold)}.ok{color:var(--success)}.look-big{font-size:var(--text-xl);color:var(--soft)}.waiting h1{font-size:var(--text-2xl)}.final-you{font-size:var(--text-xl);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}.podium{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-sm)}.podium li{display:flex;align-items:center;gap:var(--space-sm);min-block-size:48px;padding-inline:var(--space-md);border-radius:var(--radius-md);background:var(--panel-strong);text-align:start}.podium li.me{outline:2px solid var(--accent)}.rank,.score{font-variant-numeric:tabular-nums;font-weight:var(--weight-bold)}.who{flex:1;min-inline-size:0}.you-tag{font-size:var(--text-sm);font-weight:var(--weight-bold);padding:2px var(--space-sm);border-radius:var(--radius-full);background:var(--accent);color:var(--accent-ink)}.banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-block-start:var(--space-sm);min-block-size:48px;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);font-weight:var(--weight-semibold);background:var(--panel-strong);border:2px solid var(--line-strong)}.banner.reconnecting{border-color:var(--warning)}.banner.failed{border-color:var(--danger)}.toast{position:fixed;inset-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));inset-block-start:calc(var(--header-height) + env(safe-area-inset-top) + var(--space-sm));max-inline-size:calc(var(--width-join) - 2 * var(--gutter));margin-inline:auto;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);background:var(--bg-surface);border:2px solid var(--danger);box-shadow:var(--shadow-lg);font-weight:var(--weight-semibold);z-index:2}.spinner{display:inline-block;inline-size:20px;block-size:20px;border-radius:var(--radius-full);border:3px solid currentColor;border-inline-end-color:transparent;animation:spin .8s linear infinite;flex:none}.spinner.big{inline-size:40px;block-size:40px;color:var(--accent)}@keyframes spin{to{transform:rotate(1turn)}}@media(orientation:landscape)and (max-height:500px){.tiles.grid{grid-auto-rows:minmax(64px,1fr)}.tiles.grid .tile{min-block-size:64px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.tile:active:not(:disabled){transform:none}.spinner{animation:none;border-inline-end-color:currentColor;opacity:.6}}