:root{
  color-scheme:dark;
  --bg:#07111f;--bg2:#0b1728;--panel:#101e33;--panel2:#142640;--line:rgba(255,255,255,.13);
  --text:#f5f8ff;--muted:#aab8cc;--soft:#d9e6f8;--brand:#5eead4;--brand2:#8b5cf6;--hot:#fb7185;--gold:#fbbf24;--good:#34d399;--warn:#f59e0b;--bad:#fb7185;
  --shadow:0 24px 80px rgba(0,0,0,.32);--radius:26px;--radius2:18px;--focus:0 0 0 4px rgba(94,234,212,.28);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at 20% 0%,rgba(94,234,212,.18),transparent 32%),radial-gradient(circle at 92% 4%,rgba(139,92,246,.18),transparent 34%),linear-gradient(180deg,#07111f 0%,#081321 45%,#050a12 100%);color:var(--text);line-height:1.55;min-height:100vh}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.shell{width:min(1180px,calc(100% - 28px));margin-inline:auto}.skip-link{position:absolute;left:-999px;top:12px;z-index:20;background:#fff;color:#000;padding:12px 16px;border-radius:12px}.skip-link:focus{left:12px}.noscript{margin:20px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#200;color:#fff}.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.topbar{width:min(1240px,calc(100% - 24px));margin:0 auto;padding:14px 0;display:flex;align-items:center;gap:14px}.brand{display:flex;gap:12px;align-items:center;min-width:240px}.brand-logo{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#04111e;font-weight:900;box-shadow:var(--shadow)}.brand-copy{display:grid;line-height:1.1}.brand-copy small{color:var(--muted);font-size:.78rem}.nav-links{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}.nav-links a{padding:10px 12px;border-radius:999px;color:var(--muted);font-weight:700;font-size:.92rem}.nav-links a:hover,.nav-links a:focus-visible{background:rgba(255,255,255,.08);color:var(--text);outline:none}.menu-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);border-radius:12px;padding:10px 12px;font-weight:800}.hero-grid{display:grid;grid-template-columns:1.4fr .68fr;gap:26px;align-items:center;padding:46px 0 58px}.hero h1{font-size:clamp(2.15rem,6vw,5.1rem);line-height:.98;margin:0 0 18px;letter-spacing:-.06em}.lead{font-size:clamp(1.02rem,2vw,1.24rem);color:var(--soft);max-width:870px}.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.14em;color:var(--brand);font-weight:900;font-size:.76rem}.hero-actions,.button-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}.btn{border:1px solid var(--line);border-radius:999px;padding:12px 16px;font-weight:900;color:var(--text);background:rgba(255,255,255,.065);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;transition:transform .18s ease,background .18s ease,border-color .18s ease}.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.1)}.btn:focus-visible,.export-card:focus-visible,.preset-card:focus-visible,.record-button:focus-visible,.upload-box:focus-within{outline:none;box-shadow:var(--focus)}.btn-primary{border-color:transparent;background:linear-gradient(135deg,var(--brand),#38bdf8);color:#031221}.btn-soft{background:rgba(94,234,212,.12);border-color:rgba(94,234,212,.28)}.btn-ghost{background:rgba(255,255,255,.04)}.btn-danger{background:rgba(251,113,133,.16);border-color:rgba(251,113,133,.35)}.btn-xl{padding:15px 22px;font-size:1.05rem}.compact{min-height:38px;padding:8px 12px}.compact-row{justify-content:flex-end;margin-top:0}.truth-card,.notice{margin-top:18px;padding:16px;border:1px solid rgba(94,234,212,.24);background:rgba(94,234,212,.09);border-radius:var(--radius2);color:var(--soft)}.readiness-card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));box-shadow:var(--shadow);padding:22px}.score-ring{margin:0 auto 18px;width:150px;height:150px;border-radius:999px;display:grid;place-items:center;background:conic-gradient(var(--brand) var(--score,0deg),rgba(255,255,255,.08) 0);position:relative}.score-ring:after{content:"";position:absolute;inset:12px;background:var(--bg2);border-radius:inherit}.score-ring span,.score-ring small{position:relative;z-index:2}.score-ring span{font-size:2rem;font-weight:1000}.score-ring small{font-size:.78rem;color:var(--muted);text-transform:uppercase;font-weight:900;letter-spacing:.1em}.status-stack{display:grid;gap:10px}.status-stack div{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04)}.status-stack span{color:var(--muted)}.status-stack b{color:var(--text)}.workflow-strip{margin:24px 0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.workflow-strip a{padding:15px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.055)}.workflow-strip strong{display:block}.workflow-strip span{display:block;color:var(--muted);font-size:.9rem}.panel{margin:20px 0;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(16,30,51,.9),rgba(11,23,40,.86));box-shadow:0 12px 40px rgba(0,0,0,.18)}.section-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.section-head h2{margin:0;font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.08;letter-spacing:-.03em}.wide{align-items:center}.completion{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.06);color:var(--soft);font-weight:800;font-size:.82rem}.chip.good{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.36)}.chip.warn{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.36)}.chip.bad{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.36)}.creator-grid,.writing-grid,.voice-grid,.render-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.span-2{grid-column:span 2}.form-card,.assistant-card,.record-card,.quality-card,.player-card,.theory-card{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.052);padding:16px}.form-card label,.controls-grid label{display:grid;gap:7px;color:var(--soft);font-weight:800;font-size:.92rem;margin:0 0 12px}.form-card input,.form-card select,.form-card textarea,.controls-grid input,.controls-grid select,textarea,input,select{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.24);color:var(--text);border-radius:14px;padding:12px 13px;min-height:44px}textarea{resize:vertical}.form-card textarea:focus,.form-card input:focus,.form-card select:focus,.controls-grid input:focus,.controls-grid select:focus{outline:none;box-shadow:var(--focus);border-color:rgba(94,234,212,.5)}.stats{padding:10px;border-radius:14px;background:rgba(0,0,0,.18);color:var(--muted);font-weight:800}.output-box,.analysis-box{white-space:pre-wrap;min-height:180px;max-height:380px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.22);padding:14px;color:var(--soft)}.button-stack{display:grid;gap:8px;margin-top:12px}.controls-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}.theory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.note-row{display:flex;flex-wrap:wrap;gap:8px;color:var(--soft)}.note-row span{display:inline-flex;padding:8px 10px;border-radius:999px;background:rgba(94,234,212,.11);border:1px solid rgba(94,234,212,.23);font-weight:900}.mini-map{display:grid;gap:7px;color:var(--muted)}.mini-map div{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;padding:8px;background:rgba(0,0,0,.16)}.record-card{display:grid;gap:14px}.record-button{width:100%;border:none;border-radius:22px;padding:24px;background:linear-gradient(135deg,rgba(94,234,212,.95),rgba(139,92,246,.95));color:#04111e;text-align:left}.record-button b{display:block;font-size:1.45rem}.record-button span{font-weight:900}.record-button.recording{background:linear-gradient(135deg,var(--hot),var(--gold))}.upload-box{display:grid;place-items:center;min-height:130px;padding:18px;border:1.5px dashed rgba(94,234,212,.42);border-radius:22px;background:rgba(94,234,212,.08);text-align:center;color:var(--soft);cursor:pointer}.upload-box input{display:none}.consent{display:flex;gap:10px;align-items:center;color:var(--soft);font-weight:800}.consent input{width:auto;min-height:auto}canvas{width:100%;height:auto;border-radius:18px;background:rgba(0,0,0,.2);border:1px solid var(--line)}.progress-wrap{height:14px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-bottom:10px}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),#38bdf8,var(--brand2));transition:width .2s ease}.progress-text{color:var(--muted);font-weight:800;margin-bottom:10px}.quality-list{display:grid;gap:8px}.quality-list span{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.045)}audio{width:100%;margin:8px 0 12px}.export-grid,.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.export-card,.feature-grid article{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.052);padding:18px;color:var(--text);text-align:left}.export-card strong,.feature-grid b{display:block;font-size:1.05rem}.export-card span,.feature-grid span{display:block;color:var(--muted);margin-top:5px}.checklist{margin:0;padding-left:24px;color:var(--soft)}.checklist li{margin:8px 0}code{background:rgba(0,0,0,.34);padding:.18rem .38rem;border-radius:7px;color:#b9f8ee}pre{white-space:pre-wrap;word-break:break-word;min-height:160px;max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.28);padding:14px;color:var(--soft)}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,120%);background:#f8fafc;color:#04111e;border-radius:999px;padding:12px 16px;font-weight:1000;box-shadow:var(--shadow);z-index:40;transition:transform .25s ease;max-width:min(720px,calc(100% - 28px));text-align:center}.toast.show{transform:translate(-50%,0)}
@media (max-width:980px){.hero-grid,.creator-grid,.writing-grid,.voice-grid,.render-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.workflow-strip,.theory-grid,.export-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}.controls-grid{grid-template-columns:repeat(2,1fr)}.section-head,.wide{display:grid}.compact-row{justify-content:flex-start}.nav-links{display:none;position:absolute;left:12px;right:12px;top:72px;z-index:30;padding:12px;border:1px solid var(--line);border-radius:20px;background:#0b1728;box-shadow:var(--shadow)}.nav-links.open{display:grid;grid-template-columns:1fr 1fr}.menu-toggle{display:inline-flex}.topbar{position:relative}.topbar .compact{display:none}}
@media (max-width:620px){.shell{width:min(100% - 18px,1180px)}.hero-grid{padding:24px 0 36px}.panel{padding:16px;border-radius:20px}.workflow-strip,.theory-grid,.export-grid,.feature-grid,.controls-grid{grid-template-columns:1fr}.hero-actions,.button-row{display:grid}.btn,.export-card{width:100%}.readiness-card{padding:16px}.score-ring{width:120px;height:120px}.nav-links.open{grid-template-columns:1fr}.brand-copy small{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.btn:hover{transform:none}}


/* v19 interactive piano + uploaded audio chord analysis */
.piano-lab{position:relative;overflow:hidden}.piano-layout{display:grid;grid-template-columns:1.28fr .92fr;gap:14px}.piano-main,.coach-card{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.052);padding:16px}.piano-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.piano-toolbar label{display:grid;gap:7px;color:var(--soft);font-weight:850;font-size:.88rem}.piano-stage{border:1px solid rgba(94,234,212,.18);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.24));padding:14px;overflow:hidden}.piano-legend{color:var(--soft);font-weight:900;margin-bottom:12px;min-height:28px}.piano-keys{position:relative;display:flex;align-items:flex-start;min-height:206px;overflow-x:auto;padding:12px 8px 18px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));touch-action:pan-x}.piano-key{position:relative;flex:0 0 44px;border:1px solid rgba(0,0,0,.44);border-radius:0 0 12px 12px;margin:0 1px;height:172px;background:linear-gradient(180deg,#fff,#cbd5e1);color:#07111f;font-weight:1000;display:flex;align-items:flex-end;justify-content:center;padding:0 4px 14px;box-shadow:inset 0 -12px 22px rgba(0,0,0,.12);transition:transform .08s ease,filter .08s ease,box-shadow .08s ease}.piano-key.black{height:106px;flex-basis:31px;margin-left:-17px;margin-right:-17px;z-index:2;background:linear-gradient(180deg,#1f2937,#020617);color:#f8fafc;border-color:#000;border-radius:0 0 9px 9px}.piano-key span{font-size:.76rem}.piano-key small{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:.65rem;opacity:.72}.piano-key.active{transform:translateY(5px);filter:brightness(1.18);box-shadow:0 0 0 4px rgba(94,234,212,.28),0 10px 24px rgba(94,234,212,.22)}.piano-key.scale-tone{box-shadow:inset 0 -16px 0 rgba(94,234,212,.42)}.piano-key.chord-tone{box-shadow:inset 0 -16px 0 rgba(251,191,36,.55)}.piano-key.motif-tone{box-shadow:inset 0 -16px 0 rgba(139,92,246,.55)}.piano-key.selected{outline:3px solid rgba(251,113,133,.75);outline-offset:-5px}.piano-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.coach-score{display:grid;place-items:center;margin:8px auto 12px;width:126px;height:126px;border-radius:999px;background:radial-gradient(circle at 40% 30%,rgba(94,234,212,.34),rgba(139,92,246,.18)),rgba(255,255,255,.07);border:1px solid rgba(94,234,212,.28)}.coach-score span{font-size:1.85rem;font-weight:1000}.coach-score small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:900;font-size:.66rem;text-align:center;max-width:86px}.chord-detector{border:1px solid rgba(251,191,36,.25);background:rgba(251,191,36,.1);border-radius:16px;padding:12px;color:var(--soft);font-weight:900;margin-bottom:12px}.coach-card .output-box{min-height:240px}.piano-key:focus-visible{outline:none;box-shadow:var(--focus)}
@media (max-width:980px){.piano-layout{grid-template-columns:1fr}.piano-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.piano-key{flex-basis:40px}.piano-key.black{flex-basis:28px;margin-left:-15px;margin-right:-15px}}
@media (max-width:620px){.piano-toolbar{grid-template-columns:1fr}.piano-actions{display:grid}.piano-keys{min-height:178px}.piano-key{height:146px;flex-basis:38px}.piano-key.black{height:92px;flex-basis:26px;margin-left:-14px;margin-right:-14px}.coach-score{width:110px;height:110px}}


/* v19 uploaded-song chord analyzer */
.piano-layout.enhanced{align-items:start}.analyzer-card{position:sticky;top:12px}.compact-upload{min-height:106px;margin-bottom:12px}.analysis-status{padding:10px 12px;border-radius:14px;border:1px solid rgba(94,234,212,.22);background:rgba(94,234,212,.08);color:var(--soft);font-weight:900;margin-bottom:10px}.detected-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.detected-grid div{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.045);min-width:0}.detected-grid small{display:block;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.65rem}.detected-grid strong{display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chord-timeline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:58px;max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.2);padding:10px;margin-top:10px}.chord-chip{border:1px solid rgba(94,234,212,.3);background:rgba(94,234,212,.11);color:var(--text);border-radius:999px;padding:8px 10px;font-weight:1000;display:inline-grid;gap:1px;line-height:1.05}.chord-chip small{color:var(--muted);font-weight:800}.chord-chip:hover,.chord-chip.active{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.5)}.chord-pads{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.chord-pad{border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.08);color:var(--text);padding:10px 12px;font-weight:1000;min-width:74px}.chord-pad:hover,.chord-pad.active{background:rgba(139,92,246,.2);border-color:rgba(139,92,246,.5)}.coach-wide-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.compact-output{min-height:150px;max-height:260px}.mini-help{margin-top:12px;color:var(--muted);border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);padding:12px}.no-top{margin-top:0}.support-hidden{display:none!important}
@media (max-width:980px){.analyzer-card{position:static}.coach-wide-grid{grid-template-columns:1fr}.detected-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:620px){.detected-grid{grid-template-columns:1fr}.chord-chip,.chord-pad{width:100%;justify-content:center;text-align:center}.piano-layout{gap:12px}}


