:root{--bg:oklch(16% .04 280);--panel:oklch(21% .05 285/.85);--panel-solid:oklch(21% .05 285);--input:oklch(13% .035 280);--line:oklch(34% .07 290);--line-soft:oklch(30% .06 290);--raised:oklch(28% .06 290);--ink:oklch(95% .01 280);--ink-soft:oklch(80% .03 280);--muted:oklch(72% .03 280);--teal:oklch(82% .15 185);--teal-ink:oklch(86% .14 185);--teal-bg:oklch(30% .08 195/.6);--magenta:oklch(66% .26 320);--pink:oklch(78% .2 330);--pink-strong:oklch(75% .24 330);--pink-bg:oklch(32% .14 330/.55);--on-grad:oklch(14% .04 280);--grad:linear-gradient(120deg, var(--teal), var(--magenta));--font-display:"Space Grotesk", system-ui, sans-serif;--font-ui:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:radial-gradient(900px 600px at 85% -10%, oklch(35% .16 320/.45), transparent 70%), radial-gradient(800px 600px at -10% 30%, oklch(40% .12 200/.25), transparent 70%), var(--bg);min-height:100vh;color:var(--ink);font:15px/1.5 var(--font-ui);-webkit-font-smoothing:antialiased;background-attachment:fixed;margin:0}h1,h2,h3,p{margin:0}button{font:inherit;color:inherit;cursor:pointer}code{font-family:var(--font-mono);font-size:.9em}:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:28px}.top{justify-content:space-between;align-items:center;gap:16px;padding-block:22px;display:flex}.brand{color:var(--ink);font:400 28px/1 var(--font-display);letter-spacing:-.01em;align-items:center;gap:12px;text-decoration:none;display:flex}.logo{background:var(--grad);border-radius:9px;width:28px;height:28px;transform:rotate(45deg);box-shadow:0 0 18px oklch(66% .26 320/.6)}.top-note{color:var(--muted);font-size:14px}.hero{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;padding-block:40px 36px;display:flex}.hero-text{max-width:720px}.hero h1{font:400 clamp(44px, 6.4vw, 84px)/.98 var(--font-display);letter-spacing:-.02em;text-wrap:balance}.hero h1 em{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-style:normal}.hero p{max-width:560px;color:var(--ink-soft);text-wrap:pretty;margin-top:22px;font-size:19px;line-height:1.5}.hero-chips{font:17px var(--font-mono);align-items:center;gap:6px;padding-bottom:8px;display:flex}.hero-arrow{color:var(--muted);margin-inline:8px}.chip{border-radius:8px;padding:8px 12px}.chip.hard{background:var(--pink-bg);color:var(--pink)}.chip.easy{background:var(--teal-bg);color:var(--teal-ink)}.layout{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));align-items:start;gap:24px;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px}.editor{flex-direction:column;gap:20px;padding:24px;display:flex}.editor-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.editor-head h2{font:400 30px/1.1 var(--font-display)}.editor-links{white-space:nowrap;gap:16px;font-size:14px;display:flex}.link{color:var(--muted);background:0 0;border:0;padding:0}.link:hover{color:var(--ink)}.link-accent{color:var(--pink);font-weight:500}.link-accent:hover{color:var(--teal)}textarea{resize:vertical;border:1px solid var(--line);background:var(--input);width:100%;min-height:440px;color:var(--ink);caret-color:var(--teal);font:14px/1.7 var(--font-mono);white-space:pre;overflow-wrap:normal;tab-size:4;border-radius:14px;padding:18px 20px;transition:border-color .15s,box-shadow .15s;overflow-x:auto}textarea::placeholder{color:var(--muted);opacity:.7}textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px oklch(82% .15 185/.18)}.hint{color:var(--muted);margin-top:-8px;font-size:13px;line-height:1.5}.hint code{background:var(--raised);border-radius:5px;padding:1px 6px}.setting{border-top:1px solid var(--line-soft);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:18px;display:flex}.setting-label{font-weight:500}.segmented{background:var(--raised);border-radius:10px;gap:2px;padding:3px;display:flex}.segmented button{color:oklch(75% .03 280);background:0 0;border:0;border-radius:8px;padding:6px 14px;font-size:14px}.segmented button:hover{color:var(--ink)}.segmented button[aria-checked=true]{background:var(--grad);color:var(--on-grad);font-weight:600}.switch{cursor:pointer;align-items:flex-start;gap:14px;margin-top:-4px;display:flex}.switch input{opacity:0;pointer-events:none;position:absolute}.switch-track{background:oklch(32% .05 285);border-radius:12px;flex:none;width:40px;height:24px;margin-top:1px;transition:background .2s;position:relative}.switch-track:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:left .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #00000040}.switch input:checked+.switch-track{background:var(--grad);box-shadow:0 0 14px oklch(66% .26 320/.35)}.switch input:checked+.switch-track:after{left:19px}.switch input:focus-visible+.switch-track{outline:2px solid var(--teal);outline-offset:2px}.switch-text{flex-direction:column;gap:3px;display:flex}.switch-label{font-weight:500}.switch-help{color:var(--muted);text-wrap:pretty;font-size:13px;line-height:1.45}.results{flex-direction:column;gap:16px;min-width:0;display:flex}#result-body{flex-direction:column;gap:16px;display:flex}#result-body:empty{display:none}.summary{background:linear-gradient(140deg,oklch(30% .12 300),oklch(22% .08 270));border:1px solid oklch(62% .22 320/.55);border-radius:20px;flex-direction:column;gap:18px;padding:26px 26px 22px;display:flex;box-shadow:0 0 40px oklch(62% .24 320/.25),inset 0 1px oklch(100% 0 0/.08)}.summary-empty-title{font:400 32px/1.15 var(--font-display)}.summary-empty-text{color:oklch(80% .04 290);font-size:15px}.summary-top{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;display:flex}.summary-label{letter-spacing:.08em;text-transform:uppercase;color:oklch(80% .04 290);font-size:13px}.summary-keys{font:400 64px/1 var(--font-display);align-items:baseline;gap:14px;margin-top:6px;display:flex}.summary-keys .from{color:var(--pink-strong)}.summary-keys .to{color:var(--teal-ink)}.summary-keys .arrow{color:oklch(65% .05 290);font-size:36px}.summary-keys .same{font-size:15px;font-family:var(--font-ui);color:oklch(80% .04 290)}.stats{gap:22px;display:flex}.stat{flex-direction:column;gap:2px;display:flex}.stat strong{font:400 40px/1 var(--font-display)}.stat.before strong{color:var(--pink-strong)}.stat.after strong{color:var(--teal-ink)}.stat span{color:oklch(80% .04 290);font-size:12px}.summary-lines{border-top:1px solid oklch(45% .1 300);flex-direction:column;gap:6px;padding-top:14px;font-size:15px;line-height:1.45;display:flex}.summary-lines .soft{color:oklch(80% .04 290)}.swaps{flex-wrap:wrap;gap:6px;margin-top:4px;display:flex}.swaps span{font:13px/1 var(--font-mono);color:var(--ink-soft);background:oklch(18% .04 285/.6);border-radius:6px;padding:5px 7px}.swaps s{color:var(--pink)}.swaps b{color:var(--teal-ink);font-weight:600}.alert{background:var(--pink-bg);color:var(--pink);border:1px solid oklch(66% .26 320/.5);border-radius:14px;padding:14px 16px;font-weight:500}.choices-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;display:flex}.choices-head h3{font:400 22px/1.1 var(--font-display)}.choices-head span{color:var(--muted);white-space:nowrap;font-size:12.5px}.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.choice{text-align:left;border:1.5px solid var(--line);background:var(--panel);min-width:0;color:var(--ink);border-radius:16px;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 14px 13px;transition:border-color .15s,box-shadow .15s,transform .12s;display:flex;position:relative}.choice:hover{border-color:oklch(55% .15 320);transform:translateY(-1px)}.choice.selected{background:linear-gradient(160deg, oklch(29% .1 305), oklch(21% .06 280)) padding-box, var(--grad) border-box;border-color:#0000;box-shadow:0 0 28px oklch(66% .26 320/.35),inset 0 1px oklch(100% 0 0/.06)}.choice-top{align-items:center;min-height:22px;padding-right:24px;display:flex}.choice-role{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11.5px;font-weight:600}.choice-badge{color:var(--pink);white-space:nowrap;background:oklch(30% .13 330);border:1px solid oklch(66% .26 320/.6);border-radius:99px;padding:5px 9px;font-size:11px;font-weight:700;line-height:1;position:absolute;top:-11px;left:12px;box-shadow:0 0 14px oklch(66% .26 320/.35)}.choice-key{font:400 34px/1 var(--font-display);letter-spacing:-.01em;align-items:baseline;gap:6px;margin-top:2px;display:flex}.choice-key small{font:500 13px var(--font-ui);color:var(--muted);letter-spacing:0}.choice.selected .choice-key{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text}.choice.selected .choice-key small{-webkit-text-fill-color:var(--ink-soft)}.choice-sound{color:var(--ink-soft);font-size:13px}.choice-meta{color:var(--pink);font-size:12px}.choice-meta.clean{color:var(--teal-ink)}.choice-check{background:var(--grad);opacity:0;border-radius:50%;place-items:center;width:22px;height:22px;transition:opacity .15s,transform .15s;display:grid;position:absolute;top:12px;right:12px;transform:scale(.6)}.choice-check svg{fill:none;width:14px;height:14px;stroke:var(--on-grad);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}.choice.selected .choice-check{opacity:1;transform:none}.sheet-panel{min-width:0;padding:26px 28px}.sheet-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;margin-bottom:18px;display:flex}.sheet-head h3{font:400 26px/1.1 var(--font-display)}.sheet-tools{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.legend{color:var(--muted);gap:14px;font-size:12px;display:flex}.legend span{align-items:center;gap:6px;display:flex}.legend i{border-radius:3px;width:10px;height:10px}.legend .easy{background:var(--teal)}.legend .hard{background:oklch(70% .25 330)}.tool-group{gap:4px;display:flex}.tool{border:1px solid var(--line);color:var(--ink-soft);background:0 0;border-radius:8px;padding:4px 9px;font-size:12px}.tool:hover{border-color:var(--teal);color:var(--ink)}.tool.done{border-color:var(--teal);color:var(--teal-ink)}.sheet{--sheet-size:15px;font:400 var(--sheet-size)/1.65 var(--font-mono);overflow-x:auto}.ln{white-space:pre;min-height:1.65em}.ln.blank{min-height:.9em}.chord-line{font-weight:600}.chord{color:var(--teal-ink);background:var(--teal-bg);cursor:default;border-radius:4px;outline:none;margin-inline:-3px;padding:1px 3px}.chord.hard{color:var(--pink);background:var(--pink-bg)}.chord.sub{text-underline-offset:4px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:2px}.chord.approx{text-decoration-style:dashed}.chord:hover,.chord:focus-visible{box-shadow:0 0 12px oklch(84% .15 185/.45)}.chord.hard:hover{box-shadow:0 0 12px oklch(70% .25 330/.45)}.ln.section{font:600 12px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-height:0;margin:14px 0 6px}.ln.section:first-child{margin-top:0}.sheet-note{color:var(--muted);margin-top:18px;font-size:12.5px}.block{padding-top:48px}.block-title{font:400 34px/1.1 var(--font-display);margin-bottom:18px}.chords-panel{padding:22px 24px 24px}.chords-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;display:flex}.chords-head h3{font:400 22px/1.1 var(--font-display)}.chords-head span{color:var(--muted);white-space:nowrap;font-size:12.5px}.diagrams{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;display:grid}.chord-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;flex-direction:column;align-items:center;gap:10px;margin:0;padding:12px 8px 10px;transition:border-color .15s,box-shadow .15s;display:flex}.chord-card figcaption{font:600 17px/1 var(--font-mono);color:var(--teal-ink)}.chord-card.hard figcaption{color:var(--pink)}.chord-card.lit{border-color:var(--teal);box-shadow:0 0 22px oklch(84% .15 185/.3)}.chord-tag{color:var(--muted);text-align:center;font-size:11.5px;line-height:1.35}.chord-card.sub .chord-tag{color:var(--pink)}.no-diagram{height:86px;color:var(--muted);place-items:center;font-size:12px;display:grid}.diagram{color:oklch(78% .03 280);width:72px;height:auto;overflow:visible}.diagram .fret{stroke:oklch(45% .05 285);stroke-width:1px}.diagram .string{stroke:oklch(78% .03 280);stroke-width:1.1px}.diagram .nut{fill:oklch(90% .02 280)}.diagram .dot{fill:oklch(84% .15 185);filter:drop-shadow(0 0 3px oklch(84% .15 185))}.chord-card.hard .diagram .dot{fill:var(--pink);filter:drop-shadow(0 0 3px oklch(70% .25 330))}.diagram .open{fill:none;stroke:var(--muted);stroke-width:1.2px}.diagram .mute{font:600 10px var(--font-ui);fill:var(--muted);text-anchor:middle}.diagram .base{font:600 9px var(--font-ui);fill:var(--muted)}.popover{z-index:10;background:var(--panel-solid);border:1px solid var(--line);pointer-events:none;border-radius:14px;justify-items:center;gap:6px;width:116px;padding:10px 10px 8px;display:grid;position:absolute;box-shadow:0 12px 32px #00000073,0 0 24px oklch(84% .15 185/.2)}.popover[hidden]{display:none}.popover strong{font:600 15px var(--font-mono);color:var(--teal-ink)}.results{position:relative}.share{border:1px solid var(--line);background:linear-gradient(160deg,oklch(22% .06 290/.9),oklch(18% .045 280/.9));border-radius:22px;flex-direction:column;gap:20px;padding:30px;display:flex}.share-intro .block-title{margin-bottom:6px}.share-intro p{color:var(--muted);max-width:620px;font-size:14.5px}.share-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.field{flex-direction:column;gap:7px;display:flex}.field-label{color:var(--ink-soft);font-size:13px;font-weight:600}.field-label em{color:var(--muted);margin-left:6px;font-size:11.5px;font-style:normal;font-weight:500}.field input{border:1px solid var(--line);background:var(--input);width:100%;color:var(--ink);caret-color:var(--teal);font:16px var(--font-ui);border-radius:12px;padding:13px 15px;transition:border-color .15s,box-shadow .15s}.field input::placeholder{color:oklch(55% .03 280)}.field input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px oklch(82% .15 185/.18)}.field input[aria-invalid=true]{border-color:var(--pink);box-shadow:0 0 0 3px oklch(66% .26 320/.2)}.field-error{color:var(--pink);margin-top:-8px;font-size:13px}.share-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px;display:grid}.share-btn{text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:14px;align-items:flex-start;gap:13px;padding:15px 16px;transition:border-color .15s,box-shadow .15s,transform .12s;display:flex}.share-btn:hover{border-color:oklch(70% .25 330);transform:translateY(-1px);box-shadow:0 0 24px oklch(66% .26 320/.3)}.share-btn[hidden]{display:none}.share-icon{background:var(--teal-bg);width:38px;height:38px;color:var(--teal-ink);border-radius:11px;flex:none;place-items:center;display:grid}.share-icon.pink{background:var(--pink-bg);color:var(--pink)}.share-icon.green{color:oklch(85% .17 155);background:oklch(32% .09 155/.6)}.share-icon svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.share-text{flex-direction:column;gap:3px;display:flex}.share-text strong{font-size:15px;font-weight:600}.share-text small{color:var(--muted);font-size:12.5px;line-height:1.4}.share-btn[aria-busy=true]{opacity:.7;cursor:progress}.share-status{color:var(--teal-ink);font-size:14px}.share-status.error{color:var(--pink)}.foot{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;margin-top:72px;padding-block:28px 40px;font-size:13px;display:flex;position:relative}.foot:before{content:"";background:var(--grad);opacity:.9;height:1px;position:absolute;top:0;left:28px;right:28px}.foot-brand{align-items:center;gap:14px;display:flex}.foot-brand div{flex-direction:column;gap:2px;display:flex}.foot-brand strong{font:400 18px/1.1 var(--font-display);color:var(--ink)}.logo-small{border-radius:6px;width:20px;height:20px;box-shadow:0 0 12px oklch(66% .26 320/.5)}.foot-meta{text-align:right;flex-direction:column;align-items:flex-end;gap:4px;display:flex}@media (width<=600px){.wrap{padding-inline:16px}.top-note{display:none}.hero{padding-block:24px 28px}.hero p{font-size:17px}.editor,.sheet-panel{padding:18px}.editor-head h2{white-space:nowrap;font-size:26px}.choice-grid{grid-template-columns:1fr;row-gap:18px}.choice{grid-template-columns:auto 1fr;grid-template-areas:"key top""key sound""key meta";align-items:center;gap:3px 16px;display:grid}.choice-top{grid-area:top}.choice-key{flex-direction:column;grid-area:key;align-items:flex-start;gap:4px;min-width:64px;margin:0}.choice-sound{grid-area:sound}.choice-meta{grid-area:meta}textarea{min-height:300px}.summary{padding:20px}.summary-keys{font-size:52px}.block-title{font-size:28px}.share{padding:20px}.share-fields{grid-template-columns:1fr}.foot:before{left:16px;right:16px}.foot-meta{text-align:left;align-items:flex-start}}@media print{body{color:#000;background:#fff}.top,.hero,.editor,.summary,.choices,.sheet-tools,.sheet-note,.popover,#share-block,.foot,.alert{display:none!important}.wrap{max-width:none;padding:0}.layout{display:block}.panel{background:#fff;border:0}.sheet-panel{padding:0}.sheet-head h3{font-size:16px}.sheet{padding-left:3px;overflow:visible;--sheet-size:12.5px!important}.chord,.chord.hard{color:#000;box-shadow:none;background:0 0}.chords-panel{break-inside:avoid;padding:0 0 16px}.chords-head h3{font-size:16px}.chord-card{background:#fff;border-color:#bbb}.chord-card figcaption,.chord-card.hard figcaption,.diagram{color:#000}.diagram .dot,.chord-card.hard .diagram .dot{fill:#000;filter:none}.diagram .string,.diagram .open{stroke:#000}.diagram .nut{fill:#000}}