:root{color:#fff7e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#100f14;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button{font:inherit}.app-shell{background:radial-gradient(circle at 12% 10%,#e9742a42,#0000 28rem),radial-gradient(circle at 85% 18%,#f3a93329,#0000 24rem),linear-gradient(135deg,#100f14 0%,#1b1414 50%,#100f14 100%);min-height:100vh;padding:clamp(1rem,3vw,2.5rem)}.app-frame{background:#120f17d1;border:1px solid #f9c9782e;border-radius:28px;grid-template-rows:auto 1fr;width:min(1180px,100%);min-height:calc(100vh - clamp(2rem,6vw,5rem));margin:0 auto;display:grid;overflow:hidden;box-shadow:0 28px 80px #00000061}.top-bar{background:#100f14bd;border-bottom:1px solid #f9c97824;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,3vw,1.6rem);display:flex}.brand-button,.ghost-button,.language-switcher button,.text-link,.mode-card{cursor:pointer;border:0}.brand-button{color:#f9c978;letter-spacing:.08em;text-transform:uppercase;background:0 0;font-size:.95rem;font-weight:850}.top-actions{align-items:center;gap:.75rem;display:flex}.ghost-button{color:#fff7e8;background:#ffffff0a;border:1px solid #f9c9783d;border-radius:999px;padding:.65rem .9rem;font-weight:700}.language-switcher{background:#0000002e;border:1px solid #f9c9782e;border-radius:999px;gap:.25rem;padding:.25rem;display:inline-flex}.language-switcher button{color:#f5dfbd;background:0 0;border-radius:999px;min-width:2.8rem;padding:.5rem .65rem;font-weight:800}.language-switcher button.active{color:#1c1208;background:#f3a933}.home-layout,.content-panel{padding:clamp(1.4rem,5vw,4rem)}.home-layout{grid-template-columns:minmax(0,1.1fr) minmax(280px,.8fr);align-items:center;gap:clamp(2rem,6vw,4rem);display:grid}.hero-copy{min-width:0}.eyebrow{color:#f3a933;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .75rem;font-size:.86rem;font-weight:850}h1,h2,p{overflow-wrap:anywhere}h1{margin:0;font-size:clamp(3.15rem,8vw,6.8rem);line-height:.92}.subtitle{color:#f5dfbd;max-width:50rem;margin:1.5rem 0 0;font-size:clamp(1.15rem,2.5vw,1.6rem);line-height:1.45}.mode-grid{gap:1rem;display:grid}.mode-card{color:#fff7e8;text-align:left;background:#ffffff0d;border:1px solid #f9c9782e;border-radius:24px;width:100%;padding:1.35rem;transition:transform .16s,border-color .16s,background .16s}.mode-card:hover,.mode-card:focus-visible{background:#ffffff12;border-color:#f9c9786b;transform:translateY(-2px)}.mode-card span{color:#f9c978;font-size:1.35rem;font-weight:900;display:block}.mode-card small{color:#f5dfbd;margin-top:.65rem;font-size:.98rem;line-height:1.45;display:block}.primary-card{background:linear-gradient(135deg,#f3a9333d,#c6561f29)}.text-link{color:#f9c978;background:0 0;justify-self:start;padding:.4rem 0;font-weight:800}.page-title{max-width:14ch;font-size:clamp(2.4rem,5vw,4.6rem)}.body-copy{color:#f5dfbd;max-width:62rem;margin:1rem 0 2rem;font-size:1.1rem;line-height:1.65}.campaign-grid,.about-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.info-card{background:#ffffff0d;border:1px solid #f9c97826;border-radius:22px;padding:1.25rem}.info-card h2{color:#f9c978;margin:0 0 .7rem;font-size:1.2rem}.campaign-card-meta{color:#e0b46f;margin:-.25rem 0 .7rem;font-size:.86rem;font-weight:800;display:block}.info-card p{color:#f5dfbd;margin:0;line-height:1.58}.campaign-card-button{color:inherit;text-align:left;cursor:pointer;transition:transform .16s,border-color .16s,background .16s}.campaign-card-button:hover,.campaign-card-button:focus-visible{background:#f3a9331a;border-color:#f9c9786b;transform:translateY(-2px)}.status-pill{color:#f9c978;background:#f3a9331a;border:1px solid #f3a93347;border-radius:999px;margin-bottom:.95rem;padding:.35rem .65rem;font-size:.78rem;font-weight:850;display:inline-flex}.split-panel{grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);align-items:start;gap:clamp(1.5rem,4vw,3rem);display:grid}.my-music-layout{grid-template-columns:minmax(0,1fr) minmax(280px,.42fr);align-items:start;gap:clamp(1.5rem,4vw,3rem);display:grid}.campaign-game-layout{grid-template-columns:minmax(0,1fr);padding-top:clamp(1rem,3vw,2rem)}.campaign-phase-nav{flex-wrap:wrap;gap:.75rem;padding-bottom:0;display:flex}.campaign-completion-card{background:linear-gradient(135deg,#f3a9332e,#ffffff0d),#00000024;border-color:#f3a93359;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1rem;display:grid}.campaign-completion-card h2,.campaign-completion-card p{margin:0}.campaign-completion-card h2{color:#f9c978}.campaign-completion-card p{color:#f5dfbd;margin-top:.35rem}.campaign-completion-stats{grid-template-columns:repeat(3,minmax(6rem,auto));gap:.6rem;margin:0;display:grid}.campaign-completion-stats div{background:#0000002e;border:1px solid #f9c97829;border-radius:14px;padding:.75rem}.campaign-completion-stats dt{color:#f3a933;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;font-weight:900}.campaign-completion-stats dd{color:#fff7e8;margin:.25rem 0 0;font-size:1.05rem;font-weight:900}.campaign-completion-actions{flex-wrap:wrap;justify-content:flex-end;gap:.65rem;display:flex}.primary-action{color:#1c1208;cursor:pointer;background:#f3a933;border:1px solid #f9c97857;border-radius:999px;padding:.65rem .9rem;font-weight:900}.primary-action:hover,.primary-action:focus-visible{background:#f9c978}.score-review-card{gap:1rem;display:grid}.score-review-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.score-review-header .page-title{margin-bottom:.25rem}.score-result{color:#a9f1c4;margin:0;font-weight:850}.score-review-actions{flex-wrap:wrap;justify-content:flex-end;gap:.65rem;display:flex}.score-status{font-weight:750;color:#f5dfbd!important;margin:0!important}.score-paper{background:#fffaf0;border:1px solid #f9c97838;border-radius:18px;min-height:18rem;padding:1rem;overflow:auto}.score-paper svg{max-width:100%;height:auto;display:block}.campaign-back-button{margin-bottom:1rem}.campaign-progress-summary{background:#f3a9331a;border:1px solid #f9c9782e;border-radius:999px;padding:.45rem .75rem;font-weight:850;display:inline-flex;color:#f9c978!important;margin:0 0 1rem!important}.home-progress-pill{margin-top:1.1rem!important}.campaign-world-list{gap:1rem;display:grid}.campaign-world-card summary{color:#f9c978;cursor:pointer;gap:.35rem;font-weight:900;display:grid}.campaign-world-card summary small{color:#f5dfbd;font-weight:650}.campaign-phase-grid{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.65rem;margin-top:1rem;display:grid}.campaign-phase-button{color:#fff7e8;text-align:left;cursor:pointer;background:#ffffff0d;border:1px solid #f9c9782e;border-radius:16px;padding:.85rem}.campaign-phase-button span,.campaign-phase-button small{display:block}.campaign-phase-button span{color:#f9c978;font-weight:900}.campaign-phase-button small{color:#f5dfbd;margin-top:.35rem;line-height:1.35}.campaign-phase-button:hover:not(:disabled),.campaign-phase-button:focus-visible{background:#f3a9331f;border-color:#f9c97870}.campaign-phase-button:disabled{cursor:not-allowed;opacity:.55}.my-music-main{min-width:0}.stacked-cards{gap:1rem;display:grid}.accent-card{background:linear-gradient(135deg,#f3a93333,#ffffff0d)}.note-box{color:#fff7e8;background:#f3a9331a;border-left:4px solid #f3a933;border-radius:14px;max-width:52rem;margin:1.5rem 0 0;padding:1rem 1.1rem;line-height:1.55}.midi-loader-card,.song-summary-card{margin-top:1rem}.file-picker-control{color:#1c1208;cursor:pointer;background:#f3a933;border:1px solid #f9c9783d;border-radius:16px;align-items:center;gap:.85rem;max-width:100%;margin-top:1rem;padding:.75rem .9rem;font-weight:850;display:inline-flex;position:relative}.file-picker-control input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.load-state{color:#f5dfbd;gap:.4rem;margin:.95rem 0 0;font-weight:750;display:grid}.load-state-loaded{color:#bff0c3}.load-state-error,.load-state-unsupported{color:#ffc0aa}.load-state small{color:#f5dfbd;font-weight:600}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin:1rem 0;display:grid}.summary-grid div{background:#00000024;border:1px solid #f9c97824;border-radius:14px;padding:.8rem}.summary-grid dt{color:#f3a933;letter-spacing:.07em;text-transform:uppercase;font-size:.78rem;font-weight:850}.summary-grid dd{color:#fff7e8;margin:.35rem 0 0;font-weight:750}.track-select-label{color:#f3a933;gap:.45rem;font-weight:850;display:grid}.track-select-label select{color:#fff7e8;width:100%;font:inherit;background:#211820;border:1px solid #f9c97847;border-radius:14px;padding:.85rem}.selected-track-panel{background:#f3a93317;border:1px solid #f3a9333d;border-radius:16px;margin-top:1rem;padding:1rem}.selected-track-panel h3{color:#f9c978;margin:0 0 .45rem}.selected-track-panel p{color:#f5dfbd;margin:0}.degree-preview{gap:1rem;margin-top:1.1rem;display:grid}.degree-preview h4{color:#f9c978;margin:0 0 .6rem;font-size:.95rem}.degree-preview-header{background:#00000024;border:1px solid #f9c97821;border-radius:14px;justify-content:space-between;align-items:end;gap:1rem;padding:.85rem;display:flex}.degree-preview-header label{color:#f3a933;gap:.35rem;font-size:.82rem;font-weight:850;display:grid}.degree-preview-header select{color:#fff7e8;font:inherit;background:#211820;border:1px solid #f9c97847;border-radius:12px;padding:.55rem .7rem}.tempo-factor-control{align-items:center;gap:.55rem;display:flex}.tempo-factor-control input{width:7.5rem}.tempo-factor-control strong{color:#fff7e8;min-width:2.5rem}.degree-chip-row{flex-wrap:wrap;gap:.45rem;display:flex}.degree-chip{color:#1c1208;background:#f3a933;border:1px solid #f3a93347;border-radius:999px;justify-content:center;align-items:center;min-width:2.45rem;padding:.45rem .65rem;font-weight:900;display:inline-flex}.degree-chip.tonic{color:#1c1208;background:#fff7e8}.challenge-row .degree-chip{box-shadow:0 0 0 3px #f3a93324}.dictation-panel{background:#0000002e;border:1px solid #f9c97829;border-radius:18px;padding:1rem}.challenge-audio-actions{flex-wrap:wrap;gap:.55rem;margin-bottom:.85rem;display:flex}.study-toggle-row{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.55rem;display:grid}.study-toggle-row label{color:#f3a933;gap:.35rem;font-size:.82rem;font-weight:850;display:grid}.study-toggle-row button,.study-toggle-row select{color:#fff7e8;cursor:pointer;background:#ffffff0f;border:1px solid #f9c9783d;border-radius:999px;padding:.55rem .75rem;font-weight:850}.study-toggle-row select{background:#211820;border-radius:13px;width:100%}.study-toggle-row input[type=range]{width:100%}.study-toggle-row button:hover,.study-toggle-row button:focus-visible,.study-toggle-row select:focus-visible{background:#f3a93329;border-color:#f9c97885}.journey-start-button{color:#1c1208;cursor:pointer;background:#f3a933;border:1px solid #f9c97857;border-radius:14px;margin:0 0 .85rem;padding:.72rem .95rem;font-weight:900}.journey-start-button:hover:not(:disabled),.journey-start-button:focus-visible{background:#f9c978}.journey-start-button:disabled{cursor:not-allowed;opacity:.45}.challenge-audio-actions button{color:#1c1208;cursor:pointer;background:#f3a933;border:1px solid #f9c9783d;border-radius:13px;padding:.6rem .78rem;font-weight:850}.challenge-audio-actions button:last-child{color:#fff7e8;background:#ffffff0f}.challenge-audio-actions button:disabled{cursor:not-allowed;opacity:.45}.listening-window-panel{gap:.6rem;margin:0 0 .85rem;display:grid}.listening-window-panel h5{color:#f5dfbd;margin:0;font-size:.86rem;font-weight:850}.listening-control-row{grid-template-columns:auto minmax(0,1fr);align-items:stretch;gap:.55rem;display:grid}.listening-window-grid{grid-template-columns:minmax(12rem,1fr) auto minmax(12rem,1fr);align-items:stretch;gap:.55rem;display:grid}.context-control{color:#fff7e8;background:#ffffff0a;border:1px solid #f9c9782e;border-radius:14px;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;padding:.42rem;display:grid}.context-control span{text-align:center;font-weight:800}.listening-challenge-pill{color:#f9c978;letter-spacing:.03em;background:#f3a93324;border:1px solid #f9c9787a;border-radius:13px;justify-content:center;align-items:center;min-width:6rem;font-size:.82rem;font-weight:950;display:inline-flex}.context-control button,.listening-window-button{color:#fff7e8;cursor:pointer;background:#ffffff12;border:1px solid #f9c9783d;border-radius:12px;padding:.55rem .75rem;font-weight:850}.listening-window-button{color:#1c1208;background:#f3a933;min-width:12rem}.context-control button:hover:not(:disabled),.context-control button:focus-visible,.listening-window-button:hover:not(:disabled),.listening-window-button:focus-visible{background:#f3a93329;border-color:#f9c97885}.listening-window-button:hover:not(:disabled),.listening-window-button:focus-visible{color:#1c1208;background:#f9c978}.context-control button:disabled,.listening-window-button:disabled{cursor:not-allowed;opacity:.45}.audio-feedback{background:#c6561f2e;border-radius:14px;gap:.35rem;padding:.85rem;font-weight:850;display:grid;color:#ffc0aa!important;margin:0 0 .85rem!important}.audio-feedback span{color:#f5dfbd;font-weight:650}.answer-slots{flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem;display:flex}.answer-slot{color:#f5dfbdad;background:#ffffff0a;border:1px dashed #f9c97857;border-radius:13px;justify-content:center;align-items:center;min-width:2.65rem;min-height:2.45rem;font-weight:900;display:inline-flex}.answer-slot.filled{color:#1c1208;background:#f3a933;border-style:solid}.answer-slot.revealed{color:#1c1208;background:#fff7e8;border-style:solid}.degree-answer-pad{flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem;display:flex}.degree-answer-button,.degree-answer-pad button,.dictation-actions button{color:#fff7e8;cursor:pointer;background:#ffffff0f;border:1px solid #f9c9783d;border-radius:13px;padding:.6rem .78rem;font-weight:850}.degree-answer-button{min-width:2.65rem}.degree-answer-button:hover:not(:disabled),.degree-answer-pad button:hover:not(:disabled),.dictation-actions button:hover:not(:disabled),.degree-answer-button:focus-visible,.degree-answer-pad button:focus-visible,.dictation-actions button:focus-visible{background:#f3a93329;border-color:#f9c97885}.degree-answer-button:disabled,.degree-answer-pad button:disabled,.dictation-actions button:disabled{cursor:not-allowed;opacity:.45}.dictation-actions{flex-wrap:wrap;gap:.55rem;display:flex}.dictation-actions button:first-child,.dictation-actions button:last-child{color:#1c1208;background:#f3a933}.answer-feedback{background:#ffffff0f;border-radius:14px;gap:.35rem;padding:.85rem;font-weight:850;display:grid;color:#fff7e8!important;margin:.9rem 0 0!important}.answer-feedback span{color:#f5dfbd;font-weight:700}.answer-feedback.correct{background:#5dbb6329;color:#d5ffd9!important}.answer-feedback.incorrect{background:#c6561f2e;color:#ffc0aa!important}.answer-feedback.revealed{background:#f3a9331f;color:#f9c978!important}.degree-contour{background:linear-gradient(0deg,#ffffff0d 1px,#0000 1px) 0 0/100% 25%,#0000002e;border:1px solid #f9c9781f;border-radius:18px;height:9.5rem;position:relative;overflow:hidden}.degree-contour:after{color:#f5dfbd9e;content:"tempo";font-size:.75rem;font-weight:800;position:absolute;bottom:.65rem;right:.85rem}.degree-contour-note{left:var(--degree-left);bottom:var(--degree-bottom);width:var(--degree-width);color:#fff7e8;border-top:3px solid #f3a933;min-width:2rem;padding-top:.15rem;font-size:.78rem;font-weight:900;position:absolute;transform:translateY(50%)}.degree-contour-cursor{top:.35rem;bottom:.35rem;left:var(--cursor-left);z-index:2;background:#fff7e8;border-radius:999px;width:2px;position:absolute;box-shadow:0 0 0 3px #fff7e81f}.degree-contour-note.challenge{color:#fff7e8;border-color:#fff7e8}.degree-contour-note.hidden{color:#0000;text-shadow:none;border-color:#f3a93385}.degree-contour-note.context{color:#0000;text-shadow:none;border-color:#f3a933b8}.degree-contour-note.challenge.hidden{border-color:#fff7e89e}.degree-contour.panorama{background:linear-gradient(0deg,#ffffff0a 1px,#0000 1px) 0 0/100% 33.333%,#00000029;height:5.4rem}.degree-contour.panorama:after{content:""}.degree-contour.panorama .degree-contour-note{color:#0000;border-color:#f3a93394;border-top-width:2px;min-width:.35rem}.empty-preview{color:#ffc0aa!important;margin-top:1rem!important}@media (width<=780px){.app-shell{padding:0}.app-frame{border-radius:0;min-height:100vh}.top-bar{flex-direction:column;align-items:flex-start}.top-actions{justify-content:space-between;width:100%}.home-layout,.split-panel,.my-music-layout,.campaign-grid,.campaign-completion-card,.campaign-completion-stats,.about-grid,.listening-control-row,.listening-window-grid,.summary-grid{grid-template-columns:1fr}.degree-preview-header{flex-direction:column;align-items:stretch}h1{font-size:clamp(2.8rem,16vw,4.4rem)}}@media (width<=480px){.top-actions{flex-direction:column-reverse;align-items:stretch}.ghost-button,.language-switcher{align-self:stretch}.language-switcher{justify-content:center}}