/* Universo armónico: bento layout and glass controls */
:root{--c-root:#f04770;--c-3:#f78c6a;--c-5:#ffd167;--c-7:#06d7a0}
html{scroll-padding-top:110px}body{background:#103440}.space-shell{display:block;max-width:1600px;padding:22px clamp(12px,3vw,38px)}.workspace{padding:28px 0 40px;background:transparent;overflow:visible}.universe-nav{position:sticky;top:12px;z-index:20;display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:14px 20px;border:1px solid #b3e1e436;border-radius:22px;background:linear-gradient(115deg,#f047701b,transparent 35%,#06d7a01b),#174d60b8;backdrop-filter:blur(24px) saturate(140%);box-shadow:inset 0 1px #ffffff25,0 12px 40px #00151f30}.universe-nav .brand{font-size:18px;white-space:nowrap}.brand-mark{width:22px;height:22px}.brand-mark:after{inset:7px -5px;border-width:1px}.universe-nav nav{display:flex;align-items:center;gap:7px;flex:1;flex-wrap:wrap}.universe-nav nav a,.universe-nav nav>span{padding:10px 12px;font-size:13px;color:#d5e7ec;text-decoration:none;border-radius:12px}.universe-nav nav a:hover{background:#ffffff16}.universe-nav nav small{font-size:8px;letter-spacing:1px;background:#ffffff12;padding:3px;border-radius:4px}.universe-nav nav>span{opacity:.6}.universe-nav .seg{flex:none}.mission-hero{min-height:220px;background:none;border:0;padding:24px 8px;display:flex;flex-direction:column;justify-content:center;padding-right:42%}.mission-hero:before,.mission-hero:after{display:none}.mission-hero h2{font-size:clamp(34px,4vw,55px)}.mission-hero h2 em{color:#c7dfe2;background:none;font-style:italic}.hero-orbit{position:absolute;right:0;top:-30px;width:40%;height:280px}.hero-orbit svg{width:100%;height:100%}.app{grid-template-columns:minmax(240px,1fr) minmax(0,.8fr) minmax(0,.7fr);grid-template-areas:"search search search" "chord instrument instrument" "theory inversions variations";align-items:stretch;gap:18px}.top,.bottom,.theory-card,.inversions-card,.variations-card,.universe-tool,.lab{background:#194957;border:1px solid #9acdd523;border-radius:22px;box-shadow:0 10px 30px #001b2420}.top{position:relative;overflow:hidden;padding:26px 22px}.top .sym,.top .fullname,.top .eyebrow{position:relative;z-index:1}.top .sym{font-size:clamp(46px,5vw,76px);padding:12px 0;overflow-wrap:anywhere}.top .tones{display:grid;gap:0;margin-top:18px}.tone{display:grid;grid-template-columns:32px 40px 1fr;border:0;border-bottom:1px solid #ffffff18;border-radius:0;padding:10px 0;background:none;gap:8px}.tone .dot{width:28px;height:28px}.tone small{font-size:12px}.top .actions{margin-top:18px}.chord-orbit{position:absolute;width:250px;height:110px;border:1px dashed #aad9de30;border-radius:50%;transform:rotate(-18deg);top:48px;right:0}.chord-orbit i{position:absolute;width:12px;height:12px;border-radius:50%;background:#ffd167;left:25px;bottom:0}.chord-orbit i:nth-child(2){left:auto;right:5px;top:18px;background:#06d7a0}.chord-orbit i:nth-child(3){left:120px;top:-5px;background:#f78c6a}.bottom{padding:24px;min-width:0}.bottom .inner{width:100%}.ihead{margin-bottom:16px}.legend{flex-wrap:wrap!important;overflow:visible!important;white-space:normal!important;font-size:10px;gap:10px}.hinge .hrow{display:flex;flex-wrap:wrap}.search{min-width:200px}.hinge .controls{display:flex;flex-wrap:wrap}.seg,.piano-octave-buttons{padding:4px;border:1px solid #b3e1e440;border-radius:999px;background:linear-gradient(120deg,#f0477015,transparent 40%,#06d7a020),#123d4dbb;box-shadow:inset 0 1px #ffffff25,0 3px 12px #00192330;backdrop-filter:blur(18px)}.seg button,.piano-octave-buttons button{border-radius:999px;color:#c9e3ea;min-height:38px;padding:9px 15px}.seg button[aria-pressed=true],.piano-octave-buttons button[aria-pressed=true]{background:linear-gradient(135deg,#fff,#d7e9eb);color:#102d38;box-shadow:0 2px 8px #001e3b40}.btn,.hbtn,.lab .lab-btn{background:linear-gradient(120deg,#ffffff12,#108ab120);border:1px solid #d0f0ee35;border-radius:14px;box-shadow:inset 0 1px #ffffff18;cursor:pointer}.actions .btn{background:linear-gradient(135deg,#ffeeb6,#ffd167);color:#16313a;border-color:#ffe8a5;box-shadow:0 0 22px #ffd16725}.inversions-card{grid-area:inversions;padding:22px;min-width:0}.variations-card{grid-area:variations;padding:22px;min-width:0}.theory-card h2,.inversions-card h2,.variations-card h2{font-size:16px;margin:0 0 18px}.inversion-choice{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:1px solid transparent;color:var(--ink);padding:12px 8px;border-radius:13px;cursor:pointer}.inversion-choice[aria-pressed=true]{background:#c4e9ea15;border-color:#c4e9ea30}.inversion-choice>span:nth-child(2){flex:1}.inversion-choice small{display:block;color:#bfd7df;font-size:11px;margin-top:5px}.variations-card .chips{display:flex;flex-wrap:wrap}.scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#88bbc4 #103642;overscroll-behavior-inline:contain}.fretboard{display:block;width:1100px!important;min-width:1100px!important;max-width:none!important}.voicings{display:flex;overflow-x:auto;max-width:100%;padding:4px 0 12px;gap:10px}.vcard{flex:0 0 112px;min-width:112px}.piano{min-width:590px;width:100%}.piano[data-octaves="1"]{min-width:0}.piano-scroll{touch-action:auto}.steps li{grid-template-columns:12px minmax(0,1fr)}.steps .res{grid-column:2;text-align:left}.universe-tool{padding:28px;margin:22px 0;scroll-margin-top:20px}.universe-tool h2{font-family:Georgia,serif;font-size:clamp(30px,4vw,46px);font-weight:400;margin:12px 0}.universe-tool p{color:#c5dce3;line-height:1.6}.universe-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}.note-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:22px 0}.planet-choice{min-height:48px;border-radius:50px;background:#103944;border:1px solid #acdfe14d;color:#e8f4f5;cursor:pointer}.planet-choice[aria-pressed=true]{background:linear-gradient(135deg,#ffe8a9,#ffd167);color:#12313b;box-shadow:0 0 18px #ffd16720}.bass-label{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}.bass-label select{padding:10px;background:#103944;color:#e8f4f5;border:1px solid #acdfe14d;border-radius:12px}.solar-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;background:radial-gradient(ellipse at center,#143f50,#0b2c3900 70%)}#solarSystem{width:100%;max-height:440px}.match-card{display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;padding:15px;margin:10px 0;border:1px solid #acdfe135;border-radius:16px;background:#103b49;color:#d6e9ec;cursor:pointer}.match-card b{font-size:25px;color:#fff}.match-card small{color:#ffd167}.mode-tags{display:flex;flex-wrap:wrap;gap:8px}.mode-tags span{font-size:12px;padding:8px 12px;border:1px solid #acdfe130;border-radius:99px}.mode-results h3{font-size:15px;margin-top:24px}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ffd167;outline-offset:3px}[hidden]{display:none!important}
@media(max-width:1000px){.universe-nav{gap:12px}.universe-nav nav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto}.universe-nav nav>*{white-space:nowrap}.universe-nav .seg{margin-left:auto}.app{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-areas:"search search" "chord instrument" "theory theory" "inversions variations"}.hero-orbit{width:45%}.bottom{padding:18px}html{scroll-padding-top:170px}}
@media(max-width:650px){.space-shell{padding:10px}.universe-nav{padding:12px;top:5px;border-radius:18px;gap:10px}.universe-nav .brand{font-size:15px;gap:8px}.universe-nav .seg button{font-size:10px;padding:7px 9px;min-height:34px}.universe-nav nav{gap:0}.universe-nav nav a,.universe-nav nav>span{padding:8px 10px;font-size:12px}.workspace{padding-top:12px}.mission-hero{min-height:185px;padding:18px 4px;padding-right:25%}.mission-hero h2{font-size:32px}.mission-hero p{font-size:12px;max-width:220px}.hero-orbit{right:-10px;top:10px;width:45%;height:170px;opacity:.7}.app{grid-template-columns:minmax(0,1fr);grid-template-areas:"search" "chord" "instrument" "theory" "inversions" "variations";gap:12px}.hinge .controls{width:100%;gap:7px}.hinge .hrow{gap:10px}.top,.bottom,.theory-card,.inversions-card,.variations-card{padding:18px;border-radius:19px}.top .sym{font-size:64px}.chord-orbit{right:20px;top:35px}.top .tones{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.tone{grid-template-columns:28px 1fr}.tone small{grid-column:2;font-size:10px}.piano[data-octaves="1"]{width:100%;min-width:0;height:180px}.piano:not([data-octaves="1"]){min-width:590px}.ihead h3{max-width:100%;font-size:16px}#playFull{max-width:100%}.universe-tool{padding:18px;border-radius:19px}.universe-layout{grid-template-columns:minmax(0,1fr);gap:10px}.solar-stage{grid-row:1}#solarSystem{max-height:280px}.note-palette{gap:6px}.planet-choice{min-height:42px}.lab .seq-row{grid-template-columns:18px minmax(60px,1fr) 54px 68px 28px;gap:4px}.lab .seq-row input,.lab .seq-row select{min-width:0;width:100%;font-size:12px}.universe-nav nav::-webkit-scrollbar{height:3px}.legend{gap:8px}.gtools{gap:12px}.gtools .toggle{font-size:12px}.piano .mark{max-width:25px}.related-nav{line-height:1.8}html{scroll-padding-top:145px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{scroll-behavior:auto!important}}