@import "https://fonts.googleapis.com/css2?family=Figtree:wght@400;450;500;550;600;650;700;750;800;850;900&display=swap";@import "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@1,400&display=swap";.stage-page{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;min-height:0;display:flex;position:relative}.stage-universe-wrap{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;container-type:size}.stage-page .key-universe{flex:none;align-self:center;width:min(100cqw,100cqh);height:min(100cqw,100cqh)}@supports not (width:1cqw){.stage-page .key-universe{aspect-ratio:1;width:min(100%,40vh);height:auto}}.stage-page .listening-context{z-index:3;width:auto;min-width:260px;max-width:100%;margin-top:0;position:absolute;top:0;left:50%;transform:translate(-50%)}.stage-center{pointer-events:none;z-index:2;place-items:center;display:grid;position:absolute;inset:0}.stage-center>*{pointer-events:auto}.stage-orb{-webkit-backdrop-filter:blur(10px)saturate(1.3);backdrop-filter:blur(10px)saturate(1.3);border:1px solid var(--glass-line-bright);width:88px;height:88px;box-shadow:inset 0 1px 0 #ffffff38, inset 0 -12px 26px #00000047, 0 18px 50px #0006, 0 0 calc(var(--conf,0) * 46px) rgba(200, 235, 155, calc(var(--conf,0) * .45));color:#e9f3df;background:radial-gradient(circle at 32% 26%,#ffffff38,#0000 42%),radial-gradient(circle at 50% 55%,#bedca01a,#0a0e0a47);border-radius:50%;place-items:center;transition:border-color .25s,box-shadow .25s,background .25s;display:grid;position:absolute;top:50%;left:50%}.stage-orb:hover{border-color:#ebfad273;box-shadow:inset 0 1px #ffffff40,inset 0 -12px 26px #00000047,0 18px 50px #0006,0 0 34px #c8eb9b38}.stage-orb.is-on{color:#f4fae9;background:radial-gradient(circle at 32% 26%,#ffffff47,#0000 42%),radial-gradient(circle at 50% 55%,#d2f0aa4d,#141e104d);border-color:#ebfad299;box-shadow:inset 0 1px #ffffff4d,0 0 44px #c8eb9b59,0 18px 50px #0006}.stage-bottom{z-index:2;flex-direction:column;flex-shrink:0;align-items:center;gap:12px;width:100%;display:flex;position:relative}.stage-status{letter-spacing:.2px;color:#cfe0c2;text-align:center;align-items:center;gap:10px;min-height:20px;font-size:13px;font-weight:550;display:flex}.stage-demo-tag{letter-spacing:1.8px;text-transform:uppercase;color:var(--sage-dim);border:1px solid var(--glass-line);border-radius:999px;padding:4px 9px;font-size:8px;font-weight:700}.stage-hud{border-radius:var(--glass-radius-lg);align-items:center;gap:clamp(14px,2.4vw,30px);width:100%;max-width:860px;padding:13px 20px;display:flex}.stage-roll{border-radius:var(--glass-radius);flex-shrink:0;gap:8px;width:100%;max-width:860px;height:172px;padding:10px 12px;display:flex}.stage-roll-rows{flex-direction:column;flex-shrink:0;width:22px;display:flex}.stage-roll-note{letter-spacing:.4px;color:#cfe0c2;flex:1;justify-content:center;align-items:center;font-size:8.5px;font-weight:700;display:flex}.stage-roll-note.black{color:#7d8a75}.stage-roll-body{flex:1;min-width:0;position:relative}.stage-roll-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.stage-roll-empty{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.stage-roll-empty span{letter-spacing:.3px;color:#93a48b;font-size:11.5px;font-weight:550}@media (height<=760px){.stage-roll{height:128px}}@media (width<=700px){.stage-roll{height:120px;padding:8px 10px}.stage-roll-rows{width:16px}}.hud-item{white-space:nowrap;flex-direction:column;gap:4px;display:flex}.hud-item strong{letter-spacing:-.2px;color:#eef5e4;font-variant-numeric:tabular-nums;font-size:15px;font-weight:650}.hud-meter{flex-direction:column;flex:1;gap:6px;min-width:90px;display:flex}.hud-meter .micro-label strong{color:#e6efdb;font-size:11px}.hud-action{flex-shrink:0;margin-left:auto}.session-summary{flex-shrink:0;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;margin-top:14px;display:grid}.session-summary .tonal-map{min-height:340px}@media (width<=980px){.session-summary{grid-template-columns:minmax(0,1fr)}.stage-hud{flex-wrap:wrap;justify-content:center}.hud-action{margin-left:0}.hud-tuning{display:none}}.stage-canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.stage-canvas.is-fallback{background:radial-gradient(90% 70% at 30% 20%, #33402a8c, transparent 70%), radial-gradient(80% 60% at 75% 80%, #232d1799, transparent 70%), var(--stage-deep)}.key-universe{aspect-ratio:1;width:min(100%,560px);margin:0 auto;position:relative}.ku-rings{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.ku-ring{fill:none;stroke:#ffffff24;stroke-width:.18px}.ku-ring-faint{stroke:#ffffff12;stroke-dasharray:.4 1.6}.ku-spoke{stroke:#ffffff17;stroke-width:.14px}.ku-node{background:linear-gradient(180deg, rgba(255, 255, 255, calc(.08 + var(--p,0) * .14)), #ffffff08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255, 255, 255, calc(.15 + var(--p,0) * .3));width:40px;height:40px;box-shadow:inset 0 1px 0 #ffffff1f, 0 0 calc(var(--p,0) * 26px) rgba(190, 225, 150, calc(var(--p,0) * .55));color:rgba(235, 244, 228, calc(.78 + var(--p,0) * .22));letter-spacing:.4px;border-radius:50%;place-items:center;font-size:12px;font-weight:650;transition:border-color .25s,color .25s,box-shadow .25s;display:grid;position:absolute;transform:translate(-50%,-50%)}.ku-node.is-minor{width:33px;height:33px;color:rgba(215, 228, 205, calc(.62 + var(--p,0) * .38));font-size:10.5px;font-weight:600}.ku-node.is-winner{color:#f2f9e8;background:linear-gradient(#e6f5c838,#e6f5c80f);border-color:#e6facdd9;animation:.9s cubic-bezier(.2,.9,.25,1.2) ku-lock;box-shadow:inset 0 1px #ffffff40,0 0 34px #c8eb9b80,0 0 90px #c8eb9b38}@keyframes ku-lock{0%{box-shadow:inset 0 1px #ffffff40,0 0 #c8eb9ba6}to{box-shadow:inset 0 1px #ffffff40,0 0 34px #c8eb9b80,0 0 90px #c8eb9b38}}.key-reveal{text-align:center;flex-direction:column;align-items:center;gap:18px;animation:.9s cubic-bezier(.16,.8,.24,1) both reveal-in;display:flex}@keyframes reveal-in{0%{opacity:0;filter:blur(10px);transform:translateY(26px)scale(.97)}to{opacity:1;filter:blur();transform:none}}.key-reveal-eyebrow{color:var(--sage)}.key-reveal-name{align-items:baseline;gap:18px;line-height:.95;display:flex}.key-reveal-name em{color:#eef6e2;text-shadow:0 0 60px #c8eb9b40;font-size:clamp(84px,13vw,168px)}.key-reveal-name span{letter-spacing:.06em;color:var(--sage);font-size:clamp(20px,2.6vw,32px);font-weight:450}.key-reveal-notes{flex-wrap:wrap;justify-content:center;gap:clamp(10px,2vw,22px);display:flex}.key-reveal-notes span{letter-spacing:2.4px;text-transform:uppercase;color:var(--sage-dim);border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;border-radius:999px;padding:7px 12px;font-size:10px;font-weight:650;animation:.5s ease-out forwards note-in}@keyframes note-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.key-reveal-confidence{color:var(--sage-dim);opacity:.8}@media (prefers-reduced-motion:reduce){.key-reveal,.key-reveal-notes span,.ku-node.is-winner{opacity:1!important;filter:none!important;animation:none!important;transform:none!important}}:root{color:#f5f7f4;font-synthesis:none;--green:#b8d97e;--muted:#9ca59e;--panel:#191d1a;--line:#ffffff12;--text:#f5f7f4;--radius:16px;--stage-deep:#070908;--stage-olive:#232d17;--stage-sage:#33402a;--stage-moss:#16200f;--glass:#ffffff0b;--glass-strong:#ffffff13;--glass-bright:#ffffff1c;--glass-tint:#bedcaa0d;--glass-line:#ffffff17;--glass-line-bright:#ffffff2b;--glass-inner:inset 0 1px 0 #ffffff17;--glass-blur:18px;--glass-blur-strong:30px;--glass-radius:20px;--glass-radius-lg:28px;--glass-shadow:0 18px 50px #0000006b;--sage:#b9cba6;--sage-dim:#8fa381;--olive:#a8bf7e;--serif:"Instrument Serif", Georgia, serif;background:#070908;font-family:Figtree,sans-serif;font-weight:450}.glass-panel{background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.35);backdrop-filter:blur(var(--glass-blur)) saturate(1.35);border:1px solid var(--glass-line);border-radius:var(--glass-radius);box-shadow:var(--glass-inner), var(--glass-shadow)}.glass-pill{background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-line);box-shadow:var(--glass-inner);color:var(--text);letter-spacing:.2px;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:12px 24px;font-size:13px;font-weight:650;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;display:inline-flex}.glass-pill:hover:not(:disabled){background:var(--glass-bright);border-color:var(--glass-line-bright);box-shadow:var(--glass-inner), 0 0 24px #b9dca024;transform:translateY(-1px)}.micro-label{letter-spacing:2.2px;text-transform:uppercase;color:var(--sage-dim);font-size:9px;font-weight:650}.serif-accent{font-family:var(--serif);letter-spacing:-.01em;font-style:italic;font-weight:400}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:4px}p,h1,h2,h3{margin:0}svg{flex-shrink:0}button svg{vertical-align:middle}::selection{color:#092010;background:#b8d97e}.app-shell{gap:10px;height:100dvh;padding:10px;display:flex;position:relative;overflow:hidden}.sidebar,main,.mobile-nav{z-index:1;position:relative}.sidebar{z-index:2;flex-direction:column;flex-shrink:0;width:232px;padding:29px 16px 18px;display:flex;position:fixed;top:10px;bottom:10px;left:10px}.brand{letter-spacing:-1.5px;align-items:center;margin:0 11px 57px;font-size:31px;font-weight:850;display:flex}.brand-mark{background:var(--glass-strong);width:35px;height:35px;-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-line-bright);box-shadow:var(--glass-inner);color:var(--green);border-radius:50%;justify-content:center;align-items:center;margin-right:9px;display:flex}.brand-dot{color:var(--green)}.nav-label{color:#768178;letter-spacing:1.7px;margin:0 14px 16px;font-size:10px;font-weight:650}.nav-item{text-align:left;color:#a5afa8;background:0 0;border-radius:8px;align-items:center;gap:13px;width:100%;margin:3px 0;padding:14px;font-size:14px;font-weight:650;display:flex}.nav-item.selected{background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--glass-inner);color:#f2f8f3}.nav-item{border:1px solid #0000}.nav-item.selected svg{color:var(--green)}.nav-dot{background:var(--green);border-radius:50%;width:5px;height:5px;margin-left:auto}.nav-item:hover{color:#fff;background:#202721}.sidebar-note{margin:auto 13px 34px;padding-top:60px}.mini-record{color:#b9d8bf;background:repeating-radial-gradient(circle,#202a23 0 3px,#151c17 4px 6px);border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;margin-bottom:18px;display:flex}.sidebar-note h3{letter-spacing:-.5px;font-size:22px;font-weight:650;line-height:1.2}.sidebar-note p{color:#839087;margin-top:12px;font-size:12px;line-height:1.65}.local-note{color:#7c8b80;white-space:nowrap;border-top:1px solid var(--line);align-items:center;gap:8px;padding:15px 10px 0;font-size:10px;display:flex}.status-dot{background:#779180;border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}.status-dot.live{background:var(--green);box-shadow:0 0 12px #b8d97e66}main{background:0 0;border-radius:12px;flex-direction:column;flex:1;min-width:0;height:100%;margin-left:232px;display:flex;position:relative;overflow:hidden}.topbar{border-bottom:1px solid var(--glass-line);flex-shrink:0;justify-content:space-between;align-items:center;height:58px;padding:0 30px;display:flex}.breadcrumb{color:#8c988f;font-size:12px}.breadcrumb span{color:#4f5d53;padding:0 13px}.help-button{color:#acb8af;background:0 0;align-items:center;gap:8px;font-size:12px;display:flex}.help-button>span{text-align:center;border:1px solid #718075;border-radius:50%;width:17px;height:17px;font-size:11px;line-height:15px}.help-panel{z-index:20;width:460px;max-width:calc(100% - 48px);padding:20px 22px;position:absolute;top:66px;right:24px}.help-panel h2{letter-spacing:-.4px;font-size:18px}.help-panel p{color:#bfcec3;margin-top:11px;font-size:12px;line-height:1.75}.content{scrollbar-width:thin;scrollbar-color:#2c3830 transparent;flex-direction:column;flex:1;width:100%;max-width:1280px;min-height:0;margin:0 auto;padding:20px 30px 16px;display:flex;overflow:hidden auto}.content::-webkit-scrollbar{width:8px}.content::-webkit-scrollbar-thumb{background:#2c3830;border-radius:8px}.page-title{flex-shrink:0;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px;display:flex}.page-title.is-compact{align-items:center;margin-bottom:16px}.page-title.is-compact>div:first-child{align-items:baseline;gap:16px;min-width:0;display:flex}.page-title.is-compact h1{letter-spacing:-1.2px;margin:0;font-size:clamp(21px,2vw,28px)}.page-title.is-compact .eyebrow{letter-spacing:1.6px;white-space:nowrap;font-size:8px}.page-title.is-compact p{color:#8e9c93;border-left:1px solid var(--line);white-space:nowrap;text-overflow:ellipsis;margin:0;padding-left:16px;font-size:12px;overflow:hidden}.eyebrow{letter-spacing:1.8px;color:#a2b6a7;align-items:center;gap:8px;font-size:9px;font-weight:700;display:flex}h1{letter-spacing:-2px;margin-top:12px;font-size:clamp(34px,3.5vw,51px);font-weight:750;line-height:1.14}h1 em{color:#90dfa7;font-style:normal}.page-title p{color:#97a49b;margin-top:13px;font-size:14px}.edition{letter-spacing:2px;text-align:right;color:#a4b5a8;padding-left:18px;font-size:9px;line-height:1.8}.edition strong{color:#607164;white-space:nowrap;font-size:8px;font-weight:500}.badge{background:var(--glass);border:1px solid var(--glass-line);color:var(--sage);white-space:nowrap;border-radius:30px;padding:5px 9px;font-size:9px}.badge.warning{color:#e4c583;border-color:#e4c58333}.listening-context{color:#9fb2a6;border-radius:12px;flex-shrink:0;align-items:center;gap:10px;width:100%;margin-top:11px;padding:7px 9px;font-size:10px;display:flex}.listening-context .artwork{border-radius:4px;width:26px;height:26px}.listening-context>span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.listening-context strong{color:#dceade;font-weight:600}.listening-context>button{margin-left:auto}.meter{background:#ffffff14;border-radius:2px;height:4px;margin-top:7px;overflow:hidden}.meter>span{background:linear-gradient(90deg, var(--sage), #d8ecc0);border-radius:2px;height:100%;transition:width .2s;display:block}.primary-button{background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-line-bright);box-shadow:var(--glass-inner);color:#eef6e2;border-radius:999px;justify-content:center;align-items:center;gap:10px;min-height:44px;padding:12px 22px;font-size:13px;font-weight:700;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;display:inline-flex}.primary-button:hover{background:var(--glass-bright);box-shadow:var(--glass-inner), 0 0 26px #b9dca02e;transform:translateY(-1px)}.section-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.section-heading h2{font-size:13px;font-weight:650}.section-heading>svg{color:#7c9081}.key-result{background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.35);backdrop-filter:blur(var(--glass-blur)) saturate(1.35);border:1px solid var(--glass-line);border-radius:var(--glass-radius);box-shadow:var(--glass-inner), var(--glass-shadow);flex-direction:column;justify-content:center;padding:16px 18px;display:flex}.result-heading{justify-content:space-between;align-items:center;gap:12px;margin:11px 0 13px;display:flex}.result-heading h2{letter-spacing:-1.3px;color:#b8e7c5;font-size:30px;font-weight:650;line-height:1.1}.result-caption{color:#869c8d;text-align:right;font-size:10px;line-height:1.5}.chord-grid{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.chord-tile{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-inner);border-radius:10px;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:8px 3px;display:flex}.chord-tile>span{color:#9eafa4;font-size:9px}.chord-tile strong{letter-spacing:-.5px;white-space:nowrap;font-size:17px;font-weight:650}.chord-tile small{color:#99afa1;letter-spacing:.2px;font-size:7px}.chord-tile.tonic{background:var(--green);color:#103a1e}.chord-tile.tonic>span,.chord-tile.tonic small{color:#1b5a2f}.capo-row{justify-content:space-between;align-items:center;gap:10px;padding:12px 0 10px;display:flex}.capo-label{font-size:11px;font-weight:600}.capo-row p{color:#9aad9f;margin-top:4px;font-size:9.5px}.capo-controls{align-items:center;gap:10px;display:flex}.capo-stepper{background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;align-items:center;gap:2px;padding:2px;display:flex}.capo-step{color:#d0dfd5;background:0 0;border:0;border-radius:6px;width:28px;height:28px;font-size:16px;line-height:1}.capo-step:hover:not(:disabled){color:#fff;background:#3a4a40}.capo-step:disabled{color:#5f7266}.capo-value{text-align:center;color:#d0dfd5;min-width:64px;font-size:11px;font-weight:650}.result-foot{border-top:1px solid var(--line);align-items:center;gap:14px;padding-top:11px;display:flex}.result-foot p{color:#8da394;flex:1;font-size:9px;line-height:1.6}.text-button{color:#b9d5c1;white-space:nowrap;background:0 0;align-items:center;gap:7px;padding:5px 0;font-size:11px;display:inline-flex}.text-button:hover{color:var(--green)}.key-empty{flex-direction:column;justify-content:center;gap:9px;padding:16px 18px;display:flex}.key-empty h2{letter-spacing:-.6px;color:#cfe0d5;font-size:21px;font-weight:600}.key-empty p{color:#8e9e93;max-width:300px;font-size:10.5px;line-height:1.6}.chord-preview{gap:8px;padding:4px 0 2px;display:flex;transform:rotate(-4deg)}.chord-preview>span{background:var(--glass);width:52px;height:64px;color:var(--sage-dim);border:1px solid var(--glass-line);box-shadow:var(--glass-inner);border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:7px;font-size:8px;display:flex}.chord-preview strong{color:#a8cbb2;font-size:21px;font-weight:600}.chord-preview>span:nth-child(2){color:#34583f;background:#afd6b9;transform:translateY(-6px)}.chord-preview>span:nth-child(2) strong{color:#173c23}.dev-tools{color:#718578;flex-shrink:0;align-items:center;gap:12px;margin-top:10px;font-size:9px;display:flex}.dev-tools .text-button{font-size:10px}.tonal-map{background:var(--glass);min-height:0;-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.35);backdrop-filter:blur(var(--glass-blur)) saturate(1.35);border:1px solid var(--glass-line);border-radius:var(--glass-radius);box-shadow:var(--glass-inner), var(--glass-shadow);flex-direction:column;gap:12px;padding:16px 18px 14px;display:flex;position:relative}.map-head{flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.map-head-title{min-width:0}.map-head-title h2{letter-spacing:-.8px;color:#dff0e4;margin-top:7px;font-size:clamp(19px,1.6vw,25px);font-weight:650}.map-back{color:#8fd8a6;text-underline-offset:3px;background:0 0;margin-top:6px;padding:0;font-size:9.5px;-webkit-text-decoration:underline dotted #8fd8a680;text-decoration:underline dotted #8fd8a680}.map-back:hover{color:var(--green);-webkit-text-decoration-color:var(--green);text-decoration-color:var(--green)}.map-head-meta{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:8px;display:flex}.map-readout{text-align:right;line-height:1}.map-readout strong{letter-spacing:-1px;color:#b8e7c5;font-size:26px;font-weight:650}.map-readout strong small{color:#7d9c87;letter-spacing:0;margin-left:1px;font-size:12px}.map-readout>span{letter-spacing:.6px;color:#7f9187;text-transform:uppercase;margin-top:5px;font-size:8.5px;display:block}.map-legend{color:#8b9d92;gap:12px;font-size:9px;display:flex}.map-legend>span{align-items:center;display:flex}.legend-cell{border-radius:3px;width:10px;height:10px;margin-right:5px;display:inline-block}.legend-cell.in{background:var(--green);box-shadow:0 2px 8px #b8d97e4d}.legend-cell.out{opacity:.85;background:#ffb447}.map-body{border:1px solid var(--glass-line);background:#0407056b;border-radius:14px;flex:1;grid-template-rows:minmax(96px,1fr) 28px 22px 15px;grid-template-columns:24px minmax(0,1fr);column-gap:8px;min-height:0;padding:12px 14px 6px 8px;display:grid;overflow:hidden;box-shadow:inset 0 1px #ffffff0d,0 18px 44px #05070559}.map-rows{grid-area:1/1;grid-template-rows:repeat(12,1fr);display:grid}.map-note{letter-spacing:.3px;color:#7e8f84;justify-content:center;align-items:center;font-size:8.5px;font-weight:600;display:flex}.map-note.black{color:#5c6c62}.map-note.in-scale{color:#a9e6bd;font-weight:700}.map-canvas-wrap{grid-area:1/2;min-width:0;min-height:0;position:relative}.map-canvas{cursor:crosshair;width:100%;height:100%;display:block}.map-axis-label{letter-spacing:.7px;text-transform:uppercase;color:#5c6d62;grid-column:1;justify-content:flex-end;align-items:center;padding-right:1px;font-size:7px;font-weight:600;display:flex}.map-axis-label.fit{grid-row:2}.map-axis-label.section{grid-row:3}.map-fit{grid-area:2/2;width:100%;height:100%;display:block;overflow:visible}.map-strip{grid-area:3/2;position:relative}.map-segment{white-space:nowrap;letter-spacing:.3px;color:#0b2a15;border-radius:5px;justify-content:center;align-items:center;font-size:8.5px;font-weight:700;display:flex;position:absolute;top:2px;bottom:2px;overflow:hidden}.map-segment.strong,.map-segment.in-key{background:linear-gradient(#35e878,#17b64f)}.map-segment.weak,.map-segment.shift{color:#bcdcc6;background:#22452f;border:1px solid #3d7a52}.map-segment.shift{color:#efd7a4;background:#3a2f1c;border-color:#7a6238}.map-time{letter-spacing:.3px;color:#69806f;font-variant-numeric:tabular-nums;grid-area:4/2;justify-content:space-between;font-size:8.5px;display:flex}.map-tooltip{z-index:3;border:1px solid var(--glass-line-bright);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#cddcd2;white-space:nowrap;pointer-events:none;background:#080c09b8;border-radius:8px;align-items:center;gap:7px;padding:5px 9px;font-size:9.5px;display:flex;position:absolute;box-shadow:0 10px 26px #00000073}.map-tooltip strong{color:#e7f5eb;font-size:11px}.map-tooltip i{background:#2b3830;border-radius:2px;width:26px;height:3px;display:block;overflow:hidden}.map-tooltip i b{background:var(--green);height:100%;display:block}.map-body.is-empty{grid-template-rows:1fr;grid-template-columns:1fr;place-items:center;position:relative}.map-ghost{background-image:repeating-linear-gradient(90deg,#ffffff09 0 1px,#0000 1px 24px),repeating-linear-gradient(0deg,#ffffff07 0 1px,#0000 1px 22px);position:absolute;inset:0;-webkit-mask-image:radial-gradient(70% 70%,#000 0%,#0000 76%);mask-image:radial-gradient(70% 70%,#000 0%,#0000 76%)}.map-empty-copy{text-align:center;max-width:330px;padding:18px;position:relative}.map-empty-copy h3{letter-spacing:-.3px;color:#cfe3d6;font-size:17px;font-weight:600}.map-empty-copy p{color:#83948a;margin-top:8px;font-size:10.5px;line-height:1.7}.search-bar{background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);backdrop-filter:blur(var(--glass-blur)) saturate(1.3);border:1px solid var(--glass-line);box-shadow:var(--glass-inner);color:#a3b5a9;border-radius:40px;flex-shrink:0;align-items:center;gap:14px;height:56px;margin-bottom:20px;padding:0 20px;display:flex}.search-bar:focus-within{border-color:var(--glass-line-bright);box-shadow:var(--glass-inner), 0 0 22px #b9dca01f}.search-bar input{color:#fff;background:0 0;border:0;outline:none;flex:1;min-width:0;padding:12px 0;font-size:15px}.search-bar input::placeholder{color:#8d9e93}.icon-button{color:#a1b4a8;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.icon-button:hover{background:#ffffff15}.search-results{background:var(--glass);min-height:0;-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.35);backdrop-filter:blur(var(--glass-blur)) saturate(1.35);border:1px solid var(--glass-line);box-shadow:var(--glass-inner), var(--glass-shadow);border-radius:var(--glass-radius);flex-direction:column;flex:1;padding:20px 22px;display:flex}.subtle{color:#85998d;font-size:10px}.search-empty{flex:1;align-items:center;gap:40px;padding:30px 24px;display:flex}.search-empty h3{letter-spacing:-.8px;max-width:300px;font-size:26px;font-weight:650;line-height:1.15}.search-empty p{color:#9aada1;max-width:320px;margin:14px 0;font-size:12px;line-height:1.7}.record-stack{background:#314738;border-radius:8px;flex-shrink:0;place-items:center;width:160px;height:160px;display:grid;transform:rotate(-8deg);box-shadow:9px 9px #26342b}.vinyl{background:repeating-radial-gradient(circle,#18271d 0 3px,#24372b 4px 5px);border-radius:50%;place-items:center;width:132px;height:132px;display:grid}.vinyl:after{content:"";box-sizing:border-box;background:#afd6b9;border:16px solid #87ac92;border-radius:50%;width:38px;height:38px}.track-list{scrollbar-width:thin;scrollbar-color:#2c3830 transparent;flex:1;min-height:0;margin-top:16px;overflow-y:auto}.track-list::-webkit-scrollbar{width:8px}.track-list::-webkit-scrollbar-thumb{background:#2c3830;border-radius:8px}.track-row{text-align:left;background:0 0;border-radius:7px;align-items:center;gap:14px;width:100%;padding:10px 9px;display:flex}.track-row:hover,.track-row.chosen{background:var(--glass-strong)}.track-row.chosen strong{color:var(--green)}.track-number{color:#829589;width:20px;font-size:10px}.artwork{object-fit:cover;background:#2a3730;border-radius:5px;flex-shrink:0;width:44px;height:44px}.artwork-placeholder{color:#7f9a88;place-items:center;display:grid}.track-details{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.track-details strong{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.track-details>span{color:#97ae9f;font-size:11px}.track-album{color:#8ca394;white-space:nowrap;text-overflow:ellipsis;max-width:25%;font-size:10px;overflow:hidden}.track-row>svg{color:#8aa493}.selected-track{background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.35);backdrop-filter:blur(var(--glass-blur)) saturate(1.35);border:1px solid var(--glass-line);box-shadow:var(--glass-inner), var(--glass-shadow);border-radius:var(--glass-radius);flex-shrink:0;align-items:center;gap:18px;margin-bottom:20px;padding:20px 22px;display:flex}.selected-track>.artwork{width:76px;height:76px}.selected-track>div{flex:1;min-width:0}.selected-track h2{letter-spacing:-.6px;overflow-wrap:anywhere;margin-top:9px;font-size:23px}.selected-track p{color:#a8beb0;margin-top:7px;font-size:11px;line-height:1.5}.selected-track .catalog-message{color:#c1c9b4;font-size:10px}.selected-track .primary-button{min-height:38px;padding:10px 13px;font-size:10px}.track-link{color:#8fe6ab;align-items:center;gap:5px;margin-top:8px;font-size:10px;display:inline-flex}.notice{text-align:center;color:#a8bdb0;max-width:550px;margin:auto;padding:40px 24px}.notice h3{color:#dfece3;margin:15px 0 10px;font-size:20px}.notice p{font-size:13px;line-height:1.7}.secondary-button{background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--glass-inner);border-radius:999px;margin-top:20px;padding:12px 17px;font-size:12px}.skeleton-list{gap:12px;padding-top:22px;display:grid}.skeleton{background:linear-gradient(90deg,#253128,#334438,#253128) 0 0/200%;border-radius:8px;height:59px;animation:2s infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.mobile-nav{display:none}@media (width>=1500px){.sidebar{width:250px}main{margin-left:250px}.content{max-width:1420px}}@media (width<=1180px){.sidebar{width:196px;padding-left:8px;padding-right:8px}.brand{margin-bottom:44px;font-size:28px}main{margin-left:196px}.content{padding:16px 22px 14px}.topbar{padding:0 22px}.edition,.page-title.is-compact p{display:none}.key-result{padding:14px 15px}.result-heading h2{font-size:25px}.chord-tile strong{font-size:15px}.chord-tile small{display:none}.map-body{padding:10px 10px 5px 6px}}@media (height<=780px){.topbar{height:50px}.content{padding-top:14px}.page-title.is-compact{margin-bottom:12px}.stage-page .key-universe{width:min(100%,48vh)}.map-head-title h2{font-size:18px}.map-readout strong{font-size:21px}.chord-tile{gap:5px;padding:7px 3px}}@media (height<=900px){.key-result{padding:13px 15px}.result-heading{margin:8px 0 10px}.result-heading h2{font-size:24px}.chord-tile{gap:5px;padding:7px 3px}.chord-tile strong{font-size:15px}.capo-row{padding:9px 0 8px}.result-foot{padding-top:9px}}@media (width<=980px){.app-shell{height:auto;min-height:100dvh;overflow:visible}main{height:auto;overflow:visible}.content{overflow:visible}.help-panel{width:auto;max-width:none;margin:16px 22px 0;position:static}.stage-page{min-height:480px}.stage-page .key-universe{width:min(100%,44vh)}.tonal-map{min-height:430px}.map-body{grid-template-rows:minmax(170px,1fr) 28px 22px 15px}.track-album{display:none}}@media (width<=600px){.app-shell{flex-direction:column;gap:0;padding:0}.sidebar{display:none}main{border-radius:0;margin:0}.topbar{height:56px;padding:0 20px}.breadcrumb,.help-button{font-size:11px}.help-panel{margin:14px 18px 0;padding:18px}.help-panel h2{font-size:17px}.help-panel p{font-size:11.5px}.content{max-width:none;padding:18px 20px 22px}.page-title.is-compact{align-items:flex-start;margin-bottom:16px}.page-title.is-compact>div:first-child{flex-direction:column;align-items:flex-start;gap:7px}.page-title.is-compact h1{letter-spacing:-1.4px;font-size:29px}h1{letter-spacing:-1.8px;font-size:36px}.eyebrow{letter-spacing:1.5px;font-size:8px}.page-title p{margin-top:11px;font-size:12px}.stage-page{min-height:430px}.stage-page .key-universe{width:min(100%,40vh)}.key-reveal-name em{font-size:clamp(64px,18vw,110px)}.key-empty .chord-preview>span{width:46px;height:58px}.chord-grid{grid-template-columns:repeat(4,1fr)}.chord-tile{gap:6px;padding:10px 3px}.chord-tile small{display:block}.chord-tile strong{font-size:16px}.result-heading h2{font-size:27px}.result-caption{font-size:9px}.result-foot{flex-direction:column;align-items:flex-start;gap:8px}.capo-row{align-items:flex-start}.capo-row p{max-width:170px;line-height:1.6}.capo-controls{flex-direction:column;align-items:flex-end;gap:5px}.tonal-map{min-height:460px;padding:14px 14px 12px}.map-head-title h2{font-size:19px}.map-body{grid-template-rows:minmax(190px,1fr) 28px 22px 15px}.search-bar{height:52px}.search-bar input{font-size:13px}.search-results{padding:16px}.search-empty{flex-direction:column;align-items:flex-start;gap:24px;padding:24px 4px}.search-empty h3{font-size:24px}.record-stack{width:130px;height:130px}.vinyl{width:108px;height:108px}.selected-track{flex-wrap:wrap;gap:13px;padding:18px}.selected-track>.artwork{width:62px;height:62px}.selected-track h2{font-size:20px}.selected-track>.primary-button{margin-left:75px}.key-result{padding:17px}.key-result .section-heading{align-items:flex-start}.key-result .eyebrow{max-width:150px;line-height:1.7}.track-number,.track-album{display:none}.track-row{gap:10px;padding:10px 0}.track-details strong{font-size:12px}.dev-tools{flex-direction:column;align-items:flex-start;gap:3px}.mobile-nav{border-top:1px solid var(--glass-line);padding:9px 20px max(10px, env(safe-area-inset-bottom));z-index:10;-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);backdrop-filter:blur(var(--glass-blur)) saturate(1.3);background:#0a0d0a8c;justify-content:space-around;align-items:center;display:flex;position:sticky;bottom:0;left:0;right:0}.mobile-nav button{color:#95a49a;background:0 0;flex-direction:column;align-items:center;gap:4px;width:70px;font-size:9px;display:flex}.mobile-nav button.selected{color:var(--green)}.mobile-brand{letter-spacing:-1px;color:#bad0c1;font-size:21px;font-weight:800}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}