/* Mobile capture surface: quiet, legible, and observational. */
:root{color-scheme:light;--bg:#edf1ef;--panel:#f8faf8;--line:#d1dad5;--muted:#64736d;--text:#1e2c28;--lime:#2f716a;--cyan:#3f7183}
html,body,button,a,input,.key,.glyph{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior:none}
.bar{border-bottom-color:var(--line)}
.nav-btn{color:var(--muted)}
.nav-btn:hover{color:var(--text);background:#e3e9e5}
.mark{color:var(--lime)}
.b0{--key:#2f716a}.b1{--key:#3f7183}.b2{--key:#9a7048}.b3{--key:#76618d}.b4{--key:#9b5f64}.b5{--key:#4e806b}.b6{--key:#8d783f}.b7{--key:#66628f}
.key{-webkit-appearance:none;appearance:none;touch-action:none;border-radius:14px;background:#f8faf8;border-color:#cbd5cf;box-shadow:0 2px 5px #263b3212,0 8px 20px #263b320d;transition:transform .11s ease,background .11s ease,border-color .11s ease,box-shadow .11s ease}
.key:active,.key.down{transform:scale(.975);background:#e8efeb}
.key:focus,.key:focus-visible{outline:none;background:#f8faf8;color:var(--key)}
.key:not(.down):not(.confirmed){background:#f8faf8!important;color:var(--key)!important}
.key.confirmed{border-color:var(--key);box-shadow:inset 0 0 0 1px var(--key),inset 0 0 22px color-mix(in srgb,var(--key) 10%,transparent),0 4px 16px #263b3218}
.key{color:var(--key)}
.key.hit{color:var(--key)}
.key.confirmed .glyph{filter:none;color:var(--key)}
.glyph{stroke-linecap:round;stroke-linejoin:round}
.gesture-mark{position:absolute;top:9px;right:9px;width:30px;height:30px;display:grid;place-items:center;pointer-events:none;opacity:0;transform:scale(.7);color:#fff;background:var(--key);border:1px solid var(--key);border-radius:50%;z-index:3}
.gesture-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gesture-mark[data-kind="tap"] svg{stroke-width:2.8}
.gesture-mark[data-kind="double"] svg{stroke-width:2.2}
.gesture-mark[data-kind="long"] svg{stroke-width:1.7}
.gesture-mark.show{opacity:1;transform:scale(1);transition:opacity .12s ease,transform .12s ease}
.gesture-mark.fade{opacity:0;transform:scale(1.12);transition:opacity .2s ease,transform .2s ease}
.key.hit{animation:confirmed-hit .42s cubic-bezier(.2,.8,.2,1)}
.key.hit-double{animation:confirmed-double .5s cubic-bezier(.2,.8,.2,1)}
.key.hit-long{animation:confirmed-long .65s cubic-bezier(.2,.8,.2,1)}
@keyframes confirmed-hit{0%{transform:scale(.965)}38%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes confirmed-double{0%,55%{transform:scale(.965)}28%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes confirmed-long{0%{transform:scale(.965)}45%{transform:scale(1.04)}100%{transform:scale(1)}}

.undo{color:#f8faf8;background:var(--lime);box-shadow:0 5px 16px #263b3230}
.tile,.stat-card,.block{background:var(--panel);border-color:var(--line)}
.ranges{background:#e3eae6;border-color:var(--line)}
.ranges button.on{background:#f8faf8;color:var(--text)}
.gate input{background:#f8faf8;border-color:var(--line);color:var(--text)}
.modes{border-bottom-color:var(--line)}
.go{background:var(--lime);color:#f8faf8}
@media(max-width:600px){.board{padding:14px 14px calc(18px + env(safe-area-inset-bottom));min-height:calc(100svh - 64px)}.grid{width:100%;height:min(calc(100svh - 104px),680px);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:10px}.key{border-radius:13px}.gesture-mark{top:9px;right:9px;width:29px;height:29px}.gesture-mark svg{width:21px;height:21px}.undo{right:18px;bottom:calc(18px + env(safe-area-inset-bottom))}}