:root{--bg:#f1f5fb;--bg-soft:#ffffff94;--panel:#ffffffb8;--panel-strong:#ffffffd6;--line:#3e5f8a1f;--line-strong:#3e5f8a33;--text:#17314f;--text-soft:#5f7591;--accent:#ff7a59;--accent-strong:#ff5f59;--accent-blue:#61bfff;--accent-indigo:#8e99ff;--accent-mint:#7cd8c5;--success:#1e9d84;--shadow-lg:0 28px 80px #26486d24;--shadow-md:0 16px 40px #26486d1a;--shadow-sm:0 10px 24px #26486d14;--radius-xl:34px;--radius-lg:28px;--radius-md:20px;--vh:100dvh}.theory-world-page{--theory-border:#2044601f;--theory-border-strong:#2044602e;--theory-surface:#ffffffc7;--theory-surface-strong:#ffffffe6;--theory-shadow:0 22px 54px #2b4d6721;height:var(--theory-vh,100dvh);min-height:var(--theory-vh,100dvh);isolation:isolate;color:var(--text);-webkit-overflow-scrolling:touch;background:linear-gradient(90deg,#17314f0b 1px,#0000 1px) 0 0/44px 44px,linear-gradient(#17314f09 1px,#0000 1px) 0 0/44px 44px,linear-gradient(135deg,#f9fbf7 0%,#edf6fb 46%,#fff7f0 100%);padding:18px;animation:.26s page-slide;position:relative;overflow:hidden auto}.theory-world-page:before{content:"";z-index:-1;pointer-events:none;opacity:.55;background:repeating-linear-gradient(0deg,#0000 0 34px,#17314f0e 35px,#0000 36px);position:fixed;inset:0}.theory-world-header,.theory-world-content{z-index:1;width:min(1720px,100%);margin-inline:auto;position:relative}.theory-world-header{z-index:20;-webkit-backdrop-filter:blur(24px)saturate(150%);backdrop-filter:blur(24px)saturate(150%);background:#ffffffc7;border:1px solid #ffffffb8;border-radius:22px;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;padding:10px;display:flex;position:sticky;top:12px;box-shadow:0 18px 44px #2b4d671f}.theory-world-brand{align-items:center;gap:14px;min-width:0;display:flex}.theory-world-home,.theory-world-nav-link{min-height:42px;color:var(--text);background:#ffffffb8;border:1px solid #ffffffb8;border-radius:999px;flex:none;justify-content:center;align-items:center;font-weight:760;transition:transform .16s,background .16s,border-color .16s,box-shadow .16s;display:inline-flex;box-shadow:inset 0 1px #ffffffd1}.theory-world-home{gap:10px;padding:0 16px}.theory-world-home__mark{background:linear-gradient(135deg,#ff7a59,#2fb7c4);border-radius:999px;width:10px;height:10px;box-shadow:0 0 0 4px #2fb7c41f}.theory-world-nav-link{padding:0 15px}.theory-world-home:hover,.theory-world-nav-link:hover{background:#ffffffe6;border-color:#2fb7c43d;transform:translateY(-1px);box-shadow:0 12px 22px #2b4d671a}.theory-world-titleblock{gap:2px;min-width:0;display:grid}.theory-world-badge{color:#e85f46;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;font-weight:780}.theory-world-title{letter-spacing:0;font-size:1.72rem;font-weight:820;line-height:1.05}.theory-world-actions{background:#ffffff7a;border:1px solid #ffffff9e;border-radius:999px;justify-content:flex-end;align-items:center;gap:8px;min-width:0;padding:6px;display:flex}.theory-world-actions .auth-status{flex:none}.theory-world-actions .auth-status .status-pill{white-space:nowrap}.theory-world-language{flex:none}.theory-world-content{padding-bottom:28px}.theory-world-layout{grid-template-columns:minmax(248px,.72fr) minmax(0,2.35fr) minmax(248px,.72fr);grid-template-areas:"modes practice stats";align-items:start;gap:16px;min-height:0;display:grid}.theory-world-panel{border:1px solid var(--theory-border);background:linear-gradient(180deg,#ffffffdb,#f9fcffbd),var(--theory-surface);min-width:0;box-shadow:var(--theory-shadow);-webkit-backdrop-filter:blur(20px)saturate(145%);backdrop-filter:blur(20px)saturate(145%);border-radius:24px;gap:16px;padding:18px;display:grid}.theory-world-mode-panel{grid-area:modes}.theory-world-practice-panel{grid-area:practice}.theory-world-progress-panel{grid-area:stats}.theory-world-mode-panel,.theory-world-progress-panel{max-height:calc(var(--theory-vh,100dvh) - 128px);align-content:start;position:sticky;top:104px;overflow:auto}.theory-world-section-header{justify-content:space-between;align-items:flex-start;gap:14px;min-width:0;display:flex}.theory-world-section-title{letter-spacing:0;font-size:1.08rem;font-weight:820;line-height:1.2}.theory-world-section-sub{color:var(--text-soft);margin-top:4px;font-size:.9rem;font-weight:560;line-height:1.42}.theory-world-mode-list{gap:12px;min-width:0;display:grid}.theory-world-page .theory-stage-grid{grid-template-columns:minmax(0,1fr);justify-self:stretch;gap:14px;width:100%;min-height:0;display:grid}.theory-world-page .theory-stage-card,.theory-world-page .theory-answer-card,.theory-world-page .theory-summary-card{background:#ffffffb8;border:1px solid #ffffffbd;border-radius:20px;min-width:0;padding:18px;box-shadow:inset 0 1px #ffffffd1,0 12px 24px #2b4d6712}.theory-world-page .theory-prompt h2{letter-spacing:0;font-size:2.05rem;line-height:1.08}.theory-world-page .theory-note-config{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.theory-world-page .theory-key-selector{min-width:0}.theory-world-page .theory-key-selector__options{gap:8px}.theory-world-page .theory-key-chip{white-space:nowrap;min-height:38px;padding:0 12px;font-size:.84rem}.theory-world-page .theory-staff-card,.theory-world-page .theory-ear-card{background:linear-gradient(#ffffffeb,#f2f9f9c7),linear-gradient(135deg,#2fb7c414,#ff7a5914);border-color:#ffffffc7;border-radius:18px;min-height:0;padding:14px}.theory-world-page .theory-staff-svg{width:100%;max-height:248px}.theory-world-page .theory-ear-card{min-height:248px}.theory-world-page .theory-spotlight__value{letter-spacing:0;font-size:2.6rem}.theory-world-page .theory-answer-card__header{gap:14px}.theory-world-answer-actions{flex:none;justify-content:flex-end}.theory-world-page .theory-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.theory-world-page .theory-choice-grid--note{grid-template-columns:repeat(7,minmax(62px,1fr));overflow-x:auto}.theory-world-page .theory-choice-button{border-radius:16px;min-height:54px;font-size:.98rem}.theory-world-page .theory-feedback{border:1px solid #ffffffa8;border-radius:16px}.theory-world-page .theory-keyboard{border-radius:18px;min-height:216px}.theory-world-page .theory-piano-key--white{min-height:190px}.theory-world-page .theory-piano-key--black{height:124px}.theory-world-page .theory-mode-card{border-color:#ffffffc2;border-radius:18px;grid-template-columns:58px minmax(0,1fr);gap:12px;min-height:86px;padding:12px}.theory-world-page .theory-mode-card--active{background:linear-gradient(#fff8f4f5,#ffffffd1),#ffffffc7;border-color:#e85f4647;box-shadow:0 14px 26px #e85f461a}.theory-world-page .theory-mode-card__art{border-radius:14px;min-height:58px}.theory-world-page .theory-mode-card__title{font-size:.98rem;line-height:1.2}.theory-world-page .theory-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theory-world-page .theory-stat-card{background:#ffffffad;border:1px solid #ffffffb8;border-radius:16px}.theory-world-page .theory-summary-card{gap:12px}.theory-tip-item{background:#ffffff9e;border:1px solid #ffffffb3;border-radius:16px;gap:6px;padding:12px;display:grid}.theory-tip-item__title{color:var(--text);font-size:.9rem;font-weight:680;line-height:1.38}@media (min-width:1320px){.theory-world-page[data-device=desktop] .theory-stage-grid{grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr)}}.theory-world-page[data-device=tablet] .theory-world-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"modes""practice""stats"}.theory-world-page[data-device=tablet] .theory-world-mode-panel,.theory-world-page[data-device=tablet] .theory-world-progress-panel,.theory-world-page[data-device=mobile] .theory-world-mode-panel,.theory-world-page[data-device=mobile] .theory-world-progress-panel{max-height:none;position:relative;top:auto;overflow:visible}.theory-world-page[data-device=tablet] .theory-world-mode-list{grid-auto-columns:minmax(220px,30%);grid-auto-flow:column;padding-bottom:4px;overflow-x:auto}.theory-world-page[data-device=tablet] .theory-world-progress-panel{grid-template-columns:minmax(0,1fr) minmax(260px,.6fr)}.theory-world-page[data-device=tablet] .theory-world-progress-panel .theory-world-section-header,.theory-world-page[data-device=tablet] .theory-world-progress-panel .theory-tip-list{grid-column:1/-1}.theory-world-page[data-device=tablet] .theory-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.theory-world-page[data-device=tablet][data-orientation=landscape] .theory-stage-grid{grid-template-columns:minmax(0,1fr) minmax(310px,.86fr)}.theory-world-page[data-device=mobile]{padding:10px}.theory-world-page[data-device=mobile] .theory-world-header{border-radius:18px;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:12px;padding:10px;top:8px}.theory-world-page[data-device=mobile] .theory-world-brand{justify-content:space-between;gap:10px}.theory-world-page[data-device=mobile] .theory-world-home{min-height:40px;padding:0 12px;font-size:.92rem}.theory-world-page[data-device=mobile] .theory-world-title{font-size:1.22rem}.theory-world-page[data-device=mobile] .theory-world-badge{font-size:.7rem}.theory-world-page[data-device=mobile] .theory-world-actions{border-radius:16px;justify-content:flex-start;padding:6px;overflow-x:auto}.theory-world-page[data-device=mobile] .theory-world-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"practice""modes""stats";gap:12px}.theory-world-page[data-device=mobile] .theory-world-panel,.theory-world-page[data-device=mobile] .theory-stage-card,.theory-world-page[data-device=mobile] .theory-answer-card,.theory-world-page[data-device=mobile] .theory-summary-card{border-radius:18px;padding:12px}.theory-world-page[data-device=mobile] .theory-world-section-header,.theory-world-page[data-device=mobile] .theory-answer-card__header{flex-direction:column}.theory-world-page[data-device=mobile] .theory-world-section-title{font-size:1rem}.theory-world-page[data-device=mobile] .theory-world-section-sub{font-size:.84rem}.theory-world-page[data-device=mobile] .theory-world-answer-actions,.theory-world-page[data-device=mobile] .theory-world-answer-actions .pill-button{width:100%}.theory-world-page[data-device=mobile] .theory-world-answer-actions .pill-button{flex:1 1 0;min-width:0;padding:0 10px}.theory-world-page[data-device=mobile] .theory-world-mode-list{grid-auto-columns:minmax(216px,82%);grid-auto-flow:column;padding-bottom:4px;overflow-x:auto}.theory-world-page[data-device=mobile] .theory-mode-card{grid-template-columns:46px minmax(0,1fr);min-height:78px}.theory-world-page[data-device=mobile] .theory-mode-card__art{min-height:46px}.theory-world-page[data-device=mobile] .theory-prompt h2{font-size:1.48rem}.theory-world-page[data-device=mobile] .theory-note-config{grid-template-columns:minmax(0,1fr)}.theory-world-page[data-device=mobile] .theory-key-selector__options{flex-wrap:nowrap;padding-bottom:4px;overflow-x:auto}.theory-world-page[data-device=mobile] .theory-staff-card,.theory-world-page[data-device=mobile] .theory-ear-card{padding:10px}.theory-world-page[data-device=mobile] .theory-staff-svg{max-height:210px}.theory-world-page[data-device=mobile] .theory-ear-card{text-align:center;grid-template-columns:1fr;justify-items:center;min-height:0}.theory-world-page[data-device=mobile] .theory-spotlight__value{font-size:2rem}.theory-world-page[data-device=mobile] .theory-choice-grid,.theory-world-page[data-device=mobile] .theory-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theory-world-page[data-device=mobile] .theory-choice-grid--note{grid-template-columns:repeat(7,minmax(58px,1fr))}.theory-world-page[data-device=mobile] .theory-choice-button{min-height:50px;padding:0 10px}.theory-world-page[data-device=mobile] .theory-audio-note{flex-direction:column;align-items:stretch}.theory-world-page[data-device=mobile] .theory-keyboard{min-height:184px;padding:8px;overflow-x:auto}.theory-world-page[data-device=mobile] .theory-piano-key--white{min-width:42px;min-height:166px}.theory-world-page[data-device=mobile] .theory-piano-key--black{width:28px;height:108px}.theory-world-page[data-compact-height=true] .theory-world-header{position:relative;top:auto}.theory-world-page[data-compact-height=true] .theory-world-mode-panel,.theory-world-page[data-compact-height=true] .theory-world-progress-panel{max-height:none;top:0}.theory-world-page[data-compact-height=true] .theory-stage-card,.theory-world-page[data-compact-height=true] .theory-answer-card{gap:12px}.theory-world-page[data-compact-height=true] .theory-staff-svg{max-height:184px}.theory-world-page[data-compact-height=true] .theory-keyboard{min-height:168px}@media (max-width:1120px){.theory-world-page .theory-world-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"modes""practice""stats"}.theory-world-page .theory-world-mode-panel,.theory-world-page .theory-world-progress-panel{max-height:none;position:relative;top:auto;overflow:visible}.theory-world-page .theory-world-mode-list{grid-auto-columns:minmax(220px,30%);grid-auto-flow:column;padding-bottom:4px;overflow-x:auto}.theory-world-page .theory-world-progress-panel{grid-template-columns:minmax(0,1fr) minmax(260px,.6fr)}.theory-world-page .theory-world-progress-panel .theory-world-section-header,.theory-world-page .theory-world-progress-panel .theory-tip-list{grid-column:1/-1}.theory-world-page .theory-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:721px) and (max-width:1120px) and (orientation:landscape){.theory-world-page .theory-stage-grid{grid-template-columns:minmax(0,1fr) minmax(310px,.86fr)}}@media (max-width:720px),(max-height:430px){.theory-world-page{padding:10px}.theory-world-page .theory-world-header{border-radius:18px;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:12px;padding:10px;top:8px}.theory-world-page .theory-world-brand{justify-content:space-between;gap:10px}.theory-world-page .theory-world-home{min-height:40px;padding:0 12px;font-size:.92rem}.theory-world-page .theory-world-title{font-size:1.22rem}.theory-world-page .theory-world-badge{font-size:.7rem}.theory-world-page .theory-world-actions{border-radius:16px;justify-content:flex-start;padding:6px;overflow-x:auto}.theory-world-page .theory-world-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"practice""modes""stats";gap:12px}.theory-world-page .theory-world-panel,.theory-world-page .theory-stage-card,.theory-world-page .theory-answer-card,.theory-world-page .theory-summary-card{border-radius:18px;padding:12px}.theory-world-page .theory-world-section-header,.theory-world-page .theory-answer-card__header{flex-direction:column}.theory-world-page .theory-world-section-title{font-size:1rem}.theory-world-page .theory-world-section-sub{font-size:.84rem}.theory-world-page .theory-world-answer-actions,.theory-world-page .theory-world-answer-actions .pill-button{width:100%}.theory-world-page .theory-world-answer-actions .pill-button{flex:1 1 0;min-width:0;padding:0 10px}.theory-world-page .theory-world-mode-list{grid-auto-columns:minmax(216px,82%);grid-auto-flow:column;padding-bottom:4px;overflow-x:auto}.theory-world-page .theory-mode-card{grid-template-columns:46px minmax(0,1fr);min-height:78px}.theory-world-page .theory-mode-card__art{min-height:46px}.theory-world-page .theory-prompt h2{font-size:1.48rem}.theory-world-page .theory-note-config{grid-template-columns:minmax(0,1fr)}.theory-world-page .theory-key-selector__options{flex-wrap:nowrap;padding-bottom:4px;overflow-x:auto}.theory-world-page .theory-staff-card,.theory-world-page .theory-ear-card{padding:10px}.theory-world-page .theory-staff-svg{max-height:210px}.theory-world-page .theory-ear-card{text-align:center;grid-template-columns:1fr;justify-items:center;min-height:0}.theory-world-page .theory-spotlight__value{font-size:2rem}.theory-world-page .theory-choice-grid,.theory-world-page .theory-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theory-world-page .theory-choice-grid--note{grid-template-columns:repeat(7,minmax(58px,1fr))}.theory-world-page .theory-choice-button{min-height:50px;padding:0 10px}.theory-world-page .theory-audio-note{flex-direction:column;align-items:stretch}.theory-world-page .theory-keyboard{min-height:184px;padding:8px;overflow-x:auto}.theory-world-page .theory-piano-key--white{min-width:42px;min-height:166px}.theory-world-page .theory-piano-key--black{width:28px;height:108px}}@font-face{font-family:Noto Music;src:url(/fonts/NotoMusic-Regular.ttf)format("truetype");font-style:normal;font-weight:400}html,body{width:100%;max-width:100vw;height:100%;overflow:hidden}body{color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 18% 12%,#ffa59061,#0000 24%),radial-gradient(circle at 82% 15%,#79ccff5c,#0000 28%),radial-gradient(circle at 84% 86%,#6de4ca4d,#0000 22%),linear-gradient(#f7f9fd 0%,#edf3fb 100%);font-family:ui-rounded,SF Pro Rounded,SF Pro Text,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}input,textarea,select,[contenteditable=true]{-webkit-user-select:text;user-select:text}button{color:inherit;background:0 0;border:0}main{height:100%}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#607d9f38;border-radius:999px}.app-page{height:var(--vh);isolation:isolate;padding:16px;animation:.26s page-slide;position:relative;overflow:hidden}.app-page[data-viewport=tablet] .studio-top-controls{flex-direction:column;align-items:flex-start}.app-page[data-viewport=tablet] .studio-focus-shell{grid-template-rows:minmax(0,1fr) auto}.app-page[data-viewport=tablet] .studio-focus-shell>.grid-surface{min-height:0}.app-page[data-viewport=tablet] .studio-top-controls__meta,.app-page[data-viewport=tablet] .studio-top-controls__actions{width:100%}.app-page[data-viewport=tablet] .studio-top-controls__actions{justify-content:flex-end}.app-page[data-viewport=tablet] .studio-fab{min-width:0;padding:0 14px}.app-page[data-compact-height=true] .studio-focus-shell{padding:10px}.app-page[data-compact-height=true] .studio-top-controls{gap:10px}.app-page[data-compact-height=true] .studio-popover__chrome{padding:14px 16px 10px}.app-page[data-compact-height=true] .studio-popover__body{gap:12px;padding:12px 16px 16px}.app-page[data-compact-height=true] .studio-popover--top-left,.app-page[data-compact-height=true] .studio-popover--top-right{top:72px}.app-page[data-compact-height=true] .studio-popover--left{top:120px;bottom:16px}.app-page[data-compact-height=true] .studio-popover--bottom{top:72px;bottom:68px}.app-backdrop{pointer-events:none;position:absolute;inset:0;overflow:hidden}.app-backdrop__orb{filter:blur(28px);opacity:.78;border-radius:999px;position:absolute}.app-backdrop__orb--pink{background:radial-gradient(circle,#ff909657,#0000 70%);width:36vw;height:36vw;top:-4%;left:-6%}.app-backdrop__orb--blue{background:radial-gradient(circle,#67bcff52,#0000 72%);width:42vw;height:42vw;top:2%;right:-10%}.app-backdrop__orb--gold{background:radial-gradient(circle,#ffcd7633,#0000 72%);width:32vw;height:32vw;bottom:-16%;left:34%}.page-shell{z-index:1;grid-template-rows:auto minmax(0,1fr);gap:14px;height:100%;min-height:0;display:grid;position:relative}.page-shell>:not(.topbar){min-height:0}.topbar{min-height:82px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(28px)saturate(160%);backdrop-filter:blur(28px)saturate(160%);background:linear-gradient(#fffc,#f4f8fdb8);border:1px solid #ffffff94;border-radius:30px;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;display:flex}.topbar__leading{align-items:center;gap:14px;min-width:0;display:flex}.topbar__home{background:#ffffffbd;border:1px solid #ffffff94;border-radius:999px;align-items:center;gap:10px;min-height:48px;padding:0 18px;font-size:.98rem;font-weight:700;display:inline-flex;box-shadow:inset 0 1px #ffffffc7}.topbar__home-dot{background:linear-gradient(135deg,var(--accent),var(--accent-blue));border-radius:999px;width:10px;height:10px;box-shadow:0 0 0 4px #ff7a591f}.topbar__titleblock{gap:2px;min-width:0;display:grid}.topbar__badge{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;font-weight:700}.topbar__title{letter-spacing:-.03em;font-size:clamp(1.65rem,2.1vw,2.2rem);font-weight:780;line-height:1.04}.topbar__actions{background:#ffffff85;border:1px solid #ffffff80;border-radius:999px;justify-content:flex-end;align-items:center;gap:10px;min-width:0;padding:8px;display:flex}.language-switch{background:#f5f8ffdb;border:1px solid #ffffffc7;border-radius:999px;align-items:center;gap:4px;padding:4px;display:inline-flex}.language-switch__button{min-width:56px;min-height:38px;color:var(--text-soft);border-radius:999px;padding:0 14px;font-size:.88rem;font-weight:760}.language-switch__button--active{color:var(--text);background:linear-gradient(#fffffffa,#f6faffeb);box-shadow:0 10px 18px #5070941f}.surface{border-radius:var(--radius-xl);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(22px)saturate(155%);backdrop-filter:blur(22px)saturate(155%);background:linear-gradient(#ffffffd1,#f8fbffad);border:1px solid #ffffff9e;position:relative;overflow:hidden}.surface:before{content:"";pointer-events:none;background:linear-gradient(#ffffff42,#0000 32%);position:absolute;inset:0}.dashboard-grid,.studio-grid-frame{gap:14px;min-height:0;display:grid}.dashboard-grid{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)}.dashboard-column{min-height:0;display:grid}.dashboard-column--main{grid-template-rows:minmax(0,1.08fr) minmax(0,.92fr);gap:14px}.hero-card{grid-template-rows:auto auto auto 1fr auto;gap:18px;min-height:0;padding:26px;display:grid}.hero-card--highlight{background:linear-gradient(120deg,#ffffffeb,#f9fcffd1),radial-gradient(circle at 100% 0,#65bbff1f,#0000 28%),radial-gradient(circle at 0 100%,#ff9d8a24,#0000 24%)}.eyebrow{min-height:34px;color:var(--success);background:#7cd8c529;border-radius:999px;align-items:center;padding:0 14px;font-size:.86rem;font-weight:700;display:inline-flex}.display-title{letter-spacing:-.05em;max-width:12ch;font-size:clamp(2.4rem,4.5vw,4.6rem);font-weight:820;line-height:.95}.lead{max-width:34ch;color:var(--text-soft);font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.45}.hero-metrics{flex-wrap:wrap;gap:12px;display:flex}.hero-metric{background:#fff9;border:1px solid #fff9;border-radius:22px;gap:4px;min-width:132px;padding:14px 16px;display:grid;box-shadow:inset 0 1px #ffffffc7}.hero-metric strong{font-size:1.28rem;font-weight:800}.hero-metric span{color:var(--text-soft);font-size:.88rem}.hero-orbits{min-height:190px;position:relative}.hero-orbits__ring,.hero-orbits__planet,.hero-orbits__cloud{border-radius:999px;position:absolute}.hero-orbits__ring{border:12px solid #70c7ff5c;width:164px;height:164px;bottom:18px;left:8px}.hero-orbits__planet{background:linear-gradient(#ff8f73,#ffc45e);width:132px;height:132px;bottom:48px;right:18%;box-shadow:0 24px 40px #ff7e5c33}.hero-orbits__cloud{background:#ffffffc2;width:152px;height:66px;bottom:8px;left:36%;box-shadow:0 10px 28px #5c76921f}.hero-orbits__cloud:before,.hero-orbits__cloud:after{content:"";border-radius:inherit;background:inherit;position:absolute}.hero-orbits__cloud:before{width:74px;height:74px;top:-28px;left:24px}.hero-orbits__cloud:after{width:58px;height:58px;top:-18px;right:20px}.button-row,.tiny-actions{flex-wrap:wrap;gap:10px;display:flex}.pill-button,.nav-link,.icon-button,.tiny-button,.family-button{border-radius:999px;justify-content:center;align-items:center;min-height:42px;padding:0 16px;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s;display:inline-flex}.pill-button:hover,.nav-link:hover,.icon-button:hover,.tiny-button:hover,.family-button:hover{transform:translateY(-1px)}.pill-button--primary{color:#fff;background:linear-gradient(#ff8d73,#ff6d59);box-shadow:0 14px 24px #ff6f5c3d}.nav-link,.icon-button,.tiny-button,.family-button{background:#ffffffa8;border:1px solid #ffffff94;box-shadow:inset 0 1px #ffffffb3}.pill-button--secondary{color:#fff;background:linear-gradient(#79bfff,#5f8eff);box-shadow:0 14px 24px #5f8eff38}.nav-link{min-height:48px;padding:0 18px;font-weight:700}.panel{grid-template-rows:auto minmax(0,1fr);gap:14px;min-height:0;padding:22px;display:grid}.panel--stretch{height:100%}.panel__header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.panel__title{letter-spacing:-.03em;font-size:1.75rem;font-weight:760}.panel__sub{color:var(--text-soft);margin-top:4px;font-size:.98rem;line-height:1.42}.card-list,.sidebar-list,.grid-gallery{align-content:start;min-height:0;padding-right:4px;overflow:auto}.card-list{gap:12px;display:grid}.mini-card{background:#ffffff9e;border:1px solid #ffffff9e;border-radius:24px;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px;display:grid;box-shadow:inset 0 1px #ffffffc2}.mini-card__badge{background:linear-gradient(#ffe0b080,#bbe3ff75);border-radius:18px;width:52px;height:52px}.mini-card__title{font-size:1.12rem;font-weight:760}.mini-card__meta{color:var(--text-soft);margin-top:2px;font-size:.98rem;line-height:1.35}.grid-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.theme-card{background:#ffffffa3;border:1px solid #ffffffa3;border-radius:28px;align-content:start;gap:14px;padding:18px;display:grid}.theme-card__art{background:radial-gradient(circle at 24% 24%,#ffffffe0,transparent 28%),linear-gradient(135deg,var(--theme-a),var(--theme-b));border-radius:24px;min-height:160px;box-shadow:inset 0 -20px 42px #ffffff2e}.theme-card__title{letter-spacing:-.03em;font-size:1.45rem;font-weight:780}.tag-row{flex-wrap:wrap;gap:8px;display:flex}.tag,.status-pill,.tray-label{min-height:32px;color:var(--success);background:#7ad8c529;border-radius:999px;justify-content:center;align-items:center;padding:0 12px;font-size:.84rem;font-weight:700;display:inline-flex}.helper-text{color:var(--text-soft);line-height:1.45}.empty-state{text-align:center;min-height:0;color:var(--text-soft);place-items:center;padding:28px;display:grid}.theory-layout{grid-template-columns:minmax(220px,1fr) minmax(0,3fr) minmax(220px,1fr);gap:14px;min-height:0;display:grid}.theory-sidebar,.theory-stage-panel{min-height:0}.theory-stage-grid{grid-template-columns:minmax(0,1fr);justify-self:center;gap:18px;width:60%;min-height:0;display:grid}.theory-stage-card,.theory-answer-card,.theory-summary-card{background:#ffffffa3;border:1px solid #ffffffb3;border-radius:28px;align-content:start;gap:16px;padding:20px;display:grid;box-shadow:inset 0 1px #ffffffc7}.theory-prompt{gap:10px;display:grid}.theory-prompt h2{letter-spacing:-.04em;font-size:clamp(1.8rem,2.2vw,2.5rem);line-height:1.02}.theory-eyebrow{justify-self:start}.theory-staff-card,.theory-ear-card,.theory-spotlight{background:radial-gradient(circle at 100% 0,#61bfff24,#0000 30%),linear-gradient(#ffffffe0,#f4f8ffc2);border:1px solid #ffffffc2;border-radius:24px;align-content:center;gap:14px;min-height:0;padding:18px;display:grid}.theory-staff-svg{width:100%;height:auto}.theory-clef-glyph{fill:#17314f;dominant-baseline:alphabetic;text-rendering:geometricPrecision}.theory-clef-glyph--bass{letter-spacing:0}.theory-time-signature{fill:#17314f;text-anchor:middle;font-size:1.45rem;font-weight:800}.theory-rhythm-glyph{fill:#17314f;dominant-baseline:middle}.theory-answer-card__header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.theory-answer-card__title,.theory-summary-card__title,.theory-tip-list__title{font-size:1.15rem;font-weight:760}.theory-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.theory-choice-grid--note{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding-bottom:4px;overflow-x:auto}.theory-choice-button,.theory-mode-card{background:#ffffffc2;border:1px solid #ffffffb8;box-shadow:inset 0 1px #fffc}.theory-choice-button{border-radius:20px;min-height:58px;padding:0 16px;font-size:1rem;font-weight:760;transition:transform .16s,box-shadow .16s,border-color .16s,background .16s}.theory-choice-grid--note .theory-choice-button{border-radius:18px;min-width:72px;min-height:64px;padding:0 10px;font-size:1.02rem}.theory-choice-button:hover,.theory-mode-card:hover,.theory-piano-key:hover{transform:translateY(-1px)}.theory-choice-button--correct{color:var(--success);background:#7cd8c538;border-color:#1e9d8438}.theory-choice-button--wrong{color:var(--accent-strong);background:#ff7a5924;border-color:#ff7a5938}.theory-feedback{color:var(--text-soft);background:#ffffffa8;border-radius:20px;gap:4px;padding:14px 16px;display:grid}.theory-feedback strong{color:var(--text)}.theory-feedback--correct{background:#7cd8c52e}.theory-feedback--wrong{background:#ff7a5924}.theory-audio-note{justify-content:space-between;align-items:center;gap:12px;display:flex}.theory-mode-card{text-align:left;border-radius:24px;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:14px;width:100%;padding:14px;transition:transform .16s,box-shadow .16s,border-color .16s,background .16s;display:grid}.theory-mode-card--active{background:linear-gradient(#fff7f3eb,#ffffffc7);border-color:#ff7a593d;box-shadow:0 16px 28px #ff7a591a}.theory-mode-card__art{background:radial-gradient(circle at 26% 24%,#ffffffeb,transparent 28%),linear-gradient(135deg,var(--theory-a),var(--theory-b));border-radius:20px;min-height:84px}.theory-mode-card__copy{gap:6px;display:grid}.theory-mode-card__title{font-size:1.08rem;font-weight:760}.theory-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.theory-stat-card{background:#ffffffad;border:1px solid #ffffffb8;border-radius:22px;gap:6px;padding:14px;display:grid}.theory-stat-card span,.theory-summary-card__metrics span,.theory-spotlight__label{color:var(--text-soft);font-size:.86rem;font-weight:700}.theory-stat-card strong,.theory-summary-card__metrics strong{font-size:1.34rem;font-weight:820}.theory-summary-card__metrics{gap:12px;display:grid}.theory-summary-card__metrics>div{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.theory-tip-list{gap:12px;display:grid}.theory-spotlight{text-align:center;place-items:center;min-height:320px}.theory-spotlight__value{letter-spacing:-.06em;font-size:clamp(2.6rem,6vw,4.2rem);font-weight:820}.theory-ear-card{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-height:320px}.theory-ear-card__pulse{background:radial-gradient(circle,#ffffffe0 0 24%,#0000 25%),radial-gradient(circle,#ff7a5947 0 44%,#0000 45%),radial-gradient(circle,#61bfff38 0 68%,#0000 69%);border-radius:999px;width:86px;height:86px}.theory-ear-card__copy{gap:10px;display:grid}.theory-keyboard-shell{gap:12px;display:grid}.theory-keyboard{background:linear-gradient(#ffffffd1,#f0f6ffb3);border:1px solid #ffffffc7;border-radius:26px;align-items:stretch;min-height:240px;padding:12px;display:flex;position:relative}.theory-piano-key{justify-content:center;align-items:flex-end;font-weight:700;transition:transform .14s,background .14s,box-shadow .14s;display:flex;position:relative}.theory-piano-key span{line-height:1}.theory-piano-key--white{color:#17314fb8;background:linear-gradient(#fffffffa,#ebf3ffeb);border:1px solid #17314f14;border-radius:0 0 18px 18px;flex:1 1 0;min-width:0;min-height:214px;padding:0 4px 14px}.theory-piano-key--black{color:#ffffffdb;z-index:2;background:linear-gradient(#30435d,#18263c);border-radius:0 0 14px 14px;width:32px;height:138px;padding:0 3px 12px;position:absolute;top:12px;box-shadow:0 18px 24px #18263c2e}.theory-piano-key--correct{color:#fff;background:linear-gradient(#7cd8c5f0,#50c1abf0)}.theory-piano-key--selected:not(.theory-piano-key--correct){color:#fff;background:linear-gradient(#ffb494fa,#ff7a59f5)}.theory-key-selector{gap:10px;display:grid}.theory-note-config{gap:18px;display:grid}.theory-key-selector__header{gap:4px;display:grid}.theory-key-selector__title{letter-spacing:-.02em;font-size:.98rem;font-weight:760}.theory-key-selector__options{flex-wrap:wrap;gap:10px;display:flex}.theory-key-chip{min-height:42px;color:var(--text);background:#ffffffbd;border:1px solid #ffffffb8;border-radius:999px;justify-content:center;align-items:center;padding:0 14px;font-size:.88rem;font-weight:760;transition:transform .14s,background .14s,box-shadow .14s,border-color .14s,color .14s;display:inline-flex;box-shadow:inset 0 1px #fffc}.theory-key-chip:hover{transform:translateY(-1px)}.theory-key-chip--active{color:#0058bb;background:linear-gradient(#6c9fff3d,#5f8eff2e);border-color:#0058bb2e;box-shadow:0 10px 20px #5f8eff1f}.studio-shell{grid-template-rows:auto auto minmax(0,1fr) minmax(0,184px);gap:14px;height:100%;min-height:0;display:grid}.studio-shell--focus{grid-template-rows:minmax(0,1fr);gap:0}.studio-focus-shell{border-radius:34px;grid-template-rows:auto minmax(0,1fr);gap:12px;height:100%;min-height:0;padding:12px;display:grid;position:relative;overflow:hidden}.studio-focus-shell>.grid-surface{height:auto;box-shadow:none;background:0 0;border:0;padding:0}.studio-bar,.studio-toolbar,.tray-panel,.sketchpad-sidebar,.grid-surface{min-height:0;box-shadow:var(--shadow-sm);background:linear-gradient(#fffc,#f7faffb3);border:1px solid #ffffffa3;border-radius:28px;overflow:hidden}.studio-bar,.studio-toolbar,.tray-panel{gap:12px;padding:14px 16px;display:grid}.studio-bar{grid-template-columns:minmax(0,1.3fr) auto minmax(230px,.7fr);align-items:center}.studio-bar__group{min-width:0}.studio-bar__group--title{align-items:center;gap:12px;display:flex}.studio-label{color:var(--text-soft);margin-bottom:6px;font-size:.84rem;font-weight:700;display:inline-flex}.studio-meta{min-width:0}.song-title-input{letter-spacing:-.03em;width:min(100%,460px);min-height:54px;color:var(--text);background:#ffffffad;border:1px solid #ffffffad;border-radius:18px;padding:0 18px;font-size:1.3rem;font-weight:760;box-shadow:inset 0 1px #ffffffc7}.tempo-stack{background:#ffffff85;border-radius:20px;gap:6px;padding:10px 14px;display:grid}.tempo-stack label{font-weight:700}.tempo-stack input{accent-color:var(--accent)}.studio-toolbar{grid-template-columns:minmax(0,1fr) auto;align-items:center}.control-cluster{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.control-cluster--status{justify-content:flex-end}.studio-grid-frame{grid-template-columns:minmax(250px,290px) minmax(0,1fr)}.sketchpad-sidebar{grid-template-rows:auto minmax(0,1fr);gap:12px;padding:18px;display:grid}.sketchpad-sidebar__header{justify-content:space-between;align-items:center;gap:12px;display:flex}.sketchpad-sidebar__add{flex:none;min-height:40px;padding:0 14px}.sidebar-list{gap:12px;display:grid}.sketchpad-tab{cursor:pointer;background:#ffffff94;border:1px solid #0000;border-radius:22px;gap:10px;padding:14px;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;display:grid}.sketchpad-tab--compact{gap:8px;padding:16px 18px}.sketchpad-tab:hover{transform:translateY(-1px)}.sketchpad-tab:focus-visible{outline-offset:3px;outline:3px solid #61bfff57}.sketchpad-tab--active{background:linear-gradient(#fff7f4f0,#ffffffbd);border-color:#ff7a5952;box-shadow:0 12px 24px #ff7a591a}.sketchpad-tab__title{font-size:1.12rem;font-weight:760}.sketchpad-tab__header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.sketchpad-tab__instrument{align-items:center;gap:8px;display:inline-flex}.sketchpad-tab__meta{color:var(--text-soft);font-size:.92rem}.sketchpad-tab__mix{background:#ffffff94;border:1px solid #ffffffad;border-radius:18px;gap:8px;padding:12px 14px;display:grid}.sketchpad-tab__mix-label{color:var(--text-soft);font-size:.86rem;font-weight:700}.sketchpad-tab__mix input[type=range]{width:100%;accent-color:var(--accent)}.tiny-button{min-height:38px;padding:0 14px;font-size:.92rem;font-weight:700}.tiny-button--active{color:var(--accent);background:#ff7a592e;border-color:#ff7a591f}.grid-surface{height:100%;min-height:0;padding:0;position:relative}.grid-stage{background:linear-gradient(#ffffffd6,#f5f9ffd1),linear-gradient(90deg,#ffd0a42e,#94dcff1f);border:1px solid #ffffffb3;border-radius:24px;height:100%;min-height:0;position:relative;overflow:hidden}.grid-stage:before{content:"";pointer-events:none;background:linear-gradient(90deg,#fff6,#0000 16% 84%,#ffffff42),linear-gradient(#ffffff4d,#0000 22%);position:absolute;inset:0}.grid-stage svg{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.studio-top-controls{justify-content:space-between;align-items:center;gap:14px;min-width:0;padding:2px 2px 0;display:flex}.studio-top-controls__meta,.studio-top-controls__actions{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.studio-top-controls__meta{flex:auto}.studio-top-controls__meta .status-pill{-webkit-backdrop-filter:blur(20px)saturate(140%);backdrop-filter:blur(20px)saturate(140%)}.studio-top-controls__actions{justify-content:flex-end}.studio-fab{-webkit-backdrop-filter:blur(24px)saturate(150%);backdrop-filter:blur(24px)saturate(150%);min-width:64px;min-height:44px;color:var(--text);background:#ffffffbd;border:1px solid #ffffffb8;border-radius:999px;padding:0 16px;font-size:.94rem;font-weight:760;box-shadow:0 18px 30px #4564851f}.studio-fab--active{color:var(--accent);background:#ffffffeb;border-color:#ff7a593d}.studio-fab--primary{color:#fff;background:linear-gradient(135deg,#ff8c72fa,#ff7a59eb);border-color:#fff6}.studio-popover{z-index:6;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(26px)saturate(160%);backdrop-filter:blur(26px)saturate(160%);background:linear-gradient(#ffffffe6,#f5f9ffdb);border:1px solid #ffffffc7;border-radius:28px;grid-template-rows:auto minmax(0,1fr);display:grid;position:absolute;overflow:hidden}.studio-popover--top-left{width:min(360px,100% - 144px);top:88px;left:24px}.studio-popover--top-right{width:min(360px,100% - 48px);top:88px;right:24px}.studio-popover--left{width:min(440px,100% - 48px);min-height:0;padding:0;top:144px;bottom:24px;left:24px;overflow:hidden}.studio-popover--bottom{height:auto;min-height:0;padding:0;inset:88px 24px 92px;overflow:hidden}.studio-popover--piano{height:auto;min-height:0;padding:0;inset:12px 24px;overflow:hidden}.studio-popover__stack{gap:8px;display:grid}.studio-popover__chrome{background:#ffffff6b;border-bottom:1px solid #3e5f8a14;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px 12px;display:flex}.studio-popover__grab{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;align-items:center;gap:12px;min-width:0;display:inline-flex}.studio-popover__grab:active{cursor:grabbing}.studio-popover__grab-pill{background:linear-gradient(90deg,#ff7a59b8,#61bfffb8);border-radius:999px;width:38px;height:6px}.studio-popover__close{background:#ffffffc7;border:1px solid #ffffffb8;border-radius:999px;min-width:36px;min-height:36px;font-size:1.2rem;line-height:1;box-shadow:inset 0 1px #fffc}.studio-popover__body{overscroll-behavior:contain;gap:14px;min-height:0;padding:14px 18px 18px;display:grid;overflow-y:auto}.studio-popover__label{color:var(--text-soft);font-size:.9rem;font-weight:700}.output-card{background:#ffffff94;border:1px solid #ffffffb8;border-radius:22px;gap:12px;padding:14px;display:grid;box-shadow:inset 0 1px #fffc}.output-card__row{justify-content:space-between;align-items:center;gap:12px;display:flex}.output-card__value{color:var(--accent);font-size:1.2rem;font-weight:780}.studio-popover input[type=range]{width:100%;accent-color:var(--accent)}.studio-popover .sketchpad-sidebar,.studio-popover .tray-panel{height:100%;box-shadow:none;background:0 0;border:0;border-radius:28px}.studio-popover .sketchpad-sidebar{padding:0}.studio-popover .tray-panel{overscroll-behavior:contain;padding:0;overflow-y:auto}.studio-popover--piano .studio-popover__body{padding:8px 10px 10px;overflow:hidden}.studio-popover--piano .studio-popover__chrome{padding:10px 14px 8px}.tray-panel{align-items:stretch;height:100%;display:grid}.tray-panel--all{grid-template-rows:auto auto minmax(0,1fr);gap:16px}.tray-panel__header{gap:6px;display:grid}.family-list{grid-auto-rows:min-content;gap:10px;display:grid}.family-button{text-transform:capitalize;justify-content:flex-start;min-height:44px;padding:0 16px;font-weight:700}.family-button--active{color:var(--accent);background:#ff7a5929;border-color:#ff7a592e}.preset-groups{gap:18px;min-height:0;padding-bottom:18px;padding-right:4px;display:grid;overflow:visible}.preset-group{gap:12px;display:grid}.preset-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.preset-strip{gap:12px;min-width:0;padding-bottom:4px;display:flex;overflow-x:auto}.preset-card{background:#ffffff94;border:1px solid #0000;border-radius:22px;align-content:start;gap:12px;min-width:220px;min-height:164px;padding:18px;display:grid}.preset-card--active{background:linear-gradient(#f4fafff2,#ffffffbd);border-color:#61bfff42;box-shadow:0 12px 24px #61bfff1f}.preset-card__swatch{background:var(--swatch);border-radius:18px;width:54px;height:54px;box-shadow:inset 0 1px #fff6}.preset-card__swatch--small{border-radius:10px;width:24px;height:24px}.preset-card__title{font-size:1.08rem;font-weight:760;line-height:1.2}.preset-card__meta{color:var(--text-soft);font-size:.96rem;line-height:1.3}.studio-empty{place-items:center;height:100%;display:grid}@keyframes page-slide{0%{opacity:0;transform:translateY(16px)scale(.99)}to{opacity:1;transform:translateY(0)scale(1)}}.auth-status{align-items:center;gap:8px;display:inline-flex}.auth-shell{place-items:center;min-height:100%;display:grid}.auth-card{width:min(640px,100%);padding:28px}.auth-form{gap:14px;margin-top:20px;display:grid}.auth-form__field{color:var(--text-soft);gap:8px;font-weight:600;display:grid}.auth-form__field input,.auth-form__field select,.auth-form__field textarea,.dashboard-cloud__form-card input{border:1px solid var(--line-strong);width:100%;min-height:48px;color:var(--text);background:#ffffffd6;border-radius:16px;padding:12px 14px}.auth-form__field textarea{resize:vertical;min-height:120px}.auth-form__submit{justify-content:center}.segmented-control{background:#f6f9ffeb;border-radius:999px;gap:6px;width:fit-content;padding:6px;display:inline-flex}.segmented-control__button{min-height:42px;color:var(--text-soft);border-radius:999px;padding:0 18px;font-weight:700}.segmented-control__button--active{color:var(--text);box-shadow:var(--shadow-sm);background:linear-gradient(#fff,#f4f8ffeb)}.dashboard-cloud{gap:14px;min-height:0;padding-right:2px;display:grid;overflow:auto}.dashboard-grid--cloud{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.dashboard-cloud__forms{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.dashboard-cloud__form-card{background:#f8faffd9;border:1px solid #ffffffb8;border-radius:20px;gap:10px;padding:18px;display:grid}.mini-card--static{cursor:default}.mini-card--stack{grid-template-columns:1fr;align-items:stretch}.button-row--compact{flex-wrap:wrap;justify-content:flex-start}.helper-text--danger{color:#b44a4a}.sound-controls-card{background:#f4f8ffeb;border:1px solid #ffffffc7;border-radius:22px;gap:10px;margin-bottom:18px;padding:18px;display:grid}.virtual-piano{touch-action:none;background:0 0;border:0;gap:10px;height:100%;min-height:0;padding:0;display:grid}.virtual-piano__stack{grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0;display:grid}.virtual-piano__row{background:#f4f8ffe6;border:1px solid #ffffffc7;border-radius:22px;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;padding:8px 10px 10px;display:grid}.virtual-piano__row-header,.virtual-piano__octave{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.virtual-piano__row-header{justify-content:space-between}.virtual-piano__keyboard{touch-action:none;background:linear-gradient(#fffc,#eff5fdf0);border:1px solid #ffffffd1;border-radius:24px;height:100%;min-height:0;padding:4px 4px 6px;position:relative;box-shadow:inset 0 1px #ffffffe0}.virtual-piano__white-bed{height:100%;min-height:0;position:relative}.virtual-piano__key{touch-action:none;justify-content:center;align-items:flex-end;transition:transform .14s,box-shadow .14s,background .14s;display:inline-flex;position:absolute}.virtual-piano__key:hover{transform:translateY(-1px)}.virtual-piano__key--white{background:linear-gradient(#fffffffa,#f2f7fdf5);border:1px solid #dce5f1eb;border-radius:16px;padding:0 4px 10px;top:0;bottom:0;box-shadow:0 10px 20px #50709414}.virtual-piano__key--black{z-index:2;background:linear-gradient(#243043fa,#111827eb);border-radius:0 0 12px 12px;min-height:58%;padding:0 4px 10px;top:0;box-shadow:0 12px 18px #0f172a2e}.virtual-piano__key--active.virtual-piano__key--white{background:linear-gradient(#aae3fffa,#72c8effa)}.virtual-piano__key--active.virtual-piano__key--black{background:linear-gradient(#589cfffa,#3a7adbf0)}.virtual-piano__note{color:#17314fc7;font-size:.74rem;font-weight:700;line-height:1}.virtual-piano__note--dual{text-align:center;gap:3px;line-height:1.02;display:grid}.virtual-piano__key--black .virtual-piano__note{color:#ffffffe0;font-size:.7rem}@media (max-width:1180px){.dashboard-grid,.dashboard-grid--cloud,.theory-layout,.theory-stage-grid,.grid-gallery,.studio-grid-frame,.tray-panel,.studio-bar,.studio-toolbar{grid-template-columns:1fr}.dashboard-column--main{grid-template-rows:minmax(0,1fr) minmax(0,.78fr)}.studio-shell{grid-template-rows:auto auto minmax(0,1fr) minmax(0,196px)}.studio-shell--focus{grid-template-rows:minmax(0,1fr)}.control-cluster--status{justify-content:flex-start}.studio-popover--bottom{height:auto;top:96px;bottom:86px;left:24px}.studio-popover--piano{height:auto;top:12px;bottom:12px;left:18px}.theory-stage-grid{width:100%}}@media (max-width:780px){.app-page{padding:10px}.topbar{flex-direction:column;align-items:flex-start;min-height:auto;padding:14px}.topbar__actions{justify-content:flex-start;width:100%;overflow:auto}.display-title{font-size:clamp(2rem,7vw,2.9rem)}.hero-card,.panel,.theory-stage-card,.theory-answer-card,.theory-summary-card,.grid-surface,.sketchpad-sidebar,.auth-card{padding:16px}.theory-choice-grid,.theory-stat-grid{grid-template-columns:1fr}.theory-ear-card{text-align:center;grid-template-columns:1fr;justify-items:center}.theory-keyboard{min-height:208px;padding:8px;overflow-x:auto}.theory-stage-grid{width:100%}.theory-piano-key--white{min-width:46px}.theory-piano-key--black{width:28px}.dashboard-cloud__forms{grid-template-columns:1fr}.song-title-input{width:100%}.studio-focus-shell{padding:10px}.studio-top-controls{flex-direction:column;align-items:flex-start;padding:0}.studio-popover--top-left,.studio-popover--top-right,.studio-popover--left,.studio-popover--bottom,.studio-popover--piano{width:auto;left:12px;right:12px}.studio-popover--top-left,.studio-popover--top-right{top:124px}.studio-popover--left{top:124px;bottom:92px}.studio-popover--bottom{height:auto;top:124px;bottom:72px}.studio-popover--piano{height:auto;top:10px;bottom:10px}.virtual-piano__row-header{justify-content:space-between}}