/* v21 clean 360 full-stack creator studio */
.studio360,.producer-suite,.artist-suite{position:relative;overflow:hidden}.studio360:before,.producer-suite:before,.artist-suite:before{content:"";position:absolute;inset:-120px auto auto -90px;width:260px;height:260px;border-radius:999px;background:rgba(94,234,212,.10);filter:blur(8px);pointer-events:none}.role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.role-card{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.055);color:var(--text);padding:18px;text-align:left;min-height:112px}.role-card strong{display:block;font-size:1.15rem}.role-card span{display:block;color:var(--muted);font-weight:800;margin-top:6px}.role-card.active,.role-card:hover{border-color:rgba(94,234,212,.55);background:linear-gradient(180deg,rgba(94,234,212,.16),rgba(139,92,246,.10));box-shadow:0 12px 36px rgba(94,234,212,.10)}.studio360-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.toolkit-panel{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.052);padding:16px;position:relative}.toolkit-toolbar{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px;margin-bottom:12px}.toolkit-toolbar label{display:grid;gap:7px;color:var(--soft);font-weight:900}.toolkit-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.toolkit-card{border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(0,0,0,.18);color:var(--text);padding:14px;text-align:left;min-height:132px}.toolkit-card small{color:var(--brand);font-weight:1000;text-transform:uppercase;letter-spacing:.09em}.toolkit-card strong{display:block;margin-top:5px;font-size:1rem}.toolkit-card span{display:block;color:var(--muted);margin-top:7px;font-weight:760}.toolkit-card:hover,.toolkit-card:focus-visible{outline:none;box-shadow:var(--focus);border-color:rgba(94,234,212,.45);background:rgba(94,234,212,.09)}.toolkit-empty{grid-column:1/-1;border:1px dashed rgba(94,234,212,.35);border-radius:18px;padding:18px;color:var(--soft);background:rgba(94,234,212,.06)}.producer-suite .analysis-box,.artist-suite .analysis-box{min-height:260px}
@media (max-width:1100px){.workflow-strip{grid-template-columns:repeat(3,1fr)}.role-grid{grid-template-columns:repeat(2,1fr)}.studio360-grid{grid-template-columns:1fr}.toolkit-toolbar{grid-template-columns:1fr}.toolkit-cards{grid-template-columns:1fr}}
@media (max-width:620px){.workflow-strip,.role-grid{grid-template-columns:1fr}.role-card,.toolkit-card{min-height:auto}.studio360-grid{gap:12px}}


