:root { color-scheme: light; --paper:#f3eee4; --ink:#172520; --muted:#778078; --green:#174f42; --green-2:#236d59; --lime:#dff27b; --gold:#e9a94b; --line:#d9d2c5; --card:#fffdf7; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:Inter,"PingFang SC","Noto Sans SC",system-ui,sans-serif; touch-action:manipulation; }
body { background-image:radial-gradient(circle at 15% 0%,rgba(255,255,255,.9),transparent 34%),radial-gradient(circle at 90% 32%,rgba(223,242,123,.13),transparent 30%); }
button,select,input { font:inherit; }
button { color:inherit; }
button,select,input,label,a { touch-action:manipulation; }
.app-shell { width:min(100%,480px); min-height:100dvh; margin:auto; padding:calc(20px + env(safe-area-inset-top)) 22px calc(98px + env(safe-area-inset-bottom)); position:relative; overflow:hidden; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; }
.brand-area{display:flex;flex-direction:column;align-items:flex-start}.brand-area .eyebrow{margin-top:8px}.language-picker{display:flex;align-items:center;gap:5px}.language-globe{width:18px;height:18px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:10px;background:var(--card)}
.eyebrow { font-size:10px; letter-spacing:.18em; color:var(--muted); font-weight:700; }
h1 { margin:2px 0 0; font-family:Georgia,"Songti SC",serif; font-size:35px; font-weight:600; letter-spacing:.08em; }
.native-app .app-shell { padding-top:calc(8px + env(safe-area-inset-top)); }
.native-app .brand-area .eyebrow,.native-app .brand-area h1 { display:none; }
.native-app .topbar { align-items:center; }
.native-app .panel { padding-top:10px; }
.brand-dot { color:var(--gold); }
.audio-pill { min-width:108px;height:38px;border-radius:999px;border:1px solid var(--line);background:rgba(255,253,247,.74);padding:0 12px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:var(--muted);box-shadow:0 5px 18px rgba(38,48,41,.05); }
.audio-dot { width:7px;height:7px;border-radius:50%;background:#b8b8af;box-shadow:0 0 0 4px rgba(184,184,175,.15); }
.audio-pill.ready { color:var(--green);border-color:rgba(23,79,66,.25); }.audio-pill.ready .audio-dot { background:#55a875;box-shadow:0 0 0 4px rgba(85,168,117,.15); }
.panel { padding-top:22px; animation:fade .25s ease; }
@keyframes fade { from { opacity:0; transform:translateY(5px); } }
.pulse-stage { height:276px; display:grid; place-content:center; text-align:center; }
.orbit-ring { width:210px;height:210px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(23,79,66,.13);background:radial-gradient(circle,rgba(255,255,255,.7) 0 58%,transparent 59%);position:relative; }
.orbit-ring:before,.orbit-ring:after { content:"";position:absolute;border-radius:50%;border:1px solid rgba(23,79,66,.08);inset:-13px; }.orbit-ring:after{inset:10px;border-color:rgba(255,255,255,.5)}
.beat-orbit { width:174px;height:174px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--green-2),var(--green));color:white;box-shadow:0 18px 45px rgba(23,79,66,.24),inset 0 1px rgba(255,255,255,.16);transition:transform .08s,background .15s;position:relative;z-index:1; }
.beat-orbit.beat { transform:scale(1.075); background:#2d7963; }
.beat-orbit.accent { background:linear-gradient(145deg,#edf99f,var(--lime));color:var(--ink);box-shadow:0 18px 45px rgba(103,123,44,.2); }
.beat-orbit span { font-family:Georgia,serif;font-size:64px; }
.measure-label { margin:27px 0 0;color:var(--muted);font-size:13px;letter-spacing:.04em; }
.tempo-display { display:flex;align-items:center;justify-content:center;gap:28px; }
.tempo-display button { border:0;background:transparent;font-size:36px;font-weight:200;width:50px; }
.tempo-display div { display:flex;align-items:baseline;gap:8px;min-width:130px;justify-content:center; }
.tempo-display strong { font:68px/.9 Georgia,serif;letter-spacing:-.04em; }
.tempo-display span { font-size:12px;letter-spacing:.14em;color:var(--muted); }
.range { width:100%;margin:18px 0 20px;accent-color:var(--green); }
.setting-row { display:flex;gap:12px;margin-bottom:12px; }
.setting-row label,.secondary { flex:1;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.48);padding:13px 15px;font-size:14px; }
.setting-row label { display:flex;justify-content:space-between;align-items:center;color:var(--muted); }
select { border:0;background:transparent;color:var(--ink);font-weight:650;outline:0; }
.secondary { color:var(--green);font-weight:650; }
.volume-row { height:44px;margin:0 0 14px;padding:0 14px;border-radius:14px;background:rgba(255,253,247,.58);border:1px solid var(--line);display:flex;align-items:center;gap:11px;color:var(--muted);font-size:12px; }.volume-row input{flex:1;accent-color:var(--gold);min-width:80px}.volume-row output{width:34px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.primary { width:100%;height:60px;border:0;border-radius:20px;background:linear-gradient(135deg,var(--green-2),var(--green));color:white;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:11px;box-shadow:0 12px 28px rgba(23,79,66,.24),inset 0 1px rgba(255,255,255,.16); }
.primary.running { background:#243531; }
.play-icon { font-size:12px; }
.reference-row { display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12px; }
.reference-row select,.reference-row input,.language-picker select,.fingering-source select{border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:7px 9px;font:inherit}.custom-frequency{display:flex;align-items:center;gap:4px}.custom-frequency input{width:74px}.reference-help{text-align:center;color:var(--muted);font-size:9px;margin:7px 0 0}.top-actions{display:flex;align-items:center;gap:7px}.language-picker select{max-width:104px;font-size:10px;padding:6px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fingering-source{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--muted);font-size:9px}.fingering-source select{max-width:190px;padding:5px 7px;font-size:9px}
.source-link{font-size:8px;color:var(--green);text-decoration:none;width:max-content}
.frequency-options { display:flex;background:#e7e4dc;border-radius:12px;padding:3px; }
.frequency-options button { border:0;background:transparent;border-radius:9px;padding:7px 9px;font-size:12px; }
.frequency-options button.selected { background:var(--card);color:var(--green);font-weight:750;box-shadow:0 1px 5px rgba(0,0,0,.08); }
.tuner-stage { min-height:455px;text-align:center;padding-top:38px; }
.tuning-status { display:inline-block;padding:7px 15px;border-radius:999px;background:#e7e4dc;color:var(--muted);font-size:12px; }
.tuning-status.in-tune { background:var(--lime);color:var(--ink); }
.note-halo { width:190px;height:190px;margin:20px auto 0;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,255,255,.9) 0 55%,rgba(23,79,66,.05) 56% 68%,transparent 69%); }
.note { height:154px;display:flex;align-items:center;justify-content:center; }
.note strong { font:144px/.95 Georgia,serif;letter-spacing:-.05em; }
.note span { font:30px Georgia,serif;color:var(--muted); }
.frequency-readout { height:24px;color:var(--muted);font-variant-numeric:tabular-nums; }
.meter { position:relative;margin:18px 10px 0;height:76px;overflow:hidden; }
.meter-labels { display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-bottom:24px; }
.ticks { height:22px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 5%);border-bottom:1px solid var(--line); }
.center-mark { position:absolute;left:50%;bottom:0;width:3px;height:34px;background:var(--green);border-radius:2px;transform:translateX(-50%); }
.needle { position:absolute;left:50%;bottom:0;width:3px;height:48px;background:#c45a3b;border-radius:3px;transform:translateX(-50%) rotate(0deg);transform-origin:50% 100%;transition:transform .12s ease-out; }
.cents { margin-top:8px;font:18px Georgia,serif;color:var(--muted); }
.fingering-card { margin:-8px 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,253,247,.72);display:flex;align-items:center;justify-content:space-between;gap:15px;box-shadow:0 8px 24px rgba(37,49,42,.05); }
.fingering-copy { display:flex;flex-direction:column;gap:5px;min-width:0; }.fingering-copy strong{font:20px Georgia,"Songti SC",serif}.fingering-copy small{font-size:10px;color:var(--muted);line-height:1.35}
.recorder-switch{display:flex;width:max-content;padding:2px;background:#e9e5db;border-radius:9px;gap:2px}.recorder-switch button{border:0;background:transparent;border-radius:7px;padding:5px 7px;color:var(--muted);font-size:9px;white-space:nowrap}.recorder-switch button.selected{background:var(--card);color:var(--green);font-weight:750;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.recorder-diagram { width:126px;height:38px;border:2px solid rgba(23,79,66,.28);border-radius:8px 16px 16px 8px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 8px;position:relative;background:#f3e6c9;box-shadow:inset 0 2px 5px rgba(92,67,35,.08); }
.finger-hole { width:9px;height:9px;border:1.5px solid var(--green);border-radius:50%;background:var(--card);flex:0 0 auto; }.finger-hole.state-1{background:var(--green)}.finger-hole.state-2{background:linear-gradient(90deg,var(--green) 0 46%,var(--card) 46% 100%)}.thumb-hole{position:absolute;left:15px;bottom:-9px;width:13px;height:13px;border-width:2px;box-shadow:0 0 0 2px var(--paper)}.thumb-hole.state-2{background:linear-gradient(90deg,var(--green) 0 44%,#fff 44% 100%)}
.double-hole{display:flex;flex-direction:column;gap:2px}.double-hole .finger-hole{width:7px;height:7px;display:block}.alternatives{margin:-3px 0 14px;padding:15px;border:1px solid var(--line);border-radius:18px;background:rgba(255,253,247,.72)}.alternatives-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:11px}.alternatives-heading>div{display:flex;align-items:baseline;gap:7px}.alternatives-heading strong{font:18px Georgia,"Songti SC",serif}.alternatives-heading small,.alternatives-heading>span{font-size:9px;color:var(--muted)}.alternative-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.alternative-card{min-width:0;padding:10px 6px;border:1px solid #e2ddd2;border-radius:12px;background:var(--card);display:flex;flex-direction:column;align-items:center;gap:7px}.alternative-card.extra{display:none}.alternative-card>strong{font-size:10px;color:var(--green)}.alternative-card>small{font-size:8px;line-height:1.35;color:var(--muted);text-align:center;min-height:22px}.alternative-diagram{width:100%;max-width:112px;height:32px;transform:none;padding:0 5px;gap:4px}.alternative-diagram .finger-hole{width:7px;height:7px}.alternative-diagram .double-hole .finger-hole{width:6px;height:6px}.alternative-diagram .thumb-hole{left:13px;bottom:-5px}.expand-alternatives{width:100%;border:0;background:transparent;color:var(--green);font-size:10px;padding:11px 0 0;display:flex;align-items:center;justify-content:center;gap:6px}.expand-alternatives b{font-size:15px;transition:transform .2s}.expand-alternatives.expanded b{transform:rotate(180deg)}
.mechanical-diagram{width:92px;height:194px;display:block;padding:0;border-radius:20px 20px 28px 28px;overflow:visible;background:linear-gradient(90deg,#dfc58d 0 24%,#f3e6c9 25% 74%,#d8b978 75%);flex:0 0 92px}.mechanical-diagram:before{content:"";position:absolute;left:42px;top:8px;bottom:10px;width:8px;border-radius:8px;background:rgba(113,73,31,.1)}.mechanical-part{position:absolute;left:41px;width:12px;height:15px;display:grid;place-items:center;z-index:1}.mechanical-part:after{content:attr(data-index);position:absolute;left:17px;top:-1px;color:rgba(23,79,66,.55);font:8px/1 system-ui}.mechanical-part i{display:block;width:10px;height:10px;border:1.4px solid var(--green);border-radius:50%;background:#fff}.mechanical-part.state-1 i,.mechanical-part.part-4.state-3 i,.mechanical-part.part-0.state-4 i{background:var(--green)}.mechanical-part.state-2>i:first-child,.mechanical-part.part-0.state-3>i:first-child{background:linear-gradient(90deg,var(--green) 50%,#fff 50%)}.mechanical-part b{position:absolute;left:-16px;top:0;width:6px;height:14px;border:1px solid var(--green);border-radius:4px;background:#fff}.mechanical-part.part-4 b{width:15px;height:5px;left:13px;top:2px}.mechanical-part.part-0.state-3 b,.mechanical-part.part-0.state-4 b,.mechanical-part.part-4.state-2 b,.mechanical-part.part-4.state-3 b{background:var(--green)}.mechanical-part.part-0{top:12px;left:30px}.mechanical-part.part-1{top:34px}.mechanical-part.part-2{top:54px}.mechanical-part.part-3{top:74px}.mechanical-part.part-4{top:96px}.mechanical-part.part-5{top:118px}.mechanical-part.part-6{top:139px}.mechanical-part.part-7{top:161px}.mechanical-part.part-8{top:182px}.paired-key{display:flex;gap:3px;width:25px;left:34px}.paired-key i{width:10px;height:14px;border-radius:8px}.mechanical-part.part-7{left:33px}.mechanical-part.part-7 i{width:11px;height:17px;border-radius:2px;transform:rotate(8deg)}.mechanical-part.part-7 i+ i{transform:rotate(-8deg)}.paired-key.state-2 i:first-child{background:var(--green)}.paired-key.state-2 i:last-child{background:#fff}.mechanical-part.part-8{left:37px;width:21px}.mechanical-part.part-8 i{width:21px;height:7px;border-radius:2px 2px 8px 8px}.triple-keys{position:absolute;right:-15px;bottom:14px;display:flex;gap:2px;align-items:end;height:29px}.triple-keys i{display:block;width:6px;height:22px;border:1px solid var(--green);border-radius:2px;background:#fff;transform:rotate(5deg)}.triple-keys i:first-child{width:9px;height:28px}.triple-keys i.pressed{background:var(--green)}.alternative-diagram.mechanical-diagram{width:64px;height:136px;min-height:136px;max-width:64px;transform:none;background-size:100% 100%}.alternative-diagram.mechanical-diagram:before{left:29px;top:6px;bottom:7px;width:6px}.alternative-diagram.mechanical-diagram .mechanical-part{transform:scale(.7);transform-origin:center;left:27px}.alternative-diagram.mechanical-diagram .mechanical-part.part-0{top:7px;left:18px}.alternative-diagram.mechanical-diagram .mechanical-part.part-1{top:23px}.alternative-diagram.mechanical-diagram .mechanical-part.part-2{top:37px}.alternative-diagram.mechanical-diagram .mechanical-part.part-3{top:51px}.alternative-diagram.mechanical-diagram .mechanical-part.part-4{top:66px}.alternative-diagram.mechanical-diagram .mechanical-part.part-5{top:81px}.alternative-diagram.mechanical-diagram .mechanical-part.part-6{top:96px;left:22px}.alternative-diagram.mechanical-diagram .mechanical-part.part-7{top:111px;left:21px}.alternative-diagram.mechanical-diagram .mechanical-part.part-8{top:126px;left:24px}.alternative-diagram.mechanical-diagram .mechanical-part:after{display:none}.alternative-diagram.mechanical-diagram .triple-keys{transform:scale(.7);right:-11px;bottom:8px}
.modern-diagram{width:154px;padding-right:5px;gap:4px}.modern-diagram .triple-keys{position:static;right:auto;bottom:auto;height:22px;margin-left:2px;flex:0 0 auto}.modern-diagram .triple-keys i{width:4px;height:17px;transform:none}.modern-diagram .triple-keys i:first-child{width:7px;height:21px}.alternative-diagram.modern-diagram{width:100%;max-width:138px;height:32px;transform:scale(.82);transform-origin:center}.alternative-diagram.modern-diagram .triple-keys{height:18px}.alternative-diagram.modern-diagram .triple-keys i{height:14px}.alternative-diagram.modern-diagram .triple-keys i:first-child{height:17px}
.mechanical-diagram .mechanical-part.part-4 b{left:-19px}
.recorder-diagram:not(.mechanical-diagram){width:72px;height:194px;flex-direction:column;border-radius:18px 18px 28px 28px;gap:10px;padding:14px 0;flex:0 0 72px}.recorder-diagram:not(.mechanical-diagram) .thumb-hole{left:-9px;top:17px;bottom:auto}.recorder-diagram:not(.mechanical-diagram) .double-hole{flex-direction:row;gap:2px}.modern-diagram{width:78px!important;height:218px!important;padding:13px 0 38px!important;overflow:visible}.modern-diagram .triple-keys{position:absolute;right:-11px;bottom:8px;height:30px;margin:0}.modern-diagram .triple-keys i{width:6px;height:22px;transform:rotate(5deg)}.modern-diagram .triple-keys i:first-child{width:9px;height:28px}.alternative-diagram:not(.mechanical-diagram){width:54px;height:132px;min-height:132px;gap:6px;padding:9px 0;transform:none}.alternative-diagram:not(.mechanical-diagram) .finger-hole{width:7px;height:7px}.alternative-diagram:not(.mechanical-diagram) .thumb-hole{left:-6px;top:12px}.alternative-diagram.modern-diagram{width:58px!important;height:148px!important;min-height:148px;padding-bottom:29px!important}.alternative-diagram.modern-diagram .triple-keys{right:-9px;bottom:5px;transform:scale(.72);transform-origin:bottom left}.lookup-kind-row{display:flex;gap:7px;margin-top:11px}.lookup-kind-row select{flex:1;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:8px;color:var(--ink)}.trill-pair{width:auto!important;height:auto!important;min-width:170px!important;flex-direction:row!important;border:0!important;background:transparent!important;box-shadow:none!important;gap:9px!important;padding:0!important}.trill-stage{display:flex;flex-direction:column;align-items:center;gap:5px}.trill-stage>small{font-size:9px;color:var(--green);font-weight:700}.trill-arrow{font-size:20px;color:var(--gold)}.treble-clef{left:16px!important;top:82px!important;font-size:78px!important}
.tuner-mode-switch{display:flex;margin:0 auto 12px;padding:3px;background:#e7e4dc;border-radius:12px;width:max-content}.tuner-mode-switch button{border:0;background:transparent;border-radius:9px;padding:7px 16px;font-size:11px;color:var(--muted)}.tuner-mode-switch button.selected{background:var(--card);color:var(--green);font-weight:750;box-shadow:0 1px 5px rgba(0,0,0,.08)}.fingering-lookup{margin:0 0 14px;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,253,247,.72)}.lookup-copy{display:flex;flex-direction:column;gap:3px}.lookup-copy strong{font:18px Georgia,"Songti SC",serif}.lookup-copy small,.lookup-result{font-size:10px;color:var(--muted)}.staff-preview{height:220px;margin:12px 0;position:relative;overflow:hidden;background:rgba(255,255,255,.38);border-radius:12px;cursor:pointer;touch-action:manipulation;user-select:none}.staff-preview:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.staff-lines{position:absolute;left:14px;right:18px;top:102px;height:49px;background:repeating-linear-gradient(to bottom,var(--muted) 0 1px,transparent 1px 12px)}.ledger-lines{position:absolute;inset:0;pointer-events:none}.ledger-lines i{position:absolute;left:calc(60% - 6px);width:29px;height:1px;background:var(--ink)}.treble-clef{position:absolute;left:18px;top:91px;font-size:64px;font-family:"Noto Music","Bravura Text","Segoe UI Symbol",serif;line-height:1;z-index:1}.staff-note{position:absolute;left:60%;width:17px;height:12px;border-radius:50%;background:var(--ink);transform:rotate(-14deg);font-size:0;transition:bottom .15s}.staff-note:after{content:"";position:absolute;width:2px;height:34px;background:var(--ink);right:0;bottom:5px}.staff-note:before{content:attr(data-symbol);position:absolute;right:20px;top:-8px;font-size:20px}.lookup-controls{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:6px}.lookup-controls select,.lookup-controls button{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:8px;color:var(--ink)}.lookup-controls button{background:var(--green);color:#fff}.semitone-stepper{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.semitone-stepper button{border:1px solid rgba(23,79,66,.2);border-radius:10px;background:rgba(223,242,123,.28);padding:9px;color:var(--green);font-size:11px;font-weight:700}.semitone-stepper span{font-size:15px}.lookup-result{text-align:center;margin:10px 0 0}
.mechanical-part.part-4.state-2>i:first-child{background:#fff}
.privacy-note { text-align:center;color:var(--muted);font-size:11px;margin:0 0 13px; }
.mic-icon { width:13px;height:13px;border:2px solid white;border-radius:50%;font-size:0; }
.tabbar { position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);height:82px;padding:7px 32px calc(7px + env(safe-area-inset-bottom));background:rgba(255,253,247,.9);backdrop-filter:blur(20px);border-top:1px solid rgba(217,210,197,.8);display:flex;justify-content:space-around;z-index:5;box-shadow:0 -8px 30px rgba(37,49,42,.04); }
.tabbar button { flex:1;border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px; }
.tabbar button.active { color:var(--green);font-weight:700; }
.tab-icon { font-size:25px;line-height:30px; }
.toast { position:fixed;left:50%;bottom:95px;transform:translate(-50%,20px);background:#1d2926;color:white;padding:10px 16px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap;z-index:10; }
.toast.show { opacity:1;transform:translate(-50%,0); }
@media (max-height:760px) { .pulse-stage{height:220px}.orbit-ring{width:170px;height:170px}.beat-orbit{width:142px;height:142px}.beat-orbit span{font-size:52px}.tuner-stage{min-height:390px;padding-top:22px}.note-halo{width:150px;height:150px;margin-top:12px}.note{height:125px}.note strong{font-size:112px}.meter{margin-top:8px}.volume-row{height:40px} }
@media (max-width:390px){.app-shell{padding-left:15px;padding-right:15px}.top-actions{gap:4px}.language-picker select{max-width:88px}.audio-pill{min-width:94px;padding:0 8px}.reference-row{flex-wrap:wrap}.fingering-card{align-items:flex-start}.recorder-diagram:not(.mechanical-diagram){width:112px}}
@media (max-width:390px){.lookup-controls{grid-template-columns:1fr 1fr 1fr}.lookup-controls button{grid-column:1/-1}.mechanical-diagram{transform:none}.fingering-card{gap:6px}}
@media (max-width:390px){.recorder-diagram:not(.mechanical-diagram){width:64px}.modern-diagram{width:70px!important}.trill-pair .recorder-diagram:not(.mechanical-diagram){width:64px}.lookup-kind-row{flex-direction:column}}

/* Family selector, accurately anchored clefs, and safe trill-diagram bounds. */
.recorder-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.recorder-switch button{min-width:0;white-space:normal;line-height:1.25}
.staff-clef{position:absolute;z-index:1;overflow:visible;color:var(--ink);pointer-events:none}
.staff-clef text{fill:currentColor;font-family:"Noto Music","Bravura Text","Segoe UI Symbol",serif}
.treble-clef{left:10px!important;top:54px!important;width:82px;height:134px;font-size:0!important}
.treble-clef text{font-size:106px}
.bass-clef{left:18px;top:76px;width:67px;height:92px}
.bass-clef text{font-size:76px}
.fingering-card:has(.trill-pair){flex-direction:column;align-items:center;overflow:visible}
.fingering-card:has(.trill-pair) .fingering-copy{align-items:center;text-align:center}
.trill-pair{box-sizing:border-box!important;min-width:250px!important;max-width:100%!important;justify-content:center!important;align-items:center!important;overflow:visible!important}
.trill-stage{box-sizing:border-box;min-width:104px;padding:8px 14px 6px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.42);overflow:visible}
.trill-stage>.recorder-diagram{margin-inline:auto}
@media (max-width:390px){.trill-pair{min-width:238px!important;gap:5px!important}.trill-stage{min-width:96px;padding-inline:11px}.trill-arrow{font-size:17px}.staff-preview{overflow:visible}}
.bell-closure{position:absolute;left:50%;bottom:-22px;width:15px;height:15px;transform:translateX(-50%);border:2px solid #8b6837;border-radius:50%;background:#252d29;box-shadow:0 0 0 3px var(--paper);z-index:3}.bell-closure:after{content:"膝";position:absolute;left:20px;top:0;color:var(--muted);font:9px/15px system-ui;white-space:nowrap}.recorder-diagram.has-bell{margin-bottom:30px}.fingering-card:has(> #recorderDiagram.has-bell){padding-bottom:26px;overflow:visible}.alternative-card:has(.has-bell){padding-bottom:13px}.alternative-diagram.has-bell{margin-bottom:21px}.alternative-diagram .bell-closure{bottom:-15px;width:10px;height:10px;border-width:1.5px;box-shadow:0 0 0 2px var(--paper)}.alternative-diagram .bell-closure:after{content:""}.trill-stage:has(.has-bell){padding-bottom:14px}.trill-diagram.has-bell{margin-bottom:28px}.trill-diagram .bell-closure:after{content:"膝"}
.dynamic-badge{display:inline-flex;align-items:center;justify-content:center;min-height:18px;padding:3px 7px;border-radius:999px;font-size:8px;font-weight:800;line-height:1.15;text-align:center}.dynamic-badge.weak{color:#315f77;background:#e4f3fa;border:1px solid #b9dae9}.dynamic-badge.strong{color:#8b3d28;background:#fff0e7;border:1px solid #efc3ad}
.tuner-onboarding{width:min(100%,330px);margin:0 auto 18px;padding:16px 18px;border:1px solid rgba(23,79,66,.18);border-radius:17px;background:linear-gradient(145deg,rgba(216,238,117,.32),rgba(255,253,247,.94));display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 8px 25px rgba(23,79,66,.07)}.tuner-onboarding[hidden]{display:none}.tuner-onboarding strong{font:18px Georgia,"Songti SC",serif;color:var(--green)}.tuner-onboarding span{font-size:10px;line-height:1.5;color:var(--muted)}.tuner-onboarding button{margin-top:5px;border:0;border-radius:999px;background:var(--green);color:white;padding:10px 20px;display:flex;align-items:center;gap:8px;font-weight:750}.tuner-stage.listening .tuning-status:before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#70a12d;box-shadow:0 0 0 4px rgba(112,161,45,.12)}.alternatives-empty{margin:8px 0 0;padding:12px;border-radius:12px;background:rgba(23,79,66,.06);color:var(--muted);font-size:10px;line-height:1.55;text-align:center}