@import url('./tokens.css');
body{background:var(--studio-bg);color:var(--studio-text);font-family:var(--studio-ui);font-size:14px;-webkit-font-smoothing:antialiased}header,main,footer{max-width:1200px;padding-left:40px;padding-right:40px}header{min-height:88px;border-color:var(--studio-border)}a{text-decoration:none}.brand{font:italic 36px var(--studio-display)}.brand span{color:var(--studio-accent)}nav{gap:28px;color:var(--studio-muted);font-size:13px}nav a{padding:12px 0}nav a[aria-current]{color:var(--studio-text);box-shadow:0 2px var(--studio-accent)}main{padding-top:52px}.eyebrow{font:12px var(--studio-mono);color:var(--studio-muted);margin:0 0 12px}h1{font:44px/1.1 var(--studio-display);margin:0}h2{font:500 16px var(--studio-ui)}.heading{align-items:flex-end;margin-bottom:40px}button,select,input[type=number]{border-color:var(--studio-border);border-radius:var(--studio-radius);background:var(--studio-surface);color:var(--studio-text)}button{transition:background 120ms,border-color 120ms}button:hover{background:var(--studio-raised);border-color:var(--studio-muted)}button.primary{background:var(--studio-accent);border-color:var(--studio-accent);color:white;font-weight:500}button.primary:hover{background:#b52b35;border-color:#b52b35}.settings{grid-template-columns:2fr 1fr 1.4fr 1fr;gap:24px;border-top:1px solid var(--studio-border);padding:24px 0 30px;margin:0}label{font-size:12px;color:var(--studio-muted)}select{color-scheme:dark}input[type=number]{font-family:var(--studio-mono)}.settings label>span{display:flex;align-items:center;gap:12px}.chords{gap:12px}.chord{position:relative;background:var(--studio-surface);border:1px solid var(--studio-border);border-radius:var(--studio-radius);padding:20px;min-height:280px;gap:20px;transition:border-color 120ms,background 120ms}.chord:nth-child(even){border-top-color:var(--studio-border)}.chord.active{border-color:var(--studio-playing);background:#18251f;outline:none}.chord.active:before{content:'';width:6px;height:6px;position:absolute;right:20px;top:24px;border-radius:50%;background:var(--studio-playing)}.degree{font:12px var(--studio-mono);color:var(--studio-muted)}.chord .name{font:46px/1.2 var(--studio-display);min-height:60px}.chord .name:hover{color:var(--studio-playing)}.keyboard{position:relative;height:66px;gap:3px;margin:0 0 2px;isolation:isolate}.keyboard i{display:block;flex:1;height:100%;background:#e4e5df;border:0;border-radius:0 0 2px 2px;box-shadow:inset 0 -3px #b6bab2}.keyboard i.on{background:var(--studio-playing);box-shadow:inset 0 -3px #519d7a}.keyboard i.black{position:absolute;top:0;z-index:1;width:9%;height:62%;background:#242628;border:1px solid #101112;box-shadow:0 2px 2px #101112;border-radius:0 0 2px 2px}.keyboard i.black.on{background:var(--studio-playing);border-color:#519d7a}.keyboard i:nth-child(2){left:9.8%}.keyboard i:nth-child(4){left:24.1%}.keyboard i:nth-child(7){left:52.7%}.keyboard i:nth-child(9){left:67%}.keyboard i:nth-child(11){left:81.3%}.lock{gap:8px}.lock input{width:16px;height:16px;accent-color:var(--studio-playing)}.lock:has(:checked){color:var(--studio-playing)}.transport{gap:12px;padding:24px 0;margin-top:8px;border-bottom:1px solid var(--studio-border)}#play{min-width:130px}.volume{margin-right:auto;padding:0 16px;gap:12px}.volume input{width:100px;accent-color:var(--studio-playing)}#status{color:var(--studio-playing);font-size:13px;margin:16px 0}.saved{margin-top:32px;border:0}.saved h2{margin-bottom:20px}#empty{padding:24px 0;border-top:1px solid var(--studio-border);color:var(--studio-muted);font-size:13px}#saved li{border-color:var(--studio-border)}#saved li button:first-child{font-family:var(--studio-mono);font-size:12px}footer{color:var(--studio-muted);border-top:1px solid var(--studio-border)}:where(button,a,input,select):focus-visible{outline:2px solid var(--studio-focus);outline-offset:4px}::selection{background:var(--studio-accent);color:white}@media(max-width:760px){header,main,footer{padding:20px}.heading{align-items:flex-start;flex-direction:column;gap:24px;margin-bottom:28px}h1{font-size:36px}main{padding-top:32px}.settings{grid-template-columns:1fr 1fr;gap:20px;padding-bottom:24px}.chords{grid-template-columns:1fr 1fr}.chord{min-height:244px;padding:16px;gap:14px}.chord .name{font-size:38px}.keyboard{height:56px}.volume{padding:0;margin-right:0;flex:1}.transport #copy,.transport #save{flex:1}.brand{font-size:30px}nav{gap:16px}footer{font-size:11px;gap:20px}}@media(max-width:360px){header{gap:12px}nav{gap:10px}.chord{padding:12px}.chord .name{font-size:34px}.volume input{width:70px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.greatest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;border-top:1px solid var(--studio-border);padding:24px 0 28px}.greatest[hidden],.keyboard[hidden],.lock[hidden]{display:none}.greatest label{display:flex;flex-direction:column;gap:8px}.greatest select{width:100%;font-size:14px;padding:10px}.greatest .formula{font:13px var(--studio-mono);color:var(--studio-playing);margin:0 0 8px}.greatest .feel{font:24px/1.3 var(--studio-display);margin:0 0 18px}.greatest .eyebrow{margin-bottom:8px}.greatest ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}.greatest li{font-size:12px;color:var(--studio-muted);border:1px solid var(--studio-border);border-radius:999px;padding:5px 11px}.capo{font:13px var(--studio-mono);color:var(--studio-muted);margin:0 0 16px}.capo strong{color:var(--studio-text);font-weight:500}.guitar{width:100%;max-width:128px;height:auto;align-self:center;overflow:visible}.guitar .string,.guitar .fret{stroke:#6b7274;stroke-width:1}.guitar .nut{stroke:var(--studio-text);stroke-width:4}.guitar .dot{fill:var(--studio-playing)}.guitar .open{fill:none;stroke:var(--studio-muted);stroke-width:1.4}.guitar text{fill:var(--studio-muted);font:11px var(--studio-mono)}.chord.active .guitar .dot{fill:#fff}.shape-label{font:11px var(--studio-mono);color:var(--studio-muted);text-align:center;margin-top:-8px}@media(max-width:760px){.greatest{grid-template-columns:1fr;gap:16px}.guitar{max-width:108px}.greatest .feel{font-size:20px}}