/* v21 Clean Workspace UX repair: no overlaps, no hidden cards, no stressful overflow */
:root{--radius:22px;--radius2:16px;--section-gap:16px}
html,body{max-width:100%;overflow-x:hidden;text-rendering:optimizeLegibility}
body{font-size:15.5px;line-height:1.48}
*,*::before,*::after{min-width:0}
.shell{width:min(1320px,calc(100% - 28px))}
.topbar{position:sticky;top:0;z-index:60;padding:10px 0;background:rgba(7,17,31,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{min-width:200px}.brand-logo{width:42px;height:42px;border-radius:14px}.brand-copy strong{font-size:.98rem}.brand-copy small{font-size:.72rem}
.nav-links{flex:1;margin-left:6px;justify-content:flex-end;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:2px}.nav-links::-webkit-scrollbar{display:none}.nav-links a{font-size:.84rem;padding:8px 10px}.topbar .btn{white-space:nowrap}
.hero{overflow:clip}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:18px;padding:26px 0 30px}.hero h1{font-size:clamp(1.75rem,4.2vw,3.65rem);line-height:1.04;letter-spacing:-.045em;margin-bottom:12px;max-width:980px}.lead{font-size:clamp(.98rem,1.6vw,1.12rem);max-width:800px;margin:0 0 6px}.truth-card{font-size:.95rem;padding:13px 14px;margin-top:14px}.readiness-card{padding:16px}.score-ring{width:116px;height:116px}.score-ring span{font-size:1.5rem}.status-stack div{padding:9px 10px;font-size:.9rem}.hero-actions,.button-row{gap:8px;margin-top:12px}.btn{min-height:42px;padding:10px 14px;border-radius:16px}.btn-xl{font-size:1rem;padding:12px 16px}.btn-primary{box-shadow:0 10px 28px rgba(94,234,212,.14)}
.workflow-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;margin:16px 0;scroll-snap-type:x proximity}.workflow-strip a{flex:0 0 175px;scroll-snap-align:start;padding:12px 13px}.workflow-strip strong{font-size:.95rem}.workflow-strip span{font-size:.82rem}
.panel{margin:var(--section-gap) 0;padding:18px;border-radius:22px;overflow:hidden}.section-head,.section-head.wide,.wide{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;margin-bottom:14px}.section-head h2{font-size:clamp(1.22rem,2.2vw,1.82rem);line-height:1.12;letter-spacing:-.025em;max-width:900px}.eyebrow{font-size:.68rem;margin-bottom:6px;letter-spacing:.12em}.compact-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:430px}.compact-row .btn{font-size:.9rem;white-space:nowrap}.completion{justify-content:flex-start}.chip{font-size:.76rem;min-height:28px;padding:5px 8px;border-radius:12px}
.creator-grid,.writing-grid,.voice-grid,.render-grid,.studio360-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.form-card,.assistant-card,.record-card,.quality-card,.player-card,.theory-card,.toolkit-panel,.piano-main,.coach-card{padding:14px;border-radius:18px;overflow:hidden}.form-card label,.controls-grid label,.piano-toolbar label,.toolkit-toolbar label{font-size:.86rem;gap:6px;margin-bottom:10px}.form-card input,.form-card select,.form-card textarea,.controls-grid input,.controls-grid select,textarea,input,select{min-height:40px;padding:10px 11px;border-radius:12px}.output-box,.analysis-box{min-height:140px;max-height:310px;font-size:.92rem;padding:12px;border-radius:14px}.compact-output{min-height:110px;max-height:210px}.controls-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.theory-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.export-grid,.feature-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.export-card{padding:14px;border-radius:16px}.role-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.role-card{padding:14px;border-radius:18px;min-height:auto}.role-card strong{font-size:1.02rem}.role-card span{font-size:.86rem}.toolkit-toolbar{grid-template-columns:minmax(180px,.75fr) minmax(230px,1.25fr)}.toolkit-cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.toolkit-card{padding:12px;border-radius:16px;min-height:112px}.toolkit-card span{font-size:.86rem}
.piano-layout,.piano-layout.enhanced{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}.piano-main{width:100%;overflow:hidden}.piano-toolbar{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}.piano-stage{padding:12px;border-radius:18px;overflow:hidden}.piano-legend{font-size:.9rem;min-height:auto;margin-bottom:9px}.piano-keys{width:100%;max-width:100%;min-height:174px;overflow-x:auto;overflow-y:hidden;padding:10px 8px 14px;border-radius:16px;scrollbar-color:rgba(94,234,212,.5) rgba(255,255,255,.08)}.piano-key{height:146px;flex-basis:39px}.piano-key.black{height:94px;flex-basis:27px;margin-left:-14px;margin-right:-14px}.piano-key span{font-size:.68rem}.piano-key small{font-size:.6rem}.chord-pads{gap:7px}.chord-pad{min-width:auto;padding:9px 11px;border-radius:12px}.piano-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px;margin-top:10px}.piano-actions .btn{width:100%}.analyzer-card{position:relative!important;top:auto!important;width:100%;display:grid;grid-template-columns:minmax(240px,.55fr) minmax(0,1fr);gap:12px;align-items:start}.analyzer-card h3{grid-column:1/-1;margin:0}.analyzer-card .compact-upload{grid-column:1;min-height:96px;margin:0}.analyzer-card .analysis-status{grid-column:1;margin:0}.analyzer-card .detected-grid{grid-column:1;grid-template-columns:1fr;gap:7px;margin:0}.analyzer-card canvas{grid-column:2;grid-row:2 / span 3;min-height:135px;max-height:190px;object-fit:cover}.analyzer-card .chord-timeline{grid-column:1/-1;min-height:48px;max-height:126px;margin:0}.analyzer-card .button-stack{grid-column:1/-1;display:flex;flex-wrap:wrap;margin-top:0}.analyzer-card .button-stack .btn{flex:1 1 220px}.analyzer-card #audioAnalysisOutput{grid-column:1/-1}.detected-grid div{padding:8px;border-radius:12px}.detected-grid small{font-size:.58rem}.detected-grid strong{font-size:.92rem}.chord-timeline{padding:8px}.chord-chip{font-size:.85rem;padding:7px 9px;border-radius:12px}.coach-wide-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.coach-score{width:102px;height:102px}.coach-score span{font-size:1.45rem}.coach-card .output-box{min-height:140px}.mini-help{font-size:.9rem;padding:10px;border-radius:14px}.upload-box{min-height:108px;padding:14px;border-radius:18px}.record-button{padding:18px;border-radius:18px}.record-button b{font-size:1.18rem}canvas{border-radius:14px}.support-hidden{display:none!important}
@media (max-width:1180px){.hero-grid{grid-template-columns:1fr}.readiness-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}.score-ring{margin:0}.status-stack{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head,.section-head.wide,.wide{grid-template-columns:1fr}.compact-row{max-width:none;justify-content:flex-start}.creator-grid,.writing-grid,.voice-grid,.render-grid,.studio360-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.toolkit-toolbar{grid-template-columns:1fr}.analyzer-card{grid-template-columns:1fr}.analyzer-card .compact-upload,.analyzer-card .analysis-status,.analyzer-card .detected-grid,.analyzer-card canvas,.analyzer-card .chord-timeline,.analyzer-card .button-stack,.analyzer-card #audioAnalysisOutput{grid-column:1;grid-row:auto}.detected-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.coach-wide-grid{grid-template-columns:1fr}}
@media (max-width:760px){body{font-size:14.5px}.shell{width:min(100% - 18px,1320px)}.topbar{flex-wrap:wrap;gap:8px}.brand{min-width:0;flex:1}.menu-toggle{display:inline-flex}.nav-links{display:none;position:static;flex:0 0 100%;order:5;margin:0;padding:8px;border:1px solid var(--line);border-radius:16px;background:#0b1728;white-space:normal}.nav-links.open{display:grid;grid-template-columns:1fr 1fr}.topbar .compact{display:none}.hero-grid{padding:18px 0 22px}.hero h1{font-size:clamp(1.55rem,7vw,2.15rem);letter-spacing:-.03em}.hero-actions,.button-row{display:grid;grid-template-columns:1fr}.btn,.export-card{width:100%;border-radius:14px}.readiness-card{display:block}.score-ring{margin:0 auto 12px}.status-stack{grid-template-columns:1fr}.panel{padding:14px;border-radius:18px}.workflow-strip a{flex-basis:155px}.piano-toolbar{grid-template-columns:1fr}.piano-keys{min-height:158px}.piano-key{height:130px;flex-basis:36px}.piano-key.black{height:84px;flex-basis:24px;margin-left:-13px;margin-right:-13px}.piano-actions{grid-template-columns:1fr}.detected-grid{grid-template-columns:1fr}.analyzer-card .button-stack{display:grid}.chord-chip,.chord-pad{width:auto;min-width:64px;text-align:center}.role-grid,.toolkit-cards,.theory-grid,.export-grid{grid-template-columns:1fr}.output-box,.analysis-box{max-height:260px}}
@media (max-width:420px){.nav-links.open{grid-template-columns:1fr}.brand-copy small{display:none}.brand-logo{width:38px;height:38px}.piano-key{flex-basis:34px}.piano-key.black{flex-basis:23px}.workflow-strip a{flex-basis:145px}.section-head h2{font-size:1.15rem}.form-card,.assistant-card,.record-card,.quality-card,.player-card,.theory-card,.toolkit-panel,.piano-main,.coach-card{padding:12px}}


/* v25 Sheet Music Global device optimization: phones, tablets, laptops, desktops */
:root{
  --gutter: clamp(10px, 2.2vw, 28px);
  --card-pad: clamp(12px, 1.6vw, 20px);
  --tap: 44px;
  --dock-h: 66px;
  --text-0: clamp(.82rem, .78rem + .16vw, .94rem);
  --text-1: clamp(.94rem, .88rem + .24vw, 1.08rem);
  --text-2: clamp(1.14rem, 1rem + .7vw, 1.55rem);
  --text-3: clamp(1.55rem, 1.05rem + 2.2vw, 3.25rem);
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-size:var(--text-1);line-height:1.5;min-height:calc(var(--vh,1vh) * 100)}
img,svg,canvas,video,audio{max-width:100%} audio{width:100%;min-height:var(--tap)}
button,a,input,select,textarea{touch-action:manipulation}
input,select,textarea{font-size:max(16px,var(--text-0))}
textarea{resize:vertical;min-height:112px;overflow:auto;overflow-wrap:anywhere}
.shell{width:min(1440px,calc(100% - (var(--gutter) * 2)));margin-inline:auto}
.panel{container-type:inline-size;padding:var(--card-pad);scroll-margin-top:88px;box-shadow:0 18px 60px rgba(0,0,0,.16)}
.panel + .panel{margin-top:clamp(12px,2vw,22px)}
.section-head h2,.hero h1{overflow-wrap:balance;text-wrap:balance}.lead,.truth-card,.mini-help,.output-box,.analysis-box{overflow-wrap:anywhere}
.topbar{width:100%;padding-inline:var(--gutter)}
.nav-links a,.btn,.export-card,.role-card,.toolkit-card{min-height:var(--tap)}
.btn,.export-card,.role-card,.toolkit-card{display:inline-flex;align-items:center;justify-content:center}.role-card,.toolkit-card,.export-card{justify-content:flex-start}
.hero-grid{min-height:auto;padding-block:clamp(18px,3vw,42px)}.hero-copy{min-width:0}.hero h1{font-size:var(--text-3);max-width:1050px}.lead{max-width:74ch}.hero-actions{display:flex;flex-wrap:wrap}.hero-actions .btn{flex:0 1 auto}.readiness-card{align-self:start}
.workflow-strip{position:sticky;top:64px;z-index:30;background:linear-gradient(180deg,rgba(7,17,31,.96),rgba(7,17,31,.78));backdrop-filter:blur(14px);border-radius:0 0 18px 18px;padding-block:8px;margin-top:0}.workflow-strip a{min-width:155px}
.creator-grid,.writing-grid,.voice-grid,.render-grid,.studio360-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.creator-grid > *,.writing-grid > *,.voice-grid > *,.render-grid > *,.studio360-grid > *{grid-column:span 4}.span-2{grid-column:span 8!important}.form-card,.assistant-card,.record-card,.quality-card,.player-card,.theory-card,.toolkit-panel,.piano-main,.coach-card{padding:var(--card-pad);min-width:0}.controls-grid,.theory-grid,.export-grid,.feature-grid,.role-grid,.toolkit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(8px,1vw,14px)}
.output-box,.analysis-box{white-space:pre-wrap;max-height:min(42vh,360px);overflow:auto;overscroll-behavior:contain}.compact-output{max-height:min(34vh,260px)}
.piano-layout.enhanced{gap:clamp(10px,1.5vw,18px)}.piano-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}.piano-stage{display:grid;gap:10px}.piano-legend{font-size:var(--text-0)}
.piano-keys{display:flex;align-items:flex-start;width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;contain:layout paint;min-height:clamp(138px,18vw,205px)}
.piano-key{scroll-snap-align:start;min-width:clamp(32px,4vw,48px);height:clamp(120px,16vw,170px)}.piano-key.black{min-width:clamp(22px,2.8vw,33px);height:clamp(78px,10vw,112px);z-index:2}.piano-key span,.piano-key small{pointer-events:none}.piano-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:8px}.piano-actions .btn{width:100%}
.analyzer-card{display:grid;grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);gap:clamp(10px,1.2vw,16px)}.analyzer-card h3{grid-column:1/-1}.analyzer-card canvas{width:100%;height:auto;min-height:140px;max-height:220px}.detected-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.detected-grid strong{overflow-wrap:anywhere}.chord-timeline{display:flex;flex-wrap:wrap;gap:7px;max-height:150px;overflow:auto}.button-stack{gap:8px}.button-stack .btn{width:100%}
.mobile-dock{display:none}
.toast{max-width:min(520px,calc(100% - 24px));left:auto;right:var(--gutter);bottom:18px}
@container (max-width: 760px){.section-head,.section-head.wide,.wide{grid-template-columns:1fr}.compact-row,.button-row{display:grid;grid-template-columns:1fr}.creator-grid > *,.writing-grid > *,.voice-grid > *,.render-grid > *,.studio360-grid > *,.span-2{grid-column:1/-1!important}.analyzer-card{grid-template-columns:1fr}.analyzer-card .compact-upload,.analyzer-card .analysis-status,.analyzer-card .detected-grid,.analyzer-card canvas,.analyzer-card .chord-timeline,.analyzer-card .button-stack,.analyzer-card #audioAnalysisOutput{grid-column:1;grid-row:auto}.detected-grid{grid-template-columns:1fr}.output-box,.analysis-box{max-height:320px}}
@media (min-width:1440px){.shell{width:min(1520px,calc(100% - 64px))}.hero-grid{grid-template-columns:minmax(0,1fr) 360px}.panel{border-radius:28px}.creator-grid > .form-card:first-child{grid-column:span 7}.creator-grid > .form-card:nth-child(2){grid-column:span 3}.creator-grid > .form-card:nth-child(3){grid-column:span 2}.piano-layout.enhanced{grid-template-columns:minmax(0,1fr)}.coach-wide-grid{grid-template-columns:1fr 1fr}}
@media (max-width:1180px){.topbar{gap:8px}.creator-grid > *,.writing-grid > *,.voice-grid > *,.render-grid > *,.studio360-grid > *{grid-column:span 6}.span-2{grid-column:span 12!important}.analyzer-card{grid-template-columns:1fr}.analyzer-card .compact-upload,.analyzer-card .analysis-status,.analyzer-card .detected-grid,.analyzer-card canvas,.analyzer-card .chord-timeline,.analyzer-card .button-stack,.analyzer-card #audioAnalysisOutput{grid-column:1;grid-row:auto}.detected-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){html{scroll-padding-top:72px}.shell{width:calc(100% - (var(--gutter) * 2))}.topbar{position:sticky;top:0}.brand-copy strong{font-size:.92rem}.brand-copy small{font-size:.68rem}.workflow-strip{top:62px;margin-inline:calc(var(--gutter) * -1);border-radius:0;padding-inline:var(--gutter)}.workflow-strip a{min-width:138px;padding:10px}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%}.readiness-card{display:grid;grid-template-columns:96px 1fr;gap:12px}.score-ring{width:96px;height:96px}.status-stack{grid-template-columns:1fr 1fr}.creator-grid,.writing-grid,.voice-grid,.render-grid,.studio360-grid{grid-template-columns:1fr}.creator-grid > *,.writing-grid > *,.voice-grid > *,.render-grid > *,.studio360-grid > *,.span-2{grid-column:1/-1!important}.coach-wide-grid{grid-template-columns:1fr}.export-grid{grid-template-columns:1fr 1fr}.piano-key span{display:none}.toast{bottom:calc(var(--dock-h) + 14px)}}
@media (max-width:640px){body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px));font-size:15px}.shell{width:calc(100% - 18px)}.hero{padding-top:0}.hero-grid{padding-block:14px 18px}.hero h1{font-size:clamp(1.45rem,7vw,2.05rem);line-height:1.08}.lead{font-size:.95rem}.truth-card{font-size:.9rem}.panel{border-radius:18px;margin-block:12px}.section-head h2{font-size:1.18rem}.eyebrow{font-size:.64rem}.btn{width:100%;padding:10px 12px}.topbar{padding-inline:9px}.nav-links.open{grid-template-columns:1fr 1fr}.workflow-strip{display:none}.readiness-card{display:block}.score-ring{margin-inline:auto}.status-stack{grid-template-columns:1fr}.completion{gap:6px}.chip{font-size:.72rem}.form-card input,.form-card select,.form-card textarea,.controls-grid input,.controls-grid select,textarea,input,select{border-radius:12px}.controls-grid,.theory-grid,.role-grid,.toolkit-cards,.export-grid{grid-template-columns:1fr}.piano-toolbar{grid-template-columns:1fr}.piano-stage{padding:10px}.piano-keys{min-height:136px;padding:8px 7px 12px}.piano-key{min-width:34px;height:118px}.piano-key.black{min-width:22px;height:76px;margin-inline:-12px}.piano-actions{grid-template-columns:1fr 1fr}.chord-pads{display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.chord-pad{flex:0 0 auto;min-width:74px}.detected-grid{grid-template-columns:1fr}.analyzer-card canvas{min-height:118px}.mobile-dock{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:80;height:var(--dock-h);display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:7px;border:1px solid rgba(148,163,184,.28);border-radius:22px;background:rgba(7,17,31,.92);box-shadow:0 18px 44px rgba(0,0,0,.45);backdrop-filter:blur(18px)}.mobile-dock a{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--muted);font-weight:900;font-size:.73rem;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}.mobile-dock a.active,.mobile-dock a:focus-visible{color:#07111f;background:linear-gradient(135deg,var(--accent),#38bdf8);box-shadow:var(--focus)}.toast{right:9px;left:9px;bottom:calc(var(--dock-h) + 16px);max-width:none}}
@media (max-width:380px){.brand-copy small{display:none}.brand-logo{width:36px;height:36px}.nav-links.open{grid-template-columns:1fr}.piano-actions{grid-template-columns:1fr}.piano-key{min-width:32px}.piano-key.black{min-width:21px}.mobile-dock a{font-size:.67rem}.panel{padding:11px}.form-card,.assistant-card,.record-card,.quality-card,.player-card,.theory-card,.toolkit-panel,.piano-main,.coach-card{padding:11px}.export-card span,.role-card span,.toolkit-card span{font-size:.8rem}}
@media (orientation:landscape) and (max-height:520px){.hero-grid{padding-block:10px}.hero h1{font-size:1.45rem}.lead,.truth-card{display:none}.mobile-dock{height:56px}.workflow-strip{display:none}.panel{scroll-margin-top:64px}.piano-keys{min-height:118px}.piano-key{height:104px}.piano-key.black{height:68px}}
@media (pointer:coarse){.btn,.export-card,.role-card,.toolkit-card,.chord-pad,.piano-key{min-height:46px}.nav-links a{padding:10px 12px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
@media print{.topbar,.workflow-strip,.mobile-dock,.hero-actions,.button-row,.piano-actions,.export-grid,.toast{display:none!important}body{background:white;color:black}.panel,.form-card,.assistant-card,.record-card,.quality-card,.player-card,.theory-card,.toolkit-panel,.piano-main,.coach-card{box-shadow:none;border:1px solid #bbb;background:white;color:black}.output-box,.analysis-box{max-height:none;color:black;background:white}}


/* =========================================================
   v25 LAYOUT SURGERY — final cascade override
   Goal: no overlapping text, no horizontal overflow, calmer navigation.
   ========================================================= */
:root{
  --v25-gutter:clamp(12px,2vw,28px);
  --v25-card-pad:clamp(12px,1.6vw,20px);
  --v25-tap:44px;
  --v25-line:1.35;
  --v25-grid-min:240px;
}
html{scroll-padding-top:82px;overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{overflow-x:hidden;line-height:var(--v25-line);}
*,*::before,*::after{min-width:0;}
img,svg,canvas,video,audio{max-width:100%;}
h1,h2,h3,h4,p,small,strong,span,label,button,input,select,textarea,div{overflow-wrap:anywhere;word-break:normal;}
button,input,select,textarea{max-width:100%;}
.shell{width:min(1320px,calc(100% - (var(--v25-gutter) * 2)));}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(14px,2.5vw,28px);}
.hero h1{font-size:clamp(1.85rem,4.7vw,4rem);line-height:1.04;letter-spacing:-.045em;max-width:920px;}
.lead{font-size:clamp(.98rem,1.35vw,1.14rem);}
.panel{padding:var(--v25-card-pad);overflow:clip;}
.section-head,.section-head.wide{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;}
.section-head h2{font-size:clamp(1.24rem,2.15vw,1.9rem);line-height:1.12;}
.button-row.compact-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center;}
.btn{min-height:var(--v25-tap);line-height:1.15;text-align:center;white-space:normal;max-width:100%;}
.btn:not(.btn-xl){padding:10px 14px;}
.nav-links{gap:6px;}
.nav-links a{min-height:38px;display:inline-flex;align-items:center;white-space:nowrap;}
.workflow-strip{display:flex!important;gap:10px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;overscroll-behavior-inline:contain;grid-template-columns:none!important;}
.workflow-strip a{flex:0 0 auto;min-width:138px;padding:11px 13px;}
.workflow-strip span{font-size:.8rem;}
.role-grid,.toolkit-cards,.controls-grid,.theory-grid,.export-grid,.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--v25-grid-min)),1fr));gap:clamp(8px,1vw,12px);align-items:stretch;}
.creator-grid,.writing-grid,.voice-grid,.render-grid,.studio360-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.4vw,16px);align-items:start;}
.studio360-grid>.span-2{grid-column:span 8!important;}
.studio360-grid>aside,.studio360-grid>.toolkit-panel:not(.span-2){grid-column:span 4!important;}
.creator-grid>*{grid-column:span 4;}.writing-grid>*{grid-column:span 4;}.voice-grid>*{grid-column:span 4;}.render-grid>*{grid-column:span 4;}
.creator-grid>.span-2,.writing-grid>.span-2,.voice-grid>.span-2,.render-grid>.span-2{grid-column:span 8!important;}
.form-card,.assistant-card,.record-card,.quality-card,.player-card,.theory-card,.toolkit-panel,.piano-main,.coach-card{padding:var(--v25-card-pad);overflow:hidden;}
.role-card,.toolkit-card,.export-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:5px;
  width:100%;
  min-height:auto!important;
  height:auto!important;
  text-align:left!important;
  line-height:1.22;
  white-space:normal!important;
  overflow:hidden;
}
.role-card{padding:14px 15px!important;border-radius:16px!important;}
.role-card strong{font-size:clamp(.96rem,1.15vw,1.08rem)!important;line-height:1.12;}
.role-card span{font-size:.84rem!important;line-height:1.24;color:var(--muted);}
.toolkit-card{padding:13px!important;border-radius:16px!important;}
.toolkit-card small{font-size:.66rem!important;line-height:1.1;letter-spacing:.08em;}
.toolkit-card strong{font-size:.98rem!important;line-height:1.12;margin:0!important;}
.toolkit-card span{font-size:.83rem!important;line-height:1.28;margin:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.export-card strong{line-height:1.12;}.export-card span{line-height:1.25;}
.toolkit-toolbar{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(260px,1.2fr);gap:10px;}
.output-box,.analysis-box{font-size:.92rem;line-height:1.38;max-height:min(38vh,320px);}
.compact-output{min-height:108px;max-height:min(32vh,240px);}
.piano-layout.enhanced{display:grid!important;grid-template-columns:1fr!important;gap:14px;}
.piano-main{width:100%;}
.piano-toolbar{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));}
.piano-stage{overflow:hidden;}
.piano-keys{max-width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:16px;}
.piano-actions{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));}
.coach-wide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,16px);}
.analyzer-card{display:grid!important;grid-template-columns:minmax(260px,360px) minmax(0,1fr)!important;gap:12px;position:relative!important;top:auto!important;}
.analyzer-card h3{grid-column:1/-1;}
.analyzer-card .compact-upload,.analyzer-card .analysis-status,.analyzer-card .detected-grid{grid-column:1;}
.analyzer-card canvas{grid-column:2;grid-row:2 / span 3;min-height:150px;}
.analyzer-card .chord-timeline,.analyzer-card .button-stack,.analyzer-card #audioAnalysisOutput{grid-column:1/-1;}
.detected-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.detected-grid div{overflow:hidden;}
.chord-chip,.chord-pad{white-space:nowrap;}
.status-stack div,.mini-map div,.quality-list span{align-items:flex-start;}
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr;}
  .readiness-card{max-width:none;}
  .studio360-grid>.span-2,.studio360-grid>aside,.studio360-grid>.toolkit-panel:not(.span-2),.creator-grid>*,.writing-grid>*,.voice-grid>*,.render-grid>*,.span-2{grid-column:1/-1!important;}
  .analyzer-card{grid-template-columns:1fr!important;}
  .analyzer-card .compact-upload,.analyzer-card .analysis-status,.analyzer-card .detected-grid,.analyzer-card canvas,.analyzer-card .chord-timeline,.analyzer-card .button-stack,.analyzer-card #audioAnalysisOutput{grid-column:1!important;grid-row:auto!important;}
}
@media (max-width:860px){
  html{scroll-padding-top:72px;}
  .topbar{position:sticky;top:0;z-index:50;background:rgba(7,17,31,.92);backdrop-filter:blur(16px);}
  .section-head,.section-head.wide{grid-template-columns:1fr;}
  .button-row.compact-row,.hero-actions,.button-row{display:grid;grid-template-columns:1fr;width:100%;}
  .button-row.compact-row .btn,.hero-actions .btn,.button-row .btn{width:100%;}
  .readiness-card{display:block;}
  .status-stack{grid-template-columns:1fr;}
  .role-grid,.toolkit-cards,.controls-grid,.theory-grid,.export-grid,.feature-grid{grid-template-columns:1fr;}
  .coach-wide-grid{grid-template-columns:1fr;}
  .toolkit-toolbar{grid-template-columns:1fr;}
  .nav-links.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .nav-links.open a{justify-content:center;white-space:normal;text-align:center;}
}
@media (max-width:640px){
  :root{--v25-gutter:9px;--v25-card-pad:12px;--v25-grid-min:100%;}
  .brand-logo{width:40px;height:40px;border-radius:14px;}
  .brand-copy strong{font-size:.9rem;}.brand-copy small{display:none;}
  .hero h1{font-size:clamp(1.48rem,7.2vw,2rem);}
  .lead,.truth-card{font-size:.9rem;}
  .panel{border-radius:18px;margin-block:12px;}
  .section-head h2{font-size:1.16rem;}
  .eyebrow{font-size:.62rem;letter-spacing:.12em;}
  .role-card,.toolkit-card,.export-card{padding:12px!important;}
  .output-box,.analysis-box{max-height:280px;}
  .piano-key{min-width:34px!important;height:116px!important;}.piano-key.black{min-width:22px!important;height:76px!important;}
  .piano-key span{display:none!important;}.piano-key small{font-size:.58rem!important;}
  .piano-actions{grid-template-columns:1fr 1fr;}
  .detected-grid{grid-template-columns:1fr;}
  .mobile-dock{height:64px;}
}
@media (max-width:390px){
  .nav-links.open{grid-template-columns:1fr;}
  .piano-actions{grid-template-columns:1fr;}
  .mobile-dock a{font-size:.66rem;}
}

