:root{
  --ink:#08090B;--panel:#14161A;--panel2:#1B1F26;--line:#2A2F38;
  --text:#E9ECF3;--muted:#828A9B;
  --h-magenta:#FF3DCB;--h-rose:#FF5C7A;--h-red:#FF5A4E;--h-orange:#FF8A2B;--h-amber:#FFB020;--h-yellow:#FFD62E;--h-lime:#C6E63A;--h-green:#55E06A;--h-mint:#3DDCA0;--h-teal:#2FD8C4;--h-cyan:#35E7E0;--h-sky:#48B8FF;--h-blue:#5B8CFF;--h-indigo:#6C6CFF;--h-violet:#9B6BFF;--h-purple:#C15CFF;--h-sand:#D9B98C;--h-slate:#9AA8BF;
  --in-tune:#3DDC5C;--sharp:#FF3DCB;--flat:#FF8A2B;
  --hue:var(--h-cyan);--strip:52px;
  /* the notch or camera cutout, whichever edge it lands on in landscape */
  --sl:env(safe-area-inset-left,0px);
  --sr:env(safe-area-inset-right,0px);
  --ui:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --data:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;height:100dvh}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
select,input,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--hue);outline-offset:2px;border-radius:6px}
.eyebrow{font-family:var(--data);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.num{font-family:var(--data);font-variant-numeric:tabular-nums}
.view{display:none;height:100%;height:100dvh}
.view.on{display:block}
.row{display:flex;gap:8px;flex-wrap:wrap}
.grow{flex:1}
.hidden{display:none!important}

/* sign in */
#login{display:none}
.loginbox{width:min(340px,88vw);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px}
.loginbox h1{font-size:26px;margin:6px 0 18px;font-weight:700;letter-spacing:-.02em}
.loginbox input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-size:16px;padding:11px 13px;margin-bottom:10px}
.err{color:var(--sharp);font-size:13px;margin-top:10px;min-height:16px}
.btn.wide{width:100%;text-align:center;display:block}

/* setup */
#setup{overflow:auto}
.wrap{max-width:1200px;margin:0 auto;padding:24px 16px 110px}
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.masthead h1{flex:none}
.masthead h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:6px 0 0}
.masthead h1 span{color:var(--muted);font-weight:400}
.mast-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;
  max-width:100%;min-width:0}
.mast-right .btn.sm{white-space:nowrap}
.who{font-size:13px;color:var(--muted);white-space:nowrap}
.who b{color:var(--text);font-weight:600}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:8px 12px;min-width:220px}
.search svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.8}
.search input{background:none;border:0;color:var(--text);font-size:14px;outline:none;width:100%}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tagchip{font-family:var(--data);font-size:10px;letter-spacing:.06em;border:1px solid var(--line);
  border-radius:99px;padding:5px 10px;color:var(--muted);background:var(--panel)}
.tagchip.on{color:#0A0C0F;background:var(--text);border-color:var(--text)}
.cols{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start;margin-top:12px}
@media(max-width:900px){.cols{grid-template-columns:1fr}.tray{position:static!important}}
.section-head{display:flex;align-items:center;gap:10px;margin:20px 0 10px}
.section-head input{background:none;border:0;color:var(--text);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 0;width:auto;min-width:60px}
.section-head .count{font-family:var(--data);font-size:11px;color:var(--muted)}
.section-head .rule{flex:1;height:1px;background:var(--line)}
.section-head .tools{display:flex;gap:4px}
.section-head .tools button{width:26px;height:26px;border-radius:7px;color:var(--muted);font-size:11px}
.section-head .tools button:hover{background:var(--panel2);color:var(--text)}
.mod{display:grid;grid-template-columns:4px 1fr auto;gap:12px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding-right:10px;margin-bottom:8px;overflow:hidden}
.mod:hover{border-color:#3A414E}
.mod .bar{align-self:stretch;background:var(--hue)}
.mod .body{padding:11px 0;min-width:0}
.mod .name{font-size:16px;font-weight:600}
.mod .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-family:var(--data);font-size:10px;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:3px 8px;white-space:nowrap}
.chip.hue{color:var(--hue);border-color:color-mix(in srgb,var(--hue) 40%,transparent)}
.chip.tag{color:#B7BECC}
.acts{display:flex;gap:5px}
.iconbtn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);display:grid;
  place-items:center;background:var(--panel2);flex:none}
.iconbtn:hover{background:#242a33;border-color:#3A414E}
.iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.addbtn{width:100%;border:1px dashed var(--line);border-radius:14px;padding:10px;color:var(--muted);font-size:13px}
.addbtn:hover{color:var(--text);border-color:#3A414E}
.empty-lib{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;
  color:var(--muted);font-size:14px;line-height:1.6}
.empty-lib b{color:var(--text)}
.tray{position:sticky;top:18px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px}
.tray-head{display:flex;justify-content:space-between;align-items:center}
.linkbtn{color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--text)}
.tray select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:10px;margin:10px 0 6px;font-size:14px}
.sharedtag{font-family:var(--data);font-size:10px;letter-spacing:.1em;color:var(--h-indigo);margin:2px 0 6px}
.tray input.title{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--text);font-size:18px;font-weight:600;padding:4px 0 8px;margin-bottom:8px}
.tray input.title:disabled{color:var(--muted)}
.slot{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 0;
  border-bottom:1px solid #1F242B}
.slot .dot{width:8px;height:8px;border-radius:99px;background:var(--hue)}
.slot .nm{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .dur{font-family:var(--data);font-size:11px;color:var(--muted)}
.slot .mv{display:flex;gap:2px}
.slot .mv button{width:22px;height:22px;border-radius:6px;color:var(--muted);font-size:11px}
.slot .mv button:hover{background:var(--panel2);color:var(--text)}
/* start the routine from this slot rather than from the top */
.slot .mv .playfrom{color:var(--in-tune);font-size:10px}
.slot .mv .playfrom:hover{background:color-mix(in srgb,var(--in-tune) 20%,transparent);
  color:var(--in-tune)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 12px}
.total b{font-family:var(--data);font-size:22px;font-weight:400}
.go{width:100%;background:var(--in-tune);color:#06120A;font-weight:700;font-size:15px;border-radius:12px;padding:13px}
.go:disabled{background:var(--panel2);color:#4A505C;cursor:not-allowed}
.trayacts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:10px}
.check{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.empty{color:var(--muted);font-size:13px;line-height:1.5;padding:8px 0}

/* modals */
.scrim{position:fixed;inset:0;background:rgba(4,5,7,.72);backdrop-filter:blur(3px);display:none;
  z-index:60;align-items:center;justify-content:center;padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top));
  padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.scrim.on{display:flex}
.editor{width:min(640px,100%);max-height:92vh;max-height:92dvh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:20px}
.editor header{position:sticky;top:0;background:var(--panel);display:flex;align-items:center;
  justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line);z-index:3}
.ed-body{padding:4px 18px 18px}
.field{padding:14px 0;border-bottom:1px solid #1F242B}
.field label{display:block;font-family:var(--data);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input[type=text],.field textarea,.field select,.row input[type=text],.row select{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--text);
  font-size:15px;padding:10px 12px}
.field input[type=text],.field textarea,.field select{width:100%}
.field textarea{min-height:92px;resize:vertical;line-height:1.55}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{padding:9px 14px;font-size:13px;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--hue);color:#0A0C0F;font-weight:600}
.hues{display:flex;gap:7px;flex-wrap:wrap;max-width:250px}
.hues button{width:24px;height:24px;border-radius:99px;border:2px solid transparent;flex:none}
.hues button.on{border-color:var(--text)}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;font-size:17px}
.stepper .val{font-family:var(--data);font-size:24px;min-width:112px;text-align:center}
.stepper .val small{display:block;font-size:9px;color:var(--muted);letter-spacing:.1em;margin-top:4px}
.filebox{border:1px dashed var(--line);border-radius:12px;padding:16px;text-align:center;color:var(--muted);font-size:13px}
.filebox b{color:var(--text);display:block;font-size:14px;margin-bottom:4px;word-break:break-all}
.upstat{font-size:12px;margin-top:10px;min-height:16px}
.upstat.bad{color:var(--flat)}
.hint{color:var(--muted);font-size:12px;line-height:1.5;margin-top:8px}
.btn{border:1px solid var(--line);border-radius:10px;padding:10px 16px;font-size:14px;background:var(--panel2);
  display:inline-block;cursor:pointer}
.btn.sm{padding:6px 10px;font-size:12px}
.btn.primary{background:var(--text);color:var(--ink);font-weight:600;border-color:var(--text)}
.btn.danger{color:var(--flat)}
.ed-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line);
  position:sticky;bottom:0;background:var(--panel);
  /* clear of the home bar, or the last row of buttons is unreachable */
  padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.fp-stage{position:relative;max-height:360px;overflow:auto;background:#0B0C0F;border:1px solid var(--line);
  border-radius:10px;margin-top:10px}
.fp-stage img,.fp-stage canvas{display:block;width:100%;height:auto}
.sysband{position:absolute;left:0;right:0;border-top:1px solid rgba(53,231,224,.5);
  border-bottom:1px solid rgba(53,231,224,.5);background:rgba(53,231,224,.09);pointer-events:none}
.sysband span{position:absolute;left:4px;top:2px;font-family:var(--data);font-size:9px;color:#35E7E0}
.prow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #1F242B}
.prow .pn{flex:1}
.prow .pn b{display:block;font-size:15px}
.prow .pn span{font-size:12px;color:var(--muted);font-family:var(--data)}
.rolechip{font-family:var(--data);font-size:9px;letter-spacing:.1em;border:1px solid var(--line);
  border-radius:99px;padding:4px 8px;color:var(--muted)}
.rolechip.admin{color:var(--h-yellow);border-color:color-mix(in srgb,var(--h-yellow) 40%,transparent)}
.shrow{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #1F242B}
.switch{width:44px;height:26px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);position:relative}
.switch b{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:99px;background:var(--muted);transition:.18s}
.switch.on{background:color-mix(in srgb,var(--in-tune) 30%,transparent);border-color:var(--in-tune)}
.switch.on b{left:20px;background:var(--in-tune)}

#practice{position:relative;background:#0B0C0F}
.stage{position:absolute;inset:0;overflow:hidden}
.sheetwrap{position:absolute;inset:0;overflow:hidden;touch-action:none}
.sheetscroll{position:absolute;left:var(--sl);right:var(--sr);top:0;margin:0 auto;
  width:auto;max-width:1200px;
  transform-origin:50% 0;will-change:transform}
.sheetscroll img,.sheetscroll canvas{display:block;width:100%;height:auto;background:#fff}
.blank{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);
  font-size:14px;line-height:1.7;padding:40px}
.tapzone{position:absolute;top:6%;width:26%;z-index:5;bottom:calc(var(--strip) + 12px)}
.tapzone.l{left:var(--sl)}.tapzone.r{right:var(--sr)}
/* While teaching, a tap on the music is a point, not a page turn. The turn
   zones used to take the outer quarter of each side, so more than half the
   width could not be pointed at: aiming at a line on the left turned the page
   instead. Narrow strips at the very edge keep both. */
body.teaching .tapzone{width:11%}

/* the bottom line: tuner trace, beat dots, readout */
.strip{position:absolute;left:0;right:0;bottom:0;height:var(--strip);z-index:14;pointer-events:none}
.strip .film{position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,9,11,0) 0%, rgba(8,9,11,.10) 18%, rgba(8,9,11,.30) 38%,
    rgba(8,9,11,.52) 62%, rgba(8,9,11,.66) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(115%);backdrop-filter:blur(7px) saturate(115%);
  /* fade the blur itself in, so there is no visible line where it begins */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%)}
