.inline-action.text-link{display:inline-flex;width:auto;padding-left:0}.category-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}.category-list button,.library-tabs button,.library-filters button{padding:9px 11px;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:5px;color:var(--color-text-secondary);font-size:12px;cursor:pointer}.category-list button:hover,.library-tabs button:hover,.library-filters button:hover{border-color:var(--color-border-strong);background:var(--color-surface-hover)}.category-list button.active,.library-tabs button.active,.library-filters button.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-accent);font-weight:800}
.keyboard-map{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}.keyboard-map>span{display:grid;place-items:center;min-width:42px;padding:6px 5px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:5px;color:var(--color-text-muted)}.keyboard-map kbd{font:700 12px "DM Mono",monospace;color:var(--color-text)}.keyboard-map small{font:500 9px "DM Mono",monospace}.keyboard-map>span.active{transform:translateY(3px);background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 18px var(--color-accent-soft)}.keyboard-map>span.active kbd,.keyboard-map>span.active small{color:var(--color-text-on-accent)}
.smart-recommendations{margin-top:34px;padding-top:28px;border-top:1px solid var(--color-border)}.smart-recommendations>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:15px}.smart-recommendations small{font:500 10px "DM Mono",monospace;letter-spacing:.12em;color:var(--color-accent)}.smart-recommendations h3{font-size:20px}.recommendation-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.recommendation-badge{padding:14px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:7px;text-align:left;color:var(--color-text);cursor:pointer}.recommendation-badge:hover{transform:translateY(-2px);border-color:var(--color-accent);box-shadow:0 8px 22px var(--color-accent-soft)}.recommendation-badge strong,.recommendation-badge span{display:block}.recommendation-badge strong{font-size:13px}.recommendation-badge span{margin-top:7px;color:var(--color-text-muted);font:500 10px "DM Mono",monospace;line-height:1.6}
.advanced-library{padding-top:36px}.advanced-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.advanced-toolbar select,.generator-controls select{min-height:46px;padding:0 14px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text)}.library-tabs{display:flex;gap:6px}.library-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}.library-heading{display:flex;justify-content:space-between;align-items:baseline;margin:24px 0 14px}.library-heading span{color:var(--color-text-muted);font:500 11px "DM Mono",monospace}.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.library-card{display:flex;min-height:170px;flex-direction:column;background:var(--color-surface);border-color:var(--color-border)!important;color:var(--color-text);cursor:pointer}.library-card:hover{border-color:var(--color-accent)!important;background:var(--color-surface-raised);box-shadow:0 15px 35px var(--color-accent-soft)}.library-card small{color:var(--color-accent);font:500 9px "DM Mono",monospace}.library-card strong{margin-top:14px;font-size:22px}.library-card span{margin-top:11px;color:var(--color-text-secondary);font:500 12px "DM Mono",monospace}.library-card em{margin-top:auto;padding-top:14px;color:var(--color-text-muted);font:500 10px "DM Mono",monospace;font-style:normal}
.generator-shell{display:grid;grid-template-columns:minmax(250px,.65fr) minmax(0,1.35fr);gap:18px;margin-top:35px}.generator-controls,.progression-panel,.fifths-stage,.key-detail{background:var(--color-surface);border:1px solid var(--color-border)!important;border-radius:10px}.generator-controls{display:flex;flex-direction:column;gap:10px;padding:28px}.generator-controls label{margin-top:8px;color:var(--color-text-secondary);font:500 11px "DM Mono",monospace}.generator-controls .btn{margin-top:16px}.progression-panel{min-height:330px;padding:30px;display:flex;flex-direction:column}.progression-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px}.progression-panel header small{color:var(--color-accent);font:500 10px "DM Mono",monospace}.progression-panel h2{font-size:27px}.progression-chords{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:auto 0}.progression-chords span{padding:18px 12px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:7px}.progression-chords span.is-playing{animation:note-press .2s ease-out;background:var(--color-accent);box-shadow:0 0 25px var(--color-accent-soft)}.progression-chords small,.progression-chords strong{display:block}.progression-chords small{color:var(--color-text-muted);font:500 9px "DM Mono",monospace}.progression-chords strong{margin-top:10px;font-size:19px}.progression-chords span.is-playing strong,.progression-chords span.is-playing small{color:var(--color-text-on-accent)}
.fifths-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);gap:20px;margin-top:35px}.fifths-stage{display:grid;place-items:center}.fifths-stage svg{width:min(100%,650px);overflow:visible}.circle-key{outline:none}.circle-key path{stroke:var(--color-border);stroke-width:2;transition:fill .18s ease,filter .18s ease,stroke .18s ease}.circle-key .major-ring{fill:var(--color-surface-raised)}.circle-key .minor-ring{fill:var(--color-bg)}.circle-key text{fill:var(--color-text);font:700 17px "DM Mono",monospace;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.circle-key .minor-label{fill:var(--color-text-secondary);font-size:14px}.circle-key:hover path,.circle-key:focus-visible path{stroke:var(--color-accent);filter:drop-shadow(0 0 7px var(--color-accent-soft))}.circle-key.selected .major-ring,.circle-key.selected .minor-ring{fill:var(--color-accent);stroke:var(--color-accent)}.circle-key.selected text{fill:var(--color-text-on-accent)}.circle-center{fill:var(--color-surface);stroke:var(--color-border);stroke-width:2}.circle-title,.circle-subtitle{fill:var(--color-text);font:800 20px "DM Mono",monospace;text-anchor:middle}.circle-subtitle{fill:var(--color-accent);font-size:13px;letter-spacing:.12em}.key-detail{padding:28px;align-self:start}.key-detail>small{color:var(--color-accent);font:500 10px "DM Mono",monospace}.key-detail h2{margin:10px 0 22px;font-size:30px}.key-signature{padding:15px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:7px;color:var(--color-text-secondary)}.degree-chords{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}.degree-chords span{padding:14px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:7px}.degree-chords small,.degree-chords strong{display:block}.degree-chords small{color:var(--color-accent);font:500 10px "DM Mono",monospace}.degree-chords strong{margin-top:6px;font-size:18px}
@media(max-width:900px){.recommendation-list,.library-grid{grid-template-columns:repeat(2,1fr)}.generator-shell,.fifths-layout{grid-template-columns:1fr}.key-detail{width:100%}}@media(max-width:620px){.advanced-toolbar{align-items:stretch;flex-direction:column}.library-tabs{display:grid;grid-template-columns:1fr 1fr}.recommendation-list,.library-grid{grid-template-columns:1fr}.progression-chords{grid-template-columns:repeat(2,1fr)}.generator-controls,.progression-panel,.key-detail{padding:21px}.keyboard-map{gap:4px}.keyboard-map>span{min-width:34px}.fifths-stage{padding:4px!important}.circle-key text{font-size:15px}.circle-key .minor-label{font-size:12px}}
.generator-workspace{display:grid;grid-template-columns:minmax(250px,.65fr) minmax(0,1.35fr);gap:18px;margin-top:35px}.generator-result{min-height:330px;padding:30px;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px}.generator-result .progression-chords{margin:auto 0}.fifths-workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);gap:20px;margin-top:35px}.degree-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}.degree-grid span{padding:14px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:7px}.degree-grid small,.degree-grid strong{display:block}.degree-grid small{color:var(--color-accent);font:500 10px "DM Mono",monospace}.degree-grid strong{margin-top:6px;font-size:18px}@media(max-width:900px){.generator-workspace,.fifths-workspace{grid-template-columns:1fr}}@media(max-width:620px){.generator-result{padding:21px}}

