.skip-link{position:fixed;z-index:200;left:16px;top:-80px;padding:10px 14px;border-radius:6px;background:var(--color-accent);color:var(--color-text-on-accent);font-weight:800}.skip-link:focus{top:12px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.product-nav{gap:2px}.product-nav>a,.nav-trigger{min-height:76px;padding:0 13px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--color-text-secondary);font:600 13px Manrope,sans-serif;cursor:pointer}.product-nav>a:hover,.product-nav>a.active,.nav-trigger:hover,.nav-group.active>.nav-trigger{border-color:var(--color-accent);color:var(--color-text)}.nav-trigger span{margin-left:5px;color:var(--color-accent)}.nav-group{position:relative;display:flex}.nav-menu{position:absolute;z-index:30;top:68px;left:50%;display:none;width:286px;padding:8px;translate:-50% 0;border:1px solid var(--color-border);border-radius:10px;background:color-mix(in srgb,var(--color-surface) 97%,transparent);box-shadow:0 22px 60px rgba(0,0,0,.38);backdrop-filter:blur(18px)}.nav-trigger[aria-expanded="true"]+.nav-menu,.nav-group:focus-within .nav-menu{display:grid}.nav-menu a{display:block!important;min-height:auto!important;padding:12px!important;border:0!important;border-radius:7px}.nav-menu a:hover,.nav-menu a.active{background:var(--color-surface-raised);color:var(--color-text)}.nav-menu b,.nav-menu span{display:block}.nav-menu b{font-size:13px}.nav-menu span{margin-top:3px;color:var(--color-text-muted);font-size:11px;font-weight:500}.nav-artists{opacity:.78}
.product-mobile-nav details{border-bottom:1px solid var(--color-border)}.product-mobile-nav summary{display:flex;min-height:48px;align-items:center;justify-content:space-between;color:var(--color-text);font-weight:650;cursor:pointer;list-style:none}.product-mobile-nav summary::-webkit-details-marker{display:none}.product-mobile-nav details>div{display:grid;padding:0 0 10px 16px}.product-mobile-nav details>div a{min-height:44px;padding:10px 0;border:0;color:var(--color-text-secondary)}
.product-hero{min-height:650px;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:clamp(40px,6vw,82px)}.product-hero .hero-copy{align-self:center}.product-hero .hero-copy h1{max-width:720px}.product-hero .lead{max-width:680px;line-height:1.85}.quick-lab{align-self:center}.quick-lab-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:32px 0 20px}.quick-lab-heading small{color:var(--color-text-muted);font:500 10px "DM Mono",monospace;letter-spacing:.13em}.quick-lab-heading h2{margin:5px 0 0;font-size:48px;line-height:1;letter-spacing:-.05em}.quick-lab-heading>span{color:var(--color-accent);font:500 13px "DM Mono",monospace}.quick-piano{display:flex;height:142px;gap:3px;overflow:hidden}.quick-piano button{position:relative;flex:1;min-width:0;padding:100px 2px 5px;border:0;border-radius:0 0 3px 3px;background:#eceae4;color:#31343a;font:600 10px "DM Mono",monospace;cursor:pointer}.quick-piano button.black::after{content:"";position:absolute;z-index:2;right:-36%;top:0;width:70%;height:59%;border-radius:0 0 3px 3px;background:#24282d}.quick-piano button.active{background:var(--color-accent)}.quick-piano button.is-playing{transform:translateY(4px);box-shadow:0 0 24px var(--color-accent);filter:brightness(1.12)}.quick-lab-actions{display:flex;gap:9px;margin-top:20px}.quick-lab-actions>*{flex:1}.quick-status{margin:13px 0 0;color:var(--color-text-muted);font-size:12px}.journey-strip{border-block:1px solid var(--color-border);background:var(--color-surface)}.journey-strip .wrap{display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:18px;color:var(--color-text-secondary);font:500 11px "DM Mono",monospace;letter-spacing:.11em}.journey-strip b{margin-right:8px;color:var(--color-accent)}.journey-strip i{color:var(--color-border-strong);font-style:normal}
.home-priority{padding-top:88px}.home-secondary{padding-top:108px}.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.learn-card{position:relative;display:flex;min-height:290px;flex-direction:column;padding:28px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);transition:transform var(--transition-ui),border-color var(--transition-ui),box-shadow var(--transition-ui)}.learn-card:hover{transform:translateY(-4px);border-color:var(--color-accent);box-shadow:var(--shadow-hover)}.learn-index{position:absolute;right:22px;top:20px;color:var(--color-border-strong);font:500 12px "DM Mono",monospace}.learn-card small{color:var(--color-accent);font:500 10px "DM Mono",monospace;letter-spacing:.15em}.learn-card h3{margin:42px 0 12px;font-size:28px;letter-spacing:-.045em}.learn-card p{margin:0;color:var(--color-text-secondary);font-size:15px;line-height:1.75}.learn-card b{margin-top:auto;padding-top:24px;color:var(--color-accent);font:600 11px "DM Mono",monospace;letter-spacing:.08em}.creator-tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.creator-tool-card{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:start;min-height:150px;padding:24px;border:1px solid var(--color-border);border-radius:9px;background:var(--color-surface);transition:transform var(--transition-ui),border-color var(--transition-ui)}.creator-tool-card:hover{transform:translateY(-3px);border-color:var(--color-accent)}.creator-tool-card small{color:var(--color-accent);font:500 9px "DM Mono",monospace;letter-spacing:.12em}.creator-tool-card h3{margin:5px 0 7px;font-size:20px}.creator-tool-card p{margin:0;color:var(--color-text-muted);font-size:13px}.creator-tool-card>b{color:var(--color-accent)}.artist-home-cta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:36px;margin-bottom:120px;padding:42px;border:1px solid var(--color-border);border-radius:12px;background:linear-gradient(120deg,var(--color-surface),var(--color-surface-raised))}.artist-home-cta h2{margin:4px 0 8px;font-size:32px}.artist-home-cta p{max-width:650px;margin:0;color:var(--color-text-muted)}.artist-home-cta>div:last-child{display:flex;align-items:center;gap:12px}.content-section:last-child{padding-bottom:0}
.chord-knowledge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:24px 0 30px;overflow:hidden;border:1px solid var(--color-border);border-radius:8px;background:var(--color-border)}.chord-knowledge-grid>div{min-height:132px;padding:18px;background:var(--color-bg)}.chord-knowledge-grid small,.common-progression small{color:var(--color-accent);font:500 10px "DM Mono",monospace;letter-spacing:.12em}.chord-knowledge-grid p{margin:12px 0 0;color:var(--color-text-secondary);font-size:14px;line-height:1.75}.note-badges,.formula.compact{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 0}.note-badges span{display:grid;min-width:38px;height:38px;place-items:center;border-radius:5px;background:var(--color-accent);color:var(--color-text-on-accent);font:700 14px "DM Mono",monospace}.formula.compact span{padding:7px 10px}.interval-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.interval-list span{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--color-border);border-radius:5px;color:var(--color-text-secondary);font-size:12px}.interval-list b{color:var(--color-text);font-family:"DM Mono",monospace}.common-progression{margin-top:32px;padding-top:28px;border-top:1px solid var(--color-border)}.common-progression h3{margin:5px 0 0;font-size:20px}.common-progression-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:15px}.common-progression-row>div{display:flex;min-width:0;align-items:center;gap:8px;overflow-x:auto}.common-progression-row>div>span{min-width:85px;padding:10px 12px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-bg)}.common-progression-row>div small,.common-progression-row>div b{display:block}.common-progression-row>div small{color:var(--color-text-muted);font:500 9px "DM Mono",monospace}.common-progression-row>div b{margin-top:4px;font-size:14px}.common-progression-row i{color:var(--color-accent);font-style:normal}
.quiz-setup{display:grid;grid-template-columns:auto 1fr;gap:28px;margin-bottom:16px;padding:20px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.quiz-setup small{display:block;margin-bottom:10px;color:var(--color-text-muted);font:500 10px "DM Mono",monospace;letter-spacing:.12em}.quiz-difficulty,.quiz-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0}.quiz-difficulty button,.quiz-tabs button{min-height:44px;padding:9px 14px;border:1px solid var(--color-border);border-radius:5px;background:var(--color-surface-raised);color:var(--color-text-secondary);cursor:pointer}.quiz-difficulty button:hover,.quiz-tabs button:hover{border-color:var(--color-border-strong)}.quiz-difficulty button.active,.quiz-tabs button.active{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-text-on-accent);font-weight:800}.quiz-stage{max-width:none}.answers button:disabled{cursor:default}.quiz-explanation{min-height:0;margin-top:20px;border-radius:7px}.quiz-explanation:not(:empty){padding:18px;border:1px solid var(--color-border);background:var(--color-bg)}.quiz-explanation strong{color:var(--color-accent);font-size:17px}.quiz-explanation p{margin:7px 0 0;color:var(--color-text-secondary);line-height:1.75}.quiz-explanation small{display:block;margin-top:9px;color:var(--color-text-muted)}
.producer-tools{grid-template-columns:repeat(3,minmax(0,1fr))}.product-tool-card{display:flex;min-height:245px;flex-direction:column}.product-tool-card header{display:flex;align-items:start;justify-content:space-between}.product-tool-card header small{color:var(--color-text-muted);font:500 9px "DM Mono",monospace}.product-tool-card h3{font-size:20px}.product-tool-card .tool-open-link{margin-top:auto;padding-top:18px;color:var(--color-accent);font:600 11px "DM Mono",monospace;letter-spacing:.06em}.tap-tempo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-top:16px}.tap-tempo output{color:var(--color-accent);font:600 13px "DM Mono",monospace}.tap-tempo .is-playing{transform:translateY(3px);filter:brightness(1.18)}
.news-body time{font-family:"DM Mono",monospace}.news-card[hidden]{display:none}.filters a{display:inline-flex;min-height:42px;align-items:center;padding:8px 13px;border:1px solid var(--color-border);border-radius:5px;color:var(--color-text-secondary);font-size:13px}.filters a:hover,.filters a.active{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-text-on-accent)}.form-status{display:block;min-height:22px;margin-top:10px;color:var(--color-accent);font-size:13px}.feedback-form button:disabled{opacity:.65;cursor:wait}
@media(max-width:1180px){.product-nav{display:none}.site-controls{margin-left:auto}.product-mobile-nav.open{max-height:calc(100vh - 76px);overflow-y:auto}.product-mobile-nav>a{min-height:48px}.nav-menu{display:none!important}}
@media(max-width:900px){.product-hero{grid-template-columns:1fr;min-height:auto;gap:36px;padding-top:58px}.quick-lab{width:min(100%,650px)}.learn-grid{grid-template-columns:1fr}.learn-card{min-height:220px}.creator-tool-grid{grid-template-columns:1fr}.quiz-setup{grid-template-columns:1fr}.producer-tools{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.site-controls select{max-width:82px}.product-hero{padding-top:46px}.product-hero .hero-copy h1{font-size:clamp(44px,14vw,58px);letter-spacing:-.055em}.product-hero .lead{font-size:16px}.quick-lab{padding:16px}.quick-lab-heading{margin-top:24px}.quick-lab-heading h2{font-size:40px}.quick-piano{height:128px;overflow-x:auto;padding-bottom:4px}.quick-piano button{flex:0 0 34px;padding-top:88px}.quick-lab-actions{display:grid;grid-template-columns:1fr 1fr}.journey-strip .wrap{justify-content:flex-start;overflow-x:auto}.journey-strip span{white-space:nowrap}.home-priority{padding-top:68px}.home-secondary{padding-top:82px}.learn-card{padding:23px}.artist-home-cta{grid-template-columns:1fr;margin-bottom:90px;padding:28px}.artist-home-cta>div:last-child{align-items:stretch;flex-direction:column}.artist-home-cta .text-link{padding-left:0}.result-top{gap:20px}.chord-knowledge-grid{grid-template-columns:1fr}.chord-knowledge-grid>div{min-height:0}.common-progression-row{align-items:stretch;flex-direction:column}.common-progression-row .queue-add{min-height:46px}.producer-tools{grid-template-columns:1fr}.quiz-setup{padding:15px}.quiz-difficulty,.quiz-tabs{display:grid;grid-template-columns:1fr 1fr}.quiz-difficulty button,.quiz-tabs button{padding:8px;font-size:12px}.quiz-stage{padding:26px 20px}.answers{grid-template-columns:1fr}.tap-tempo{grid-template-columns:1fr}.tap-tempo output{text-align:center}}
@media(prefers-reduced-motion:reduce){.learn-card,.creator-tool-card{transition:none}.page{animation:none}}