.strip.bare .film{background:linear-gradient(180deg,
  rgba(8,9,11,0) 0%, rgba(8,9,11,.14) 30%, rgba(8,9,11,.40) 65%, rgba(8,9,11,.56) 100%)}
.strip canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.strip.tuner canvas{display:block}
.dots{position:absolute;left:calc(70px + var(--sl));top:52%;transform:translateY(-50%);display:flex;gap:9px}
.strip.bare .dots{top:auto;bottom:20px;transform:none}
.dots i{width:12px;height:12px;border-radius:99px;background:rgba(255,255,255,.18);
  transition:transform .07s,background .07s,box-shadow .07s}
.dots i.hit{background:var(--hue);transform:scale(1.35);box-shadow:0 0 14px var(--hue)}
.dots i.hit.one{background:#fff;box-shadow:0 0 16px #fff}
.dots.off{opacity:.2}
.read{position:absolute;right:calc(14px + var(--sr) + var(--ringw,150px));bottom:8px;text-align:right;
  font-family:var(--data);line-height:1.1;display:none}
.strip.tuner .read{display:block}
.read .n{font-size:20px}.read .n sub{font-size:10px;color:var(--muted)}
.read .c{font-size:10px;color:var(--muted);margin-top:2px}
.sysflag{position:absolute;left:calc(70px + var(--sl));bottom:4px;z-index:16;font-family:var(--data);font-size:9px;
  letter-spacing:.14em;color:rgba(255,255,255,.5);text-shadow:0 1px 4px rgba(0,0,0,.7)}
.strip.bare ~ .sysflag{bottom:4px}

.glass{background:linear-gradient(150deg,rgba(20,23,29,.50),rgba(10,11,14,.30));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);border-radius:15px;box-shadow:0 6px 22px rgba(0,0,0,.20)}

/* radial menu */
.menu{position:absolute;left:calc(12px + var(--sl));bottom:12px;z-index:30;width:46px;height:46px}
.menubtn{position:absolute;inset:0;border-radius:99px;display:grid;place-items:center;color:#C7CDD9;
  transition:transform .25s cubic-bezier(.3,.9,.3,1)}
.menu.open .menubtn{transform:rotate(45deg)}
.menubtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.spoke{position:absolute;left:0;bottom:0;width:46px;height:46px;border-radius:99px;display:grid;
  place-items:center;color:#C7CDD9;opacity:0;pointer-events:none;
  transform:translate(0,0) scale(.5);transition:transform .26s cubic-bezier(.3,1.2,.4,1),opacity .18s}
.menu.open .spoke{opacity:1;pointer-events:auto;transform:var(--pos) scale(1)}
.spoke svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.spoke.on{color:var(--hue);border-color:color-mix(in srgb,var(--hue) 45%,transparent)}
.spoke i{position:absolute;bottom:-15px;font-style:normal;font-family:var(--data);font-size:8px;
  letter-spacing:.1em;color:rgba(255,255,255,.55);white-space:nowrap}
.scrimtap{position:absolute;inset:0;z-index:25;display:none}
.menu.open ~ .scrimtap{display:block}

/* tempo panel */
.tempopanel{position:absolute;left:calc(12px + var(--sl));bottom:calc(var(--strip) + 74px);z-index:31;display:none;
  align-items:center;gap:12px;padding:8px 14px}
