.tap-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;margin:30px 0}.tap-instrument{padding:24px;border:1px solid var(--line);background:#1d231b;border-radius:18px;align-self:start}.tap-instrument-art{height:190px;text-align:center}.tap-instrument-art svg{height:100%;max-width:100%}.tap-instrument .eyebrow{font-size:.62rem;display:block;margin:20px 0 12px}.tap-instrument h2{font-size:1.6rem;line-height:1.3}.tap-instrument p{font-size:.82rem;color:var(--muted);line-height:1.75;margin:12px 0 23px}.tap-instrument>strong{font-size:.8rem;line-height:1.6;display:block}.tap-instrument .textlink{font-size:.77rem;line-height:1.8}.tap-contact{height:90px;background:#171e15;border:1px solid #364331;border-radius:10px;margin:24px 0 16px;text-align:center;padding:8px}.tap-contact svg{height:100%;max-width:100%}
.tap-desk{scroll-margin-top:12px;padding:28px;border:1px solid #4d583f;border-radius:18px;background:radial-gradient(ellipse at 40% 0,#2e3827,transparent 65%),#1d231b;min-width:0}.tap-setup{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px}.tap-setup label,.tap-settings>label:first-child{display:flex;flex-direction:column;gap:9px;font-size:.78rem;color:var(--muted);min-width:0}.tap-setup select{font:inherit;background:#172015;border:1px solid #62734c;border-radius:8px;color:var(--text);padding:12px;width:100%}.tap-pads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:25px 0 12px}.tap-pads button{position:relative;touch-action:manipulation;user-select:none;cursor:pointer;font:inherit;padding:24px 10px 20px;border:1px solid var(--tone);border-radius:14px;color:var(--text);background:var(--tint);display:flex;align-items:center;flex-direction:column;gap:10px;transition:background .08s,transform .08s;min-width:0}.tap-pads b{font-size:2.4rem;color:var(--tone);line-height:1.2}.tap-pads strong{font-size:1.2rem}.tap-pads small{font-size:.72rem;color:var(--muted);line-height:1.5;text-align:center}.tap-pad-key{position:absolute;top:10px;left:12px;font-size:.65rem;color:var(--tone);border:1px solid currentColor;border-radius:4px;width:18px;line-height:18px}.tap-pads button.hit{transform:translateY(2px);background:var(--tone);color:#172016}.tap-pads button.hit :is(b,small,.tap-pad-key){color:#172016}.tap-pads button:disabled{opacity:.6;cursor:default}.note-x{--tone:#cdb4ed;--tint:#30273d}.note-L{--tone:#f7a565;--tint:#3b2d20}.note-H{--tone:#c8da99;--tint:#303b23}.tap-key-hint{font-size:.77rem;color:var(--muted);line-height:1.8}#tap-studio kbd{font:inherit;border:1px solid #626951;padding:1px 5px;border-radius:4px;color:#dbe5c1}
.tap-settings{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:25px 0}.tap-settings output{color:#c8da99;font-size:.85rem}.tap-settings input[type=range]{width:100%;accent-color:#c8da99}.tap-guide-switch{display:flex;align-items:center;gap:10px;font-size:.83rem;line-height:1.5}.tap-guide-switch input{accent-color:#c8da99;width:18px;height:18px;flex-shrink:0}.tap-guide-switch small{display:block;color:var(--muted);font-size:.74rem;margin-top:4px}.tap-actions{display:flex;gap:10px;flex-wrap:wrap}.tap-actions .btn{font-size:.82rem;min-height:45px}.tap-live{display:flex;align-items:center;gap:18px;margin:24px 0;padding:18px;border:1px solid #46543a;background:#162014;border-radius:12px;min-height:93px}.tap-live>span{font-size:1.15rem;color:#d0e3a2;min-width:74px;text-align:center;font-weight:700;letter-spacing:.06em}.tap-live p{font-size:.82rem;color:var(--muted);line-height:1.65}.tap-score-heading{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:30px 0 18px}.tap-score-heading h2{font-size:1.12rem;margin-top:9px}.tap-score-legend{font-size:.65rem;line-height:1.5;color:var(--muted);max-width:110px}.tap-score-legend i{width:7px;height:7px;border-radius:50%;background:#c8da99;display:inline-block;margin-right:5px}.tap-bar{margin-bottom:20px}.tap-bar-label{display:flex;gap:12px;color:var(--muted);font-size:.62rem;margin-bottom:8px}.tap-bar-label strong{letter-spacing:.08em;font-weight:500;color:#d0dea9}.tap-track{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.tap-cell{border:1px solid #515c43;border-radius:7px;background:#252d21;min-width:0;text-align:center;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative}.tap-cell>small{font-size:.6rem;color:var(--muted)}.tap-cell>b{font-size:1.15rem;color:var(--tone)}.tap-cell.rest{border-style:dashed;background:#1b2319}.tap-cell.rest>b{color:#7d8e6d}.tap-cell.current{outline:2px solid #c8da99;outline-offset:1px;background:#39472b}.tap-cell.current:before{content:'';width:5px;height:5px;background:#e3efba;border-radius:50%;position:absolute;top:7px;right:5px}.tap-user{font-size:1.05rem;min-height:26px;border-top:1px solid #ffffff17;width:90%;padding-top:6px;color:#8e9d7d}.tap-user.tapped{color:#fff2d5}.tap-cell em{font-style:normal;font-size:.6rem;line-height:1.4;min-height:1.4em;color:var(--muted)}.tap-cell.result-hit{border-color:#a7c378}.tap-cell.result-hit .tap-user,.tap-cell.result-hit em{color:#d0e6a8}.tap-cell:is(.result-wrong,.result-early,.result-late){border-color:#c99568}.tap-cell:is(.result-wrong,.result-early,.result-late) em{color:#edba8f}.tap-cell.result-miss .tap-user{color:#aca58f}.tap-timing-note{font-size:.74rem;color:var(--muted);line-height:1.8;margin-top:18px}
.tap-result{display:grid;grid-template-columns:230px 1fr;gap:30px;padding:30px;background:#273322;border:1px solid #66794f;border-radius:17px;margin:25px 0}.tap-result-number{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.tap-result-number>strong{font-size:3.8rem;line-height:1.15;color:#d4e8ac}.tap-result-number small{font-size:1.4rem;color:#aab894}.tap-result-number>span{font-size:.74rem;color:var(--muted);text-align:center}.tap-result h2{font-size:1.5rem;line-height:1.4}.tap-result p{color:#c0cbb5;line-height:1.8;font-size:.9rem;margin:13px 0}.tap-result-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.tap-result-tags>span{font-size:.73rem;border:1px solid #536443;border-radius:7px;padding:7px 10px;background:#202a1b}.tap-result>div>small{font-size:.74rem;color:var(--muted)}.tap-explainer{display:grid;grid-template-columns:1fr 235px;gap:28px;padding:26px 0}.tap-explainer h3{font-size:1.15rem}.tap-explainer p{color:var(--muted);line-height:1.8;font-size:.83rem;margin:12px 0}.tap-explainer .textlink{font-size:.8rem}.tap-explainer>div:last-child{border-left:1px solid var(--line);padding-left:26px}.tap-explainer strong{font-size:2.6rem;display:block;color:#c8da99;margin:7px 0}.tap-explainer .eyebrow{font-size:.62rem}.music-paths{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1200px){.tap-layout{grid-template-columns:1fr}.tap-instrument{display:none}.tap-desk{scroll-margin-top:12px;padding:25px}.music-paths{grid-template-columns:repeat(2,minmax(0,1fr))}.tap-result{grid-template-columns:180px 1fr}.tap-result h2{font-size:1.3rem}}
@media(max-width:760px){.tap-desk{scroll-margin-top:12px;padding:20px 14px}.tap-setup{grid-template-columns:1fr}.tap-pads{gap:8px;position:sticky;top:8px;z-index:3;padding:8px 0;background:#20291c;border-radius:12px}.tap-pads button{padding:24px 5px 13px;gap:6px;border-radius:10px}.tap-pads b{font-size:1.9rem}.tap-pads strong{font-size:1.05rem}.tap-pads small{font-size:.64rem}.tap-pad-key{left:7px;top:7px;font-size:.55rem;line-height:15px;width:15px}.tap-key-hint{font-size:.7rem}.tap-settings{gap:20px;grid-template-columns:1fr}.tap-live{padding:16px 12px;gap:12px}.tap-live>span{min-width:65px;font-size:.95rem}.tap-score-heading{align-items:flex-start}.tap-score-heading h2{font-size:1rem;line-height:1.5}.tap-score-heading .eyebrow{font-size:.6rem}.tap-score-legend{display:none}.tap-track{gap:4px}.tap-cell{padding:7px 1px;border-radius:5px}.tap-cell>b,.tap-user{font-size:1rem}.tap-cell em{font-size:.53rem;min-height:2.8em}.tap-result{grid-template-columns:1fr;padding:24px 20px;gap:24px}.tap-explainer{grid-template-columns:1fr;padding:20px 3px}.tap-explainer>div:last-child{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.music-paths{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tap-pads button{transition:none}.tap-pads button.hit{transform:none}}

#tap-studio[data-active=true] :is(.tap-setup,.tap-settings,.tap-key-hint){display:none}#tap-studio[data-active=true] .tap-pads{position:sticky;top:10px;z-index:3;background:#20291c;padding:8px 0;border-radius:12px;margin-top:0;scroll-margin-top:12px}#tap-studio[data-active=true] .tap-pads button{padding-top:21px;padding-bottom:12px;gap:6px}#tap-studio[data-active=true] .tap-pads b{font-size:1.8rem}#tap-studio[data-active=true] .tap-live{margin:18px 0;min-height:75px}#tap-studio[data-active=true] .tap-score-heading{margin-top:22px}

.tap-cell.has-extra{border-color:#cc9c75}.tap-cell.has-extra em{color:#edba8f}