:root{--bg:#faf6f0;--card:#fff;--ink:#2a211b;--muted:#7a6d62;--line:#e8ded2;--wood:#7a3e1d;--wood2:#b86b3a;--accent:#c2410c;
--f1:#2563eb;--f2:#16a34a;--f3:#ea580c;--f4:#dc2626;--f0:#6b7280;--p:#7c3aed;--i:#0891b2;--m:#db2777;--a:#b45309;
--tabh:64px;--dockh:0px;--safe:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
a{color:var(--accent)} h1,h2,h3{margin:0} h3{font-size:1.05rem;margin-bottom:.4rem} p{margin:.4rem 0}
.muted{color:var(--muted)} .small{font-size:.85rem} .pad{padding:0 14px}
.row{display:flex;align-items:center} .between{justify-content:space-between} .gap{gap:8px} .wrap{flex-wrap:wrap}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 8px;background:linear-gradient(135deg,#7a3e1d,#a65a2b);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.brand{display:flex;gap:10px;align-items:center} .brand h1{font-size:1.2rem;line-height:1.1} .brand p{margin:0;font-size:.75rem;opacity:.85} .logo{font-size:1.9rem;line-height:1}
.where{background:rgba(255,255,255,.18);padding:4px 10px;border-radius:999px;font-size:.85rem;font-weight:600}
main{padding:10px 10px calc(var(--tabh) + var(--dockh) + var(--safe) + 16px)}
.view{display:none} .view.active{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 0 10px;box-shadow:0 1px 2px rgba(0,0,0,.04)} .card.tight{padding:10px}
.hero{display:flex;gap:14px;align-items:center} .hero h2{font-size:1.25rem}
.ring{position:relative;width:64px;height:64px;flex:none} .ring svg{width:64px;height:64px;transform:rotate(-90deg)} .ring circle{fill:none;stroke-width:5} .ring-bg{stroke:#eee4d8} .ring-fg{stroke:var(--f2);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .5s}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:.95rem}
.today ol{padding-left:1.2rem;margin:.3rem 0 .8rem} .today li{margin:.3rem 0} .today small{font-weight:400;color:var(--muted);font-size:.8rem}
.btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px;font:inherit;font-weight:600;min-height:48px;cursor:pointer}
.btn.primary{background:var(--wood);border-color:var(--wood);color:#fff} .btn.tiny{min-height:36px;padding:6px 10px;font-size:.8rem;border-radius:10px} .btn:active{transform:scale(.98)}
.sections{list-style:none;padding:0;margin:0} .sections li{border-top:1px solid var(--line);padding:10px 0;display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.sections li:first-child{border-top:0} .sections .t{font-weight:650} .sections .d{grid-column:1/-1;font-size:.85rem;color:var(--muted);margin-top:-4px}
.sections .acts{display:flex;gap:6px;align-items:center} .sections .meta{font-size:.75rem;color:var(--muted)}
.learned{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;min-height:44px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:#fff}
.learned input{width:22px;height:22px;accent-color:var(--f2)} .learned.on{background:#ecfdf3;border-color:#86efac;color:#166534}
.rangebar{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none} .rangebar::-webkit-scrollbar{display:none}
.chip{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:.9rem;font-weight:600;white-space:nowrap;min-height:40px;color:var(--ink)}
.chip.on,.chip[aria-pressed="true"]{background:var(--wood);color:#fff;border-color:var(--wood)}
.custom{display:flex;align-items:center;gap:4px;font-size:.85rem;white-space:nowrap} .custom select{font:inherit;font-size:.9rem;padding:6px;border-radius:10px;border:1px solid var(--line);background:#fff;min-height:40px}
.small-controls{margin:0 2px 6px} .seg{display:flex;flex-direction:column;font-size:.75rem;color:var(--muted);flex:1;min-width:150px} .seg select{font:inherit;font-size:.9rem;padding:8px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);min-height:42px}
.score-wrap{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;min-height:200px}
#alphaTab{width:100%} .loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:#fff}
.at-cursor-bar{background:rgba(234,88,12,.12)} .at-cursor-beat{background:rgba(234,88,12,.85);width:3px} .at-highlight *{fill:#ea580c;stroke:#ea580c} .at-selection div{background:rgba(37,99,235,.15)}
.legend{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:.78rem;color:var(--muted);margin:6px 2px} .legend span{display:inline-flex;align-items:center;gap:4px} .legend i{width:14px;height:14px;border-radius:50%;display:inline-block}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px;min-height:28px} .badge{font-size:.78rem;font-weight:700;padding:4px 9px;border-radius:999px;background:#f3ece4;color:#5b4636}
.badge.shift{background:#fff1e6;color:#c2410c} .badge.barre{background:#eef2ff;color:#3730a3} .badge.guide{background:#ecfdf5;color:#047857} .badge.slur{background:#fdf2f8;color:#9d174d}
.fretboard svg,.hand svg,.strokes svg{width:100%;height:auto;display:block}
.tabstrip svg{width:100%;height:auto;display:block;touch-action:manipulation} .tabstrip .col{cursor:pointer}
.tips{padding-left:1.1rem;margin:.2rem 0} .tips li{margin:.35rem 0}
.flag{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:8px 10px;font-size:.85rem}
.sugg{display:inline-block;font-size:.7rem;font-weight:700;background:#f3f4f6;color:#6b7280;border-radius:4px;padding:0 4px}
.rs{display:inline-block;font-size:.72rem;font-weight:800;background:#fde68a;color:#78350f;border-radius:4px;padding:0 5px}
.dock{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + var(--safe));z-index:30;background:rgba(255,253,250,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:6px 10px 4px;display:none;box-shadow:0 -4px 14px rgba(0,0,0,.06)}
body.show-dock .dock{display:block} body.show-dock{--dockh:150px}
.dock-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:2px 0} .dock-row.small{font-size:.85rem}
.icon{appearance:none;border:1px solid var(--line);background:#fff;border-radius:14px;min-width:52px;height:48px;font-size:1.05rem;color:var(--ink);font-weight:700}
.icon.big{min-width:76px;height:52px;background:var(--wood);border-color:var(--wood);color:#fff;font-size:1.3rem} .icon:active{transform:scale(.96)}
.tempo{display:flex;align-items:center;gap:6px;flex:1} .tempo input{flex:1;accent-color:var(--wood);height:32px} #tempoVal{min-width:3.2em;font-weight:700;font-variant-numeric:tabular-nums}
.status{text-align:center;min-height:1.1em;font-size:.72rem}
.now{display:flex;gap:6px;align-items:center;overflow-x:auto;font-size:.82rem;min-height:26px;scrollbar-width:none} .now::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;background:#f3ece4;white-space:nowrap;font-weight:600}
.pill b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;font-size:.7rem}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tabh) + var(--safe));padding-bottom:var(--safe);background:#fff;border-top:1px solid var(--line)}
.tabs button{appearance:none;border:0;background:none;font:inherit;font-size:.72rem;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tabs button span{font-size:1.35rem;line-height:1} .tabs button.active{color:var(--wood);font-weight:700}
.video{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;margin:6px 0} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .lite{position:absolute;inset:0;display:grid;place-items:center;background-size:cover;background-position:center;cursor:pointer;border:0;width:100%}
.video .lite span{background:rgba(0,0,0,.7);color:#fff;border-radius:14px;padding:10px 18px;font-weight:700}
.res{list-style:none;padding:0;margin:0} .res li{padding:9px 0;border-top:1px solid var(--line)} .res li:first-child{border-top:0}
.res a{font-weight:650;text-decoration:none} .res .by{display:block;font-size:.8rem;color:var(--muted)} .res .why{display:block;font-size:.85rem}
@media (min-width:700px){main{max-width:760px;margin:0 auto}}
#view-score:not(.active){display:block;position:absolute;left:-10000px;top:0;width:calc(100% - 20px);max-width:740px;height:0;overflow:hidden;visibility:hidden}
.loading[hidden]{display:none}
body.show-dock{--dockh:128px}
.dock{padding:4px 8px 2px}
.dock .icon{height:42px;min-width:48px;border-radius:12px}
.dock .icon.big{height:44px;min-width:70px}
.dock-row{margin:1px 0}
.dock .chip{padding:5px 10px;min-height:34px;font-size:.8rem}
.dock .now{min-height:22px;font-size:.78rem}
.dock .status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.68rem;min-height:1em}
.tempo input{height:28px}

button.brand{appearance:none;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:0;min-height:0}
button.card{appearance:none;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer}
button.hub-card h2{font-size:1.2rem;margin:.15rem 0}
button.hub-card .kicker{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--wood);margin:0}
button.hub-card .go{color:var(--accent);font-weight:700;margin:.45rem 0 0}
button.hub-card:active{transform:scale(.99)}
#tabs[hidden],#tabsApp[hidden]{display:none !important}
.tabs.app{grid-template-columns:repeat(4,1fr)}
.course-dock{display:none !important}
body.show-course-dock .course-dock{display:block !important}
body.show-course-dock{--dockh:118px}
#courseStage[hidden],#courseList[hidden]{display:none !important}
#courseTitle{font-size:1.25rem;margin:.1rem 0 .3rem}
.sections li.locked{opacity:.55}
.dock-row.wrap{flex-wrap:wrap}
.course-dock .tempo{min-width:min(100%,180px)}
.course-dock .tempo span{min-width:4.6em}
.prompt-note{font-size:2rem;font-weight:800;line-height:1.1}
.prompt-card p{margin:.2rem 0 .45rem}
.scorebox{text-align:right;font-size:.82rem;color:var(--muted);min-width:7.2rem;line-height:1.35}
.scorebox b{color:var(--ink);font-size:1.1rem}
.neck-scroll{overflow-x:auto;margin:0 0 10px;border-radius:14px;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.neck{display:grid;grid-template-columns:52px repeat(var(--n),minmax(48px,1fr));background:#5a3620;min-width:max(100%,calc(52px + var(--n) * 48px))}
.neck.lefty{direction:rtl}
.neck.lefty>*{direction:ltr}
.neck-corner,.fretno,.strlab{color:#f6eadc;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}
.fretno{min-height:34px;gap:1px}
.fretno i{font-style:normal;color:#e7c49a;font-size:.85rem;line-height:1;min-height:.9em}
.strlab{min-height:52px;border-top:1px solid rgba(255,255,255,.12)}
.strlab small{font-weight:600;opacity:.8}
.fretbtn{appearance:none;border:0;border-right:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.12);border-bottom:3px solid #d7b48a;background:transparent;color:#fff8ef;font:inherit;font-weight:750;font-size:.82rem;min-width:48px;min-height:52px;padding:0 2px;cursor:pointer}
.fretbtn.dim{opacity:.28}
.fretbtn.hot{background:#b86b3a;color:#fff}
.fretbtn.got{background:#166534;color:#fff}
.fretbtn.bad{background:#b91c1c;color:#fff}
.fretbtn.hint{box-shadow:inset 0 0 0 3px #fbbf24}
.namepad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 10px}
.namebtn{min-height:52px;font-size:1.05rem}
.rotate-hint{display:none;margin:0 2px 8px}
@media (max-width:800px) and (orientation:portrait){.rotate-hint{display:block}}
@media (min-width:1000px){
  body:has(#view-trainer.active) main,body:has(#view-course.active) main{max-width:980px}
}

#courseTips ul { margin: 4px 0 0 18px; padding: 0; }
#courseTips li { margin: 2px 0; }

/* Tuner & metronome */
.tuner-face{text-align:center}
.tuner-note{font-size:4.2rem;font-weight:800;line-height:1;color:var(--ink);transition:color .15s} .tuner-note small{font-size:1.4rem;color:var(--muted);margin-left:2px}
.tuner-note.ok{color:var(--f2)}
.meter{position:relative;height:70px;margin:14px 8px 4px;border-bottom:2px solid var(--line)}
.meter-zone{position:absolute;left:45%;width:10%;top:0;bottom:0;background:#dcfce7;border-radius:6px}
.meter .tick{position:absolute;bottom:0;width:2px;height:16px;background:var(--line);transform:translateX(-1px)} .meter .tick i{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-style:normal;font-size:.7rem;color:var(--muted)}
.needle{position:absolute;left:50%;bottom:0;width:4px;height:64px;margin-left:-2px;background:var(--accent);border-radius:2px;transition:left .12s linear;opacity:.25} .needle.ok{background:var(--f2)}
.tuner-cents{margin-top:20px;font-weight:700;min-height:1.5em}
#tunerStrings .chip.near{border-color:var(--f2);box-shadow:0 0 0 2px #86efac}
.metro-bpm{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0} .metro-bpm span{font-size:1rem;min-width:6em;text-align:center} .metro-bpm b{font-size:2.4rem;font-variant-numeric:tabular-nums}
.metro-dots{display:flex;justify-content:center;gap:10px;margin:12px 0} .metro-dots i{width:18px;height:18px;border-radius:50%;background:var(--line)} .metro-dots i.on{background:var(--wood)}
.group-h{margin:16px 4px 6px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.song-list{list-style:none;margin:0;padding:0} .song-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);padding:10px 0} .song-list li:first-child{border-top:0}
.song-list .t{font-weight:650} .song-list .meta{font-size:.75rem;color:var(--muted)}
.update-toast{position:fixed;left:10px;right:10px;top:10px;z-index:50;background:var(--wood);color:#fff;border-radius:14px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 6px 20px rgba(0,0,0,.2)} .update-toast button{background:#fff;color:var(--wood);border:0;border-radius:10px;padding:8px 12px;font:inherit;font-weight:700}
/* Hand guides & chord diagrams */
.hands{border-top:1px solid var(--line);padding-top:8px;margin-top:8px} .hands:first-child{border-top:0;margin-top:0;padding-top:0}
.hands summary{cursor:pointer;list-style:none} .hands summary h3{display:inline} .hands summary::-webkit-details-marker{display:none}
.hands h4{font-size:.95rem;margin:.8rem 0 .3rem}
.chord-teach{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0;font-size:.88rem}
.chord-teach ol,.chord-teach ul{padding-left:1.1rem;margin:.2rem 0 .5rem} .chord-teach li{margin:.15rem 0}
.chord-fig svg.chordbox{width:150px;height:auto;display:block}
@media (max-width:480px){.chord-teach{grid-template-columns:1fr}.chord-fig{justify-self:center}}
.diag-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .diag-scroll svg{max-width:none;height:auto;display:block}
.hand-grid{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr;gap:10px;align-items:center} .hand-grid svg{width:100%;height:auto}
@media (max-width:480px){.hand-grid{grid-template-columns:1fr}}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0} .chip-row .chip{text-decoration:none;min-height:34px;padding:6px 10px}