:root{color:#f7f2e8;background:#171922;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 18% 8%,rgba(255,209,102,.24),transparent 25rem),radial-gradient(circle at 84% 15%,rgba(76,201,240,.2),transparent 24rem),linear-gradient(135deg,#171922,#25202d 42%,#17242c)}button,select,input{font:inherit}button{color:inherit}.app-shell{width:min(1500px,100%);margin:0 auto;padding:clamp(1rem,3vw,2rem)}.app-shell[data-theme=high-contrast]{color:#fff}.hero{display:grid;grid-template-columns:1fr auto;gap:1.25rem;align-items:end;min-height:26vh;padding:clamp(1rem,4vw,2.5rem) 0 1.25rem}.eyebrow{display:inline-flex;gap:.45rem;align-items:center;margin:0 0 .45rem;color:#9ee7ff;font-size:.9rem;font-weight:750;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:.35rem;color:#fff;font-size:clamp(2.6rem,8vw,7rem);line-height:.92;letter-spacing:0}.lede{max-width:42rem;margin-bottom:0;color:#d9d6cd;font-size:clamp(1rem,2vw,1.22rem)}.hero-badge{display:grid;gap:.15rem;min-width:10rem;padding:1rem;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#0000002e;box-shadow:0 20px 70px #00000040}.hero-badge span{color:#ffd166;font-size:2.5rem;font-weight:900;line-height:1}.hero-badge strong{color:#fff;font-size:.95rem}.workspace{display:grid;grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);gap:1rem;align-items:start}.controls,.board-wrap,.builder-panel{border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#0e1016b8;box-shadow:0 18px 60px #00000038;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.controls{display:grid;gap:1rem;padding:1rem}.panel-title{display:flex;gap:.55rem;align-items:center}.panel-title h2{margin-bottom:0;font-size:1rem}label{display:grid;gap:.4rem;color:#d7d2c4;font-size:.88rem;font-weight:700}select{width:100%;min-height:2.75rem;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:.55rem .7rem;color:#fff;background:#232634}input{min-height:2.75rem;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:.55rem .7rem;color:#fff;background:#232634}.toggle{display:flex;gap:.65rem;align-items:center;min-height:2.75rem;border-radius:8px;padding:.7rem;background:#ffffff14}.toggle input{width:1.15rem;height:1.15rem;accent-color:#ffd166}.app-shell[data-theme=high-contrast] .toggle input{accent-color:#00ffff}.segmented-control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;min-width:0;margin:0;border:0;padding:0}.segmented-control legend{grid-column:1 / -1;margin-bottom:.4rem;color:#d7d2c4;font-size:.88rem;font-weight:700}.segmented-control label{position:relative;display:grid;place-items:center;min-height:2.55rem;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:.55rem;color:#fff;background:#ffffff14;text-align:center;cursor:pointer}.segmented-control input{position:absolute;inset:0;opacity:0;cursor:pointer}.segmented-control span{position:relative;font-size:.86rem;font-weight:850}.segmented-control label:has(input:checked){border-color:#ffd166e0;color:#141720;background:#ffd166}.spelling-control{grid-template-columns:repeat(3,minmax(0,1fr))}.app-shell[data-theme=high-contrast] .segmented-control label:has(input:checked){border-color:#fff;background:#0ff}.note-strip{display:grid;gap:.65rem;padding-top:.15rem}.strip-label{display:inline-flex;gap:.4rem;align-items:center;color:#9ee7ff;font-size:.86rem;font-weight:800}.chips{display:flex;flex-wrap:wrap;gap:.45rem}.chip{display:inline-grid;place-items:center;min-width:2.4rem;min-height:2.15rem;border:1px solid rgba(255,255,255,.24);border-radius:999px;color:var(--chip-text-color, #181a22);background:var(--chip-color, #ffd166);font-weight:900}.board-wrap{overflow-x:auto;padding:.9rem}.board-stage{width:max-content}.fret-numbers,.string-row,.fret-row{display:grid}.board-stage[data-orientation=horizontal] .fret-numbers,.board-stage[data-orientation=horizontal] .string-row{grid-template-columns:repeat(25,minmax(3rem,1fr))}.board-stage[data-orientation=horizontal] .fret-numbers{min-width:75rem;padding-left:0;color:#cac4b8;font-size:.78rem;font-weight:750;text-align:center}.board-stage[data-orientation=vertical]{display:grid;grid-template-columns:2.35rem minmax(18rem,28rem);align-items:stretch;width:min(100%,30.35rem)}.board-stage[data-orientation=vertical] .fret-numbers{display:grid;grid-template-rows:repeat(25,2.8rem);min-width:0;color:#cac4b8;font-size:.78rem;font-weight:750;text-align:center}.board-stage[data-orientation=vertical] .fret-numbers span{display:grid;place-items:center}.fretboard{min-width:75rem;overflow:hidden;border:3px solid #0d0f14;border-radius:8px;background:linear-gradient(90deg,rgba(17,19,26,.88) 0 4%,transparent 4%),linear-gradient(135deg,#5a3825,#936035 48%,#4f3020)}.board-stage[data-orientation=vertical] .fretboard{min-width:18rem;width:100%}.app-shell[data-theme=high-contrast] .fretboard{border-color:#fff;background:linear-gradient(90deg,#020203 0 4%,transparent 4%),linear-gradient(135deg,#1b1b1b,#343434 48%,#111)}.string-row{position:relative;min-height:4.35rem}.board-stage[data-orientation=horizontal] .string-row:after{content:"";position:absolute;top:50%;left:0;right:0;height:.16rem;transform:translateY(-50%);background:linear-gradient(180deg,#fff,#9c9c9c);box-shadow:0 1px 8px #00000059;pointer-events:none}.board-stage[data-orientation=horizontal] .string-row:nth-child(5):after,.board-stage[data-orientation=horizontal] .string-row:nth-child(6):after{height:.22rem}.fret-row{position:relative;grid-template-columns:repeat(6,minmax(3rem,1fr));min-height:2.8rem}.fret{position:relative;display:grid;place-items:center;min-height:4.35rem;border-top:0;border-bottom:0;border-left:0;border-right:2px solid rgba(245,238,220,.72);padding:0;color:inherit;background:transparent;cursor:pointer}.board-stage[data-orientation=vertical] .fret{min-height:2.8rem;border-right:1px solid rgba(245,238,220,.34);border-bottom:2px solid rgba(245,238,220,.72)}.fret:focus-visible{z-index:4;outline:3px solid #9ee7ff;outline-offset:-3px}.open-fret{background:linear-gradient(90deg,#59a6ff2e,#14171f70),linear-gradient(135deg,#2a2d37,#161820);border-right:0}.fret[data-nut=true]:after{content:"";position:absolute;top:0;right:-.35rem;bottom:0;z-index:2;width:.7rem;border-radius:999px;background:linear-gradient(90deg,#deecff,#59a6ff 45%,#1f5fb8);box-shadow:0 0 0 1px #0000008c,0 0 1.2rem #59a6ff8c}.board-stage[data-orientation=vertical] .fret[data-nut=true]:after{top:auto;right:0;bottom:-.35rem;left:0;width:auto;height:.7rem;background:linear-gradient(180deg,#deecff,#59a6ff 45%,#1f5fb8)}.app-shell[data-theme=high-contrast] .open-fret{background:linear-gradient(90deg,#ffffff21,#000c),#050505}.app-shell[data-theme=high-contrast] .fret[data-nut=true]:after{background:#fff;box-shadow:0 0 0 2px #000,0 0 .9rem #0ff}.board-stage[data-visual=minimal] .fretboard{border-color:#ffffff38;background:#12141b}.board-stage[data-visual=minimal] .open-fret{background:#171d2a}.board-stage[data-visual=minimal] .string-row:after{display:none}.board-stage[data-visual=minimal] .fret{border-color:#ffffff29}.board-stage[data-visual=minimal] .fret[data-marker=true]:before,.board-stage[data-visual=minimal] .fret[data-nut=true]:after{opacity:.8}.board-stage[data-visual=minimal] .note{border-color:#ffffff1a;background:transparent;box-shadow:none}.board-stage[data-visual=minimal] .note.active{background:var(--note-color, #ffd166);box-shadow:none}.fret[data-marker=true]:before{content:"";position:absolute;inset:auto 50% .2rem auto;width:.55rem;height:.55rem;border-radius:50%;transform:translate(50%);background:#ffffff6b}.fret[data-saved=true] .note{opacity:.9;box-shadow:0 0 0 .16rem #11131adb,0 0 0 .34rem #ffffffe0,0 0 1.2rem #ffffff5c}.note{position:relative;z-index:1;display:grid;place-items:center;width:2.45rem;min-height:2.45rem;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:#ffffffb8;background:#12141b7a;font-size:.85rem;font-weight:850}.note.active{color:var(--note-text-color, #11131a);background:var(--note-color, #ffd166);border-color:#ffffffbf;box-shadow:0 0 0 .22rem #ffffff1f,0 0 1.1rem var(--note-color, #ffd166);transform:scale(1.05)}.app-shell[data-theme=high-contrast] .note{border-color:#ffffff4d;color:#ffffffdb;background:#000}.app-shell[data-theme=high-contrast] .note.active{color:var(--note-text-color, #11131a);background:var(--note-color, #ffffff);border-color:#fff;box-shadow:0 0 0 .18rem #000,0 0 0 .34rem #fff,0 0 1.2rem var(--note-color, #ffffff)}.builder-panel{display:grid;gap:1rem;grid-column:2;padding:1rem}.builder-header{display:flex;gap:1rem;align-items:start;justify-content:space-between}.eyebrow.compact{margin-bottom:.25rem;font-size:.78rem}.builder-header h2{margin-bottom:0;font-size:1.35rem}.builder-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.builder-actions button{display:inline-flex;gap:.45rem;align-items:center;min-height:2.55rem;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:.55rem .75rem;color:#fff;background:#ffffff17;font-weight:850;cursor:pointer}.builder-actions button:first-child{color:#141720;background:#ffd166}.builder-actions button:disabled{cursor:not-allowed;opacity:.45}.builder-mode{max-width:24rem}.builder-empty{min-height:8rem;display:grid;place-items:center;border:1px dashed rgba(255,255,255,.2);border-radius:8px;color:#d7d2c4;text-align:center}.selected-note-tools{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:space-between;border:1px solid rgba(255,209,102,.48);border-radius:8px;padding:.65rem .75rem;color:#fff4cc;background:#ffd1661a;font-weight:800}.selected-note-tools span{flex:1 1 16rem}.selected-note-tools label{flex:0 1 8rem;gap:.25rem;color:#fff4cc;font-size:.72rem;text-transform:uppercase}.selected-note-tools select,.selected-note-tools input{min-height:2.25rem;padding:.35rem .5rem}.selected-note-tools button{display:inline-flex;gap:.4rem;align-items:center;min-height:2.25rem;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:.45rem .65rem;color:#fff;background:#ffffff17;font-weight:850;cursor:pointer}.chart-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,13rem));gap:1.2rem;align-items:start}.chart-card,.tab-group{border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#ffffff0f;padding:.8rem}.chart-card{background:#f8fafc}.section-name{display:grid;gap:.2rem;margin-bottom:.45rem}.section-name span{color:#6b7280;font-size:.62rem;font-weight:850;text-transform:uppercase}.section-name input{width:100%;min-height:2.4rem;border:1px solid transparent;border-radius:6px;padding:.1rem .35rem;color:#11131a;background:transparent;font-size:2rem;font-weight:500;line-height:1;text-align:center}.section-name input:focus{border-color:#0072b2;outline:none;background:#fff}.tab-section-name span{color:#9ee7ff}.tab-section-name input{color:#fff;font-size:1.35rem;font-weight:850;text-align:left}.tab-section-name input:focus{color:#11131a}.chord-diagram{display:block;width:100%;height:auto}.chord-diagram line{stroke:#111;stroke-width:1.8}.chord-diagram .nut-line{stroke-width:6}.chord-diagram circle{fill:#111}.chart-note,.chart-note-status{cursor:pointer}.chart-note:focus,.chart-note-status:focus{outline:none}.chart-note:hover circle,.chart-note:focus circle,.chart-note.selected circle{fill:#0072b2}.chart-note.selected circle{stroke:#ffd166;stroke-width:4}.chart-note-status.selected,.chart-note-status:hover,.chart-note-status:focus{fill:#0072b2;stroke:#ffd166;stroke-width:.7}.chart-status,.chart-fret-number,.chart-start-fret{fill:#111;font-weight:800;text-anchor:middle}.chart-status{font-size:1.18rem}.chart-fret-number{font-size:.9rem;font-style:italic}.chart-tuning{fill:#6b7280;font-size:.65rem;font-weight:800;text-anchor:middle}.tab-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:.8rem}.tab-group{min-width:0}.tab-group h3{text-align:left}.tab-line{display:grid;grid-template-columns:1.5rem 1fr;gap:.45rem;align-items:center;color:#e8e3d8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9rem}.tab-line div{display:flex;min-height:1.4rem;border-top:1px solid rgba(255,255,255,.45)}.tab-line b,.tab-note{display:inline-grid;place-items:center;min-width:1.85rem;transform:translateY(-50%);color:#fff}.tab-note{height:1.4rem;border:0;border-radius:6px;padding:0;background:transparent;font:inherit;font-weight:850;cursor:pointer}.tab-note:hover,.tab-note:focus,.tab-note.selected{color:#11131a;background:#ffd166;outline:none}@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}.hero-badge{width:min(100%,18rem)}.workspace{grid-template-columns:1fr}.builder-panel{grid-column:1}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-title,.segmented-control,.note-strip{grid-column:1 / -1}}@media(max-width:620px){.app-shell{padding:.65rem}.controls{grid-template-columns:1fr}h1{font-size:clamp(2.6rem,18vw,4.6rem)}.board-stage[data-orientation=horizontal] .fret-numbers,.board-stage[data-orientation=horizontal] .fretboard{min-width:62.5rem}.board-stage[data-orientation=horizontal] .fret-numbers,.board-stage[data-orientation=horizontal] .string-row{grid-template-columns:repeat(25,2.5rem)}.board-stage[data-orientation=vertical]{grid-template-columns:2rem minmax(14.25rem,1fr);width:100%}.board-stage[data-orientation=vertical] .fret-numbers{grid-template-rows:repeat(25,2.35rem)}.fret-row{grid-template-columns:repeat(6,minmax(2.05rem,1fr));min-height:2.35rem}.board-stage[data-orientation=vertical] .fret{min-height:2.35rem}.board-stage[data-orientation=vertical] .note{width:1.85rem;min-height:1.85rem;font-size:.7rem}.board-wrap{padding:.55rem}.chips{gap:.35rem}.chip{min-width:2.2rem;min-height:2rem;font-size:.88rem}.builder-header{display:grid}.builder-actions{justify-content:stretch}.builder-actions button{flex:1;justify-content:center}}