/* v25 navigation finalizer: no sideways page overflow from the workflow strip */
.workflow-strip{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;overflow:visible!important;}
.workflow-strip a{min-width:0!important;width:100%;}
@media (max-width:1180px){.workflow-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media (max-width:640px){.workflow-strip{display:none!important;}}

/* v25 toast finalizer */
.toast{left:auto!important;right:var(--v25-gutter)!important;transform:translateY(120%)!important;}
.toast.show{transform:translateY(0)!important;}
@media (max-width:640px){.toast{left:9px!important;right:9px!important;max-width:none!important;}}


/* Sheets + Learning Coach v25 */
.learning-coach{
  position:relative;
  overflow:hidden;
}
.learning-coach::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 10%, rgba(94,234,212,.14), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(125,92,255,.16), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
}
.learning-coach > *{position:relative; z-index:1;}
.learning-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(260px,.82fr);
  gap:clamp(14px,2vw,24px);
  align-items:stretch;
}
.learning-command-card,
.learning-card,
.learning-stat-stack > div{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,17,31,.72);
  border-radius:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  backdrop-filter:blur(16px);
}
.learning-command-card{padding:clamp(14px,2vw,22px);}
.learning-controls{
  display:grid;
  grid-template-columns:repeat(5,minmax(145px,1fr));
  gap:12px;
  margin-bottom:16px;
}
.learning-controls label,
.answer-box{
  display:grid;
  gap:7px;
  color:rgba(217,230,248,.86);
  font-size:.88rem;
  font-weight:700;
}
.learning-controls select,
.answer-box input{
  width:100%;
  min-height:44px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.06);
  color:#eef7ff;
  padding:0 12px;
  outline:none;
}
.learning-progress-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 14px;
}
.learning-progress-bar{
  flex:1 1 220px;
  min-height:13px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
.learning-progress-bar span{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(94,234,212,.9), rgba(125,92,255,.9));
  transition:width .35s ease;
}
.lesson-output,
.quiz-zone,
.puzzle-zone,
.therapy-zone,
.practice-options{
  min-height:180px;
  white-space:pre-wrap;
  line-height:1.55;
}
.learning-stat-stack{
  display:grid;
  gap:12px;
}
.learning-stat-stack > div{
  padding:16px;
}
.learning-stat-stack small{
  display:block;
  color:rgba(217,230,248,.68);
  margin-bottom:6px;
}
.learning-stat-stack strong{color:#fff;}
.learning-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
  margin-top:clamp(14px,2vw,24px);
}
.learning-card{padding:clamp(14px,2vw,20px);}
.card-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.card-title-row h3{margin:0;}
.quiz-item{
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  padding:12px;
  margin:0 0 10px;
  background:rgba(255,255,255,.04);
}
.quiz-item legend{font-weight:800; padding:0 8px; color:#fff;}
.quiz-item label{
  display:block;
  padding:8px 6px;
  color:rgba(238,247,255,.88);
}
.quiz-feedback{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(94,234,212,.08);
  border:1px solid rgba(94,234,212,.18);
}
.quiz-feedback pre{
  white-space:pre-wrap;
  margin:.65rem 0 0;
  font:inherit;
  color:rgba(238,247,255,.9);
}
.practice-launchpad{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.full-width{width:100%; justify-content:center; margin-top:12px;}
.btn.compact{min-height:36px; padding:8px 12px;}
.site-footer{
  margin:clamp(28px,5vw,64px) auto 0;
  padding:0 clamp(14px,3vw,28px) calc(78px + env(safe-area-inset-bottom));
}
.footer-shell{
  max-width:1180px;
  margin:0 auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px 28px 0 0;
  background:linear-gradient(135deg, rgba(7,17,31,.95), rgba(13,34,60,.92));
  box-shadow:0 -18px 50px rgba(0,0,0,.22);
  padding:clamp(18px,3vw,28px);
  display:grid;
  grid-template-columns:1.25fr 1.5fr 1fr;
  gap:clamp(16px,3vw,30px);
  align-items:start;
}
.footer-brand{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.footer-brand p,
.footer-copy p{
  margin:.35rem 0 0;
  color:rgba(217,230,248,.74);
  line-height:1.5;
}
.footer-logo{flex:0 0 auto;}
.footer-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.footer-links a,
.footer-copy a{
  color:#7dd3fc;
  text-decoration:none;
  border-bottom:1px solid rgba(125,211,252,.25);
}
.footer-links a{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}
.footer-links a:hover,
.footer-copy a:hover{color:#a7f3d0; border-color:rgba(167,243,208,.55);}

@media (max-width:1100px){
  .learning-controls{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-shell{grid-template-columns:1fr 1fr;}
  .footer-copy{grid-column:1/-1;}
}
@media (max-width:760px){
  .learning-hero-grid,
  .learning-grid,
  .footer-shell{grid-template-columns:1fr;}
  .learning-controls,
  .practice-launchpad,
  .footer-links{grid-template-columns:1fr;}
  .card-title-row{align-items:flex-start; flex-direction:column;}
  .lesson-output,.quiz-zone,.puzzle-zone,.therapy-zone,.practice-options{min-height:140px;}
}


/* v25 Sheet Music Global Lab + navigation optimization */
:root{--v25-card-min:260px;}
.nav-links{max-width:100%;}
.nav-links a{letter-spacing:-.01em;}
.workflow-strip{grid-template-columns:repeat(8,minmax(0,1fr))!important;}
.mobile-dock{grid-template-columns:repeat(7,1fr)!important;}
.sheet-lab{position:relative;overflow:hidden;}
.sheet-lab::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 12%,rgba(56,189,248,.18),transparent 30%),radial-gradient(circle at 86% 20%,rgba(94,234,212,.16),transparent 34%),linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.01));}
.sheet-lab>*{position:relative;z-index:1;}
.sheet-lab-grid{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.6fr);gap:clamp(12px,2vw,22px);align-items:start;}
.sheet-control-card,.sheet-preview-card{border:1px solid rgba(255,255,255,.13);border-radius:24px;background:rgba(7,17,31,.74);padding:clamp(14px,2vw,20px);box-shadow:0 18px 46px rgba(0,0,0,.2);overflow:hidden;}
.sheet-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.sheet-controls label{display:grid;gap:6px;color:var(--soft);font-weight:900;font-size:.88rem;}
.sheet-controls select{min-height:44px;}
.sheet-actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;}
.sheet-status-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px;}
.sheet-status-row span{display:grid;gap:2px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:rgba(255,255,255,.055);padding:10px 12px;}
.sheet-status-row small{color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;}
.sheet-status-row strong{font-size:.94rem;line-height:1.14;}
.sheet-preview{min-height:280px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(236,253,245,.88));color:#0f172a;padding:10px;overflow:auto;margin-bottom:12px;}
.sheet-preview svg{width:100%;height:auto;border:0;background:transparent;}
.sheet-text-output{min-height:260px;max-height:460px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.86rem;line-height:1.45;}
@media (max-width:1180px){.workflow-strip{grid-template-columns:repeat(4,minmax(0,1fr))!important;}.sheet-lab-grid{grid-template-columns:1fr;}.sheet-preview-card,.sheet-control-card{grid-column:1/-1!important;}}
@media (max-width:760px){.sheet-controls,.sheet-actions-grid,.sheet-status-row{grid-template-columns:1fr;}.sheet-preview{min-height:190px}.sheet-text-output{max-height:330px}.mobile-dock{grid-template-columns:repeat(4,1fr)!important;height:auto!important;min-height:64px}.mobile-dock a{min-height:38px;}}
@media (max-width:640px){.workflow-strip{display:none!important}.sheet-lab-grid{gap:10px}.sheet-control-card,.sheet-preview-card{border-radius:18px;padding:12px}.sheet-preview{padding:6px}.sheet-text-output{font-size:.78rem}}
@media print{.sheet-control-card,.site-footer,.mobile-dock,.topbar,.hero,.workflow-strip,.button-row,.sheet-actions-grid{display:none!important}.sheet-lab{background:white!important;color:black!important;border:0!important;box-shadow:none!important}.sheet-preview-card{border:0!important;background:white!important;box-shadow:none!important}.sheet-text-output{max-height:none!important;color:black!important;background:white!important}.sheet-preview{background:white!important;border:0!important;}}