.tempopanel.on{display:flex}
.tempopanel .bpm{font-family:var(--data);font-size:20px;line-height:1;min-width:64px}
.tempopanel .bpm small{font-size:8px;color:var(--muted);letter-spacing:.1em;display:block;margin-top:3px}
input[type=range]{-webkit-appearance:none;appearance:none;width:140px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--hue) var(--pct,40%),rgba(255,255,255,.18) var(--pct,40%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:99px;
  background:#fff;border:3px solid rgba(10,11,14,.6)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:99px;background:#fff;border:3px solid rgba(10,11,14,.6)}
.meterchip{font-family:var(--data);font-size:12px;color:var(--muted)}
/* the tempo this piece is working towards, beside the one it is at */
.goaltag{font-family:var(--data);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.goaltag b{display:block;font-size:15px;font-weight:400;color:var(--h-amber);margin-top:3px}

/* ring */
.ring{position:absolute;right:calc(12px + var(--sr));bottom:10px;z-index:30;width:150px;height:150px;display:grid;
  place-items:center;border-radius:99px;cursor:pointer;user-select:none;
  transition:width .25s cubic-bezier(.3,.9,.3,1),height .25s cubic-bezier(.3,.9,.3,1)}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .core{text-align:center;z-index:2;pointer-events:none;padding-bottom:12px;transition:padding .2s}
.ring .t{font-size:24px;line-height:1;letter-spacing:-.02em;transition:font-size .2s}
.ring .lab{font-size:11px;margin-top:5px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ring .tot{font-size:9px;color:var(--muted);letter-spacing:.1em;margin-top:3px}


.ring.mini .prev{display:none}
.ring.mini .prev,.ring.mini 
.ring .next{position:absolute;bottom:10px;left:50%;transform:translateX(-4px);z-index:3;width:34px;height:23px;
  border-radius:8px;display:grid;place-items:center;color:#C7CDD9;background:rgba(255,255,255,.10)}
.ring .next svg{position:static;width:13px;height:13px;transform:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ring.mini{width:62px;height:62px}
.ring.mini .core{padding-bottom:0}
.ring.mini .t{font-size:13px}
.ring.mini .lab,.ring.mini .tot,.ring.mini .next{display:none}
.ring.paused .t{color:var(--muted)}
.pausedtag{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-family:var(--data);
  font-size:9px;letter-spacing:.2em;color:var(--muted);display:none}
.ring.paused .pausedtag{display:block}

.notes{position:absolute;top:0;right:0;bottom:0;width:min(400px,86vw);z-index:40;
  background:rgba(14,16,20,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-left:1px solid var(--line);transform:translateX(101%);transition:transform .26s cubic-bezier(.3,.8,.3,1);
  padding:20px;overflow:auto}
.notes.on{transform:none}
.notes h4{margin:0 0 4px;font-size:19px}
.notes .sub{color:var(--muted);font-size:12px;font-family:var(--data);margin-bottom:14px}
.notes p{line-height:1.65;font-size:15px;color:#C9CEDA;white-space:pre-wrap;margin:0}
.notes .close{position:absolute;top:12px;right:12px;color:var(--muted);font-size:22px}
.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:70;
  background:rgba(20,22,27,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);border-radius:99px;padding:7px 15px;font-size:12px;
  opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
@media(max-height:460px){
  .ring{width:120px;height:120px}.ring .t{font-size:20px}
  .menu,.menubtn,.spoke{width:42px;height:42px}
}

/* small button used inside the tempo panel */
.minibtn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#B9C0CE;
  background:rgba(255,255,255,.06);flex:none}
.minibtn.on{color:var(--hue)}
.minibtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* v2.1 additions */
.flag{font-family:var(--data);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:99px;padding:2px 7px;margin-left:8px;vertical-align:middle;border:1px solid}
.flag.wait{color:var(--h-yellow);border-color:color-mix(in srgb,var(--h-yellow) 45%,transparent)}
.flag.priv{color:var(--h-indigo);border-color:color-mix(in srgb,var(--h-indigo) 45%,transparent)}
.flag.arch{color:var(--muted);border-color:var(--line)}
.chip.inst{color:var(--h-cyan);border-color:color-mix(in srgb,var(--h-cyan) 35%,transparent)}
.tagchip.inst{color:var(--h-cyan)}
.tagchip.inst.on{color:#0A0C0F;background:var(--h-cyan);border-color:var(--h-cyan)}
#fInstruments{gap:6px}
#queueBtn b{font-family:var(--data);font-size:11px;margin-left:4px;color:var(--h-yellow)}
.prow .btn.sm{white-space:nowrap}


/* phones: stack the header, let the actions wrap on their own row */
@media(max-width:640px){
  .wrap{padding:18px 14px 90px}
  .toolbar .btn{flex:0 1 auto;padding:9px 14px}
  #newSection{order:9}
  .masthead{flex-direction:column;align-items:stretch;gap:10px}
  .masthead h1{font-size:23px;margin-top:2px}
  .mast-right{justify-content:flex-start;order:2}
  .mast-right .who{order:-1;width:100%}
  .toolbar{gap:8px}
  .search{flex:1 1 100%;min-width:0}
  .toolbar .btn{flex:1 1 auto;text-align:center}
  .tags{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tags::-webkit-scrollbar{display:none}
  .tagchip{flex:none}
  .trayacts{gap:14px}
}

.jserr{position:fixed;top:0;left:0;right:0;z-index:999;background:#FF8A2B;color:#08090B;
  font-family:var(--data);font-size:12px;padding:10px 14px;line-height:1.4}
.jserr a{color:#08090B;text-decoration:underline}
.jserr b{font-weight:700}

/* radial menu: tighter arc and smaller spokes where the screen is short */
@media(max-height:520px){
  .menu,.menubtn,.spoke{width:38px;height:38px}
  .spoke svg{width:17px;height:17px}
  .spoke[data-act="back"]{--pos:translate(139px,-19px)}
  .spoke[data-act="notes"]{--pos:translate(127px,-59px)}
  .spoke[data-act="mode"]{--pos:translate(105px,-93px)}
  .spoke[data-act="tuner"]{--pos:translate(73px,-119px)}
  .spoke[data-act="drone"]{--pos:translate(36px,-135px)}
  .spoke[data-act="tempo"]{--pos:translate(0px,-140px)}
  .spoke i{font-size:7px;bottom:-12px}
}

/* ---- log and stats ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.panel-head b{font-size:15px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.cols2{grid-template-columns:1fr}}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media(max-width:760px){.statgrid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.stat b{display:block;font-family:var(--data);font-size:26px;font-weight:400;letter-spacing:-.02em;margin-bottom:2px}
.stat b small{font-size:12px;color:var(--muted);margin-left:3px}
.stat span{font-family:var(--data);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stat.good b{color:var(--in-tune)}
.chart{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:8px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.chart .bar{width:100%;border-radius:3px 3px 0 0;background:var(--hue);min-height:2px;
  transition:height .3s cubic-bezier(.3,.9,.3,1)}
.chart .bar.assigned{background:var(--h-indigo)}
.chart .bar.none{background:#20252E}
.chart .lbl{font-family:var(--data);font-size:8px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tline{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #1F242B}
.tline:last-child{border-bottom:0}
.tline .nm{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tline .sub{font-family:var(--data);font-size:10px;color:var(--muted);margin-top:3px}
.tline .amt{font-family:var(--data);font-size:13px;white-space:nowrap}
.tline .amt.part{color:var(--flat)}
.meter{height:5px;border-radius:3px;background:#20252E;overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--in-tune);border-radius:3px}
.meter i.under{background:var(--flat)}
.badge{font-family:var(--data);font-size:9px;letter-spacing:.08em;border:1px solid var(--line);
  border-radius:99px;padding:2px 7px;color:var(--muted);margin-left:6px}
.badge.assigned{color:var(--h-indigo);border-color:color-mix(in srgb,var(--h-indigo) 45%,transparent)}
.badge.part{color:var(--flat);border-color:color-mix(in srgb,var(--flat) 45%,transparent)}
.slot .ov{font-family:var(--data);font-size:9px;color:var(--h-amber);letter-spacing:.06em}
.slot .edit{width:22px;height:22px;border-radius:6px;color:var(--muted);font-size:11px}
.slot .edit:hover{background:var(--panel2);color:var(--text)}
#logview{overflow:auto}

/* ---- collapsing ---- */
.disc{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;color:var(--muted);flex:none}
.disc svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .18s cubic-bezier(.3,.9,.3,1)}
.disc.open svg{transform:rotate(90deg)}
.section-head .disc:hover{background:var(--panel2);color:var(--text)}
.routtoggle{display:flex;align-items:center;gap:6px;width:100%;padding:8px 0;color:var(--muted);
  font-family:var(--data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid #1F242B}
.routtoggle:hover{color:var(--text)}

/* ---- request access ---- */
.loginfoot{margin-top:12px;text-align:center}
.loginbox .rule{height:1px;background:var(--line);margin:16px 0}
.loginbox textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-size:15px;padding:10px 12px;min-height:84px;resize:vertical}
.loginbox .tags{max-height:132px;overflow:auto}
.sent{color:var(--in-tune);font-size:14px;line-height:1.6}
.reqcard{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px}
.reqhead{display:flex;justify-content:space-between;align-items:baseline}
.reqhead b{font-size:16px}
.reqcard .sub{font-family:var(--data);font-size:11px;color:var(--muted);margin-top:3px}
.reqnote{font-size:14px;line-height:1.6;color:#C9CEDA;margin:10px 0 0;white-space:pre-wrap}
.uidbox{flex:1;min-width:120px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:8px 10px;font-family:var(--data);font-size:13px}

/* ---- drone picker: a chromatic column up the left edge ---- */
.dronepicker{position:absolute;left:calc(10px + var(--sl));bottom:calc(var(--strip) + 66px);
  z-index:31;display:none;flex-direction:column;gap:5px;padding:10px 8px;
  background:linear-gradient(150deg,rgba(20,23,29,.55),rgba(10,11,14,.35));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);border-radius:22px;max-height:78vh;overflow:auto}
.dronepicker.on{display:flex}
.dronekey{width:42px;height:42px;border-radius:99px;display:grid;place-items:center;
  font-family:var(--data);font-size:13px;color:#C7CDD9;background:rgba(255,255,255,.06);flex:none}
.dronekey.black{background:rgba(255,255,255,.03);color:var(--muted);font-size:11px}
.dronekey:hover{background:rgba(255,255,255,.14)}
.dronekey.on{background:var(--hue);color:#0A0C0F;font-weight:700;box-shadow:0 0 18px var(--hue)}
.dronekey.off{font-size:11px;color:var(--muted);margin-top:2px}
#droneKeys{display:flex;flex-direction:column;gap:5px}
@media(max-height:520px){
  .dronepicker{flex-direction:row;flex-wrap:wrap;max-width:60vw;bottom:calc(var(--strip) + 52px)}
  #droneKeys{flex-direction:row;flex-wrap:wrap}
  .dronekey{width:34px;height:34px;font-size:11px}
}

/* ---- tempo dots: bigger, with the pulse bleeding into the strip ---- */
.dots i{width:17px;height:17px}
.dots i.hit{transform:scale(1.35);box-shadow:0 0 22px 6px color-mix(in srgb,var(--hue) 55%,transparent)}
.dots i.hit.one{box-shadow:0 0 26px 9px rgba(255,255,255,.55)}
.strip .pulse{position:absolute;left:0;right:0;bottom:0;height:100%;pointer-events:none;
  background:radial-gradient(120px 60px at calc(70px + var(--sl) + var(--beatx,0px)) 60%,
    color-mix(in srgb,var(--hue) 30%,transparent), transparent 70%);
  opacity:0;transition:opacity .18s ease}
.strip .pulse.on{opacity:1;transition:opacity .05s ease}

/* ---- in tune streak ---- */
.streak{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:17;
  display:flex;align-items:center;gap:7px;pointer-events:none;opacity:0;transition:opacity .3s}
.streak.on{opacity:1}
.streak .flame{font-size:20px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,140,40,.8));
  animation:flicker .45s ease-in-out infinite alternate}
.streak .flame:nth-child(2){animation-delay:.12s}
.streak .flame:nth-child(3){animation-delay:.24s}
.streak .lbl{font-family:var(--data);font-size:10px;letter-spacing:.14em;color:#FFB020;
  text-shadow:0 0 10px rgba(255,140,40,.7)}
@keyframes flicker{
  from{transform:translateY(0) scale(1) rotate(-3deg);opacity:.85}
  to{transform:translateY(-3px) scale(1.14) rotate(3deg);opacity:1}
}
.strip.burning canvas{filter:drop-shadow(0 0 10px rgba(255,140,40,.55))}
.strip.burning .film{background:linear-gradient(180deg,
  rgba(40,16,4,0) 0%, rgba(44,18,4,.20) 28%, rgba(40,16,4,.46) 58%, rgba(30,10,2,.66) 100%)}
@media (prefers-reduced-motion:reduce){.streak .flame{animation:none}}


/* ---- a teacher is leading this device ---- */
.ledbar{position:fixed;left:0;right:0;top:0;z-index:200;display:flex;align-items:center;
  justify-content:center;gap:14px;padding:9px 14px;
  background:linear-gradient(90deg,var(--h-indigo),var(--h-violet));color:#0A0C0F;
  font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ledbar .btn{background:rgba(10,12,15,.22);border-color:rgba(10,12,15,.3);color:#0A0C0F;font-weight:600}
body:has(.ledbar:not([hidden])) .wrap{padding-top:52px}
.lessonnote{font-family:var(--ui);font-size:13px;line-height:1.6;color:#C9CEDA;white-space:pre-wrap;
  margin:8px 0 0;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid var(--h-indigo);border-radius:0 10px 10px 0;letter-spacing:0;text-transform:none}

/* ---- leading banner, collapsed ---- */
.ledbar{cursor:pointer;transition:padding .25s,border-radius .25s,left .25s,right .25s,top .25s,gap .2s}
.ledpip{width:8px;height:8px;border-radius:99px;background:#0A0C0F;opacity:.5;flex:none;
  animation:ledpulse 1.6s ease-in-out infinite}
@keyframes ledpulse{0%,100%{opacity:.35}50%{opacity:.9}}
.ledbar.mini{left:auto;right:12px;top:max(8px,env(safe-area-inset-top));
  width:auto;padding:6px 12px;border-radius:99px;gap:8px;font-size:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ledbar.mini #ledText{display:none}
.ledbar.mini #ledStop{display:none}
.ledbar.mini::after{content:'LESSON';font-family:var(--data);font-size:9px;letter-spacing:.16em}
body:has(.ledbar.mini) .wrap{padding-top:24px}

/* ---- the teacher's own bar ----
   The same bar in a different colour, so a glance tells you which end of the
   lesson you are. It had no style of its own and so fell to the bottom of the
   page as a plain row, which is why it was easy to miss. */
.teachbar{background:linear-gradient(90deg,var(--h-teal),var(--h-sky))}
.teachbar.mini #teachText,.teachbar.mini #teachNext,.teachbar.mini #teachEnd{display:none}
.teachbar.mini::after{content:'TEACHING';font-family:var(--data);font-size:9px;letter-spacing:.16em}
body:has(.teachbar:not([hidden])) .wrap{padding-top:52px}
body:has(.teachbar.mini) .wrap{padding-top:24px}

/* ---- lesson note editing ---- */
.lessonentry{padding:14px 0;border-bottom:1px solid #1F242B}
.lessonentry:last-child{border-bottom:0}
.lessonentry .when{font-size:15px;font-weight:600;margin-bottom:6px}
.lessonentry p{margin:0;font-size:15px;line-height:1.65;color:#C9CEDA;white-space:pre-wrap}

/* ---- routine folders ---- */
.folderbar{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.folderbar .fchip{font-family:var(--data);font-size:10px;letter-spacing:.06em;border:1px solid var(--line);
  border-radius:99px;padding:5px 10px;color:var(--muted);background:var(--panel2);white-space:nowrap}
.folderbar .fchip.on{color:#0A0C0F;background:var(--text);border-color:var(--text)}
.folderbar .fchip b{font-weight:400;opacity:.6;margin-left:4px}
.filedin{display:flex;align-items:center;gap:8px;margin:8px 0 2px}
.filedin .eyebrow{flex:none}
.filedin select{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:8px 10px;font-size:13px;margin:0}

/* ---- shortcut hints on the wheel ---- */
.spoke i b{font-weight:400;opacity:.55;margin-left:2px}

/* ---- notes panel: faster, and softened along the edge facing the music ---- */
.notes{transition:transform .14s cubic-bezier(.3,.9,.3,1)}
.notes{border-left:0;box-shadow:none}
/* The soft edge only exists while the panel is out. Parked off-screen it still
   casts its shadow across the music, which is what left a band on the right. */
.notes.on{box-shadow:-26px 0 34px -14px rgba(8,9,11,.85), -60px 0 60px -40px rgba(8,9,11,.6)}
/* in lesson mode the teaching pill sits where the close button was */
body:has(.teachbar:not([hidden])) .notes .close{top:52px}
body:has(.teachbar.mini) .notes .close{top:46px}
.keyhelp{margin-top:16px;padding-top:12px;border-top:1px solid #1F242B;
  font-size:12px;line-height:2;color:var(--muted)}
.keyhelp b{display:inline-block;font-family:var(--data);font-size:10px;font-weight:400;color:var(--text);
  background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;margin:0 3px 0 8px}
.keyhelp b:first-child{margin-left:0}

/* ---- volume sliders ---- */
.vol,.dronevol{display:flex;align-items:center;gap:6px}
.dronevol{padding:6px 2px 2px;justify-content:center}
.volicon{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.vol input[type=range]{width:64px}
.dronevol input[type=range]{width:38px}
@media(max-height:520px){.dronevol{width:100%}.dronevol input[type=range]{width:80px}}

/* ---- tall tuner ---- */
.strip.tall .read .n{font-size:30px}
.strip.tall .read .c{font-size:12px}
.strip.tall .dots{top:auto;bottom:14px;transform:none}
.strip.tall .film{background:linear-gradient(180deg,
  rgba(8,9,11,0) 0%, rgba(8,9,11,.12) 20%, rgba(8,9,11,.34) 42%,
  rgba(8,9,11,.56) 68%, rgba(8,9,11,.70) 100%)}

/* ---- sign-in as a front door ---- */
#login{overflow:auto;display:none}
#login.on{display:block}
/* ---- signing in, at the top where it belongs ----
   It used to be a column down the side of a page of selling, which meant
   scrolling past the pitch every single day to get to work. */
.topbar{position:sticky;top:0;z-index:50;width:100%;box-sizing:border-box;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 20px;background:rgba(10,11,14,.88);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.topmark{display:flex;align-items:center;gap:9px;font-size:15px;color:#C9D6E6;letter-spacing:-.01em}
.topmark img{flex:none;border-radius:7px}
.topmark b{font-weight:700;color:#E9ECF3}
.topin{display:flex;gap:7px;margin-left:auto;align-items:center}
.topin input{background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  color:var(--text);padding:8px 11px;font-size:14px;width:180px;min-height:38px}
.topin input#lPin{width:92px}
.topin input:focus{outline:none;border-color:color-mix(in srgb,var(--h-cyan) 60%,var(--line))}
.topin .btn{min-height:38px;padding:8px 18px}
.toplinks{display:flex;gap:14px;align-items:center}
.toplinks .linkbtn{font-size:13px}
.topbar .err{flex-basis:100%;text-align:right;margin:0}
@media(max-width:760px){
  .topbar{padding:10px 14px;gap:9px}
  .topin{margin-left:0;flex-basis:100%;flex-wrap:wrap}
  .topin input{flex:1;width:auto;min-width:120px}
  .topin input#lPin{flex:0 0 86px;width:86px}
  .toplinks{flex-basis:100%;justify-content:center}
  .topbar .err{text-align:center}
}

/* ---- who this is for, the full width of the page ---- */
.below{max-width:1080px;margin:0 auto;padding:0 20px 64px}
@media(max-width:880px){.below{padding:0 16px 50px}}
.who3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:0}
@media(max-width:900px){.who3{grid-template-columns:1fr}}
.who3 > div{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.who3 .tag{display:inline-block;font-family:var(--data);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--h-cyan);margin-bottom:9px}
.who3 b{display:block;font-size:17px;line-height:1.3;margin-bottom:9px;letter-spacing:-.01em}
.who3 p{font-size:13.5px;line-height:1.62;color:var(--muted);margin:0 0 9px}
.who3 p:last-child{margin-bottom:0}

/* ---- and how to get in ---- */
.howrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media(max-width:760px){.howrow{grid-template-columns:1fr}}
.howrow > div{display:grid;grid-template-columns:23px 1fr;gap:3px 11px;align-items:start;
  padding:13px 15px;border:1px dashed var(--line);border-radius:14px}
.howrow i{grid-row:1/3;width:23px;height:23px;border-radius:99px;display:grid;place-items:center;
  font-family:var(--data);font-size:11px;font-style:normal;color:#0A0C0F;background:var(--h-cyan)}
.howrow b{grid-column:2;font-size:14px}
.howrow span{grid-column:2;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---- the ask panel beside it ---- */
.askhead{font-size:21px;line-height:1.25;margin:6px 0 10px;letter-spacing:-.02em;font-weight:700}
.askwhy{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 16px}

.landing{max-width:1080px;margin:0 auto;padding:44px 20px 30px;
  display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
@media(max-width:880px){.landing{grid-template-columns:1fr;gap:28px;padding:28px 16px 50px}}
.pitch h1{font-size:46px;line-height:1.05;letter-spacing:-.03em;margin:10px 0 0;font-weight:700}
@media(max-width:880px){.pitch h1{font-size:34px}}
.pitch .lede{font-size:18px;line-height:1.6;color:#B7BECC;max-width:40ch;margin:16px 0 0}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
@media(max-width:560px){.feat{grid-template-columns:1fr}}
.feat > div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.feat b{display:block;font-size:15px;margin-bottom:5px}
.feat span{font-size:13.5px;line-height:1.55;color:var(--muted)}
.feat.teach{margin-top:14px}
.feat.teach > div{background:transparent;border-style:dashed}
.landing .loginbox{width:100%;position:sticky;top:48px}
@media(max-width:880px){.landing .loginbox{position:static}}

/* ---- joining with a code ---- */
.dot-sep{color:var(--muted);margin:0 6px}
.foundbox{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--in-tune);
  border-radius:0 10px 10px 0;padding:12px 14px;margin-bottom:12px;font-size:14px;line-height:1.5}
.foundbox b{display:block;font-size:17px;margin-bottom:2px}
.foundbox span{color:var(--muted);font-size:13px}
#cCode{font-family:var(--data);font-size:20px;letter-spacing:.1em;text-align:center;text-transform:uppercase}

/* ---- ensembles ---- */
.chairs{display:flex;flex-wrap:wrap;gap:6px}
.chairchip{display:flex;align-items:center;gap:6px;font-family:var(--data);font-size:11px;
  background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:6px 10px}
.chairchip button{color:var(--muted);font-size:11px}
.chairchip button:hover{color:var(--flat)}
.rosterhead,.rosterrow{display:grid;grid-template-columns:1.6fr 1.1fr .8fr .5fr .9fr auto;
  gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #1F242B}
.rosterhead{font-family:var(--data);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rosterhead .num,.rosterrow .num{text-align:right;font-family:var(--data)}
.rosterrow .nm{font-size:15px}
.rosterrow .nm small{display:block;font-family:var(--data);font-size:10px;color:var(--muted);margin-top:2px}
.rosterrow select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--text);padding:6px 8px;font-size:12px;width:100%}
.rosterrow .amt{font-family:var(--data);font-size:14px}
.rosterrow.cold .amt{color:var(--flat)}
.rosterrow.none .amt{color:var(--muted)}
.rosterrow .seen{font-family:var(--data);font-size:11px;color:var(--muted)}
@media(max-width:700px){
  .rosterhead{display:none}
  .rosterrow{grid-template-columns:1fr auto;gap:6px}
  .rosterrow select{grid-column:1/-1}
}
.pendrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #1F242B;font-size:13px}
.pendrow code{font-family:var(--data);font-size:13px;letter-spacing:.08em;color:var(--h-amber)}
.pendrow .grow{flex:1}

/* ---- workspaces ---- */
.workspaces{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.wchip{font-size:13px;border:1px solid var(--line);border-radius:99px;padding:7px 14px;
  color:var(--muted);background:var(--panel)}
.wchip.on{color:#0A0C0F;background:var(--text);border-color:var(--text);font-weight:600}
.flag.pub{color:var(--h-cyan);border-color:color-mix(in srgb,var(--h-cyan) 45%,transparent)}
.flag.part{color:var(--h-amber);border-color:color-mix(in srgb,var(--h-amber) 45%,transparent)}

/* ---- written record ---- */
.recrow{padding:11px 0;border-bottom:1px solid #1F242B}
.recrow:last-child{border-bottom:0}
.recrow .who{font-size:14px;font-weight:600}
.recrow .who span{font-family:var(--data);font-size:10px;color:var(--muted);font-weight:400;margin-left:8px}
.recrow p{margin:5px 0 0;font-size:14px;line-height:1.55;color:#C9CEDA;white-space:pre-wrap}

/* ---- admin console ---- */
.admrow{display:grid;grid-template-columns:1.5fr .7fr .6fr .6fr .8fr auto;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid #1F242B}
.admrow .nm{font-size:15px}
.admrow .nm small{display:block;font-family:var(--data);font-size:10px;color:var(--muted);margin-top:2px}
.admrow .num{font-family:var(--data);font-size:12px;text-align:right;color:var(--muted)}
.admrow.suspended{opacity:.5}
.admrow .acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.admrow .acts .btn{padding:5px 9px;font-size:11px}
@media(max-width:760px){.admrow{grid-template-columns:1fr auto}.admrow .num{display:none}}
.alertbox{background:color-mix(in srgb,var(--flat) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--flat) 45%,transparent);border-radius:12px;
  padding:12px 14px;margin-bottom:12px;font-size:14px;line-height:1.6}
.alertbox b{color:var(--flat)}
.bar-thin{height:6px;border-radius:3px;background:#20252E;overflow:hidden;margin-top:8px}
.bar-thin i{display:block;height:100%;background:var(--in-tune)}
.bar-thin i.warn{background:var(--flat)}

/* ---- recording ---- */
.spoke[data-act="rec"].on{color:#FF5A4E;border-color:rgba(255,90,78,.5)}
.reclamp{position:absolute;bottom:calc(var(--strip) + 14px);left:50%;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:99px;
  background:linear-gradient(150deg,rgba(60,14,10,.72),rgba(30,8,6,.6));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,90,78,.45);font-family:var(--data);font-size:13px;color:#FFD9D5}
.reclamp .btn{padding:4px 10px;font-size:11px;background:rgba(255,255,255,.10);border-color:transparent}
.reddot{width:10px;height:10px;border-radius:99px;background:#FF5A4E;animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:.35}50%{opacity:1}}
.takes{position:absolute;top:0;right:0;bottom:0;width:min(400px,86vw);z-index:40;
  background:rgba(14,16,20,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transform:translateX(101%);transition:transform .14s cubic-bezier(.3,.9,.3,1);padding:20px;overflow:auto;
  box-shadow:none}
.takes.on{box-shadow:-26px 0 34px -14px rgba(8,9,11,.85)}
.takes.on{transform:none}
.takes h4{margin:0 0 4px;font-size:19px}
.takes .sub{color:var(--muted);font-size:12px;font-family:var(--data);margin-bottom:14px}
.takes .close{position:absolute;top:12px;right:12px;color:var(--muted);font-size:22px}
.takerow{padding:10px 0;border-bottom:1px solid #1F242B}
.takerow .top{display:flex;align-items:center;gap:8px}
.takerow .when{flex:1;font-size:13px}
.takerow .when small{display:block;font-family:var(--data);font-size:10px;color:var(--muted);margin-top:2px}
.takerow audio{width:100%;margin-top:8px;height:34px}
.takerow .star{color:var(--muted);font-size:15px}
.takerow .star.on{color:var(--h-amber)}
.takerow.starred{border-left:2px solid var(--h-amber);padding-left:8px;margin-left:-10px}

/* ---- brand ----
   Colours sampled from the mark so the interface and the artwork agree. */
:root{
  --brand-blue:#3060A8;
  --brand-sky:#48A8C0;
  --brand-cyan:#60C0D8;
  --brand-gold:#D89048;
  --brand-orange:#D87830;
}
.lockup{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.lockup img{flex:none;filter:drop-shadow(0 6px 18px rgba(48,96,168,.35))}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark .w1{font-size:27px;font-weight:400;letter-spacing:-.02em;color:#C9D6E6}
.wordmark .w1 span{color:#EAF1FA}
.wordmark .w2{font-size:34px;font-weight:700;letter-spacing:-.03em;margin-top:1px;
  background:linear-gradient(92deg,var(--brand-cyan),var(--brand-blue) 55%,var(--brand-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .tag{font-family:var(--data);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:7px}
@media(max-width:560px){
  .lockup img{width:56px;height:56px}
  .wordmark .w1{font-size:22px}.wordmark .w2{font-size:27px}
  .wordmark .tag{font-size:8px;letter-spacing:.09em}
}
.masthead-left{display:flex;align-items:center;gap:12px;min-width:0}
.markmini{flex:none;opacity:.95}
@media(max-width:640px){.markmini{width:28px;height:28px}}
/* the sign-in card picks up the brand blue rather than a flat grey */
.loginbox{border-color:color-mix(in srgb,var(--brand-blue) 30%,var(--line));
  box-shadow:0 20px 50px -30px rgba(48,96,168,.55)}
.go,.btn.primary{background:var(--text)}
#login .btn.primary{background:linear-gradient(96deg,var(--brand-sky),var(--brand-blue));
  color:#F2F7FD;border-color:transparent}

/* ---- books ---- */
.pdfstage{position:relative;margin-top:10px;background:#0B0C0F;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;display:flex;justify-content:center;padding:6px}
/* Show the whole page at once. Marking staves means comparing them, and you
   cannot compare what you have to scroll between. */
.pdfstage canvas{display:block;height:min(66vh,860px);width:auto;max-width:100%;background:#fff}
/* The layers have to sit on the page itself, not on the scroll window, or the
   boxes drift as soon as you scroll. */
/* One surface takes every pointer event. The two layers on top of it are purely
   something to look at, or whichever is uppermost swallows the clicks meant for
   the other. */
.pdfinner{position:relative;width:auto;max-width:100%;touch-action:none;cursor:crosshair}
.marklayer{position:absolute;inset:0;pointer-events:none}
/* the boxes themselves ignore the pointer; only their handles take it */
.markbox{pointer-events:none}
/* inside the box, at its top right. Above the box it was being cut off by the
   edge of the page view, which is why it could not be found. */
.markx{position:absolute;pointer-events:auto;left:auto;right:4px;top:4px;
  width:28px;height:28px;border-radius:99px;display:grid;place-items:center;
  background:rgba(10,12,15,.9);color:#FF8A80;border:1px solid rgba(255,90,78,.65);
  font-size:14px;line-height:1;z-index:6;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.markx:hover{background:#FF5A4E;color:#0A0C0F;border-color:#FF5A4E}
.grab{position:absolute;pointer-events:auto;background:var(--h-amber);border:1px solid #0A0C0F;
  border-radius:3px;width:13px;height:13px;touch-action:none;opacity:.9}
.grab:hover{transform:scale(1.25)}
.grab.nw{left:-7px;top:-7px;cursor:nwse-resize}
.grab.ne{right:-7px;top:-7px;cursor:nesw-resize}
.grab.sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.grab.se{right:-7px;bottom:-7px;cursor:nwse-resize}
.grab.n{left:50%;top:-7px;margin-left:-7px;cursor:ns-resize;width:26px;border-radius:99px;height:9px}
.grab.s{left:50%;bottom:-7px;margin-left:-7px;cursor:ns-resize;width:26px;border-radius:99px;height:9px}
.stavelayer{position:absolute;inset:0;pointer-events:none}
.staveband{position:absolute;left:0;right:0;pointer-events:none;
  border-top:1px solid rgba(53,231,224,.35);border-bottom:1px solid rgba(53,231,224,.35);
  background:rgba(53,231,224,.07);transition:background .12s}
.staveband.hot{background:rgba(53,231,224,.22)}
.staveband.taken{background:rgba(255,176,32,.16);border-color:rgba(255,176,32,.5);cursor:default}
.staveband b{position:absolute;left:6px;top:50%;transform:translateY(-50%);
  font-family:var(--data);font-size:10px;color:#0A0C0F;background:rgba(53,231,224,.9);
  padding:2px 7px;border-radius:5px;opacity:0;transition:opacity .12s}
.staveband.hot b{opacity:1}
.staveband.taken b{opacity:1;background:var(--h-amber)}
.markbox{position:absolute;border:2px solid var(--h-amber);background:rgba(255,176,32,.14);
  border-radius:3px}
.markbox span{position:absolute;left:0;top:-18px;font-family:var(--data);font-size:9px;
  background:var(--h-amber);color:#0A0C0F;padding:2px 6px;border-radius:4px;white-space:nowrap;
  max-width:70%;overflow:hidden;text-overflow:ellipsis}
.markbox.draft{border-style:dashed}
.markrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #1F242B;font-size:13px}
.markrow .grow{flex:1}
.markrow input{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--text);padding:6px 8px;font-size:13px;flex:1}
.edrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #1F242B;font-size:13px}
.edrow code{font-family:var(--data);font-size:11px;color:var(--h-cyan)}
.bookwin{margin:10px 0 4px;padding:10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px}
.badge.book{color:var(--h-amber);border-color:color-mix(in srgb,var(--h-amber) 45%,transparent)}
.trophy{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #1F242B}
.trophy b{font-size:15px}
.trophy span{font-family:var(--data);font-size:10px;color:var(--muted)}

/* ---- the books shelf in the library ---- */
.shelfrow{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin-bottom:8px}
.shelfrow .nm{font-size:16px;font-weight:600}
.shelfrow .nm small{display:block;font-family:var(--data);font-size:10px;color:var(--muted);
  margin-top:3px;font-weight:400}
.shelfrow .pct{font-family:var(--data);font-size:13px;color:var(--muted);text-align:right}
.shelfrow .pct b{display:block;font-size:18px;color:var(--text);font-weight:400}
.shelfrow .medal{font-size:22px;filter:drop-shadow(0 0 10px rgba(255,176,32,.55))}
.shelfrow .meter{grid-column:2/3}
.shelfbody{margin:-2px 0 12px 14px;padding-left:14px;border-left:2px solid var(--line)}
.shelfrow.open{border-color:color-mix(in srgb,var(--h-amber) 40%,transparent)}

/* ---- a book inside a routine ---- */
.rbook{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;margin:8px 0}
.rbook .head{display:flex;align-items:center;gap:8px}
.rbook .head b{font-size:14px;flex:1}
.rbook .head .pct{font-family:var(--data);font-size:11px;color:var(--muted)}
.rbook .marks{margin-top:8px;max-height:230px;overflow:auto}
.rmark{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;cursor:pointer}
.rmark input{flex:none}
.rmark .pg{font-family:var(--data);font-size:9px;color:var(--muted);flex:none}
.rmark .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmark.on .nm{color:var(--text)}
.rmark .nm{color:var(--muted)}
.rbook .tools{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.rbook .tools button{font-size:11px;padding:5px 9px}

/* ---- a book as one slot ---- */
.bookslot .nm .disc{vertical-align:middle;margin-right:2px}
.slotbody{margin:0 0 8px 18px;padding:6px 0 6px 10px;border-left:2px solid var(--line)}
.slotbody .tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.slotbody .tools button{font-size:11px;padding:5px 9px}

/* ---- bookmarks while practising ---- */
.marksPanel .rmark{padding:8px 0;border-bottom:1px solid #1F242B}
.marksPanel .rmark.now{color:var(--text)}
.marksPanel .rmark.now .nm{color:var(--hue);font-weight:600}
.bookdots{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:16;
  display:flex;gap:5px;pointer-events:none}
.bookdots i{width:16px;height:3px;border-radius:2px;background:#333A45}
.bookdots i.on{background:var(--hue)}

/* ---- where the turn falls ---- */
.turnlines{position:absolute;inset:0;z-index:12;pointer-events:none}
.turnline{position:absolute;left:0;right:0;
  border-top:2px dashed color-mix(in srgb,var(--hue) 70%,transparent)}
/* the breaks further down the page are quieter than the one you are about to hit */
.turnline.later{border-top-style:dotted;border-top-color:color-mix(in srgb,var(--hue) 26%,transparent)}
.turnline span{position:absolute;right:10px;top:-9px;font-family:var(--data);font-size:8px;
  letter-spacing:.14em;text-transform:uppercase;color:#0A0C0F;background:var(--hue);
  padding:2px 7px;border-radius:5px}
.turnline.later span{display:none}

/* ---- the lesson notes box in the tray ---- */
.lessonbox{margin:10px 0 4px;padding:10px;background:var(--panel2);
  border:1px solid color-mix(in srgb,var(--h-indigo) 40%,var(--line));border-radius:12px}
.lessonbox textarea{width:100%;min-height:80px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-size:14px;padding:9px 11px;resize:vertical;
  line-height:1.55;margin-top:6px}
.lessonbox textarea[readonly]{color:#C9CEDA}
.lessonbox .hint{margin-top:6px}

/* ---- the student's notes screen ---- */
#lessonView{overflow:auto}
.lessonwrap{max-width:760px}
.lessonhead{display:flex;align-items:center;gap:12px;padding-bottom:14px;
  border-bottom:1px solid var(--line);margin-bottom:20px}
.lessonhead h1{font-size:26px;margin:4px 0 0;letter-spacing:-.02em}
.lessonhead .ledpip{background:var(--h-indigo);width:10px;height:10px}
.lessonnotebig{font-size:17px;line-height:1.7;color:#D5DAE4;white-space:pre-wrap;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--h-indigo);
  border-radius:0 14px 14px 0;padding:18px 20px;min-height:120px}

/* ---- how far was asked for ---- */
.bookdots i.asked{background:#4B5563}
.bookdots i.mark{background:var(--h-amber);width:4px}
.bookdots i.on{background:var(--hue)}
.marksPanel .rmark.asked .nm::after{content:' ← asked to here';font-family:var(--data);
  font-size:9px;color:var(--h-amber);letter-spacing:.08em}
.slotbody .rmark.asked .nm::after{content:' ← asked to here';font-family:var(--data);
  font-size:9px;color:var(--h-amber);letter-spacing:.08em}
.slotbody .expectbtn{font-family:var(--data);font-size:9px;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:2px 7px;flex:none}
.slotbody .expectbtn:hover{color:var(--h-amber);border-color:var(--h-amber)}
.lastrun{margin-top:8px;padding:8px 10px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;font-size:12px;line-height:1.6;color:var(--muted)}
.lastrun b{color:var(--text);font-weight:600}
.lastrun .met{color:var(--in-tune)}
.lastrun .short{color:var(--flat)}
.lastrun button{margin-left:8px}

/* ---- one more minute ---- */
/* Inside the ring, under the name. They used to hang off the left edge, on top
   of the Back button and often off the screen entirely. */





.ring.mini 
.ring.locked 

/* ---- a rest ---- */
.restview{position:absolute;left:var(--sl);right:var(--sr);top:0;bottom:0;z-index:8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:40px 24px calc(var(--strip) + 30px);text-align:center}
.breath{width:min(46vh,300px);height:min(46vh,300px);border-radius:50%;
  border:2px solid color-mix(in srgb,var(--hue) 55%,transparent);
  background:radial-gradient(circle at 50% 45%,
    color-mix(in srgb,var(--hue) 22%,transparent), transparent 70%);
  display:grid;place-items:center;transform:scale(.62);
  transition:transform var(--bt,4s) cubic-bezier(.4,0,.4,1),
             border-color .4s, background .4s}
.breath.in{transform:scale(1)}
.breath.hold{transform:scale(1)}
.breath.out{transform:scale(.62)}
.breath span{font-size:20px;letter-spacing:.02em;color:#D8DEE9}
.restsay{font-size:23px;line-height:1.5;max-width:26ch;color:#E9ECF3}
.restown{font-size:15px;line-height:1.65;max-width:34ch;color:var(--muted);white-space:pre-wrap}
.mod.rest .bar{background:repeating-linear-gradient(45deg,var(--hue),var(--hue) 5px,transparent 5px,transparent 10px)}
.flag.rest{color:var(--h-green);border-color:color-mix(in srgb,var(--h-green) 45%,transparent)}

/* ---- pointing at the music during a lesson ---- */
.pointer{position:absolute;width:0;height:0;z-index:30;pointer-events:none}
.pointer::before,.pointer::after{content:'';position:absolute;border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%)}
.pointer::before{width:26px;height:26px;background:rgba(255,90,78,.9);
  animation:pnt-core .9s ease-out forwards}
.pointer::after{width:26px;height:26px;border:3px solid rgba(255,90,78,.85);
  animation:pnt-ring .9s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes pnt-core{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}
  60%{transform:translate(-50%,-50%) scale(1);opacity:.75}
  100%{transform:translate(-50%,-50%) scale(.35);opacity:0}}
@keyframes pnt-ring{0%{transform:translate(-50%,-50%) scale(.3);opacity:.95}
  100%{transform:translate(-50%,-50%) scale(5.2);opacity:0}}

/* ---- homework ---- */
.hwrow{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid #1F242B}
.hwrow:last-child{border-bottom:0}
.hwrow .box{flex:none;width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line);
  background:var(--panel2);display:grid;place-items:center;margin-top:1px;color:var(--in-tune);font-size:12px}
.hwrow .box.claimed{border-color:var(--h-amber);color:var(--h-amber)}
.hwrow .box.done{background:var(--in-tune);border-color:var(--in-tune);color:#0A0C0F}
.hwrow .txt{flex:1;font-size:14px;line-height:1.5}
.hwrow .txt small{display:block;font-family:var(--data);font-size:9.5px;color:var(--muted);
  letter-spacing:.08em;margin-top:3px;text-transform:uppercase}
.hwrow.overdue .txt small{color:var(--flat)}
.hwrow .acts{display:flex;gap:4px}
.hwrow .acts button{font-family:var(--data);font-size:9px;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:3px 8px}
.hwrow .acts button:hover{color:var(--text)}
.hwbox{margin:10px 0 4px;padding:10px 12px;background:var(--panel2);
  border:1px solid color-mix(in srgb,var(--h-amber) 35%,var(--line));border-radius:12px}
#lvTasks{margin-top:22px}
#lvTasks .hwrow{border-color:#252B34}

/* ---- the lesson call ---- */
.callpane{position:fixed;right:14px;bottom:14px;z-index:210;width:210px;
  background:rgba(14,16,20,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 46px -18px rgba(0,0,0,.8)}
.callpane.hasvideo{width:min(300px,42vw)}
.callpane.lost{border-color:color-mix(in srgb,var(--flat) 55%,transparent)}
.callhead{display:flex;align-items:center;gap:7px;padding:8px 10px;font-family:var(--data);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.callhead .who{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callhead .drag{color:var(--muted);cursor:grab;font-size:13px;touch-action:none;
  padding:4px 6px;margin:-4px -6px}
/* the controls are the size of a finger, and nothing sits over them */
.cbtn{min-height:34px;position:relative;z-index:2}
.callacts{position:relative;z-index:2}
.qdot{width:8px;height:8px;border-radius:99px;background:var(--muted);flex:none}
.qdot.good{background:var(--in-tune)}
.qdot.fair{background:var(--h-amber)}
.qdot.bad{background:var(--flat)}
.callbody{position:relative;background:#07080A}
.callpane:not(.hasvideo) .callbody{height:0;overflow:visible}
.callpane.hasvideo .callbody{aspect-ratio:16/10}
.callbody video{width:100%;height:100%;object-fit:cover;display:block;background:#07080A}
#callSelf{position:absolute;right:8px;bottom:8px;width:34%;height:auto;aspect-ratio:16/10;
  border-radius:8px;border:1px solid rgba(255,255,255,.18)}
/* Never display:none a media element that is carrying sound. Chrome will not
   play a hidden video, and iPad Safari plays WebRTC audio through a video
   element far more reliably than through an audio one. So it stays rendered,
   just too small and too faint to notice. */
.callpane:not(.hasvideo) #callVideo{position:absolute;left:0;top:0;
  width:2px;height:2px;opacity:.01;pointer-events:none}
.callpane:not(.hasvideo) #callSelf{display:none}
.callvoice{display:none;gap:4px;align-items:flex-end;justify-content:center;height:30px}
.callpane:not(.hasvideo) .callvoice{display:flex;padding:2px 0 8px}
.callvoice span{width:3px;height:8px;background:var(--h-indigo);border-radius:2px;
  animation:vb 1.1s ease-in-out infinite}
.callvoice span:nth-child(2){animation-delay:.18s;height:16px}
.callvoice span:nth-child(3){animation-delay:.36s;height:11px}
@keyframes vb{0%,100%{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1.5);opacity:1}}
.callacts{display:flex;gap:4px;padding:8px;flex-wrap:wrap}
.cbtn{font-family:var(--data);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:5px 8px;color:var(--muted);background:var(--panel2)}
.cbtn.on{color:#0A0C0F;background:var(--text);border-color:var(--text)}
.cbtn.end{margin-left:auto;color:var(--flat);border-color:color-mix(in srgb,var(--flat) 45%,transparent)}
.calldevs{padding:0 8px 8px;display:grid;gap:6px}
.calldevs select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-size:11px;padding:5px 7px}
@media(max-width:560px){.callpane{right:8px;bottom:8px;width:160px}.callpane.hasvideo{width:56vw}}
.callhead .note{font-size:8px;color:var(--muted);max-width:70px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;opacity:.8}
.cbtn.wide{display:block;width:calc(100% - 16px);margin:0 8px 8px;text-align:center;
  color:#0A0C0F;background:var(--h-amber);border-color:var(--h-amber)}
.callpane:not(.hasvideo) .callvoice{display:flex;padding:6px 0 10px;height:34px}
.levels{padding:0 10px 8px;display:grid;gap:5px}
.lv{display:flex;align-items:center;gap:7px}
.lv b{font-family:var(--data);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);width:30px;font-weight:400}
.lv i{flex:1;height:5px;border-radius:3px;background:#20252E;overflow:hidden;display:block}
.lv s{display:block;height:100%;width:0;background:var(--in-tune);text-decoration:none;
  transition:width .1s linear}
.callpane.hasvideo .levels{padding-top:8px}

/* ---- picking a student ---- */
.studentpick{display:flex;flex-wrap:wrap;gap:8px}
.studentpick button{font-size:15px;padding:11px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);min-height:44px}
.studentpick button small{display:block;font-family:var(--data);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.studentpick button.on{background:var(--text);color:#0A0C0F;border-color:var(--text)}
.studentpick button.on small{color:rgba(10,12,15,.65)}
.studentpick .empty{padding:4px 0}

/* ---- something played out of a book ---- */
.offsite{position:absolute;left:var(--sl);right:var(--sr);top:0;bottom:0;z-index:8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:44px 26px calc(var(--strip) + 34px);text-align:center}
.offsite .where{font-size:clamp(22px,4.4vw,40px);line-height:1.25;letter-spacing:-.02em;
  color:var(--text);max-width:22ch}
.offsite .osnotes{font-size:clamp(15px,2.2vw,20px);line-height:1.65;color:#C9CEDA;
  max-width:40ch;white-space:pre-wrap;border-top:1px solid var(--line);padding-top:18px}
.flag.offsite{color:var(--h-violet);border-color:color-mix(in srgb,var(--h-violet) 45%,transparent)}

/* ---- the page of work ---- */
.workbox{margin:10px 0 4px;padding:10px 12px;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px}
.assigned{margin-bottom:12px}
.assigned .rname{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.assigned .rname small{font-family:var(--data);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.assigned .rnote{font-size:13px;line-height:1.6;color:#C9CEDA;white-space:pre-wrap;margin:6px 0 8px;
  padding-left:10px;border-left:2px solid color-mix(in srgb,var(--h-indigo) 55%,transparent)}
.worklink{display:flex;gap:9px;align-items:baseline;padding:6px 0;border-bottom:1px solid #1F242B;
  width:100%;text-align:left}
.worklink:last-child{border-bottom:0}
.worklink .num{font-family:var(--data);font-size:9px;color:var(--muted);flex:none;width:16px}
.worklink .nm{font-size:14px;color:var(--text)}
.worklink .nm em{font-style:normal;font-family:var(--data);font-size:9px;color:var(--h-violet);
  letter-spacing:.08em;text-transform:uppercase;margin-left:6px}
.worklink .inote{display:block;font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:3px;
  white-space:pre-wrap}
.worklink:hover .nm{text-decoration:underline}
.lessonlog{margin-top:22px}
.lessonfold{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--panel)}
.lessonfold summary{cursor:pointer;padding:11px 14px;font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:10px;list-style:none}
.lessonfold summary::-webkit-details-marker{display:none}
.lessonfold summary::before{content:'▸';color:var(--muted);font-size:11px}
.lessonfold[open] summary::before{content:'▾'}
.lessonfold summary span{font-family:var(--data);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.lessonfold p{margin:0;padding:0 14px 14px;font-size:14px;line-height:1.65;color:#C9CEDA;
  white-space:pre-wrap}

/* ---- an insecure address ---- */
.insecure{position:fixed;left:0;right:0;top:0;z-index:400;padding:11px 16px;text-align:center;
  background:var(--flat);color:#0A0C0F;font-size:14px;font-weight:600}
.insecure a{color:#0A0C0F;text-decoration:underline;margin-left:8px}

/* ---- joining, made obvious ---- */
.joinbig{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;
  padding:18px 20px;border-radius:16px;
  background:linear-gradient(96deg,color-mix(in srgb,var(--h-indigo) 26%,transparent),
    color-mix(in srgb,var(--h-violet) 20%,transparent));
  border:1px solid color-mix(in srgb,var(--h-indigo) 55%,transparent);
  animation:joinpulse 2.4s ease-in-out infinite}
@keyframes joinpulse{0%,100%{box-shadow:0 0 0 0 rgba(108,124,255,.35)}
  50%{box-shadow:0 0 0 10px rgba(108,124,255,0)}}
.joinbig .jtext{flex:1;min-width:200px}
.joinbig b{display:block;font-size:19px;margin-bottom:3px}
.joinbig span{font-size:14px;color:#C6CCDA}
.joinbig .btn{font-size:17px;padding:14px 26px;min-height:52px}
.callpane .cbtn.big{font-size:11px;padding:8px 12px}

/* ---- the call prompt, wherever they are ---- */
.joinbar{position:fixed;left:0;right:0;top:0;z-index:320;display:flex;align-items:center;gap:14px;
  padding:12px 16px calc(12px);
  padding-top:calc(12px + env(safe-area-inset-top));
  background:linear-gradient(96deg,var(--h-indigo),var(--h-violet));color:#0A0C0F;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.6);animation:joinpulse 2.4s ease-in-out infinite}
.joinbar .jtext{flex:1;min-width:0}
.joinbar b{display:block;font-size:16px}
.joinbar span{font-size:13px;opacity:.85}
.joinbar .ledpip{background:#0A0C0F;opacity:.6}
.joinbar .btn{background:#0A0C0F;color:#fff;border-color:transparent;font-size:15px;
  padding:11px 20px;min-height:46px;flex:none}
body:has(.joinbar:not([hidden])) .wrap{padding-top:64px}

/* ---- finding your way around ---- */
.guidestep h3{font-size:21px;margin:0 0 8px;letter-spacing:-.02em}
.guidestep p{font-size:15px;line-height:1.7;color:#C9CEDA;margin:0 0 10px;max-width:52ch}
.guidestep .keys{font-family:var(--data);font-size:12px;color:var(--muted);line-height:2}
.guidestep .keys b{display:inline-block;font-weight:400;color:var(--text);background:var(--panel2);
  border:1px solid var(--line);border-radius:5px;padding:2px 7px;margin-right:6px}
.guidedots{display:flex;gap:6px;margin-top:18px}
.guidedots i{width:22px;height:3px;border-radius:2px;background:#2A303A}
.guidedots i.on{background:var(--text)}

/* ---- the lesson log ---- */
.lesrow{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--panel2)}
.lesrow summary{cursor:pointer;padding:11px 13px;display:flex;align-items:center;gap:10px;
  list-style:none;font-size:14px}
.lesrow summary::-webkit-details-marker{display:none}
.lesrow summary::before{content:'▸';color:var(--muted);font-size:11px}
.lesrow[open] summary::before{content:'▾'}
.lesrow summary b{font-weight:600}
.lesrow .stat{margin-left:auto;font-family:var(--data);font-size:10px;color:var(--muted);
  display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.lesrow .stat i{font-style:normal}
.lesrow .stat i b{color:var(--text);font-weight:400}
.lesbody{padding:0 13px 13px}
.lesnote{font-size:13.5px;line-height:1.65;color:#C9CEDA;white-space:pre-wrap;
  padding-left:10px;border-left:2px solid color-mix(in srgb,var(--h-indigo) 55%,transparent);
  margin-bottom:12px}
.askrow{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:7px 0;
  border-bottom:1px solid #1F242B;align-items:baseline}
.askrow:last-child{border-bottom:0}
.askrow .nm{font-size:13.5px}
.askrow .ask{font-family:var(--data);font-size:10px;color:var(--muted);white-space:nowrap}
.askrow .ask b{color:var(--text);font-weight:400}
.askrow .ask .goal{font-style:normal;color:var(--h-amber)}
.askrow .did{font-family:var(--data);font-size:10px;grid-column:2}
.askrow .did.none{color:var(--flat)}
.askrow .did.some{color:var(--in-tune)}
.askrow .did .hit{color:var(--h-amber);font-weight:400}
.askrow .notes{grid-column:1/3;font-size:12.5px;line-height:1.55;color:var(--muted);
  white-space:pre-wrap;padding-left:2px}
.askrow .notes em{font-style:normal;color:var(--h-indigo);font-family:var(--data);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.spark{display:flex;gap:2px;align-items:flex-end;height:22px;margin-top:10px}
.spark i{flex:1;background:color-mix(in srgb,var(--h-indigo) 70%,transparent);border-radius:2px;
  min-height:2px}
.spark i.none{background:#252B34}

/* ---- the staves beside the page ---- */
.bkgrid{display:grid;grid-template-columns:minmax(190px,240px) 1fr;gap:12px;margin-top:10px;
  align-items:start}
.stavecol{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px}
.stavecol .eyebrow{margin-bottom:8px}
#staveList{max-height:min(62vh,820px);overflow:auto}
.stvrow{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;
  padding:5px 4px;border-radius:8px;cursor:pointer}
.stvrow:hover{background:#1A1F27}
.stvrow.hot{background:#1F2530}
.stvrow.sel{background:color-mix(in srgb,var(--h-cyan) 20%,transparent)}
.stvrow .no{font-family:var(--data);font-size:10px;color:var(--muted);width:20px;text-align:right}
.stvrow input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:7px;
  color:var(--text);font-size:13px;padding:5px 8px}
.stvrow.taken input{border-color:color-mix(in srgb,var(--h-amber) 55%,transparent);
  color:var(--h-amber)}
.stvrow.spans .no::after{content:'–';color:var(--h-amber)}
.stavecol .row{gap:5px;flex-wrap:wrap}
.stavecol .btn.sm{font-size:11px;padding:5px 9px}
@media(max-width:720px){.bkgrid{grid-template-columns:1fr}#staveList{max-height:200px}}
.staveband.picked{background:rgba(53,231,224,.26);border-color:rgba(53,231,224,.7)}
.studentpick button.here{border-color:color-mix(in srgb,var(--in-tune) 55%,transparent)}
.studentpick .livedot{display:inline-block;width:7px;height:7px;border-radius:99px;
  background:var(--in-tune);margin-right:7px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(53,231,160,.5);animation:joinpulse 2.4s ease-in-out infinite}

/* ---- the video window, three sizes ---- */
.callpane.twice{width:min(560px,80vw)}
.callpane.full{left:0;top:0;right:0;bottom:0;width:auto;border-radius:0;border:0;z-index:340}
.callpane.full .callbody{aspect-ratio:auto;height:calc(100% - 108px)}
.callpane.full video{object-fit:contain;background:#000}
.callpane.full #callSelf{width:20%;right:14px;bottom:14px}
.callpane.hasvideo .callbody{cursor:grab;touch-action:none}
.callpane.full .callbody{cursor:default}

/* ---- joining staves into one piece ---- */
.joiner{display:block;width:100%;text-align:left;padding:2px 4px 2px 26px;
  font-family:var(--data);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:#3D4551;background:none;border:0}
.joiner:hover{color:var(--h-cyan)}
.joiner.on{color:var(--h-amber)}
.stvrow.joined{border-left:2px solid var(--h-amber);margin-left:-2px;padding-left:6px}
.stvrow.cont .partof{font-size:12px;color:var(--h-amber);opacity:.75}
.stvrow.cont{opacity:.9}

/* ---- playing with somebody ---- */
.sessionbar{position:fixed;left:0;right:0;top:0;z-index:300;display:flex;align-items:center;gap:10px;
  padding:9px 14px;padding-top:calc(9px + env(safe-area-inset-top));
  background:linear-gradient(96deg,color-mix(in srgb,var(--h-cyan) 30%,#0C0F14),#0C0F14);
  border-bottom:1px solid color-mix(in srgb,var(--h-cyan) 40%,transparent)}
.sessionbar b{font-size:14px}
.sessionbar .ledpip{background:var(--h-cyan)}
.sessionbar .turn{font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 9px}
.sessionbar .turn.mine{color:#0A0C0F;background:var(--in-tune);border-color:var(--in-tune)}
.sessionbar .turn.theirs{color:#0A0C0F;background:var(--h-amber);border-color:var(--h-amber)}
body:has(.sessionbar:not([hidden])) .wrap{padding-top:58px}
.materow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #1F242B}
.materow:last-child{border-bottom:0}
.materow .nm{flex:1;font-size:15px}
.materow .nm small{display:block;font-family:var(--data);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.sesrow{padding:8px 0;border-bottom:1px solid #1F242B;font-size:13px}
.sesrow:last-child{border-bottom:0}
.sesrow b{font-weight:600}
.sesrow .when{font-family:var(--data);font-size:10px;color:var(--muted);margin-left:8px}
.sesrow p{margin:5px 0 0;color:#C9CEDA;white-space:pre-wrap;font-size:12.5px;line-height:1.55}

/* ---- face mode: them, not the music ---- */
body.facemode .sheetwrap,body.facemode #sheetscroll{opacity:0}
body.facemode .callpane{left:0;top:0;right:0;bottom:0;width:auto;border-radius:0;border:0;z-index:30}
body.facemode .callpane .callbody{aspect-ratio:auto;height:calc(100% - 96px)}
body.facemode .callpane video{object-fit:contain;background:#000}
body.facemode .strip,body.facemode .ring,body.facemode .menubtn,body.facemode .recbtn{z-index:60}
body.facemode .callacts,body.facemode .levels{position:relative;z-index:40}

/* ---- what the teacher throws onto their screen ----
   Twelve drawings, two or three frames each, stepped rather than tweened: a
   picture that changes catches the eye at the edge of vision in a way a
   sliding one does not, and the student is looking at music, not at this. */
.emoart{width:100%;height:100%;display:block;overflow:visible}
.emoart .fr{opacity:0;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.emoart .fr .solid{fill:currentColor;stroke:none}
.emoart .fr .thin{stroke-width:2}
.emoart .fr .ghost{opacity:.22;stroke-width:2}
.emoart .fr .spark{stroke-width:2.6}
.emoart .fr .num{fill:currentColor;stroke:none;font-family:var(--data);
  font-size:30px;text-anchor:middle}
/* two frames */
.emoart.f2 .fr1{animation:emoA2 .72s steps(1,end) infinite}
.emoart.f2 .fr2{animation:emoB2 .72s steps(1,end) infinite}
@keyframes emoA2{0%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes emoB2{0%,49.9%{opacity:0}50%,100%{opacity:1}}
/* three frames */
.emoart.f3 .fr1{animation:emoA3 .96s steps(1,end) infinite}
.emoart.f3 .fr2{animation:emoB3 .96s steps(1,end) infinite}
.emoart.f3 .fr3{animation:emoC3 .96s steps(1,end) infinite}
@keyframes emoA3{0%,33.2%{opacity:1}33.3%,100%{opacity:0}}
@keyframes emoB3{0%,33.2%{opacity:0}33.3%,66.5%{opacity:1}66.6%,100%{opacity:0}}
@keyframes emoC3{0%,66.5%{opacity:0}66.6%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .emoart .fr{animation:none!important}
  .emoart .fr1{opacity:0}
  .emoart.f2 .fr2,.emoart.f3 .fr3{opacity:1}
}

/* the card itself, on whoever is being taught */
.cue{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:37;
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;
  padding:20px 28px 16px;border-radius:22px;background:rgba(12,14,18,.9);
  border:1px solid color-mix(in srgb,var(--h-amber) 45%,transparent);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.85);animation:cuein .2s ease}
@keyframes cuein{from{opacity:0;transform:translateX(-50%) scale(.9)}
  to{opacity:1;transform:translateX(-50%) scale(1)}}
.cue .cueicon{width:120px;height:120px;color:var(--h-amber)}
.cue .cuetext{font-family:var(--data);font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:#E6EAF2;text-align:center;max-width:10em;line-height:1.5}
/* the same card naming a new section, which is words rather than a drawing */
.cue.title{top:32%;padding:26px 38px}
.cue.title .cueicon{width:auto;height:auto;font-family:var(--data);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.cue.title .cuetext{font-family:var(--ui);font-size:30px;letter-spacing:0;text-transform:none;
  max-width:12em;font-weight:600}

/* one button, out of the way, top right */
.emotebtn{position:absolute;right:12px;top:calc(46px + env(safe-area-inset-top));z-index:215;
  width:46px;height:46px;border-radius:99px;display:grid;place-items:center;
  background:rgba(12,14,18,.82);border:1px solid var(--line);color:var(--h-amber);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.8)}
.emotebtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.emotebtn.on{background:var(--h-amber);color:#0A0C0F;border-color:var(--h-amber)}
.emotebtn b{position:absolute;right:-2px;bottom:-2px;font-family:var(--data);font-size:8px;
  font-weight:400;letter-spacing:.06em;color:var(--muted);background:var(--panel2);
  border:1px solid var(--line);border-radius:4px;padding:1px 3px}
.emotebtn.on b{color:#0A0C0F;background:rgba(255,255,255,.75);border-color:transparent}

/* and the panel it opens */
.emotepanel{position:absolute;right:12px;top:calc(100px + env(safe-area-inset-top));z-index:214;
  width:min(330px,calc(100vw - 24px));padding:10px;border-radius:18px;
  background:rgba(14,16,20,.95);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 22px 56px -20px rgba(0,0,0,.85);
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-items:stretch;
  animation:emoopen .16s ease}
@keyframes emoopen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.emotepanel button{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 4px 7px;border-radius:12px;border:1px solid transparent;background:none;
  color:#C9CEDA;cursor:pointer}
.emotepanel button .pic{width:34px;height:34px;color:var(--h-amber)}
/* two lines of room for every label, so the rows line up whatever they say */
.emotepanel button i{font-family:var(--data);font-size:8px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-style:normal;text-align:center;
  line-height:1.3;min-height:2.6em;display:block}
.emotepanel button i u{display:block;text-decoration:none;color:#5C6473;margin-top:2px}
.emotepanel button:hover{border-color:var(--line);background:var(--panel2)}
.emotepanel button:active{background:var(--h-amber)}
.emotepanel button:active .pic,.emotepanel button:active i,
.emotepanel button:active i u{color:#0A0C0F}

/* ---- a fingering, shown large ---- */
.fingering{position:absolute;left:50%;top:26%;transform:translateX(-50%);z-index:36;
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.fingering .valves{display:flex;gap:14px}
.fingering .v{width:52px;height:52px;border-radius:99px;border:3px solid rgba(255,255,255,.35);
  background:rgba(12,14,18,.6)}
.fingering .v.on{background:var(--h-amber);border-color:var(--h-amber);
  box-shadow:0 0 26px -4px rgba(255,176,32,.8)}
.fingering .fnum{font-family:var(--data);font-size:15px;letter-spacing:.2em;color:#E6EAF2;
  background:rgba(12,14,18,.75);border-radius:99px;padding:5px 16px}

/* ---- recording choices ---- */
.recPick{padding-top:24px}
.recPick .recopt{display:block;width:100%;margin-bottom:8px;font-size:15px;padding:12px}
.beingrec{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top));
  z-index:360;background:#FF5A4E;color:#0A0C0F;border-radius:99px;padding:7px 16px;font-size:13px;
  font-weight:600;display:flex;align-items:center;gap:8px}
.beingrec .reddot{width:10px;height:10px;border-radius:99px;background:#0A0C0F;
  animation:recpulse 1.1s ease-in-out infinite}

/* ---- a talk: your recording with slides ---- */
.talkview{position:absolute;left:var(--sl);right:var(--sr);top:0;bottom:0;z-index:8;
  display:flex;align-items:center;justify-content:center;background:#07080A;
  padding:0 0 calc(var(--strip) + 8px)}
.talkview img{max-width:100%;max-height:100%;object-fit:contain;display:block;background:#fff}
.talkbar{position:absolute;left:0;right:0;bottom:calc(var(--strip) + 2px);height:3px;background:#20252E}
.talkbar i{display:block;height:100%;width:0;background:var(--h-cyan)}
.talkcount{position:absolute;right:14px;bottom:calc(var(--strip) + 10px);font-family:var(--data);
  font-size:10px;letter-spacing:.12em;color:var(--muted)}
.slideRow{display:grid;grid-template-columns:78px 1fr auto auto;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px solid #1F242B}
.slideRow img{width:78px;height:46px;object-fit:cover;border-radius:6px;background:#0B0C0F}
.slideRow .at{font-family:var(--data);font-size:12px;color:var(--text);background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;width:92px;text-align:center}
.slideRow .btn.sm{font-size:11px;padding:5px 9px}
.flag.talk{color:var(--h-cyan);border-color:color-mix(in srgb,var(--h-cyan) 45%,transparent)}

/* ---- the wheel fits the window it is in ----
   The spokes reach about 210px up and across. On a short window that runs past
   the top, so the whole wheel shrinks rather than losing its outer ring. */
@media (max-height:620px), (max-width:560px){
  .menu.open{transform:scale(.78);transform-origin:left bottom}
}
@media (max-height:520px){
  .menu.open{transform:scale(.62);transform-origin:left bottom}
}
/* labels sit under each spoke and must not push past the left edge */
.spoke i{max-width:96px;text-align:center}

/* ---- a lesson note with a little shape ---- */
.richbar{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.rbtn{min-width:34px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:13px;padding:0 9px}
.rbtn:hover{border-color:var(--text)}
.rbtn.hi-green{color:var(--in-tune)}
.rbtn.hi-amber{color:var(--h-amber)}
.rbtn.hi-red{color:var(--flat)}
/* ---- a lesson note is a list of subjects ----
   One box per lesson meant rewriting the same paragraph every week. These are
   the running subjects: each one keeps its words from last week and gets
   changed rather than retyped, and taking one away keeps it away. */
.seclist{display:grid;gap:8px}
.sec{border:1px solid var(--line);border-radius:12px;background:var(--panel2);overflow:hidden}
.sec.extra{border-left:3px solid var(--h-amber)}
.sec.asked{border-left:3px solid var(--h-indigo)}
.sec.free{border-left:3px solid var(--h-slate)}
.sechead{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px}
.sechead input{flex:1;min-width:0;background:none;border:0;color:var(--text);
  font-size:14px;font-weight:600;padding:2px 0;margin:0}
.sechead input:focus{outline:none}
.sechead .from{font-family:var(--data);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;flex:none}
.sec.extra .sechead .from{color:var(--h-amber)}
/* a subject picked back up, showing when it was last written in */
.sechead .from.back{color:var(--h-cyan)}
.sec.asked .sechead .from{color:var(--h-indigo)}
.sechead .x{flex:none;width:22px;height:22px;border-radius:6px;color:#4A505C;font-size:12px;
  background:none;border:0;cursor:pointer}
.sechead .x:hover{background:rgba(255,90,78,.14);color:var(--flat)}
.sec .secbody{border-top:1px solid var(--line)}
.sec .richnote{border:0;border-radius:0;min-height:56px;background:transparent}
.sec .richbar{margin:0;padding:5px 8px 0;opacity:.45;transition:opacity .15s}
.sec:focus-within .richbar{opacity:1}
.seclist.read .sec{background:var(--panel)}
.seclist.read .sechead input{font-size:13px}
.secempty{color:var(--muted);font-size:13px;padding:10px 2px}
/* subjects taken away, and the way back */
.gonepane{margin-top:8px;padding:8px 10px;border:1px dashed var(--line);border-radius:10px}
.gonepane .g{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px;color:var(--muted)}
.gonepane .g button{font-family:var(--data);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--h-cyan);background:none;border:0;cursor:pointer;padding:0}
/* the one subject open on the practice screen */
.secnow{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.secnow b{flex:1;font-size:15px;color:var(--text)}

.richnote{width:100%;min-height:90px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-size:14px;padding:9px 11px;line-height:1.55;
  overflow:auto;max-height:40vh}
.richnote:focus{outline:none;border-color:color-mix(in srgb,var(--h-indigo) 60%,var(--line))}
.richnote:empty::before{content:attr(data-placeholder);color:#4A505C}
.richnote[contenteditable="false"]{color:#C9CEDA}
.hi-green{color:var(--in-tune)}
.hi-amber{color:var(--h-amber)}
.hi-red{color:var(--flat)}
.lessonnotebig .hi-green,.lessonbox .hi-green{color:var(--in-tune)}
.lessonnotebig b,.lessonbox b{color:#fff}

/* ---- the call filling the screen must not sit on the practice controls ----
   The plus button is at the bottom left and the beat, tuner and timer run along
   the bottom. A full screen call used to lay its own buttons straight over the
   top of all of it. */
/* Filling the screen used to push the row of buttons wider than the screen, so
   the last of them sat under the edge with nothing to press. They wrap now, and
   the picture gives up the room rather than the buttons. */
.callpane.full .callacts,
body.facemode .callpane .callacts{
  padding-left:calc(var(--sl) + 78px);
  padding-right:calc(var(--sr) + 130px);
  padding-bottom:calc(var(--strip) + env(safe-area-inset-bottom) + 10px);
  gap:6px;flex-wrap:wrap;row-gap:6px;max-height:40vh;overflow:visible}
.callpane.full .callacts .cbtn,
body.facemode .callpane .callacts .cbtn{flex:0 0 auto}
.callpane.full .levels,
body.facemode .callpane .levels{
  padding-left:calc(var(--sl) + 78px);
  padding-right:calc(var(--sr) + 130px)}
/* The picture takes whatever the buttons leave, rather than a guess at how
   much room the buttons need. The guess was 150px, and nine buttons on a
   narrow screen wrap onto two rows and take more, which is how a row of them
   ended up sitting on top of the picture. */
.callpane.full,body.facemode .callpane{display:flex;flex-direction:column}
.callpane.full>*,body.facemode .callpane>*{flex:0 0 auto}
.callpane.full .callbody,body.facemode .callpane .callbody{
  flex:1 1 auto;height:auto;min-height:0}
.callpane.full .callhead,
body.facemode .callpane .callhead{padding-top:calc(8px + env(safe-area-inset-top))}
/* and the practice controls stay on top of the call, whichever it is */
body.callfull .strip,body.callfull .ring,body.callfull .menu,
body.callfull .menubtn,body.callfull .recbtn{z-index:360}
body.facemode .strip,body.facemode .ring,body.facemode .menu,
body.facemode .menubtn,body.facemode .recbtn{z-index:360}

/* ---- page turns where the page is ---- */
.pagebar{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap}
.pagebar .btn{font-size:13px;padding:7px 12px}
.pagebar #markUndo{border-color:color-mix(in srgb,var(--h-amber) 55%,transparent);color:var(--h-amber)}


/* ---- one row of controls inside the ring ----
   Back, a minute less, a minute more, and next. They used to be four things
   pinned to different edges, which left them on top of each other. */
.ringctl{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:4px}
.ringctl button{height:24px;min-width:28px;padding:0 6px;border-radius:7px;border:0;
  background:rgba(255,255,255,.10);color:#C7CDD9;font-family:var(--data);font-size:11px;
  display:grid;place-items:center}
.ringctl button:hover{background:rgba(255,255,255,.20);color:#fff}
.ringctl button:active{background:var(--text);color:#0A0C0F}
.ringctl svg{width:12px;height:12px;fill:currentColor;stroke:none}
.ring.mini .ringctl{display:none}
/* a routine somebody else set is not ours to stretch */
.ring.locked .mins{display:none}

/* ---- working through a book ---- */
.bkacts{display:flex;gap:6px;grid-column:2/5;margin-top:8px}
.bkacts .btn.sm{font-size:11px;padding:5px 10px}
.bkline{display:flex;align-items:flex-start;gap:10px}
.bkline .grow{flex:1;min-width:0}
.tick{flex:none;width:30px;height:30px;border-radius:99px;margin-top:12px;
  border:1.5px solid var(--line);background:var(--panel2);color:#0A0C0F;font-size:14px;
  display:grid;place-items:center}
.tick.on{background:var(--in-tune);border-color:var(--in-tune)}
.tick:hover{border-color:var(--in-tune)}
.tick.s-none{color:#0A0C0F}
.tick.s-practicing{background:var(--h-indigo);border-color:var(--h-indigo);color:#fff}
.tick.s-struggling{background:var(--flat);border-color:var(--flat);color:#0A0C0F}
.tick.s-completed{background:var(--in-tune);border-color:var(--in-tune);color:#0A0C0F}
.tick.s-done{background:var(--h-amber);border-color:var(--h-amber);color:#0A0C0F}

/* ---- what is in this book, from the left ---- */
.booklist{position:absolute;left:0;top:0;bottom:0;width:min(330px,80vw);z-index:40;
  padding:20px 18px 20px calc(18px + var(--sl));overflow:auto;
  transform:translateX(-101%);transition:transform .16s cubic-bezier(.3,.9,.3,1);
  background:linear-gradient(90deg,rgba(8,10,13,.99) 62%,rgba(8,10,13,.86) 86%,rgba(8,10,13,0));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.booklist.on{transform:translateX(0)}
.blhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.blhead b{flex:1;font-size:15px}
.blrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #1B1F27;
  width:100%;text-align:left}
.blrow:last-child{border-bottom:0}
.blrow .nm{flex:1;font-size:14px;color:#C9CEDA;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blrow.now .nm{color:var(--text);font-weight:600}
.blrow .pip{flex:none;width:22px;height:22px;border-radius:99px;display:grid;place-items:center;
  font-size:11px;border:1.5px solid var(--line);color:#0A0C0F}
.blrow .pip.s-practicing{background:var(--h-indigo);border-color:var(--h-indigo);color:#fff}
.blrow .pip.s-struggling{background:var(--flat);border-color:var(--flat)}
.blrow .pip.s-completed{background:var(--in-tune);border-color:var(--in-tune)}
.blrow .pip.s-done{background:var(--h-amber);border-color:var(--h-amber)}

/* ---- a lesson guard on the student's screen ----
   A stray tap during a lesson used to take a student clean out of the website,
   which meant stopping everything and talking them back in. While a teacher is
   leading, taps on the music do nothing until the student deliberately asks for
   the screen back. */
.tapguard{position:absolute;left:0;right:0;top:0;bottom:var(--strip);z-index:26;
  background:transparent;touch-action:none}
.tapguard .unlock{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#6A7280;background:rgba(12,14,18,.75);border:1px solid var(--line);
  border-radius:99px;padding:6px 14px;pointer-events:auto}
.tapguard.asking .unlock{color:var(--h-amber);border-color:var(--h-amber)}
body.guarded .tapzone{pointer-events:none}

/* ---- the one tap that lets sound out ---- */
.soundon{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;
  background:var(--h-amber);color:#0A0C0F;border:0;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(0,0,0,.4);animation:soundnudge 1.8s ease-in-out infinite}
.soundon svg{width:17px;height:17px;fill:none;stroke:#0A0C0F;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.soundon svg path:first-child{fill:#0A0C0F}
@keyframes soundnudge{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.045)}}

/* ---- where the student's screen ends ---- */
.theirview{position:absolute;left:var(--sl);right:var(--sr);z-index:12;
  border-top:2px dashed color-mix(in srgb,var(--h-amber) 70%,transparent);
  pointer-events:none}
.theirview span{position:absolute;right:6px;top:-9px;font-family:var(--data);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:#0A0C0F;background:var(--h-amber);
  padding:1px 7px;border-radius:4px;white-space:nowrap}

/* ---- the week between two lessons, read day by day ---- */
.weekread{margin:12px 0 4px;border-left:2px solid #232833;padding-left:12px}
.wkrow{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:4px 0;font-size:13px;
  align-items:baseline}
.wkrow b{font-weight:600;color:#C9CEDA}
.wkrow span{color:#9AA3B2}
.wkrow.none b,.wkrow.none span{color:#5C6473}
.wkrow.lesson b{color:var(--h-indigo)}
.wkrow.lesson span{color:#C9CEDA}
.wkrow.sum{border-top:1px solid #1F242B;margin-top:6px;padding-top:7px}
.wkrow.sum span{font-family:var(--data);font-size:10px;letter-spacing:.06em;color:var(--muted)}

/* ---- the check before a lesson ---- */
.ckrow{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid #1F242B;font-size:14px}
.ckrow:last-child{border-bottom:0}
.ckrow .pip{font-size:15px;line-height:1}
.ckrow.ok .pip{color:var(--in-tune)}
.ckrow.no .pip{color:var(--flat)}
.ckrow.warn .pip{color:var(--h-amber)}
.ckrow .what{color:#C9CEDA}
.ckrow .what small{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.5}
.ckrow .val{font-family:var(--data);font-size:10px;color:var(--muted);white-space:nowrap}

/* -- end of app.css, v9-13. check.php looks for this line. -- */