.chord-actions{display:flex;align-items:center;gap:8px}.queue-add,.queue-clear{min-height:43px;padding:0 13px;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:5px;color:var(--color-text);font-weight:700;cursor:pointer}.queue-add:hover,.queue-clear:hover:not(:disabled){border-color:var(--color-accent);background:var(--color-surface-hover);transform:translateY(-1px)}.quick-chords{margin-top:32px;padding-top:27px;border-top:1px solid var(--color-border)}.quick-chords small{color:var(--color-accent);font:500 10px "DM Mono",monospace;letter-spacing:.1em}.quick-chords h3{margin-top:5px;font-size:20px}.quick-chord-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px}.quick-chord-card{position:relative;min-height:92px;padding:12px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:7px;color:var(--color-text);text-align:left;cursor:pointer}.quick-chord-card:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 8px 20px var(--color-accent-soft)}.quick-chord-card small,.quick-chord-card strong{display:block}.quick-chord-card small{padding-right:22px;color:var(--color-text-muted);font-size:9px;letter-spacing:0}.quick-chord-card strong{margin-top:10px;font-size:17px}.quick-chord-card>span{position:absolute;top:9px;right:9px;color:var(--color-accent);font-size:18px}
[data-page="chords"]{padding-bottom:240px}.progression-dock{position:fixed;z-index:90;left:50%;bottom:14px;transform:translateX(-50%);display:grid;width:min(1120px,calc(100% - 30px));grid-template-columns:200px 1fr auto;align-items:center;gap:16px;padding:14px 16px;background:color-mix(in srgb,var(--color-surface) 94%,transparent);border:1px solid var(--color-border-strong);border-radius:10px;box-shadow:0 18px 55px rgba(0,0,0,.42);backdrop-filter:blur(16px)}.progression-dock.is-playing{border-color:var(--color-accent)}.progression-dock-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.progression-dock-head small,.progression-dock-head strong{display:block}.progression-dock-head small{color:var(--color-accent);font:500 9px "DM Mono",monospace}.progression-dock-head strong{margin-top:4px;font-size:12px}.progression-dock-head label{color:var(--color-text-muted);font:600 9px "DM Mono",monospace}.progression-dock-head input{display:block;width:68px;height:34px;margin-top:3px;padding:0 7px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:5px;color:var(--color-text);font:600 13px "DM Mono",monospace}.progression-queue{display:flex;min-width:0;gap:6px;overflow-x:auto;padding:3px}.queue-empty{color:var(--color-text-muted);font-size:12px}.queued-chord{position:relative;flex:0 0 auto;min-width:84px;padding:9px 25px 9px 10px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);text-align:left;cursor:pointer}.queued-chord small,.queued-chord strong{display:block}.queued-chord small{color:var(--color-text-muted);font:500 8px "DM Mono",monospace}.queued-chord strong{margin-top:3px;font-size:14px}.queued-chord>span{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--color-text-muted)}.queued-chord.is-playing{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 22px var(--color-accent-soft)}.queued-chord.is-playing small,.queued-chord.is-playing strong,.queued-chord.is-playing>span{color:var(--color-text-on-accent)}.progression-controls{display:flex;gap:7px}.progression-controls .play-btn{white-space:nowrap}.queue-clear:disabled,.progression-controls .play-btn:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:1050px){.progression-dock{grid-template-columns:1fr auto}.progression-dock-head{grid-column:1/-1}.progression-queue{grid-column:1}.progression-controls{grid-column:2}}@media(max-width:760px){.chord-actions{align-items:stretch;flex-direction:column}.quick-chord-grid{grid-template-columns:repeat(2,1fr)}.progression-dock{bottom:8px;grid-template-columns:1fr;padding:11px}.progression-dock-head,.progression-queue,.progression-controls{grid-column:1}.progression-controls .play-btn,.queue-clear{flex:1}.progression-controls .play-btn span{display:inline}}@media(max-width:480px){.progression-dock{width:calc(100% - 16px)}.quick-chord-grid{grid-template-columns:1fr}}
.hint #audioStatus{display:inline-block;margin-left:8px;color:var(--color-accent)}.hint #audioStatus.error{color:var(--color-danger)}
.nav-coming-soon{gap:7px;cursor:not-allowed;opacity:.76}.nav-coming-soon::after{content:"COMING SOON";flex:0 0 auto;padding:3px 5px;border:1px solid color-mix(in srgb,var(--color-accent) 55%,transparent);border-radius:4px;background:var(--color-accent-soft);color:var(--color-accent);font:600 8px "DM Mono",monospace;letter-spacing:.08em}.nav-coming-soon:hover{border-color:transparent!important;color:var(--color-text-muted)!important}.mobile-nav .nav-coming-soon span{display:none}@media(max-width:1180px){.desktop-nav{display:none}.menu-btn{display:block}.mobile-nav{display:none;position:fixed;z-index:19;top:76px;inset-inline:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:14px 24px}.mobile-nav.open{display:grid}.mobile-nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--color-border)}.mobile-nav span{color:var(--color-text-muted)}}

