:root{--bg:#f3efe6;--bg-radial:rgba(241,215,191,0.9);--bg-start:#efe4d0;--bg-mid:#f7f1e7;--bg-end:#ede6da;--surface:rgba(255,250,242,0.92);--surface-strong:#fffaf1;--text:#1f1a17;--muted:#645a52;--line:rgba(74,50,32,0.15);--accent:#bb5a2c;--accent-dark:#8d3e1c;--accent-soft:#f1d7bf;--success:#295c45;--danger:#9d2f2f;--thumb-hole-fill:#526d9b;--thumb-hole-stroke:#526d9b;--shadow:0 20px 60px rgba(83,55,33,0.12)}html[data-theme=dark]{--bg:#171310;--bg-radial:rgba(161,95,47,0.18);--bg-start:#171310;--bg-mid:#211a16;--bg-end:#110e0c;--surface:rgba(33,26,22,0.9);--surface-strong:#2a201a;--text:#f5ede5;--muted:#c9b4a4;--line:rgba(255,232,214,0.14);--accent:#d67a46;--accent-dark:#f0a26d;--accent-soft:rgba(214,122,70,0.18);--success:#82c8a7;--danger:#f08e8e;--thumb-hole-fill:#8db6ff;--thumb-hole-stroke:#8db6ff;--shadow:0 24px 64px rgba(0,0,0,0.34);--ghost-text:#f6e9dd;--ghost-bg:rgba(255,244,232,0.04);--note-card-bg:#f6efe4;--note-card-text:#241913}:root{--ghost-text:var(--text);--ghost-bg:transparent;--note-card-bg:rgba(255,250,242,0.92);--note-card-text:var(--text)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Georgia,Times New Roman,serif;color:var(--text);background:radial-gradient(circle at top,var(--bg-radial),transparent 30%),linear-gradient(160deg,var(--bg-start) 0,var(--bg-mid) 45%,var(--bg-end) 100%);min-height:100vh;transition:background .18s ease,color .18s ease}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.shell{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:1rem 0 4rem}.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0 2rem;flex-wrap:wrap}.site-footer{justify-content:center;padding:2rem 0 0;color:var(--muted)}.brand{gap:.55rem;font-size:1.4rem;font-weight:700;letter-spacing:.04em}.brand,.brand-beta{display:inline-flex;align-items:center}.brand-beta{justify-content:center;padding:.16rem .48rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 84%,white 16%);color:#fff8f1;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 8px 24px rgba(113,71,39,.18)}.auth-bar,.card-topline,.dashboard-actions,.hero-actions,.meta,.nav,.site-footer{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.page-stack{grid-gap:1.5rem}.hero,.page-stack{display:grid;gap:1.5rem}.hero{grid-template-columns:1.4fr 1fr;grid-gap:1.5rem;align-items:stretch}.hero-copy{padding:3rem;border-radius:28px;background:linear-gradient(135deg,rgba(104,56,26,.95),rgba(190,91,42,.96)),var(--surface-strong);color:#fff8f1;box-shadow:var(--shadow)}.card h1,.card h2,.card h3,.hero-copy h1,.section-heading h1,.section-heading h2{margin:0}.hero-copy h1{font-size:clamp(2.5rem,5vw,4.8rem);line-height:.95;max-width:10ch;margin:.5rem 0 1rem}.card p,.feature-list span,.form-footnote,.form-heading p,.hero-copy p,.section-heading p{color:inherit;opacity:.86}.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:1.5rem;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--surface-strong) 96%,transparent),color-mix(in srgb,var(--surface) 92%,transparent)),var(--surface);color:var(--text)}.card-grid,.dashboard-list,.feature-list{display:grid;grid-gap:1rem;gap:1rem;padding:0;margin:0;list-style:none}.feature-list li{display:grid;grid-gap:.2rem;gap:.2rem;padding:1rem 0;border-bottom:1px solid var(--line)}.feature-list li:last-child{border-bottom:0;padding-bottom:0}.account-preview-card{display:grid;grid-gap:1.2rem;gap:1.2rem;padding:1.35rem}.account-preview-header{display:grid;grid-template-columns:minmax(0,.9fr) minmax(280px,1.1fr);grid-gap:1rem;gap:1rem;align-items:end}.account-preview-header h2{margin-top:.2rem}.account-preview-header p{margin:0;max-width:58ch;color:var(--muted);line-height:1.55}.account-preview-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:.75rem;gap:.75rem;padding:0;margin:0;list-style:none}.account-preview-list li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:.65rem;gap:.65rem;align-items:start;min-height:72px;padding:.85rem .95rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-strong) 80%,transparent)}.account-preview-list li>span{width:.62rem;height:.62rem;margin-top:.35rem;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}.account-preview-list strong{font-size:.94rem;line-height:1.45}.account-preview-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding-top:.1rem}.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--muted)}.hero-copy .eyebrow{color:rgba(255,248,241,.78)}.ghost-button,.solid-button,.text-link,.wide-button{border-radius:999px;transition:transform .12s ease,background .12s ease,color .12s ease}.ghost-button,.solid-button{padding:.8rem 1.2rem;border:1px solid transparent}.solid-button{background:var(--accent);color:white}.ghost-button:hover,.solid-button:hover,.text-link:hover{transform:translateY(-1px)}.ghost-button{background:var(--ghost-bg);border-color:var(--line);color:var(--ghost-text)}.theme-toggle{min-width:78px}.language-toggle{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface-strong) 76%,transparent)}.language-toggle form{margin:0}.language-option{min-width:46px;padding:.4rem .65rem;border:0;border-radius:999px;background:transparent;color:var(--muted);text-align:center;font-weight:700}.language-option.active{background:var(--accent);color:#fff8f1;box-shadow:0 8px 18px rgba(141,62,28,.24)}.wide-button{width:100%;justify-content:center}.section-heading{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;flex-wrap:wrap}.catalog-intro{margin:.25rem 0 0;color:var(--muted);font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.45}.catalog-search-block{display:grid;grid-gap:.45rem;gap:.45rem}.catalog-search{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:.65rem;gap:.65rem;align-items:center;padding:.55rem;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--surface-strong) 84%,transparent);box-shadow:0 16px 44px rgba(83,55,33,.08)}.catalog-search input{width:100%;min-height:44px;border:0;border-radius:16px;padding:.75rem .9rem;background:transparent;color:var(--text);outline:none}.catalog-search input:focus{background:color-mix(in srgb,var(--surface-strong) 74%,transparent)}.catalog-search-actions{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}.catalog-search-actions .ghost-button,.catalog-search-actions .solid-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding-block:.65rem}.catalog-search-clear{color:var(--muted)}.catalog-search-summary{margin:0;color:var(--muted);font-size:.94rem}.catalog-page-size,.catalog-pagination,.catalog-pagination-actions,.catalog-toolbar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.catalog-pagination,.catalog-toolbar{justify-content:space-between}.catalog-page-size{gap:.35rem;color:var(--muted);font-size:.9rem}.catalog-page-size-option{display:inline-flex;align-items:center;justify-content:center;min-width:2.35rem;min-height:2rem;padding:.35rem .65rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface-strong) 74%,transparent);color:var(--muted);font-weight:700}.catalog-page-size-option.active{background:var(--accent);color:#fff8f1;border-color:transparent}.catalog-pagination{padding-top:.25rem}.catalog-pagination-page,.catalog-pagination-summary{color:var(--muted);font-size:.94rem}.catalog-pagination-actions .ghost-button,.catalog-pagination-disabled{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding-block:.58rem}.catalog-pagination-disabled{cursor:default;opacity:.48}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-item,.detail-card,.notation-card,.tablature-card{display:grid;grid-gap:1rem;gap:1rem}.meta{font-size:.92rem;color:var(--muted)}.pill{display:inline-flex;align-items:center;border-radius:999px;background:var(--accent-soft);padding:.3rem .7rem;font-size:.82rem}.pill.public{background:rgba(41,92,69,.14);color:var(--success)}.pill.private{background:rgba(157,47,47,.12);color:var(--danger)}.pill.review{background:rgba(187,90,44,.14);color:var(--accent-dark)}.tag-list,.tag-picker-results,.tag-picker-selected{display:flex;gap:.45rem;flex-wrap:wrap}.tag-chip,.tag-picker-option,.tag-picker-selected-chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface-strong) 72%,transparent);color:var(--muted);font-size:.82rem}.tag-chip{padding:.28rem .62rem}.tag-picker-panel{display:grid;grid-gap:.75rem;gap:.75rem;padding:1rem;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--surface-strong) 82%,transparent)}.tag-picker-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}.tag-picker-header h2{margin:.15rem 0 0;font-size:1.1rem}.tag-picker-count{color:var(--muted);font-weight:700}.tag-picker-search input{border-radius:999px}.tag-picker-selected{padding-top:.1rem}.tag-picker-option,.tag-picker-selected-chip{border-color:color-mix(in srgb,var(--line) 88%,transparent);gap:.4rem;padding:.38rem .68rem;background:color-mix(in srgb,var(--surface-strong) 72%,transparent);color:var(--text);cursor:pointer}.tag-picker-selected-chip{border-color:color-mix(in srgb,var(--accent) 52%,var(--line));background:color-mix(in srgb,var(--accent-soft) 58%,var(--surface-strong));color:var(--accent-dark)}.tag-picker-selected-chip span:last-child{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,transparent);font-size:.7rem;line-height:1}.tag-picker-option:hover,.tag-picker-selected-chip:hover{transform:translateY(-1px)}.form-card{width:min(680px,100%);margin:2rem auto 0;display:grid;grid-gap:1rem;gap:1rem}.editor-form{width:min(1340px,100%);gap:1.25rem}.legal-card,.report-card{width:min(760px,100%);margin:0 auto}.settings-grid{display:grid;grid-gap:1.25rem;gap:1.25rem}.settings-card{width:min(760px,100%);margin:0 auto}.account-tools-grid,.stats-grid{display:grid;grid-gap:1rem;gap:1rem}.account-tool-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.account-tool-card h2,.account-tool-card p{margin-bottom:0}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.stat-card{display:grid;grid-gap:.25rem;gap:.25rem}.stat-card strong{color:var(--heading);font-family:var(--font-serif);font-size:clamp(2rem,4vw,3.3rem);line-height:1}.stat-card span:last-child{color:var(--muted)}.statistics-panel{display:grid;grid-gap:1rem;gap:1rem}.stats-table{display:grid;border:1px solid var(--line);border-radius:18px;overflow:hidden}.stats-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(80px,.5fr);grid-gap:.75rem;gap:.75rem;align-items:center;padding:.8rem .95rem;border-bottom:1px solid var(--line)}.stats-row:last-child{border-bottom:0}.stats-row.heading{background:color-mix(in srgb,var(--surface-strong) 82%,transparent);color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase}.stats-row strong{color:var(--heading)}.form-heading{display:grid;grid-gap:.5rem;gap:.5rem}.field{display:grid;grid-gap:.45rem;gap:.45rem}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;background:color-mix(in srgb,var(--surface-strong) 82%,transparent);color:var(--text)}.editor-control-strip .field input,.editor-control-strip .field select{border-radius:14px;padding:.7rem .85rem}.checkbox-field{display:flex;align-items:flex-start;gap:.7rem;line-height:1.5}.checkbox-field input{margin-top:.25rem}.field-readonly{width:100%;border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;background:color-mix(in srgb,var(--surface-strong) 72%,transparent);color:var(--muted)}.field-topline{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.field-inline-button{padding:.28rem .65rem;font-size:.78rem}.editor-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.editor-titlebar{display:grid;grid-gap:.2rem;gap:.2rem}.editor-titlebar h1{font-size:clamp(1.7rem,2.2vw,2.2rem)}.editor-quick-actions{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;flex-wrap:wrap}.editor-control-strip{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(170px,.85fr);grid-gap:.85rem;gap:.85rem}.editor-meta-strip{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(280px,1fr);grid-gap:.85rem;gap:.85rem;align-items:start}.editor-meta-field{gap:.35rem}.editor-meta-field input,.editor-meta-field textarea{border-radius:14px;padding:.72rem .9rem}.editor-meta-description textarea{min-height:76px;resize:vertical;line-height:1.45}.editor-workspace{display:grid;grid-template-columns:minmax(212px,.72fr) minmax(0,1.92fr) minmax(168px,.5fr);grid-gap:1.15rem;gap:1.15rem;align-items:start;min-height:0}.editor-side{align-content:start}.editor-core,.editor-side{display:grid;grid-gap:.85rem;gap:.85rem;min-height:0}.inline-actions{display:flex;justify-content:flex-start}.info-trigger{padding:.45rem .8rem;font-size:.9rem}.editor-preview-trigger{padding-inline:1rem;box-shadow:0 10px 24px rgba(187,90,44,.24)}.flute-preview-card{display:grid;grid-template-columns:1fr auto;grid-gap:1rem;gap:1rem;align-items:center;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.45)}.modal-body{background:transparent;border:0;padding:0}.modal-backdrop{position:fixed;inset:0;background:rgba(31,26,23,.38);display:grid;place-items:center;padding:1rem;z-index:50}.modal-card{width:min(560px,100%);background:var(--surface-strong);border:1px solid var(--line);border-radius:22px;padding:1rem;box-shadow:var(--shadow);max-height:min(88vh,980px);overflow:auto}.small-modal{width:min(420px,100%)}.modal-card-large{width:min(1000px,100%)}.modal-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:.8rem}.modal-header h2{margin:.2rem 0 0}.flute-preview-copy h2{margin:.2rem 0 .35rem}.flute-preview-copy p{margin:0;color:var(--muted)}.flute-illustration{width:160px;height:auto;color:var(--accent-dark)}.flute-illustration.vertical{width:92px}.form-error{color:var(--danger)}.form-success{color:var(--success)}.inline-link-row,.reset-link-box{margin:0}.stacked-links{display:grid;grid-gap:.35rem;gap:.35rem}.inline-link-row a,.reset-link-box a{color:var(--accent-dark);font-weight:700}.reset-link-box{padding:.8rem 1rem;border:1px dashed var(--line);border-radius:16px;background:rgba(255,250,242,.7)}.helper-text,.input-hint{margin:0;color:var(--muted);font-size:.95rem}.meter-warning-box{display:grid;grid-gap:.35rem;gap:.35rem;padding:.7rem .85rem;border:1px dashed color-mix(in srgb,var(--accent) 60%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--accent) 10%,transparent)}.meter-warning-text{margin:0;color:color-mix(in srgb,var(--foreground) 86%,var(--accent) 14%);font-size:.92rem;line-height:1.45}.composer-panel{display:grid;grid-gap:.75rem;gap:.75rem;padding:.95rem;border:1px solid color-mix(in srgb,var(--line) 88%,transparent);border-radius:20px;background:color-mix(in srgb,var(--surface-strong) 78%,transparent)}.advanced-panel{display:grid;grid-gap:.7rem;gap:.7rem;padding:.8rem .8rem .85rem;border:1px dashed var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-strong) 72%,transparent)}.advanced-grid{display:flex;flex-wrap:wrap;gap:.45rem}.advanced-duration-block{display:grid;grid-gap:.45rem;gap:.45rem;padding-top:.2rem;border-top:1px dashed var(--line)}.toggle-inline{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.9rem}.toggle-inline input{margin:0}.composer-listen-toggle{padding:.3rem .55rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface-strong) 72%,transparent);font-size:.82rem}.player-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.player-scope-picker{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.88rem}.player-scope-picker select{width:auto;min-width:170px;padding:.4rem .9rem;border-radius:999px;font-size:.88rem}.composer-header,.composer-tools{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.composer-header h2{margin:.2rem 0 0;font-size:1.02rem}.composer-tool{padding:.28rem .6rem;font-size:.8rem}.composer-footnote{margin:0;color:var(--muted);font-size:.82rem}.composer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:.32rem;gap:.32rem}.composer-token{display:grid;grid-gap:.12rem;gap:.12rem;justify-items:center;padding:.38rem .22rem .34rem;border:1px solid var(--line);border-radius:12px;background:var(--note-card-bg);color:var(--note-card-text);min-height:78px}.composer-token-custom{align-content:start;cursor:pointer;position:relative}.composer-token-main{font-size:.78rem;font-weight:700;line-height:1;min-height:.8rem;text-align:center}.composer-token-note-name{font-size:.58rem;color:var(--muted);line-height:1;min-height:.7rem;text-align:center}.composer-token-sub{font-size:.62rem;color:var(--muted);min-height:.8rem}.composer-token-visual{display:inline-flex;align-items:center;justify-content:center;min-height:28px;color:var(--accent-dark)}.editor-core .field textarea{min-height:360px;resize:vertical}.composer-help-button{position:absolute;top:.28rem;right:.28rem;width:1rem;height:1rem;padding:0;border-radius:999px;border:1px solid var(--line);background:var(--surface-strong);color:var(--muted);font-size:.68rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}.advanced-help-button{position:static;width:1.2rem;height:1.2rem}.modal-copy{margin:0;color:var(--muted);line-height:1.6}.tablature-preview-panel{display:grid;grid-gap:.9rem;gap:.9rem;padding:1rem 1rem 1.1rem;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--surface-strong) 88%,transparent)}.editor-text-panel{display:grid;grid-gap:.8rem;gap:.8rem;padding:1rem 1rem 1.1rem;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--surface-strong) 94%,transparent);min-height:0}.editor-content-field{gap:0;min-height:0}.editor-content-field textarea{min-height:360px;height:auto;border-radius:18px;padding:1rem 1.05rem;line-height:1.7;background:color-mix(in srgb,var(--surface-strong) 96%,transparent);resize:vertical}.editor-panel-header{display:flex;align-items:flex-end;justify-content:space-between;gap:.9rem;flex-wrap:wrap}.editor-panel-header h2{margin:.15rem 0 0}.editor-panel-tip{color:var(--muted);font-size:.83rem}.editor-action-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);align-items:center;grid-gap:1rem;gap:1rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--surface-strong) 88%,transparent)}.editor-action-copy{display:grid;grid-gap:.6rem;gap:.6rem}.publication-box{display:grid;grid-gap:.55rem;gap:.55rem;padding:.85rem .95rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-strong) 80%,transparent)}.publication-box-public{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent-soft) 30%,var(--surface-strong))}.editor-submit-wrap{align-self:stretch;display:flex;align-items:center}.modal-form-grid{display:grid;grid-gap:.9rem;gap:.9rem}.modal-preview-panel{min-height:0}.flute-map-section,.flute-map-summary{display:grid;grid-gap:.75rem;gap:.75rem}.flute-map-summary{margin-bottom:1rem}.flute-map-meta{display:flex;flex-wrap:wrap;gap:.5rem}.flute-map-explainer{display:grid;grid-gap:.3rem;gap:.3rem}.flute-map-groups{display:grid;grid-gap:1rem;gap:1rem}.flute-map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-gap:.8rem;gap:.8rem}.flute-map-card{display:grid;justify-items:center;grid-gap:.35rem;gap:.35rem;padding:.85rem .65rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-strong) 86%,transparent);text-align:center}.flute-map-note{font-size:.9rem;font-weight:700}.flute-map-card code,.flute-map-octave{font-size:.72rem;color:var(--muted)}.flute-scale-list{display:grid;grid-gap:.7rem;gap:.7rem}.flute-scale-card{display:grid;grid-gap:.25rem;gap:.25rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-strong) 84%,transparent)}.flute-scale-notes{margin:0;color:var(--muted);line-height:1.6}.learning-layout,.learning-overview-grid,.learning-practice-grid,.learning-reference-groups{display:grid;grid-gap:1rem;gap:1rem}.learning-hero-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);grid-gap:1rem;gap:1rem;align-items:end}.learning-hero-copy{display:grid;grid-gap:.45rem;gap:.45rem}.learning-controls{display:grid;grid-gap:.8rem;gap:.8rem}.learning-section-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:.75rem;gap:.75rem}.learning-section-tab{display:grid;grid-gap:.25rem;gap:.25rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-strong) 82%,transparent);color:var(--text);text-align:left;transition:border-color .12s ease,background .12s ease,transform .12s ease}.learning-section-tab:hover{transform:translateY(-1px)}.learning-section-tab.active{border-color:color-mix(in srgb,var(--accent) 56%,var(--line));background:color-mix(in srgb,var(--accent-soft) 42%,var(--surface-strong))}.learning-section-tab strong{font-size:.98rem}.learning-section-tab span{color:var(--muted);font-size:.82rem;line-height:1.35}.learning-path-section,.learning-platform-section,.learning-section-panel{display:grid;grid-gap:1rem;gap:1rem}.learning-path-grid,.platform-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:.8rem;gap:.8rem}.learning-path-card,.platform-guide-card{display:grid;align-content:start;grid-gap:.7rem;gap:.7rem;padding:.95rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-strong) 82%,transparent)}.learning-path-card{grid-template-columns:auto minmax(0,1fr)}.learning-path-card>div{display:grid;grid-gap:.3rem;gap:.3rem}.learning-path-card h3,.learning-path-card p,.platform-guide-card h3,.platform-guide-card p{margin:0}.learning-path-card p,.platform-guide-card p{color:var(--muted);font-size:.88rem;line-height:1.45}.learning-path-number{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,var(--surface-strong));color:var(--accent-dark);font-weight:800}.learning-path-actions{grid-column:1/-1;align-self:end}.learning-path-actions .ghost-button,.platform-guide-card .ghost-button{width:-moz-fit-content;width:fit-content}.learning-staff-symbol-section{display:grid;grid-gap:1rem;gap:1rem}.staff-symbol-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);grid-gap:1rem;gap:1rem;align-items:start}.staff-symbol-demo{display:grid;grid-gap:.85rem;gap:.85rem;overflow:hidden}.staff-symbol-demo .staff-scroll{max-width:100%}.staff-symbol-list{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.staff-reading-steps,.staff-symbol-list{display:grid;grid-gap:.8rem;gap:.8rem}.staff-reading-step{display:grid;grid-gap:.35rem;gap:.35rem;padding:.85rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--accent-soft) 24%,var(--surface-strong))}.staff-rhythm-figures{grid-column:1/-1;display:grid;grid-gap:.85rem;gap:.85rem;overflow:hidden}.staff-rhythm-figures h3,.staff-rhythm-figures p{margin:0}.staff-rhythm-table{display:grid;min-width:0;overflow-x:auto}.staff-rhythm-row{display:grid;grid-template-columns:minmax(130px,1.2fr) repeat(2,minmax(58px,.55fr)) minmax(64px,.65fr) minmax(90px,.8fr);align-items:center;min-width:520px;border-bottom:1px solid var(--line)}.staff-rhythm-row.header{color:var(--muted);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.staff-rhythm-row>*{padding:.62rem .5rem}.staff-rhythm-row:last-child{border-bottom:0}.staff-rhythm-symbol{color:var(--heading);font-family:var(--font-serif);font-size:1.45rem;line-height:1}.staff-symbol-item{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:.7rem;gap:.7rem;align-items:start;padding:.85rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-strong) 82%,transparent)}.staff-symbol-mark{display:inline-grid;place-items:center;min-width:2.25rem;height:2.25rem;padding:0 .35rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,var(--surface-strong));color:var(--accent-dark);font-family:var(--font-serif);font-size:1.15rem;font-weight:800}.staff-reading-step h3,.staff-reading-step p,.staff-symbol-item h3,.staff-symbol-item p{margin:0}.staff-reading-step p,.staff-symbol-item p{color:var(--muted);font-size:.86rem;line-height:1.45}.learning-basic-section,.learning-combined-section,.rhythm-figure-section{display:grid;grid-gap:1rem;gap:1rem}.learning-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-heading{align-items:flex-end}.learning-basic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:1rem;gap:1rem}.basic-association-card{align-content:start}.basic-association-prompt{display:grid;place-items:center;grid-gap:.65rem;gap:.65rem;min-height:150px;padding:.9rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-strong) 84%,transparent);text-align:center}.basic-association-prompt>span{max-width:34ch;color:var(--muted);font-size:.86rem;line-height:1.45}.basic-association-symbol{color:var(--heading);font-family:var(--font-serif);font-size:clamp(2.4rem,6vw,4.2rem);line-height:.95}.basic-association-option{min-height:56px;overflow:hidden}.basic-visual-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.basic-visual-option-grid .basic-association-option{justify-items:center;min-height:150px}.rhythm-figure-card{align-content:start}.rhythm-figure-prompt{min-height:136px}.rhythm-figure-code,.rhythm-figure-symbol{color:var(--heading);font-family:var(--font-serif);font-size:clamp(2.6rem,7vw,4.4rem);line-height:.95}.rhythm-figure-code{font-family:var(--font-serif);font-weight:800}.rhythm-figure-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:.8rem;gap:.8rem;width:100%;max-width:360px}.rhythm-figure-comparison span{display:grid;justify-items:center;grid-gap:.35rem;gap:.35rem;padding:.75rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-strong) 86%,transparent)}.rhythm-figure-comparison strong{color:var(--heading);font-family:var(--font-serif);font-size:2.4rem;line-height:1}.rhythm-figure-comparison small{color:var(--muted);font-size:.78rem;text-align:center}.rhythm-figure-option{align-content:center;min-height:74px}.learning-reference-section,.learning-rhythm-section,.note-destroyer-card,.note-destroyer-section{display:grid;grid-gap:1rem;gap:1rem}.note-destroyer-controls,.note-destroyer-header,.note-destroyer-stats{display:flex;align-items:center;justify-content:space-between;gap:.85rem;flex-wrap:wrap}.note-destroyer-header h2,.note-destroyer-header p{margin-bottom:0}.note-destroyer-controls,.note-destroyer-stats{justify-content:flex-end}.note-destroyer-toggle{gap:.45rem;padding:.55rem .8rem;cursor:pointer}.note-destroyer-difficulty,.note-destroyer-toggle{display:inline-flex;align-items:center;min-height:42px;border:1px solid var(--line);border-radius:999px;background:var(--ghost-bg);color:var(--ghost-text)}.note-destroyer-difficulty{gap:.55rem;padding:.45rem .55rem .45rem .8rem}.note-destroyer-difficulty span{font-size:.82rem;font-weight:700}.note-destroyer-difficulty select{min-height:30px;border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;background:var(--surface);color:var(--text);font:inherit}.note-destroyer-difficulty select:disabled{cursor:not-allowed;opacity:.65}.note-destroyer-toggle input{width:1rem;height:1rem;accent-color:var(--accent)}.note-destroyer-instructions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:.65rem;gap:.65rem}.note-destroyer-instructions span{display:flex;align-items:center;gap:.55rem;min-height:48px;padding:.65rem .75rem;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface-strong) 78%,transparent);color:var(--muted);font-size:.9rem;line-height:1.25}.note-destroyer-instructions strong{display:inline-grid;flex:0 0 26px;width:26px;height:26px;place-items:center;border-radius:999px;background:var(--accent);color:#fff8f1;font-size:.82rem}.note-destroyer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,220px);grid-gap:1rem;gap:1rem;align-items:stretch}.note-destroyer-stage{position:relative;height:420px;min-height:420px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-strong) 92%,transparent),color-mix(in srgb,var(--accent-soft) 26%,transparent)),var(--surface-strong)}.note-destroyer-lanes{position:absolute;inset:0;pointer-events:none}.note-destroyer-lanes span{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--line) 66%,transparent)}.note-destroyer-hit-zone{position:absolute;left:1rem;right:1rem;bottom:34px;height:72px;border-block:2px solid color-mix(in srgb,var(--accent) 42%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 8%,transparent)}.note-destroyer-note{position:absolute;top:0;z-index:2;display:inline-grid;place-items:center;width:52px;height:52px;border:2px solid color-mix(in srgb,var(--accent-dark) 70%,black 4%);border-radius:999px;background:color-mix(in srgb,var(--accent-soft) 62%,white 20%);color:var(--text);font-weight:800;box-shadow:0 12px 28px rgba(83,55,33,.14);will-change:transform}.note-destroyer-burst{position:absolute;z-index:4;width:0;height:0;pointer-events:none}.note-destroyer-burst-ring{position:absolute;top:26px;left:0;width:74px;height:74px;border:2px solid color-mix(in srgb,var(--success) 72%,white 12%);border-radius:999px;box-shadow:0 0 24px color-mix(in srgb,var(--success) 34%,transparent);transform:translate(-50%,-50%) scale(.25);animation:note-destroyer-burst-ring .64s ease-out forwards}.note-destroyer-burst-core{position:absolute;top:0;left:0;display:inline-grid;width:52px;height:52px;place-items:center;border-radius:999px;background:color-mix(in srgb,var(--success) 28%,var(--surface-strong));color:var(--text);font-weight:900;transform:translateX(-50%);animation:note-destroyer-burst-core .52s cubic-bezier(.22,1.18,.36,1) forwards}.note-destroyer-burst-points{position:absolute;top:-26px;left:0;color:var(--success);font-weight:900;text-shadow:0 2px 10px color-mix(in srgb,var(--surface-strong) 80%,transparent);transform:translateX(-50%);animation:note-destroyer-burst-points .68s ease-out forwards}.note-destroyer-burst-particle{position:absolute;top:25px;left:0;width:8px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 72%,var(--success));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 38%,transparent);transform:translate(-50%,-50%) scale(.7);animation:note-destroyer-burst-particle .62s ease-out forwards;animation-delay:var(--burst-delay)}.note-destroyer-overlay{position:absolute;inset:0;z-index:3;display:grid;place-content:center;grid-gap:.25rem;gap:.25rem;text-align:center;background:color-mix(in srgb,var(--surface-strong) 58%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.note-destroyer-overlay strong{color:var(--accent-dark);font-size:clamp(2.6rem,9vw,5rem);line-height:.95}.note-destroyer-overlay span{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}.note-destroyer-side{display:grid;grid-template-rows:auto auto minmax(108px,1fr) auto auto;justify-items:center;grid-gap:.85rem;gap:.85rem;height:420px;min-height:420px;overflow:hidden;padding:1rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-strong) 88%,transparent);text-align:center}.note-destroyer-detected,.note-destroyer-meta,.note-destroyer-target-note{display:grid;grid-gap:.15rem;gap:.15rem}.note-destroyer-target-note strong{font-size:clamp(2.1rem,6vw,3.5rem);line-height:.95}.note-destroyer-detected span,.note-destroyer-meta,.note-destroyer-target-note span,.note-destroyer-target-note.hidden strong{color:var(--muted)}.note-destroyer-fingering{display:grid;min-height:108px;place-items:center;color:var(--accent-dark)}.note-destroyer-fingering .fingering-svg{width:70px}.note-destroyer-fingering.hidden{color:var(--muted);font-size:.9rem;line-height:1.3}.note-destroyer-detected{align-self:end;width:100%;min-height:58px;padding-top:.75rem;border-top:1px dashed var(--line)}.note-destroyer-detected strong{min-height:1.25rem;overflow-wrap:anywhere}.note-destroyer-meta{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));font-size:.84rem}@keyframes note-destroyer-burst-ring{0%{opacity:.95;transform:translate(-50%,-50%) scale(.18)}to{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}@keyframes note-destroyer-burst-core{0%{opacity:1;filter:brightness(1.12);transform:translateX(-50%) scale(1)}55%{opacity:1;filter:brightness(1.22);transform:translateX(-50%) scale(1.24) rotate(6deg)}to{opacity:0;filter:brightness(1);transform:translateX(-50%) scale(.22) rotate(-12deg)}}@keyframes note-destroyer-burst-points{0%{opacity:0;transform:translate(-50%,8px) scale(.86)}22%{opacity:1}to{opacity:0;transform:translate(-50%,-28px) scale(1.05)}}@keyframes note-destroyer-burst-particle{0%{opacity:.95;transform:translate(-50%,-50%) scale(.7)}to{opacity:0;transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(.1)}}.guided-practice-card,.guided-practice-section{display:grid;grid-gap:1rem;gap:1rem}.guided-practice-controls,.guided-practice-header,.guided-practice-stats,.guided-practice-visuals{display:flex;align-items:center;justify-content:space-between;gap:.85rem;flex-wrap:wrap}.guided-practice-header h2,.guided-practice-header p{margin-bottom:0}.guided-practice-controls,.guided-practice-stats{justify-content:flex-end}.guided-practice-field,.guided-practice-toggle{display:inline-flex;align-items:center;gap:.55rem;min-height:42px;padding:.45rem .55rem .45rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--ghost-bg);color:var(--ghost-text)}.guided-practice-field span,.guided-practice-toggle span{font-size:.82rem;font-weight:700}.guided-practice-field select{min-height:30px;border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;background:var(--surface);color:var(--text);font:inherit}.guided-practice-field select:disabled{cursor:not-allowed;opacity:.65}.guided-practice-toggle{cursor:pointer}.guided-practice-toggle input{width:1rem;height:1rem;accent-color:var(--accent)}.guided-practice-hold,.guided-practice-progress{position:relative;overflow:hidden;height:12px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 64%,transparent)}.guided-practice-hold-fill,.guided-practice-progress-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:color-mix(in srgb,var(--success) 72%,var(--accent));transition:width .12s linear}.guided-practice-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);grid-gap:1rem;gap:1rem}.guided-practice-feedback,.guided-practice-target{display:grid;align-content:start;grid-gap:.9rem;gap:.9rem;padding:1rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-strong) 86%,transparent)}.guided-practice-stage{position:relative;height:360px;min-height:360px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-strong) 94%,transparent),color-mix(in srgb,var(--accent-soft) 22%,transparent)),var(--surface-strong)}.guided-practice-lanes{position:absolute;inset:0;pointer-events:none}.guided-practice-lanes span{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--line) 60%,transparent)}.guided-practice-lanes span:first-child{left:30%}.guided-practice-lanes span:nth-child(2){left:50%}.guided-practice-lanes span:nth-child(3){left:70%}.guided-practice-hit-zone{position:absolute;left:1rem;right:1rem;bottom:36px;display:grid;height:76px;place-items:center;border-block:2px solid color-mix(in srgb,var(--accent) 42%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--muted);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.guided-practice-hit-zone.active{border-color:color-mix(in srgb,var(--success) 68%,var(--accent));background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}.guided-practice-falling-note{position:absolute;top:0;left:50%;z-index:2;display:inline-grid;width:56px;height:56px;place-items:center;border:2px solid color-mix(in srgb,var(--accent-dark) 72%,black 4%);border-radius:999px;background:color-mix(in srgb,var(--accent-soft) 66%,white 18%);color:var(--text);font-weight:900;line-height:1;box-shadow:0 12px 28px rgba(83,55,33,.14);will-change:transform}.guided-practice-falling-note small{color:var(--muted);font-size:.65rem;font-weight:800}.guided-practice-falling-note.hit{border-color:color-mix(in srgb,var(--success) 72%,var(--line));background:color-mix(in srgb,var(--success) 24%,var(--surface-strong));color:var(--success)}.guided-practice-falling-note.current{border-color:color-mix(in srgb,var(--accent-dark) 76%,var(--line))}.guided-practice-falling-note.queued{opacity:.72}.guided-practice-stage-overlay{position:absolute;inset:0;z-index:3;display:grid;place-content:center;grid-gap:.25rem;gap:.25rem;text-align:center;background:color-mix(in srgb,var(--surface-strong) 58%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.guided-practice-stage-overlay strong{color:var(--accent-dark);font-size:clamp(2.2rem,7vw,4.2rem);line-height:.95}.guided-practice-stage-overlay span{color:var(--muted);font-size:.84rem}.guided-practice-target-meta{display:grid;grid-template-columns:minmax(120px,.35fr) minmax(0,1fr);grid-gap:.9rem;gap:.9rem;align-items:center}.guided-practice-detected,.guided-practice-note{display:grid;grid-gap:.2rem;gap:.2rem}.guided-practice-detected strong,.guided-practice-note strong{color:var(--heading);font-family:var(--font-serif);font-size:clamp(2.7rem,8vw,5.5rem);line-height:.95}.guided-practice-detected span,.guided-practice-note span{color:var(--muted)}.guided-practice-target-meta .guided-practice-note strong{font-size:clamp(2rem,5vw,3rem)}.guided-practice-detected.matched strong{color:var(--success)}.guided-practice-visuals{justify-content:flex-start}.guided-practice-visuals .staff-scroll.compact{max-width:min(100%,300px);overflow:hidden}.guided-practice-rhythm-cue{display:grid;min-width:120px;min-height:86px;place-items:center;padding:.75rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--accent-soft) 30%,var(--surface-strong));text-align:center}.guided-practice-rhythm-cue strong{color:var(--heading);font-family:var(--font-serif);font-size:clamp(1.8rem,5vw,2.8rem);line-height:1}.guided-practice-rhythm-cue span{color:var(--muted);font-size:.82rem}.guided-practice-sequence{display:flex;gap:.45rem;overflow-x:auto;padding:.25rem 0 .1rem}.guided-practice-sequence span{display:inline-grid;min-width:54px;min-height:44px;place-items:center;padding:.45rem .55rem;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface-strong) 82%,transparent);color:var(--muted);font-weight:800}.guided-practice-sequence small{color:var(--muted);font-size:.72rem;font-weight:700}.guided-practice-sequence span.current{border-color:color-mix(in srgb,var(--accent) 58%,var(--line));background:color-mix(in srgb,var(--accent-soft) 52%,var(--surface-strong));color:var(--heading)}.guided-practice-sequence span.done{border-color:color-mix(in srgb,var(--success) 46%,var(--line));background:color-mix(in srgb,var(--success) 18%,var(--surface-strong));color:var(--success)}.microphone-practice-card,.microphone-practice-section{display:grid;grid-gap:1rem;gap:1rem}.microphone-actions,.microphone-practice-controls,.microphone-practice-header,.microphone-target-visuals{display:flex;align-items:center;justify-content:space-between;gap:.9rem;flex-wrap:wrap}.microphone-practice-header h2,.microphone-practice-header p{margin-bottom:0}.microphone-actions{justify-content:flex-end}.microphone-practice-controls{align-items:end}.microphone-flute-field{min-width:min(100%,280px)}.microphone-practice-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(280px,1.1fr);grid-gap:1rem;gap:1rem}.microphone-detected-panel,.microphone-target-panel{display:grid;grid-gap:.9rem;gap:.9rem;padding:1rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-strong) 86%,transparent)}.microphone-detected-note,.microphone-note-label{display:grid;grid-gap:.2rem;gap:.2rem}.microphone-detected-note strong,.microphone-note-label strong{font-size:clamp(2.2rem,7vw,4.6rem);line-height:.95}.microphone-detected-note span,.microphone-note-label span{color:var(--muted)}.microphone-detected-note.matched strong{color:var(--success)}.microphone-target-visuals{justify-content:flex-start}.microphone-target-visuals .staff-scroll.compact{max-width:min(100%,260px);overflow:hidden}.microphone-tuning-meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;grid-gap:.65rem;gap:.65rem;color:var(--muted);font-size:.78rem}.microphone-meter-track,.microphone-stability{position:relative;overflow:hidden;height:12px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 64%,transparent)}.microphone-meter-zone{position:absolute;inset:0 auto 0 15%;width:70%;background:color-mix(in srgb,var(--success) 18%,transparent)}.microphone-meter-pointer{position:absolute;top:-3px;bottom:-3px;width:3px;border-radius:999px;background:var(--accent);transform:translateX(-50%)}.microphone-stability-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:color-mix(in srgb,var(--success) 72%,var(--accent));transition:width 90ms linear}.microphone-success{color:var(--success)}.performance-card{display:grid;grid-gap:1rem;gap:1rem}.performance-actions,.performance-controls,.performance-header{display:flex;align-items:center;justify-content:space-between;gap:.9rem;flex-wrap:wrap}.performance-header h2,.performance-header p{margin-bottom:0}.performance-score{display:grid;min-width:104px;justify-items:end;grid-gap:.15rem;gap:.15rem;color:var(--muted)}.performance-score strong{color:var(--text);font-size:1.8rem;line-height:1}.performance-countdown-field{min-width:160px}.performance-actions{justify-content:flex-end}.performance-stage-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,220px);grid-gap:1rem;gap:1rem;align-items:stretch}.performance-stage{position:relative;height:360px;min-height:360px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:linear-gradient(90deg,color-mix(in srgb,var(--surface-strong) 86%,transparent),color-mix(in srgb,var(--accent-soft) 30%,transparent)),var(--surface-strong)}.performance-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 23%,color-mix(in srgb,var(--line) 72%,transparent) 23% 23.4%,transparent 23.4% 44%,color-mix(in srgb,var(--line) 72%,transparent) 44% 44.4%,transparent 44.4% 65%,color-mix(in srgb,var(--line) 72%,transparent) 65% 65.4%,transparent 65.4% 100%);opacity:.7;pointer-events:none}.performance-hit-band{position:absolute;top:1.2rem;bottom:1.2rem;z-index:1;border-inline:1px dashed color-mix(in srgb,var(--accent) 42%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);opacity:.52;pointer-events:none}.performance-hit-band.active{background:color-mix(in srgb,var(--accent) 16%,transparent);opacity:.9}.performance-lanes{position:absolute;inset:0;z-index:2}.performance-note{position:absolute;left:0;display:inline-flex;align-items:center;justify-content:space-between;gap:.4rem;height:42px;min-width:0;padding:0;overflow:hidden;border:2px solid color-mix(in srgb,var(--accent-dark) 76%,black 4%);border-radius:999px;background:color-mix(in srgb,var(--accent-soft) 64%,white 18%);color:var(--text);box-shadow:none;contain:layout paint;will-change:transform}.performance-note:before{content:"";position:absolute;top:-2px;bottom:-2px;left:-2px;width:min(14px,100%);border-radius:999px 0 0 999px;background:var(--accent-dark);opacity:.86}.performance-note:after{display:none}.performance-note-content{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:56px;max-width:112px;padding:0 .25rem;transform:translate(-50%,-50%);pointer-events:none}.performance-note small,.performance-note strong{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.performance-note small{color:var(--muted);font-size:.72rem}.performance-note.lane-0{top:82px}.performance-note.lane-1{top:158px}.performance-note.lane-2{top:234px}.performance-note.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface-strong))}.performance-note.incoming:after{display:none}.performance-note.sustaining{border-color:var(--accent-dark);background:color-mix(in srgb,var(--accent) 22%,var(--surface-strong))}.performance-note.sustaining:before{background:var(--accent)}.performance-note.sustaining:after{display:none}.performance-note.judgement-hit{border-color:color-mix(in srgb,var(--success) 88%,black 10%);background:color-mix(in srgb,var(--success) 34%,var(--surface-strong));box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 24%,transparent)}.performance-note.judgement-hit:before{background:color-mix(in srgb,var(--success) 86%,black 8%)}.performance-note.judgement-miss{border-color:color-mix(in srgb,var(--danger) 90%,black 8%);background:color-mix(in srgb,var(--danger) 34%,var(--surface-strong));box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 24%,transparent)}.performance-note.judgement-miss:before{background:color-mix(in srgb,var(--danger) 88%,black 8%)}.performance-note.judgement-hit small,.performance-note.judgement-hit strong,.performance-note.judgement-miss small,.performance-note.judgement-miss strong{color:var(--text)}.performance-hit-zone{position:absolute;top:1.2rem;bottom:1.2rem;left:78%;z-index:4;width:0;transform:translateX(-50%);pointer-events:none}.performance-hit-zone:before{content:"";position:absolute;inset:0;width:3px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 12%,transparent)}.performance-hit-zone.active:before{background:var(--accent-dark);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 16%,transparent)}.performance-hit-zone.judgement-hit:before{width:5px;background:color-mix(in srgb,var(--success) 88%,black 8%);box-shadow:0 0 0 10px color-mix(in srgb,var(--success) 22%,transparent),0 0 28px color-mix(in srgb,var(--success) 50%,transparent)}.performance-hit-zone.judgement-miss:before{width:5px;background:color-mix(in srgb,var(--danger) 90%,black 8%);box-shadow:0 0 0 10px color-mix(in srgb,var(--danger) 22%,transparent),0 0 28px color-mix(in srgb,var(--danger) 48%,transparent)}.performance-hit-zone span{position:absolute;top:0;left:50%;width:44px;height:44px;border:2px solid color-mix(in srgb,var(--accent) 54%,transparent);border-radius:999px;transform:translate(-50%,-50%)}.performance-hit-zone.active span{border-color:color-mix(in srgb,var(--accent) 68%,transparent)}.performance-hit-zone.judgement-hit span{border-color:color-mix(in srgb,var(--success) 88%,transparent);background:color-mix(in srgb,var(--success) 12%,transparent)}.performance-hit-zone.judgement-miss span{border-color:color-mix(in srgb,var(--danger) 88%,transparent);background:color-mix(in srgb,var(--danger) 12%,transparent)}.performance-countdown{position:absolute;inset:0;z-index:5;display:grid;place-content:center;grid-gap:.2rem;gap:.2rem;text-align:center;background:color-mix(in srgb,var(--surface-strong) 64%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.performance-countdown strong{font-size:clamp(3rem,11vw,6rem);line-height:.9;color:var(--accent-dark)}.performance-countdown span{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}.performance-flute-panel{display:grid;grid-template-rows:auto auto minmax(138px,1fr) auto;align-content:start;justify-items:center;grid-gap:.9rem;gap:.9rem;height:360px;min-height:360px;overflow:hidden;padding:1rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-strong) 88%,transparent);text-align:center}.performance-current-note{display:grid;grid-gap:.1rem;gap:.1rem}.performance-current-note strong{font-size:clamp(2rem,6vw,3.4rem);line-height:.95}.performance-current-note span,.performance-detected small,.performance-detected span{color:var(--muted)}.performance-flute-visual{display:grid;min-height:138px;place-items:center;color:var(--accent-dark)}.performance-flute-visual .fingering-svg{width:76px}.performance-detected{display:grid;grid-gap:.2rem;gap:.2rem;align-self:end;width:100%;min-height:88px;padding-top:.8rem;border-top:1px dashed var(--line)}.performance-detected strong{min-height:1.45rem;line-height:1.25rem;font-size:1rem;overflow-wrap:anywhere}.performance-detected-detail{display:block;min-height:1.05rem;line-height:1.05rem}.performance-detected-detail.empty{visibility:hidden}.learning-practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-card{display:grid;grid-gap:1rem;gap:1rem}.practice-actions,.practice-header,.practice-prompt,.practice-staff{display:flex;align-items:center;justify-content:space-between;gap:.9rem;flex-wrap:wrap}.practice-prompt,.practice-staff{padding:.9rem 1rem;border-radius:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface-strong) 86%,transparent)}.practice-dual-prompt{align-items:center}.practice-dual-visual{display:inline-flex;align-items:center;justify-content:center;min-width:88px}.practice-dual-staff{flex:1 1;min-width:180px}.practice-dual-staff .staff-scroll.compact{width:100%;overflow:hidden}.practice-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:.65rem;gap:.65rem}.practice-option{display:grid;grid-gap:.45rem;gap:.45rem;border:1px solid var(--line);border-radius:16px;padding:.8rem .9rem;background:color-mix(in srgb,var(--surface-strong) 88%,transparent);color:var(--text);text-align:left;transition:border-color .12s ease,background .12s ease,transform .12s ease}.practice-option:hover:not(:disabled){transform:translateY(-1px)}.practice-option strong,.practice-option-meta{display:block}.practice-option strong{font-size:.96rem}.practice-option-meta{margin-top:.28rem;color:var(--muted);font-size:.8rem}.practice-rhythm-listen-option{align-content:start}.practice-option-staff{margin-top:.15rem;padding-top:.35rem;border-top:1px dashed var(--line)}.practice-option-staff .staff-scroll.compact{overflow-x:hidden}.practice-option-staff .staff-svg.compact{min-width:220px}.practice-option.correct{border-color:color-mix(in srgb,var(--success) 50%,var(--line));background:color-mix(in srgb,var(--success) 16%,var(--surface-strong))}.practice-option.wrong{border-color:color-mix(in srgb,var(--danger) 50%,var(--line));background:color-mix(in srgb,var(--danger) 14%,var(--surface-strong))}.practice-feedback{margin:0;color:var(--muted);line-height:1.5}.practice-rhythm-prompt{align-items:flex-start}.practice-rhythm-code{flex:1 1;min-width:220px;white-space:pre-wrap;word-break:break-word;font-size:.95rem;line-height:1.65}.tablature-preview-flow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem}.reading-lines,.tablature-preview-lines{display:grid;grid-gap:.9rem;gap:.9rem}.reading-line,.tablature-preview-line{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem;min-height:96px;padding-bottom:.25rem;border-bottom:1px dashed var(--line)}.reading-line.text-only{min-height:auto;gap:.4rem;padding-bottom:.55rem}.reading-line.empty-line{min-height:.75rem;padding-bottom:.35rem}.reading-line:last-child,.tablature-preview-line:last-child{border-bottom:0}.preview-token{min-width:56px}.reading-lines.compact{gap:.75rem}.reading-lines.compact .reading-line{min-height:72px;gap:.5rem}.reading-text{align-self:center;font-size:1.02rem;font-weight:600;white-space:pre-wrap}.reading-directive{display:inline-flex;align-items:center;min-height:1.55rem;padding:.12rem .45rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:.72rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}.reading-note{display:grid;justify-items:center;grid-gap:.18rem;gap:.18rem;min-width:80px;padding:.7rem .45rem;border-radius:14px;background:var(--note-card-bg);color:var(--note-card-text);border:1px solid var(--line);transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease}.reading-note.compact{min-width:56px;padding:.45rem .25rem;gap:.08rem}.reading-note-main{font-size:.92rem;font-weight:700;line-height:1;min-height:.95rem}.reading-note-meta{font-size:.63rem;color:var(--muted);text-align:center;line-height:1.2;min-height:.8rem}.reading-note.compact .reading-note-main{font-size:.78rem;min-height:.8rem}.reading-note-visual{display:inline-flex;align-items:center;justify-content:center;min-height:42px;color:var(--accent-dark)}.reading-note.active{border-color:color-mix(in srgb,var(--accent) 58%,var(--line));background:color-mix(in srgb,var(--accent-soft) 62%,var(--surface-strong));box-shadow:0 10px 22px rgba(187,90,44,.18);transform:translateY(-1px)}.reading-bar{display:inline-flex;align-items:center;min-height:72px;font-size:1.8rem;color:var(--accent-dark)}.reading-empty-line{display:block;min-height:.4rem;width:100%}.preview-empty-line{color:var(--muted);font-style:italic;padding-top:.35rem}.preview-bar{display:inline-flex;align-items:center;min-height:96px;font-size:2rem;padding:0 .2rem}.preview-bar,.text-link{color:var(--accent-dark)}.text-link{font-weight:700}.dashboard-item{grid-template-columns:1fr auto}.empty-state{text-align:center;padding:3rem 1.5rem}.notation-card pre{margin:0;white-space:pre-wrap;word-break:break-word;line-height:1.7;padding:1.25rem;border-radius:20px;background:rgba(113,71,39,.08);font-size:1.05rem}.staff-scroll{overflow-x:auto;padding-bottom:.5rem}.staff-svg{width:100%;min-width:740px;color:var(--accent-dark)}.staff-scroll.compact{padding-bottom:0}.staff-svg.compact{min-width:420px}.basic-association-card .staff-scroll.compact{width:100%;max-width:100%;overflow:hidden;padding-bottom:0}.basic-association-card .staff-svg.compact{display:block;width:100%;min-width:0;height:auto}.small-staff-block{display:grid;grid-gap:.6rem;gap:.6rem;margin-top:.4rem;padding-top:.7rem;border-top:1px dashed var(--line)}.staff-block-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.staff-guide-toggle{font-size:.82rem}.detail-flute-visual{display:flex;justify-content:flex-start}.fingering-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-gap:.9rem;gap:.9rem}.fingering-card{display:grid;justify-items:center;grid-gap:.45rem;gap:.45rem;padding:.85rem;border-radius:18px;background:rgba(113,71,39,.06)}.fingering-note,.fingering-pattern{font-size:.92rem}.fingering-svg{width:48px;height:auto}.fingering-svg.compact{width:22px}.fingering-hole-button{cursor:pointer}.fingering-hole-button:focus{outline:none}.danger-button{color:var(--danger)}.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}@media (max-width:900px){.card-grid,.dashboard-item,.hero{grid-template-columns:1fr}.hero-copy{padding:2rem}.account-preview-header,.account-preview-list,.catalog-search,.editor-action-card,.editor-control-strip,.editor-meta-strip,.editor-workspace,.guided-practice-grid,.guided-practice-target-meta,.learning-basic-grid,.learning-hero-card,.learning-overview-grid,.learning-path-grid,.learning-practice-grid,.learning-section-tabs,.microphone-practice-grid,.note-destroyer-grid,.performance-stage-grid,.platform-guide-grid,.staff-symbol-layout,.staff-symbol-list{grid-template-columns:1fr}.note-destroyer-side{height:360px;min-height:360px}.note-destroyer-instructions{grid-template-columns:1fr}.performance-score{justify-items:start}.performance-flute-panel{min-height:auto}.composer-grid{grid-template-columns:repeat(auto-fit,minmax(82px,1fr))}.catalog-search-actions{justify-content:flex-end}}@media (max-width:640px){.shell{width:min(100% - 1rem,1180px)}.site-header{align-items:flex-start}.hero-copy h1{max-width:none}.editor-panel-header,.editor-quick-actions{align-items:flex-start}.editor-content-field textarea{min-height:300px;height:auto;resize:vertical}.basic-visual-option-grid,.practice-option-grid{grid-template-columns:1fr}.performance-stage{height:320px;min-height:320px}.note-destroyer-stage{height:360px;min-height:360px}.performance-flute-panel{height:340px;min-height:340px}.guided-practice-controls,.note-destroyer-controls{width:100%}.guided-practice-controls .ghost-button,.guided-practice-controls .solid-button,.note-destroyer-controls .ghost-button,.note-destroyer-controls .solid-button{flex:1 1 150px}.catalog-search-actions,.catalog-search-actions .ghost-button,.catalog-search-actions .solid-button{width:100%}.catalog-search-actions .ghost-button,.catalog-search-actions .solid-button{justify-content:center;text-align:center}.catalog-pagination,.catalog-pagination-actions,.catalog-toolbar{align-items:stretch;width:100%}.catalog-pagination,.catalog-toolbar{display:grid}.catalog-pagination-actions .ghost-button,.catalog-pagination-disabled{flex:1 1 120px}.performance-note{height:38px}.performance-note.lane-0{top:70px}.performance-note.lane-1{top:142px}.performance-note.lane-2{top:214px}.performance-actions{width:100%}.performance-actions .ghost-button,.performance-actions .solid-button{flex:1 1 150px}.flute-preview-card{grid-template-columns:1fr}}