@font-face{font-family:Figtree;src:url('assets/fonts/figtree-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url('assets/fonts/figtree-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url('assets/fonts/figtree-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Figtree;src:url('assets/fonts/figtree-900.woff2') format('woff2');font-weight:900;font-display:swap}
:root{--paper:#f7f7f2;--ink:#202a35;--muted:#666b70;--line:#dbddd6;--tile:#fafaf6;--key:#e6e8e1;--correct:#37694c;--present:#a46d16;--absent:#626975;--accent:#d4503b;--on-mark:#fffdf4;--focus:#245c92;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Figtree,sans-serif;font-size:15px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button{touch-action:manipulation}a{color:inherit}[hidden]{display:none!important}.shell{max-width:1160px;margin:auto;padding:0 40px}.masthead{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-size:48px;letter-spacing:-3px;font-weight:900;text-decoration:none;line-height:1}.wordmark span{color:var(--accent)}nav{display:flex;gap:8px}.icon-button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent}.icon-button:hover{background:var(--key)}svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.layout{display:grid;grid-template-columns:1fr 450px;gap:70px;min-height:700px;align-items:center;padding:52px 0}.intro{align-self:stretch;display:flex;flex-direction:column;justify-content:center}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:800;margin:0}.intro .eyebrow{display:flex;align-items:center;gap:8px}.small-square{width:9px;height:9px;background:var(--accent);transform:rotate(-12deg)}h1{font-weight:800;font-size:clamp(48px,5.6vw,70px);letter-spacing:-3.5px;line-height:1.07;margin:30px 0 24px}h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-3px;color:var(--accent)}.intro>p{font-size:17px;color:var(--muted);line-height:1.8;margin:0}.intro-bottom{display:grid;gap:6px;font-size:12px;color:var(--muted);padding-top:76px}.game{width:100%;max-width:450px;margin:auto}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}h2{font-size:18px;letter-spacing:-.5px;margin:8px 0 0;font-weight:600}.text-button{border:0;padding:12px 0;background:transparent;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px}.text-button span{margin-left:5px}.connection{font-size:11px;color:var(--muted);margin:8px 0 19px;min-height:15px}.grid-wrap{position:relative;width:max-content;margin:auto}.grid{display:grid;grid-template-columns:repeat(5,55px);gap:6px}.tile{height:55px;display:grid;place-items:center;background:var(--tile);border:1.5px solid var(--line);font-size:27px;font-weight:800;text-transform:uppercase;position:relative}.tile.filled{border-color:var(--ink)}.tile.correct,.key.correct,.example.correct{background:var(--correct);color:var(--on-mark);border-color:var(--correct)}.tile.present,.key.present,.example.present{background:var(--present);color:var(--on-mark);border-color:var(--present)}.tile.absent,.key.absent,.example.absent{background:var(--absent);color:var(--on-mark);border-color:var(--absent)}.tile.reveal{animation:reveal .38s ease-out both}.tile.pop{animation:pop .12s ease-out}.grid.shake{animation:shake .25s ease-out}.feedback{min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:600;margin:0}.feedback.error{color:var(--accent)}.keyboard{display:grid;gap:6px;width:100%}.key-row{display:flex;justify-content:center;gap:5px}.key{min-width:0;flex:1;height:49px;max-width:40px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:var(--key);font-size:14px;font-weight:800;transition:background .15s,transform .1s}.key:hover{filter:brightness(.94)}.key:active{transform:translateY(2px)}.key.ready{background:var(--ink);color:var(--paper)}.key.wide{flex:1.55;max-width:65px;font-size:10px;letter-spacing:.3px}.key svg{width:20px}.game-footer{display:flex;justify-content:center;gap:14px;margin-top:25px;font-size:10px;color:var(--muted)}.game-footer>span{display:flex;align-items:center;gap:5px}.legend-dot{width:7px;height:7px;display:inline-block}.legend-dot.correct{background:var(--correct)}.legend-dot.present{background:var(--present)}.legend-dot.absent{background:var(--absent)}.page-footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);padding:12px 0 18px}.primary-button{background:var(--ink);color:var(--paper);border:0;border-radius:4px;min-height:48px;padding:12px 24px;font-weight:600;font-size:14px;display:block;width:100%}.primary-button span{float:right}.result{padding:6px 20px 0;text-align:center}.result p{color:var(--muted);font-size:12px;margin:12px 0 0;font-variant-numeric:tabular-nums}.paused-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--line);font-size:22px;font-weight:800}.paused-overlay span{font-size:13px;font-weight:400;color:var(--muted)}dialog{width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 40px);margin:auto;padding:22px 26px 30px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 24px 100px #202a352b}dialog::backdrop{background:#202a355e}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-head .eyebrow{font-size:9px}#panel-title{font-size:32px;font-weight:800;letter-spacing:-1.5px;margin:0 0 14px}.panel-copy{font-size:14px;line-height:1.7;color:var(--muted)}.example-row{display:flex;gap:5px;margin:18px 0 8px}.example{width:38px;height:38px;border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:18px}.help-note{font-size:12px;line-height:1.6;margin:0 0 18px;color:var(--muted)}.panel-rule{border:0;border-top:1px solid var(--line);margin:24px 0}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;margin:24px 0}.stat strong{display:block;font-size:29px;letter-spacing:-1px}.stat span{display:block;font-size:10px;color:var(--muted);margin-top:6px}.section-label{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin:24px 0 15px}.distribution-row{display:grid;grid-template-columns:12px 1fr 18px;gap:10px;align-items:center;margin:9px 0;font-size:12px}.distribution-row meter{width:100%;height:20px;appearance:none;display:block;background:var(--key);border:0;border-radius:2px}.distribution-row meter::-webkit-meter-bar{background:var(--key);border:0;border-radius:2px}.distribution-row meter::-webkit-meter-optimum-value{background:var(--correct);border-radius:2px}.distribution-row meter::-moz-meter-bar{background:var(--correct)}.result-score{font-size:60px;font-weight:800;letter-spacing:-4px;line-height:1;margin:24px 0 8px}.result-score span{font-size:18px;letter-spacing:0;color:var(--muted);margin-left:8px}.share-grid{font-size:20px;line-height:1.35;letter-spacing:4px;margin:20px 0;white-space:pre-wrap}.share-text{width:100%;min-height:145px;background:var(--tile);border:1px solid var(--line);padding:12px;color:var(--ink);font:13px Figtree,sans-serif;line-height:1.6;resize:none}.setting{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.setting strong{font-size:14px}.setting small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:5px}.switch{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:4px;background:var(--key);font-size:12px;font-weight:600}.switch[aria-pressed=true]{background:var(--ink);color:var(--paper)}.palette-preview{display:flex;gap:4px;margin:14px 0}.palette-preview span{width:28px;height:28px;background:var(--correct)}.palette-preview span:nth-child(2){background:var(--present)}.palette-preview span:nth-child(3){background:var(--absent)}.panel-message{font-size:12px;color:var(--accent);line-height:1.6;min-height:20px}.leaderboard{list-style:none;padding:0;margin:20px 0}.leader-row{display:grid;grid-template-columns:25px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.leader-row strong{font-size:13px}.leader-row small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.leader-row.is-me{color:var(--correct);font-weight:800}.retry{padding:0 15px;border:1px solid var(--line);background:var(--key);height:44px;border-radius:4px;margin:0 auto;display:block}.tile .mark-symbol{position:absolute;right:4px;bottom:2px;font-size:10px}.colorblind{--correct:#185ca8;--present:#9b510b}.night{--paper:#202831;--ink:#f0f1e7;--muted:#b5bec5;--line:#52606c;--tile:#27333e;--key:#36434e;--correct:#427a59;--present:#92611a;--absent:#525c6a;--accent:#f3917c;--focus:#a5c9f1;color-scheme:dark}.reduce-motion *{animation:none!important;transition:none!important}
@keyframes reveal{from{transform:scaleY(.55);opacity:.3}to{transform:scaleY(1);opacity:1}}@keyframes pop{from{transform:scale(.93)}to{transform:scale(1)}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(min-width:1400px){.layout{min-height:calc(100dvh - 182px)}}
@media(max-width:950px){.shell{max-width:540px;padding:0 24px}.masthead{height:85px}.wordmark{font-size:42px}.layout{display:block;min-height:0;padding:26px 0 32px}.intro{display:none}.game{max-width:430px}.page-footer{padding-bottom:10px}.connection{margin-bottom:16px}.game-heading h2{font-size:17px}}
@media(max-width:420px){.shell{padding:0 16px}.masthead{height:72px}.wordmark{font-size:38px}nav{gap:0}.layout{padding:20px 0 20px}.grid{grid-template-columns:repeat(5,49px);gap:5px}.tile{height:49px;font-size:25px}.key{height:47px}.key-row{gap:4px}.game-footer{gap:10px;margin-top:20px;font-size:9px}.game-heading h2{font-size:16px}.connection{margin-bottom:12px}}
@media(max-height:710px) and (max-width:950px){.masthead{height:60px}.layout{padding:12px 0}.connection{margin:5px 0 8px}.grid{grid-template-columns:repeat(5,43px);gap:4px}.tile{height:43px;font-size:23px}.feedback{min-height:34px}.key{height:44px}.game-footer{margin-top:12px}.page-footer{padding:2px 0}.result{padding:0}.result p{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mode-tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);margin-bottom:18px}.mode-tabs button{flex:1;min-height:44px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:600;font-size:13px}.mode-tabs button[aria-selected=true]{border-bottom-color:var(--ink);color:var(--ink)}.mode-note{font-size:11px;line-height:1.5;color:var(--muted);margin:-6px 0 16px}.challenge-lobby{padding:28px 15px 42px;text-align:center}.challenge-lobby h3{font-size:27px;letter-spacing:-1px;margin:0 0 12px}.challenge-lobby>p{line-height:1.7;color:var(--muted);font-size:13px}.join-row{display:flex;gap:8px;margin:18px 0}.join-row input{min-width:0;width:100%;background:var(--tile);color:var(--ink);border:1px solid var(--line);padding:12px;font:600 15px Figtree,sans-serif;text-transform:uppercase;letter-spacing:2px}.join-row button{border:1px solid var(--line);background:var(--key);padding:0 20px;min-height:48px;border-radius:4px}.challenge-banner{font-size:12px;padding:10px 12px;border:1px solid var(--line);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:8px;line-height:1.6}.challenge-banner strong{font-size:22px;letter-spacing:3px;display:block}.challenge-banner .text-button{flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.result #play-again{margin-top:10px}.badge-list{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.badge-list span{border:1px solid var(--line);border-radius:3px;padding:7px 10px;font-size:11px;color:var(--correct)}
@media(max-height:812px) and (max-width:950px){.mode-tabs{margin-bottom:12px}.mode-note{margin-bottom:10px}.connection{margin-bottom:10px}.grid{grid-template-columns:repeat(5,43px);gap:4px}.tile{height:43px;font-size:23px}.layout{padding-top:12px}.game-footer{margin-top:12px}.challenge-banner{margin-bottom:10px;padding:6px 10px}.challenge-banner strong{font-size:18px}.key{height:44px}}
@media(max-height:760px) and (max-width:950px){.masthead{height:60px}.layout{padding:8px 0}.mode-tabs{margin-bottom:8px}.connection{margin:6px 0}.mode-note{margin-bottom:6px}.challenge-banner{padding:4px 10px;margin-bottom:6px;font-size:11px}.grid{grid-template-columns:repeat(5,38px);gap:4px}.tile{height:38px;font-size:22px}.feedback{min-height:32px;font-size:12px}.keyboard{gap:4px}.key{height:44px}.game-footer{margin-top:8px}.page-footer{padding:2px 0}}

.room-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.copy-code{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:4px;background:var(--key);color:var(--ink);font:600 12px Figtree,sans-serif;white-space:nowrap}.challenge-banner strong{user-select:all;cursor:text}.copy-code:focus-visible{outline:2px solid var(--ink);outline-offset:3px}