*{box-sizing:border-box}:root{color-scheme:light;--ink: #192d31;--muted: #5b6c71;--accent: #087c69;--accent-dark: #056353;--line: #dce4e6;--soft: #edf5f2;--surface: #ffffff;--page: #f5f7f8}body{margin:0;background:var(--page);color:var(--ink);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,a,summary{-webkit-tap-highlight-color:transparent}button,select,input{font:inherit}button,summary{cursor:pointer}button{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #c77818;outline-offset:4px}a{color:var(--accent-dark)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.top{max-width:1200px;height:94px;padding:0 40px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;justify-self:start;color:var(--ink);font-size:25px;font-weight:760;letter-spacing:-1px;text-decoration:none}.brand-icon{width:34px;margin-right:10px;border-radius:10px;background:var(--accent);color:#fff;font-size:22px;font-weight:500;line-height:34px;text-align:center}.brand-dot{color:var(--accent)}.site-nav{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:650}.site-nav a{padding:8px 2px;color:var(--muted);text-decoration:none}.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--accent-dark)}.site-nav a[aria-current=page]{box-shadow:inset 0 -2px var(--accent)}.tuning{justify-self:end;color:var(--muted);font-size:13px}.tuning b{margin-left:12px;font-weight:600;letter-spacing:3px}main{max-width:1200px;padding:38px 40px 20px;margin:auto}.eyebrow{color:var(--accent);font-size:12px;font-weight:750;letter-spacing:1.5px}h1{margin:11px 0 10px;font-size:clamp(30px,4vw,43px);font-weight:720;letter-spacing:-1.7px;line-height:1.15}.intro{margin-bottom:30px}.intro p{margin:0;color:var(--muted);font-size:17px}.workspace{display:grid;grid-template-columns:320px 1fr;align-items:start;gap:36px}.controls{padding-top:6px}fieldset{padding:0;margin:0 0 25px;border:0}legend{display:flex;align-items:center;gap:9px;padding:0;margin-bottom:10px;font-size:15px;font-weight:650}.step{width:22px;height:22px;display:inline-grid;flex:0 0 auto;place-items:center;border:1px solid #cbd7d7;border-radius:50%;color:var(--muted);font-size:12px}.notation-row{min-height:32px;margin:0 0 10px 31px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.segmented{display:inline-flex;padding:2px;border:1px solid var(--line);border-radius:8px;background:#e9efef}.segmented button{min-height:30px;padding:4px 9px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:11px;font-weight:650}.segmented button.selected{background:#fff;color:var(--accent-dark);box-shadow:0 1px 3px #102c3418}.root-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.root-grid button{min-width:0;height:47px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:17px;font-weight:650}.root-grid button.accidental{grid-row:2;color:var(--muted);font-size:14px}.root-grid button.selected,.quality-grid button.selected{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 3px 6px #087c6918}.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quality-grid button{min-height:55px;padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;text-align:left}.quality-grid small{float:right;margin-top:2px;opacity:.7;font-size:13px;font-weight:400}.quick{padding-top:19px;border-top:1px solid var(--line)}.quick h2{margin:0 0 11px;color:var(--muted);font-size:13px;font-weight:550}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.quick-grid button{min-height:42px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink);font-size:15px;font-weight:600}.quick-grid button.selected{border-color:var(--accent);background:#e6f1ed;color:var(--accent-dark)}.tip{display:flex;align-items:center;gap:13px;margin-top:23px;color:var(--muted);font-size:13px}.tip>span{width:34px;height:34px;display:grid;flex:0 0 auto;place-items:center;border-radius:50%;background:#e2ede9;color:var(--accent);font-size:21px}.tip p{margin:0}.tip button,.hand-toggle,.text-button{padding:0;border:0;background:none;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}.tip button{font-size:13px;text-align:left}.result{min-width:0;overflow:hidden;border:1px solid #d5dfe0;border-radius:20px;background:#fff;box-shadow:0 10px 28px #102c3410}.result-heading{padding:23px 28px 0;display:flex;align-items:center;justify-content:space-between}.result-heading .eyebrow{color:var(--muted);font-size:11px;letter-spacing:1.6px}#chord-name,#practice-chord-name{margin:5px 0 4px;font-size:62px;font-weight:650;letter-spacing:-3px;line-height:1.1}.shape-tag{padding:5px 11px;border-radius:20px;background:#eafaef;color:#267646;font-size:12px;white-space:nowrap}.shape-tag.barre{background:#fff3df;color:#835611}.diagram-layout{padding:0 28px 22px;display:grid;grid-template-columns:minmax(200px,1fr) minmax(180px,.88fr);align-items:center;gap:22px}.diagram-wrap{min-width:0;text-align:center}#diagram svg,#practice-diagram svg{width:100%;height:auto;max-height:320px;display:block}.orientation{margin:0 12px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.hand-toggle{min-height:44px;margin-top:7px;font-size:12px}.instructions{align-self:center;text-align:left}.note-row{margin-bottom:17px;padding-bottom:13px;display:flex;flex-direction:column;gap:3px;border-bottom:1px solid var(--line)}.label{color:var(--muted);font-size:10px;font-weight:650;letter-spacing:1.5px}.note-row strong{font-size:17px;font-weight:600;letter-spacing:2px}.instructions h3{margin:0 0 10px;font-size:14px;font-weight:650}#finger-steps,#practice-finger-steps{padding:0;margin:0;display:grid;gap:9px;list-style:none}#finger-steps li,#practice-finger-steps li{display:flex;gap:8px;color:#43585b;font-size:14px;line-height:1.55}.finger{width:20px;height:20px;margin-top:1px;display:grid;flex:0 0 auto;place-items:center;border-radius:50%;background:var(--soft);color:var(--accent);font-size:11px;font-weight:700}.strum-tip{margin:17px 0 0;color:var(--accent-dark);font-size:13px;font-weight:600}.sound-row{padding:17px 28px;display:flex;align-items:center;gap:14px;border-top:1px solid #e6edeb;background:#f9fbfa}.play,.primary-action{min-height:46px;padding:12px 18px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:650;white-space:nowrap}.play:disabled,.primary-action:disabled,.text-button:disabled{cursor:default;opacity:.7}#sound-note{color:var(--muted);font-size:11px}button:hover{filter:brightness(.96)}.help{margin:28px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}summary{padding:19px 0;display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:550;list-style:none}summary::-webkit-details-marker{display:none}summary span{color:var(--accent);font-size:21px;line-height:1}.help[open] summary span{transform:rotate(45deg)}.help-grid{padding:0 0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.help h3{margin:0 0 6px;font-size:14px}.help p{margin:0;color:var(--muted);font-size:14px}footer{padding-top:22px;display:flex;justify-content:space-between;color:#596c70;font-size:12px}footer a{color:inherit}.nojs{padding:20px}.practice-main{max-width:1000px}.practice-intro{max-width:720px}.practice-setup{padding:28px;border:1px solid #d5dfe0;border-radius:20px;background:#fff;box-shadow:0 10px 28px #102c3410}.setup-copy{margin-bottom:20px;display:flex;align-items:flex-start;gap:11px}.setup-copy .step{margin-top:2px}.setup-copy h2{margin:0 0 3px;font-size:18px}.setup-copy p{margin:0;color:var(--muted);font-size:13px}.progression-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.progression-grid button{min-height:110px;padding:15px;display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);text-align:left}.progression-grid button.selected{border-color:var(--accent);background:var(--soft);box-shadow:0 0 0 1px var(--accent)}.progression-grid strong{margin-bottom:5px;font-size:15px}.progression-grid span{color:var(--accent-dark);font-size:16px;font-weight:700;letter-spacing:1px}.progression-grid small{margin-top:auto;color:var(--muted);font-size:12px}.practice-options{margin:24px 0;display:grid;grid-template-columns:minmax(220px,1fr) 180px 190px;align-items:end;gap:24px}.practice-options label{margin-bottom:8px;display:flex;justify-content:space-between;color:var(--ink);font-size:13px;font-weight:650}.practice-options output{color:var(--accent-dark)}.practice-options input[type=range]{width:100%;accent-color:var(--accent)}.practice-options select{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}.metronome-option{min-height:64px;padding:9px 12px;display:flex!important;align-items:center;justify-content:flex-start!important;gap:10px;border:1px solid var(--line);border-radius:9px;background:#f9fbfa;cursor:pointer}.metronome-option input{width:20px;height:20px;margin:0;flex:0 0 auto;accent-color:var(--accent)}.metronome-option span{display:flex;flex-direction:column}.metronome-option strong{font-size:13px}.metronome-option small{color:var(--muted);font-size:11px;font-weight:450}.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.practice-start-row .primary-action{min-width:170px}.practice-start-row,.session-actions{display:flex;align-items:center;gap:18px}.keyboard-tip{margin:10px 0 0;color:var(--muted);font-size:11px}.practice-session{max-width:820px;margin:auto}.session-topline{margin-bottom:12px;display:flex;align-items:flex-end;justify-content:space-between}.session-topline .text-button{min-height:40px;font-size:12px}.progress-dots{margin-top:7px;display:flex;gap:7px}.progress-dots span{width:22px;height:5px;overflow:hidden;border-radius:6px;background:#cbd8d7;color:transparent;font-size:0}.progress-dots span.active{background:var(--accent)}.practice-count{min-width:74px;display:flex;flex-direction:column;align-items:flex-end}.practice-count span{color:var(--muted);font-size:9px;font-weight:700;letter-spacing:1.5px}.practice-count strong{color:var(--accent-dark);font-size:18px}.practice-count.pulse strong{animation:beat-pulse .16s ease-out}@keyframes beat-pulse{50%{transform:scale(1.16)}}.next-chord{margin:20px 0 0;color:var(--muted);font-size:13px}.next-chord strong{color:var(--ink);font-size:18px}.practice-controls{padding:16px 28px;display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid #e6edeb;background:#f9fbfa}.secondary-action{width:46px;height:46px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:20px}.practice-controls .primary-action{min-width:110px}.preview-button,.metronome-button{min-height:44px;margin-left:8px;font-size:12px}.builder-main{max-width:1000px}.builder-intro{max-width:760px}.builder-panel{margin-bottom:18px;padding:26px 28px;border:1px solid #d5dfe0;border-radius:20px;background:#fff;box-shadow:0 10px 28px #102c3410}.builder-section-heading{margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.builder-section-heading>div{display:flex;align-items:center;gap:10px}.builder-section-heading h2{margin:0;font-size:18px}.builder-section-heading .text-button{min-height:44px;font-size:12px}.builder-empty{min-height:92px;margin:0;display:grid;place-items:center;border:1px dashed #bdcbcd;border-radius:12px;background:#f9fbfa;color:var(--muted);font-size:14px;text-align:center}.builder-sequence{padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none}.builder-chord-card{min-width:0;padding:13px;border:1px solid var(--line);border-radius:11px;background:#f9fbfa}.builder-chord-card.playing{border-color:var(--accent);background:var(--soft);box-shadow:0 0 0 1px var(--accent)}.builder-chord-card>div:first-child{min-height:58px;display:flex;flex-direction:column}.builder-position{color:var(--muted);font-size:10px;font-weight:650;letter-spacing:.8px;text-transform:uppercase}.builder-chord-card strong{margin-top:2px;color:var(--accent-dark);font-size:25px;letter-spacing:-.5px}.builder-card-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.builder-card-actions button{min-width:0;min-height:36px;padding:3px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:11px}.builder-card-actions button:disabled{cursor:default;opacity:.35}.builder-count{margin:8px 0 22px;color:var(--muted);font-size:11px;text-align:right}.chord-editor{padding-top:20px;border-top:1px solid var(--line)}.chord-editor fieldset{margin:0}.chord-editor-grid{display:grid;grid-template-columns:1fr 1.3fr auto auto;align-items:end;gap:12px}.chord-editor-grid label,.builder-preferences>label,.builder-preferences .tempo-control>label{display:flex;flex-direction:column;gap:7px;color:var(--ink);font-size:12px;font-weight:650}.chord-editor-grid select,.builder-preferences select{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}.chord-editor-grid .text-button{min-height:44px;font-size:12px}.builder-settings{box-shadow:none}.builder-preferences{display:grid;grid-template-columns:minmax(170px,1fr) 135px 150px 150px 140px;align-items:end;gap:12px}.builder-preferences>*,.chord-editor-grid>*{min-width:0}.builder-preferences .tempo-control>label{flex-direction:row;justify-content:space-between}.builder-preferences input[type=range]{width:100%;accent-color:var(--accent)}.builder-choice{min-height:64px;display:flex;flex-direction:column;justify-content:space-between;gap:5px}.builder-choice>span{font-size:12px;font-weight:650}.builder-choice .segmented{align-self:flex-start}.builder-actions{padding:9px 0 0;display:flex;align-items:center;gap:12px}.secondary-cta{min-height:46px;padding:11px 17px;border:1px solid var(--accent);border-radius:8px;background:#fff;color:var(--accent-dark);font-size:14px;font-weight:650}.secondary-cta:disabled{cursor:default;border-color:var(--line);color:var(--muted);opacity:.65}.builder-actions .text-button{min-height:44px;margin-left:5px;font-size:12px}.builder-status{min-height:22px;margin:7px 0 0;color:var(--muted);font-size:12px}.copy-field{position:fixed;left:-9999px}@media(min-width:1100px){.diagram-layout{gap:26px}.workspace>.result{min-height:438px}}@media(max-width:950px){.top{padding:0 25px}.tuning{display:none}.top{grid-template-columns:1fr auto}main{padding:30px 25px}.workspace{grid-template-columns:270px 1fr;gap:23px}.notation-row{margin-left:0}.diagram-layout{grid-template-columns:1fr;gap:12px}.diagram-wrap{width:100%;max-width:270px;margin:auto}.result-heading{padding:20px 22px 0}.sound-row{padding:16px;flex-direction:column;gap:7px}.play{width:100%}.quality-grid small{display:none}.practice-result .diagram-layout{grid-template-columns:minmax(200px,1fr) minmax(180px,.88fr)}}@media(max-width:700px){.top{height:72px;padding:0 18px;gap:14px}.brand{font-size:22px}.brand-icon{width:31px;margin-right:8px;font-size:20px;line-height:31px}.site-nav{gap:13px;font-size:12px}main{padding:24px 18px 20px}.intro{margin-bottom:23px}.intro .eyebrow{font-size:10px}h1{margin-top:9px;font-size:31px;letter-spacing:-1px}.intro p{font-size:14px}.workspace{display:flex;flex-direction:column;gap:19px}.controls{width:100%;padding:0}fieldset{margin-bottom:19px}legend{margin-bottom:9px;font-size:14px}.notation-row{min-height:36px;margin:-2px 0 8px 31px}.segmented button{min-height:44px;padding:5px 10px}.root-grid{gap:5px}.root-grid button,.root-grid button.accidental{min-height:44px;height:44px}.quality-grid{grid-template-columns:repeat(2,1fr);gap:6px}.quality-grid button{min-height:48px;padding:10px;text-align:center;font-size:13px}.quick{padding-top:0;border:0}.quick h2{margin-bottom:7px;font-size:12px}.quick-grid{grid-template-columns:repeat(4,1fr);gap:6px}.quick-grid button{min-height:44px;font-size:13px}.tip{display:none}.result{width:100%;border-radius:15px}.result-heading{padding:18px 22px 0}#chord-name,#practice-chord-name{font-size:49px}.diagram-layout,.practice-result .diagram-layout{padding:0 22px 20px;grid-template-columns:1fr;gap:12px}.diagram-wrap{max-width:255px}#diagram svg,#practice-diagram svg{max-height:280px}.note-row{margin-bottom:13px;padding-bottom:11px;flex-direction:row;align-items:center;justify-content:space-between}.note-row strong{font-size:15px}#finger-steps li,#practice-finger-steps li{font-size:14px}.sound-row{padding:15px 18px;flex-direction:row;gap:12px}.play{width:auto;flex:0 0 auto;padding:12px;font-size:13px}#sound-note{max-width:100px;font-size:10px}.help{margin-top:23px}summary{font-size:13px}.help-grid{grid-template-columns:1fr;gap:20px}footer{gap:20px;font-size:10px}footer span:last-child{text-align:right}.practice-setup{padding:20px;border-radius:15px}.progression-grid{grid-template-columns:1fr}.progression-grid button{min-height:96px}.practice-options{grid-template-columns:1fr;gap:18px}.practice-start-row .primary-action{width:100%}.practice-start-row{align-items:stretch;flex-direction:column;gap:6px}.practice-start-row .text-button{min-height:44px}.keyboard-tip{text-align:center}.practice-controls{padding:14px;flex-wrap:wrap}.preview-button,.metronome-button{width:100%;margin-left:0}.builder-panel{padding:20px;border-radius:15px}.builder-sequence{grid-template-columns:repeat(2,minmax(0,1fr))}.chord-editor-grid,.builder-preferences{grid-template-columns:1fr}.chord-editor-grid .primary-action{width:100%}.builder-actions{align-items:stretch;flex-direction:column}.builder-actions .text-button{margin-left:0}}@media(max-width:390px){.brand{font-size:20px}.brand-icon{display:none}.site-nav{gap:8px;font-size:11px}.builder-sequence{grid-template-columns:1fr}.notation-row>span{display:none}.notation-row{justify-content:flex-end}}@media(prefers-reduced-motion:no-preference){button{transition:background .12s,box-shadow .12s,filter .12s}}@media(prefers-reduced-motion:reduce){.practice-count.pulse strong{animation:none}}