:root{--page-bg:#0f0f12;--card-bg:#1c1c22;--text:#f0f0f0;--text-dim:#9a9aa5;--border:#2c2c33;--accent:#3b82f6;--done-bg:#22c55e;--done-text:#fff;--danger:#ef4444;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--text);overscroll-behavior:none;background:0 0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}button{font:inherit;color:inherit}.page{flex-direction:column;display:flex;position:fixed;inset:0}.page--control{background:var(--page-bg);padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))}.page--display{pointer-events:none;cursor:default;padding:8px}.page--display .board-header{text-shadow:0 1px 3px #000000d9}.board{flex-direction:column;flex:1;gap:clamp(6px,1.2cqw,14px);min-height:0;display:flex;container-type:size}.board--loading{visibility:hidden}.board-header{flex-shrink:0;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.board-left{justify-self:start}.board-right{justify-self:end;align-items:center;display:flex}.board-title{white-space:nowrap;font-size:clamp(1.1rem,5.5cqw,3.5rem);font-weight:700}.status-dot{background:var(--done-bg);border-radius:50%;width:8px;height:8px}.status-dot.offline{background:var(--danger)}.progress{background:var(--border);border-radius:999px;flex-shrink:0;height:clamp(5px,.8cqw,10px);overflow:hidden}.progress-fill{background:var(--accent);border-radius:inherit;height:100%;transition:width .25s}.grid{flex:1;grid-template-rows:repeat(10,minmax(0,1fr));grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,1cqw,12px);min-height:0;display:grid;container-type:size}.cell{background:var(--card-bg);min-width:0;min-height:0;color:var(--text);border:1px solid var(--border);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;border-radius:clamp(6px,1.4cqw,16px);justify-content:center;align-items:center;padding:0;font-size:min(4.2cqw,5cqh);font-weight:600;display:flex;box-shadow:0 1px 4px #00000059}.cell.done{background:var(--done-bg);color:var(--done-text);border-color:var(--done-bg)}button.cell{cursor:pointer;touch-action:manipulation;transition:transform .1s}button.cell:active{transform:scale(.88)}.cell.changed{z-index:1;position:relative}.cell.changed.done{animation:.38s cubic-bezier(.34,1.56,.64,1) pop-in}.cell.changed:not(.done){animation:.25s ease-out pop-out}@keyframes pop-in{0%{background-color:var(--card-bg);border-color:var(--border);transform:scale(.85)}55%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes pop-out{0%{background-color:var(--done-bg);border-color:var(--done-bg);transform:scale(1)}50%{transform:scale(.9)}to{transform:scale(1)}}.reset-btn{color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;padding:.3em .7em;font-size:.7rem}.pin-screen{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex}.pin-screen h1{margin:0;font-size:1.4rem}.pin-input{background:var(--card-bg);width:min(260px,100%);color:var(--text);border:1px solid var(--border);text-align:center;letter-spacing:.4em;border-radius:10px;outline:none;padding:12px;font-size:1.6rem}.pin-input:focus{border-color:var(--accent)}.btn{cursor:pointer;border:none;border-radius:10px;padding:10px 18px;font-size:1rem;font-weight:600}.btn-primary{background:var(--accent);color:#fff;width:min(260px,100%)}.btn-primary:disabled{opacity:.6}.btn-secondary{background:var(--border);color:var(--text)}.btn-danger{background:var(--danger);color:#fff}.pin-error{min-height:1.2em;color:var(--danger);margin:0;font-size:.9rem}.modal-overlay{z-index:10;background:#00000080;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;width:min(340px,100%);padding:20px}.modal h2{margin:0 0 8px;font-size:1.15rem}.modal p{color:var(--text-dim);margin:0 0 18px;line-height:1.4}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.page--browser{background:var(--page-bg);padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}.page--browser .board{width:100%;max-width:640px;margin:0 auto}