:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
  --page:#EDF0F5; --surface:#FFFFFF; --ink:#131A3A; --muted:#566080; --line:#D3D9E6;
  --velvet:#18245A; --on-velvet:#F2F4FA; --on-velvet-muted:#AEB8DE; --track:rgba(255,255,255,.09);
  --brass:#E2B33F; --brass-ink:#7A570A; --good:#5AD0AE; --good-ink:#17725C; --bad:#F59378; --bad-ink:#AE3F27;
  --focus:#3D63FF;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-cond:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --font-sym:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols","Noto Sans Symbols 2","DejaVu Sans",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#0C1230; --surface:#141C46; --ink:#EEF1F9; --muted:#9BA6CC; --line:#2A3568;
    --velvet:#1B2A70; --brass-ink:#E2B33F; --good-ink:#5AD0AE; --bad-ink:#F59378; --focus:#9DB2FF;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0C1230; --surface:#141C46; --ink:#EEF1F9; --muted:#9BA6CC; --line:#2A3568;
  --velvet:#1B2A70; --brass-ink:#E2B33F; --good-ink:#5AD0AE; --bad-ink:#F59378; --focus:#9DB2FF;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--page);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.45;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h1,h2{font-family:var(--font-cond);font-stretch:75%;font-weight:800;line-height:1.05;margin:0}
h1{font-size:2rem;letter-spacing:-.01em}
h2{font-size:1.3rem;margin-top:1.9rem;margin-bottom:.6rem}
p{margin:0}
.hint{color:var(--muted);font-size:.95rem}

.app{max-width:560px;margin:0 auto;padding:14px 14px 104px}

