/* Bashidrum styles. GENERATED from the prototype by tools/port-prototype.mjs (its <style>, unchanged).
   The sign-in screens, account button and install bar are in shell.css. */
/* fonts: self-hosted copies of what the prototype loads from Google Fonts (Bricolage Grotesque 800 and Figtree 400-700 since r35,
   Poppins 400/600/800 and Caveat 600/700; all OFL) */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/figtree-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/figtree-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/caveat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-latin-700-normal.woff2) format('woff2')}
/* the page frame the prototype was designed in: safe-area padding on the root, no body margin */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
/* ===== brand tokens (the green palette, copied from the booking page) ===== */
:root { --green: #2EAA77; --green-dark: #248a60; --ink: #111; --muted: #5b5b5b; --line: #e3e3e3; --soft: #f3faf6; --warn: #b3261e; --green-ink: #1d6f4d; --selected: #e2f4ea; --catchup: #fff8e6; --catchup-ink: #7a5300; --daytime: #eef4ff; --daytime-ink: #2a4a8a; }
/* Single-theme by design: the brand is white-on-green in every viewer theme. */
/* ============ system: one type scale, one spacing scale, radii ============ */
:root{
  --f-display:'Poppins', Arial, sans-serif; --f-body:'Poppins', Arial, sans-serif; --f-mono:'Poppins', Arial, sans-serif; --f-hand:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --fs-display:1.15rem; --fs-title:1.05rem; --fs-body:15px; --fs-caption:12.5px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r:12px; --r-tile:14px; --r-card:18px; --tap:44px; --card-shadow:0 6px 20px rgba(0,0,0,0.08);
}
/* app tokens mapped onto the brand */
:root{
  color-scheme:light;
  --bg:var(--green); --surface:#fff; --surface-2:var(--soft); --paper:#fff; --ink-2:#3a3a3a; --staff:#6b6b6b;
  --accent:var(--green); --accent-ink:#fff; --accent-soft:var(--selected); --focus:rgba(46,170,119,0.45); --ring:var(--green-ink);
  --lv0:#f3faf6; --lv1:#9fd9bd; --lv2:#2EAA77; --lv3:#1d6f4d;
  --lv0i:#111; --lv1i:#111; --lv2i:#fff; --lv3i:#fff;
  --e0:#b9e2cd; --e1:#86cfab; --e2:#2EAA77; --e3:#1d6f4d;
  --c0:#2666a2; --c1:#9175c1; --c2:#9b690b; --c3:#944466; --c4:#d67a7b; --cx:#8a8a8a;
  --none:#fff; --locked:#f4f4f4; --locked-ink:#9a9a9a; --hatch:rgba(0,0,0,.06);
  --shadow:0 10px 30px rgba(0,0,0,.16);
  --danger:var(--warn); --good:var(--green-ink);
}
*{box-sizing:border-box}
html{font-size:100%} /* V2 a11y */
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--f-body);font-size:.9375rem;line-height:1.45;padding:0 16px;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){body{padding-bottom:40px}}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.01em}
.wrap{max-width:1120px;margin:0 auto}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-size:.7188rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.muted{color:var(--muted)}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);margin:0 -16px;padding:10px 16px 10px;border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:1120px;margin:0 auto}
.brand{display:flex;align-items:baseline;gap:8px;margin-right:auto}
.brand h1{font-size:1.3125rem}
.brand span{font-size:.75rem;color:var(--muted)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:999px;min-height:34px;font-size:.8438rem;font-weight:500;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.picker{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--muted)}
select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px;min-height:36px}

/* nav */
nav.tabs{display:flex;gap:4px}
nav.tabs button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:10px;color:var(--muted);font-size:.75rem;font-weight:500;min-width:64px;min-height:48px;justify-content:center}
nav.tabs button svg{width:22px;height:22px}
nav.tabs button[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
@media (max-width:699px){
  nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);justify-content:space-around;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
  nav.tabs button{flex:1}
}
@media (min-width:700px){
  nav.tabs{order:2}
  nav.tabs button{flex-direction:row;font-size:.875rem;min-height:38px;gap:6px}
  nav.tabs button svg{width:18px;height:18px}
}

main{max-width:1120px;margin:0 auto;padding-block:18px}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.view-head h2{font-size:1.625rem}
.view-head p{margin:2px 0 0;color:var(--ink-2);max-width:60ch}
.stats{display:flex;gap:18px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column}
.stat b{font-family:var(--f-mono);font-size:1.125rem;font-weight:500}
.stat span{font-size:.75rem;color:var(--muted)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.panel h3{font-size:1.0625rem;margin-bottom:4px}
.panel .sub{font-size:.8125rem;color:var(--muted);margin:0 0 12px}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.7812rem;color:var(--ink-2);align-items:center}
.legend i{display:inline-block;width:16px;height:16px;border-radius:4px;vertical-align:-3px;margin-right:6px}

/* rating swatches */
.lv{background:var(--none)}
.lv0{background:var(--lv0);color:var(--lv0i)}
.lv1{background:var(--lv1);color:var(--lv1i)}
.lv2{background:var(--lv2);color:var(--lv2i)}
.lv3{background:var(--lv3);color:var(--lv3i)}
.lvn{background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.lk{background:var(--locked);color:var(--locked-ink)}
.pend{outline:1.5px dashed var(--ink);outline-offset:2px}
.cell.pend{outline:1.5px dashed currentColor;outline-offset:-5px}
.chipwrap{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pendlbl{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;color:var(--muted);font-weight:500}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.adminseg{margin-bottom:16px}
.adminseg button{padding:8px 18px;min-height:40px;font-size:.9062rem}
.classp{margin-bottom:16px}
.classp input[type=search]{max-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-height:38px}
.classlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 10px;max-height:260px;overflow-y:auto;padding:2px}
.crow{display:flex;align-items:center;gap:8px;border:0;background:transparent;border-radius:8px;padding:6px 10px;min-height:40px;text-align:left;color:var(--ink)}
.crow:hover{background:var(--surface-2)}
.crow[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.crow[aria-pressed="true"] .cs{color:inherit;opacity:.75}
.crow .cn{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .cs{font-size:.75rem;color:var(--muted)}
.stupick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.stupick button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;min-height:40px;font-weight:500;display:inline-flex;gap:8px;align-items:center}
.stupick button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.count{font-family:var(--f-mono);font-size:.7188rem;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:0 7px;line-height:18px}
.hint{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--ink-2);border-radius:999px;padding:4px 6px 4px 12px;font-size:.8125rem;margin-bottom:14px}
.hint button{border:0;background:transparent;width:28px;height:28px;border-radius:50%;font-size:1rem;color:var(--muted)}
.grp-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:6px}
.grp-head h3{display:flex;align-items:center;gap:8px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:.7812rem;font-weight:600;white-space:nowrap}
.chip .mono{font-weight:500}
.tag{display:inline-block;font-size:.6875rem;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-weight:600;letter-spacing:.02em}
.tag.pending{background:var(--accent-soft);color:var(--accent)}
.tag.ok{color:var(--good)}

/* web */
.web-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:860px){.web-grid{grid-template-columns:minmax(0,1fr) 300px}}
.graph-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;position:relative}
.graph-wrap > svg{overflow:visible;display:block;width:100%;height:auto;margin:0 auto;touch-action:manipulation}
.node{cursor:pointer}
.node:focus{outline:none}
.node:focus-visible .halo{stroke:var(--focus);stroke-width:3}
.edge{fill:none;transition:opacity .15s}
.toggles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tog{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:.8125rem;min-height:36px;color:var(--ink-2)}
.tog[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cg{display:inline-block;vertical-align:-3px;flex:none}
.catlegend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.7812rem;color:var(--ink-2)}
.catlegend span{display:inline-flex;align-items:center;gap:6px}
.legend-block+.legend-block{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.legend-block .eyebrow{margin-bottom:6px}
.skname{display:inline-flex;align-items:center;gap:6px}
.side{display:flex;flex-direction:column;gap:12px}

/* matrix */
.mx-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px}
table.mx{border-collapse:separate;border-spacing:2px;margin:0 auto}
.mx th{font-weight:500;font-size:.75rem;color:var(--ink-2)}
.mx thead th{vertical-align:bottom;padding:0 0 6px}
.mx tbody th{text-align:right;padding-right:8px;white-space:nowrap;position:sticky;left:0;background:var(--surface);z-index:1}
.mx tbody th .rh{display:inline-flex;align-items:center;gap:6px;flex-direction:row-reverse}
.mx .lb{display:none}
@media (max-width:600px){.mx .nm{display:none}.mx .lb{display:inline}}
.colh{display:flex;flex-direction:column-reverse;align-items:center;gap:5px}
.colh span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:.7188rem}
.cell{width:44px;height:44px;border:0;border-radius:6px;font-family:var(--f-mono);font-size:.75rem;padding:0;display:block}
.cell.diag{box-shadow:inset 0 0 0 2px var(--ink);border-radius:50%}
.cell.lk{cursor:not-allowed}
.cell:hover:not(.lk){filter:brightness(1.08)}
.readout{min-height:22px;font-size:.8438rem;color:var(--ink-2);margin:10px 2px 0}
.axis-note{font-size:.75rem;color:var(--muted);margin:0 0 8px}

/* lists */
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .t{font-weight:500}
.row .t .arrow{color:var(--muted);padding:0 4px}
.row .m{font-size:.7812rem;color:var(--muted);margin-top:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row .acts{display:flex;gap:6px;align-items:center}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 14px;min-height:40px;font-weight:500;font-size:.875rem}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.small{padding:6px 11px;min-height:36px;font-size:.8125rem}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.cols{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:860px){.cols{grid-template-columns:1fr 1fr}}
.linkbtn{border:0;background:none;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:8px 0;font-size:.8438rem}
.empty{padding:14px 0;color:var(--muted);font-size:.875rem}

