:root{--bg:#090b0c;--panel:#0e1112;--line:#24292b;--text:#f1f3ef;--muted:#7d8583;--acid:#ffe23f;--root:#ff5b52;--third:#ffba3b;--fifth:#45d6a0;--sixth:#8bd5ff;--seventh:#728cff;--extension:#c17cff}*{box-sizing:border-box}html{background:var(--bg)}body{background:radial-gradient(circle at 80% -10%,#1c2419 0,transparent 30rem),var(--bg);color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}button{font:inherit;color:inherit}main{min-height:100vh}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:5;background:#090b0ddd;justify-content:space-between;align-items:center;height:76px;padding:0 clamp(20px,4vw,64px);display:flex;position:sticky;top:0}.brand{align-items:center;gap:13px;display:flex}.brandmark{background:var(--acid);color:#111;border-radius:3px;place-items:center;width:35px;height:35px;font-weight:900;display:grid;transform:skew(-5deg)}.brand strong{letter-spacing:.14em;font-size:13px;display:block}.brand small{color:var(--muted);letter-spacing:.11em;text-transform:uppercase;margin-top:2px;font-size:10px;display:block}.manual{letter-spacing:.15em;color:#aeb5b2;border-bottom:1px solid #6c746f;padding-bottom:3px;font-size:10px;text-decoration:none}.controlPanel{border-bottom:1px solid var(--line);background:linear-gradient(#101314 0,#0c0f10 100%);padding:32px clamp(20px,4vw,64px) 27px}.primaryRow{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.controlBlock{min-width:0}label,.eyebrow{letter-spacing:.19em;color:#79817f;margin-bottom:9px;font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;display:block}.segmented,.buttonCloud{flex-wrap:wrap;gap:6px;display:flex}.segmented{border:1px solid var(--line);background:#080a0b;border-radius:7px;gap:0;padding:4px}.segmented button,.buttonCloud button{border:1px solid var(--line);color:#aeb4b1;cursor:pointer;white-space:nowrap;background:#141718;border-radius:4px;min-height:36px;padding:7px 13px;transition:all .15s}.segmented button{background:0 0;border-color:#0000;min-width:45px}.segmented button:hover,.buttonCloud button:hover{color:#fff;border-color:#414847}.segmented button.active,.buttonCloud button.active{background:var(--acid);border-color:var(--acid);color:#12150d;font-weight:750;box-shadow:0 0 0 1px #c7ff3725,0 6px 24px #b5ff1815}.keyStrip .divider{background:#343a3a;width:1px;height:24px;margin:6px 5px}.keyStrip button.accidental{min-width:40px}.nowPlaying{text-align:right;min-width:170px}.nowPlaying span,.nowPlaying small{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:10px;display:block}.nowPlaying strong{letter-spacing:-.04em;font-size:31px;line-height:1.1;display:block}.scales{max-width:1200px}.controlPanel>.controlBlock{margin-top:25px}.buttonCloud button{font-size:11px}.controlGrid{grid-template-columns:1.1fr 1fr;gap:36px;margin-top:25px;display:grid}.degrees{flex-wrap:nowrap}.degrees button.degree{min-width:62px;padding:6px 13px}.degree b,.degree span{display:block}.degree b{font-size:15px}.degree span{opacity:.76;font-size:9px}.bottomControls{border-top:1px solid #202526;grid-template-columns:auto 1fr;padding-top:20px}.bottomControls>div:last-child{justify-self:end}.bottomControls>div:last-child .buttonCloud{justify-content:flex-end}.resultsHead{justify-content:space-between;align-items:flex-end;gap:25px;padding:40px clamp(20px,4vw,64px) 22px;display:flex}.resultsHead h1{letter-spacing:-.045em;margin:0;font-size:clamp(24px,3vw,42px)}.resultsHead h1 em{color:#6f7774;font-style:normal;font-weight:400}.legend{color:#89908e;text-transform:uppercase;letter-spacing:.08em;flex-wrap:wrap;justify-content:flex-end;gap:12px 17px;font-size:9px;display:flex}.legend span{align-items:center;gap:6px;display:flex}.legend i{background:var(--c);border-radius:50%;width:7px;height:7px}.legend .root{--c:var(--root)}.legend .third{--c:var(--third)}.legend .fifth{--c:var(--fifth)}.legend .sixth{--c:var(--sixth)}.legend .seventh{--c:var(--seventh)}.legend .extension{--c:var(--extension)}.atlas{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;padding:0 clamp(20px,4vw,64px) 48px;display:grid}.mapCard{border:1px solid var(--line);background:linear-gradient(145deg,#121516,#0d1011);border-radius:7px;padding:16px;box-shadow:0 12px 40px #0003}.cardTop,.cardFoot{justify-content:space-between;align-items:center;display:flex}.cardTop small{color:#777f7c;text-transform:uppercase;letter-spacing:.13em;font:700 8px ui-monospace,monospace;display:block}.cardTop strong{margin-top:3px;font-size:14px;display:block}.metrics{gap:5px;display:flex}.metrics span{color:#7f8784;text-transform:uppercase;border:1px solid #2a3030;border-radius:3px;padding:4px 6px;font:8px ui-monospace,monospace}.padGrid{grid-template-columns:repeat(8,1fr);gap:6px;margin:18px 0;display:grid}.pad{aspect-ratio:1.08;background:#1c2021;border:1px solid #2a2f30;border-radius:5px;place-items:center;display:grid;position:relative;box-shadow:inset 0 -2px 4px #050606}.pad span{color:#09100d;text-shadow:none;font:700 9px ui-monospace,monospace}.pad:not(.off){border-color:color-mix(in srgb,var(--c),#fff 12%);background:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c),transparent 72%),inset 0 1px 0 #fff5}.pad.root{--c:var(--root)}.pad.third{--c:var(--third)}.pad.fifth{--c:var(--fifth)}.pad.sixth{--c:var(--sixth)}.pad.seventh{--c:var(--seventh)}.pad.extension{--c:var(--extension)}.cardFoot{color:#69716e;text-transform:uppercase;letter-spacing:.06em;border-top:1px solid #202526;padding-top:11px;font:8px ui-monospace,monospace}.loadMore{cursor:pointer;background:#151919;border:1px solid #39403e;border-radius:4px;gap:22px;margin:-20px auto 50px;padding:12px 16px;font-size:11px;display:flex}.loadMore span{color:#757d7a}.empty{text-align:center;color:#747c79;border:1px dashed #2d3332;grid-column:1/-1;padding:80px}footer{border-top:1px solid var(--line);color:#5f6764;text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;gap:30px;padding:22px clamp(20px,4vw,64px) 34px;font:9px/1.5 ui-monospace,monospace;display:flex}@media (max-width:800px){.topbar{height:64px}.manual{display:none}.controlPanel{padding-top:22px}.primaryRow{display:block}.nowPlaying{text-align:left;margin-top:22px}.controlGrid{grid-template-columns:1fr;gap:24px}.bottomControls>div:last-child{justify-self:stretch}.bottomControls>div:last-child .buttonCloud{justify-content:flex-start}.degrees{flex-wrap:nowrap;padding-bottom:5px;overflow-x:auto}.resultsHead{display:block}.legend{justify-content:flex-start;margin-top:18px}.atlas{grid-template-columns:1fr}.scales{max-height:130px;overflow:auto}.segmented{grid-template-columns:repeat(11,1fr);width:100%;display:grid}.segmented button{min-width:0;padding-inline-start:4px;padding-inline-end:4px}.keyStrip .divider{width:auto}.resultsHead h1 em{margin-top:4px;display:block}.bottomControls{grid-template-columns:1fr}.buttonCloud button{min-height:42px}.padGrid{gap:7px}.pad{border-radius:6px}footer{display:block}footer p+p{margin-top:12px}}@media (max-width:420px){.controlPanel,.resultsHead,.atlas,footer{padding-left:14px;padding-right:14px}.segmented button{font-size:12px}.keyStrip button.accidental{min-width:0}.atlas{padding-bottom:36px}.mapCard{padding:13px}.padGrid{gap:5px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.identifier{border-bottom:1px solid var(--line);background:linear-gradient(115deg,#0b0e0f,#111710);grid-template-columns:minmax(230px,.72fr) minmax(430px,1.4fr);align-items:center;gap:clamp(30px,6vw,90px);padding:42px clamp(20px,4vw,64px);display:grid}.identifierCopy h2{letter-spacing:-.06em;margin:0 0 8px;font-size:clamp(34px,5vw,64px);line-height:.95}.identifierCopy p{color:#7d8583;max-width:430px;margin:0;font-size:12px;line-height:1.6}.alternatives{gap:6px;min-height:28px;margin-top:13px;display:flex}.alternatives span{color:#909895;text-transform:uppercase;border:1px solid #303635;border-radius:3px;padding:5px 8px;font:9px ui-monospace,monospace}.clearShape{color:#aeb5b2;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;background:0 0;border:1px solid #3a4140;border-radius:3px;margin-top:20px;padding:8px 10px;font:9px ui-monospace,monospace}.playSurface{background:#090c0b;border:1px solid #303733;border-radius:8px;justify-self:end;width:100%;max-width:760px;padding:18px 20px 15px;box-shadow:0 24px 60px #0006}.playSurfaceTop,.surfaceHint{color:#747c79;text-transform:uppercase;letter-spacing:.13em;justify-content:space-between;font:8px ui-monospace,monospace;display:flex}.interactiveGrid{gap:8px;margin:14px 0}.interactivePad{-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:manipulation;padding:0}.interactivePad.off{background:#1c2021}.interactivePad.off.inScale{border-color:#39423a}.interactivePad.off.outScale{opacity:.38}.interactivePad.off span{color:#737b78}.interactivePad.selected{--c:var(--acid)}.interactivePad:focus-visible{outline:2px solid var(--acid);outline-offset:2px}.surfaceHint span:last-child{color:#b7beb9}.interactivePad.scaleRoot{--c:#69716f}.interactivePad.scaleRoot span{color:#111514}.pad.off.guideRoot{background:#69716f;border-color:#838c89;box-shadow:0 0 10px #9aa29e20,inset 0 1px #ffffff35}.pad.off.guideScale{background:#333938;border-color:#48504e;box-shadow:inset 0 1px #ffffff15}.identifierShell{border-bottom:1px solid var(--line);background:#0b0e0f}.identifierToggle{color:#838b88;cursor:pointer;letter-spacing:.16em;background:#0d1010;border:0;justify-content:space-between;align-items:center;width:100%;padding:15px clamp(20px,4vw,64px);font:700 9px ui-monospace,monospace;display:flex}.identifierToggle:hover{color:#d7dcd8;background:#101412}.identifierToggle span,.identifierToggle strong{align-items:center;gap:9px;display:flex}.identifierToggle strong{font-weight:600}.identifierToggle b{width:22px;height:22px;color:var(--acid);border:1px solid #363d3a;border-radius:50%;place-items:center;font-size:15px;display:grid}.identifierPulse{background:var(--acid);border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #c7ff3788}.identifierShell .identifier,.identifierShell.closed .identifierToggle{border-bottom:0}@media (max-width:800px){.identifier{grid-template-columns:1fr;gap:24px;padding:34px 20px}.playSurface{justify-self:stretch}.identifierCopy h2{font-size:44px}.interactiveGrid{gap:6px}}@media (max-width:420px){.identifier{padding-left:14px;padding-right:14px}.playSurface{padding:13px 12px}.interactiveGrid{gap:4px}.identifierCopy h2{font-size:38px}}.resultsTools{align-items:center;gap:20px;display:flex}.collapseButton{color:#abb2af;cursor:pointer;text-transform:uppercase;letter-spacing:.08em;background:#121616;border:1px solid #343a39;border-radius:4px;align-items:center;gap:10px;padding:8px 10px;font:700 9px ui-monospace,monospace;display:flex}.collapseButton b{color:var(--acid);font-size:14px}.mapCard{transition:border-color .18s,transform .18s}.mapCard.anchorCard{border-color:#8daf2f;box-shadow:0 0 0 1px #c7ff3722,0 18px 50px #0005}.startVoicing{color:#8e9693;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;background:#161a1a;border:1px solid #313837;border-radius:4px;width:100%;margin-top:12px;padding:9px;font:700 8px ui-monospace,monospace}.startVoicing:hover,.anchorCard .startVoicing{color:var(--acid);background:#151a10;border-color:#829d39}.progressionLab{border-top:1px solid var(--line);background:radial-gradient(circle at 86% 14%,#202817 0,#0000 25rem),linear-gradient(145deg,#101414,#090b0c);margin-top:8px;padding:52px clamp(20px,4vw,64px) 64px}.progressionHead{justify-content:space-between;align-items:flex-start;gap:30px;max-width:1280px;display:flex}.progressionHead h2{letter-spacing:-.045em;margin:0;font-size:clamp(26px,3.6vw,48px);line-height:1}.progressionHead p{color:#7e8783;max-width:650px;margin:14px 0 0;font-size:12px;line-height:1.6}.loopBadge{color:#9da590;letter-spacing:.14em;background:#141912;border:1px solid #394034;border-radius:99px;align-items:center;gap:12px;padding:8px 10px 8px 14px;font:700 8px ui-monospace,monospace;display:flex}.loopBadge strong{background:var(--acid);color:#111;border-radius:50%;place-items:center;width:27px;height:27px;font-size:17px;display:grid}.progressionBuilder{background:#0a0d0d99;border:1px solid #292f2d;border-radius:8px;grid-template-columns:minmax(420px,.8fr) minmax(440px,1.2fr);gap:30px;margin-top:38px;padding:24px;display:grid}.degreePalette .degrees{overflow:visible}.degreePalette .degrees button{min-width:59px;position:relative}.degreePalette .degrees button b,.degreePalette .degrees button span{display:block}.degreePalette .degrees button b{font-size:14px}.degreePalette .degrees button span{color:#747c79;font-size:8px}.degreePalette .degrees button i{color:var(--acid);font-style:normal;position:absolute;top:3px;right:5px}.sequenceLabel{justify-content:space-between;display:flex}.sequenceLabel button{color:#6f7774;cursor:pointer;text-transform:uppercase;background:0 0;border:0;font:8px ui-monospace,monospace}.sequence{gap:7px;min-height:60px;padding-bottom:4px;display:flex;overflow-x:auto}.sequenceStep{cursor:grab;-webkit-user-select:none;user-select:none;background:#151919;border:1px solid #323837;border-radius:5px;grid-template-rows:auto auto;grid-template-columns:auto auto;column-gap:8px;min-width:105px;padding:10px 28px 9px 10px;display:grid;position:relative}.sequenceStep.current{background:#171d10;border-color:#819d34}.sequenceStep>span{color:#59605e;grid-row:1/3;align-self:center;font:8px ui-monospace,monospace}.sequenceStep>b{font-size:14px}.sequenceStep>strong{color:#89918e;font-size:9px}.sequenceStep>button{color:#68706d;cursor:pointer;background:0 0;border:0;font-size:14px;position:absolute;top:7px;right:7px}.sequenceEmpty{color:#626a67;border:1px dashed #333a38;border-radius:5px;place-items:center;width:100%;font-size:10px;display:grid}.movementToolbar{justify-content:space-between;align-items:flex-end;gap:20px;margin-top:28px;display:flex}.movementNav{align-items:center;gap:12px;display:flex}.movementNav button{cursor:pointer;width:42px;height:42px;color:var(--acid);background:#151918;border:1px solid #3a413f;border-radius:50%;font-size:18px}.movementNav span{color:#737b78;font:9px ui-monospace,monospace}.movementNav span b{color:#e5e9e5}.movementStage{grid-template-columns:1fr 1fr;gap:58px;margin-top:20px;display:grid;position:relative}.movementCard{background:#090c0b;border:1px solid #303633;border-radius:8px;padding:18px 20px 15px;box-shadow:0 24px 60px #0005}.movementCardTop{justify-content:space-between;align-items:center;display:flex}.movementCardTop small{color:#737b78;letter-spacing:.13em;font:700 8px ui-monospace,monospace;display:block}.movementCardTop h3{letter-spacing:-.04em;margin:3px 0 0;font-size:24px}.movementCardTop>span{color:#66705f;letter-spacing:.12em;font:8px ui-monospace,monospace}.movementArrow{z-index:2;background:#11160f;border:1px solid #394036;border-radius:50%;place-items:center;width:74px;height:74px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 30px #0008}.movementArrow span{color:var(--acid);font-size:25px;line-height:1}.movementArrow small{color:#6f776d;text-transform:uppercase;font:7px ui-monospace,monospace}.progressionEmpty{color:#707875;border:1px dashed #313735;border-radius:7px;flex-direction:column;align-items:center;gap:7px;margin-top:20px;padding:70px;display:flex}.progressionEmpty strong{color:#aeb5b2}.progressionEmpty span{font-size:10px}@media (max-width:980px){.progressionBuilder{grid-template-columns:1fr}.movementStage{grid-template-columns:1fr;gap:48px}.movementArrow{top:50%;transform:translate(-50%,-50%)rotate(90deg)}.resultsTools{flex-direction:column;align-items:flex-end}.legend{justify-content:flex-end}}@media (max-width:800px){.resultsTools{align-items:flex-start;margin-top:18px}.progressionLab{padding:40px 20px 50px}.progressionHead{display:block}.loopBadge{margin-top:18px;display:inline-flex}.progressionBuilder{grid-template-columns:minmax(0,1fr);padding:17px}.movementToolbar{flex-direction:column;align-items:flex-start}.movementNav{justify-content:center;align-self:stretch}.degreePalette .degrees{flex-wrap:nowrap;overflow-x:auto}.sequence{min-height:64px}}@media (max-width:420px){.progressionLab{padding-left:14px;padding-right:14px}.progressionBuilder{padding:13px}.movementCard{padding:14px 12px}.movementStage{gap:43px}.movementArrow{width:58px;height:58px}.collapseButton{justify-content:space-between;width:100%}}.cardActions{align-items:center;gap:8px;display:flex}.soundButton,.voicingNav button{color:var(--acid);cursor:pointer;background:#151a18;border:1px solid #37403b}.soundButton{border-radius:4px;align-items:center;gap:6px;min-height:32px;padding:6px 9px;font-size:14px;display:flex}.soundButton span{color:#8d9691;letter-spacing:.1em;font:700 7px ui-monospace,monospace}.voicingNav{background:#0c0f0e;border:1px solid #343b38;border-radius:99px;align-items:center;gap:6px;padding:3px;display:flex}.voicingNav button{border-radius:50%;place-items:center;width:27px;height:27px;padding:0;font-size:21px;line-height:1;display:grid}.voicingNav span{text-align:center;color:#757e79;letter-spacing:.07em;min-width:90px;font:700 7px ui-monospace,monospace}.voicingNav span b{color:#d8ddd9}.soundButton:hover,.voicingNav button:hover{background:#19200f;border-color:#829d39}.movementCardTop{gap:15px}.movementCard:first-child{border-color:#3b4437}@media (max-width:560px){.movementCardTop{flex-direction:column;align-items:flex-start}.cardActions{justify-content:space-between;width:100%}.voicingNav,.voicingNav span{flex:1}.soundButton span{display:none}}.auditionVoicing{color:#aeb6b2;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;background:#121716;border:1px solid #343b38;border-radius:4px;justify-content:center;align-items:center;gap:8px;width:100%;margin:-7px 0 11px;padding:9px 10px;font:700 8px ui-monospace,monospace;transition:all .15s;display:flex}.auditionVoicing>span{background:var(--acid);color:#10140d;border-radius:3px;place-items:center;width:20px;height:20px;font-size:9px;display:grid}.auditionVoicing small{color:#68716d;letter-spacing:.08em;margin-left:auto;font:7px ui-monospace,monospace}.auditionVoicing:hover,.auditionVoicing:active{color:#fff;background:#171d12;border-color:#7e9a34}.auditionVoicing:active{transform:translateY(1px)}.interactivePad:active{filter:brightness(1.25);transform:scale(.94)}.topActions{align-items:center;gap:22px;display:flex}.soundToggle{color:#aeb4b1;cursor:pointer;text-transform:uppercase;letter-spacing:.09em;background:#121513;border:1px solid #3b403b;border-radius:99px;align-items:center;gap:8px;min-height:34px;padding:5px 11px 5px 6px;font:700 8px ui-monospace,monospace;display:flex}.soundToggle span{background:var(--acid);color:#111;border-radius:50%;place-items:center;width:22px;height:22px;font-size:12px;display:grid}.soundToggle.off{color:#696f6c}.soundToggle.off span{color:#888;background:#343937}.identifierActions{flex-wrap:wrap;gap:7px;margin-top:18px;display:flex}.identifierActions .clearShape{margin-top:0}.identifierActions .primary{background:var(--acid);color:#13130d;border-color:#9b8a2f}.identifierActions button:disabled{opacity:.35;cursor:not-allowed}.fingeringsShell{border-bottom:1px solid var(--line);background:#0b0e0f;scroll-margin-top:76px}.fingeringsToggle{color:#838b88;cursor:pointer;letter-spacing:.13em;text-align:left;background:#0d1010;border:0;grid-template-columns:1fr auto auto;align-items:center;gap:20px;width:100%;padding:15px clamp(20px,4vw,64px);font:700 9px ui-monospace,monospace;display:grid}.fingeringsToggle:hover{color:#d7dcd8;background:#111412}.fingeringsToggle>span{align-items:center;gap:9px;display:flex}.fingeringsToggle i{background:var(--acid);border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #ffe23f77}.fingeringsToggle>strong{color:#c6ccc8;font-weight:650}.fingeringsToggle>b{width:22px;height:22px;color:var(--acid);border:1px solid #3b403d;border-radius:50%;place-items:center;font-size:15px;display:grid}.fingeringControls{background:#101312;border-top:1px solid #202523;grid-template-columns:1.05fr 1fr;gap:30px;padding:25px clamp(20px,4vw,64px);display:grid}.fingeringsSummary{justify-content:space-between;align-items:flex-end;gap:24px;padding:34px clamp(20px,4vw,64px) 20px;display:flex}.fingeringsSummary h1{letter-spacing:-.045em;margin:0;font-size:clamp(24px,3vw,42px)}.fingeringsSummary h1 em{color:#6f7774;font-style:normal;font-weight:400}.playableCard{cursor:pointer;touch-action:manipulation}.playableCard:hover{border-color:#484f4d;transform:translateY(-2px)}.playableCard:active{border-color:#b6a43b;transform:scale(.985)}.playableCard:focus-visible{outline:2px solid var(--acid);outline-offset:2px}.sequenceLabel>div{gap:12px;display:flex}.randomButton{color:var(--acid)!important}.sequenceStep{padding-right:10px}.sequenceStep.locked{box-shadow:inset 0 0 0 1px #ffe23f44}.sequenceActions{grid-column:2;align-items:center;gap:3px;margin-top:5px;display:flex}.sequenceActions button{color:#737b78;cursor:pointer;background:#101312;border:1px solid #343a38;border-radius:3px;place-items:center;width:20px;height:18px;padding:0;font-size:12px;display:grid}.sequenceActions button:disabled{opacity:.25}.stepLock{color:var(--acid);font-size:6px;position:absolute;top:5px;right:5px}.stepColorBar{background:#0c0f0e;border:1px solid #2b302e;border-radius:7px;margin-top:18px;padding:18px 20px}.stepColorBar .buttonCloud{max-height:100px;overflow:auto}.stepColorBar .buttonCloud button{min-height:31px;padding:5px 9px;font-size:9px}.lockButton{color:#858d89;cursor:pointer;text-transform:uppercase;background:#141817;border:1px solid #3a403e;border-radius:4px;min-height:32px;padding:6px 9px;font:700 7px ui-monospace,monospace}.lockButton.active{color:var(--acid);background:#201e10;border-color:#a08d2f}.voicingNav .voicingLink{color:#757e79;letter-spacing:.07em;background:0 0;border:0;border-radius:0;width:auto;min-width:100px;padding:0 7px;font:700 7px ui-monospace,monospace}.voicingNav .voicingLink b{color:#d8ddd9}.voicingNav .voicingLink:hover{color:var(--acid);background:#171b18}.movementCard.locked{border-color:#8c7d31;box-shadow:0 0 0 1px #ffe23f18,0 24px 60px #0005}footer{background:#090b0c;align-items:center}.footerBrand{align-items:center;gap:12px;min-width:270px;display:flex}.profileCrop{border:2px solid var(--acid);background:var(--acid);border-radius:50%;width:48px;height:48px;overflow:hidden}.profileCrop img{object-fit:cover;width:132%;height:132%;transform:translate(-12%,-7%)}.footerBrand strong{color:#dce0dc;letter-spacing:.11em;font-size:10px;display:block}.footerBrand strong em{color:var(--acid);font-style:normal}.footerBrand a{color:#9ca49f;border-bottom:1px solid #555d59;margin-top:5px;text-decoration:none;display:inline-block}.footerNotes{text-align:right;max-width:650px}.footerNotes p{margin:3px 0}@media (max-width:800px){.topActions{gap:8px}.soundToggle{padding-right:8px}.fingeringsToggle{grid-template-columns:1fr auto}.fingeringsToggle>strong{display:none}.fingeringControls{grid-template-columns:1fr;gap:20px}.fingeringsSummary{display:block}.fingeringsSummary .legend{margin-top:16px}.cardActions{flex-wrap:wrap}.stepColorBar .buttonCloud{flex-wrap:nowrap;max-height:none;overflow-x:auto}footer{flex-direction:column;align-items:flex-start}.footerNotes{text-align:left}.profileCrop{width:44px;height:44px}}.setupShell{border-bottom:1px solid var(--line);background:#0b0e0f}.setupToggle{color:#838b88;cursor:pointer;letter-spacing:.13em;text-align:left;background:#0d1010;border:0;grid-template-columns:1fr auto auto;align-items:center;gap:20px;width:100%;padding:15px clamp(20px,4vw,64px);font:700 9px ui-monospace,monospace;display:grid}.setupToggle:hover{color:#d7dcd8;background:#111412}.setupToggle>span{align-items:center;gap:9px;display:flex}.setupToggle i{background:var(--acid);border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #ffe23f77}.setupToggle>strong{color:#c6ccc8;font-weight:650}.setupToggle>b{width:22px;height:22px;color:var(--acid);border:1px solid #3b403d;border-radius:50%;place-items:center;font-size:15px;display:grid}.setupShell .controlPanel{border-top:1px solid #202523;border-bottom:0}.sequenceStep{touch-action:pan-y}.sequenceStep:active{cursor:grabbing}.playableMovementGrid{cursor:pointer;border-radius:7px;transition:all .15s}.playableMovementGrid:hover{filter:brightness(1.08)}.playableMovementGrid:active{filter:brightness(1.18);transform:scale(.992)}.playableMovementGrid:focus-visible{outline:2px solid var(--acid);outline-offset:4px}.colorPriority{grid-template-columns:82px 1fr;align-items:start;gap:12px;display:grid}.colorPriority+.colorPriority{border-top:1px solid #292f2d;margin-top:12px;padding-top:12px}.colorPriority>span{color:var(--acid);letter-spacing:.11em;padding-top:8px;font:700 7px ui-monospace,monospace}.colorPriority.outside>span{color:#6c7470}.colorPriority.outside .buttonCloud button{opacity:.68}.colorPriority.outside .buttonCloud button:hover,.colorPriority.outside .buttonCloud button.active{opacity:1}@media (max-width:800px){.setupToggle{grid-template-columns:1fr auto}.setupToggle>strong{display:none}.colorPriority{grid-template-columns:1fr;gap:4px}.sequenceStep{min-width:118px}}.headerLayouts{background:#080a09;border:1px solid #303532;border-radius:6px;align-items:center;gap:3px;padding:3px;display:flex}.headerLayouts button{color:#777f7b;cursor:pointer;text-transform:uppercase;letter-spacing:.07em;background:0 0;border:0;border-radius:3px;min-height:29px;padding:5px 10px;font:700 7px ui-monospace,monospace}.headerLayouts button:hover{color:#fff}.headerLayouts button.active{background:var(--acid);color:#15140c}.sortOnly{display:block}.sortOnly>div:last-child{justify-self:start}.sortOnly>div:last-child .buttonCloud{justify-content:flex-start}.degreeBadge{background:var(--acid);color:#15140c;border-radius:3px;place-items:center;min-width:22px;height:18px;margin-right:4px;padding:0 4px;font-size:9px;font-style:normal;display:inline-grid}.profileCrop{border-color:var(--acid);background:var(--acid);box-shadow:0 0 0 2px #090b0c}.profileCrop img{object-fit:initial;width:72px;max-width:none;height:auto;transform:translate(-9px,-4px)}@media (max-width:980px){.topbar{padding-inline-start:18px;padding-inline-end:18px}.brand small{display:none}.headerLayouts button{padding-inline-start:7px;padding-inline-end:7px}.manual{display:none}}@media (max-width:680px){.topbar{grid-template-rows:auto auto;grid-template-columns:1fr auto;gap:8px 10px;height:auto;min-height:72px;padding-top:8px;padding-bottom:8px;display:grid}.headerLayouts{grid-area:2/1/auto/-1;grid-template-columns:repeat(3,1fr);width:100%;display:grid}.headerLayouts button{min-height:31px}.soundToggle{grid-area:1/2}.topActions{display:contents}.brand strong{font-size:11px}.fingeringsShell{scroll-margin-top:112px}}.identifierActions .slot{color:var(--acid);background:#181b15;border-color:#756b35}.progressionOverview{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px;margin-top:20px;display:grid}.progressionVoicingCard{cursor:pointer;background:linear-gradient(145deg,#111514,#090c0b);border:1px solid #2d3331;border-radius:8px;min-width:0;padding:16px;transition:all .18s;position:relative;box-shadow:0 14px 38px #0004}.progressionVoicingCard:hover{border-color:#4b524e;transform:translateY(-2px)}.progressionVoicingCard.current{border-color:var(--acid);box-shadow:0 0 0 1px #ffe23f35,0 18px 46px #0006}.progressionVoicingCard.next:not(.current){border-color:#746b3b}.progressionVoicingCard.locked{background:linear-gradient(145deg,#17170f,#090c0b)}.overviewCardTop,.overviewActions{justify-content:space-between;align-items:center;gap:10px;display:flex}.overviewCardTop small{color:#747c78;letter-spacing:.11em;font:700 7px ui-monospace,monospace}.overviewCardTop h3{letter-spacing:-.04em;margin:3px 0 0;font-size:22px}.overviewState b,.overviewState span{letter-spacing:.1em;border-radius:3px;padding:5px 7px;font:800 7px ui-monospace,monospace;display:inline-block}.overviewState b{background:var(--acid);color:#14130d}.overviewState span{color:#c4b963;border:1px solid #6d653c}.overviewActions{justify-content:flex-end;margin-top:-30px;margin-bottom:5px;padding-right:0}.progressionVoicingCard .padGrid{margin-block-start:14px;margin-block-end:14px}.overviewVoicingNav{justify-content:space-between;width:100%;margin-bottom:11px}.overviewVoicingNav .voicingLink{flex:1}.progressionVoicingCard .cardFoot{gap:10px}.progressionVoicingCard .cardFoot span:last-child{text-align:right}.progressionVoicingCard:has(.overviewState:empty) .overviewActions{margin-top:8px}@media (max-width:640px){.progressionOverview{grid-template-columns:1fr}.overviewActions{justify-content:flex-start;margin-top:8px}.progressionVoicingCard{padding:14px}.progressionVoicingCard .padGrid{gap:6px}}.progressionHeadActions{align-items:center;gap:10px;display:flex}.sheetButton{min-height:43px;color:var(--acid);cursor:pointer;text-transform:uppercase;letter-spacing:.09em;background:#191910;border:1px solid #746b37;border-radius:5px;padding:9px 13px;font:800 8px ui-monospace,monospace}.sheetButton:hover{background:var(--acid);color:#14130c}.sheetButton:disabled{opacity:.35;cursor:not-allowed}.sheetOverlay{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#050606e8;padding:24px;position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto}.chordSheet{color:#171816;background:#f2f0e9;border-radius:9px;width:min(1180px,100%);min-height:90vh;margin:auto;padding:34px;box-shadow:0 28px 90px #000b}.sheetToolbar{z-index:2;color:#8e9691;letter-spacing:.13em;background:#101311;border-radius:9px 9px 0 0;justify-content:space-between;align-items:center;margin:-34px -34px 28px;padding:13px 20px;font:800 8px ui-monospace,monospace;display:flex;position:sticky;top:-24px}.sheetToolbar>div{gap:7px;display:flex}.sheetToolbar button{color:#dce0dc;cursor:pointer;background:#171b19;border:1px solid #3c433f;border-radius:4px;padding:8px 10px;font-size:8px}.sheetToolbar button:first-child{background:var(--acid);color:#17160d;border-color:#a18f2f}.sheetHeader{border-bottom:2px solid #1f211e;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:20px;display:flex}.sheetHeader span{color:#6f746d;letter-spacing:.14em;font:800 8px ui-monospace,monospace;display:block}.sheetHeader input{color:#171816;letter-spacing:-.05em;background:0 0;border:0;border-bottom:1px dashed #a4a49b;outline:none;width:min(700px,75vw);margin-top:6px;padding:0;font:800 clamp(28px,4vw,54px)/1.05 Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.sheetHeader>strong{letter-spacing:.1em;border:2px solid #1d1f1b;border-radius:99px;padding:9px 12px;font:900 9px ui-monospace,monospace}.sheetMeta{color:#20221f;text-transform:uppercase;border-bottom:1px solid #c8c7c0;flex-wrap:wrap;gap:18px 32px;padding:15px 0;font:800 10px ui-monospace,monospace;display:flex}.sheetMeta span{gap:8px;display:flex}.sheetMeta b{color:#85877f;letter-spacing:.12em;font-size:7px}.sheetLegend{color:#686b65;text-transform:uppercase;letter-spacing:.08em;flex-wrap:wrap;gap:12px 18px;padding:14px 0;font:800 7px ui-monospace,monospace;display:flex}.sheetLegend span{align-items:center;gap:5px;display:flex}.sheetLegend i{background:var(--c);border-radius:50%;width:7px;height:7px}.sheetLegend .root{--c:var(--root)}.sheetLegend .third{--c:var(--third)}.sheetLegend .fifth{--c:var(--fifth)}.sheetLegend .sixth{--c:var(--sixth)}.sheetLegend .seventh{--c:var(--seventh)}.sheetLegend .extension{--c:var(--extension)}.sheetGrid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;display:grid}.sheetChord{break-inside:avoid;background:#e8e6df;border:1px solid #c7c6be;border-radius:6px;padding:14px}.sheetChordTop{align-items:center;gap:11px;display:flex}.sheetChordTop>span{width:30px;height:30px;color:var(--acid);background:#1b1d1a;border-radius:50%;place-items:center;font:900 11px ui-monospace,monospace;display:grid}.sheetChordTop small{color:#777b74;letter-spacing:.1em;font:800 7px ui-monospace,monospace;display:block}.sheetChordTop h2{letter-spacing:-.04em;margin:1px 0 0;font-size:22px}.sheetPadGrid{gap:4px;margin:12px 0}.sheetPadGrid .pad{box-shadow:none;background:#d8d6ce;border-color:#c5c4bc}.sheetPadGrid .pad span{font-size:7px}.sheetPadGrid .pad.off.guideRoot{background:#858780;border-color:#73756e}.sheetPadGrid .pad.off.guideScale{background:#c3c2ba;border-color:#aaa9a2}.sheetChordNotes{color:#62655f;text-transform:uppercase;border-top:1px solid #cac9c1;justify-content:space-between;gap:10px;padding-top:9px;font:800 7px ui-monospace,monospace;display:flex}.sheetChordNotes strong{color:#20221e}.sheetFooter{color:#5f625c!important;letter-spacing:.1em!important;background:0 0!important;border-top:2px solid #20221f!important;justify-content:space-between!important;align-items:center!important;margin:26px 0 0!important;padding:14px 0 0!important;font:800 7px ui-monospace,monospace!important;display:flex!important}.sheetFooter span:first-child{color:#1e201d;font-size:9px}@media (max-width:700px){.sheetOverlay{padding:0}.chordSheet{border-radius:0;min-height:100vh;padding:22px 14px}.sheetToolbar{border-radius:0;margin:-22px -14px 20px;top:0}.sheetHeader{display:block}.sheetHeader input{width:100%;font-size:32px}.sheetHeader>strong{margin-top:14px;display:inline-block}.sheetGrid{grid-template-columns:1fr}.progressionHeadActions{justify-content:space-between;margin-top:18px}}@media print{@page{size:landscape;margin:8mm}html,body{background:#fff!important}.topbar,.setupShell,.identifierShell,.fingeringsShell,.progressionLab,main>footer{display:none!important}.sheetOverlay{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#fff!important;padding:0!important;display:block!important;position:static!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;overflow:visible!important}.chordSheet{-webkit-print-color-adjust:exact;-moz-print-color-adjust:exact;print-color-adjust:exact;width:100%!important;max-width:none!important;min-height:0!important;box-shadow:none!important;border-radius:0!important;margin:0!important;padding:0!important;display:block!important}.noPrint{display:none!important}.sheetHeader input{width:75%!important}.sheetGrid{grid-template-columns:repeat(4,1fr)!important}.sheetChord{page-break-inside:avoid}.sheetPadGrid{gap:3px!important}.sheetFooter{page-break-inside:avoid}}.pad.off.guideRoot{box-shadow:none;background:#3b403f;border-color:#555b59}.pad.off.guideRoot span{color:#aab0ad}.pad.off.guideScale{box-shadow:none;background:#242827;border-color:#363b39}.pad.off.guideScale span{color:#707774;font-weight:550}.sheetHeader{display:block}.sheetHeader>div{width:100%}.sheetHeader textarea{resize:none;color:#171816;letter-spacing:-.05em;white-space:pre-wrap;overflow-wrap:anywhere;field-sizing:content;background:0 0;border:0;border-bottom:1px dashed #a4a49b;outline:none;width:100%;min-height:1.1em;margin-top:6px;padding:0;font:800 clamp(28px,4vw,54px)/1.05 Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;display:block;overflow:visible}.sheetPadGrid .pad:not(.off){border:2px solid color-mix(in srgb,var(--c),#111 24%);box-shadow:0 0 0 2px #fffa,0 2px 5px #0003}.sheetPadGrid .pad.off.guideRoot{box-shadow:none;background:#deddd6;border:1px dashed #9c9d96}.sheetPadGrid .pad.off.guideRoot span{color:#777a74}.sheetPadGrid .pad.off.guideScale{box-shadow:none;background:#e5e4dd;border-color:#d0cfc8}.sheetPadGrid .pad.off.guideScale span{color:#aaa9a3;font-weight:500}.sheetNotes{color:#777a74;letter-spacing:.12em;margin-top:22px;font:800 7px ui-monospace,monospace;display:block}.sheetNotes span{margin-bottom:7px;display:block}.sheetNotes textarea{resize:none;color:#252724;white-space:pre-wrap;overflow-wrap:anywhere;field-sizing:content;background:repeating-linear-gradient(#f2f0e9 0 24px,#d8d6ce 25px);border:1px solid #c7c6be;border-radius:5px;outline:none;width:100%;min-height:100px;padding:12px;font:500 12px/25px Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;display:block;overflow:visible}@media (max-width:700px){.sheetHeader textarea{font-size:32px}.sheetNotes textarea{min-height:140px}}@media print{.sheetHeader,.sheetHeader textarea{break-inside:avoid}.sheetHeader textarea{field-sizing:content;resize:none!important;width:100%!important;min-height:1.1em!important;overflow:visible!important}.sheetNotes{break-inside:avoid}.sheetNotes textarea{field-sizing:content;resize:none!important;min-height:78px!important;overflow:visible!important}}.sheetChord{min-width:0;overflow:hidden}.sheetPadGrid{grid-template-columns:repeat(8,minmax(0,1fr))}.sheetPadGrid .pad{min-width:0}.sheetPadGrid .pad span{text-overflow:clip;max-width:100%;overflow:hidden}.sheetNotesPrint{white-space:pre-wrap;overflow-wrap:anywhere;display:none}@media print{.sheetGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.sheetChord{min-width:0!important;padding:10px!important;overflow:hidden!important}.sheetPadGrid{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:2px!important}.sheetPadGrid .pad{border-width:1px!important;min-width:0!important}.sheetPadGrid .pad span{font-size:5px!important}.sheetNotes textarea{display:none!important}.sheetNotesPrint{color:#252724;background:repeating-linear-gradient(#f2f0e9 0 24px,#d8d6ce 25px);border:1px solid #c7c6be;border-radius:5px;min-height:78px;padding:10px;font:500 12px/25px Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;display:block}}.sequence{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));align-items:stretch;gap:7px;padding-bottom:0;display:grid;overflow:visible}.sequenceStep{touch-action:none;-webkit-user-drag:none;width:100%;min-width:0}.sequenceStep:active{z-index:2;border-color:var(--acid);background:#1b2014;transform:scale(1.02);box-shadow:0 10px 28px #0008}@media (max-width:800px){.sequence{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}.sequenceStep{min-width:0}}.sequenceStep.dropTarget:before{content:"";z-index:4;background:var(--acid);border-radius:99px;width:3px;position:absolute;top:5px;bottom:5px;left:-5px;box-shadow:0 0 10px #ffe23faa}.sequence:not(:active) .sequenceStep.dropTarget:before{display:none}.progressionVoicingCard .overviewActions{margin-top:8px}html,body{width:100%;max-width:100%;overflow-x:clip}main,.fingeringsShell,.fingeringControls,.fingeringControls>div,.controlPanel,.controlGrid,.controlGrid>*,.progressionLab,.progressionBuilder,.sequenceBlock{min-width:0;max-width:100%}.degrees{width:100%;max-width:100%}.padGrid{grid-template-columns:repeat(8,minmax(0,1fr));min-width:0}.mapCard{min-width:0;overflow:hidden}.layoutNotice{color:#8e9691;letter-spacing:.04em;background:#18170f;border:1px solid #5c5330;border-radius:4px;align-items:flex-start;gap:10px;margin-top:14px;padding:10px 12px;font:700 8px/1.45 ui-monospace,monospace;display:flex}.layoutNotice b{color:var(--acid);letter-spacing:.1em;flex:none;font-size:7px}.layoutNotice span{min-width:0}@media (max-width:680px){.brand{min-width:0;overflow:hidden}.brand strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.fingeringControls{overflow:hidden}.fingeringControls .degrees{overflow-x:auto}.layoutNotice{display:block}.layoutNotice span{margin-top:5px;display:block}}html{scroll-behavior:smooth}.sectionNav{background:#0b0e0d;border:1px solid #292f2c;border-radius:99px;align-items:center;gap:2px;padding:3px;display:flex}.sectionNav button{color:#858d89;cursor:pointer;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;background:0 0;border:0;border-radius:99px;min-height:29px;padding:5px 10px;font:750 7px ui-monospace,monospace}.sectionNav button:hover{color:var(--acid);background:#191d19}.sectionNav button:focus-visible{color:var(--acid);background:#191d19}#setup,#identifier,#fingerings,#voice-leading{scroll-margin-top:88px}@media (max-width:900px) and (min-width:681px){.sectionNav button{padding-inline-start:7px;padding-inline-end:7px}.brand strong{font-size:11px}}@media (max-width:680px){.topbar{grid-template-rows:auto auto auto}.sectionNav{border-radius:6px;grid-area:3/1/auto/-1;grid-template-columns:repeat(4,1fr);width:100%;display:grid}.sectionNav button{border-radius:3px;min-height:30px;padding-inline-start:3px;padding-inline-end:3px}#setup,#identifier,#fingerings,#voice-leading{scroll-margin-top:150px}}.progressionLibrary{background:#0c0f0e;border:1px solid #2b302e;border-radius:7px;min-width:0;margin-top:14px;padding:0;overflow:hidden}.libraryToggle{width:100%;color:inherit;cursor:pointer;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:18px;padding:16px 20px;display:flex}.libraryToggle:hover{background:#121614}.libraryToggle:focus-visible{background:#121614}.libraryToggle label{pointer-events:none;margin:0}.libraryToggle strong{color:#c4cbc6;text-transform:uppercase;letter-spacing:.08em;margin-top:5px;font:750 9px ui-monospace,monospace;display:block}.libraryToggle>span{color:var(--acid);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;font:700 7px ui-monospace,monospace}.presetRail{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-color:#4a514d #141817;gap:8px;margin:0 20px 9px;padding:0 0 7px;display:flex;overflow-x:auto}.presetRail button{color:#929a96;cursor:pointer;text-align:left;scroll-snap-align:start;background:#141817;border:1px solid #303634;border-radius:5px;flex:0 0 174px;min-height:82px;padding:12px;transition:all .15s}.presetRail button small,.presetRail button b,.presetRail button span{display:block}.presetRail button small{color:#69716d;text-transform:uppercase;letter-spacing:.12em;font:750 7px ui-monospace,monospace}.presetRail button b{color:#d7dcd8;margin-top:5px;font-size:12px}.presetRail button span{color:#777f7b;margin-top:8px;font:750 8px ui-monospace,monospace}.presetRail button:hover{background:#181c19;border-color:#626a65}.presetRail button.active{border-color:var(--acid);background:#1c1c10;box-shadow:inset 0 0 0 1px #ffe23f22}.presetRail button.active small,.presetRail button.active span{color:var(--acid)}@media (max-width:680px){.libraryToggle{padding:14px}.libraryToggle>span{font-size:6px}.presetRail{margin-left:14px;margin-right:0}.presetRail button{flex-basis:152px}}