:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--chrome:#000;--bg:#121212;--panel:#181818;--hover:#2a2a2a;--field:#242424;--ink:#fff;--muted:#b3b3b3;--line:#2f2f2f;--accent:#1ed760;--accent-hover:#3be477;--accent-ink:#000;--dot:#fff;--dot-ink:#000;--root:#1ed760;--err:#f3727f;--tint:#1e5a3a}*{box-sizing:border-box}html{background:var(--chrome)}body{background:var(--chrome);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font:15px/1.5 Helvetica Neue,Helvetica,Arial,system-ui,sans-serif}::selection{background:var(--accent);color:#000}h1{letter-spacing:-.03em;margin:0}h2{letter-spacing:-.02em;margin:0;font-size:24px;font-weight:800}.muted{color:var(--muted)}.tiny{margin:2px 0 0;font-size:12px}.tabs{display:none}.seg{flex-wrap:wrap;gap:8px;display:flex}.controls{flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:14px;display:flex}.field{color:var(--muted);flex-direction:column;gap:4px;font-size:12px;display:flex}.field.grow{flex:220px}input,select{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;min-width:0;padding:9px 10px;font-size:15px}input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}input[aria-invalid=true]{border-color:var(--err)}.seg{margin:4px 0 14px}.seg button,.ghost,.more{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:999px;padding:7px 12px}.seg button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.more{margin:20px auto 0;display:block}.error{color:var(--err)}.summary{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;align-items:flex-start;gap:8px 32px;margin:8px 0 16px;padding:16px;display:flex}.summary p{margin:0}.summary .capo-note{flex:260px}.summary .stats{color:var(--muted);margin-left:auto}.tones{flex-wrap:wrap;gap:6px;display:flex;margin-top:8px!important}.tone{border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-weight:600}.tone sub{color:var(--muted);margin-left:3px;font-size:10px;font-weight:400}.tone.root{border-color:var(--root);color:var(--root)}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.grid.compact{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.card{background:var(--panel);border:1px solid var(--line);text-align:center;border-radius:12px;padding:10px}.card-meta{justify-content:space-between;align-items:center;margin-top:4px;display:flex}code{font:13px ui-monospace,Menlo,monospace}.play{background:var(--accent);color:var(--accent-ink);cursor:pointer;border:0;border-radius:50%;width:28px;height:28px;font-size:11px}.diagram{width:100%;height:auto;display:block}.diagram .fret,.neck .fret{stroke:var(--line);stroke-width:1px}.diagram .string,.neck .string{stroke:var(--muted);stroke-width:1px}.diagram .nut,.neck .nut{stroke:var(--ink);stroke-width:3px}.diagram .capo{fill:var(--muted)}.dot{fill:var(--dot)}.dot.root{fill:var(--root)}.dotlabel{fill:var(--dot-ink);pointer-events:none;font-size:8px;font-weight:700}.barre{fill:var(--dot);opacity:.28}.open{fill:none;stroke:var(--ink);stroke-width:1.2px}.marker{fill:var(--muted);font-size:12px}.fretnum{fill:var(--muted);font-size:8px}.small{font-size:8px}svg text.muted{fill:var(--muted)}.neck .open{stroke-width:1.5px;cursor:pointer}.cell:hover .open{fill:var(--line)}.neck-wrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;overflow-x:auto}.neck{width:100%;min-width:640px;height:auto;display:block}.cell{cursor:pointer}.ghostdot{fill:#0000}.ghostlabel{fill:#0000;font-size:9px}.cell:hover .ghostdot{fill:var(--line)}.cell:hover .ghostlabel{fill:var(--ink)}.results{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-top:16px;padding:16px}.results p{margin:2px 0}.alts{margin-top:8px!important}.plan{border:1px solid var(--line);background:var(--panel);border-radius:12px;margin:12px 0 24px;padding:14px}.plan.best{border-color:var(--accent)}.plan header{flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:10px;display:flex}.plan h2{font-size:20px}.shapes{font-weight:600}.badge{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}.muted-ring{fill:none;stroke:var(--muted);stroke-width:1.2px;stroke-dasharray:3 2}.neck .string.dashed{stroke-dasharray:4 4}.howto{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:10px;margin:0 0 12px;padding:10px 14px 10px 32px;font-size:14px}.howto li{margin:2px 0}.howto strong{color:var(--ink)}.builder{margin-bottom:16px}.presets{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;display:flex}.chip-btn{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:999px;padding:3px 10px;font-size:13px}.chip-btn:hover{border-color:var(--accent)}.chips{flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;padding:0;list-style:none;display:flex}.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;align-items:center;gap:4px;padding:3px 4px 3px 12px;font-weight:600;display:inline-flex}.chip button{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 6px;font-size:16px;line-height:1}.numerals{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.numerals li{border:1px solid var(--line);border-radius:8px;flex-direction:column;align-items:center;min-width:52px;padding:4px 10px;display:flex}.numerals li span{color:var(--muted);font-size:12px}.numerals li.outside{border-style:dashed;border-color:var(--accent)}.path-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:4px 0 12px;display:flex}.path-head p{margin:0}.path-head .ghost{margin-left:6px}.sequence{flex-wrap:wrap;align-items:flex-start;gap:6px;margin:0;padding:0;list-style:none;display:flex}.step{align-items:center;gap:6px;display:flex}.step .card{width:150px}.step.now .card{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.move{color:var(--muted);text-align:center;flex-direction:column;align-items:center;min-width:44px;font-size:11px;display:flex}.move .anchor{color:var(--accent);font-weight:600}.alts-panel h3{margin:0 0 4px}.save-row{border:1px dashed var(--line);border-radius:12px;flex-wrap:wrap;align-items:end;gap:10px;margin:0 0 16px;padding:12px;display:flex}.ghost.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.saved-msg{color:var(--accent);padding-bottom:8px}.link{color:var(--accent);cursor:pointer;font:inherit;background:0 0;border:0;padding:0;text-decoration:underline}.empty{text-align:center;border:1px dashed var(--line);border-radius:12px;padding:48px 16px}.tab-list{gap:16px;margin:0;padding:0;list-style:none;display:grid}.tab-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}.tab-card header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:8px;display:flex}.title-input{background:0 0;border-color:#0000;flex:200px;padding:4px 6px;font-size:18px;font-weight:700}.title-input:hover,.title-input:focus{border-color:var(--line);background:var(--bg)}pre.tab{background:var(--bg);border:1px solid var(--line);border-radius:8px;margin:0 0 10px;padding:12px;font:13px/1.35 ui-monospace,Menlo,monospace;overflow-x:auto}textarea{font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical;border-radius:8px;width:100%;padding:8px 10px}.tab-actions{flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;display:flex}.confirm{color:var(--err);flex-wrap:wrap;align-items:center;gap:8px;display:inline-flex}.lead{max-width:70ch;margin-top:0}.jump{flex-wrap:wrap;gap:6px 14px;margin:8px 0 4px;font-size:14px;display:flex}.jump a{color:var(--accent);text-decoration:none}.jump a:hover{text-decoration:underline}.shape-group{margin-top:28px;scroll-margin-top:12px}.shape-group h2{font-size:20px}.shape-group h3{margin:18px 0 8px;font-size:16px}.shape-group>p{max-width:70ch;margin:2px 0 12px}.card-title{font-size:18px;display:block}.root-picker,.note-picker{flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0;display:flex}.root-picker button,.note-picker button{min-width:40px;font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:8px;padding:6px 10px;font-weight:600}.root-picker button.on,.note-picker button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.note-picker button:disabled{opacity:.45;cursor:default}.neck-wrap.learn{padding:10px 6px}.neck.big{min-width:760px}.neck .strlabel{fill:var(--muted);font-size:14px;font-weight:700}.fretnum.big{font-size:12px}.posdot{fill:var(--muted);opacity:.6}.note.natural{fill:var(--dot);stroke:none}.note.accidental{fill:none;stroke:var(--muted);stroke-width:1.4px}.note.lit{fill:var(--root);stroke:var(--root)}.note.dim{opacity:.22}.note.hiddennote{fill:var(--line);stroke:none;opacity:.5}.cell:hover .note.hiddennote{opacity:1;fill:var(--muted)}.notelabel{fill:var(--dot-ink);pointer-events:none;font-weight:700}.notelabel.lit{fill:#000}.notelabel.dim{opacity:.3}.note.accidental~.notelabel:not(.lit){fill:var(--muted)}.quiz{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin:16px 0;padding:16px}.quiz h2{font-size:20px}.quiz p{margin:4px 0}.quiz-start{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.question{font-size:18px}.q-note{color:var(--root);font-size:24px}.good{color:var(--accent);font-weight:700}.tips{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-top:24px;padding:16px 20px}.tips h2{font-size:20px}.tips ul{margin:8px 0 0;padding-left:20px}.tips li{max-width:75ch;margin:6px 0}.prog .block{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:0 0 20px;padding:18px}.block-title{align-items:center;gap:10px;margin:0 0 14px;font-size:20px;display:flex}.num{background:var(--accent);width:26px;height:26px;color:var(--accent-ink);border-radius:50%;place-items:center;font-size:14px;font-weight:700;display:inline-grid}.label{color:var(--muted);margin-bottom:4px;font-size:12px}.howto-card{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--panel);border-radius:10px;margin:0 0 16px;padding:12px 16px}.howto-card summary{cursor:pointer;font-weight:700}.howto-card ol{color:var(--muted);margin:8px 0 2px;padding-left:20px}.howto-card li{max-width:80ch;margin:4px 0}.howto-card strong{color:var(--ink)}.chip-row{background:var(--bg);border:1px dashed var(--line);border-radius:10px;flex-wrap:wrap;align-items:center;gap:10px;min-height:48px;margin-bottom:14px;padding:8px 10px;display:flex}.empty-line{margin:0}.prog .chips{flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.prog .chip{border:1px solid var(--line);background:var(--panel);border-radius:10px;align-items:center;gap:2px;padding:3px 4px;display:inline-flex}.chip-name{text-align:center;min-width:28px;padding:0 6px;font-weight:700}.nudge{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:2px 5px;font-size:16px;line-height:1}.nudge:hover:not(:disabled){background:var(--line);color:var(--ink)}.nudge:disabled{opacity:.25;cursor:default}.nudge.x{font-size:18px}.adder{flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:12px;display:flex}.root-row{flex-wrap:wrap;gap:4px;display:flex}.root-row button{min-width:38px;font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;border-radius:8px;padding:7px 8px;font-weight:600}.root-row button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.add-btn{border-radius:8px;padding:9px 16px}.alt-inputs{margin-bottom:12px}.examples{flex-wrap:wrap;align-items:stretch;gap:8px;margin-bottom:12px;display:flex}.examples .label{align-self:center;margin:0 4px 0 0}.example{text-align:left;font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;border-radius:10px;flex-direction:column;padding:6px 12px;display:flex}.example span{color:var(--muted);font-size:12px}.example:hover{border-color:var(--accent)}.opts{margin-top:6px}.opts summary{cursor:pointer;color:var(--muted);font-size:14px}.opts .controls{margin:10px 0 4px}.key-line{flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:10px;display:flex}.key-line .numerals li{background:var(--bg)}.capo-note{background:var(--bg);border-radius:8px;margin:0 0 12px;padding:8px 12px}.options{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:14px;display:grid}.option{text-align:left;font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;border-radius:12px;flex-direction:column;gap:2px;padding:10px 14px;display:flex}.option span{color:var(--muted);font-size:13px}.option.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.play-bar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;display:flex}.seq-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.chord-card{border:1px solid var(--line);background:var(--bg);text-align:center;border-radius:12px;padding:10px}.chord-card.now{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.chord-card.editing{border-color:var(--accent)}.cc-head{justify-content:center;align-items:baseline;gap:8px;font-size:18px;display:flex}.cc-num{background:var(--line);width:20px;height:20px;color:var(--ink);border-radius:50%;align-self:center;place-items:center;font-size:11px;font-weight:700;display:inline-grid}.from-prev{color:var(--muted);min-height:18px;margin:4px 0 8px;font-size:12px}.legend{max-width:80ch;margin:12px 0 0}.alts-panel{border:1px solid var(--accent);background:var(--bg);border-radius:12px;margin-top:18px;padding:14px}.alts-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.alts-head h3{margin:0;font-size:17px}.alts-panel .card{background:var(--panel)}.prog .save-row{border:0;margin:0;padding:0}.prog .saved-msg{color:var(--accent);margin:8px 0 0;font-weight:700}.engine-pick{margin-top:4px;font-size:13px;display:block}.engine-pick select{padding:2px 6px;font-size:13px}.engine-pick a{color:var(--accent)}table.bench{border-collapse:collapse;width:100%;min-width:640px}table.bench th,table.bench td{text-align:right;border-bottom:1px solid var(--line);padding:10px 12px}table.bench th:first-child,table.bench td:first-child{text-align:left}table.bench th{color:var(--muted);font-size:12px;font-weight:600}table.bench caption{text-align:left;color:var(--muted);padding:10px 12px;font-size:13px}.shell{grid-template-columns:264px minmax(0,1fr);gap:8px;min-height:100vh;padding:8px;display:grid}.sidebar{background:var(--bg);border-radius:8px;flex-direction:column;gap:8px;height:calc(100vh - 16px);padding:12px;display:flex;position:sticky;top:8px;overflow-y:auto}.brand{letter-spacing:-.03em;align-items:center;gap:10px;padding:8px 12px 16px;font-size:20px;font-weight:900;display:flex}.brand-mark{background:var(--accent);color:#000;border-radius:50%;place-items:center;width:32px;height:32px;display:grid}.side-group{flex-direction:column;gap:2px;display:flex}.side-label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 12px 6px;font-size:12px;font-weight:700}.nav-item{width:100%;color:var(--muted);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:16px;padding:9px 12px;font-weight:700;transition:color .15s,background .15s;display:flex}.nav-item:hover{color:var(--ink);background:#1f1f1f}.nav-item.on{color:var(--ink);background:var(--hover)}.nav-item .icon{flex:none;width:24px;height:24px}.nav-item.on .icon{color:var(--accent)}.badge-count{background:var(--accent);color:#000;text-align:center;border-radius:999px;min-width:22px;margin-left:auto;padding:1px 7px;font-size:12px;font-weight:800}.side-foot{margin-top:auto;padding:12px;font-size:13px}.side-foot a{color:var(--muted);text-decoration:none}.side-foot a:hover{color:var(--ink);text-decoration:underline}.content{background:linear-gradient(180deg, var(--tint) 0, var(--bg) 340px), var(--bg);border-radius:8px;min-width:0}.hero{padding:56px 32px 20px}.eyebrow{letter-spacing:.1em;text-transform:uppercase;opacity:.85;font-size:12px;font-weight:700}.hero-title{letter-spacing:-.04em;margin:6px 0 10px;font-size:clamp(34px,6vw,64px);font-weight:900;line-height:1.05}.hero-sub{color:#d0d0d0;max-width:62ch;margin:0;font-size:16px}.content-inner{max-width:1180px;padding:8px 32px 72px}main.solo{background:linear-gradient(180deg, var(--tint) 0, var(--bg) 300px), var(--bg);border-radius:8px;max-width:1040px;margin:8px auto;padding:32px}main.solo h1{font-size:clamp(30px,5vw,48px);font-weight:900}main.solo a{color:var(--accent)}.top{margin-bottom:20px}.top p{margin:4px 0 16px}.ghost,.chip-btn,.more,.seg button,.root-picker button,.note-picker button,.root-row button{font:inherit;color:var(--ink);cursor:pointer;background:0 0;border:1px solid #727272;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;transition:transform .1s,border-color .15s,background .15s}.ghost:hover:not(:disabled),.chip-btn:hover,.more:hover,.seg button:hover,.root-picker button:hover,.note-picker button:hover:not(:disabled),.root-row button:hover{border-color:var(--ink);transform:scale(1.03)}.seg button,.root-picker button,.note-picker button,.root-row button{background:var(--field);border-color:#0000;font-weight:600}.seg button.on,.root-picker button.on,.note-picker button.on,.root-row button.on{background:var(--ink);color:#000;border-color:var(--ink)}.seg.small button{padding:5px 12px;font-size:13px}.root-picker button,.note-picker button,.root-row button{border-radius:8px;min-width:40px;padding:7px 10px}.ghost.solid,.play{background:var(--accent);color:#000;border-color:var(--accent)}.ghost.solid{padding:10px 24px;font-weight:800}.ghost.solid:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.ghost.danger{border-color:var(--err);color:var(--err)}.ghost:disabled{opacity:.45;cursor:default}.chip-btn{padding:4px 12px;font-size:13px}.link{color:var(--ink);font-weight:700}.play{border:0;width:34px;height:34px;font-size:12px;transition:transform .1s,background .15s}.play:hover{background:var(--accent-hover);transform:scale(1.08)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}input,select,textarea{background:var(--field);color:var(--ink);border:1px solid #0000;border-radius:6px;padding:10px 12px}input:hover,select:hover,textarea:hover{border-color:#727272}input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:0}input::placeholder,textarea::placeholder{color:#8a8a8a}.field{font-weight:600}.title-input:hover,.title-input:focus{background:var(--field)}.card,.chord-card{background:var(--panel);border:0;border-radius:8px;padding:14px;transition:background .2s}.card:hover,.chord-card:hover{background:var(--hover)}.summary,.results,.plan,.prog .block,.howto-card,.quiz,.tips,.tab-card,.empty,.alts-panel,.neck-wrap,.save-row{background:var(--panel);border:0;border-radius:10px}.howto-card{border-left:4px solid var(--accent)}.alts-panel{outline:1px solid var(--accent);background:#1f1f1f}.neck-wrap{padding:12px}.summary h2,.results h2{letter-spacing:-.03em;font-size:32px;font-weight:900}.empty{border:1px dashed #404040}.chip-row{background:var(--bg);border:1px dashed #404040}.chip,.tone,.example,.option,.numerals li,.capo-note{background:var(--field);border-color:#0000}.tone.root{background:0 0}.example:hover{background:var(--hover);border-color:#0000}.option{border:2px solid #0000;border-radius:10px;transition:background .15s}.option:hover{background:var(--hover)}.option.on{border-color:var(--accent);box-shadow:none;background:var(--hover)}.chord-card.now,.step.now .card{box-shadow:0 0 0 2px var(--accent);border:0}.chord-card.editing{box-shadow:0 0 0 2px #fff}pre.tab{color:#e6e6e6;background:#0b0b0b;border:0}table.bench th,table.bench td{border-bottom-color:var(--line)}.badge,.num,.badge-count{color:#000}.cc-num{background:var(--field)}.diagram .fret,.neck .fret{stroke:#3a3a3a}.diagram .string,.neck .string{stroke:#8a8a8a}.jump a{color:var(--ink);opacity:.85;font-weight:700}.jump a:hover{opacity:1}.capo-note,.summary .stats{color:var(--muted)}.tips li,.howto-card li{color:#d0d0d0}*{scrollbar-width:thin;scrollbar-color:#4d4d4d transparent}@media (max-width:860px){.shell{padding:0;display:block}.sidebar{border-radius:0;gap:0;height:auto;padding:0;position:static;overflow:visible}.brand{padding:max(10px, env(safe-area-inset-top)) 16px 4px;font-size:18px}.side-label,.side-foot{display:none}.side-nav{z-index:20;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);scrollbar-width:none;background:#121212f5;gap:2px;display:flex;position:fixed;bottom:0;left:0;right:0;overflow-x:auto}.side-nav::-webkit-scrollbar{display:none}.side-group{flex-direction:row;gap:2px}.nav-item{text-align:center;white-space:normal;background:0 0;border-radius:10px;flex-direction:column;justify-content:center;gap:3px;width:76px;min-height:52px;padding:6px 4px;font-size:11px;font-weight:600;line-height:1.15;position:relative}.nav-item:hover{background:0 0}.nav-item .icon{width:22px;height:22px}.nav-item.on{color:var(--accent);background:0 0}.nav-item.on .icon{color:var(--accent)}.nav-item .badge-count{position:absolute;top:2px;right:14px}.content{padding-bottom:calc(76px + env(safe-area-inset-bottom));border-radius:0}.hero{padding:20px 16px 12px}.content-inner{padding:8px 16px 32px}main.solo{border-radius:0;margin:0;padding:20px 16px}input,select,textarea{font-size:16px}button{touch-action:manipulation}}.riff .block{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:0 0 20px;padding:18px}.riff-scroll{margin-bottom:12px;padding-bottom:8px;overflow-x:auto}.riff-grid{outline:none;gap:0;padding:4px 0;display:inline-grid}.riff-grid:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.riff-name{color:var(--muted);justify-content:center;align-items:center;font:600 13px ui-monospace,Menlo,monospace;display:flex}.riff-cell{cursor:pointer;-webkit-user-select:none;user-select:none;height:32px;color:var(--ink);justify-content:center;align-items:center;font:600 14px ui-monospace,Menlo,monospace;display:flex;position:relative}.riff-cell:before{content:"";border-top:1px solid var(--line);z-index:0;position:absolute;top:50%;left:0;right:0}.riff-cell.bar{border-left:2px solid var(--muted)}.riff-cell.has{z-index:1}.riff-cell.has:after{content:"";background:var(--panel);z-index:-1;border-radius:6px;position:absolute;inset:6px 4px}.riff-cell:hover{background:#ffffff0f}.riff-cell.now{background:#1ed7602e}.riff-cell.on{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}.fret-pad{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.fret-pad .ghost{min-width:40px;padding:6px 10px}.fret-pad .ghost.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.riff kbd{border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:12px}.section-title{margin:28px 0 12px;font-size:18px}.riff-badge{color:var(--accent);z-index:2;font-size:9px;font-weight:700;line-height:1;position:absolute;top:1px;right:2px}.box-outline{fill:#1ed76014;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:5 4;pointer-events:none}.scale-info{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin:16px 0;padding:16px}.scale-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.scale-head h2{margin:0 0 4px;font-size:20px}.scale-head p{max-width:64ch;margin:0}.scale-facts{gap:6px;margin:14px 0 0;display:grid}.scale-facts div{flex-wrap:wrap;gap:4px 14px;display:flex}.scale-facts dt{width:72px;color:var(--muted);font-size:13px}.scale-facts dd{white-space:pre;margin:0;font-weight:600}.box-note{border-top:1px solid var(--line);color:var(--muted);margin:12px 0 0;padding-top:12px}.box-note strong{color:var(--ink)}.view-switch{margin-bottom:14px}.backup-nudge{border:1px solid var(--accent);background:#1ed76012;border-radius:12px;margin:0 0 16px;padding:12px 16px}.backup-nudge p{margin:4px 0}.site-foot{padding:0 32px 32px;font-size:13px}.site-foot a{color:var(--muted);text-decoration:none}.site-foot a:hover{color:var(--ink);text-decoration:underline}@media (max-width:860px){.site-foot{padding:0 16px 16px}}