/* admin */
.grp{margin-top:12px}
.grp:first-child{margin-top:0}
.switch{position:relative;width:46px;height:28px;border-radius:999px;border:0;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.switch[aria-checked="true"]{background:var(--lv1)}
.switch[aria-checked="true"]::after{left:21px}
form.inline{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
form.inline input,form.inline select{flex:1 1 150px;min-width:0}
input[type=text],input[type=number],textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:40px;width:100%}
label.f{display:block;font-size:.7812rem;color:var(--muted);margin:14px 0 6px;font-weight:500}
.note{font-size:.7812rem;color:var(--muted);margin-top:18px}

/* sheet */
.backdrop{position:fixed;inset:0;background:rgba(10,16,18,.42);z-index:40}
.sheet{position:fixed;z-index:41;background:var(--surface);box-shadow:var(--shadow);overflow:auto;left:0;right:0;bottom:0;max-height:86vh;border-radius:18px 18px 0 0;padding:8px 18px calc(20px + env(safe-area-inset-bottom,0px))}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--line);margin:4px auto 10px}
@media (min-width:860px){
  .sheet{left:auto;top:0;bottom:0;right:0;width:400px;max-height:none;border-radius:0;padding:22px 24px}
  .sheet .grab{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:up .22s ease-out}
  @keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
}
.sheet-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:12px}
.sheet-head h3{font-size:1.3125rem}
.x{border:0;background:var(--surface-2);border-radius:50%;width:36px;height:36px;font-size:1.125rem;line-height:1;flex:none}
.lvpick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lvpick button{border:0;border-radius:10px;min-height:52px;font-weight:600;font-size:.8125rem;opacity:.55}
.lvpick button[aria-checked="true"]{opacity:1;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.stepper{display:flex;gap:8px;align-items:stretch}
.stepper button{width:52px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;font-size:1.25rem}
.stepper input{text-align:center;font-family:var(--f-mono);font-size:1.25rem}
.cmp{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.8438rem;align-items:center;background:var(--bg);border-radius:10px;padding:10px 12px}
.cmp>span:nth-child(odd){color:var(--muted)}
.sheet .actions{display:flex;gap:8px;margin-top:18px}
.sheet .actions .btn{flex:1}
.sec-title{margin:18px 0 4px}
@media (max-width:600px){.view-head h2{font-size:1.375rem}.view-head p{font-size:.8438rem}.stats{gap:12px}.stat b{font-size:.9375rem}.stat span{font-size:.6875rem}.top-row{gap:8px}.seg button{padding:6px 10px}}
.sync{font-style:normal;font-size:.7188rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);align-self:center;white-space:nowrap}
.sync.off,.sync.error{background:var(--accent-soft);color:var(--accent)}
.sync{border:0;font-family:inherit;cursor:default}.sync.error{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.errbox{font-family:ui-monospace,Menlo,monospace;font-size:.7812rem;background:var(--surface-2);border-radius:8px;padding:10px 12px;white-space:pre-wrap;word-break:break-word;margin:10px 0}
.pchip{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;padding:2px 8px 2px 3px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-weight:500}
.pchip.root{padding:2px 8px;font-weight:600;letter-spacing:.02em}
.pchip.met{box-shadow:inset 0 0 0 1.5px var(--good)}
.pchip.unmet{opacity:.7;box-shadow:inset 0 0 0 1px var(--line)}
.deprow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:.8125rem}
.deppanel summary{cursor:pointer;list-style-position:outside}
.deptree{list-style:none;margin:6px 0 0;padding:0;max-height:340px;overflow:auto;font-size:.8438rem}
.deptree li{padding:3px 0 3px calc(var(--d)*18px + 2px);border-left:0;position:relative}
.deptree li::before{content:"";position:absolute;left:calc(var(--d)*18px - 10px);top:0;bottom:50%;width:8px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.deptree li[style*="--d:0"]::before{display:none}
.ovrow{padding:12px 0;border-top:1px solid var(--line)}
.ovrow:first-of-type{border-top:0}
.ovhead{display:flex;flex-direction:column;gap:1px;margin-bottom:8px;font-size:.8438rem}
.ovhead .muted{font-size:.7812rem}
.ovctl{display:flex;gap:8px}
.ovctl select{flex:1;min-width:0}
.ovchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ovchip{display:inline-flex;align-items:center;gap:2px;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 2px 2px 10px;font-size:.7812rem;font-weight:600}
.ovchip button{border:0;background:transparent;color:inherit;width:26px;height:26px;border-radius:50%;font-size:.9375rem}
.ovb{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:.625rem;margin-right:6px;vertical-align:-3px}
.chk{display:flex;align-items:center;gap:8px;font-size:.875rem;padding:6px 0;min-height:36px}
.chk input{width:18px;height:18px;accent-color:var(--lv1)}
.prfield{border:0;padding:0;margin:0}
.prlist{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px 12px;margin-top:6px}
.prgrp{padding:6px 0}
.mini{border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:.7188rem;padding:2px 8px;margin-left:6px;color:var(--ink-2)}
.cell.chunkcell{box-shadow:inset 0 0 0 2px var(--surface)}
.node.ring text{pointer-events:none}
.nota-svg{display:block;max-width:100%;height:auto;color:var(--ink);fill:currentColor;overflow:visible}
.nota-svg line,.nota-svg path{stroke:currentColor}
.nota-svg .nl{stroke-width:.8;opacity:.5}
.nota-svg .nl2{stroke-width:1.1}
.nota-svg .bl{stroke-width:1.1}
.nota-svg .st{stroke-width:1.2}
.nota-svg .xh{stroke-width:1.5;fill:none}
.nota-svg .oh{fill:none;stroke:currentColor;stroke-width:1.3}
.nota-svg .fl,.nota-svg .bz,.nota-svg .tie,.nota-svg .gp,.nota-svg .tb,.nota-svg .rs,.nota-svg .rq,.nota-svg .acc{fill:none}
.nota-svg .fl{stroke-width:1.5}
.nota-svg .bz{stroke-width:1.4}
.nota-svg .dd{stroke-width:2.2}
.nota-svg .gs{stroke-width:1}
.nota-svg .tie{stroke-width:1.1}
.nota-svg .acc{stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.nota-svg .rq{stroke-width:2.1;stroke-linejoin:round}
.nota-svg .rs{stroke-width:1.4}
.nota-svg .gp,.nota-svg .tb{stroke-width:1}
.nota-svg text{stroke:none}
.nota-svg .ts{font:700 1.0625rem 'Poppins',Arial,sans-serif;text-anchor:middle}
.nota-svg .tn{font:600 .6562rem 'Poppins',Arial,sans-serif;text-anchor:middle}
.nota-svg .slbl{font:600 .75rem var(--f-body);fill:var(--ink-2)}
.nota-svg .stk{font:700 .75rem var(--f-body);text-anchor:middle;fill:var(--ink-2)}
@media (min-width:860px){.sheet.wide{width:min(620px,100vw)}}
.sdesc{margin:6px 0 0;color:var(--ink-2);font-size:.875rem;max-width:60ch}
.lockbox{margin-top:14px;background:var(--bg);border-radius:12px;padding:12px}
.lockbox p{margin:0 0 6px}
.linkish{border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit;font-weight:500}
.linkish:hover{text-decoration:underline;text-underline-offset:3px}
.row .acts{flex-wrap:wrap;justify-content:flex-end}
.exlist{display:flex;flex-direction:column;gap:8px}
details.ex{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
details.ex>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:52px}
details.ex>summary::-webkit-details-marker{display:none}
details.ex>summary::before{content:"";width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);flex:none;margin:0 4px 0 2px}
details.ex[open]>summary::before{transform:rotate(45deg)}
.exh{display:flex;flex-direction:column;flex:1;min-width:0}
.ext{font-weight:600}
.exm{font-size:.75rem;color:var(--muted)}
.exlast{flex:none}
.exbody{padding:2px 12px 14px;border-top:1px solid var(--line)}
.nota{margin:10px 0 4px;overflow-x:auto;min-height:40px}
.nota.prev{border:1px dashed var(--line);border-radius:10px;padding:8px;margin-top:10px}
.exnote{margin:6px 0 0;font-size:.875rem}
.exfocus{margin:4px 0 0;font-size:.8438rem;color:var(--ink-2)}
.exfocus b{font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-right:6px}
.met{margin-top:12px;padding:10px;border-radius:10px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.met.on{box-shadow:inset 0 0 0 1.5px var(--lv1)}
.metrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.metrow.sm{font-size:.8125rem;color:var(--ink-2)}
.metrow.sm select{min-height:34px;padding:4px 6px}
.metrow.sm input[type=range]{width:96px}
.met input[type=range]{accent-color:var(--lv1)}
.met>.mslider,.met>input[type=range]{width:100%}
.stepper.sm button{width:40px;min-height:36px;font-size:1.125rem}
.stepper.sm input{width:72px;font-size:1rem;min-height:36px;padding:4px}
.mdot{width:12px;height:12px;border-radius:50%;background:var(--line);flex:none}
.mdot.hit{animation:mbeat .2s ease-out}
.mdot.one.hit{animation-name:mbeat1}
@keyframes mbeat{from{background:var(--lv2);transform:scale(1.4)}to{background:var(--line);transform:scale(1)}}
@keyframes mbeat1{from{background:var(--accent);transform:scale(1.6)}to{background:var(--line);transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.mdot.hit,.mdot.one.hit{animation-duration:.01s}}
.trans{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.trans summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}
.sec-sub{font-size:.875rem;margin:14px 0 4px;font-family:var(--f-body)}
.err{color:var(--danger);font-size:.8125rem;margin:6px 0 0}
.cheat{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.cheat summary{cursor:pointer;font-weight:600;font-size:.875rem;min-height:36px;display:flex;align-items:center}
.cheatl{margin:8px 0;padding-left:18px;font-size:.8125rem;color:var(--ink-2)}
.cheatl li{margin:3px 0}
.cheatex{margin-top:10px}
.cheatex pre{font-family:var(--f-mono);font-size:.75rem;background:var(--bg);padding:6px 8px;border-radius:6px;white-space:pre-wrap;margin:4px 0;overflow-x:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
textarea.mono{font-family:var(--f-mono);font-size:.8125rem;line-height:1.5}
#webSvg{-webkit-user-select:none;user-select:none}
#webSvg,#webSvg .node[data-node]{touch-action:pan-y}
#webSvg .node.armed .halo{stroke:var(--green);stroke-width:4;animation:armpulse .6s ease-out infinite}
@keyframes armpulse{0%{stroke-opacity:1}100%{stroke-opacity:.2}}
@media (prefers-reduced-motion:reduce){#webSvg .node.armed .halo{animation:none}}
#webSvg .node[data-node]:not(.ring){cursor:grab}
/* V2.14 web: edit mode */
#webSvg .nminus{display:none;cursor:pointer}
#webSvg.editing .nminus{display:inline}
#webSvg.editing .node[data-node]{cursor:default}
#webSvg .nj{transform-box:fill-box;transform-origin:center}
#webSvg.editing .node.infocus .nj{animation:webjig .28s ease-in-out var(--jd,0s) infinite alternate}
@keyframes webjig{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
@media (prefers-reduced-motion:reduce){#webSvg.editing .node.infocus .nj{animation:none}}
.toggles .webfocush{margin:0 0 0 4px;font-size:1rem;font-weight:700;align-self:center;white-space:nowrap}
.toggles .webfocush .mono{color:var(--muted);font-weight:600}
.toggles .webfocush{order:2}.toggles [data-act=collapseall]{order:3}.toggles #webSelTog{order:3}
.toggles .webeditbtn{margin-left:auto;order:4}
.toggles .webhint{order:5;flex-basis:100%}
.toggles .webeditbtn.done{background:var(--pr-accent,#1B7F53);color:#fff;border-color:transparent;font-weight:700;border-radius:999px;padding:0 18px}
.tray .libsub{margin:-2px 0 8px;font-size:.78rem;color:var(--muted)}
.tray.editing{background:color-mix(in srgb,var(--pr-mint,#DCEFE4) 45%,transparent);border-radius:12px}
.tchip.dropin{animation:libdrop .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes libdrop{from{transform:translateY(-22px) scale(.8);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tchip.dropin{animation:none}}
#webSvg.dragging{touch-action:none;cursor:grabbing}
#webSvg.dragging .node.cand .halo{stroke:var(--lv1);stroke-dasharray:3 3}
#webSvg.dragging .node.hot .halo{stroke:var(--accent);stroke-width:5;stroke-dasharray:none}
#webSvg.dragging .node.nogo{opacity:.35}
#webSvg.dragging .node.nogo.hot{opacity:.8}
#webSvg .weakchip{cursor:pointer}
#webSvg.dragging .mesh:not(.grow):not(.plan){stroke-opacity:.04}
#webSvg.dragging .mesh.hot:not(.grow):not(.plan){stroke-opacity:.2}
#webSvg path.would{stroke:var(--would,#2EAA77);stroke-opacity:.95!important;opacity:1;stroke-width:4px}
#webSvg .weakchip:focus-visible rect{stroke:var(--green);stroke-width:3}
#webSvg .node:focus-visible{outline:none}
#webSvg .node:focus-visible>circle:first-child{stroke:var(--green);stroke-width:3}
#webSvg .thl{font:600 .75rem var(--f-body);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.arrow{padding:0 5px;color:var(--muted);font-weight:400}
.tray{border-top:1px solid var(--line);margin-top:6px;padding:10px 8px 4px}
.tray-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.traychips{display:flex;flex-wrap:wrap;gap:6px}
.tchip{display:inline-flex;align-items:center;gap:2px;background:var(--surface-2);border-radius:999px;padding:2px 2px 2px 8px;font-size:.7812rem}
.tchip .linkish{font-size:.7812rem;font-weight:500;display:inline-flex;gap:5px;align-items:center}
.tplus{border:0;background:var(--surface);color:var(--ink);width:28px;height:28px;border-radius:50%;font-size:1rem;line-height:1;box-shadow:inset 0 0 0 1px var(--line)}
.tplus:hover{background:var(--lv1);color:var(--lv1i)}
.lvtag{display:inline-block;font-size:.6875rem;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-family:var(--f-mono);vertical-align:1px}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.focusline{display:flex;align-items:center;gap:10px;margin-top:14px}
.mtbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mtbar input[type=search]{flex:1 1 200px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-height:38px}
.mgroups{display:flex;flex-direction:column;gap:12px;margin-top:12px}
details.mgrp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:40px}
details.mgrp>summary::-webkit-details-marker{display:none}
details.mgrp>summary h3{display:flex;align-items:center;gap:8px;margin:0}
details.mgrp>summary::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);margin-left:auto}
details.mgrp[open]>summary::after{transform:rotate(-135deg)}
details.deppanel>summary{cursor:pointer}
.side .row{grid-template-columns:1fr}
.side .row .acts{justify-content:flex-start}
.celtoast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;z-index:60;display:flex;align-items:center;gap:12px;max-width:min(420px,calc(100vw - 32px));padding:12px 16px;border-radius:16px;background:var(--pr-dark,#10241b);color:var(--pr-dark-ink,#fff);box-shadow:0 8px 28px rgba(0,0,0,.25);transition:transform .25s ease,opacity .25s ease;pointer-events:none}
.celtoast.in{transform:translate(-50%,0);opacity:1}
.celtoast.bigger{padding:16px 22px;box-shadow:0 10px 30px rgba(16,36,27,.28)}.celtoast.bigger .ctico svg{width:52px;height:52px}.celtoast.bigger .cttx b{font-size:1.25rem}.celtoast.bigger .cteb{color:var(--pr-accent,#1B7F53);font-weight:700}
.celtoast .ctico svg{width:40px;height:40px;display:block}
.celtoast .cttx{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.celtoast .cttx b{font-size:1rem;font-weight:700}
.celtoast .cttx span{font-size:.875rem;opacity:.85}
.celtoast .cteb{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
@media (min-width:700px){.celtoast{bottom:28px}}
@media (prefers-reduced-motion: reduce){.celtoast{transition:none}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.875rem;z-index:50;box-shadow:var(--shadow)}
@media (min-width:700px){.toast{bottom:28px}}
.plan .pbar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:4px}
.plan .pbar i{display:block;height:100%;background:var(--lv2);border-radius:4px;transition:width .3s}
.plan .grp-head,.refresher .grp-head{flex-wrap:wrap;gap:8px}
.tick{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.6px solid var(--muted);color:transparent;flex:none;margin-right:8px}
.tick.on{background:var(--lv2);border-color:var(--lv2);color:var(--lv2i)}
details.ex.isdone .ext{color:var(--muted)}
.refresher{border-left:4px solid var(--lv1)}
.lessoncard{border-left:4px solid var(--lv2)}
.lessoncard p{margin:4px 0}
.tempoline{font-size:.8125rem;color:var(--muted);margin:0 0 6px}
.tempoline b{color:var(--ink);font-weight:600}
.thint{font-size:.8125rem;margin:0 0 8px;color:var(--ink)}
.cleanrow{gap:10px;flex-wrap:wrap;font-size:.8125rem}
.rfchip{font-size:.6875rem;padding:1px 7px;border-radius:9px;border:1px solid var(--lv1);color:var(--ink);white-space:nowrap}
.lesson{display:flex;flex-direction:column;gap:16px}
.lesson .btn.big,.lesson select.big,.lesson input.big,.panel.lesson .btn.big{min-height:48px;font-size:1rem;padding:10px 16px}
select.big,input.big{min-height:48px;font-size:1rem}
.lesson textarea{width:100%;font-size:1rem;box-sizing:border-box}
.lesson .lh{margin:0 0 10px}
.lcard{margin-bottom:12px}
.lcard .nota{overflow-x:auto}
.lbtns{flex-wrap:wrap}
.flagform{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
.flagform>*{min-width:0;max-width:100%}
@media (min-width:720px){.flagform{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto}}
.panel.lesson select{width:100%}
/* student tab colours */
body[data-role="student"] header.top{background:color-mix(in srgb,var(--tabc,var(--bg)) 13%,var(--bg));border-bottom:2px solid var(--tabc,var(--line))}
body[data-role="student"][data-view="go"]{--tabc:var(--t-go)}
body[data-role="student"][data-view="web"]{--tabc:var(--t-skills)}
body[data-role="student"][data-view="matrix"]{--tabc:var(--t-map)}
body[data-role="student"] nav.tabs button[data-tab="go"]{--tc:var(--t-go)}
body[data-role="student"] nav.tabs button[data-tab="web"]{--tc:var(--t-skills)}
body[data-role="student"] nav.tabs button[data-tab="matrix"]{--tc:var(--t-map)}
body[data-role="student"] nav.tabs button svg{color:var(--tc)}
body[data-role="student"] nav.tabs button[aria-current="page"]{background:color-mix(in srgb,var(--tc) 18%,var(--surface));color:var(--ink);box-shadow:inset 0 -3px 0 var(--tc)}
.intro{display:flex;align-items:flex-start;gap:10px;border-radius:12px;padding:10px 12px;margin:14px 0 0;background:color-mix(in srgb,var(--tabc,var(--accent)) 12%,var(--surface));border-left:4px solid var(--tabc,var(--accent))}
.intro p{margin:0;flex:1;font-weight:500}
.intro .x{border:0;background:transparent;font-size:1.25rem;line-height:1;padding:2px 6px;min-width:32px;min-height:32px;color:var(--muted)}
.introq{border:1px solid var(--line);background:var(--surface);border-radius:50%;width:24px;height:24px;font-size:.8125rem;font-weight:700;line-height:1;vertical-align:middle;margin-left:6px;color:var(--muted);padding:0}
.go .gohero{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gobtn{border:0;border-radius:999px;min-width:132px;min-height:72px;padding:0 36px;font-size:1.875rem;font-weight:800;letter-spacing:.02em;background:var(--t-go);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.gobtn:active{transform:translateY(1px)}
.gosub{margin:10px 0 0}
.panel.go,.panel.more,.lessoncard{margin-top:16px}
.more>summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;cursor:pointer}
.more>summary h3{display:inline}
.morebody{margin-top:12px;display:flex;flex-direction:column;gap:16px}
.met.fixed .ro{font-size:.9375rem}
.met.fixed .ro b{font-size:1.375rem}
.lad{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.lad .lrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lad .lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.lad .rung{font-size:1.375rem}
.lad .dots{display:inline-flex;gap:5px;margin:0 6px;align-self:center}
.lad .dots i{width:12px;height:12px;border-radius:50%;border:1.6px solid var(--lv2);display:block}
.lad .dots i.on{background:var(--lv2)}
.lad .lbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lad .lbtns .btn{min-height:48px;font-size:.9375rem}
.cpnote{font-size:.8438rem;margin:8px 0 0}
.lad.cp{border-top-color:var(--lv1)}
.vid{width:100%;max-height:360px;border-radius:10px;background:#000;margin:4px 0 10px;display:block}
.vidcard{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);text-decoration:none;margin:4px 0 10px}
.vidcard .play{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);flex:none}
.vidcard .vt{display:flex;flex-direction:column;min-width:0}
.vidcard small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vidform .inline{display:flex;gap:8px}
.vidform input{flex:1;min-width:0}
#skVideo{width:100%}

/* ============ system layer ============ */
[hidden]{display:none!important}
html,body{margin:0}
.view-head p.strip{font-size:var(--fs-caption);margin:0;max-width:none;color:var(--muted)}
.mxlegend{margin-top:var(--s4)}
.mx-scroll{margin-top:var(--s2)}
.more .mh{display:flex;flex-direction:column;gap:2px}
body{font-size:var(--fs-body);line-height:1.5;background:var(--bg)}
.eyebrow{font-size:var(--fs-caption);letter-spacing:.08em}
header.top{padding:var(--s2) var(--s4);background:var(--bg);border-bottom:1px solid var(--line)}
.top-row{gap:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s2);margin-right:auto;min-height:var(--tap)}
.logo{width:22px;height:22px;color:var(--brand);flex:none}
.bname{font-family:var(--f-display);font-weight:700;font-size:.9375rem;letter-spacing:-.01em}
.bschool{font-size:var(--fs-caption);color:var(--muted)}
.adminctl{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.adminctl select{min-height:var(--tap)}
.demo{display:flex;justify-content:center;max-width:1120px;margin:var(--s5) auto 0}
.demo .linkbtn{color:var(--muted);font-size:var(--fs-caption)}
main{padding-block:var(--s2) var(--s5)}
.view-head{margin:var(--s4) 0;gap:var(--s3);align-items:flex-end}
.view-head h1,.view-head h2{font-family:var(--f-display);font-size:var(--fs-display);line-height:1.15;font-weight:700}
.view-head .eyebrow{margin-bottom:var(--s1)}
.view-head p{font-size:var(--fs-body);color:var(--ink-2);margin:var(--s1) 0 0;max-width:62ch}
/* stats: one strip */
.strip{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:0;font-size:var(--fs-caption);color:var(--muted);align-items:baseline}
.strip b{color:var(--ink);font-weight:500;font-size:.875rem;margin-right:2px}
p.strip{padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--surface-2);width:100%}
p.strip span+span::before{content:"·";margin-right:var(--s4);color:var(--muted)}
.stats.strip .stat{flex-direction:row;gap:6px;align-items:baseline}
.stats.strip .stat b{font-size:.875rem}
.stats.strip .stat span{font-size:var(--fs-caption)}
/* cards */
.panel{border-radius:var(--r);padding:var(--s4);border:1px solid var(--line);background:var(--surface)}
.panel h3,.go h3,.more h3{font-family:var(--f-display);font-size:var(--fs-title);line-height:1.3}
.panel ul.howto{list-style:none;margin:0 0 12px;padding:0;font-size:var(--fs-caption);color:var(--muted);display:grid;gap:6px}.panel ul.howto li{padding-left:12px;position:relative;line-height:1.45}.panel ul.howto li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--green)}.panel ul.howto b{color:var(--ink);font-weight:600}
.panel .sub{font-size:var(--fs-caption);color:var(--muted);margin:var(--s1) 0 var(--s3)}
.cols,.side,.lesson,.morebody{gap:var(--s4)}
.refresher,.lessoncard{border-left:1px solid var(--line)}
.lessoncard{margin-top:var(--s4)}
.lessoncard .eyebrow{color:var(--brand)}
.graph-wrap,.mx-scroll{border-radius:var(--r)}
/* lists of exercises inside a card read as rows, never as cards in cards */
.panel .exlist,.sheet .exlist{gap:0}
.panel .exlist details.ex,.sheet .exlist details.ex{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.panel .exlist details.ex:first-child,.sheet .exlist details.ex:first-child{border-top:0}
.panel .exlist details.ex>summary,.sheet .exlist details.ex>summary{padding-inline:0}
.panel .exlist .exbody,.sheet .exlist .exbody{border-top:0;padding-inline:0}
details.ex{border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
details.ex>summary{min-height:56px;padding:var(--s3) var(--s4)}
.exbody{padding:0 var(--s4) var(--s4);border-top:0}
.ext{font-size:var(--fs-body)}
.exm{font-size:var(--fs-caption)}
.exnote{font-size:var(--fs-body);margin:var(--s2) 0 0}
.exfocus{font-size:var(--fs-caption)}
.nota{margin:var(--s3) 0}
.nota-svg .nl{stroke:var(--staff);opacity:1;stroke-width:.9}
.nota-svg .slbl,.nota-svg .stk{fill:var(--ink-2)}
.met{border-radius:var(--r);padding:var(--s3);background:var(--bg);gap:var(--s2);margin-top:var(--s3)}
.cmp,.lockbox,.errbox,.cheat,.prlist{border-radius:var(--r)}
/* controls: 44px targets, one radius */
.btn{min-height:var(--tap);border-radius:var(--r);padding:0 var(--s4);font-size:.875rem}
.btn.small{min-height:var(--tap);padding:0 var(--s3);font-size:.8438rem}
.btn.wide{width:100%}
.seg{border-radius:999px;padding:3px}
.seg button{min-height:38px}
@media (pointer:coarse){.seg button{min-height:var(--tap)}}
.tog,.crow,.chk,.linkbtn{min-height:var(--tap)}
.linkbtn{display:inline-flex;align-items:center}
.x{width:var(--tap);height:var(--tap)}
input[type=text],input[type=number],input[type=url],input[type=search],textarea,select{border-radius:var(--r);min-height:var(--tap)}
input[type=url]{background:var(--surface);border:1px solid var(--line);padding:8px 10px;width:100%}
.stepper button{border-radius:var(--r)}
.introq,.tplus,.ovchip button,.hint button{position:relative}
.introq::after,.tplus::after,.ovchip button::after,.hint button::after{content:"";position:absolute;inset:-10px}
.toast{border-radius:var(--r)}
.sheet{border-radius:var(--r) var(--r) 0 0}
@media (min-width:860px){.sheet{border-radius:0}}
/* tabs: bottom bar on phone, tint only on the header band and the active tab */
nav.tabs button{min-height:52px;border-radius:var(--r)}
@media (max-width:699px){nav.tabs{padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom,0px));gap:var(--s1)}}
body[data-role="student"] header.top{background:color-mix(in srgb,var(--tabc,var(--bg)) 7%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--tabc,var(--line)) 30%,var(--line))}
body[data-role="student"] nav.tabs button svg{color:inherit}
body[data-role="student"] nav.tabs button[aria-current="page"]{background:color-mix(in srgb,var(--tc) 14%,var(--surface));box-shadow:none;color:var(--ink)}
body[data-role="student"] nav.tabs button[aria-current="page"] svg{color:var(--tc)}
.intro{background:var(--surface-2);border:0;border-radius:var(--r);margin:var(--s4) 0 0;padding:var(--s2) var(--s2) var(--s2) var(--s4);align-items:center}
.intro .x{min-width:var(--tap);min-height:var(--tap);background:transparent}
/* Quick practice */
.go.hero{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);margin:var(--s2) 0 var(--s5)}
.gobtn{width:100%;min-height:64px;border-radius:999px;padding:0 var(--s5);font-family:var(--f-display);font-size:1.625rem;font-weight:700;letter-spacing:.01em;background:var(--t-go);color:var(--go-ink);border:0;box-shadow:0 6px 20px color-mix(in srgb,var(--t-go) 35%,transparent)}
.gobtn:hover{filter:brightness(1.06)}
.go .gomins{align-self:center}
.go .gomins button{font-size:.8125rem;padding:0 var(--s4)}
.gostatus{margin:0;text-align:center;color:var(--ink-2);font-size:var(--fs-caption)}
.go.session{margin:var(--s2) 0 var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.go.session .grp-head{flex-wrap:wrap;gap:var(--s2);margin:0}
.go.session h3 .mono{font-size:.8125rem;font-weight:500}
.go.session .sub{font-size:var(--fs-caption);color:var(--muted);margin:0}
.go.session .actions{margin-top:var(--s2)}
.plan .pbar{height:6px;border-radius:999px;background:var(--surface-2)}
.plan .pbar i{background:var(--t-go);border-radius:999px}
.gocards{gap:var(--s3)}
.more{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s2)}
.more>summary{min-height:var(--tap);align-items:center;list-style:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);margin-left:auto}
.more[open]>summary::after{transform:rotate(-135deg)}
.more>summary .muted{font-size:var(--fs-caption)}
.morebody{margin-top:var(--s3)}
.lad{border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s1)}
.lad .lbtns .btn{min-height:var(--tap);font-size:.875rem}


/* ============ brand layer: the booking page look ============ */
/* round 18: contrast, selection, alignment */
:root{--lv2i:#111}
p.strip span+span::before{content:none}
p.strip{gap:4px 18px}
.lesson .lh,.lesson .lh .muted{color:#fff}
@media (max-width:600px){.brandrow{flex-wrap:wrap}.hdr-end{flex:1 1 100%;align-items:flex-start;margin-left:0}.adminctl{justify-content:flex-start}}
.hand{white-space:nowrap}
html,body{background:var(--green)}
body{font-family:'Poppins', Arial, sans-serif;font-weight:400;color:var(--ink);min-height:100vh;overflow-x:hidden;line-height:1.5;padding:0 16px calc(96px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){body{padding-bottom:40px}}
h1,h2,h3,.panel h3,.go h3,.more h3,.sheet-head h3,.view-head h1,.view-head h2{font-family:'Poppins', Arial, sans-serif;font-weight:600;letter-spacing:0}
.mono{font-family:'Poppins', Arial, sans-serif;font-variant-numeric:tabular-nums}
.eyebrow{letter-spacing:.06em;font-weight:600}
:focus-visible,input:focus{outline:3px solid rgba(46,170,119,0.45);outline-offset:1px}
.bg{position:fixed;left:0;top:-40px;width:100%;height:calc(100% + 80px);z-index:0;pointer-events:none;animation:float 26s ease-in-out infinite alternate;will-change:transform}
@keyframes float{from{transform:translate3d(0,0,0)}to{transform:translate3d(-12px,-34px,0)}}
@media (prefers-reduced-motion:reduce){.bg{animation:none}}
/* one column: 580px, wider card for the web and the map on desktop */
header.top,main,.demo{position:relative;z-index:1;max-width:580px;margin-left:auto;margin-right:auto}
@media (min-width:860px){body[data-view="web"] main,body[data-view="matrix"] main{max-width:960px}}
.cols,.web-grid{grid-template-columns:1fr!important}
@media (min-width:860px){body[data-view="web"] .web-grid{grid-template-columns:minmax(0,1fr) 300px!important}}
/* header */
header.top{position:relative;top:auto;background:transparent;border:0;padding:20px 0 0;color:#fff;z-index:20}
.brandrow{display:flex;align-items:center;gap:18px;margin:4px 0 12px;min-height:112px}
.logo{width:112px;height:112px;display:block;flex:0 0 auto;border-radius:50%}
.hand{font-family:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;font-weight:700;font-size:2rem;line-height:1.1;margin:0;transform:rotate(-6deg);transform-origin:left center;text-shadow:0 2px 0 rgba(0,0,0,0.12);color:#fff}
.hdr-end{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.adminctl{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.adminctl .picker{color:#fff;font-size:.85rem}
.adminctl select{border:0;border-radius:999px;padding:0 14px;min-height:44px;background:#fff;color:#111;font-family:inherit}
.touch{background:#fff!important;color:var(--green-ink)!important;border:0!important;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.sync{background:#fff;color:var(--green-ink);border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.sync.off,.sync.error{background:#fff;color:var(--warn)}
@media (max-width:480px){.brandrow{gap:14px;min-height:78px}.logo{width:78px;height:78px}.hand{font-size:1.6rem}}
.pagetitle{font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,12vw,4rem);line-height:1;letter-spacing:-0.03em;margin:8px 0 14px;text-align:center;text-wrap:balance;color:#fff;font-family:'Poppins', Arial, sans-serif}
/* the student name and a short line sit on the green, like the booking lede */
.view-head{flex-direction:column;align-items:stretch;text-align:center;color:#fff;margin:0 0 16px;gap:10px}
.view-head .eyebrow{display:none}
.view-head h1,.view-head h2{font-size:1.15rem;font-weight:600;color:#fff}
.view-head p{color:#fff;margin:4px auto 0;font-size:1rem}
.view-head p.strip,.strip{color:#111}
p.strip{background:#fff;border:0;border-radius:999px;justify-content:center;box-shadow:var(--card-shadow);padding:10px 16px;font-size:.85rem;color:var(--muted)}
.stats.strip{background:#fff;border-radius:18px;padding:12px 16px;justify-content:center;box-shadow:var(--card-shadow)}
.strip b{color:#111;font-weight:600}
.introq{background:#fff;color:var(--green-ink);border:0}
/* cards */
.panel,.graph-wrap,.mx-scroll,.intro,.lessoncard,details.ex{background:#fff;border:0;border-radius:18px;box-shadow:0 6px 20px rgba(0,0,0,0.08)}
.panel{padding:18px 16px;margin:0 0 16px}
.graph-wrap,.mx-scroll{padding:12px}
.panel h3{font-size:1.15rem;font-weight:600;margin:0 0 4px}
.panel .sub,.muted{color:var(--muted)}
.intro{padding:10px 10px 10px 16px;margin:0 0 16px;color:#111}
.intro p{font-weight:400}
.cols,.side,.lesson,.morebody{gap:0}
.side>.panel{margin-bottom:16px}
/* no cards in cards: lists inside a card are rows */
.panel .panel{box-shadow:none;border-radius:0;padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--line)}
.panel .exlist details.ex,.sheet .exlist details.ex{box-shadow:none;border-radius:0;border-top:1px solid var(--line)}
.panel .exlist details.ex:first-child,.sheet .exlist details.ex:first-child{border-top:0}
.gocards{gap:16px;margin:0 0 16px}
.gocards details.ex>summary{padding:14px 16px}
.met{background:var(--soft);border:0;border-radius:14px}
.cmp,.lockbox,.callout{background:var(--soft);border-radius:14px}
.nota{background:#fff}
.nota-svg{color:#111}
.nota-svg .nl{stroke:#111;opacity:.45}
/* controls: pills and tiles, min 44px */
.btn,.linkbtn,.tog,.crow,.x,.seg button,nav.tabs button,.gobtn{font-family:'Poppins', Arial, sans-serif}
.btn{min-height:44px;border-radius:999px;border:2px solid transparent;background:var(--soft);color:#111;font-weight:600;padding:0 18px;font-size:.95rem}
.btn.small{min-height:44px;padding:0 14px;font-size:.88rem}
.btn:hover{border-color:var(--selected)}
.btn.primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn.primary:hover{background:var(--green-dark);border-color:var(--green-dark)}
.btn.primary:disabled{opacity:.5;cursor:not-allowed}
.btn.danger{background:#fff;color:var(--warn);border-color:var(--warn)}
.btn.ghost{background:#fff;color:#111;border-color:transparent}
.linkbtn{color:var(--green-dark);text-decoration:underline;font-weight:400}
.demo .linkbtn{color:#fff}
.seg{background:transparent;border:0;padding:0;gap:8px;display:inline-flex;flex-wrap:wrap;overflow:visible;border-radius:0}
.seg button,.tog{background:var(--soft);color:#111;border:2px solid transparent;border-radius:999px;font-weight:400;min-height:44px;padding:0 16px;box-shadow:none}
.seg button[aria-pressed="true"],.tog[aria-pressed="true"],.crow[aria-pressed="true"],.stupick button[aria-pressed="true"]{background:var(--selected);border:2px solid var(--green);color:#111;font-weight:600}
.crow{border-radius:12px;border:2px solid transparent;background:var(--soft)}
.x{background:var(--soft);border-radius:999px}
input[type=text],input[type=number],input[type=url],input[type=search],textarea,select{font-family:inherit;border:2px solid var(--line);border-radius:12px;background:#fff;color:#111;min-height:44px}
.chip{font-weight:600}
.tag{background:var(--soft);color:#111;font-weight:600}
.tag.ok{background:var(--green);color:#fff}
.tag.pending{background:var(--selected);color:var(--green-ink)}
.count{background:var(--green);color:#fff}
.toast{background:#111;color:#fff;border-radius:999px;font-family:inherit}
.sheet{background:#fff;border-radius:18px 18px 0 0}
@media (min-width:860px){.sheet{border-radius:18px 0 0 18px}}
/* fluency swatches: pale steps carry an outline; not rated is white with a line; pending is a dashed green border */
.lv0{box-shadow:inset 0 0 0 1px var(--e0)}
.lvn{background:#fff;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.pend{outline:2px dashed var(--green);outline-offset:2px}
.cell.pend{outline:2px dashed var(--green);outline-offset:-5px}
.cell.lv0{box-shadow:inset 0 0 0 1px var(--e0)}
.cell.diag{box-shadow:inset 0 0 0 2px #111}
/* tabs: chips; on phone a white card fixed to the bottom */
nav.tabs{display:flex;gap:8px;justify-content:center;margin:0 0 16px}
nav.tabs button{background:var(--soft);color:#111;border:2px solid transparent;border-radius:14px;font-weight:400;min-height:52px;box-shadow:none}
nav.tabs button[aria-current="page"],body[data-role="student"] nav.tabs button[aria-current="page"]{background:var(--selected);border-color:var(--green);color:#111;font-weight:600;box-shadow:none}
nav.tabs button svg,body[data-role="student"] nav.tabs button[aria-current="page"] svg{color:var(--green-ink)}
@media (min-width:700px){nav.tabs{background:#fff;border-radius:18px;padding:8px;box-shadow:var(--card-shadow)}nav.tabs button{flex:1}}
@media (max-width:699px){nav.tabs{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));margin:0;background:#fff;border:0;border-radius:18px;box-shadow:0 6px 20px rgba(0,0,0,0.16);padding:8px;z-index:30}}
body[data-role="student"] header.top{background:transparent;border:0}
/* Quick practice */
.go.hero{display:flex;flex-direction:column;gap:12px;margin:0 0 16px}
.gobtn{width:100%;min-height:64px;border-radius:999px;background:var(--green);color:#fff;font-weight:600;font-size:1.6rem;letter-spacing:.02em;box-shadow:none;border:0}
.gobtn:hover{background:var(--green-dark);filter:none}
.gostatus{color:var(--muted);font-size:.9rem}
.go.session{margin:0;gap:0}
.sesshead,.sessfoot{margin:0 0 16px}
.plan .pbar{background:var(--soft);height:8px}
.plan .pbar i{background:var(--green)}
.tick{border-color:var(--line)}
.tick.on{background:var(--green);border-color:var(--green);color:#fff}
.lad{border-top:1px solid var(--line)}
.lad .dots i{border-color:var(--green)}
.lad .dots i.on{background:var(--green)}
.exfocus b,.lessoncard .eyebrow{color:var(--green-ink)}
.more{margin:0 0 16px;padding:0 16px}
.more>summary{min-height:56px;padding:6px 0}
.more>summary::after{border-color:#111}
.more .morebody{padding-bottom:16px}
.more .panel{padding-top:14px}
.mdot{background:var(--line)}
.lessoncard{padding:16px}
.errbox{background:var(--soft)}
.err{color:var(--warn)}

/* selected = the primary: green fill, white text and icon */
nav.tabs button[aria-current="page"],body[data-role="student"] nav.tabs button[aria-current="page"],.seg button[aria-pressed="true"],.tog[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
nav.tabs button[aria-current="page"] svg,body[data-role="student"] nav.tabs button[aria-current="page"] svg{color:#fff}
nav.tabs button:not([aria-current="page"]),.seg button:not([aria-pressed="true"]),.tog:not([aria-pressed="true"]){background:var(--soft);color:#111}
/* matrix: unrated cells outlined, values in near-black */
.cell{color:#111;font-weight:600}
.cell.lv3{color:#fff}
.cell.lvn{background:#fff;box-shadow:inset 0 0 0 1.5px #e3e3e3}
.cell.lk{background:#f4f4f4;color:#5b5b5b;box-shadow:inset 0 0 0 1.5px #e3e3e3}
/* one grid: main 1fr, side 320px, 16px gap; same padding and radius on every card */
.graph-wrap,.mx-scroll,.panel{padding:18px 16px;border-radius:18px}
.graph-wrap .toggles{margin:0 0 8px}
.web-grid{display:grid;gap:16px;align-items:start}
.web-grid>div{min-width:0}
.web-grid .side{gap:16px}
.web-grid .side>.panel{margin:0}
@media (min-width:860px){body[data-view="web"] .web-grid{grid-template-columns:minmax(0,1fr) 320px!important}}
.view-head{width:100%}
main>*{max-width:100%}

/* round 19: the web/matrix switch sits at the top of the card */
.toggles{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.viewsw{margin-right:auto}
.viewsw button{min-height:40px;padding:0 14px;font-size:.88rem}
@media (pointer:coarse){.viewsw button{min-height:44px}}
.mx-scroll .toggles{margin:0 0 10px}
.mxlegend{margin-top:16px}
.mxlegend .panel{margin:0}
nav.tabs button{flex:1}

/* round 20: the web card takes the full column, the side cards sit beneath */
.web-grid,body[data-view="web"] .web-grid{grid-template-columns:1fr!important}
.graph-wrap>svg{width:100%;max-width:none}
@media (min-width:860px){.web-grid .side{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}}
.logo{background:transparent}

/* leaderboard */
.lb .grp-head{flex-wrap:wrap;gap:8px}
.lblist{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.lbrow{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:44px;padding:4px 10px;border-radius:12px}
.lbrow:nth-child(odd){background:var(--soft)}
.lbrow.me{background:var(--selected);box-shadow:inset 0 0 0 2px var(--green);font-weight:600}
.lbrank{font-weight:600;color:var(--green-ink);text-align:center}
.lbname{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbpts{font-weight:600;color:#111}
.lbyou{font-size:.72rem;background:var(--green);color:#fff;border-radius:999px;padding:1px 8px;font-weight:600}
.streak{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;color:var(--green-ink);font-weight:600}
.streak i{width:9px;height:9px;border-radius:50%;background:var(--green);display:block}
.lbmine{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.lbrow .btn.small{min-height:36px}
@media (pointer:coarse){.lbrow .btn.small{min-height:44px}}
.lbline{font-weight:600;color:var(--green-ink)}

/* leaderboard: the one place allowed metal tones, a dark podium and Poppins 800 */
.lb .season{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink)}
.lb h3{font-weight:800}
.podium{background:#1d6f4d;border-radius:14px;padding:14px 10px 0;margin:10px 0 12px;position:relative;overflow:hidden}
.podium .podbg{position:absolute;inset:0;width:100%;height:100%;opacity:.43;pointer-events:none}
.podium .steps,.podium .close{position:relative}
.podium .close{background:#f3faf6;color:#1d6f4d;font-weight:800;text-align:center;border-radius:999px;padding:4px 12px;font-size:.82rem;margin:0 auto 10px;width:max-content;max-width:100%}
.steps{display:flex;gap:8px;align-items:flex-end}
.steps.solo .step.wide{flex:1 1 100%}
.steps .step{min-width:78px}
.step .pnames{display:flex;flex-direction:column;align-items:center;max-width:100%;margin-top:4px;gap:1px}
.step .pnames .pn{margin-top:0}
.step .pn.more{font-weight:600;font-size:.8rem;color:#f3faf6}
.lbrank.lbmed{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:800;justify-self:center}
.lbrank.m1{background:#f6d77a;color:#8a6410;box-shadow:inset 0 0 0 1.5px #c9971c}
.lbrank.m2{background:#eef1f4;color:#6b737b;box-shadow:inset 0 0 0 1.5px #a9b1b9}
.lbrank.m3{background:#e7b187;color:#6d4221;box-shadow:inset 0 0 0 1.5px #a8683a}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;position:relative}
.step .crown{display:block;margin-bottom:-6px}
.step .pn{font-weight:800;color:#fff;font-size:.95rem;line-height:1.2;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step .pp{color:#f3faf6;font-size:.8rem;margin-bottom:6px}
.step .block{width:100%;border-radius:10px 10px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;font-weight:800;color:#111;font-size:.85rem}
.step.s1 .block{height:74px;background:linear-gradient(#f6d77a,#c9971c)}
.step.s2 .block{height:52px;background:linear-gradient(#eef1f4,#a9b1b9)}
.step.s3 .block{height:38px;background:linear-gradient(#e7b187,#a8683a)}
.ownstrip{background:var(--soft);border-radius:14px;padding:10px 12px;margin:0 0 10px}
.tierline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.9rem}
.tierline b{font-weight:800}
.xp{height:8px;border-radius:999px;background:#e3e3e3;overflow:hidden;margin:6px 0 4px}
.xp i{display:block;height:100%;border-radius:999px}
.callout{margin:4px 0 0;font-weight:600;color:#111}
.lbrow{grid-template-columns:26px 38px minmax(0,1fr) auto auto;row-gap:2px;padding:6px 10px}
.lbrow .lbname .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow .tier{flex:none}
.lbpts{font-weight:800}
.lbmove{display:inline-flex;align-items:center;gap:2px;font-size:.75rem;font-weight:600}
.lbmove.up{color:var(--green-ink)}
.lbmove.down{color:#8a8a8a}
.lbmove.same{color:#8a8a8a}
.lbmove.new{color:var(--green-ink);background:var(--selected);border-radius:999px;padding:0 6px}
.streak{display:inline-flex;align-items:center;gap:2px;font-size:.78rem;font-weight:700;color:#b85a16}
.streak i{display:none}
.hot{font-size:.68rem;font-weight:800;color:#fff;background:#e8742a;border-radius:999px;padding:1px 7px;white-space:nowrap}
.lbgap{grid-column:3 / -1;display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted)}
.gbar{display:block;width:60px;height:4px;border-radius:4px;background:#e3e3e3;flex:none;overflow:hidden}
.gbar i{display:block;height:100%;background:var(--green);border-radius:4px}
.grp-head{flex-wrap:wrap;row-gap:8px}
.seg{max-width:100%}
.cols>*,.lesson>*{min-width:0}

/* level-up moments */
.lvl{position:fixed;inset:0;z-index:100;background:var(--green);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.lvl .lvbg{position:absolute;inset:0;width:100%;height:100%}
.lvtxt{position:relative;text-align:center;color:#fff;padding:0 20px;max-width:680px}
.lvt{font-family:'Poppins',Arial,sans-serif;font-weight:800;font-size:clamp(2rem,9vw,4.2rem);line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.lvs{font-family:'Poppins',Arial,sans-serif;font-weight:600;font-size:clamp(1.05rem,4.5vw,1.6rem);margin-top:10px;opacity:.95}
.lvl.go .lvtxt{animation:lvpop 1.8s ease-out both}
.lvl.go{animation:lvfade 1.8s ease both}
@keyframes lvpop{0%{transform:scale(.6);opacity:0}14%{transform:scale(1.06);opacity:1}24%{transform:scale(1)}86%{opacity:1}100%{opacity:0}}
@keyframes lvfade{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:-4%;left:var(--x);width:9px;height:14px;background:#fff;border-radius:2px;opacity:.95;transform:rotate(var(--r)) scale(var(--s));animation:fall 1.6s cubic-bezier(.2,.6,.4,1) var(--d) both}
.confetti i:nth-child(3n){width:7px;height:7px;border-radius:50%}
@keyframes fall{0%{transform:translate3d(0,-20px,0) rotate(var(--r)) scale(var(--s))}100%{transform:translate3d(calc((var(--s) - 1) * 160px),105vh,0) rotate(calc(var(--r) + 540deg)) scale(var(--s))}}
.lvl.calm .lvtxt{animation:lvfadeonly 1.8s ease both}
@keyframes lvfadeonly{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}.lvl.go .lvtxt{animation:lvfadeonly 1.8s ease both}}
.hdr-tools{display:flex;gap:8px;align-items:center}
.mute{background:#fff;color:var(--green-ink);border:0;border-radius:999px;width:44px;height:44px;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
/* titles */
.titles{display:inline-flex;flex-wrap:wrap;gap:4px}
.ttl{font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap;color:#111;background:linear-gradient(#f3f3f3,#d9dde1)}
.ttl.t0{background:linear-gradient(#f6d77a,#d2a126)}
.ttl.t2{background:linear-gradient(#e7b187,#b8793f)}
.hdrtitles{display:flex;justify-content:center;margin:-6px 0 14px}
.lbtitles{grid-column:3 / -1}
.bestweek{margin:4px 0 0;font-size:.85rem;color:#111}
.bestweek b{color:var(--green-ink);margin-right:4px}
.chaladmin{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.chaladmin .chalnow{margin:0 0 8px}
.chaladmin .chalnow .muted{display:block;font-size:.8rem;margin-top:2px}
.chaladmin .chalctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chaladmin .chalctl select{flex:1 1 180px;min-width:0;max-width:100%}
.chaladmin .chalhint{margin:6px 0 0;font-size:.8rem}
.chaladmin .chalhint .linkbtn{padding:0 2px;font-size:inherit}
/* trophies */
.trophies .grp-head h3{flex-wrap:wrap;gap:6px}
.trophies .trcount{font-size:.8125rem;font-weight:500}
.trnew{display:inline-block;background:var(--green);color:#fff;font-size:.6562rem;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;margin-left:6px;vertical-align:middle;letter-spacing:.02em}
.trcat{margin:14px 0 8px}
.trcat .muted{font-weight:500}
.trtitles{display:flex;flex-wrap:wrap;gap:6px}
.trdot{display:inline-flex;line-height:0}
.trtitles svg.ach{width:28px;height:28px}
@media (max-width:420px){.trtitles{gap:4px}.trtitles svg.ach{width:26px;height:26px}}
.trrecent{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.trrec{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 6px;border-radius:18px;background:var(--soft);min-width:0}
.trrec b{font-size:.74rem;line-height:1.2;overflow-wrap:anywhere}
.trrec small{font-size:.66rem;color:var(--muted)}
.trrec .trnew{position:absolute;top:5px;right:5px;margin:0}
.trnear{display:grid;gap:8px}
.trnr{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:var(--soft);min-width:0}
.trnr svg.ach{flex:0 0 32px}
.trnm{flex:1;min-width:0;display:grid;gap:3px}
.trnm b{font-size:.82rem;line-height:1.2}
.trnm small{font-size:.7rem;color:var(--muted);line-height:1.3}
.tbar{display:block;height:6px;border-radius:999px;background:var(--selected);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--green);border-radius:999px}
.trcard .actions{margin-top:14px}
.cab .cabhead{align-items:center}
.cab .cabback{flex:none}
.cab .trfilter{position:sticky;top:-8px;z-index:2;display:flex;flex-wrap:nowrap;gap:2px;border-radius:18px;margin:8px 0 4px;box-shadow:0 0 0 6px #fff;width:100%}
.cab .trfilter button{flex:1 1 0;min-width:0;padding:6px 4px;font-size:.7812rem;line-height:1.15;white-space:normal}
@media (min-width:600px){.cab .trfilter{top:-22px}}
.trrows{display:grid;gap:8px}
.trl{background:#fff;border:1px solid var(--line);border-radius:18px;min-width:0}
.trl.has{border-color:#cfe9db}
.trl.open{border-color:var(--green)}
.trlh{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:18px;font:inherit;color:inherit;cursor:pointer;min-height:52px}
.trlh:hover{background:var(--soft)}
.trlh svg.ach{flex:0 0 36px}
.trlm{flex:1;min-width:0;display:grid;gap:2px}
.trlm b{font-size:.86rem;line-height:1.2}
.trlm small{font-size:.7rem;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.trlc{flex:0 0 58px;display:grid;gap:4px;justify-items:end}
.trlc .mono{font-size:.75rem;color:var(--muted);white-space:nowrap}
.trlc .tbar{width:58px}
.tlad{list-style:none;margin:0;padding:0 10px 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px}
.tlad li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:var(--soft);min-width:0}
.tlad li.lk{background:#fafafa}
.tlad li.lk b{color:var(--muted)}
.tlad li.mst{background:#fff8e6}
.tlad svg.ach{flex:0 0 32px}
.tlad b{display:block;font-size:.8rem;line-height:1.25}
.tlad small{display:block;font-size:.7rem;color:var(--muted);line-height:1.35}
.trtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.trt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 4px 8px;border-radius:18px;background:#fafafa;border:1px solid transparent;font:inherit;color:var(--muted);cursor:pointer;min-width:0}
.trt.got{background:var(--soft);color:var(--ink)}
.trt.mst.got{background:#fff8e6;border-color:#f0dca8}
.trt.elite.got{background:#fff;border-color:var(--green-ink)}
.trt b{font-size:.7rem;line-height:1.2;overflow-wrap:anywhere}
.trt small{font-size:.72rem;color:var(--muted);line-height:1.35;text-align:left}
.trt.tip{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:10px;padding:10px 12px;border-color:var(--green)}
.trt.tip b{font-size:.85rem}
.trt.tip small{flex:1 1 100%}
.trmore{display:block;margin:8px 0 0}
.lbmtag{grid-column:3 / -1;display:flex;align-items:center;gap:4px;font-size:.6875rem;font-weight:600;color:var(--green-ink);margin-top:-2px}
.lvl.big{background:var(--green-ink)}
.lvl .lvico{display:flex;justify-content:center;margin-bottom:12px}
.lvl .lvico svg{width:120px;height:120px}
.lvl .lveb{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:#d2a126;margin-bottom:6px}
nav.tabs button{position:relative}
.tpip{position:absolute;top:2px;right:2px;background:var(--green);color:#fff;font-size:.5938rem;font-weight:700;line-height:1;padding:3px 5px;border-radius:999px;pointer-events:none}
/* seasons editor */
.seasons>summary{display:flex;flex-direction:column;gap:2px;cursor:pointer;list-style:none;min-height:44px}
.seasons>summary::-webkit-details-marker{display:none}
.seasonrows{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.seasonrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.seasonrow input{min-width:0;font-family:inherit;border:2px solid var(--line);border-radius:12px;min-height:44px;padding:4px 8px}
.pbs .row .m b{color:#111}

.rivalpin{background:#fff8e6!important;box-shadow:inset 0 0 0 2px #e8a21c}
.rchip{font-size:.66rem;font-weight:800;color:#fff;background:#e8a21c;border-radius:999px;padding:1px 7px;justify-self:start;align-self:center}
.rivalnote{margin:10px 0 0;font-size:.85rem;background:#fff8e6;border-radius:12px;padding:8px 12px}
.chal .chalgoal{margin:4px 0 8px}
.chaldone{margin:0;font-weight:600;color:var(--green-ink)}
.lb .actions{margin-top:10px}
/* round 26: spacing on phones */
@media (max-width:699px){body{padding-bottom:calc(76px + 16px + env(safe-area-inset-bottom,0px))}main{padding-bottom:16px}}
.panel{margin:0 0 16px}
.panel .panel{margin:12px 0 0}
.row{padding:12px 0}
.row .acts{gap:8px}
.lblist{gap:8px}
.chalhead{flex-wrap:nowrap;align-items:center}
.helpq{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--green);background:#fff;color:var(--green-ink);font:700 1.125rem/1 var(--f-body,Poppins),sans-serif;display:inline-grid;place-items:center;cursor:pointer;padding:0}
.helpq:hover{background:var(--soft)}
.helpq:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.chalhead .helpq{width:32px;height:32px;font-size:.9375rem;margin-left:auto;margin-right:8px}
@media (pointer:coarse){.chalhead .helpq{width:44px;height:44px}}
.lad .lbtns .helpq{align-self:center}
.lhelp h4{margin:14px 0 4px;font-weight:700}
.lhelp ul,.lhelp ol{margin:0;padding-left:22px;display:grid;gap:4px}
.lhelp .lhdiag{display:block;width:100%;max-width:340px;height:auto;margin:10px auto 4px;background:var(--soft);border-radius:14px;padding:8px}
.lhelp .lhnote{margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:.9rem}
.ptspill{flex:none;background:var(--green);color:#fff;font-weight:600;font-size:.8rem;border-radius:999px;padding:3px 12px}
.chal .chalgoal{margin:12px 0;font-weight:600}
.chal .chalgoal b{font-weight:600}
.met+.lad,.exbody .lad{margin-top:12px}
/* round 27: one spacing system. Every stack of cards is a flex column or a grid with a 16px gap, and cards carry no outer margin */
main{display:flex;flex-direction:column;gap:16px}
main>*{margin-top:0!important;margin-bottom:0!important}
main .panel,main .graph-wrap,main .mx-scroll{margin:0}
main .panel .panel{margin:12px 0 0}
.cols{display:grid;grid-template-columns:1fr;gap:16px!important}
.cols>div{display:flex;flex-direction:column;gap:16px!important;min-width:0}
.web-grid{display:grid;row-gap:16px;column-gap:16px}
.web-grid .side{display:flex;flex-direction:column;gap:16px}
@media (min-width:860px){.web-grid .side{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.web-grid .side>.panel:only-child{grid-column:1 / -1}}
.lesson{display:flex;flex-direction:column;gap:16px!important}
.lesson>section:not(.panel){display:flex;flex-direction:column;gap:12px}
.lesson>section:not(.panel) .lcard{margin:0}
.lesson>section:not(.panel) .lh{margin:0}
.morebody{display:flex;flex-direction:column;gap:16px!important}
.morebody .panel{margin:0!important}
.morebody .cols{gap:0!important}.morebody .cols>div{gap:0!important}
.go.session{display:flex;flex-direction:column;gap:16px}
.go.session>*{margin:0!important}
.gocards{gap:16px;margin:0}
.mxlegend{margin:0}
.mxlegend .panel{margin:0}
.panel .list .row:last-child{padding-bottom:12px}
.exbody>.nota+.exnote,.exbody>.exnote+.met{margin-top:12px}

/* round 28: Listen, Quick practice sheet, Next up */
.lad .done{font-weight:600;font-size:.9rem;margin-right:6px}
.listen{margin-top:10px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 12px}
.listen.ok{border-color:var(--green);background:var(--selected)}
.listen .lres{margin:0;font-size:.9rem}
.listen.pop{animation:lvpass .5s ease-out}
@keyframes lvpass{0%{transform:scale(.96)}50%{transform:scale(1.02)}100%{transform:none}}
.lmsg{cursor:pointer}
.lmsg .lmsgacts{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.lmsgacts .lmore{margin-right:auto;padding:0}
.ltipfirst .lres{font-size:.9rem}
.lmsg .lok{min-width:64px}
.lnr{margin:6px 0 0;display:flex;align-items:center;gap:8px;justify-content:space-between;background:var(--soft);border-radius:12px;padding:6px 6px 6px 12px}
.lnr .listennr{margin:0}
.lnr[hidden]{display:none}
.ldots{display:flex;gap:10px;margin:10px 0 4px}
.ldots i{width:22px;height:22px;border-radius:50%;border:2px solid var(--green);background:#fff;transition:background .12s,transform .12s}
.ldots i.on{background:var(--green);transform:scale(1.08)}
.ldots.lbeat i{border-color:var(--ink)}
.ldots.lbeat i.on{background:var(--ink)}
.llive{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.lbarno{margin:0 0 8px;text-align:center;font-size:2.4rem;line-height:1.1;font-weight:800;color:var(--ink);letter-spacing:.01em}
.lbarno.one{color:var(--green-ink)}
.lacc{display:flex;align-items:baseline;gap:6px}
.lacc b{font-size:2.2rem;line-height:1;font-weight:700;color:var(--ink)}
.lacc span{font-size:.8rem;color:var(--muted)}
.lacc.good b{color:var(--green-ink)}
.lacc.bad b{color:var(--warn)}
.lacc.pop b{animation:lvpass .35s ease-out}
.lpips{display:flex;gap:8px}
.lpips i{width:26px;height:26px;border-radius:8px;border:2px solid var(--green);background:#fff;transition:background .15s}
.lpips i.on{background:var(--green)}
.lrecal{padding:6px 0 0;min-height:32px;font-size:.85rem}
@media (pointer:coarse){.lrecal{min-height:44px}}
.llinks{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ldiagbtn{padding:6px 0 0;min-height:32px;font-size:.85rem}
.lmsgacts .ldiagbtn{margin-right:auto;padding:0}
@media (pointer:coarse){.ldiagbtn{min-height:44px}}
.lsub{margin:2px 0 0;font-size:.85rem;color:var(--muted)}
.ltip{display:flex;align-items:center;gap:10px;margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:var(--soft)}
.ltip p{margin:0;font-size:.85rem;flex:1;min-width:0}
.ltip[hidden]{display:none}
.ldiag{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:.8rem}
.ldiag[hidden]{display:none}
.ldiag .ldh{margin:0 0 6px}
.ltl{position:relative;height:40px;border-radius:8px;background:var(--soft);margin:4px 0}
.ltl .ltlmid{position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line)}
.ltl .ltx{position:absolute;top:3px;width:2px;height:15px;background:var(--ink);transform:translateX(-1px)}
.ltl .lth{position:absolute;bottom:4px;width:9px;height:9px;border-radius:50%;transform:translateX(-4.5px);background:var(--green)}
.ltl .lth.near{background:#E0A526}
.ltl .lth.far{background:var(--warn)}
.ltl .lth.extra{background:var(--muted);border-radius:2px}
.ldoffs{position:relative;height:18px;margin:0 0 10px;font-size:.66rem;line-height:1}
.ldoffs span{position:absolute;top:2px;transform:translateX(-50%);white-space:nowrap}
.ldoffs.dense{height:28px}
.ldoffs.dense span.lo{top:15px}
.ldh .ldclean{color:var(--green-ink)}
.ldh .ldnot{color:var(--warn)}
.ldoffs .miss{color:var(--warn)}
.ldkv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;margin:0 0 8px}
.ldkv dt{color:var(--muted)}
.ldkv dd{margin:0;overflow-wrap:anywhere}
.listenbtn.on,.lad .btn.on[data-mt="listen"]{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}
.pmpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pmpick .tog{flex:1 0 44px;min-width:44px;padding:0 4px;font-variant-numeric:tabular-nums}
.pmpick .tog.std{font-weight:700}
.pmpick .tog[aria-checked="true"]{background:var(--green);border-color:var(--green);color:#fff}
.pmends{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:4px}
.lmeter{height:8px;border-radius:999px;background:var(--soft);overflow:hidden;margin:8px 0}
.lmeter i{display:block;height:100%;width:0;background:var(--green);transition:width .06s linear}
.lstrip{position:relative;height:22px;border-radius:8px;background:var(--soft)}
.lstrip i{position:absolute;top:3px;width:3px;height:16px;border-radius:2px;background:var(--green-ink);transform:translateX(-1px)}
.gotiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:8px 0 4px}
.gotile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72px;border-radius:14px;border:2px solid transparent;background:var(--soft);font-family:inherit;color:#111;cursor:pointer}
.gotile b{font-size:1.4rem;font-weight:600;line-height:1}
.gotile span{font-size:.75rem;color:var(--muted)}
.gotile[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.gotile[aria-pressed="true"] span{color:#fff}
.wsstrip{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.wsstrip .linkbtn{min-height:32px;font-weight:600}
@media (pointer:coarse){.wsstrip .linkbtn{min-height:44px}}
/* round 42: ticks, Complete, review, wind back */
.lbtns.tickrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 0}
.tickbtn{min-height:52px!important;font-size:1rem!important;padding:0 20px!important;display:inline-flex;align-items:center;gap:8px;flex:1 1 180px;justify-content:center}
.tickbtn .tk{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid #fff;color:transparent;flex:none}
.tickbtn.on .tk{background:#fff;color:var(--green-ink)}
.listenbtn{flex:1 1 160px;min-height:48px;background:#fff!important;border-color:var(--green)!important;color:var(--green-ink)!important}
.tickstate{margin:8px 0 0;font-size:.88rem;font-weight:600;color:var(--green-ink)}
.completebox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0}
.completebox.small{margin:8px 0 0}
.completebox .muted{font-size:.88rem}
/* v47: the Complete box sits under the last exercise, with a progress line in the sheet header */
.completebox:not(.small){margin:16px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;scroll-margin:24px}
.completebox.ready:not(.small){background:#f3faf6;border-color:#e2f4ea}
.completebox.pulse{animation:cbpulse 1.1s ease-out 2}
@keyframes cbpulse{0%{background:#e2f4ea;box-shadow:0 0 0 0 rgba(46,170,119,.45)}100%{background:#f3faf6;box-shadow:0 0 0 14px rgba(46,170,119,0)}}
@media (prefers-reduced-motion:reduce){.completebox.pulse{animation:none;background:#e2f4ea}}
.cprog{margin:4px 0 0;font-size:.85rem;font-weight:600;color:#1d6f4d}
/* v48: Undo on Nailed It, a thin bar drains over 2 seconds */
.tickbtn{position:relative;overflow:hidden}
.tickbtn.undo{background:#fff!important;color:var(--green-ink)!important;border:2px solid var(--green)!important;font-weight:700}
.tickbtn .undobar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--green);transform-origin:left center;animation:undodrain 2s linear forwards}
@keyframes undodrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.tickbtn .undobar{display:none}}
/* v47: the session summary card */
.sesscard .sc-sub{margin:4px 0 0;opacity:.85}
.sesscard .sc-rk,.sesscard .sc-cel{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin:10px 0 0;font-size:.9375rem}
.sesscard .sc-rk>b,.sesscard .sc-cel>b{width:100%;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.sesscard .sc-cel .scmore{min-height:44px;padding:0 6px;color:inherit;text-decoration:underline}
.sesscard .sc-cel span{background:rgba(255,255,255,.12);border-radius:999px;padding:2px 10px}
.chalptr p{margin:0}
.chalptr .actions{margin-top:10px}
.sesscard{border-color:#e2f4ea}
.sesscard .sc-eb{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1d6f4d;margin:0 0 4px}
.sesscard h3{margin:0 0 10px}
.sesscard .sc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 10px}
.sesscard .sc-stat{background:#f3faf6;border-radius:12px;padding:10px 8px;text-align:center;min-width:0}
.sesscard .sc-stat b{display:block;font-size:1.45rem;line-height:1.1;font-weight:700;color:#1d6f4d}
.sesscard .sc-stat span{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.sesscard .sc-stat.scxp b{color:#d2a126}
.sesscard .sc-line{margin:0 0 4px;display:flex;align-items:center;gap:6px;font-weight:600}
.sesscard .sc-line svg{flex:none}
.sesscard .sc-next{margin:0;color:var(--ink-2)}
.sesscard .actions{margin-top:12px}
@media (max-width:480px){.sesscard .sc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.selfrate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 4px}
.srate{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;min-height:84px;padding:12px 14px;border-radius:14px;border:2px solid transparent;font-family:inherit;cursor:pointer;opacity:.8}
.srate b{font-size:1.05rem;font-weight:700}
.srate span{font-size:.82rem;font-weight:400;line-height:1.3}
.srate[aria-checked="true"]{opacity:1;border-color:var(--ink);box-shadow:0 0 0 2px var(--surface,#fff) inset}
.nudge{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--catchup);color:var(--catchup-ink);font-weight:600}
.toomuchlink{font-size:.88rem;padding:0;min-height:32px}
@media (pointer:coarse){.toomuchlink{min-height:44px}}
.windcard{background:var(--catchup);border-radius:16px}
.windcard p{margin:0 0 10px;color:var(--catchup-ink);font-weight:600}
.windcard .actions{margin:0}
.tmopt{display:block;width:100%;text-align:left;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:#fff;font-family:inherit;margin:0 0 10px;cursor:pointer}
.tmopt b{display:block;font-size:1rem}
.tmopt span{font-size:.86rem;color:var(--muted)}
details.tmopt>summary{list-style:none;cursor:pointer;display:block}
details.tmopt>summary::-webkit-details-marker{display:none}
details.tmopt>summary b::after{content:" +";color:var(--green-dark)}
details.tmopt[open]>summary b::after{content:" \2212"}
.parklist .chk{display:flex;gap:10px;align-items:center;padding:6px 0}
.revrow .m b{color:var(--ink)}
.revrow .acts{flex-wrap:wrap}
.sincepanel h3{margin-bottom:2px}
.tag.parked{background:var(--catchup);color:var(--catchup-ink)}
/* round 43: Practise and Ladder */
.met input[type=range]:disabled{opacity:.35;filter:grayscale(1);cursor:not-allowed}
.tag.done{background:#e3f1ea;color:#1d6f4d}
/* v44: Drummer level */
.hello{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.dlvbadge{display:flex;flex-direction:column;align-items:stretch;gap:5px;background:#fff;color:#1d6f4d;border:0;border-radius:14px;padding:7px 12px 8px;min-height:44px;min-width:150px;max-width:100%;box-shadow:0 2px 8px rgba(0,0,0,0.12);font:inherit;text-align:left;cursor:pointer}
.dlvbadge .dlvt{font-size:.85rem;font-weight:600;line-height:1.2;white-space:nowrap}
.dlvbadge .dlvt b{font-weight:700;font-size:1rem}
.dlvbar{display:block;height:5px;border-radius:999px;background:#e2f4ea;overflow:hidden}
.dlvbar i{display:block;height:100%;border-radius:999px;background:#2EAA77}
.dlvbar.gold i{background:#d2a126}
.dlvpill{flex:none;display:inline-block;font-size:.6875rem;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;background:#e2f4ea;color:#1d6f4d;white-space:nowrap}
.dlvpill.gold{background:#fbf4e2;color:#7a5a0c}
.dlvcard .dlvbig{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 6px}
.dlvcard .dlvbig b{font-size:2.2rem;line-height:1;color:#1d6f4d;font-weight:700}
.dlvcard .dlvbar,.dlvsheet .dlvbar{height:8px;margin:4px 0 6px}
.dlvsheet .dlvrows .src{grid-column:1/-1}
.dlvtabs{margin:0 0 12px}.dlvtabs button{min-height:40px;padding:6px 18px}
.stats2 h4{margin:16px 0 8px;font-size:1rem}.stats2 h4:first-child{margin-top:4px}
.stpb,.sthab{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.stpbi{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--pr-ground,#f3f6f2);min-width:0}
.stpbt{font-size:.78rem;color:var(--muted)}.stpbv{font-size:1.15rem;font-weight:700;color:var(--ink)}.stpbi small{color:var(--muted);font-size:.75rem}
.sttempo{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--pr-ground,#f3f6f2)}
.sttempo ol{margin:6px 0 0;padding-left:1.4em}.sttempo li{display:flex;justify-content:space-between;gap:10px;padding:2px 0;font-size:.9rem}.sttempo li span{min-width:0;overflow-wrap:anywhere}
.sttempo li::marker{color:var(--muted)}.stmore summary{cursor:pointer;font-size:.85rem;color:var(--pr-accent,#1B7F53);margin-top:4px;min-height:32px;display:flex;align-items:center}
.stchart{margin:14px 0 0;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.stchart figcaption{font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.stcols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;align-items:end;height:132px;border-bottom:1px solid var(--line)}
.stcol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;cursor:default}
.stcol .stv{font-size:.72rem;color:var(--ink);min-height:1.1em;line-height:1.1}
.stcol .stcbarw{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.stcol .stcbar{display:block;width:min(24px,70%);min-height:2px;background:#1B7F53;border-radius:4px 4px 0 0}
.stcol:not(.now) .stcbar{background:#1B7F53;opacity:.62}
.stcol:hover .stcbar{opacity:1}
.stchart .stl{display:block;font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:3px;text-align:center;position:relative;top:0}
.stcol .stcbar.z{min-height:0}
.stcols+details{margin-top:6px}
.sttable summary{cursor:pointer;font-size:.8rem;color:var(--pr-accent,#1B7F53);min-height:32px;display:flex;align-items:center}.sttable table{font-size:.8rem;border-collapse:collapse;margin-top:4px}.sttable th{text-align:left;font-weight:500;padding:2px 12px 2px 0}.sttable td{text-align:right}
.stins{margin:0;padding-left:1.2em}.stins li{margin:4px 0}
.dlvsheet .dlvrows{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;margin:12px 0;padding:12px;border-radius:12px;background:#f3faf6}
.dlvsheet .dlvrows span small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35}
.dlvsheet .dlvrows b{text-align:right;color:#1d6f4d;font-variant-numeric:tabular-nums;white-space:nowrap}
.dlvsheet .dlvrows .tot{border-top:1px solid #cfe7da;padding-top:8px}
.dlvsheet .honest{font-size:.88rem;color:var(--muted);margin:12px 0 0;line-height:1.45}
.lvrated{font-size:.95rem;margin:6px 0 0;color:var(--ink)}
/* r19: the skill level header, the Log practice button, the rating history, the elite mark */
.sklv{margin:8px 0 2px;display:grid;gap:6px}
.sklvtop{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.sklvn{font-size:1.05rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:baseline;gap:6px}
.sklvn b{font-size:1.5rem;color:#1d6f4d}
.sklv.elite .sklvn{flex-direction:column;align-items:flex-start;gap:0}
.sklv.elite .sklvn b{font-family:var(--f-body);color:#8a6410;font-size:1.4rem;letter-spacing:.04em}
.sklv.elite .sklvn small{font-size:.8rem;color:var(--muted)}
.sklvt{font-size:.9rem;color:var(--muted);display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.sklvt b{color:var(--ink)}
.sklvbar{display:block;height:8px;border-radius:5px;background:var(--surface-2,#eef3f0);overflow:hidden;max-width:420px}
.sklvbar i{display:block;height:100%;background:var(--lv2);border-radius:5px;transition:width .4s}
.sklvbar.full i{background:#d2a126}
.sklvgate{margin:0;font-size:.85rem;color:var(--muted)}
.picks .pickwhy{font-weight:600;color:var(--pr-ink,var(--ink))}
.picks .pickrow .m+.m{margin-top:2px}
.sklvadm{margin:2px 0 0;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sklvmk{display:inline-grid;place-items:center;width:80px;height:80px}
.sklvmk.fresh svg{animation:elitein 1.4s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes elitein{0%{transform:scale(.2) rotate(-90deg);opacity:0}60%{transform:scale(1.15) rotate(8deg);opacity:1}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.sklvmk.fresh svg{animation:none}}
.tickbtn.logpr{background:var(--surface,#fff);color:var(--green-ink);border:2px solid var(--lv1);font-weight:600;min-height:48px!important}
.tickbtn.logpr:hover{background:var(--selected,#eef8f3)}
.exlast[data-exhist]{cursor:pointer;border-radius:999px}
.exlast[data-exhist]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.exhist{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:var(--surface-2,#f4f7f5);font-size:.85rem}
.exhist ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.elitetag{display:inline-flex;align-items:center;gap:4px}
.elitetag svg{flex:none}
.lvrated b{color:#1d6f4d}
.lbnote{font-size:.85rem;margin:4px 0 0;color:var(--muted)}
/* v45: one flow per exercise card, the metronome switch, Quick practice and the Class tab */
:root{--gold:#d2a126;--gold-2:#f3d27a;--gold-ink:#8a6410;--f-code:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace}
:root{--t-go:#2EAA77;--t-skills:#1d6f4d;--t-map:#3f9a7c;--t-class:#5c8f3a}
body[data-role="student"][data-view="leaderboard"]{--tabc:var(--t-class)}
body[data-role="student"] nav.tabs button[data-tab="leaderboard"]{--tc:var(--t-class)}
.mettog{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 8px 0 16px;border-radius:999px;border:2px solid var(--green);background:#fff;color:var(--ink);font-weight:600;font-size:1rem;cursor:pointer}
.mettog .mtpill{display:inline-grid;place-items:center;min-width:48px;height:32px;padding:0 10px;border-radius:999px;background:#e3e3e3;color:#3b3b3b;font-size:.8rem;font-weight:700;letter-spacing:.06em}
.mettog.on{background:var(--selected)}
.mettog.on .mtpill{background:var(--green);color:#fff}
.mettog:focus-visible{outline:3px solid var(--green-ink);outline-offset:2px}
.lvline{margin:0;font-size:.95rem;color:var(--ink)}
.lvline .golv{color:var(--green-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:2px}
.lvline .lvsub{display:block;font-size:.85em;color:var(--muted,#666);margin-top:2px}
.lvtrack{position:relative;height:20px;margin:-4px 8px 2px}
.lvmark{position:absolute;left:calc(var(--p)*100%);top:0;transform:translateX(-50%);border:0;background:none;padding:7px 5px 2px;font:600 .6875rem/1 Poppins,system-ui,sans-serif;letter-spacing:.02em;color:var(--green-ink);cursor:pointer;white-space:nowrap}
.lvmark::before{content:"";position:absolute;left:50%;top:0;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:currentColor}
.lvmark:hover{text-decoration:underline;text-underline-offset:2px}
@media (max-width:430px){.lvline{font-size:.88rem;letter-spacing:-.005em}}
.lvline b{color:var(--green-ink)}
.nailmsg{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:600;color:var(--ink)}
.nailmsg.up{border-color:var(--green);background:var(--selected);color:var(--green-ink)}
.nextrow{display:flex;margin:10px 0 0}
.nextrow .nextbtn{min-height:48px;flex:1 1 auto;background:#fff;border:2px solid var(--green);color:var(--green-ink)}
@keyframes nailpop{0%{transform:scale(.97);opacity:.4}100%{transform:none;opacity:1}}
.nailmsg.pop,.lvline.pop{animation:nailpop .35s ease-out 1}
@media (prefers-reduced-motion: reduce){.nailmsg.pop,.lvline.pop{animation:none}}
.gobtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-top:10px;padding-bottom:10px}
.gobtn .gobig{font-size:1.5rem;line-height:1.2}
.gobtn .gosub{font-size:.9rem;font-weight:400;opacity:.95;letter-spacing:0}
.classnote{margin:6px 0 0;font-size:1rem;color:var(--ink)}
.chalpts{display:flex;align-items:baseline;gap:6px;margin:4px 0 6px;color:var(--green-ink)}
.chalpts b{font-size:3rem;line-height:1;font-weight:800}
.chalpts span{font-size:1.2rem;font-weight:700}
.chalwho{margin:0 0 4px;font-weight:600}
.chalends{margin:0;color:var(--muted);font-size:.95rem}
.lbself{margin-top:16px}
.cbx{position:relative;flex:1 1 180px;min-width:0}
.cbx-native{display:none!important}
.cbx-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:1rem;text-align:left;cursor:pointer}
.cbx-btn:disabled{opacity:.55;cursor:not-allowed}
.cbx-btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.cbx-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx-car{flex:none;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px)}
.cbx.open .cbx-car{transform:rotate(-135deg) translate(-2px,-2px)}
.cbx-pop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;color:var(--ink)}
.cbx-q{display:block;width:100%;box-sizing:border-box;min-height:44px;font-size:1rem;padding:8px 12px;border:1px solid var(--line);border-radius:10px;margin:0 0 6px}
.cbx-list{list-style:none;margin:0;padding:0;max-height:50vh;overflow-y:auto;outline:none}
.cbx-list li{min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:10px;font-size:1rem;cursor:pointer}
.cbx-list li.act{background:var(--selected)}
.cbx-list li[aria-selected="true"]{font-weight:600;color:var(--green-ink)}
.cbx-none{margin:6px 12px;color:var(--muted)}
.picker .cbx{min-width:160px}
.flagform .cbx{min-width:0}
.ovctl{flex-wrap:wrap}
.capctl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:10px 0 2px;font-size:.9rem}
.capctl .linkbtn{min-height:44px;font-weight:600}
.classlist .capctl,.trtiles .capctl{grid-column:1/-1}
.lbrange{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.lbrange button{min-height:44px}
.lbrangenote{font-size:.85rem;margin:0 0 6px}
.logmore summary{cursor:pointer;font-weight:600;padding:10px 0;color:var(--green-ink)}
.lvinfo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0}
.swaprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.swaprow select{min-height:44px;font-size:1rem}
.completebox.done{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lbtns.tickrow .tickbtn{flex:1 1 100%!important}
.story{position:fixed;inset:0;z-index:120;background:#1d6f4d;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(28px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));user-select:none;-webkit-user-select:none;touch-action:none;outline:none;overflow:hidden}
.story .stbg{position:absolute;inset:0;width:100%;height:100%;opacity:.18;pointer-events:none}
.stbars{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;gap:4px}
.stbar{flex:1 1 0;height:4px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.stbar i{display:block;height:100%;width:0;background:#fff}
.stx{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));right:10px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(0,0,0,.2);color:#fff;font-size:1.75rem;line-height:1;cursor:pointer}
.stx:focus-visible{outline:3px solid #fff;outline-offset:2px}
.stcard{position:relative;max-width:420px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.sticon{background:#fff;border-radius:50%;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.25);line-height:0}
.steb{font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#d8f3e6;margin-top:10px}
.stname{margin:0;font-size:2rem;line-height:1.2;color:#fff;font-weight:700}
.stsub{margin:0;font-size:1.1rem;line-height:1.45;color:#fff;max-width:34ch}
.stpts{margin:6px 0 0;font-size:1.3rem;font-weight:700}
.stpts b{font-size:2.6rem}
.sthint{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;margin:0;font-size:.9rem;color:#d8f3e6}
.story.paused .sthint{opacity:.6}
.story.in .stcard{animation:stin .35s ease-out both}
@keyframes stin{0%{transform:translateY(16px) scale(.96);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.story.in .stcard{animation:none}}
@media (max-width:480px){.lbrow .lbname{flex-wrap:wrap;row-gap:4px;white-space:normal}.lbrow .lbname .nm{flex:0 1 auto;min-width:0;max-width:100%}}
/* Bashidrum header lockup: the emblem and the name, white on the green. #logo is also the Knock Knock tap target */
.brandrow{min-height:72px}
.logo{width:auto;height:auto;border-radius:0;background:transparent;display:inline-flex;align-items:center;gap:10px;color:#fff;flex:0 0 auto;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.logo .emblem{width:62px;height:59px;display:block;flex:none;overflow:visible}
/* the drum mark: the full drawing in the big header, the heavier small cut at 48px and below (phones) */
.logo .emblem-sm{display:none}
.logo .wordmark{font-family:var(--f-display);font-weight:800;font-size:1.6rem;line-height:1;letter-spacing:-.01em;color:#fff;white-space:nowrap}
@media (max-width:480px){.brandrow{min-height:56px}.logo{gap:7px}.logo .emblem{width:42px;height:40px}.logo .emblem-lg{display:none}.logo .emblem-sm{display:block}.logo .wordmark{font-size:1.15rem}}
/* v52 header: logo, Level card and the sound button (and the account button in the app) share the top row, on every tab
   and for both roles. The greeting sits on its own line underneath. Ben's student picker is a slim row of its own below that.
   When the row gets tight (a phone with the account button or the saving pill showing) the name drops and the emblem stays */
.brandrow{display:flex;align-items:center;flex-wrap:wrap;column-gap:14px;row-gap:6px;margin:4px 0 10px;min-height:0}
.logo{order:1}
.dlvbadge{order:2;margin-left:auto;flex:0 1 auto;min-width:150px}
.hdr-tools{order:3;margin-left:0;flex:none;align-self:center;gap:8px}
.hello{order:4;flex:1 1 100%;flex-direction:row;align-items:center;gap:12px;min-width:0}
.hello:has(.hand[hidden]){display:none}
.hand{white-space:nowrap;min-width:0;line-height:1.15}
.adminctl{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 6px}
.adminctl .picker{display:flex;align-items:center;gap:8px;white-space:nowrap}
.adminctl[hidden]{display:none!important}
@media (max-width:600px){
  .brandrow{column-gap:10px;row-gap:14px;margin:0 0 8px}
  .hdr-tools{gap:6px}
  .hand{font-size:1.5rem;transform:rotate(-4deg);line-height:1.15}
  .dlvbadge{min-width:112px;padding:6px 11px 7px}
  .adminctl{justify-content:stretch}
  .adminctl .picker{flex:1 1 auto;min-width:0}
  .adminctl select{flex:1 1 auto;min-width:0;width:100%}
  .adminctl .picker .cbx{flex:1 1 auto;min-width:0}
  .adminctl .btn{flex:none}
  .sync{font-size:.7rem;padding:3px 9px}
}
@media (max-width:400px){.logo .wordmark{font-size:1.05rem}.brandrow{column-gap:8px}.hdr-tools{gap:5px}.sync{font-size:.66rem;padding:3px 7px}.dlvbadge{min-width:96px}}
@media (max-width:440px){.brandrow:has(#acctBtn:not([hidden])) .logo .wordmark,.brandrow:has(#sync:not([hidden])) .logo .wordmark{display:none}}
/* v57: on a phone, where the name has already dropped for the gear or account button, the greeting sits beside the emblem,
   centred with it, in the Level card's row, whenever it fits (fitHand tries it at full size, then smaller type, then a
   smaller emblem). Only a greeting that still does not fit (a long name, or a screen under 360px) goes to its own line */
@media (max-width:699px){
  .brandrow.hin{flex-wrap:nowrap}
  .brandrow.hin .hello{order:2;flex:0 1 auto;min-width:0;align-self:center}
  .brandrow.hin .logo .wordmark{display:none}
  .brandrow.hin .dlvbadge{order:3;flex:none}
  .brandrow.hin .hdr-tools{order:4}
  .brandrow.hin .hand{transform:rotate(-3deg);padding:0 2px 3px 0}
  .brandrow.hin.hsm{column-gap:7px}
  .brandrow.hin.hsm .logo .emblem{width:36px;height:34px}
}
/* v51: progress numbers sit under the main content */
.statsbelow{margin:16px 0}
.statsbelow .stats.strip{border-radius:18px;padding:12px 16px;gap:4px 16px}
.statsbelow p.strip{margin:0}
.howto-more{margin-top:16px}
.adminctl{margin:8px 0 10px}
.panel.lesson .cbx{flex:none}
.panel.lesson .note{margin:0}
/* the student intro notes: compact, with the dismiss button in the corner so the text gets the full width */
.intro{position:relative;padding:10px 40px 10px 14px}
.intro p{font-size:.92rem;line-height:1.4}
.intro .x{position:absolute;top:2px;right:2px}
/* v53 header, Ben's layout: from 700px the logo, the greeting, the Level card and the sound (and account) buttons share one
   row, then the page title, then the tab bar right under it. Phones keep the two-row header and the bottom tab bar */
@media (min-width:700px){
  .brandrow{flex-wrap:nowrap;column-gap:16px;margin:4px 0 6px}
  .logo{order:1}
  .hello{order:2;flex:0 1 auto;min-width:0;padding:4px 0 0 4px}
  .dlvbadge{order:3;margin-left:auto;flex:none;min-width:128px}
  .hdr-tools{order:4}
  .hand{font-size:1.85rem;line-height:1.15;white-space:nowrap;padding:0 4px 4px 0}
  .pagetitle{margin:14px 0 14px}
  nav.tabs{margin:0 0 20px}
}
@media (min-width:700px) and (max-width:760px){.brandrow{column-gap:12px}.hand{font-size:1.65rem}}
/* v53: Too much? sits quietly in each exercise row, between the name and the rating */
.exmuch{flex:none;border:0;background:none;padding:0 2px;min-height:32px;font-size:.75rem;color:var(--muted);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent);text-underline-offset:3px;cursor:pointer;font-family:inherit;white-space:nowrap}
.exmuch:hover{color:var(--ink-2)}
.exm .exmuch{min-height:0;padding:0;margin-left:10px;font-size:inherit;vertical-align:baseline}
.exm{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
.exm .exmuch{margin-left:0}
.exm .vary{margin-right:0}
.exmuch.wide{display:none}
@media (min-width:481px){.exmuch.wide{display:inline-block}.exm .exmuch.narrow{display:none}}
@media (pointer:coarse){.exmuch.wide{min-height:44px}}
/* v53: the metronome at Not ready */
.stepper.sm input.nr{width:88px;font-family:var(--f-body,Poppins),sans-serif;font-size:.7812rem;font-weight:600;color:var(--ink-2);padding:4px 2px}
.mettog:disabled{opacity:.5;cursor:not-allowed}
.listenbtn:disabled{opacity:.5;cursor:not-allowed}
.listennr{margin:6px 0 0;font-size:.85rem;color:var(--muted)}
.tickbtn:disabled{opacity:.55;cursor:not-allowed}
.tmopt em{font-style:italic}
/* v54: a toggle that sits straight on the green page (Admin: Students | Master tree) gets a white tray, like the tab bar,
   so its selected button (solid green, white bold text) reads as selected and the pale one as not */
.seg.adminseg{background:#fff;border-radius:999px;padding:6px;gap:6px;box-shadow:var(--card-shadow);flex-wrap:nowrap}
.seg.adminseg button{flex:1 1 0;border-width:2px}
/* v56: the Skills line beside the Web and Matrix switch; Show me on the board beside PvP mode */
.webhint{align-self:center;font-size:.8125rem}
.brandrow.handtight .logo .wordmark{display:none}
.hand.handlong{transform:rotate(-2deg)}
.lbctl{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:14px}
.lbshow{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:.8438rem;font-weight:600;color:var(--ink);white-space:nowrap}
.lbshownote{font-size:.8125rem;color:var(--muted);margin:8px 0 0;text-align:right}
/* v55: Settings (the gear), Ben's Suggestions inbox and a student's About panel in Admin */
.gear svg{display:block}
@media (max-width:440px){.brandrow:has(#gearBtn:not([hidden])) .logo .wordmark{display:none}}
.seg.setseg{display:flex;flex-wrap:nowrap;gap:6px;background:var(--soft);border-radius:999px;padding:5px;margin:0 0 14px}
.seg.setseg button{flex:1 1 0;min-width:0;padding:0 8px;min-height:40px;font-size:.8438rem;background:transparent;white-space:nowrap}
.seg.setseg button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
/* from 700px the saving pill sits just under the header buttons instead of in the row, so the greeting keeps its room */
@media (min-width:700px){.hdr-tools{position:relative}.hdr-tools .sync{position:absolute;top:calc(100% + 6px);right:0;z-index:2;white-space:nowrap}}
.setnote{font-size:.8438rem;color:var(--green-ink);background:var(--soft);border-radius:12px;padding:10px 12px;margin:0 0 4px}
.sethelp{font-size:.7812rem;color:var(--muted);margin:6px 0 0}
input[type=email]{font-family:inherit;border:2px solid var(--line);border-radius:12px;background:#fff;color:#111;min-height:44px;padding:8px 10px;width:100%}
.setfs{border:0;margin:0;padding:0;min-width:0}
.setfs legend{padding:0;float:left;width:100%}
.setfs legend.f{display:block;font-size:.7812rem;color:var(--muted);margin:14px 0 6px;font-weight:500;line-height:1.5}
.setfs legend + *{clear:both}
.setrow3{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr);gap:8px}
.setrow2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px}
.setrow3 select,.setrow2 select{width:100%;min-width:0}
.kitpick{display:flex;flex-wrap:wrap;gap:8px}
.kitpick .tog{min-height:40px;padding:0 14px;font-size:.8438rem}
.addparent{margin-top:6px}
.setkv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:.8438rem;margin:6px 0 12px}
.setkv > span:nth-child(odd){color:var(--muted)}
.setkv > span:nth-child(even){overflow-wrap:anywhere}
.setinline{display:flex;gap:8px;align-items:center}
.setinline input{flex:1 1 auto;min-width:0}
.fbkind{margin:2px 0 0}
.fbmeta{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.fbcount{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);margin-top:6px;white-space:nowrap}
.fbcount.full{color:var(--warn)}
.formok{color:var(--green-ink);font-weight:600;font-size:.875rem;margin:10px 0 0}
.fbtext{white-space:pre-wrap;overflow-wrap:anywhere;font-weight:400;margin:6px 0 2px}
.fbctx{font-family:var(--f-mono);font-size:.7188rem}
.fbwho{color:var(--ink)}
.tag.fbk-bug{background:#fdecea;color:var(--warn)}
.tag.fbk-idea{background:var(--daytime);color:var(--daytime-ink)}
.tag.fbs-new{background:var(--selected);color:var(--green-ink)}
.tag.fbs-seen{background:var(--catchup);color:var(--catchup-ink)}
.tag.fbs-done{background:var(--surface-2);color:var(--ink-2)}
.adminseg .count{margin-left:6px;background:var(--warn);color:#fff;font-weight:600}
.adminseg button{white-space:nowrap}
.fbbar{gap:8px 14px}
.fbbar .seg{flex-wrap:wrap;background:#fff;border-radius:999px;padding:5px;gap:5px;box-shadow:var(--card-shadow)}
.fbbar .seg button{min-height:38px;padding:0 13px}
.fblegend{margin:0 0 4px}
@media (max-width:600px){.fbrow{grid-template-columns:minmax(0,1fr)}.fbrow .acts{justify-content:flex-start}.adminseg button{padding:0 6px;font-size:.8125rem}}
/* r21: the practice timer in the metronome, and the routine's variation labels */
.mtimer{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;font-size:.8125rem}
.mtimer .tmain{display:flex;align-items:center;gap:8px}
.mtimer .tadd{display:flex;align-items:center;gap:6px}
.mtimer .tplay{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;padding:0}
.mtimer .tplay[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:#fff}
.mtimer .tplay:disabled{opacity:.4;cursor:default}
.mtimer .tread{display:inline-grid;place-items:center;min-height:36px;min-width:58px;padding:0 8px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.mtimer.zero .tread{color:var(--muted);font-weight:500}
.mtimer.run .tread{border-color:var(--green);color:var(--green-ink)}
.mtimer .tadd button{min-height:36px;min-width:40px;padding:0 7px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:.8125rem;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.mtimer .tadd button.tclr{min-width:36px;padding:0;color:var(--muted)}
.mtimer.ended .tread{border-color:var(--green);background:var(--green);color:#fff;animation:tflash .9s ease-out 2}
@keyframes tflash{0%{transform:scale(1)}30%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.mtimer.ended .tread{animation:none}}
/* r23: the gap click. r24: its controls live in the click settings panel */
.mbarc{font-size:.8125rem;font-weight:700;color:var(--green-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mbarc.gap{color:var(--muted)}
.gapbox{display:flex;flex-direction:column;gap:8px;font-size:.8125rem;color:var(--ink-2)}
.gapbox .gaprow{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.gapbox select{min-height:34px;padding:4px 6px}
.gapbox .seg{display:flex;flex-wrap:wrap;gap:5px}
.gapbox .seg button,.gapbox .gpos button{min-height:34px;padding:0 10px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:.8125rem;font-weight:600;color:var(--ink);cursor:pointer}
.gapbox .gpos{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.gapbox .gpos button{min-width:42px;padding:0 8px}
/* r25: a Pattern has its own split; the odd groups sit behind More */
.gapbox .gpat{display:flex;flex-direction:column;gap:8px}
/* r26: why a Silent gap moved to Pattern with the click off */
.gapbox .gnote{margin:-2px 0 0;font-size:.7812rem;color:var(--ink-2)}
.gapbox .gnote[hidden]{display:none}
.webkey{margin:6px 2px 0;font-size:.7812rem}
.gapbox .gpat[hidden],.gapbox .gmore[hidden]{display:none}
.gapbox .glab{font-weight:600;color:var(--ink-2);min-width:74px}
.gapbox .gpat .gaprow{flex-wrap:nowrap;align-items:flex-start}
.gapbox .gpat .gaprow>.glab{padding-top:8px;flex:none}
.gapbox .gpat .gaprow>.seg,.gapbox .gpat .gpos .gchips{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px}
.gapbox .seg button[data-mt="gmore"]{border-style:dashed}
/* the More row runs the panel's full width, under the split row */
.gapbox .gmore button{padding:0 9px}
.gapbox .seg button[data-mt="gmore"].has{border-style:solid;border-color:var(--green);color:var(--green-ink)}
.gapbox .seg button[data-mt="gmore"][aria-expanded="true"]{background:var(--soft)}
.gapbox .seg button[aria-pressed="true"],.gapbox .gpos button[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:#fff}
/* r24: the tidy metronome. Row 1: the switch, the tempo and Tap. Row 2: the timer (time, play, a timer button that opens a
   small bubble with +30s +1m +5m C), chips for a gap or a muted click, and the click settings button. Row 3: the slider */
.met{position:relative}
.met .mrow1{gap:5px;flex-wrap:wrap}
.met .mrow1 .mtwrap{position:relative;display:inline-flex;flex:none}
.met .mrow1 .mettog{min-height:44px;padding:0 4px 0 9px;gap:5px;font-size:.8rem}
.met .mrow1 .mettog .mtpill{min-width:32px;height:28px;padding:0 5px;font-size:.68rem}
.met .mrow1 .mdot{position:absolute;right:-2px;top:-2px;width:11px;height:11px;border:2px solid var(--soft);box-sizing:content-box;pointer-events:none}
.met .mrow1 .stepper.sm{gap:3px}
.met .mrow1 .stepper.sm button{width:31px;min-height:40px}
.met .mrow1 .stepper.sm input{width:44px;min-height:40px}
.met .mrow1 .stepper.sm input.nr{width:66px;font-size:.6875rem}
.met .mrow1 [data-mt="tap"]{min-height:40px;min-width:0;padding:0 7px}
.met .mrow2{gap:8px;flex-wrap:wrap;row-gap:6px}
.mtimer{position:relative;flex-wrap:nowrap}
.mtimer .ticon,.met .micon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;padding:0;flex:none}
.mtimer .ticon[aria-expanded="true"],.met .micon[aria-expanded="true"]{border-color:var(--green);color:var(--green-ink);background:var(--selected)}
.mtimer .ticon:focus-visible,.met .micon:focus-visible,.mtimer .tplay:focus-visible,.mchip:focus-visible,.mpop button:focus-visible{outline:3px solid var(--green-ink);outline-offset:2px}
.met .mchips{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0}
.mchip{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;border:1.5px solid var(--green);background:var(--selected);color:var(--green-ink);font-size:.7812rem;font-weight:700;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.mchip.mute{border-color:var(--warn);background:#fff4f3;color:var(--warn)}
.mchip .mbarc:not([hidden])+[data-gapchiplbl]{display:none}
.mchip .mbarc{color:inherit}
.mchip .mbarc.gap{color:var(--muted)}
.mpop{position:absolute;z-index:45;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:10px 12px;color:var(--ink)}
.mpop[hidden]{display:none}
.tpop{left:0;top:calc(100% + 6px);padding:8px}
.tpop::before,.mset::before{content:"";position:absolute;top:-7px;width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.tpop::before{left:calc(var(--ax,110px) - 6px)}
.mset::before{right:17px}
.tpop .tadd{flex-wrap:nowrap}
.mset{right:0;width:min(372px,100%);display:flex;flex-direction:column;gap:10px;font-size:.8438rem}
.mset .mphead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mset .mphead b{font-size:.9375rem}
.mset .mpx{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);cursor:pointer;padding:0}
.mset .msrow{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.mset .msrow>label:first-child{min-width:62px;font-weight:600;color:var(--ink-2)}
.mset select{min-height:36px;padding:4px 6px}
.mset .gapbox select{min-width:74px}
.mset input[type=range]{flex:1;min-width:120px;accent-color:var(--lv1)}
.mset .mshead{font-weight:700;font-size:.875rem;margin-top:2px;padding-top:10px;border-top:1px solid var(--line)}
.mset .mshint{font-size:.7812rem;color:var(--muted);margin:-4px 0 0}
.mset .gapbox .gaprow>label{font-weight:600;color:var(--ink-2)}
/* narrow phones: the settings panel is a bottom sheet over the page */
@media (max-width:600px){
  .mset{position:fixed;left:0;right:0;bottom:0;top:auto!important;width:auto;max-height:82vh;overflow:auto;border-radius:18px 18px 0 0;border-bottom:0;padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px));z-index:70;box-shadow:0 -8px 30px rgba(0,0,0,.22)}
  .mset::before{display:none}
  .mset{box-shadow:0 0 0 100vmax rgba(10,16,18,.3),0 -8px 30px rgba(0,0,0,.22)}
  body.mset-open main{z-index:35}
}
.exm .vary{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;background:var(--selected);color:var(--green-ink);font-weight:600;font-size:.75rem;font-family:inherit}
details.ex.tdone .ext{color:var(--muted)}
.tick.timer{background:var(--selected);border-color:var(--green);color:var(--green-ink)}
.setswitch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0;font-size:.875rem;font-weight:600}
/* r29: focus mode. A practice sheet can cover the whole page: no corners, generous padding, the content in a centred column
   up to 720px wide. The same sheet and the same controls, only a class (.focus) */
.shbtns{display:flex;gap:8px;flex:none;align-items:center}
.sheet-head.hasfx{display:block}
.sheet-head.hasfx>.shbtns{float:right;margin:0 0 6px 10px}
.sheet-head.hasfx::after{content:"";display:block;clear:both}
.fxbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 11px;border:1.5px solid var(--green);border-radius:999px;background:var(--surface);color:var(--green-ink);font:600 .8438rem var(--f-body);white-space:nowrap;cursor:pointer}
.fxbtn svg{display:block;flex:none}
.fxbtn:hover{background:var(--soft)}
.fxbtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.sheet.focus,.sheet.wide.focus{top:0;left:0;right:0;bottom:0;width:auto;max-height:none;border-radius:0;overscroll-behavior:contain;
  padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,calc((100% - 720px)/2)) calc(32px + env(safe-area-inset-bottom,0px))}
.sheet.focus .grab{display:none}
.sheet.focus .sheet-head h3{font-size:1.5rem}
@media (min-width:860px){.sheet.focus,.sheet.wide.focus{width:auto;padding-top:28px;padding-bottom:40px}}
html.sheetlock,html.sheetlock body{overflow:hidden}
.nota.zoom .nota-svg{width:100%}
/* r30: the skill page ending: Transitions as an obvious expandable, then the closing row of actions */
.trans>summary.transsum{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 0}
.trans>summary.transsum::-webkit-details-marker{display:none}
.transsum .tchev{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--green-ink);transition:transform .18s ease-out}
.trans[open]>summary .tchev{transform:rotate(90deg)}
.transsum .tttl{display:flex;flex-direction:column;gap:1px}
.transsum .sec-title{margin:0}
.transsum .tsub{font-size:.8125rem;color:var(--muted)}
.endrow{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.sheet .endrow .fxbtn{flex:1;height:auto;min-height:44px;justify-content:center}
/* r30: Ben's own controls under the student's Log practice / Nail It */
.teachrow{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line)}
.teachlbl{font-size:.7188rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.teachrow .signoffbtn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tag.byben{background:var(--daytime);color:var(--daytime-ink)}
/* r30: Test it: what the student said, on the exercise being tested */
.testban{background:var(--catchup);color:var(--catchup-ink);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.testban p{margin:0 0 8px;font-size:.875rem}
.testban .tbbtns{display:flex;gap:8px;flex-wrap:wrap}
/* r31: the focus layer: a card from the page, lifted over everything, looking like a focused sheet */
.focuslayer{position:fixed;inset:0;z-index:39;background:var(--surface);overflow:auto;overscroll-behavior:contain;
  padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,calc((100% - 720px)/2)) calc(40px + env(safe-area-inset-bottom,0px))}
.focuslayer .flhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.focuslayer .flhead{justify-content:flex-end}
.focuslayer .fltitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.focuslayer .flbody [data-act=cardfocus],.focuslayer .flbody .cardfx{display:none}
.focuslayer .flbody{display:block}
.focuslayer .flbody>details.ex{border:0;background:transparent}
.focuslayer .flbody>.panel{box-shadow:none;border:0;padding:0;background:transparent}
html.layerlock,html.layerlock body{overflow:hidden}
.cardfx{display:flex;justify-content:flex-end;margin:0 0 8px}
.chalhead .fxbtn{margin-left:auto}
/* r31: Check-up */
.cubar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.custrip{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.custrip .pbar{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.custrip .pbar i{display:block;height:100%;background:var(--green)}
.cuadj{margin-top:10px;background:var(--surface);border-radius:10px;padding:10px}
.cuadj .stepper{margin-top:8px}
.cuadj .sub{margin:6px 0 0;font-size:.7812rem;color:var(--muted)}
.cudone{margin:0;font-weight:600}
.cunav{margin-top:14px}
.cusum{font-size:1.0625rem;font-weight:600;margin:4px 0 10px}
.cuadjlist{margin:0 0 12px;padding-left:20px}
.cuadjlist li{margin:4px 0}
.calibcard{background:var(--soft);border-radius:12px;padding:12px 14px;margin:12px 0}
.calibcard h4{margin:0 0 4px;font-size:.9375rem}
.calibcard p{margin:0}
.calibcard .sub{margin-top:6px;font-size:.7812rem;color:var(--muted)}
.calibline{margin:4px 0 8px;font-size:.8438rem}
/* r32: Review practice at the top of Ben's Lesson view */
.reviewcard h3{margin:0 0 4px}
.reviewcard .rvsum{margin:0 0 8px;font-size:.9375rem}
.reviewcard .actions{margin-top:10px}
/* r32: Find a skill */
.fdfilters{position:sticky;top:-8px;z-index:3;background:var(--surface);padding:8px 0 10px;margin:0 0 4px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
@media (min-width:860px){.fdfilters{top:-22px}}
.fdfilters .fdchips{display:flex;gap:6px;flex-wrap:wrap}
.fdfilters .fdchips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:.8125rem;font-weight:600}
.fdfilters .fdchips button[aria-pressed="true"]{background:var(--green-ink);border-color:var(--green-ink);color:#fff}
.fdfilters .fdrow1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fdfilters input[type=search]{flex:1;min-width:160px}
.fdarea{margin:14px 0 2px;font-size:.875rem;font-family:var(--f-body)}
.fdrow .m{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:3px}
.fdst{font-size:.7188rem;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--surface-2);color:var(--ink-2)}
.fdst.ready{background:var(--green);color:#fff}
.fdst.working{background:var(--soft);color:var(--green-ink);box-shadow:inset 0 0 0 1px var(--green)}
.fdst.done,.fdst.auto{background:var(--green-ink);color:#fff}
.fdst.near{background:var(--catchup);color:var(--catchup-ink)}
.fdst.locked{background:var(--surface-2);color:var(--muted)}
.fdrow .fdtag{font-size:.75rem;color:var(--muted)}
/* r33: homework */
.hwnow{background:var(--soft);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.hwnow h4{margin:0 0 6px;font-size:.875rem;font-family:var(--f-body)}
.hwnow .row{padding:6px 0}
.hwnow .hwfull{margin:6px 0 0;font-size:.8125rem;color:var(--catchup-ink);background:var(--catchup);border-radius:8px;padding:6px 8px}
.hwpanel .fdfilters{top:0}
/* r33: four Admin sections (Homework is new): two by two on a phone, so nothing scrolls sideways */
@media (max-width:480px){.seg.adminseg{display:grid;grid-template-columns:1fr 1fr;border-radius:24px}}
/* r33: difficulty (Ben only): the drum gear icon, its filter chips, the legend and the picker in Master tree > Edit */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dfb{display:inline-flex;vertical-align:middle;line-height:0;flex:none}
.dfb .dfi{width:24px;height:24px}
.dfchips{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.dfchips button{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:0}
.dfchips button[aria-pressed="true"]{background:var(--selected);border-color:var(--green-ink);box-shadow:inset 0 0 0 1px var(--green-ink)}
.mtbar .dfchips{flex-wrap:nowrap}
.dflegend{background:var(--surface-2);border-radius:12px;padding:8px 12px;margin:0 0 10px}
.dflegend summary{cursor:pointer;font-weight:600;font-size:.875rem}
.dflegend ol{list-style:none;margin:8px 0 2px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px}
@media (min-width:700px){.dflegend ol{grid-template-columns:repeat(6,1fr)}}
.dflegend li{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:.7812rem;line-height:1.25}
.dflegend li .dfi{width:64px;height:64px}
.dflegend li span{color:var(--muted);font-size:.7188rem}
.dfpick{border:0;padding:0;margin:0}
.dfpickrow{display:flex;gap:6px;flex-wrap:wrap}
.dfpickrow button{border:1px solid var(--line);background:var(--surface);border-radius:10px;min-width:64px;min-height:64px;padding:4px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.dfpickrow button small{font-size:.6875rem;color:var(--ink-2)}
.dfpickrow .dfauto{font-weight:700;font-size:.8125rem;line-height:36px}
.dfpickrow button[aria-checked="true"]{background:var(--selected);border-color:var(--green-ink);box-shadow:inset 0 0 0 1px var(--green-ink)}
/* r33: a Rhythm block: the pads (lit plays, outlined rests) and its bracketed counting, fixed width */
.bkchip{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;vertical-align:-1px}
.bkchip .pads{display:inline-flex;gap:2px}
.bkchip .pads i{width:10px;height:10px;border-radius:2px;border:1.5px solid var(--green-ink);display:block;box-sizing:border-box}
.bkchip .pads i.on{background:var(--green-ink)}
.bkname{font-family:var(--f-code);white-space:pre;font-weight:600;font-size:.95em}
.nota-svg .slbl.bk{font:600 .75rem var(--f-code)}
.nota-svg .slbl.bk.sm{font-size:.6875rem}
.nota-svg .bkp{fill:none;stroke:var(--green-ink);stroke-width:1.3}
.nota-svg .bkp.on{fill:var(--green-ink)}
.teachrow .signoffbtn{border:1.5px solid var(--green);background:var(--surface);color:var(--green-ink);min-height:44px}
.sheet .actions.endrow .btn,.sheet .actions.endrow .fxbtn{flex:1 1 140px}
/* with Test it there are four buttons: the self-rating rows put them under the words */
.revrow{grid-template-columns:minmax(0,1fr)}
.revrow .acts{justify-content:flex-start}
@media (max-width:600px){.qrow{grid-template-columns:minmax(0,1fr)}.qrow .acts{justify-content:flex-start}}
/* r29: tiny celebrations for Log practice (a mint ring) and Nail It (gold sparks, rising): small, quick, never in the way */
.minicel{position:fixed;left:0;top:0;width:0;height:0;z-index:90;pointer-events:none}
.minicel .mring{position:absolute;border-radius:var(--rad,999px);box-shadow:0 0 0 0 var(--mc);animation:mring .6s ease-out forwards}
.minicel.log{--mc:rgba(46,170,119,.55)}
.minicel.nail{--mc:rgba(232,178,28,.6)}
.minicel i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#2EAA77;opacity:0;animation:mspark .6s ease-out var(--dl,0ms) forwards}
.minicel.nail i{background:#e8b21c}
.minicel.nail i:nth-child(3n){background:#f6cf55;width:9px;height:9px;left:-4.5px;top:-4.5px;border-radius:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes mring{0%{box-shadow:0 0 0 0 var(--mc);opacity:1}100%{box-shadow:0 0 0 14px var(--mc);opacity:0}}
@keyframes mspark{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
.minipulse{animation:mpulse .35s ease-out}
.minipulse.nail{--mc:rgba(232,178,28,.7)}
.minipulse.log{--mc:rgba(46,170,119,.6)}
@keyframes mpulse{0%{box-shadow:0 0 0 3px var(--mc);filter:brightness(1.12)}100%{box-shadow:0 0 0 0 transparent;filter:none}}
@media (prefers-reduced-motion:reduce){.minicel{display:none}}
/* ============ r35: Practice room. The look only: every feature, flow and label is as before.
   A pale ground, white cards with a 1px line, one dark panel for the main block of a tab, green as the accent,
   Bricolage Grotesque for headings and the big bpm, Figtree for the rest. No shadows except the floating tab bar. ============ */
:root{
  --pr-ground:#F3F6F2; --pr-surface:#FFFFFF; --pr-line:#DCE5DF; --pr-line-soft:#E8EEEA; --pr-ink:#10241B; --pr-body:#33493F; --pr-muted:#557064;
  /* the accent is the mockup's #1E8A5A taken a step darker, so white text on it and it on the ground both clear 4.5:1 */
  --pr-accent:#1B7F53; --pr-accent-hover:#146B45; --pr-mint:#DCEFE4; --pr-bright:#3FC48A; --pr-on-bright:#0B1A13;
  --pr-dark:#10241B; --pr-dark-ink:#F3F6F2; --pr-dark-2:#A9C2B6; --pr-dark-line:#24402F; --pr-dark-off:#3A5A48;
  --pr-gold:#C9951E; --pr-gold-2:#A6760E; --pr-gold-soft:#FBF1D9; --pr-gold-ink:#8A6410;
  --pr-display:'Bricolage Grotesque','Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pr-text:'Figtree','Helvetica Neue',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --pr-r:20px; --pr-tabbar:68px;
  /* the app's own tokens, mapped onto the room */
  --green:var(--pr-accent); --green-dark:var(--pr-accent-hover); --green-ink:var(--pr-accent-hover); --ink:var(--pr-ink); --muted:var(--pr-muted);
  --line:var(--pr-line); --soft:var(--pr-ground); --selected:var(--pr-mint); --bg:var(--pr-ground); --surface:#fff; --surface-2:var(--pr-ground);
  --paper:#fff; --ink-2:var(--pr-body); --accent:var(--pr-accent); --accent-soft:var(--pr-mint); --ring:var(--pr-accent-hover); --good:var(--pr-accent-hover);
  --focus:rgba(27,127,83,.45); --brand:var(--pr-accent); --t-go:var(--pr-accent); --t-skills:var(--pr-accent-hover); --card-shadow:none;
  --gold:var(--pr-gold); --gold-ink:var(--pr-gold-ink);
  --f-display:var(--pr-display); --f-body:var(--pr-text); --f-mono:var(--pr-text);
}
html,body{background:var(--pr-ground)}
body{font-family:var(--pr-text);color:var(--pr-ink);padding:0 16px calc(var(--pr-tabbar) + 44px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){body{padding-bottom:48px}}
:focus-visible,input:focus{outline:3px solid var(--focus);outline-offset:2px}
a{color:var(--pr-accent-hover)}
h1,h2,h3,.panel h3,.go h3,.more h3,.sheet-head h3,.view-head h1,.view-head h2{font-family:var(--pr-display);font-weight:800;letter-spacing:-.02em;color:var(--pr-ink)}
.mono{font-family:var(--pr-text);font-variant-numeric:tabular-nums}
.btn,.linkbtn,.tog,.crow,.x,.seg button,nav.tabs button,.gobtn,input,select,textarea{font-family:var(--pr-text)}
.eyebrow{color:var(--pr-muted);font-weight:700;letter-spacing:.08em}
.muted,.panel .sub{color:var(--pr-muted)}
.linkbtn{color:var(--pr-accent-hover);text-underline-offset:3px}
/* the drum-doodle wallpaper goes; its drawing stays defined for the podium and the celebrations */
.bg{visibility:hidden;animation:none}

/* ---------- header: one tidy row. Logo and name left; Level, sound and Settings right ---------- */
header.top{color:var(--pr-ink);padding:16px 0 0;background:transparent;border:0}
body[data-role="student"] header.top{background:transparent;border:0}
.brandrow{flex-wrap:nowrap;align-items:center;column-gap:8px;margin:0 0 4px;min-height:48px}
.logo{color:var(--pr-ink);gap:8px}
.logo .emblem{width:40px;height:38px}
.logo .wordmark{font-family:var(--pr-display);font-weight:800;font-size:1.3125rem;letter-spacing:-.01em;color:var(--pr-ink)}
.hello,.brandrow.hin .hello{display:none!important}
.dlvbadge,.brandrow.hin .dlvbadge{order:2;margin-left:auto;flex:none;flex-direction:row;align-items:center;gap:7px;height:44px;min-height:44px;min-width:0;padding:0 14px 0 6px;border-radius:22px;border:1px solid var(--pr-line);background:#fff;color:var(--pr-ink);box-shadow:none}
.dlvbadge .dlvbar{display:none}
.dlvbadge .dlvring{display:block;flex:none}
.dlvbadge .dlvt{font-size:.875rem;font-weight:700;color:var(--pr-ink)}
.dlvbadge .dlvt b{font-size:.875rem;font-weight:700}
.hdr-tools,.brandrow.hin .hdr-tools{order:3;gap:8px}
.mute{background:#fff;color:var(--pr-ink);border:1px solid var(--pr-line);box-shadow:none;width:44px;height:44px}
.mute:hover{background:var(--pr-ground)}
.sync{background:#fff;color:var(--pr-muted);border:1px solid var(--pr-line);box-shadow:none;border-radius:999px;font-size:.7188rem;font-weight:700;padding:3px 9px;line-height:1.3}
.sync.off,.sync.error{background:#FFF4F3;color:var(--warn);border-color:#F2CFCB}
.logo .emblem-sm{display:none}.logo .emblem-lg{display:block}
@media (max-width:480px){.logo{gap:6px}.logo .emblem{width:32px;height:30px}.logo .emblem-lg{display:none}.logo .emblem-sm{display:block}.logo .wordmark{font-size:1.125rem;letter-spacing:-.02em}.brandrow{column-gap:6px}.hdr-tools{gap:6px}.sync{font-size:.6562rem;padding:2px 7px}
  .dlvbadge,.brandrow.hin .dlvbadge{gap:5px;padding:0 10px 0 5px}.dlvbadge .dlvring{width:28px;height:28px}}
/* the name shows whenever the row has room for it (fitHand adds .nowm to the row when it would not fit) */
html .brandrow .logo .wordmark{display:inline!important}
html .brandrow.nowm .logo .wordmark{display:none!important}
@media (max-width:440px){html .brandrow:has(#sync:not([hidden])) .logo .wordmark,html .brandrow:has(#acctBtn:not([hidden])) .logo .wordmark{display:none!important}}
@media (min-width:700px){.hdr-tools .sync{position:static}.brandrow{margin:0 0 6px}}
/* Ben's student picker and View as student: a second row in the same style */
.adminctl{justify-content:flex-start;gap:8px;margin:6px 0 4px}
.adminctl .picker{color:var(--pr-muted);font-size:.8125rem;font-weight:600}
.adminctl select,.adminctl .cbx-btn{border:1px solid var(--pr-line);border-radius:22px;background:#fff;color:var(--pr-ink);min-height:44px}
.touch{background:#fff!important;color:var(--pr-ink)!important;border:1px solid var(--pr-line)!important;box-shadow:none!important;border-radius:22px!important}
/* the page heading: an eyebrow and a display heading, left aligned */
.phead{display:flex;flex-direction:column;gap:2px;margin:14px 0 16px}
.phead .eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pr-muted)}
.pagetitle,.phead .pagetitle{font-family:var(--pr-display);font-weight:800;font-size:1.875rem;line-height:1.05;letter-spacing:-.02em;text-transform:none;text-align:left;color:var(--pr-ink);margin:0}
body[data-view="go"] .pagetitle{font-size:2.375rem;line-height:1.02}
@media (min-width:700px){.phead{margin:18px 0 16px}.pagetitle,.phead .pagetitle{font-size:2.125rem}body[data-view="go"] .pagetitle{font-size:2.5rem}}

/* ---------- tabs: a floating white bar on a phone, a white tray on wider screens; the current tab mint ---------- */
nav.tabs{gap:6px}
nav.tabs button,body[data-role="student"] nav.tabs button,nav.tabs button:not([aria-current="page"]){background:transparent;color:var(--pr-muted);border:0;border-radius:18px;font-weight:600;font-size:.75rem;box-shadow:none;gap:2px}
nav.tabs button svg,body[data-role="student"] nav.tabs button svg,body[data-role="student"] nav.tabs button[aria-current="page"] svg,nav.tabs button[aria-current="page"] svg{color:inherit}
nav.tabs button[aria-current="page"],body[data-role="student"] nav.tabs button[aria-current="page"]{background:var(--pr-mint);color:var(--pr-ink);border:0;font-weight:700;box-shadow:none}
nav.tabs button:not([aria-current="page"]):hover{background:var(--pr-ground);color:var(--pr-ink)}
@media (max-width:699px){
  nav.tabs{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));height:var(--pr-tabbar);margin:0;padding:6px;gap:6px;background:#fff;border:1px solid var(--pr-line);border-radius:24px;box-shadow:0 8px 24px rgba(16,36,27,.08);z-index:30}
  nav.tabs button{min-height:0;height:100%;padding:0 4px}
  nav.tabs button svg{width:20px;height:20px}
}
@media (min-width:700px){
  nav.tabs{background:#fff;border:1px solid var(--pr-line);border-radius:20px;padding:6px;box-shadow:none;margin:0 0 20px}
  nav.tabs button,body[data-role="student"] nav.tabs button,nav.tabs button:not([aria-current="page"]),nav.tabs button[aria-current="page"],body[data-role="student"] nav.tabs button[aria-current="page"]{min-height:44px;font-size:.875rem;border-radius:14px}
}

/* ---------- cards: white, a 1px line, 20px corners, no shadow ---------- */
.panel,.graph-wrap,.mx-scroll,.intro,.lessoncard,details.ex,.chaladmin{background:#fff;border:1px solid var(--pr-line);border-radius:var(--pr-r);box-shadow:none}
.panel{padding:18px 16px}
.panel h3{font-size:1.1875rem;line-height:1.25}
.panel .panel{border:0;border-top:1px solid var(--pr-line-soft);border-radius:0;box-shadow:none}
.panel .exlist details.ex,.sheet .exlist details.ex{border:0;border-top:1px solid var(--pr-line-soft);border-radius:0;box-shadow:none;background:transparent}
.panel .exlist details.ex:first-child,.sheet .exlist details.ex:first-child{border-top:0}
.stats.strip,p.strip{background:#fff;border:1px solid var(--pr-line);box-shadow:none;border-radius:var(--pr-r);color:var(--pr-muted)}
.strip b{color:var(--pr-ink)}
.view-head{text-align:left;color:var(--pr-ink);align-items:flex-start}
.view-head h1,.view-head h2{color:var(--pr-ink);font-size:1.375rem}
.view-head p{color:var(--pr-body);margin:4px 0 0}
.lesson .lh,.lesson .lh .muted{color:var(--pr-body)}
.demo .linkbtn{color:var(--pr-muted)}
.intro{color:var(--pr-ink)}
.more{border-top:0}
.more>summary::after{border-color:var(--pr-ink)}
.ownstrip,.cmp,.lockbox,.callout,.calibcard,.errbox{background:var(--pr-ground);border-radius:14px}
.hint{background:#fff;border:1px solid var(--pr-line);color:var(--pr-body)}
.toast{background:var(--pr-dark);color:var(--pr-dark-ink);border-radius:16px}

/* ---------- buttons: primary green, secondary white with a line; the main action of a screen tall and round ---------- */
.btn{min-height:44px;border-radius:14px;border:1px solid var(--pr-line);background:#fff;color:var(--pr-ink);font-weight:700;font-size:.9375rem;padding:0 16px}
.btn.small{min-height:44px;border-radius:14px;padding:0 13px;font-size:.875rem}
.btn:hover{border-color:#C3D3C9;background:#FAFCFA}
.btn.primary{background:var(--pr-accent);border-color:var(--pr-accent);color:#fff}
.btn.primary:hover{background:var(--pr-accent-hover);border-color:var(--pr-accent-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--pr-body)}
.btn.danger{background:#fff;color:var(--warn);border-color:#E8B4AE}
.btn.danger:hover{background:#FFF4F3}
.tickbtn,.tickbtn.logpr{min-height:58px!important;border-radius:18px;font-size:1.0625rem!important;font-weight:700}
.tickbtn.logpr{background:var(--pr-accent);border:1px solid var(--pr-accent);color:#fff}
.tickbtn.logpr:hover{background:var(--pr-accent-hover)}
.tickbtn.undo{border-radius:18px}
.btn[data-gostart],.btn[data-act="planfinish"],.btn.big{min-height:56px;border-radius:18px;font-size:1.0625rem}
.nextrow .nextbtn{background:#fff;border:1px solid var(--pr-line);color:var(--pr-ink);border-radius:16px}
.x{background:var(--pr-ground);border:1px solid var(--pr-line);border-radius:999px;color:var(--pr-ink)}
.fxbtn{border:1px solid var(--pr-line);background:#fff;color:var(--pr-ink);font-family:var(--pr-text);font-weight:700}
.fxbtn:hover{background:var(--pr-ground)}
/* toggles and chips: white with a line; the chosen one mint with a green edge */
.seg button,.tog,.seg button:not([aria-pressed="true"]),.tog:not([aria-pressed="true"]){background:#fff;color:var(--pr-ink);border:1px solid var(--pr-line);font-weight:600}
.seg button[aria-pressed="true"],.tog[aria-pressed="true"],.crow[aria-pressed="true"],.stupick button[aria-pressed="true"]{background:var(--pr-mint);border:1px solid var(--pr-accent);color:var(--pr-ink);font-weight:700}
.seg.adminseg,.seg.setseg{background:#fff;border:1px solid var(--pr-line);box-shadow:none}
.seg.adminseg button,.seg.setseg button{border-width:1px;border-color:transparent;background:transparent}
.seg.adminseg button[aria-pressed="true"],.seg.setseg button[aria-pressed="true"]{background:var(--pr-mint);border-color:var(--pr-accent);color:var(--pr-ink)}
.crow{background:var(--pr-ground);border:1px solid transparent}
.tag{background:var(--pr-ground);color:var(--pr-body);border:1px solid var(--pr-line-soft)}
.tag.ok{background:var(--pr-accent);color:#fff;border-color:var(--pr-accent)}
.tag.pending{background:var(--pr-mint);color:var(--pr-accent-hover);border-color:transparent}
.count{background:var(--pr-accent);color:#fff}
input[type=text],input[type=number],input[type=url],input[type=search],input[type=email],textarea,select,.cbx-btn{border:1px solid var(--pr-line);border-radius:14px;background:#fff;color:var(--pr-ink)}
.tick{border-color:var(--pr-line)}
.tick.on{background:var(--pr-accent);border-color:var(--pr-accent);color:#fff}

/* ---------- the Practice tab: Quick practice is the dark panel, with this week's practice days ---------- */
.go.hero{background:var(--pr-dark);color:var(--pr-dark-ink);border:0;border-radius:22px;padding:20px;gap:14px}
.gobtn{background:var(--pr-bright);color:var(--pr-on-bright);border-radius:16px;min-height:76px;box-shadow:none;font-family:var(--pr-text)}
.gobtn:hover{background:#56D199}
.gobtn .gobig{font-family:var(--pr-display);font-weight:800;font-size:1.5rem;letter-spacing:-.01em}
.gobtn .gosub{font-size:.875rem;font-weight:600;opacity:1;color:var(--pr-on-bright)}
.go.hero .gostatus{color:var(--pr-dark-2)}
.wkstrip{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--pr-dark-line);padding-top:12px}
.wkstrip .wklbl{font-size:.7812rem;color:var(--pr-dark-2)}
.wkstrip .wkdays{display:flex;gap:6px}
.wkd{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;font-size:.6875rem;font-weight:700;box-sizing:border-box;border:1.5px solid var(--pr-dark-off);color:var(--pr-dark-2)}
.wkd.on{background:var(--pr-bright);border-color:var(--pr-bright);color:var(--pr-on-bright)}
.wkd.today{border:2px solid var(--pr-dark-ink);color:var(--pr-dark-ink)}
.wkd.future{color:#8FAA9C}
/* a session under way: its head is the dark panel */
.go.session .sesshead{background:var(--pr-dark);color:var(--pr-dark-ink);border:0;border-radius:22px}
.go.session .sesshead h3,.go.session .sesshead .mono{color:var(--pr-dark-ink)}
.go.session .sesshead .muted,.go.session .sesshead .sub{color:var(--pr-dark-2)}
.plan .sesshead .pbar{background:var(--pr-dark-line)}
.plan .sesshead .pbar i{background:var(--pr-bright)}
.go.session .sesshead .seg button{background:transparent;color:var(--pr-dark-ink);border-color:var(--pr-dark-off)}
.go.session .sesshead .seg button[aria-pressed="true"]{background:var(--pr-bright);color:var(--pr-on-bright);border-color:var(--pr-bright)}

/* ---------- exercise cards and the metronome (the exercise screen of the mockup) ---------- */
details.ex>summary .ext{font-weight:700;font-size:1rem;color:var(--pr-ink)}
.exnote{color:var(--pr-body)}
.exm .vary{background:var(--pr-mint);color:var(--pr-accent-hover)}
.nota{background:#fff}
.met[data-met]{background:#fff;border:1px solid var(--pr-line);border-radius:var(--pr-r);padding:14px 12px;gap:14px}
.met .mrow1{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 10px}
.met .mrow1 .mlights{grid-column:1/-1;grid-row:1;justify-self:center}
.met .mrow1 .stepper,.met .mrow1 .ro{grid-column:1/-1;grid-row:2;justify-self:center}
.met .mrow1 .mtwrap{grid-column:1;grid-row:3}
.met .mrow1 [data-mt="tap"]{grid-column:3;grid-row:3}
.met .mrow1 .stepper.sm{gap:12px;align-items:center}
.met .mrow1 .stepper.sm button,.stepper button{width:44px;height:44px;min-height:44px;border-radius:22px;border:1px solid var(--pr-line);background:var(--pr-ground);color:var(--pr-ink);font-size:1.375rem;padding:0}
.met .mrow1 .stepper.sm input{width:3.1ch;min-height:48px;height:48px;padding:0;border:0;background:transparent;text-align:center;font:800 2.5rem/1 var(--pr-display);color:var(--pr-ink);font-variant-numeric:tabular-nums}
.met .mrow1 .stepper.sm input:focus{outline:2px solid var(--focus);border-radius:10px}
.met .mrow1 .stepper.sm input.nr{width:7.2em;font:700 1.0625rem/1 var(--pr-text)}
.met .ro b{font:800 2.5rem/1 var(--pr-display)}
.met .mrow1 .mettog{background:var(--pr-dark);color:var(--pr-dark-ink);border:0;min-height:44px;padding:0 6px 0 14px;gap:8px;font-size:.875rem;font-weight:700}
.met .mrow1 .mettog .mtpill{background:var(--pr-dark-line);color:var(--pr-dark-2);min-width:38px;height:30px;font-size:.6875rem}
.met .mrow1 .mettog.on{background:var(--pr-dark)}
.met .mrow1 .mettog.on .mtpill{background:var(--pr-bright);color:var(--pr-on-bright)}
.met .mrow1 .mettog:disabled{opacity:.5}
.met .mrow1 [data-mt="tap"]{min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--pr-line);background:#fff;color:var(--pr-ink);font-weight:700}
.met .mrow1 .mdot{display:none}
.met .mrow1 .mtwrap{gap:10px;align-items:center}
.met .mrow1 .mplay{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;background:var(--pr-dark);color:var(--pr-dark-ink);cursor:pointer;padding:0;flex:none}
.met .mrow1 .mplay[aria-pressed="true"]{background:var(--pr-accent);color:#fff}
.met .mrow1 .mplay:disabled{background:#5d6b64;color:#fff;cursor:not-allowed}
.met .mrow1 .mplay:focus-visible{outline:3px solid var(--focus,#1f6f4a);outline-offset:2px}
.met .mrow1 .mettog.mute{min-height:44px;min-width:44px;padding:0 10px;gap:6px;background:#fff;color:var(--pr-ink);border:1px solid var(--pr-line)}
.met .mrow1 .mettog.mute.on{background:#fff;color:var(--pr-ink)}
.met .mrow1 .mettog.mute .mticon{display:inline-grid;place-items:center}
.met .mrow1 .mettog.mute .mtpill{display:none}
.met .mrow1 .mettog.mute{width:44px;padding:0;justify-content:center}
.mtimer .tplay{border:0;background:var(--pr-dark);color:var(--pr-dark-ink)}
.mtimer .tplay[aria-pressed="true"]{background:var(--pr-accent);color:#fff}
.mtimer .tread,.mtimer .ticon,.met .micon,.mtimer .tadd button{border:1px solid var(--pr-line);background:#fff;color:var(--pr-ink)}
.mtimer .tread{border-radius:18px}
.mtimer.run .tread{border-color:var(--pr-accent);color:var(--pr-accent-hover)}
.mtimer.ended .tread{background:var(--pr-accent);border-color:var(--pr-accent);color:#fff}
.mchip{border:1px solid var(--pr-accent);background:var(--pr-mint);color:var(--pr-accent-hover)}
/* the tempo bar: green up to the tempo, the target marked on it */
.met input[type=range][data-mt-range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;margin:10px 0 2px;background:linear-gradient(to right,var(--pr-accent) var(--fill,0%),var(--pr-line-soft) var(--fill,0%));accent-color:var(--pr-accent)}
.met input[type=range][data-mt-range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--pr-accent);cursor:pointer}
.met input[type=range][data-mt-range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--pr-accent);cursor:pointer}
.met input[type=range][data-mt-range]::-moz-range-track{height:8px;border-radius:4px;background:transparent}
.lvmark{font:700 .75rem/1 var(--pr-text);color:var(--pr-ink)}
.lvmark::before{width:3px;height:10px;margin-left:-1.5px;top:-3px;background:var(--pr-ink)}
.lvline,.lvline b{color:var(--pr-ink)}
.lvline .golv{color:var(--pr-accent-hover)}
.nailmsg{border-radius:14px;border:1px solid var(--pr-line)}
.nailmsg.up{border-color:var(--pr-accent);background:var(--pr-mint);color:var(--pr-accent-hover)}
/* the four 1/4-note lights: each flashes with the click on its 1/4 note, the first one accented; off when the click is off */
.mlights{display:flex;gap:12px;align-items:center;justify-content:center;min-height:22px}
.mlights i{display:block;width:16px;height:16px;border-radius:50%;background:var(--pr-line-soft);box-shadow:inset 0 0 0 1px var(--pr-line);transition:background .32s ease-out,box-shadow .32s ease-out,transform .32s ease-out}
.met.on .mlights i{background:#D3E3D9;box-shadow:none}
.met.on .mlights i.hit{background:var(--pr-bright);box-shadow:0 0 14px rgba(63,196,138,.75);transition:none}
.met.on .mlights i.hit.one{background:var(--pr-accent);box-shadow:0 0 16px rgba(27,127,83,.7);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){
  .mlights i,.met.on .mlights i.hit,.met.on .mlights i.hit.one{transition:none;transform:none;background:#D3E3D9;box-shadow:none}
  .met.on .mlights i:first-child,.met.on .mlights i:first-child.hit,.met.on .mlights i:first-child.hit.one{background:var(--pr-accent)}
}

/* ---------- sheets and focus mode ---------- */
.backdrop{background:rgba(16,36,27,.42)}
.sheet{background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -8px 30px rgba(16,36,27,.14)}
@media (min-width:860px){.sheet{border-radius:24px 0 0 24px}}
.sheet-head h3{font-size:1.5rem;line-height:1.1}
.sheet.focus,.sheet.wide.focus,.focuslayer{background:var(--pr-ground);border-radius:0}
.sheet.focus .sheet-head h3{font-size:1.875rem}
.sheet.focus .nota,.focuslayer .nota{background:#fff;border:1px solid var(--pr-line);border-radius:var(--pr-r);padding:12px 10px 6px}
.sheet.focus .exlist details.ex,.focuslayer .flbody>details.ex{background:transparent}
.testban{border-radius:14px}
.teachrow{border-top:1px dashed var(--pr-line)}
.custrip .pbar{background:var(--pr-line-soft)}
.custrip .pbar i{background:var(--pr-accent)}

/* ---------- notation text in the room's type ---------- */
.nota-svg .ts{font-family:var(--pr-display);font-weight:800}
.nota-svg .tn{font-family:var(--pr-text);font-weight:700}
.nota-svg .slbl{font-family:var(--pr-text)}
.nota-svg .stk{font:700 .75rem var(--pr-text)}

/* ---------- Skills: the web and the matrix keep every meaning, in the room's colours ---------- */
.graph-wrap,.mx-scroll{padding:18px 16px}
.cell.lvn{box-shadow:inset 0 0 0 1.5px var(--pr-line)}
.cell.lk{background:var(--pr-ground);color:var(--pr-muted);box-shadow:inset 0 0 0 1.5px var(--pr-line)}

/* ---------- Leaderboard: the podium is the tab's dark panel; the metal tones stay ---------- */
.podium{background:var(--pr-dark);border-radius:var(--pr-r)}
.podium .podbg{opacity:.16}
.podium .close{background:var(--pr-mint);color:var(--pr-ink)}
.lb h3,.chalpts b,.step .pn{font-family:var(--pr-display)}
.lb .season{color:var(--pr-accent-hover)}
.lbrow:nth-child(odd){background:var(--pr-ground)}
.lbrow.me{background:var(--pr-mint);box-shadow:inset 0 0 0 1.5px var(--pr-accent)}
.lbrank{color:var(--pr-accent-hover)}
.lbyou{background:var(--pr-accent)}
.chalpts{color:var(--pr-accent-hover)}

/* ---------- celebrations and stories: the dark panel, display type ---------- */
.lvl{background:var(--pr-dark)}
.lvl .lvbg{opacity:.22}
.lvtxt{color:var(--pr-dark-ink)}
.lvt{font-family:var(--pr-display);font-weight:800;letter-spacing:-.02em}
.lvs{font-family:var(--pr-text);font-weight:600;color:var(--pr-dark-2);opacity:1}
.confetti i:nth-child(4n){background:var(--pr-bright)}
.confetti i:nth-child(4n+2){background:#F2C94C}
.story{background:var(--pr-dark)}
.story .stbg{opacity:.12}
.stname{font-family:var(--pr-display);font-weight:800}
.steb,.sthint{color:var(--pr-dark-2)}

/* the Lesson view's main block, Review practice, is its dark panel */
.panel.reviewcard{background:var(--pr-dark);color:var(--pr-dark-ink);border:0;border-radius:22px}
.panel.reviewcard h3{color:var(--pr-dark-ink)}
.panel.reviewcard .rvsum,.panel.reviewcard .calibline{color:var(--pr-dark-2)}
.panel.reviewcard .calibline b{color:var(--pr-dark-ink)}
.panel.reviewcard .btn.primary{background:var(--pr-bright);border-color:var(--pr-bright);color:var(--pr-on-bright)}
.panel.reviewcard .btn.primary:hover{background:#56D199}
.panel.reviewcard .btn:not(.primary){background:transparent;border-color:var(--pr-dark-off);color:var(--pr-dark-ink)}
/* ---------- Ben's views: the same tokens; the Homework, difficulty and Check-up parts already sit on cards ---------- */
.hwnow,.dflegend{background:var(--pr-ground)}
.fdfilters{background:#fff}
.fdfilters .fdchips button{border:1px solid var(--pr-line);background:#fff}
.fdfilters .fdchips button[aria-pressed="true"]{background:var(--pr-mint);border-color:var(--pr-accent);color:var(--pr-ink)}
.fdst.ready{background:var(--pr-accent)}
.fdst.done,.fdst.auto{background:var(--pr-accent-hover)}
.dfchips button[aria-pressed="true"],.dfpickrow button[aria-checked="true"]{background:var(--pr-mint);border-color:var(--pr-accent)}
.reviewcard,.hwcard{border-color:var(--pr-line)}
.lbctl{gap:8px}
.lbshow{gap:6px;font-size:.7812rem}
.lbctl .btn.small{padding:0 12px}

/* V2 a11y: 44px targets */
.exmuch{position:relative}
.exmuch::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.exm .exmuch::after{left:-4px;right:-4px;top:0;height:44px;transform:none} /* on the card's second line it grows down, so the row's middle still opens the card */
.mtimer .ticon,.met .micon{width:44px;height:44px}
.lvmark::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.met input[type=range][data-mt-range]::-webkit-slider-thumb{width:44px;height:44px;border:13px solid transparent;background:#fff;background-clip:padding-box;box-shadow:inset 0 0 0 3px var(--pr-accent);margin-top:-18px}
.met input[type=range][data-mt-range]::-moz-range-thumb{width:18px;height:18px;border:13px solid transparent;background:#fff;background-clip:padding-box;box-shadow:inset 0 0 0 3px var(--pr-accent)}
/* V2 a11y: disabled buttons keep at least 3:1 */
.btn:disabled,.btn.primary:disabled,.tickbtn:disabled,.listenbtn:disabled,.mettog:disabled,.met .mrow1 .mettog:disabled,.cbx-btn:disabled{opacity:1;background:#e3e8e4;color:#4f5c55;border-color:#aab5ae;filter:none}
.met .tickbtn.logpr:disabled,.met .tickbtn:disabled{background:#e3e8e4;color:#4f5c55}
/* V2: the bar counter under Log practice / Nail It */
.lbtns .barct{flex:1 1 100%;display:flex;align-items:center;gap:10px;font-size:.875rem;font-weight:600;color:var(--pr-ink,#1b2a22);margin:2px 0 4px}
.barct .barbar{flex:1;height:8px;border-radius:4px;background:var(--pr-line,#d5dcd7);overflow:hidden}
.barct .barbar i{display:block;height:100%;border-radius:4px;background:var(--pr-accent,#1f8a5b);transition:width .2s}
.barct.full .barbar i{background:var(--pr-bright,#3ccf8e)}
.barct [data-barn]{white-space:nowrap;font-variant-numeric:tabular-nums}
/* V2: the Matrix hint on the web */
.mxhint{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem}

/* V2.2: ambient motion */
/* on the tinted band and between the cards: ink and body only (contrast at the darkest sample); cards keep theirs */
:root[data-amb="full"] .phead .eyebrow,:root[data-amb="quiet"] .phead .eyebrow{color:var(--pr-body)}
:root[data-amb="full"] header.top,:root[data-amb="quiet"] header.top{--pr-muted:#33493F;--muted:#33493F}
:root[data-amb="full"] main>:not(.panel):not(section),:root[data-amb="quiet"] main>:not(.panel):not(section),:root[data-amb="full"] .demo,:root[data-amb="quiet"] .demo{--pr-muted:#33493F;--muted:#33493F;--pr-accent:#146B45;--green:#146B45;--accent:#146B45}
:root[data-amb="full"] main .panel,:root[data-amb="quiet"] main .panel,:root[data-amb="full"] main section,:root[data-amb="quiet"] main section{--pr-muted:#557064;--muted:#557064;--pr-accent:#1B7F53;--green:#1B7F53;--accent:#1B7F53}
.ambpaused #amb *,.ambpaused .focuslayer .fllift,.ambpaused .go.hero::before,.ambpaused .go.hero .gobtn::after,.ambpaused .ambhl .threadhl{animation-play-state:paused!important}
:root[data-amb="full"] .go.hero{position:relative;overflow:hidden;isolation:isolate}
:root[data-amb="full"] .go.hero::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 35% 40%,rgba(63,196,138,.18),rgba(63,196,138,0) 44%),radial-gradient(circle at 68% 62%,rgba(232,182,74,.14),rgba(232,182,74,0) 40%);animation:ambGlow 32s ease-in-out var(--ambd,0s) infinite alternate;will-change:transform}
@keyframes ambGlow{0%{transform:translate3d(-9%,-5%,0)}100%{transform:translate3d(9%,6%,0)}}
:root[data-amb="full"] .go.hero .gobtn{position:relative}
:root[data-amb="full"] .go.hero .gobtn::after{content:"";position:absolute;inset:-3px;border-radius:19px;border:2px solid var(--pr-bright,#3FC48A);opacity:0;pointer-events:none;animation:ambRing 2s ease-out var(--ambr,0s) infinite}
@keyframes ambRing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.05,1.12)}}
#logo .emblem{transform-origin:50% 80%}
.ambhl .threadhl{stroke-dasharray:3 34;opacity:.5;animation:ambDash 7s linear infinite}
@keyframes ambDash{to{stroke-dashoffset:-74}}
.ambwash{position:fixed;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(63,196,138,0),rgba(63,196,138,.38) 35%,rgba(232,182,74,.22) 65%,rgba(232,182,74,0));transform:translateY(100%)}
@media (prefers-reduced-motion:reduce){#amb *,.focuslayer .fllift,.go.hero::before,.go.hero .gobtn::after,.ambhl .threadhl{animation:none!important}}

/* V2.3: the one full screen: a deep ink stage, one exercise fitted to the screen, a fixed bottom bar */
.focuslayer{z-index:42;display:flex;flex-direction:column;overflow:hidden;height:100vh;height:100dvh;background:#10241B;color:var(--pr-dark-ink,#F3F6F2);
  padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,calc((100% - 760px)/2)) 0}
.focuslayer[hidden]{display:none}
.focuslayer>*{position:relative;z-index:1}
.focuslayer .flspot{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.focuslayer .flhead{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:0 0 8px;min-height:36px}
.focuslayer .fltitle{position:static;width:auto;height:auto;overflow:hidden;clip:auto;flex:1;min-width:0;font-family:var(--pr-display);font-weight:800;font-size:1.0625rem;white-space:nowrap;text-overflow:ellipsis;color:var(--pr-dark-ink,#F3F6F2)}
.focuslayer .flpos{color:var(--pr-dark-2,#A9C2B6);font-size:.875rem;white-space:nowrap}
.focuslayer .flnbtn{min-height:36px;background:transparent;color:var(--pr-dark-ink,#F3F6F2);border:1px solid #3A5A48}
.focuslayer .flbody{flex:1;min-height:0;overflow:hidden;display:block}
.focuslayer .flbody>details.ex{border:0;background:transparent;padding:0;margin:0;color:var(--pr-dark-ink,#F3F6F2)}
.focuslayer .flbody>details.ex>summary{padding:0 0 6px;color:var(--pr-dark-ink,#F3F6F2)}
.focuslayer .flbody>details.ex>summary .ext,.focuslayer .flbody>details.ex>summary .exh{color:var(--pr-dark-ink,#F3F6F2)}
.focuslayer .flbody>details.ex>summary .ext{display:none} /* the title is in the head */
.focuslayer .flbody>details.ex>summary .exm,.focuslayer .flbody>details.ex>summary .exm *,.focuslayer .flbody .exmuch{color:var(--pr-dark-2,#A9C2B6)}
.focuslayer .flbody .exbody{padding:0}
.focuslayer .flbody .nota{background:#fff;border:0;border-radius:16px;padding:8px 8px 4px;margin:0 0 8px;display:flex;justify-content:center}
.focuslayer .flbody .nota svg{max-height:var(--flnh,9999px);width:auto;max-width:100%;height:auto}
.focuslayer .flbody .met{background:#fff;color:var(--pr-ink,#10241B);border:0;border-radius:18px;padding:10px 12px;margin:0;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.focuslayer .flbody .met .mrow1{gap:6px 10px}
.focuslayer .flbody .met .mrow1 .stepper.sm input{font-size:2rem;min-height:40px;height:40px}
.focuslayer .flbody .met .mrow1 .stepper.sm button{width:40px;height:40px;min-height:40px}
.focuslayer .flbody .tickbtn{min-height:50px!important}
.focuslayer .flbody .exnote,.focuslayer .flbody .exfocus,.focuslayer .flbody .lvsub,.focuslayer .flbody .flaglist,.focuslayer .flbody .nextrow,.focuslayer .flbody .vid,.focuslayer .flbody .exhist,.focuslayer .flbody [data-exhistbox]{display:none!important}
.focuslayer .flbody>section.chal{background:transparent;border:0;box-shadow:none;padding:0;color:var(--pr-dark-ink,#F3F6F2)}
.focuslayer .flbody>section.chal>.grp-head,.focuslayer .flbody>section.chal .chalpts,.focuslayer .flbody>section.chal .chalends,.focuslayer .flbody>section.chal .chalwho,.focuslayer .flbody>section.chal .chalgoal{display:none}
.focuslayer.tight .flbody .lvline,.focuslayer.tight .flbody .mlights{display:none}
.focuslayer.tight .flbody .listenbtn{min-height:40px}
.focuslayer .flnotes{position:absolute;left:max(12px,calc((100% - 760px)/2));right:max(12px,calc((100% - 760px)/2));top:54px;z-index:3;max-height:60%;overflow:auto;background:#fff;color:var(--pr-ink,#10241B);border-radius:16px;padding:12px 16px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.focuslayer .flnotes[hidden]{display:none}
.focuslayer .flbar{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;flex:none;padding:6px 0 calc(8px + env(safe-area-inset-bottom,0px))}
.focuslayer .flbar .btn{min-height:46px;background:rgba(255,255,255,.06);color:var(--pr-dark-ink,#F3F6F2);border:1px solid #3A5A48;border-radius:14px;font-weight:700}
.focuslayer .flbar .flprev{justify-self:start}.focuslayer .flbar .flnext{justify-self:end}
.focuslayer .flbar .flexit{display:inline-flex;align-items:center;gap:6px;background:var(--pr-bright,#3FC48A);color:var(--pr-on-bright,#0B1A13);border:0}
.focuslayer .flbar .btn:disabled{opacity:1;background:transparent;color:#8FAA9C;border-color:#2C4A3A}
.focuslayer .flbar .btn:focus-visible,.focuslayer .flnbtn:focus-visible{outline:3px solid var(--pr-bright,#3FC48A);outline-offset:2px}
html.layerlock body{height:100vh;max-height:100vh;overflow:hidden}

/* V2.3: the logo's stick turns about its butt end; the ripple grows from its own centre */
svg.emblem .lgstick,svg.emblem .lgstickm{transform-box:view-box;transform-origin:467.44px 44.07px}
svg.emblem .lgrip,svg.emblem .lgrip2{transform-box:fill-box;transform-origin:center;pointer-events:none}
.lvl .lvico.lvhero svg{width:180px;height:170px;overflow:visible;color:var(--pr-dark-ink,#F3F6F2)}
.lvl .lvico.lvhero svg .mark-back{fill:var(--pr-accent,#1B7F53)!important}
.celtoast .ctlogo svg{width:34px;height:32px;overflow:visible;color:var(--pr-dark-ink,#F3F6F2)}
.celtoast .ctlogo svg .mark-back{fill:var(--pr-accent,#1B7F53)!important}

/* V2.4: full screen sized for the exercise */
.focuslayer .flbody>details.ex>.exbody>*{min-width:0}
.focuslayer .flbody{display:flex;flex-direction:column;justify-content:safe center}
.focuslayer .flbody>*{flex:none}
.focuslayer .flbody .nota{box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin:0 0 10px;padding:10px 12px;overflow:hidden}
.focuslayer .flbody .nota svg{display:block;max-width:none;max-height:none;flex:none}
.focuslayer .flbody .nota.flsizing svg{display:none}
.focuslayer .flbody .met{width:100%;max-width:560px;margin:0 auto;box-sizing:border-box;padding:10px 14px}
@media (min-width:1100px){
  .focuslayer{padding-left:max(24px,calc((100% - 1400px)/2));padding-right:max(24px,calc((100% - 1400px)/2))}
  .focuslayer .flbody>details.ex>.exbody{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:18px;align-items:center}
  .focuslayer .flbody .nota{grid-column:1;grid-row:1;margin:0;align-self:center}
  .focuslayer .flbody .met{grid-column:2;grid-row:1;max-width:460px;align-self:center}
  .focuslayer .flbody>details.ex>.exbody>:not(.nota):not(.met){grid-column:1/-1}
}
/* V2.4: a compact metronome: the controls in two tight centred rows (play, sound, tempo, Tap; then the timer, settings
   and Listen), then Nail It and the counter. The tempo slider, target marker and beat lights go first when space is short. */
.focuslayer .flbody .met{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px}
.focuslayer .flbody .met>.mrow1,.focuslayer .flbody .met>.mrow2,.focuslayer .flbody .met>.tickrow{display:contents}
.focuslayer .flbody .met>.mrow1>*,.focuslayer .flbody .met>.mrow2>*,.focuslayer .flbody .met>.tickrow>*{flex:0 0 auto;width:auto;max-width:100%;margin:0;grid-area:auto}
.focuslayer .flbody .met .mchips:empty{display:none}
.focuslayer .flbody .met .micon,.focuslayer .flbody .met .helpq{width:44px;min-width:44px;height:44px;flex:none}
.focuslayer .flbody .met .mlights{order:0;flex-basis:100%;justify-content:center;min-height:12px;gap:10px;margin:0}
.focuslayer .flbody .met .mlights i{width:11px;height:11px}
.focuslayer .flbody .met .mtwrap{order:1;gap:6px;display:flex}
.focuslayer .flbody .met .stepper{order:2;gap:4px}
.focuslayer .flbody .met [data-mt=tap]{order:3;min-height:44px}
.focuslayer .flbody .met .stepper.sm input{font-size:2.5rem;height:44px;min-height:44px;width:3.1ch}
.focuslayer .flbody .met .stepper.sm button{width:40px;height:40px;min-height:40px}
.focuslayer .flbody .met .mplay{width:46px;height:46px}
.focuslayer .flbody .met .mtimer{order:4}
.focuslayer .flbody .met .mchips{order:5}
.focuslayer .flbody .met [data-mt=settings]{order:6}
.focuslayer .flbody .met .listenbtn{order:8;min-height:44px;width:auto;flex:0 1 auto;padding:0 12px;font-size:.9375rem}
.focuslayer .flbody .met .helpq{order:9}
@media (max-width:520px){.focuslayer .flbody .met>.tickrow::before{content:"";order:7;flex-basis:100%;height:0}}
.focuslayer .flbody .met>.mslider{order:10;flex-basis:100%}
.focuslayer .flbody .met .lvtrack{order:11;flex-basis:100%}
.focuslayer .flbody .met .lvline{order:12;flex-basis:100%;margin:0;font-size:.875rem;text-align:center}
.focuslayer .flbody .met .tickbtn{order:20;flex-basis:100%;width:100%;min-height:46px!important;margin-top:2px}
.focuslayer .flbody .met [data-barct]{order:21;flex-basis:100%;width:100%}
.focuslayer.tight .flbody .lvline,.focuslayer.tight .flbody .met>.mslider{display:none}
.focuslayer.tighter .flbody .mlights,.focuslayer.tighter .flbody .listenbtn,.focuslayer.tighter .flbody .helpq,.focuslayer.tighter .flbody [data-act=listenhelp]{display:none}
.focuslayer .flbody>details.ex>summary .exm,.focuslayer .flbody>details.ex>summary .exm *,.focuslayer .flbody .exmuch{color:#C9DACF}
/* V2.4: stage controls brighter; Exit at the top too */
.focuslayer .flnbtn,.focuslayer .flbar .flprev,.focuslayer .flbar .flnext{color:#F3F6F2;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.focuslayer .flbar .btn:disabled{color:#A9C2B6;border:1px dashed rgba(255,255,255,.22);background:transparent;cursor:not-allowed}
.focuslayer .flpos{color:#C9DACF}
.focuslayer .flxtop{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#F3F6F2;cursor:pointer;padding:0}
.focuslayer .flxtop svg{width:20px;height:20px}
.focuslayer .flxtop:focus-visible{outline:3px solid var(--pr-bright,#3FC48A);outline-offset:2px}

/* V2.4: a deeper ground, darker lines, soft shadows, a stronger selected tab */
:root{--pr-ground:#E6EFE6;--pr-line:#CFDAD2;--bg:#E6EFE6}
.panel,.graph-wrap,.mx-scroll,.intro,.lessoncard,details.ex,.chaladmin,.stats.strip,p.strip,.seg.adminseg,.seg.setseg,.mute,.touch,.dlvbadge,nav.tabs,.lb .lbrow.me{box-shadow:0 1px 2px rgba(16,36,27,.06),0 6px 18px rgba(16,36,27,.08)}
.panel .panel,.panel .exlist details.ex,.sheet .exlist details.ex,.sheet .panel,.sheet details.ex,.focuslayer details.ex,.focuslayer .panel{box-shadow:none}
@media (max-width:699px){nav.tabs{box-shadow:0 2px 4px rgba(16,36,27,.08),0 10px 28px rgba(16,36,27,.16)}}
nav.tabs button[aria-current="page"],body[data-role="student"] nav.tabs button[aria-current="page"]{background:#C6E5D2;color:var(--pr-ink);box-shadow:inset 0 0 0 1px rgba(27,127,83,.25)}
.seg button[aria-pressed="true"]{background:#C6E5D2;box-shadow:inset 0 0 0 1px rgba(27,127,83,.25)}
/* text straight on the ground (between cards, in the header): body for grey, the darker green for green */
main>:not(.panel):not(section),.demo,header.top{--pr-muted:#33493F;--muted:#33493F}
main>:not(.panel):not(section),.demo{--pr-accent:#146B45;--green:#146B45;--accent:#146B45}
main .panel,main section{--pr-muted:#557064;--muted:#557064;--pr-accent:#1B7F53;--green:#1B7F53;--accent:#1B7F53}
.phead .eyebrow{color:var(--pr-body)}

/* V2.5: colour only. The pale green ground with three very large, very soft colour fields that drift (64 to 113 s,
   never in step) and crossfade a few degrees of hue; Off and reduced motion: the same, still */
#amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:block;contain:strict}
#amb .ambfield{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the beat layer: a pale warm wash, invisible at rest; ambBeat raises its opacity for a moment */
#amb .ambpulse{position:absolute;inset:0;display:block;opacity:0;will-change:opacity;background:radial-gradient(130vmax 100vmax at 50% 38%,rgba(255,253,242,.18),rgba(255,253,242,.14) 45%,rgba(255,253,242,.08))}
/* V2.5: the stage: deep green, darker at the edges; a lift behind the exercise that drifts and breathes; the beat glow */
.focuslayer{background:#0B1C14}
.focuslayer .flspot{background:radial-gradient(ellipse 85% 75% at 50% 46%,#18392A 0%,#143224 38%,#0F271C 70%,#0A1A13 100%)}
.focuslayer .fllift{position:absolute;display:block;left:50%;top:46%;width:120vmax;height:84vmax;margin:-42vmax 0 0 -60vmax;border-radius:50%;opacity:.85;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(63,196,138,.14),rgba(63,196,138,.1) 30%,rgba(63,196,138,.05) 60%,rgba(63,196,138,0))}
:root[data-amb="full"] .focuslayer .fllift,:root[data-amb="quiet"] .focuslayer .fllift{animation:flLift 10s ease-in-out infinite alternate}
@keyframes flLift{0%{transform:translate3d(-3vw,-2vh,0) scale(.94);opacity:.7}100%{transform:translate3d(3vw,2vh,0) scale(1.06);opacity:1}}
.focuslayer .flglow{position:absolute;display:block;left:0;top:0;width:0;height:0;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(110,224,170,.16),rgba(110,224,170,.12) 45%,rgba(110,224,170,.05) 75%,rgba(110,224,170,0))}

/* V2.6: the colour field reaches past the window; the page's own background (what an iPhone's rubber band shows) is the
   field's top colour */
#amb{top:-40vh;bottom:-40vh;height:auto}
html{background:#E8E4C6}
/* the pull-down drummer: in the space above the page, centred, small; driven by pullSet */
#pulldrum{position:absolute;left:50%;top:-60px;width:64px;height:48px;transform:translateX(-50%);z-index:2;pointer-events:none;opacity:0;color:#10241B}
#pulldrum svg{display:block}
@media (prefers-reduced-motion:reduce){#pulldrum{display:none}}
/* V2.6: on a card with no Nailed It (a locked or a listening-only exercise) Listen is the main button: it still sits on the
   second row of the compact metronome, after the controls */
.focuslayer .flbody .met [data-mt=listen]:not(.listenbtn){order:8;min-height:44px;width:auto;flex:0 1 auto;padding:0 14px}
.focuslayer .flbody .met [data-act=listenhelp]{order:9}
.focuslayer .flbody .met>.lad{order:8;flex-basis:100%}
.focuslayer .flbody .met>.lad>.lbtns{display:flex;justify-content:center;gap:8px}
/* V2.6: the full-screen stage: content from the top, under the head */
.focuslayer .flbody{justify-content:flex-start}
.focuslayer.flone .flbody{justify-content:safe center}
/* V2.14.4 button: the counter and Log practice share a row under Nail It; Log practice is small and quiet */
.lbtns .ctrow{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:4px;min-width:0}
.lbtns .ctrow>.barct{flex:1 1 220px;min-width:min(220px,100%);margin:2px 0 4px}
.lbtns .ctrow>.barct[hidden]{display:none}
.lbtns .ctrow>.logsec{flex:none;margin-left:auto;min-height:36px;padding:0 10px;font-size:.8125rem;font-weight:600;border-radius:999px;background:#fff;color:var(--pr-accent-hover,#166B45);border:1.5px solid var(--pr-accent,#1B7F53)}
.lbtns .ctrow>.logsec:disabled{opacity:.45;cursor:default}
.lbtns .ctrow>.logsec[hidden]{display:none}
.focuslayer .flbody .met .ctrow{order:21;flex-basis:100%;width:100%}
.focuslayer .flbody .met .ctrow{flex-wrap:nowrap}
.focuslayer .flbody .met .ctrow>[data-barct]{order:0;flex:1 1 0;min-width:0;width:auto;margin:0}
/* full screen on a phone: one row (the bar's marks stay, their words go), so the card is no taller than before */
@media (max-width:520px){.focuslayer .flbody .met .ctrow .barct .barlbl{display:none}}
/* "Raise top speed at 240 bpm" stays on one line on a small phone, so the button (and the card) keeps its height as the
   tempo moves into the Speed zone */
@media (max-width:380px){.met .tickbtn{font-size:.9375rem!important;padding-left:10px;padding-right:10px;gap:6px}.met .tickbtn .tk{width:20px;height:20px}}
.focuslayer .flbody .met .ctrow>.logsec{min-height:28px;padding:0 10px}
/* V2.6: the loop counter: one bar to 8 times round, marks at 2 (Log) and 8 (Nail It) */
.lbtns .barct{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:1px;align-items:center}
.barct .barbar{position:relative;overflow:visible;grid-column:1;grid-row:1}
.barct .barbar i{max-width:100%}
.barct .bmk{position:absolute;top:-3px;width:2px;height:14px;border-radius:1px;background:#8FA399}
.barct .bmk.log{margin-left:-1px}
.barct .bmk.nail{right:0}
.barct.logok .bmk.log,.barct.nailok .bmk.nail{background:var(--pr-accent,#1B7F53)}
.barct [data-barn]{grid-column:2;grid-row:1}
.barct .barlbl{position:relative;grid-column:1;grid-row:2;height:1.05rem;font-size:.75rem;font-weight:500;color:#557064}
.barct .bl{position:absolute;top:0;white-space:nowrap}
.barct .bl.log{transform:translateX(-50%)}
.barct .bl.nail{right:0}
.barct.lo .bl.log,.barct:not(.lo) .bl.nail{color:var(--pr-ink,#10241B);font-weight:700}
/* V2.6: Quick practice, warmer. A: a deep green with a faint gold-olive lift, a pale sage button with a touch of gold.
   B (for comparison, html[data-qp=b]): the same panel, a soft, less saturated mint */
:root{--qp-panel:linear-gradient(135deg,#163528 0%,#1A3628 50%,#2A3824 100%);--qp-btn:linear-gradient(100deg,#C5DEBE 0%,#D3DFB4 100%);--qp-btn-h:linear-gradient(100deg,#CFE5C8 0%,#DCE6BE 100%);--qp-solid:#C9DFBB;--qp-ring:#C9DFBB}
:root[data-qp="b"]{--qp-btn:#8FD0AE;--qp-btn-h:#9ED8BA;--qp-solid:#8FD0AE;--qp-ring:#8FD0AE}
.go.hero{background:var(--qp-panel)}
.gobtn{background:var(--qp-btn);color:#10241B}
.gobtn:hover{background:var(--qp-btn-h)}
.gobtn .gosub{color:#10241B}
.wkd.on{background:var(--qp-solid);border-color:var(--qp-solid);color:#10241B}
.btn[data-gostart]{background:var(--qp-btn);color:#10241B;border-color:transparent}
.btn[data-gostart]:hover{background:var(--qp-btn-h)}
:root[data-amb="full"] .go.hero::before{background:radial-gradient(circle at 35% 40%,rgba(150,190,120,.16),rgba(150,190,120,0) 44%),radial-gradient(circle at 68% 62%,rgba(232,182,74,.12),rgba(232,182,74,0) 40%)}
:root[data-amb="full"] .go.hero .gobtn::after{border-color:var(--qp-ring)}

/* V2.7: the drummer in the logo's style: ink #10241B lines, the head the page's pale, the sticks one deepened mint */
#pulldrum .pdshell{fill:#10241B}
#pulldrum .pdhead{fill:#EEF0E2;stroke:#10241B;stroke-width:4.6}
#pulldrum .pdlug ellipse{fill:#EEF0E2;stroke:#10241B;stroke-width:3}
#pulldrum .pdstk{fill:#278159}
#pulldrum .pdimp{opacity:0;stroke:#10241B;stroke-width:3.6;stroke-linecap:round}
/* the page's own background is the colour the field fades to past the window */
html,body{background:#E8E4C6}

/* V2.11: lesson mode */
.lessonbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;max-width:var(--lbw,960px);margin:8px auto 0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  background:#123a2a;color:#fff;border-radius:999px;padding:5px 6px 5px 14px;font-size:.8125rem;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.lessonbar .lbgo{all:unset;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:32px}
.lessonbar .lbgo:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
.lessonbar .lbdot{width:8px;height:8px;border-radius:50%;background:#5fe0a5;flex:none;animation:lbdot 2s ease-in-out infinite}
@keyframes lbdot{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lessonbar .lbdot{animation:none}}
.lessonbar .lbsep{opacity:.6}
.lessonbar [data-lbtime]{font-variant-numeric:tabular-nums}
.lessonbar .lbend{margin-left:auto;background:#fff;color:#123a2a;border-color:#fff;min-height:32px;padding:0 14px}
.starthere h3{margin:0 0 8px}
.starthere .shsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.starthere .shstep{display:flex;align-items:center;gap:8px;background:var(--pr-ground,#f3f7f4);border-radius:12px;padding:8px 8px 8px 10px;min-width:0}
.starthere .shn{width:22px;height:22px;border-radius:50%;background:var(--green-ink,#1d6f4d);color:#fff;font-weight:700;font-size:.75rem;display:grid;place-items:center}
.starthere .shn{flex:none}
.starthere .sht{font-weight:600;font-size:.875rem;line-height:1.25;flex:1;min-width:0}
.starthere .shstep .btn{flex:none;white-space:nowrap;margin:0}
@media (max-width:520px){.starthere .shsteps{grid-template-columns:1fr}.starthere .shstep{padding:4px 4px 4px 10px}}
.rvfocus .skname.linkish{text-align:left}
/* the Check-up banner in full screen: one compact strip above the exercise */
#focusLayer .cuban,#focusLayer .testban{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:6px 10px;margin:0 0 6px;border-radius:10px;font-size:.8125rem}
#focusLayer .cuban>p,#focusLayer .testban>p{margin:0;flex:1 1 260px;line-height:1.3}
#focusLayer .cuban .tbbtns,#focusLayer .testban .tbbtns{margin:0;display:flex;gap:6px}
#focusLayer .cuban .btn.small,#focusLayer .testban .btn.small{min-height:32px;padding:0 12px}
#focusLayer .cuban .cudone{margin:0;font-weight:600}
#focusLayer .cuban .cuadj{flex-basis:100%}
#focusLayer .cuban .cuadj .lvpick{margin:4px 0}
@media (min-width:1100px){
  .focuslayer .flbody>details.ex>.exbody:has(>.cuban,>.testban)>.nota,.focuslayer .flbody>details.ex>.exbody:has(>.cuban,>.testban)>.met{grid-row:2}
  .focuslayer .flbody>details.ex>.exbody>.cuban,.focuslayer .flbody>details.ex>.exbody>.testban{grid-row:1}
}

/* V2.11: Safari audio: the wake hint */
.met .mwake{flex-basis:100%;width:100%;margin:6px 0 0;min-height:40px;border-radius:10px;border:1px dashed var(--green-ink,#1d6f4d);background:var(--catchup,#fff7e0);color:var(--catchup-ink,#5a3d00);font:inherit;font-weight:600;cursor:pointer}

/* V2.11: wallpapers, behind the cards: between the colour field (#amb) and the page */
#wall{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
#wall .wdrift{position:absolute;left:0;top:0;width:calc(100% + 640px);height:calc(100% + 520px);background-repeat:repeat;background-size:640px 520px;animation:wdrift 260s linear infinite;will-change:transform}
@keyframes wdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-640px,-520px,0)}}
#wall .wsvg{position:absolute;left:0;top:0;opacity:.62}
#wall .wswing{animation:wswing 9s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
#wall .wsilk{animation:wsilk 9s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
#wall .wdrop{animation:wdrop 9s ease-in-out infinite alternate}
@keyframes wswing{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes wsilk{from{transform:scaleY(1)}to{transform:scaleY(1.07)}}
@keyframes wdrop{from{transform:translateY(0)}to{transform:translateY(var(--d,6px))}}
#wall .wpeek{animation:wpeek 9s ease-in-out infinite alternate}
@keyframes wpeek{from{transform:translateY(3px)}to{transform:translateY(-3px)}}
#wall .wblink{animation:wblink 9s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes wblink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.12)}}
.wallstill #wall *,.ambpaused #wall *,.layerlock #wall *{animation-play-state:paused!important}
.wallstill #wall .wswing,.wallstill #wall .wpeek,.wallstill #wall .wbob,.wallstill #wall .wsilk,.wallstill #wall .wdrop,.wallstill #wall .wblink,.wallstill #wall .wdrift{animation:none!important}
.bgpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bgopt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 10px;border:1.5px solid var(--line,#d9dccf);border-radius:14px;background:#fff;font:inherit;font-weight:600;font-size:.8125rem;color:inherit;cursor:pointer;min-height:44px}
.bgopt[aria-checked="true"]{border-color:var(--green-ink,#1d6f4d);box-shadow:0 0 0 2px color-mix(in srgb,var(--green-ink,#1d6f4d) 25%,transparent);background:#f3faf6}
.bgsw{display:grid;place-items:center;width:100%;height:46px;border-radius:9px;background:linear-gradient(135deg,#eef6ec,#f2ecd2)}

/* V2.11.1 */
.focuslayer .flbody>details.ex>summary{display:none}
.focuslayer .fltitle{flex:0 1 auto}
.focuslayer .flsub{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap}
.focuslayer .flsub .flrange{color:var(--pr-dark-ink,#F3F6F2);opacity:.72;font-size:.8125rem}
.focuslayer .flsub .flchip{pointer-events:none;cursor:default;flex:none}
@media (max-width:640px){.focuslayer .flsub{display:none}.focuslayer .fltitle{flex:1}}
.starthere .shsteps{grid-template-columns:repeat(3,minmax(0,1fr))}
.starthere .shstep.shwide{grid-column:1/-1}
.starthere .shstep:not(.shwide){flex-wrap:wrap;align-content:space-between}
.starthere .shstep:not(.shwide) .sht{flex:1 1 calc(100% - 30px)}
.starthere .shstep:not(.shwide) .btn{flex:1 1 100%}
@media (max-width:520px){.starthere .shsteps{grid-template-columns:1fr}.starthere .shstep:not(.shwide){flex-wrap:nowrap}.starthere .shstep:not(.shwide) .btn{flex:none}}
.starthere .sht .rvsum,.starthere .sht .calibline{display:block;font-weight:400;font-size:.8125rem;color:var(--muted,#5b5b5b);margin:2px 0 0;line-height:1.35}
.starthere .sht .calibline b{font-weight:600;color:inherit}
.focuslayer .flbody .met>.teachrow{order:99;flex:1 1 100%;display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 0;padding:6px 0 0;border-top:1px dashed var(--line,#d9dccf)}
.focuslayer .flbody .met>.teachrow .teachlbl{margin:0}
.focuslayer .flbody .met>.teachrow .btn{min-height:36px}
.focuslayer .flbody .met:has(>.teachrow) .tickbtn{flex:3 1 0!important;min-width:0;width:auto}
.focuslayer .flbody .met>.teachrow{order:20;flex:2 1 0;min-width:0;margin:2px 0 0;padding:0;border-top:0}
.focuslayer .flbody .met>.teachrow .teachlbl{display:none}
.focuslayer .flbody .met>.teachrow .signoffbtn{width:100%;min-height:46px;padding:2px 10px;font-size:.9375rem;line-height:1.2}
.focuslayer .flbody .met.cfrow .tickbtn{flex:1 1 100%!important;width:100%}
.focuslayer .flbody .met:not(.cfrow)>.teachrow{flex:0 0 auto}
.focuslayer .flbody .met:not(.cfrow)>.teachrow .signoffbtn{width:auto;padding:0 14px}
.focuslayer .flbody .met:not(.cfrow)>.teachrow .sfx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.focuslayer .flbody .met.cfrow>.teachrow{order:20;flex:1 1 100%}
/* a small phone: the main label stays on one line (smaller type, tighter padding) */
@media (max-width:350px){.met .tickbtn{font-size:.875rem!important;padding-left:8px!important;padding-right:8px!important;letter-spacing:-.01em}.met .tickbtn .tk{width:18px;height:18px}}
.lfocus .rvfocus{margin:0}
.lfocus .rvfocus h4{margin-top:0}

/* V2.12 */
#wall .wdrums{position:absolute;left:0;top:0}
#wall .wbob{animation:wbob 18s ease-in-out infinite alternate;will-change:transform}
@keyframes wbob{from{transform:translate(calc(var(--bx,4px)*-1),calc(var(--by,0px)*-1))}to{transform:translate(var(--bx,4px),var(--by,0px))}}
/* the slider: the input is as tall as its handle, so the handle sits on the track in every browser; the track, the fill
   and the Target mark use the handle's own mapping (22 px in from each end) */
.met input[type=range][data-mt-range]{height:44px;margin:-8px 0 -16px;border-radius:0;background:linear-gradient(var(--pr-accent),var(--pr-accent)) 0 50%/calc(22px + var(--f,0) * (100% - 44px)) 8px no-repeat,linear-gradient(var(--pr-line-soft),var(--pr-line-soft)) 0 50%/100% 8px no-repeat;background-color:transparent}
.met input[type=range][data-mt-range]::-webkit-slider-thumb{margin-top:0}
/* V2.14.1 track: one thin bar with the zones painted in, the green fill over it with the same radius, a tick at the top
   speed, and the input on top with only its handle showing */
.met .mslider{position:relative;width:100%;height:44px;margin:-6px 0 -10px;--th:8px}
.met .mslider>.mzbar,.met .mslider>.mfill{position:absolute;left:0;top:50%;height:var(--th);margin-top:calc(var(--th) / -2);border-radius:calc(var(--th) / 2);pointer-events:none}
.met .mslider>.mzbar{right:0;background:var(--zbg,#E8EEEA)}
.met .mslider>.mfill{width:calc(22px + var(--f,0) * (100% - 44px));background:var(--pr-accent)}
.met .mslider>.lvmark{position:absolute;left:calc(22px + var(--p,0) * (100% - 44px));top:50%;width:2px;height:calc(var(--th) + 8px);margin:calc(var(--th) / -2 - 4px) 0 0 -1px;padding:0;border-radius:1px;background:var(--pr-ink);pointer-events:none}
.met .mslider>.lvmark::before,.met .mslider>.lvmark::after{content:none}
.met .mslider>.lvmark[hidden]{display:none}
.met .mslider>input[type=range][data-mt-range]{position:relative;display:block;width:100%;height:44px;margin:0;background:none!important}
.met .mslider>input[type=range][data-mt-range]::-webkit-slider-thumb{width:44px;height:44px;border:11px solid transparent;background:var(--pr-accent);background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(16,36,27,.25),inset 0 0 0 3px #fff;margin-top:0}
.met .mslider>input[type=range][data-mt-range]::-moz-range-thumb{width:22px;height:22px;border:11px solid transparent;background:var(--pr-accent);background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(16,36,27,.25),inset 0 0 0 3px #fff}
.focuslayer .met .mslider{--th:12px}
.focuslayer .met .mslider>input[type=range][data-mt-range]::-webkit-slider-thumb{border-width:8px}
.focuslayer .met .mslider>input[type=range][data-mt-range]::-moz-range-thumb{width:28px;height:28px;border-width:8px}
/* V2.14.3 zones: the line under the slider, one fixed row of three slots (grid auto 1fr auto). The word's slot is as wide as
   the widest word (stand-ins drawn by CSS, so they are not text), and Go to top speed keeps its space when it is hidden */
.lvline{container-type:inline-size}
.lvline .zrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:10px}
.lvline .zcell{display:inline-grid;justify-items:start;align-items:center;justify-self:start;white-space:nowrap}
.lvline .zcell>*{grid-area:1/1}
.lvline .zcur{display:inline-flex;align-items:center;gap:6px}
/* the "i" is a 24 px target but takes only a line of text's height, so the line is no taller than before (full screen on a
   small phone hides the slider and this line first when the card runs out of room) */
.lvline .zinfob{margin:-3px 0}
.lvline .zsz{font-style:normal;visibility:hidden;pointer-events:none}
.lvline .zsz::before{content:attr(data-w);font-weight:700;padding-right:30px}
.lvline .zts{justify-self:center;text-align:center;white-space:nowrap}
.lvline .zgo{justify-self:end;white-space:nowrap}
.lvline .golv{white-space:nowrap;margin-left:0}
.lvline .zph{visibility:hidden;pointer-events:none;display:inline-block;letter-spacing:normal}
.lvline .zph::before{content:attr(data-w)}
/* too narrow for one row: the word and the top speed on the first row (left and right), Go to top speed on the second, right */
@container (max-width:23em){
  .lvline .zrow{grid-template-columns:auto 1fr;row-gap:0}
  .lvline .zts{justify-self:end}
  .lvline .zgo{grid-column:1/-1;justify-self:end}
}
/* the "i": a thin ring with a small serif i, so it does not read as the Listen "?" (a thick green ring) */
.zinfob{flex:none;width:24px;height:24px;min-height:0;padding:0;border-radius:50%;border:1.25px solid currentColor;background:transparent;color:var(--pr-muted,#5b6b62);display:inline-grid;place-items:center;cursor:pointer;opacity:.85}
.zinfob::before{content:"i";font:italic 600 13px/1 Georgia,"Times New Roman",serif}
.zinfob:hover,.zinfob[aria-expanded="true"]{opacity:1;background:rgba(16,36,27,.06)}
.zinfob:focus-visible{outline:3px solid var(--green-ink);outline-offset:2px}
.zinfo{position:absolute;z-index:46;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:8px 10px;font-size:.875rem;line-height:1.35;text-align:left}
.zinfo ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.zinfo li{padding:5px 8px;border-radius:8px;color:var(--pr-muted,#4a5a51)}
.zinfo li b{color:var(--pr-ink,#10241B)}
.zinfo li.on{background:var(--selected,#E6F4EC);color:var(--pr-ink,#10241B);font-weight:500}
.focuslayer .flbody .met>.mslider{margin:-6px 0 -8px}
/* full screen: stacked (the metronome as wide as the exercise, its controls capped) or side by side (equal columns, the same height) */
.focuslayer .flbody,.focuslayer.flone .flbody{justify-content:safe center}
.focuslayer.flstack .flbody>details.ex>.exbody{display:block}
.focuslayer.flstack .flbody .nota{margin:0 0 10px}
.focuslayer.flstack .flbody .met{width:100%;max-width:none;margin:0;padding-left:max(14px,calc((100% - 560px)/2));padding-right:max(14px,calc((100% - 560px)/2))}
.focuslayer.flside .flbody>details.ex>.exbody{display:grid;grid-template-columns:minmax(0,1fr) fit-content(560px);gap:16px;align-items:start;align-content:center}
.focuslayer.flside .flbody .nota{grid-column:1;grid-row:1;margin:0;align-self:start}
.focuslayer.flside .flbody .met{grid-column:2;grid-row:1;width:auto;min-width:380px;max-width:560px;margin:0;align-self:start;align-content:center;padding-left:14px;padding-right:14px}
.focuslayer.flside .flbody>details.ex>.exbody>:not(.nota):not(.met){grid-column:1/-1}
.focuslayer.flside .flbody>details.ex>.exbody:has(>.cuban,>.testban)>.nota,.focuslayer.flside .flbody>details.ex>.exbody:has(>.cuban,>.testban)>.met{grid-row:2}
.focuslayer.flside .flbody>details.ex>.exbody>.cuban,.focuslayer.flside .flbody>details.ex>.exbody>.testban{grid-row:1}
.focuslayer .flbar .flnext.flfin{background:var(--pr-accent,#2EAA77);border-color:var(--pr-accent,#2EAA77);color:#fff;font-weight:700;min-width:110px}
/* the count-in */
.met .mcount{display:inline-grid;place-items:center;min-width:1.6em;font:800 1.25rem/1 var(--pr-display,inherit);color:var(--pr-accent,#2EAA77)}
.met .mcount.pop{animation:mcpop .25s ease-out}
@keyframes mcpop{from{transform:scale(1.35)}to{transform:scale(1)}}
.focuslayer .flbody .met .mcount{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:6;pointer-events:none;width:min(26vh,180px);height:min(26vh,180px);border-radius:50%;background:rgba(16,36,27,.88);box-shadow:0 10px 40px rgba(0,0,0,.4);font-size:min(17vh,120px);color:#fff}
.focuslayer .flbody .met .mcount.pop{animation:mcpopfl .3s ease-out}
@keyframes mcpopfl{from{transform:translate(-50%,-50%) scale(1.25)}to{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.met .mcount.pop,.focuslayer .flbody .met .mcount.pop{animation:none}}