:root{--background: #F5F1E8;--surface: #FFFCF5;--text: #202B32;--muted: #58636A;--accent: #A63729;--x: #A63729;--o: #176A67;--grid: #57646A;--focus: #245CC5;--success: #21654A;--error: #A02C32;--error-background: #FCECEA;--disabled: #E9E3D8;--line: #6F685C;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--background)}body{margin:0;background:var(--background);color:var(--text);font-family:ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:24px;overflow-wrap:break-word}h1,h2,h3,p{margin:0}h1{font-size:44px;line-height:48px;font-weight:700}.page-room h1{font-size:30px;line-height:36px}h2{font-size:22px;line-height:28px;font-weight:600}h3{font-size:16px;line-height:24px;font-weight:600}a{color:var(--focus)}a:hover{color:var(--text)}.skip{position:absolute;left:16px;top:-48px;background:var(--surface);color:var(--text);padding:12px 16px;z-index:2}.skip:focus{top:8px}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.wrap{width:min(1120px,calc(100% - 64px));margin:0 auto}.site-header{width:min(1120px,calc(100% - 64px));margin:24px auto 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none}.brand-name{font-size:22px;line-height:28px;font-weight:700}.eyebrow{color:var(--muted);font-size:14px;line-height:20px}.logo{flex:0 0 auto}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-bottom:40px}.panel{background:var(--surface);border:1px solid var(--grid);border-radius:12px;padding:24px;box-shadow:0 0 0 4px var(--background),0 0 0 5px var(--grid)}.panel>*+*{margin-top:16px}.steps{margin:16px 0 0;padding-left:20px}.steps li+li{margin-top:8px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:12px 16px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--line)}.btn:disabled{background:var(--disabled);color:var(--text);border-color:var(--line);cursor:default}.form-error{min-height:48px;color:var(--error)}.journal-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:16px}.toolbar{min-height:48px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}#journal-note{min-height:20px;font-size:14px;line-height:20px;color:var(--muted)}#journal-note.is-error{color:var(--error)}table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:12px}caption{text-align:left;font-size:14px;line-height:20px;color:var(--text);padding-bottom:8px}th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:14px;line-height:20px;color:var(--muted);font-weight:600}.k{display:none}.mono,.counter,.kicker,#public-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}.kicker{color:var(--muted);font-size:14px;line-height:20px}.role{min-height:24px;margin:8px 0 24px;font-weight:600}.room-layout{display:grid;grid-template-columns:minmax(0,456px) minmax(0,320px);gap:40px;align-items:start;justify-content:start}.board-column,.side-column,.panel,.journal{min-width:0}.status{min-height:72px;margin-bottom:16px}.status p{min-height:24px}.board-frame{position:relative;max-width:456px;padding:10px}.tick{position:absolute;width:14px;height:14px;border-color:var(--grid);border-style:solid}.tick-tl{top:0;left:0;border-width:2px 0 0 2px}.tick-tr{top:0;right:0;border-width:2px 2px 0 0}.tick-bl{bottom:0;left:0;border-width:0 0 2px 2px}.tick-br{bottom:0;right:0;border-width:0 2px 2px 0}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));aspect-ratio:1;width:100%;gap:2px;padding:2px;background:var(--grid);border-radius:8px}.cell{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:0;border:0;border-radius:6px;background:var(--surface);color:inherit;position:relative}.cell svg{width:66%;height:66%}.cell .mark{opacity:0;transition:opacity .12s linear}.cell .mark.in{opacity:1}.cell .ghost{position:absolute;opacity:0;pointer-events:none}.board.can-play .cell[aria-disabled=false]:hover .ghost-self,.board.can-play .cell[aria-disabled=false]:focus-visible .ghost-self{opacity:.38}.cell.win{background:#f8e7d2;box-shadow:inset 0 0 0 2px var(--grid),inset 0 0 0 6px #f8e7d2,inset 0 0 0 8px var(--grid)}.counter{min-height:24px;margin-top:16px}.result{min-height:80px;margin-top:8px}.side-column{display:flex;flex-direction:column;gap:24px}.hint{color:var(--muted);font-size:14px;line-height:20px}.link-card{min-height:148px}.link-note{color:var(--text)}.link-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.link-value{display:block;width:100%;min-height:48px;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;overflow-x:auto}.copy-status{min-height:24px;color:var(--success)}.mark-x,.winner-x{color:var(--x)}.mark-o,.winner-o{color:var(--o)}.footer{margin:40px auto 32px;font-size:14px;line-height:20px}@media(prefers-reduced-motion:reduce){.cell .mark,.cell .ghost{transition:none}.cell .mark{opacity:1}}@media(max-width:800px){h1,.page-room h1{font-size:32px;line-height:36px}.wrap,.site-header{width:min(1120px,calc(100% - 32px))}.hero,.journal-head,.site-header{display:block}.room-layout{grid-template-columns:minmax(0,1fr)}.hero{gap:16px}.panel+.panel,.journal-head .toolbar{margin-top:16px}.toolbar{align-items:stretch}.journal thead{display:none}.journal tr{display:block;margin:0 0 12px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}.journal td{display:flex;justify-content:space-between;gap:12px;border-bottom:0;padding:8px 0}.k{display:inline;color:var(--muted);font-size:14px;line-height:20px}.link-actions{flex-direction:column}.link-actions .btn{width:100%}.board-frame,.board{max-width:none}.cell .engraving{display:none}}@media(max-width:359px){.wrap,.site-header{width:calc(100% - 16px)}}