.play-surface{max-width:920px;margin:0 auto;padding:1.5rem;color:var(--ink, #343b38)}.play-surface button,.play-surface input,.play-surface select{font:inherit}.play-surface button{cursor:pointer;border:1px solid var(--line, #cbc7be);background:var(--paper, #faf7ef);color:inherit;padding:.6rem .85rem;border-radius:4px;min-height:42px}.play-surface button:disabled{cursor:default;opacity:.55}.play-surface button:focus-visible,.play-surface input:focus-visible,.play-surface select:focus-visible{outline:3px solid #397d88;outline-offset:3px}.play-surface .toolbar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}.play-surface label{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.play-surface input:not([type=range]):not([type=color]),.play-surface select{border:1px solid var(--line, #ccc5b9);padding:.6rem;background:var(--paper, #faf7ef);color:inherit;max-width:100%}.play-surface input[type=file]{max-width:200px}.play-surface p{line-height:1.65}.play-credit{font-size:.75rem;opacity:.65;margin-top:2rem}.board-game{max-width:520px;margin:auto}.number-grid,.binary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#bcb4a7;padding:8px;border-radius:8px;touch-action:none;user-select:none}.number-tile{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#d6cfc2;color:#3b3833;border-radius:4px;font-size:clamp(22px,8vw,45px);font-weight:700}.number-tile[data-level="1"]{background:#eee5d5}.number-tile[data-level="2"]{background:#eee1ba}.number-tile[data-level="3"]{background:#e9b77f}.number-tile[data-level="4"]{background:#e89b64}.number-tile[data-level="5"]{background:#e47d5a;color:#fff}.number-tile[data-level="6"]{background:#db5d41;color:#fff}.number-tile[data-level="7"],.number-tile[data-level="8"],.number-tile[data-level="9"],.number-tile[data-level="10"],.number-tile[data-level="11"]{background:#bb4b32;color:#fff;font-size:30px}.play-surface .binary-tile{aspect-ratio:1;border:0;font-size:32px;color:#fff;border-radius:4px}.play-surface .binary-tile.color-0{background:#e4dfd5}.play-surface .binary-tile.color-1{background:#d95545}.play-surface .binary-tile.color-2{background:#397d88}.play-surface .binary-tile:disabled{opacity:1}.direction-pad{text-align:center;display:grid;justify-content:center;gap:4px;margin:1rem 0}.direction-pad>button{justify-self:center}.direction-pad>div{display:flex;gap:4px}.direction-pad button{min-width:52px;font-size:22px}.sokoban-grid{display:grid;gap:3px;background:#e5dfd3;padding:4px;border-radius:5px}.soko-cell{aspect-ratio:1;display:flex;justify-content:center;align-items:center;font-size:clamp(20px,6vw,35px);background:#f3efe4;color:#343b38}.soko-cell.wall{background:#535a52;border:3px solid #62695f}.soko-cell.target{background:#c6dfd9;color:#397d88}.soko-cell.box{color:#c36637;background:#ead3ae}.soko-cell.player{color:#db4938}.sound-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.play-surface .sound-pad{aspect-ratio:1;font-size:32px;border:0;opacity:1;color:#fff;transition:filter .1s,transform .1s}.play-surface .sound-0{background:#397d88}.play-surface .sound-1{background:#c38335}.play-surface .sound-2{background:#db4938}.play-surface .sound-3{background:#665d8d}.play-surface .sound-pad.sounding{filter:brightness(1.7);transform:scale(.95);box-shadow:0 0 0 4px #fff inset}.physics-canvas{display:block;width:100%;max-width:480px;aspect-ratio:1;border:1px solid var(--line, #ccc);border-radius:6px;touch-action:none;margin:0 auto}.physics-workshop{max-width:760px;margin:0 auto}.pixel-editor,.guess-grid{display:grid;grid-template-columns:repeat(16,1fr);max-width:480px;aspect-ratio:1;border:1px solid #c9c1b1;margin:1rem auto;touch-action:none;user-select:none;background:#e5dfd3;gap:1px}.play-surface .pixel-cell{padding:0;min-height:0;border:0;aspect-ratio:1;border-radius:0;box-shadow:inset 0 0 0 .5px #a89e8d44}.play-surface .pixel-cell:focus-visible{position:relative;outline-offset:-3px}.palette-bar{justify-content:center}.play-surface .palette-bar>button:not(:last-child){min-width:38px;width:38px;padding:0;border-radius:50%;height:38px;min-height:38px}.palette-bar>button.selected{outline:3px solid #397d88;outline-offset:3px}.beat-scroll{overflow-x:auto;margin-bottom:1rem}.beat-grid{min-width:600px}.beat-row{display:grid;grid-template-columns:52px repeat(16,1fr);align-items:center;gap:4px;margin:5px 0}.beat-row>span{font-size:12px}.play-surface .beat-cell{aspect-ratio:1;padding:0;min-height:30px;background:#e0dacf;border:0;border-radius:3px}.play-surface .beat-cell:nth-child(4n+2){border-left:2px solid #a29888}.play-surface .beat-cell.on{background:#397d88}.play-surface .beat-cell.current{box-shadow:inset 0 0 0 3px #db4938}@media(max-width:540px){.play-surface{padding:1rem .6rem}.play-surface .toolbar{gap:.5rem}.play-surface label{font-size:14px}.play-surface input[type=range]{max-width:130px}.number-grid,.binary-grid{gap:5px;padding:5px}.number-tile[data-level="10"],.number-tile[data-level="11"]{font-size:25px}.pixel-editor{gap:0}}