.sound-toggle{background:var(--btn,#00000040);width:36px;min-width:36px;height:36px;color:var(--ink,#fff);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:inline-grid}.sound-toggle svg{width:20px;height:20px}.sound-toggle[aria-pressed=true]{opacity:.7}.sound-toggle:focus-visible{outline:3px solid var(--focus,#ffd54a);outline-offset:2px}:root{--ink:#f6f0e6;--btn:#ffffff1f;--btn-on:#ffd54a;--btn-on-ink:#2b2100;--focus:#ffd54a;--card:#fbf6ec;--card-ink:#2a1d14;--plus:#1f8a4c;--minus:#c62f3a;--dialog:#fdfdfb;--dialog-ink:#16181a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--dialog:#261c1c;--dialog-ink:#f3ece4}}:root[data-theme=dark]{--dialog:#261c1c;--dialog-ink:#f3ece4}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(80% 60% at 50% 25%,#5b2228,#1e0c0f 75%),#1e0c0f;font:14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app.bc{grid-template-rows:auto auto 1fr auto auto;justify-items:center;gap:6px;max-width:760px;height:100dvh;margin:0 auto;padding:8px 10px 10px;display:grid}.bc-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.group{gap:3px;display:flex}.btn{font:inherit;color:var(--ink);background:var(--btn);cursor:pointer;border:0;border-radius:9px;min-width:34px;min-height:34px;padding:7px 11px;box-shadow:inset 0 1px #ffffff1f,0 2px 6px #0000004d}.btn[aria-pressed=true]{background:var(--btn-on);color:var(--btn-on-ink);font-weight:700}.btn.primary{background:var(--plus);color:#fff;font-weight:700}.btn:focus-visible,.key:focus-visible,.note:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.sound-toggle{width:34px;height:34px}.bc-status{text-align:center;text-shadow:0 1px 2px #0009;place-items:center;max-width:560px;min-height:2.6em;margin:0;font-weight:700;display:grid}.bc-lists{grid-template-columns:1fr 1fr;gap:10px;width:100%;min-height:0;display:grid}[data-mode=solo] .bc-lists{grid-template-columns:minmax(0,420px);justify-content:center}.bc-col{background:var(--card);min-height:0;color:var(--card-ink);border-radius:12px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 8px 24px #00000073}.bc-col[hidden]{display:none}.bc-col .head{background:#0000000f;border-bottom:1px solid #0000001a;justify-content:space-between;align-items:baseline;gap:6px;padding:8px 12px;display:flex}.bc-col h2{margin:0;font-size:14px}.bc-col .sub{opacity:.75;font-variant-numeric:tabular-nums;font-size:12px}.rows{flex:1;margin:0;padding:4px 8px;list-style:none;overflow-y:auto}.row{border-bottom:1px dashed #0000001f;grid-template-columns:2em 1fr auto;align-items:center;gap:6px;padding:5px 4px;animation:.25s ease-out bc-in;display:grid}@keyframes bc-in{0%{opacity:0;transform:translateY(6px)}}.row .n{opacity:.5;font-size:11px}.row .code{letter-spacing:.25em;font:700 20px/1 ui-monospace,Cascadia Mono,Consolas,monospace}.row .fb{gap:4px;display:flex}.row .fb b{text-align:center;color:#fff;font-variant-numeric:tabular-nums;border-radius:7px;min-width:2.1em;padding:3px 6px;font-size:14px}.row .plus{background:var(--plus)}.row .minus{background:var(--minus)}.row .zero{background:#8b8178}.row.solved{background:#1f8a4c26}.bc-notes{flex-wrap:wrap;justify-content:center;gap:4px;display:flex}.note{cursor:pointer;width:30px;height:30px;color:var(--ink);background:#ffffff1a;border:0;border-radius:8px;font:700 15px/1 system-ui,sans-serif;position:relative}.note.n1{color:#ffffff73;background:#c62f3a59}.note.n1:after{content:"";background:#ff7b84;height:2px;position:absolute;top:50%;left:18%;right:18%;transform:rotate(-35deg)}.note.n2{background:var(--plus);color:#fff}.bc-input{justify-items:center;gap:6px;width:min(100%,420px);display:grid}.bc-slots{gap:8px;display:flex}.slot{background:var(--card);width:46px;height:54px;color:var(--card-ink);border-radius:10px;place-items:center;font:700 28px/1 ui-monospace,Consolas,monospace;display:grid;box-shadow:inset 0 -3px #00000026}.slot.cur{box-shadow:inset 0 -3px 0 #00000026, 0 0 0 3px var(--btn-on)}.bc-keys{grid-template-columns:repeat(3,1fr);gap:6px;width:100%;display:grid}.key{height:44px;color:var(--card-ink);cursor:pointer;background:linear-gradient(#fffaf0,#e8dccb);border:0;border-radius:10px;font:700 20px/1 system-ui,sans-serif;box-shadow:0 3px #a8957f}.key:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #a8957f}.key:disabled{opacity:.4;cursor:default}.key.k-ok{color:#fff;background:linear-gradient(#36b06a,#1f8a4c);font-size:16px;box-shadow:0 3px #135c32}.key.k-del{font-size:18px}.btn.random{width:100%}.overlay{z-index:20;background:#00000073;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.overlay.later{animation:.9s step-end both bc-later}@keyframes bc-later{0%{visibility:hidden}}.dialog{background:var(--dialog);color:var(--dialog-ink);text-align:center;border-radius:14px;flex-direction:column;gap:10px;max-width:340px;padding:20px 24px;display:flex;box-shadow:0 10px 40px #00000073}.dialog h2{margin:0;font-size:20px}.dialog p{margin:0}@media (max-height:520px) and (min-aspect-ratio:1){#app.bc{grid-template:"bar bar""status status""lists side"1fr/1fr minmax(240px,300px);gap:4px 10px;max-width:none;padding:4px 8px}.bc-bar{grid-area:bar}.bc-status{grid-area:status;min-height:1.3em;font-size:12px}.bc-lists{grid-area:lists;height:100%}.bc-notes{grid-area:side;align-self:start}.bc-input{grid-area:side;align-self:end;gap:4px}.btn{min-width:28px;min-height:28px;padding:4px 8px}.slot{width:36px;height:38px;font-size:22px}.key{height:30px;font-size:16px}.note{width:24px;height:24px;font-size:12px}}@media (max-width:400px){.bc-lists{gap:6px}.row .code{letter-spacing:.12em;font-size:16px}.row{grid-template-columns:1.4em 1fr auto}.row .fb b{min-width:1.8em;padding:2px 4px;font-size:12px}.key{height:40px}}@media (prefers-reduced-motion:reduce){.row,.overlay.later{animation:none}}