/* =========================================================
   v26 UI/UX + navigation hardening
   - Storage-safe app startup supported in JS.
   - Seven-link mobile dock: Create, Learn, Sheets, Write, Piano, Render, Export.
   - Cleaner sticky navigation, stronger section scanability, no horizontal overflow.
   ========================================================= */
:root{--dock-h:72px;--nav-h:72px;}
.topbar{position:sticky;top:0;z-index:90;background:rgba(7,17,31,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);}
.nav-links a[href="#sheet-lab"],.mobile-dock a[href="#sheet-lab"]{color:#cffafe;border-color:rgba(94,234,212,.24);}
.panel{scroll-margin-top:calc(var(--nav-h) + 12px);}
.panel[id="learning-coach"],.panel[id="sheet-lab"]{border-color:rgba(94,234,212,.22);}
.workflow-strip{position:sticky;top:calc(var(--nav-h) + 4px);z-index:35;background:rgba(7,17,31,.72);backdrop-filter:blur(14px);padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:22px;}
.workflow-strip a{transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.workflow-strip a:hover{transform:translateY(-1px);border-color:rgba(94,234,212,.36);background:rgba(94,234,212,.10);}
.learning-controls select,.sheet-controls select,.toolkit-toolbar input,.toolkit-toolbar select{min-height:48px;}
.lesson-output,.quiz-zone,.puzzle-zone,.therapy-zone,.practice-options,.sheet-text-output,.output-box,.analysis-box{overscroll-behavior:contain;scrollbar-width:thin;}
.sheet-preview{box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);}
.footer-links a{min-height:44px;display:flex;align-items:center;}
@media (max-width:860px){
  :root{--nav-h:64px;--dock-h:74px;}
  .topbar{width:100%;padding:10px 9px;border-radius:0;}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .nav-links{display:none;position:absolute;top:100%;left:9px;right:9px;margin:0;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(7,17,31,.96);box-shadow:0 20px 60px rgba(0,0,0,.35);}
  .nav-links.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .nav-links a{min-height:44px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);}
}
@media (max-width:640px){
  body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px) + 14px)!important;}
  .mobile-dock{display:grid!important;grid-template-columns:repeat(7,minmax(62px,1fr))!important;grid-auto-flow:column;overflow-x:auto;overflow-y:hidden;align-items:stretch;height:var(--dock-h)!important;min-height:0!important;scrollbar-width:none;}
  .mobile-dock::-webkit-scrollbar{display:none;}
  .mobile-dock a{min-height:52px!important;white-space:nowrap;font-size:.68rem;}
  .mobile-dock a span{display:block;overflow:hidden;text-overflow:ellipsis;}
  .panel{scroll-margin-top:76px;}
  .learning-controls,.sheet-controls{gap:8px;}
}
@media (max-width:380px){.mobile-dock{grid-template-columns:repeat(7,minmax(58px,1fr))!important}.mobile-dock a{font-size:.63rem}.hero h1{letter-spacing:-.035em}}