:root{font-family:system-ui,sans-serif;color:#ecf3ff;background:#101b2d;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:840px;margin:auto;padding:20px}h1{margin:0 0 8px;font-size:28px}p{line-height:1.5;color:#b9c9df}button{font:inherit;cursor:pointer;border:1px solid #52637e;border-radius:8px;background:#22334e;color:#fff;padding:10px 13px}.toolbar{display:flex;gap:8px;flex-wrap:wrap}button:hover,button:focus-visible{background:#36587c;outline:2px solid #78dfcb}.play{display:grid;grid-template-columns:1fr 1fr;gap:24px}#grid{display:grid;max-width:340px;border:2px solid #bed0e8;background:#bed0e8;gap:2px}.cell{position:relative;background:#f7faff;aspect-ratio:1}.cell small{position:absolute;top:2px;left:4px;color:#39475e;font-size:11px;pointer-events:none}.cell input{font:700 clamp(22px,5vw,36px) system-ui;text-align:center;border:0;border-radius:0;width:100%;height:100%;padding:12px 0 0;background:transparent;color:#17283e;caret-color:transparent;text-transform:uppercase}.cell.selected{background:#ffe394}.cell.related{background:#d7f7f0}.cell.bad{box-shadow:inset 0 0 0 3px #e54a59}.cell input:focus{outline:3px solid #169c86;outline-offset:-3px}.clue{display:block;text-align:left;width:100%;margin-bottom:7px;font-size:14px}.clue.current{border-color:#76e3cd;background:#36546c}h2{font-size:17px;margin:0 0 10px}.help{font-size:13px}#active{min-height:26px;color:#8ae8d2}#status{min-height:28px;color:#ffe394}@media(max-width:570px){.play{grid-template-columns:1fr}.play>div{max-width:340px}aside{display:grid;grid-template-columns:1fr 1fr;gap:10px}aside h2{display:none}main{padding:14px}}

select{font:inherit;background:#22334e;color:white;padding:10px;border:1px solid #52637e;border-radius:8px}label{align-self:center;font-size:14px}#bank{color:#ffe394}

.cell.selected{background:#ffe394}