.rec{--rec-wood:#f6efdf;--rec-edge:#3a3346;--rec-hole:#1f1b2e}.rf{border:1.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;gap:16px;margin:1em 0 1.6em;padding:22px;display:flex}.rf-top{background:var(--bg-2);border-radius:var(--radius-md);grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;gap:10px 28px;padding:14px 22px;display:grid}.rf-draw svg{width:100%;height:auto;max-height:460px;display:block}.rf-info{flex-direction:column;gap:10px;min-width:0;display:flex}.rf-name{flex-direction:column;gap:2px;margin:0;display:flex}.rf-name b{font:800 3.2rem/1.05 var(--font-display);color:var(--accent-text)}.rf-name span{font:700 .95rem var(--font-body);color:var(--muted)}.rf-staffbox{max-width:240px}.rf-staffbox[hidden]{display:none}.rf-words{font:600 1rem/1.45 var(--font-body);color:var(--ink);margin:0}.rf-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.rf-row .btn{padding:10px 16px}.rf-row .btn[hidden]{display:none}.rf-seg{flex-wrap:wrap;align-self:flex-start;gap:4px;display:inline-flex}.rf-seg button{font:700 .85rem var(--font-body);border:2px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;border-radius:10px;min-height:36px;padding:5px 11px}.rf-seg button[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}.rf-settings{border-top:1.5px solid var(--border);flex-wrap:wrap;align-items:flex-end;gap:12px 24px;padding-top:14px;display:flex}.rf-set{flex-direction:column;gap:6px;display:flex}.rf-label{font:700 .85rem var(--font-body);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}.rf-check{color:var(--ink-soft);cursor:pointer;align-items:center;gap:8px;min-height:40px;font-weight:700;display:inline-flex}.rf-check input{width:18px;height:18px;accent-color:var(--accent)}.rec .rec-body{fill:var(--rec-wood);stroke:var(--rec-edge);stroke-width:2px;stroke-linejoin:round}.rec .rec-ring{fill:none;stroke:var(--rec-edge);stroke-width:1.6px}.rec .rec-window{fill:var(--rec-edge)}.rec .rec-h{stroke:var(--rec-edge);stroke-width:2px}.rec .rec-h.open{fill:#fff}.rec .rec-h.closed{fill:var(--rec-hole);stroke:var(--rec-hole)}.rec .rec-h.rec-pinched{stroke:none}.rec .rec-slash{stroke:var(--accent);stroke-width:2.6px;stroke-linecap:round}.rec-mini .rec-slash{stroke-width:3.4px}.rec .rec-num{font:700 13px var(--font-body);fill:var(--ink-soft)}.rec .rec-back{fill:var(--muted);font-weight:600}.rec .rec-pinch{fill:var(--accent-text);font-weight:800}.rec .rec-link{fill:none;stroke:var(--ring);stroke-width:1.5px;stroke-dasharray:3 4}.rec .rec-hand path{fill:none;stroke:var(--ring);stroke-width:2px}.rec .rec-hand text{font:700 13px var(--font-body);fill:var(--ink-soft)}.rec-mini .rec-h{stroke-width:2.4px}.rec-staff{width:100%;height:auto;display:block}.rec-line{stroke:var(--staff-line);stroke-width:2px}.rec-clef{fill:var(--staff-line)}.rec-note ellipse{fill:var(--ink)}.rec-note .rec-nhole{fill:var(--bg-2)}.rec-acc line{stroke:var(--ink);stroke-width:2px}.rec-acc .rec-bar{stroke-width:5px}.rec-acc .rec-flat{fill:none;stroke:var(--ink);stroke-width:2.5px}.rf-keys{user-select:none;height:118px;position:relative}.rf-k{font:800 .95rem var(--font-body);cursor:pointer;color:#2a2433}.rf-keys .rf-k{box-sizing:border-box;justify-content:center;align-items:flex-end;padding:0 0 8px;display:flex;position:absolute;top:0}.rf-keys .white{background:#fffdf8;border:2px solid #d9d0c0;border-radius:0 0 10px 10px;height:100%;margin-left:-1px}.rf-keys .black{z-index:1;color:#fff;background:#1f1b2e;border:2px solid #1f1b2e;border-radius:0 0 7px 7px;height:62%}.rf-keys .rf-k:hover{border-color:var(--accent)}.rf-keys .white.on{background:var(--accent);border-color:var(--accent);color:#fff}.rf-keys .black.on{background:var(--accent);border-color:var(--accent)}.rf-keys .rf-k:focus-visible{outline:3px solid var(--indigo);outline-offset:-5px;z-index:2}.rf-compact{border-radius:var(--radius-md);box-shadow:none;gap:10px;margin:0;padding:14px}.rf-compact .rf-settings,.rf-compact .rf-words{display:none}.rf-compact .rf-top{grid-template-columns:minmax(0,150px) minmax(0,1fr);padding:10px 14px}.rf-compact .rf-name b{font-size:2.3rem}.rf-compact .rf-keys{height:92px}.prose .rf-key{font:700 .88rem var(--font-body);color:var(--ink-soft);flex-wrap:wrap;gap:6px 20px;margin:.6em 0 .2em;padding:0;list-style:none;display:flex}.prose .rf-key li{align-items:center;gap:6px;margin:0;display:flex}.rf-keysym{width:auto;height:22px}.prose .rf-chart{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin:.8em 0 1.6em;padding:0;list-style:none;display:grid}.prose .rf-chart li{margin:0}.rf-chart button{border:1.5px solid var(--border);background:var(--surface);cursor:pointer;width:100%;color:var(--ink);border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;display:flex;position:relative}.rf-chart button:hover{border-color:var(--accent)}.rf-chart button.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.rf-chart svg{width:44px;height:auto}.rf-chart span{font:800 1.05rem/1.1 var(--font-display);text-align:center;flex-direction:column;align-items:center;display:flex}.rf-chart small{font:700 .68rem var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}.rf-diff{font:700 .6rem var(--font-body);color:var(--indigo-ink);background:var(--indigo-soft);border-radius:6px;padding:1px 4px;font-style:normal;position:absolute;top:4px;right:4px}.prose .rf-compare{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:.8em 0 1.4em;padding:0;list-style:none;display:grid}.prose .rf-compare li{border:1.5px solid var(--border);background:var(--surface);text-align:center;border-radius:12px;margin:0;padding:10px 10px 6px}.rf-compare li>div{justify-content:center;gap:10px;display:flex}.rf-compare figure{margin:0}.rf-compare svg{width:62px;height:auto}.rf-compare figcaption{font:700 .75rem var(--font-body);color:var(--muted)}@media (width<=640px){.rf{padding:14px}.rf-top{grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:8px 12px;padding:12px}.rf-info .rf-seg{flex-wrap:nowrap}.rf-info .rf-seg button{padding:4px 9px;font-size:.8rem}.rf-words{font-size:.9rem}.rf-name b{font-size:2.3rem}.rf-keys{height:96px}.rf-keys .rf-k{padding-bottom:6px;font-size:.72rem}}