:root{--paper:#f4eee2;--paper-2:#ebe3d2;--card:#fbf8f1;--ink:#1d1813;--ink-2:#5a5045;--line:#d6cbb6;--accent:#9a2b1d;--accent-ink:#fff8ef;--gold:#a07a2f;--ok:#2d6a4b;--ok-bg:#dcebdc;--fault:#b3261e;--fault-bg:#f6d9d3;--current:#f1dfb3;--serif:"EB Garamond", Garamond, "Times New Roman", serif;--display:"Cormorant Garamond", "EB Garamond", Garamond, serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{background:var(--paper);color:var(--ink);font:18px/1.45 var(--serif);-webkit-font-smoothing:antialiased}button,select,input{font:inherit;color:inherit}button{cursor:pointer}.app{flex-direction:column;min-height:100dvh;display:flex}main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:0 20px 32px}.masthead{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;width:100%;max-width:1180px;margin:0 auto;padding:14px 20px;display:flex}.brand{text-align:left;background:0 0;border:0;align-items:center;gap:12px;padding:0;display:flex}.brand-mark{color:var(--accent);font-size:34px;line-height:1}.brand strong{font:600 22px/1.1 var(--display);letter-spacing:.02em;display:block}.brand small{color:var(--ink-2);font-size:14px}.proto{letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:2px 8px;font-size:13px}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 6px;font-size:14px}h1{font:500 clamp(30px, 4.4vw, 46px)/1.08 var(--display);margin:0 0 18px}h2{font:600 22px/1.2 var(--display);margin:0 0 12px}h3{font:600 16px/1.2 var(--serif);color:var(--ink-2);margin:0 0 6px}.small{font-size:15px}.muted{color:var(--ink-2)}.primary,.secondary,.ghost{border:1px solid var(--ink);border-radius:999px;min-height:44px;padding:10px 22px;transition:background .12s,color .12s}.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.primary:hover{background:#7f2217}.secondary{background:0 0}.secondary:hover{background:var(--paper-2)}.ghost{border-color:var(--line);background:0 0;min-height:36px;padding:6px 14px;font-size:16px}.ghost:hover{border-color:var(--ink-2)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.home{grid-template-columns:1.25fr 1fr;gap:40px;padding-top:34px;display:grid}.rules{margin:0 0 22px;padding-left:1.1em}.rules li{margin:4px 0}.cta{flex-wrap:wrap;gap:12px;margin:6px 0 14px;display:flex}.setup{background:var(--card);border:1px solid var(--line);border-radius:14px;align-self:start;padding:22px}.inputs{gap:8px;margin-bottom:12px;display:grid}.input-card{text-align:left;border:1px solid var(--line);background:0 0;border-radius:10px;flex-direction:column;gap:2px;padding:10px 14px;display:flex}.input-card small{color:var(--ink-2);font-size:15px}.input-card.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);background:#f7e9e2}.kbd-opts{gap:8px;display:grid}.field{gap:4px;margin:10px 0;display:grid}.field.inline{align-items:center;gap:10px;margin:0;display:flex}.field span{color:var(--ink-2);font-size:15px}select{border:1px solid var(--line);background:var(--card);border-radius:8px;max-width:100%;padding:6px 10px}.check{align-items:center;gap:8px;font-size:16px;display:flex}.records{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}.records p{margin:4px 0}.play{flex-direction:column;gap:12px;padding-top:16px;display:flex}.play-head{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.where{flex-direction:column;display:flex}.table-num{font:600 15px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.table-title{font:500 24px/1.15 var(--display)}.pass{border:1px solid var(--ink-2);border-radius:99px;align-self:start;margin-top:4px;padding:1px 10px;font-size:14px}.pass-usual{background:var(--ink);color:var(--paper);border-color:var(--ink)}.clock{font:600 56px/1 var(--display);font-variant-numeric:tabular-nums;text-align:center;min-width:4ch;position:relative}.clock.urgent{color:var(--fault)}.zen-mark{color:var(--ok);letter-spacing:.1em;font-size:34px}.clock-flash{white-space:nowrap;margin-left:8px;font-size:22px;animation:.9s ease-out forwards rise;position:absolute;top:4px;left:100%}.clock-flash.bonus{color:var(--ok)}.clock-flash.penalty{color:var(--fault)}@keyframes rise{0%{opacity:1;transform:translateY(6px)}to{opacity:0;transform:translateY(-14px)}}.score{justify-content:flex-end;align-items:center;gap:16px;font-size:16px;display:flex}.score b{font-variant-numeric:tabular-nums;font-size:22px}.progress{color:var(--ink-2);align-items:center;gap:14px;font-size:15px;display:flex}.progress .bar{background:var(--line);border-radius:3px;flex:1;height:3px;overflow:hidden}.progress .bar span{background:var(--accent);height:100%;transition:width .12s;display:block}.score-sheet{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 8px 4px;position:relative}.staff{width:100%}.staff-svg{display:block}.staff-svg .cell{fill:#0000;stroke:none;transition:fill .12s}.staff-svg .cell.done{fill:var(--ok-bg);opacity:.55}.staff-svg .cell.current{fill:var(--current);stroke:var(--gold);stroke-width:1.5px}.staff-svg .cell.fault{animation:.5s ease-out fault}@keyframes fault{0%,40%{fill:var(--fault-bg);stroke:var(--fault)}to{fill:var(--current)}}.staff-svg .fig{font:500 16px/1 var(--serif);fill:var(--ink);stroke:none}.staff-svg .fig.start{fill:var(--accent)}.staff-svg .fig .star{font-size:11px}.staff-svg .slash{stroke:var(--ink);stroke-width:1.3px}.staff-svg .fig.hint{fill:var(--accent)}.staff-svg .hint-front .slash{stroke:var(--accent)}.staff-svg .note-bubble{fill:#efe6d3;stroke:#d9ccb1;stroke-width:1px}.staff-svg .note-name{font:italic 500 12px/1 var(--serif);fill:var(--ink-2);stroke:none}.countdown{background:#f4eee2d1;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.countdown span{font:600 96px/1 var(--display);color:var(--accent)}.countdown small{color:var(--ink-2);font-size:18px}.ready-line{border-left:3px solid var(--accent);background:#f7e9e2;margin:0;padding:8px 14px;font-size:17px}.play-foot{flex-direction:column;gap:10px;display:flex}.hint{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.status{color:var(--ink-2);margin:0;font-size:16px}.status.error,.foreign{color:var(--fault)}.kbd-legend{grid-template-columns:17fr 20fr;gap:18px;display:grid}.mini-title{color:var(--ink-2);font-size:14px}.mini{min-width:0;padding-right:14px}.mini-keys{height:92px;display:flex;position:relative}.wk{border:1px solid var(--ink-2);background:#fffdf8;border-right-width:0;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:4px;display:flex;position:relative}.wk:last-of-type{border-right-width:1px}.wk b{font-size:14px}.wk i{color:var(--ink-2);font-size:11px;font-style:normal}.bk{background:var(--ink);height:56%;color:var(--paper);z-index:1;border-radius:0 0 3px 3px;justify-content:center;align-items:flex-end;padding-bottom:3px;display:flex;position:absolute;top:0}.bk b{font-size:11px}.wk.on{background:var(--current)}.bk.on{background:var(--gold)}.mic-meter{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.level{background:var(--paper-2);border-radius:8px;width:140px;height:8px;display:inline-block;overflow:hidden}.level.big{width:100%;height:12px}.level span{background:var(--ok);height:100%;transition:width 80ms;display:block}.heard{flex-wrap:wrap;gap:8px;font-size:16px;display:flex}.heard .ok,.notes .ok{color:var(--ok);font-weight:600}.heard .missing,.notes .missing{color:var(--ink-2)}b.ok{color:var(--ok)}.panel{max-width:900px;padding-top:24px}.panel-head{justify-content:space-between;align-items:center;display:flex}.lede{color:var(--ink-2)}.test-grid{grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0;display:grid}.test-grid>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}.notes{flex-wrap:wrap;gap:8px 14px;margin:0;display:flex}.result-line{margin:0 0 4px;font-size:20px}.tuning summary{cursor:pointer;margin-bottom:8px;font-weight:600}.slider{grid-template-columns:1fr 1.2fr 80px;align-items:center;gap:12px;margin:6px 0;font-size:16px;display:grid}.slider output{text-align:right;font-variant-numeric:tabular-nums}.end{max-width:720px;padding-top:40px}.stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 20px;display:grid}.stats div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.stats dt{color:var(--ink-2);font-size:14px}.stats dd{font:600 30px/1 var(--display);margin:2px 0 0}@media (width<=760px){body{font-size:17px}main{padding:0 16px 24px}.masthead{padding:10px 16px}.brand small{display:none}.home{grid-template-columns:1fr;gap:24px;padding-top:22px}.play-head{grid-template-columns:1fr auto}.score{grid-column:1/-1;justify-content:space-between}.clock{font-size:44px}.clock-flash{top:100%;left:auto;right:0}.kbd-legend,.test-grid{grid-template-columns:1fr}.slider{grid-template-columns:1fr;gap:2px}}.zen-from{flex-wrap:wrap;margin:0 0 12px}.zen-from select{max-width:100%}