.featured-artist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.featured-artist-card{display:grid;grid-template-columns:clamp(132px,16vw,210px) 1fr;min-height:220px;overflow:hidden;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);transition:transform var(--transition-ui),border-color var(--transition-ui),box-shadow var(--transition-ui)}.featured-artist-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--color-accent) 70%,var(--color-border));box-shadow:var(--shadow-hover)}.featured-artist-visual{display:grid;place-items:end start;padding:20px;isolation:isolate;overflow:hidden;background:#1a1d22;position:relative}.featured-artist-visual::before{content:"";position:absolute;inset:12%;border:1px solid rgba(255,255,255,.18);border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 40px rgba(255,181,71,.12)}.featured-artist-visual span{font:500 clamp(28px,4vw,54px)/1 "DM Mono",monospace;color:#fff;letter-spacing:-.08em;z-index:1}.featured-lina{background:radial-gradient(circle at 72% 24%,rgba(255,181,71,.55),transparent 22%),linear-gradient(145deg,#31200f,#111317 58%)}.featured-kai{background:radial-gradient(circle at 30% 68%,rgba(102,217,239,.35),transparent 24%),linear-gradient(145deg,#16252a,#111317 58%)}.featured-artist-card>div:last-child{display:flex;flex-direction:column;justify-content:center;padding:26px}.featured-artist-card small{font:500 10px "DM Mono",monospace;letter-spacing:.15em;color:var(--color-accent)}.featured-artist-card h3{margin:8px 0 10px;font-size:27px;letter-spacing:-.04em}.featured-artist-card p{margin:0;color:var(--color-text-secondary);font-size:14px;line-height:1.7}.featured-artist-card>div:last-child>span{margin-top:24px;color:var(--color-accent);font-size:13px;font-weight:700}
@media(max-width:820px){.featured-artist-grid{grid-template-columns:1fr}}@media(max-width:520px){.featured-artist-card{grid-template-columns:112px 1fr;min-height:180px}.featured-artist-card>div:last-child{padding:20px}.featured-artist-card h3{font-size:23px}.featured-artist-card p{font-size:13px}.featured-artist-card>div:last-child>span{margin-top:14px}}