/* buttons */
.btn{border:0;border-radius:999px;padding:.7rem 1.15rem;min-height:46px;font-weight:650;line-height:1.1}
.btn-solid{background:var(--ink);color:var(--page)}
.btn-brass{background:var(--brass);color:#1B1503}
.btn-line{background:transparent;border:1.5px solid currentColor}
.btn-quiet{background:transparent;border:0;padding:.5rem .2rem;min-height:44px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.btn[disabled]{opacity:.55;cursor:default}
select{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:.55rem .7rem;min-height:44px;max-width:100%}

/* session strip */
.session-head{display:flex;gap:10px;align-items:center;justify-content:space-between}
.session-head .btn{flex:0 0 auto;white-space:nowrap}
.session-head select{flex:1 1 auto;min-width:0;font-family:var(--font-cond);font-stretch:80%;font-weight:700;font-size:1.05rem}
.session-line{margin-top:8px;font-size:.95rem;color:var(--muted);min-height:2.7em}
.session-line strong{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.blocks{list-style:none;display:flex;gap:3px;padding:0;margin:8px 0 0}
.blocks li{height:8px;border-radius:4px;background:var(--line);position:relative;overflow:hidden;min-width:6px}
.blocks li.r{opacity:.55}
.blocks li i{position:absolute;inset:0;width:0;background:var(--brass-ink);border-radius:4px}
.blocks li.done i{width:100%}
.session-run{display:flex;gap:14px;margin-top:2px}

/* hero */
.hero{position:relative;overflow:hidden;margin-top:12px;background:var(--velvet);color:var(--on-velvet);border-radius:22px;padding:18px 18px 18px}
.hold{position:absolute;left:0;top:0;height:6px;width:100%;background:var(--brass);transform-origin:left;transform:scaleX(0)}
.hero-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--font-cond);font-stretch:80%;font-weight:700;font-size:1.05rem}
.hero-top #readout{font-variant-numeric:tabular-nums;color:var(--brass)}
.note-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;min-height:clamp(6.4rem,31vw,10rem)}
.note{font-family:var(--font-cond);font-stretch:62%;font-weight:800;font-size:clamp(7.4rem,37vw,11.8rem);line-height:.84;letter-spacing:-.02em;white-space:nowrap}
.note .acc,.t-note .acc{font-family:var(--font-sym);font-stretch:100%;font-weight:400;font-size:.42em;display:inline-block;vertical-align:top;margin:.14em 0 0 .05em;letter-spacing:0}
.note.word{font-size:clamp(4rem,19vw,6rem);font-stretch:68%}
.staff{flex:0 0 auto;width:clamp(128px,38vw,190px);line-height:0}
.staff svg{width:100%;height:auto;display:block}
.valve-row{display:flex;align-items:center;gap:14px;margin-top:10px}
.valves{display:flex;gap:clamp(8px,3vw,14px)}
.valve{width:clamp(56px,17vw,78px);aspect-ratio:1;border-radius:50%;border:3px solid var(--brass);display:grid;place-items:center;position:relative;background:transparent;color:var(--brass);font-family:var(--font-cond);font-stretch:75%;font-weight:800;font-size:1.35rem;padding:0}
.valve span{position:relative;z-index:1}
.valve::before{content:"";position:absolute;inset:14%;border-radius:50%;background:transparent}
.valve.down{background:var(--brass);color:#27304F}
.valve.down::before{background:radial-gradient(circle at 34% 28%,#FFFFFF 0%,#E6ECF5 48%,#B4C0D8 100%);box-shadow:0 1px 2px rgba(0,0,0,.35) inset}
.fing-cap{font-size:1rem;color:var(--on-velvet-muted);line-height:1.25}
.meter{position:relative;height:34px;margin-top:16px;border-radius:9px;background:var(--track);overflow:hidden}
.meter .zone{position:absolute;left:40%;width:20%;top:0;bottom:0;background:rgba(90,208,174,.22)}
.meter .mid{position:absolute;left:50%;width:2px;margin-left:-1px;top:0;bottom:0;background:var(--on-velvet-muted);opacity:.55}
.needle{position:absolute;inset:0;opacity:0;transition:transform .09s linear}
.needle::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:12px;margin-left:-6px;border-radius:6px;background:var(--on-velvet)}
.meter[data-s] .needle{opacity:1}
.meter[data-s="good"] .needle::before{background:var(--good)}
.meter[data-s="warn"] .needle::before{background:var(--brass)}
.meter[data-s="bad"] .needle::before{background:var(--bad)}
.ends{display:flex;justify-content:space-between;font-size:.85rem;color:var(--on-velvet-muted);margin-top:4px}
.ends b{color:var(--on-velvet);font-weight:650;font-variant-numeric:tabular-nums;min-width:3ch;text-align:center}
.coach{margin-top:10px;font-size:1.15rem;font-weight:550;line-height:1.3;min-height:2.6em}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.hero .btn-line{color:var(--on-velvet)}
.hero.resting .valve-row,.hero.resting .meter,.hero.resting .ends{opacity:.3}
.notice{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(245,147,120,.16);font-size:.95rem;line-height:1.4}

/* controls */
.seg{display:flex;gap:4px;margin-top:16px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.seg button{flex:1;border:0;background:transparent;border-radius:999px;min-height:42px;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--page)}
.panel{margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{min-width:44px;min-height:44px;padding:0 .55rem;border-radius:11px;border:1.5px solid var(--line);background:var(--surface);font-family:var(--font-cond);font-stretch:80%;font-weight:700;font-size:1.1rem}
.chip.cur{border-color:var(--brass-ink);box-shadow:0 0 0 2px var(--brass-ink) inset}
.chip.hit{background:var(--good-ink);border-color:var(--good-ink);color:var(--page)}
.chips.seq .chip{min-width:36px;min-height:36px;font-size:1rem;padding:0 .35rem;cursor:default}
.result{margin-top:10px;font-weight:550}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.metro{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.metro .lab{font-weight:650;margin-right:auto;display:flex;align-items:center;gap:8px}
.metro output{font-variant-numeric:tabular-nums;font-weight:700;min-width:3ch;text-align:center;font-size:1.1rem}
.step{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);font-size:1.3rem;font-weight:600;line-height:1}
.pulse{width:12px;height:12px;border-radius:50%;background:var(--line)}
.pulse.on{background:var(--brass-ink)}

/* tuner */
.tuner{--t-bg:var(--velvet);--t-fg:var(--on-velvet);--t-muted:var(--on-velvet-muted);--t-track:rgba(255,255,255,.1);
  margin-top:2px;background:var(--t-bg);color:var(--t-fg);border-radius:22px;padding:22px 18px 20px;text-align:center;transition:background-color .12s linear,color .12s linear}
.tuner[data-s="good"]{--t-bg:#14775A;--t-fg:#FFFFFF;--t-muted:rgba(255,255,255,.92);--t-track:rgba(255,255,255,.2)}
.tuner[data-s="off"]{--t-bg:#EDBE3E;--t-fg:#1D1602;--t-muted:rgba(29,22,2,.76);--t-track:rgba(29,22,2,.15)}
.t-note{font-family:var(--font-cond);font-stretch:62%;font-weight:800;font-size:clamp(9rem,48vw,14rem);line-height:.86;letter-spacing:-.02em;min-height:.86em;white-space:nowrap}
.tuner[data-s="idle"] .t-note,.tuner[data-s="wait"] .t-note{opacity:.38}
.t-dir{font-family:var(--font-cond);font-stretch:75%;font-weight:800;font-size:2.3rem;line-height:1.1;margin-top:12px;min-height:1.1em}
.t-sub{font-size:1.05rem;color:var(--t-muted);min-height:1.5em;margin-top:2px;font-variant-numeric:tabular-nums}
.tm{position:relative;height:36px;margin-top:14px;border-radius:9px;background:var(--t-track);overflow:hidden}
.tm-zone{position:absolute;left:40%;width:20%;top:0;bottom:0;background:var(--t-track)}
.tm-mid{position:absolute;left:50%;width:2px;margin-left:-1px;top:0;bottom:0;background:var(--t-fg);opacity:.45}
.tm-needle{position:absolute;inset:0;opacity:0;transition:transform .09s linear}
.tm-needle::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:12px;margin-left:-6px;border-radius:6px;background:var(--t-fg)}
.tuner[data-s="good"] .tm-needle,.tuner[data-s="off"] .tm-needle{opacity:1}
.tm-ends{display:flex;justify-content:space-between;font-size:.85rem;color:var(--t-muted);margin-top:4px}
.t-meta{margin-top:10px;font-size:.95rem;color:var(--t-muted);min-height:1.5em}
.t-go{margin-top:14px;min-width:170px;min-height:58px;font-size:1.3rem;background:var(--brass);color:#1B1503}
.tuner:not([data-s="idle"]) .t-go{background:transparent;color:var(--t-fg);border:1.5px solid currentColor}
.tuner .notice{text-align:left}

/* fingerings */
.quiz-stage{margin-top:14px;background:var(--velvet);color:var(--on-velvet);border-radius:22px;padding:14px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:8px}
.quiz-stage .staff{width:min(260px,70vw)}
.quiz-stage .valves{gap:16px}
.quiz-stage .valve{width:clamp(70px,21vw,92px);font-size:1.6rem}
.check{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;cursor:pointer}
.check input{width:22px;height:22px;margin:0;accent-color:var(--brass-ink)}
.staff text{font-family:var(--font-cond);font-stretch:80%;font-weight:800;font-size:17px;fill:var(--brass);stroke:var(--velvet);stroke-width:5px;paint-order:stroke;stroke-linejoin:round}
.quiz-msg{min-height:2.8em;margin-top:12px;font-size:1.1rem;font-weight:550}
.quiz-msg.ok{color:var(--good-ink)}
.quiz-msg.no{color:var(--bad-ink)}
.chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.cell{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:8px 10px;min-height:46px;text-align:left}
.cell[aria-pressed="true"]{border-color:var(--brass-ink);box-shadow:0 0 0 1.5px var(--brass-ink) inset;background-image:linear-gradient(rgba(226,179,63,.17),rgba(226,179,63,.17))}
.cell b{font-family:var(--font-cond);font-stretch:80%;font-weight:700;font-size:1.05rem;white-space:nowrap}
.cell small{display:block;font-size:.7rem;color:var(--muted);font-weight:500;line-height:1}
.dots{display:flex;gap:3px}
.dots i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--brass-ink)}
.dots i.d{background:var(--brass-ink)}

/* log */
.headline{font-family:var(--font-cond);font-stretch:75%;font-weight:800;font-size:1.9rem;line-height:1.08;letter-spacing:-.01em;margin-top:6px}
.bars{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;align-items:end;height:120px}
.bar{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px;align-items:stretch}
.bar i{display:block;border-radius:4px 4px 2px 2px;background:var(--brass-ink);min-height:2px}
.bar.zero i{background:var(--line)}
.bar span{font-size:.7rem;text-align:center;color:var(--muted);line-height:1}
.bar.today span{color:var(--ink);font-weight:800}
.list{list-style:none;padding:0;margin:0}
.list li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.list li span:last-child{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.flat{color:var(--bad-ink)!important}.sharp{color:var(--brass-ink)!important}.intune{color:var(--good-ink)!important}
details{margin-top:1.6rem}
summary{font-weight:650;padding:11px 0;cursor:pointer}
textarea{width:100%;min-height:150px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);padding:10px;font-size:.85rem;line-height:1.4;resize:vertical}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav div{max-width:560px;margin:0 auto;display:flex}
.nav button{flex:1;border:0;background:transparent;min-height:58px;font-family:var(--font-cond);font-stretch:80%;font-weight:650;font-size:1rem;color:var(--muted);border-top:3px solid transparent;padding:0 2px}
.nav button[aria-current="page"]{color:var(--ink);border-top-color:var(--brass-ink);font-weight:800}

@media (prefers-reduced-motion: reduce){.needle,.tm-needle,.tuner{transition:none}}

/* page tabs: the views in the current nav section, shown when it has more than one */
.subnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:-4px 0 14px;padding-bottom:2px}
.subnav::-webkit-scrollbar{display:none}
.subnav[hidden]{display:none}
.subnav button{flex:0 0 auto;min-height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-family:var(--font-cond);font-stretch:85%;font-weight:650;font-size:.95rem}
.subnav button[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--page)}

/* account */
.account{margin-top:1.6rem;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.account h2{margin-top:0}
.account form{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.account input{flex:1 1 200px;min-height:46px;border:1.5px solid var(--line);border-radius:10px;background:var(--page);color:var(--ink);padding:.55rem .7rem;font:inherit}
.account .msg{margin-top:8px;min-height:1.4em}

/* tuner: drone and metronome */
.t-metro{margin-top:0;border-top:0;padding-top:10px}
.drone-dot{width:12px;height:12px;border-radius:50%;background:var(--line)}
.drone-dot.on{background:var(--good-ink)}