:root{font-family:system-ui,-apple-system,sans-serif;color:#172b4d;background:#f4f5f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1060px;margin:auto;padding:28px 24px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid #cdd4d0}.brand{font-weight:800;letter-spacing:.13em}.local{font-size:.85rem;color:#50615c}.connection{margin:22px 0 35px}label{font-weight:650;font-size:.9rem}.row{display:flex;gap:10px;margin-top:8px}input{border:1px solid #9aa9a4;border-radius:6px;padding:12px;font:inherit;background:white;min-width:0}.row input{flex:1}button{font:inherit;font-weight:600;border:1px solid #9aa9a4;background:white;border-radius:6px;padding:11px 17px;color:#172b4d;cursor:pointer}button:hover{background:#e7eee8}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #175cd3;outline-offset:3px}.primary{background:#205c47;color:white;border-color:#205c47}.primary:hover{background:#184937}.eyebrow{font-size:.75rem;letter-spacing:.13em;color:#486e5c;font-weight:750}h1{font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.035em;margin:10px 0}h2{font-size:1rem;margin:0 0 10px}.intro{color:#50615c}.tools{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}.tools button{padding:8px 13px}canvas{display:block;margin:12px 0;width:100%;aspect-ratio:5/3;border:1px solid #bcc9c1;border-radius:8px;background-color:white;background-image:radial-gradient(#dfe6e0 1px,transparent 1px);background-size:24px 24px;touch-action:none;cursor:crosshair}.answer-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.answer-row label span{margin-left:12px}.answer-row input{width:130px}.status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px}#status{font-size:.85rem;color:#425a50}.feedback{background:#e7eee8;border-left:4px solid #486e5c;padding:22px;margin-top:20px;border-radius:4px}.feedback p{line-height:1.6;max-width:75ch}footer{font-size:.75rem;color:#52645a;margin:26px 0;line-height:1.6}@media(max-width:580px){main{padding:20px 14px}.row{flex-direction:column}.local{max-width:130px;text-align:right}.answer-row button{flex:1}canvas{aspect-ratio:5/3}.status-row{align-items:flex-start}}

.replay{margin-top:32px;padding-top:24px;border-top:1px solid #bcc9c1}.replay select{font:inherit;padding:8px;max-width:100%;margin:8px;border:1px solid #9aa9a4;border-radius:6px}.replay .tools{align-items:center;margin-bottom:14px}#replay-time{display:block;width:100%;padding:0;margin:14px 0}#replay-markers{height:28px;position:relative;margin:0 12px}#replay-markers button{position:absolute;padding:0;width:10px;height:22px;border-radius:3px;transform:translateX(-50%);background:#486e5c}#replay-position{font-variant-numeric:tabular-nums}#replay-warning{color:#785b22;font-size:.85rem}#replay-board{cursor:default}

.replay-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,2fr);gap:24px}.replay-context{background:#e7eee8;border-radius:6px;padding:18px;overflow-wrap:anywhere}.replay-context h3{margin-top:0}.replay-context h4{margin:20px 0 6px}.replay-context p{white-space:pre-wrap;line-height:1.5;font-size:.9rem}#replay-identity,#replay-context-note{font-size:.8rem;color:#425a50}select:focus-visible{outline:3px solid #175cd3;outline-offset:3px}@media(max-width:800px){.replay-layout{grid-template-columns:1fr}}