/* ============================================================================
   THE OPERATOR'S COURSE — TERMINAL SKIN
   Trading-desk dark. Amber is the machine talking. Green is confirmed truth.
   Red is money leaving. Nothing is decorative that isn't also informative.
   ========================================================================= */

:root{
  --bg:        #07080a;
  --bg-1:      #0b0d10;
  --bg-2:      #101318;
  --bg-3:      #161a21;
  --line:      #1e242d;
  --line-hot:  #2c3542;

  --txt:       #c9d3de;
  --txt-dim:   #6b7787;
  --txt-ghost: #3b444f;

  --amber:     #ffb92b;
  --amber-dim: #a37200;
  --green:     #21ffa3;
  --green-dim: #0d8a58;
  --red:       #ff5f6d;
  --red-dim:   #9c2a30;
  --cyan:      #4fc9ff;
  --violet:    #b79bff;

  /* The colour code, as text colours. Same five hues as the chrome, pushed
     brighter and given a faint bed of their own colour so a highlighted word
     reads as a lit object rather than as tinted text. */
  --in-fg:     #2bffab;  --in-bg:     rgba(33,255,163,.10);  --in-ed:  rgba(33,255,163,.22);
  --out-fg:    #ff7480;  --out-bg:    rgba(255,95,109,.10);  --out-ed: rgba(255,95,109,.24);
  --met-fg:    #ffc14d;  --met-bg:    rgba(255,185,43,.10);  --met-ed: rgba(255,185,43,.24);
  --def-fg:    #6ad2ff;  --def-bg:    rgba(79,201,255,.13);  --def-ed: rgba(79,201,255,.34);
  --trap-fg:   #c4adff;  --trap-bg:   rgba(183,155,255,.12); --trap-ed:rgba(183,155,255,.28);
  --fig-fg:    #e8d9b4;

  --mono: ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Two typefaces doing two different jobs. Mono is for anything read as a
     COLUMN — figures, tickers, statements — where digits must line up. Sans is
     for anything read as a SENTENCE. Setting the teaching text in mono made the
     lessons feel like log output instead of a lecture. */
  --sans: ui-sans-serif,-apple-system,"SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;

  --rail: 244px;
  --data: 336px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  /* Flex column off the real viewport rather than 100vh math: vh lies on
     mobile (URL bar) and in some headless/embedded contexts, which pushed the
     composer off-screen. */
  display:flex;flex-direction:column;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--mono);
  font-size:14.5px;
  line-height:1.55;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* faint scanline + vignette; the terminal should feel like glass, not paper */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(0,0,0,.55) 100%);
}
button,textarea,input{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--amber);color:#000}
.mono{font-family:var(--mono)}
.dim{color:var(--txt-dim)}
.hidden{display:none !important}
.lbl{font-size:11px;letter-spacing:.09em;color:var(--txt-dim);text-transform:uppercase}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:var(--line-hot);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--amber-dim)}

/* ===================== BOOT ===================== */
.boot{
  position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .5s ease, visibility .5s;
}
.boot.gone{opacity:0;visibility:hidden}
.boot-logo{color:var(--amber);font-size:11px;line-height:1.15;text-shadow:0 0 22px rgba(255,176,0,.35)}
.boot-lines{width:min(620px,88vw);min-height:140px;font-size:13px;color:var(--txt-dim)}
.boot-lines div{opacity:0;animation:bootline .28s forwards}
.boot-lines .ok{color:var(--green)}
.boot-lines .warn{color:var(--amber)}
@keyframes bootline{to{opacity:1}}
.boot-enter{
  opacity:0;border:1px solid var(--amber);color:var(--amber);
  padding:13px 34px;letter-spacing:.12em;font-size:13px;
  animation:bootline .4s .1s forwards;
}
.boot-enter:hover{background:var(--amber);color:#000;box-shadow:0 0 34px rgba(255,176,0,.4)}

/* ===================== TOPBAR / TICKER ===================== */
.topbar{
  flex:0 0 34px;height:34px;display:flex;align-items:center;gap:16px;
  border-bottom:1px solid var(--line);background:var(--bg-1);padding:0 12px;
}
.brand{display:flex;align-items:baseline;gap:7px;flex:0 0 auto}
.brand-mark{color:var(--amber);animation:pulse 2.6s infinite}
.brand-name{letter-spacing:.14em;font-size:13px;color:var(--txt)}
.brand-sub{font-size:10px;letter-spacing:.06em;color:var(--txt-ghost)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.ticker{flex:1;overflow:hidden;height:100%;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker-track{display:flex;align-items:center;height:100%;gap:26px;white-space:nowrap;
  animation:scroll 64s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{font-size:11.5px;letter-spacing:.05em;display:inline-flex;gap:6px;align-items:baseline}
.tk b{font-weight:400;color:var(--txt-dim)}
.tk .up{color:var(--green)} .tk .down{color:var(--red)} .tk .neu{color:var(--txt)}
.tk .amb{color:var(--amber)}

.topbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.clock{font-size:11.5px;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.sess-badge{font-size:10px;letter-spacing:.07em;padding:2.5px 7px;border:1px solid var(--line-hot);color:var(--txt-dim)}
.sess-badge.live{border-color:var(--green);color:var(--green);animation:pulse 2s infinite}

/* ===================== GRID ===================== */
.grid{
  flex:1;min-height:0;
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--data);
  /* the implicit row defaults to auto = max-content, which lets the stage
     grow past the container and pushes the composer off-screen */
  grid-template-rows:minmax(0,1fr);
}

/* ---------- LEFT RAIL ---------- */
.rail{border-right:1px solid var(--line);background:var(--bg-1);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rail-head{display:flex;justify-content:space-between;align-items:center;
  padding:9px 11px 7px;border-bottom:1px solid var(--line)}
.rail-head.mt{border-top:1px solid var(--line)}
.modmap{overflow-y:auto;padding:6px 0;flex:1;min-height:120px}

.phase{padding:10px 11px 4px;font-size:10.5px;letter-spacing:.09em;color:var(--txt-ghost);display:flex;justify-content:space-between}
.phase.open{color:var(--amber)}
.phase .lock{color:var(--red-dim)}

.mod{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:7px;
  padding:6px 11px;border-left:2px solid transparent;cursor:pointer;
  transition:background .12s,border-color .12s;
}
.mod:hover:not(.locked){background:var(--bg-2);border-left-color:var(--amber-dim)}
.mod.active{background:var(--bg-3);border-left-color:var(--amber)}
.mod.locked{cursor:not-allowed;opacity:.34}
.mod .mid{font-size:11px;color:var(--txt-dim);letter-spacing:.06em}
.mod.done .mid{color:var(--green)}
.mod .mname{font-size:12.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod.locked .mname{color:var(--txt-ghost)}
.mod .stars{font-size:10.5px;color:var(--amber);letter-spacing:-.5px}
.mod.boss{border-top:1px solid var(--line);margin-top:3px;padding-top:8px}
.mod.boss .mname{color:var(--red);letter-spacing:.06em}
.mod.boss.done .mname{color:var(--green)}

.toolbtns{display:flex;flex-direction:column;padding:5px 0}
.tool{display:flex;gap:8px;align-items:center;padding:7px 12px;font-size:12.5px;
  color:var(--txt-dim);letter-spacing:.02em;transition:.12s;text-align:left}
.tool:hover{background:var(--bg-2);color:var(--amber)}
.tool .k{color:var(--txt-ghost);font-size:10px;width:20px;font-family:var(--mono)}
.tool.danger:hover{color:var(--red)}

.rail-foot{border-top:1px solid var(--line);max-height:172px;display:flex;flex-direction:column}
.queue-head{padding:8px 11px 5px}
.queue{overflow-y:auto;padding:0 11px 10px}
.qempty{font-size:12px;color:var(--txt-ghost)}
.qitem{font-size:12px;padding:4.5px 0;border-bottom:1px dotted var(--line);
  display:flex;justify-content:space-between;gap:6px}
.qitem span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qitem .due{color:var(--amber);flex:0 0 auto}
.qitem .ok{color:var(--green-dim)}

/* ---------- CENTER STAGE ---------- */
.stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.stage-head{border-bottom:1px solid var(--line);background:var(--bg-1);padding:7px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.beats{display:flex;gap:3px}
.beat{font-size:10.5px;letter-spacing:.06em;padding:3px 7px;color:var(--txt-ghost);
  border:1px solid transparent;transition:.2s}
.beat.on{color:var(--amber);border-color:var(--amber-dim);background:rgba(255,176,0,.07)}
.beat.past{color:var(--green-dim)}
.stage-meta{display:flex;align-items:center;gap:10px;font-size:11.5px}
.prog{width:80px;height:3px;background:var(--bg-3);display:inline-block;overflow:hidden}
.prog-fill{display:block;height:100%;width:0;background:var(--amber);transition:width .45s cubic-bezier(.2,.8,.2,1)}

.feed{flex:1;min-height:0;overflow-y:auto;padding:20px 26px 8px;scroll-behavior:smooth}
.feed-inner{max-width:760px;margin:0 auto}

.msg{margin:0 auto 22px;max-width:730px;animation:rise .34s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.msg-who{font-size:10px;letter-spacing:.13em;color:var(--txt-ghost);margin-bottom:6px;
  font-family:var(--mono)}
.msg.prof .msg-who{color:var(--amber-dim)}
.msg.prof .msg-body{border-left:2px solid var(--amber-dim);padding-left:15px;color:var(--txt)}
.msg.you{max-width:730px}
.msg.you .msg-body{border-left:2px solid var(--line-hot);padding-left:15px;color:var(--txt-dim)}
/* The lecture is prose. Sans, generous leading, a hair wider than the old mono
   so a paragraph reads like a paragraph and not a stack trace. */
.msg-body{white-space:pre-wrap;word-wrap:break-word;
  font-family:var(--sans);font-size:16px;line-height:1.68;letter-spacing:.005em}
.msg-body b,.msg-body strong{color:var(--amber);font-weight:650}
/* numbers stay mono even mid-sentence — that's where alignment earns its keep */
.msg-body code{background:var(--bg-2);padding:1.5px 5px;color:var(--cyan);font-size:14.5px;
  font-family:var(--mono)}
.msg-body pre{background:var(--bg-1);border:1px solid var(--line);padding:12px 14px;
  margin:11px 0;overflow-x:auto;font-size:13px;color:var(--txt);line-height:1.7;
  font-family:var(--mono);white-space:pre}

.msg.ask .msg-body{border-left-color:var(--cyan);color:#eaf2fb;font-size:18px;line-height:1.6}
.msg.ask .msg-who{color:var(--cyan)}
.msg.hit .msg-body{border-left-color:var(--green)}
.msg.hit .msg-who{color:var(--green)}
.msg.miss .msg-body{border-left-color:var(--red)}
.msg.miss .msg-who{color:var(--red)}
.msg.sys{text-align:center;max-width:760px}
.msg.sys .msg-body{border:0;padding:0;color:var(--txt-ghost);font-size:11px;letter-spacing:.14em;
  font-family:var(--mono)}
.msg.sys .msg-body::before{content:"── "} .msg.sys .msg-body::after{content:" ──"}

.diag{display:inline-block;font-size:10.5px;letter-spacing:.07em;padding:2.5px 8px;margin-bottom:6px;
  border:1px solid var(--red-dim);color:var(--red);font-family:var(--mono)}
.diag.soft{border-color:var(--amber-dim);color:var(--amber)}

.contbtn{border:1px solid var(--line-hot);color:var(--txt-dim);padding:7px 20px;
  font-size:12px;letter-spacing:.1em;transition:.15s;margin-top:2px}
.contbtn:hover{border-color:var(--amber);color:var(--amber);background:rgba(255,176,0,.06)}
.startbtn{border:1px solid var(--amber);color:var(--amber);padding:9px 24px;
  font-size:13px;letter-spacing:.1em;margin:2px 8px 0 0;transition:.15s}
.startbtn:hover{background:var(--amber);color:#000;box-shadow:0 0 28px rgba(255,176,0,.35)}
.startbtn.ghost{border-color:var(--line-hot);color:var(--txt-dim)}
.startbtn.ghost:hover{border-color:var(--txt-dim);background:var(--bg-2);color:var(--txt);box-shadow:none}

.card{border:1px solid var(--line);background:var(--bg-1);padding:14px 16px;margin:2px 0 4px}
.card-h{font-size:11px;letter-spacing:.1em;color:var(--amber);margin-bottom:9px}
.card ul{list-style:none;font-size:14.5px;font-family:var(--sans)}
.card li{padding:3px 0 3px 14px;position:relative;color:var(--txt-dim)}
.card li::before{content:"▸";position:absolute;left:0;color:var(--amber-dim)}
.kvs{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:14px}
.kvs .k{color:var(--txt-dim)} .kvs .v{color:var(--green)}

/* composer */
.composer{border-top:1px solid var(--line);background:var(--bg-1);padding:9px 26px 12px}
.composer-hint{max-width:730px;margin:0 auto 6px;font-size:11.5px;color:var(--txt-ghost);
  letter-spacing:.03em;min-height:15px}
.composer-row{max-width:760px;margin:0 auto;display:flex;align-items:flex-end;gap:9px;
  border:1px solid var(--line-hot);background:var(--bg);padding:7px 9px;transition:border-color .18s}
.composer-row:focus-within{border-color:var(--amber);box-shadow:0 0 0 1px rgba(255,176,0,.13)}
.composer.off{opacity:.35;pointer-events:none}
.prompt-sigil{color:var(--amber);padding-bottom:2px}
#input{flex:1;background:none;border:0;outline:0;resize:none;line-height:1.5;
  max-height:132px;font-size:16px;padding:1px 0;font-family:var(--sans)}
#input::placeholder{color:var(--txt-ghost)}
.mic{width:30px;height:26px;display:grid;place-items:center;color:var(--txt-dim);
  border:1px solid var(--line-hot);transition:.15s}
.mic:hover{color:var(--amber);border-color:var(--amber-dim)}
.mic.rec{color:var(--red);border-color:var(--red);animation:pulse 1s infinite}
.send{border:1px solid var(--line-hot);padding:6px 14px;font-size:11.5px;letter-spacing:.07em;color:var(--txt-dim)}
.send:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- RIGHT DATA ---------- */
.data{border-left:1px solid var(--line);background:var(--bg-1);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.data-tabs{display:flex;border-bottom:1px solid var(--line)}
.dtab{flex:1;padding:9px 4px;font-size:11px;letter-spacing:.05em;color:var(--txt-ghost);
  border-bottom:2px solid transparent;transition:.15s}
.dtab:hover{color:var(--txt-dim)}
.dtab.on{color:var(--amber);border-bottom-color:var(--amber);background:var(--bg-2)}
.data-co{padding:9px 13px 5px;font-size:10.5px;letter-spacing:.08em;color:var(--txt-ghost)}
.data-body{flex:1;overflow-y:auto;padding:2px 13px 13px}

.drow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:6px 0;border-bottom:1px dotted var(--line);font-size:13px;position:relative}
.drow .dk{color:var(--txt-dim);letter-spacing:.02em}
.drow .dv{font-variant-numeric:tabular-nums;color:var(--txt)}
.drow.sub .dk{padding-left:11px;color:var(--txt-ghost);font-size:11px}
.drow.total{border-bottom:1px solid var(--line-hot);border-top:1px solid var(--line-hot);margin-top:3px}
.drow.total .dk{color:var(--txt)}
.drow.total .dv{color:var(--amber)}
.drow.neg .dv{color:var(--red)}
.drow.pos .dv{color:var(--green)}
.drow.masked .dv{color:transparent;text-shadow:0 0 9px rgba(201,211,222,.75);user-select:none}
.drow.masked .dv::after{}
.drow.flash{animation:flashrow 1.15s ease-out}
@keyframes flashrow{
  0%{background:rgba(255,176,0,.42);box-shadow:0 0 22px rgba(255,176,0,.28)}
  100%{background:transparent;box-shadow:none}
}
.dsec{font-size:8.5px;letter-spacing:.2em;color:var(--amber-dim);margin:13px 0 4px;
  padding-bottom:3px;border-bottom:1px solid var(--line)}
.dsec:first-child{margin-top:6px}
.dnote{font-size:10px;color:var(--txt-ghost);padding:7px 0 0;line-height:1.55}

.data-alert{border-top:1px solid var(--line);padding:9px 13px;font-size:10px;min-height:44px}
.alert{display:flex;gap:7px;align-items:flex-start;color:var(--red)}
.alert.warn{color:var(--amber)}
.alert .dot{width:6px;height:6px;background:currentColor;border-radius:50%;margin-top:4px;
  flex:0 0 auto;animation:pulse 1.5s infinite}
.alert .txt{line-height:1.45}

/* ===================== OVERLAY PANELS ===================== */
.overlay{position:fixed;inset:0;z-index:900;background:rgba(3,4,6,.82);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:26px}
.overlay.on{display:flex;animation:fade .18s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{background:var(--bg-1);border:1px solid var(--line-hot);width:min(1080px,96vw);
  max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 30px 90px rgba(0,0,0,.75);animation:rise .22s cubic-bezier(.2,.8,.2,1)}
.panel-head{display:flex;justify-content:space-between;align-items:center;
  padding:10px 15px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.panel-title{font-size:10px;letter-spacing:.22em;color:var(--amber)}
.panel-x{font-size:9.5px;letter-spacing:.13em;color:var(--txt-dim)}
.panel-x:hover{color:var(--red)}
.panel-body{overflow:auto;padding:17px 19px}

/* calculators */
.calcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:15px}
.calc{border:1px solid var(--line);background:var(--bg);padding:14px}
.calc h4{font-size:9.5px;letter-spacing:.17em;color:var(--amber);font-weight:400;margin-bottom:3px}
.calc .frm{font-size:10px;color:var(--txt-ghost);margin-bottom:11px}
.sl{margin-bottom:10px}
.sl-top{display:flex;justify-content:space-between;font-size:10.5px;margin-bottom:4px}
.sl-top .n{color:var(--txt-dim)} .sl-top .v{color:var(--txt);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:3px;background:var(--bg-3);appearance:none;outline:0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:var(--amber);
  cursor:pointer;box-shadow:0 0 9px rgba(255,176,0,.55)}
.calc-out{margin-top:11px;border-top:1px solid var(--line);padding-top:9px;
  display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12px}
.calc-out .ck{color:var(--txt-dim)}
.calc-out .cv{color:var(--green);font-variant-numeric:tabular-nums;text-align:right}
.calc-out .cv.bad{color:var(--red)} .calc-out .cv.hot{color:var(--amber)}
.calc-read{margin-top:9px;font-size:10.5px;color:var(--txt-ghost);line-height:1.5;border-left:2px solid var(--line-hot);padding-left:9px}

/* cheat sheet */
.sheet{columns:2;column-gap:26px}
@media(max-width:820px){.sheet{columns:1}}
.sblock{break-inside:avoid;margin-bottom:17px;border:1px solid var(--line);padding:12px 14px;background:var(--bg)}
.sblock h4{font-size:9.5px;letter-spacing:.17em;color:var(--amber);font-weight:400;margin-bottom:8px}
.sblock .f{font-size:12px;padding:3px 0;border-bottom:1px dotted var(--line);
  display:flex;justify-content:space-between;gap:12px}
.sblock .f em{font-style:normal;color:var(--txt-ghost);font-size:10px;text-align:right}
.sblock .note{font-size:10.5px;color:var(--txt-ghost);margin-top:8px;line-height:1.5}

/* statements explorer */
.stmt-tabs{display:flex;gap:5px;margin-bottom:14px}
.stmt-tabs button{border:1px solid var(--line);padding:5px 13px;font-size:10px;
  letter-spacing:.12em;color:var(--txt-dim)}
.stmt-tabs button.on{border-color:var(--amber);color:var(--amber);background:rgba(255,176,0,.07)}
.stmt-grid{display:grid;grid-template-columns:1fr 268px;gap:19px}
@media(max-width:800px){.stmt-grid{grid-template-columns:1fr}}
.srow{display:flex;justify-content:space-between;padding:6px 9px;font-size:12.5px;
  border-bottom:1px dotted var(--line);cursor:pointer;transition:.12s}
.srow:hover{background:var(--bg-3)}
.srow.on{background:rgba(255,176,0,.09);border-left:2px solid var(--amber)}
.srow .sv{font-variant-numeric:tabular-nums}
.srow.tot{border-top:1px solid var(--line-hot);font-weight:600}
.srow.tot .sv{color:var(--amber)}
.srow .sv.neg{color:var(--red)} .srow .sv.pos{color:var(--green)}
.sexpl{border:1px solid var(--line);background:var(--bg);padding:14px;font-size:11.5px;
  line-height:1.62;color:var(--txt-dim);align-self:start;position:sticky;top:0}
.sexpl h5{color:var(--amber);font-size:9.5px;letter-spacing:.17em;font-weight:400;margin-bottom:8px}
.sexpl b{color:var(--txt);font-weight:600}

/* drill */
.drill{max-width:660px;margin:0 auto;text-align:center}
.drill-q{font-size:15px;color:#e6eef7;margin:26px 0 18px;line-height:1.55;text-align:left;
  border-left:2px solid var(--cyan);padding-left:14px}
.drill-in{display:flex;gap:9px;border:1px solid var(--line-hot);background:var(--bg);padding:8px 11px}
.drill-in input{flex:1;background:none;border:0;outline:0;font-size:14px}
.drill-fb{margin-top:15px;text-align:left;font-size:12.5px;line-height:1.6;padding-left:14px;
  border-left:2px solid var(--line-hot);color:var(--txt-dim);white-space:pre-wrap}
.drill-fb.hit{border-color:var(--green);color:var(--txt)}
.drill-fb.miss{border-color:var(--red)}
.drill-score{display:flex;justify-content:center;gap:22px;font-size:10.5px;color:var(--txt-dim);
  border-bottom:1px solid var(--line);padding-bottom:11px}
.drill-score b{color:var(--amber);font-weight:400}

/* canvas */
.canvas-wrap{display:flex;flex-direction:column;gap:9px;height:min(74vh,660px)}
.canvas-tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ctool{border:1px solid var(--line);padding:4px 11px;font-size:10px;letter-spacing:.1em;color:var(--txt-dim)}
.ctool:hover{border-color:var(--amber);color:var(--amber)}
.ctool.on{border-color:var(--amber);color:var(--amber);background:rgba(255,176,0,.09)}
.swatch{width:17px;height:17px;border:1px solid var(--line-hot);cursor:pointer}
.swatch.on{outline:1px solid var(--txt);outline-offset:2px}
.canvas-stage{flex:1;position:relative;border:1px solid var(--line);background:#0a0c0f;overflow:hidden}
.canvas-guide{position:absolute;inset:0;pointer-events:none;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:26px 26px}
.cg-title{grid-column:1/3;padding:9px 13px;font-size:9.5px;letter-spacing:.2em;
  color:var(--txt-ghost);border-bottom:1px solid rgba(255,255,255,.05)}
.cg-l,.cg-r{padding:11px 14px;font-size:11px;color:var(--txt-ghost);line-height:1.9;white-space:pre-wrap}
.cg-r{border-left:1px solid rgba(255,255,255,.05)}
.cg-l .h,.cg-r .h{font-size:8.5px;letter-spacing:.18em;color:var(--amber-dim);display:block;margin-bottom:7px}
.cg-b{grid-column:1/3;padding:9px 14px;font-size:9.5px;letter-spacing:.15em;
  color:var(--txt-ghost);border-top:1px solid rgba(255,255,255,.05)}
#canvasInk{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.tool-sep{width:1px;height:17px;background:var(--line-hot);margin:0 3px}
.drawonly{display:inline-flex;gap:7px;align-items:center}
.drawonly[hidden]{display:none}
.nstat{font-size:9.5px;letter-spacing:.16em;color:var(--green);opacity:.8;min-width:52px}

/* typing pad */
.note-pane{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 292px;
  background:#0a0c0f;z-index:2}
.note-pane[hidden]{display:none}
#noteText{display:block;width:100%;height:100%;min-height:0;resize:none;border:0;outline:0;
  background:transparent;color:var(--txt);padding:18px 20px;
  font-family:var(--mono);font-size:14.5px;line-height:1.85;letter-spacing:.01em;
  background-image:linear-gradient(transparent 26.8px,rgba(255,255,255,.035) 26.8px);
  background-size:100% 26.8px;background-attachment:local;caret-color:var(--amber)}
#noteText::placeholder{color:var(--txt-ghost);opacity:.65}
.note-ref{border-left:1px solid var(--line);overflow-y:auto;background:rgba(255,255,255,.014);
  padding:0 0 14px}
.nr-title{padding:10px 14px;font-size:9.5px;letter-spacing:.2em;color:var(--txt-ghost);
  border-bottom:1px solid var(--line);position:sticky;top:0;background:#0b0d10}
.nr-b{padding:13px 15px 4px;font-size:11.5px;line-height:1.85;color:var(--txt-dim);
  white-space:pre-wrap;font-family:var(--mono)}
.nr-b .h{display:block;margin-bottom:7px;font-size:8.5px;letter-spacing:.18em;color:var(--amber-dim)}
@media(max-width:1080px){.note-pane{grid-template-columns:minmax(0,1fr)}.note-ref{display:none}}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,26px);z-index:1200;
  background:var(--bg-2);border:1px solid var(--amber);color:var(--amber);
  padding:9px 19px;font-size:10.5px;letter-spacing:.11em;opacity:0;
  transition:.28s cubic-bezier(.2,.8,.2,1);pointer-events:none;max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:var(--red);color:var(--red)}
.toast.good{border-color:var(--green);color:var(--green)}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1180px){
  :root{--rail:196px;--data:272px}
  .feed{padding:16px 18px 8px}
  .composer{padding:9px 18px 12px}
}
@media(max-width:900px){
  .grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .rail{display:none}
  .data{border-left:0;border-top:1px solid var(--line);max-height:36vh}
  .beats{display:none}
}

/* ===================== SAY IT SIMPLER =====================
   Deliberately quiet until asked for. The button sits under the lecture in
   cyan (the same colour the app already uses for "a question is live"), and
   the panel that opens is set slightly larger and looser than the lecture
   above it — the simple version should feel like relief, not like a footnote. */
.plainwrap{margin-top:14px}
.plainbtn{
  border:1px dashed var(--line-hot);color:var(--cyan);
  padding:6px 14px;font-size:11.5px;letter-spacing:.06em;
  font-family:var(--mono);transition:.15s;opacity:.8;
}
.plainbtn:hover{border-color:var(--cyan);background:rgba(56,189,248,.07);opacity:1}
.plainbtn.on{border-style:solid;background:rgba(56,189,248,.09);opacity:1}

.plain{
  margin-top:12px;border-left:2px solid var(--cyan);
  background:linear-gradient(90deg,rgba(56,189,248,.05),transparent 70%);
  padding:14px 16px;animation:rise .3s cubic-bezier(.2,.8,.2,1);
}
.plain-s{
  font-family:var(--sans);font-size:16.5px;line-height:1.72;color:#e8f1fa;
  white-space:pre-wrap;
}
.plain-row{
  margin-top:13px;padding-top:12px;border-top:1px dotted var(--line);
  font-family:var(--sans);font-size:15.5px;line-height:1.65;color:var(--txt);
}
.plain-k{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  color:var(--txt-ghost);margin-bottom:5px;
}
.plain-row.say{color:var(--green);font-weight:500}
.plain-row.say .plain-k{color:var(--green-dim)}

/* ===================== GO DEEPER =====================
   The opposite door. SAY IT SIMPLER drops the floor; this raises the ceiling.
   Violet so the eye never confuses the two — cyan means "make it easier",
   violet means "there is more here than I just told you". Set in the same
   sans as the lecture but a touch tighter, because this is material you read
   slowly rather than material you read for relief. */
.doors{display:flex;gap:9px;flex-wrap:wrap}
.plainbtn.deep{color:var(--violet)}
.plainbtn.deep:hover{border-color:var(--violet);background:rgba(167,139,250,.08)}
.plainbtn.deep.on{border-style:solid;background:rgba(167,139,250,.10)}

.plain.deepbox{
  border-left-color:var(--violet);
  background:linear-gradient(90deg,rgba(167,139,250,.055),transparent 72%);
}
.plain.deepbox .plain-row{
  font-size:15.5px;line-height:1.7;
  margin-top:15px;padding-top:14px;
}
.plain.deepbox .plain-row:first-child{margin-top:0;padding-top:0;border-top:0}
.plain.deepbox .plain-k{color:#6d5aa8}
.plain.deepbox b{color:#d7c9ff;font-weight:600}
.plain.deepbox i{color:#bda9f5;font-style:italic}
.msg-body i{font-style:italic;color:#e3ecf6}
.plain.deepbox code{
  font-family:var(--mono);font-size:13.5px;
  background:rgba(167,139,250,.10);color:#cbb8fb;
  padding:1px 6px;border:1px solid rgba(167,139,250,.18);
}
.plain-row.edge{color:#e6ddfb}
.plain-row.edge .plain-k{color:var(--violet);opacity:.85}
.plain-row.useit{color:var(--amber);font-weight:500}
.plain-row.useit .plain-k{color:var(--amber-dim)}
.plain-row.useit code{background:rgba(255,176,0,.10);border-color:rgba(255,176,0,.2);color:#ffd479}

/* ============================================================================
   THE COLOUR CODE
   Five meanings, five hues, applied automatically by js/highlight.js to every
   word of prose in the app. The rule the whole system rests on: a colour is
   only worth using if it MEANS something and the reader has been told what.
   Hence the permanent key in the rail and the card on the home screen.

     green   money coming in
     red     money going out
     amber   a metric or a formula
     cyan    a term being defined right now  (fires once, then settles)
     violet  a trap
   ========================================================================= */

.hl{
  padding:.5px 3px;margin:0 -1px;border-radius:2px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  transition:background .18s,color .18s;
}

.hl-in    {color:var(--in-fg);   background:var(--in-bg);   box-shadow:inset 0 -1px 0 var(--in-ed)}
.hl-out   {color:var(--out-fg);  background:var(--out-bg);  box-shadow:inset 0 -1px 0 var(--out-ed)}
.hl-metric{color:var(--met-fg);  background:var(--met-bg);  box-shadow:inset 0 -1px 0 var(--met-ed)}
.hl-trap  {color:var(--trap-fg); background:var(--trap-bg); box-shadow:inset 0 -1px 0 var(--trap-ed)}
.hl-fig   {color:var(--fig-fg);  background:rgba(255,255,255,.045)}

/* Figures carry a touch more weight than the words around them — they are the
   thing the sentence is actually about. */
.hl-num{font-family:var(--mono);font-size:.94em;font-weight:600;letter-spacing:.01em}
.hl-num.hl-in {text-shadow:0 0 14px rgba(33,255,163,.35)}
.hl-num.hl-out{text-shadow:0 0 14px rgba(255,95,109,.35)}

/* A number mid-count. Slightly dimmed and tabular so the width doesn't jitter
   while the digits roll. */
.hl-ticking{font-variant-numeric:tabular-nums;opacity:.72}

/* First appearance of a concept. Overrides its category colour for one beat,
   glows, and then hands back to the steady colour via the animation's own
   fill — the word is cyan while it's being taught and amber forever after. */
.hl-def{
  color:var(--def-fg)!important;background:var(--def-bg)!important;
  box-shadow:inset 0 -1px 0 var(--def-ed)!important;
  animation:defglow 2.9s cubic-bezier(.3,.7,.3,1) both;
}
@keyframes defglow{
  0%   {box-shadow:0 0 0 0 rgba(79,201,255,.55), inset 0 -1px 0 var(--def-ed);
        background:rgba(79,201,255,.32)}
  14%  {box-shadow:0 0 16px 3px rgba(79,201,255,.42), inset 0 -1px 0 var(--def-ed);
        background:rgba(79,201,255,.26)}
  55%  {box-shadow:0 0 6px 0 rgba(79,201,255,.14), inset 0 -1px 0 var(--def-ed)}
  100% {box-shadow:inset 0 -1px 0 var(--def-ed);background:var(--def-bg)}
}

/* Bold inside prose is the professor's own emphasis — keep it amber, but let
   a highlighted term inside it keep its own meaning. */
.msg-body b .hl,.msg-body .hl b{color:inherit}

/* The question being asked gets the strongest treatment in the app — it's the
   moment you're supposed to be looking at. */
.msg.ask .hl{padding:1px 4px}
.msg.ask .hl-num{font-size:1em}

/* Correct answers land with a green sweep rather than a colour change alone. */
.msg.hit .msg-body{animation:hitflash 1.15s cubic-bezier(.2,.8,.2,1) both}
@keyframes hitflash{
  0%  {background:linear-gradient(90deg,rgba(33,255,163,.20),transparent 62%);
       box-shadow:-2px 0 22px rgba(33,255,163,.30)}
  100%{background:linear-gradient(90deg,rgba(33,255,163,0),transparent 62%);
       box-shadow:none}
}
.msg.miss .msg-body{animation:missflash .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes missflash{
  0%  {background:linear-gradient(90deg,rgba(255,95,109,.16),transparent 58%)}
  100%{background:linear-gradient(90deg,rgba(255,95,109,0),transparent 58%)}
}

/* -------------------------------------------------------------- THE KEY */

/* Permanent, in the rail. Small enough to ignore, always there when you need
   to check what a colour meant. */
.tiny{font-size:8.5px;letter-spacing:.08em}
.legend{padding:7px 11px 9px;display:flex;flex-direction:column;gap:4px}
.lg{display:flex;align-items:center;gap:7px;font-size:10.5px;line-height:1.35}
.lgsw{width:9px;height:9px;flex:0 0 9px;border-radius:2px}
.lgt{background:none!important;box-shadow:none!important;padding:0}
.lgsw.hl-in    {background:var(--in-fg);   box-shadow:0 0 7px rgba(33,255,163,.5)}
.lgsw.hl-out   {background:var(--out-fg);  box-shadow:0 0 7px rgba(255,95,109,.5)}
.lgsw.hl-metric{background:var(--met-fg);  box-shadow:0 0 7px rgba(255,185,43,.5)}
.lgsw.hl-def   {background:var(--def-fg);  box-shadow:0 0 7px rgba(79,201,255,.6);animation:none}
.lgsw.hl-trap  {background:var(--trap-fg); box-shadow:0 0 7px rgba(183,155,255,.5)}
.lgt.hl-def{animation:none;color:var(--def-fg)!important}

/* The full card, on the home screen, with an example of each. First thing you
   meet — you're told the code before you're asked to read in it. */
.keycard{
  margin-top:18px;border:1px solid var(--line-hot);background:var(--bg-1);
  padding:13px 15px 14px;
}
.keycard-h{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--txt-ghost);
  margin-bottom:11px;
}
.keyrow{
  display:grid;grid-template-columns:11px minmax(0,1fr) minmax(0,1.1fr);
  gap:10px;align-items:baseline;padding:4px 0;
}
.keysw{width:11px;height:11px;border-radius:2px;transform:translateY(1px)}
.keysw.hl-in    {background:var(--in-fg);   box-shadow:0 0 9px rgba(33,255,163,.55)}
.keysw.hl-out   {background:var(--out-fg);  box-shadow:0 0 9px rgba(255,95,109,.55)}
.keysw.hl-metric{background:var(--met-fg);  box-shadow:0 0 9px rgba(255,185,43,.55)}
.keysw.hl-def   {background:var(--def-fg);  box-shadow:0 0 9px rgba(79,201,255,.65);animation:none}
.keysw.hl-trap  {background:var(--trap-fg); box-shadow:0 0 9px rgba(183,155,255,.55)}
.keywhat{
  font-family:var(--sans);font-size:14px;font-weight:500;
  background:none!important;box-shadow:none!important;padding:0;
}
.keywhat.hl-def{animation:none;color:var(--def-fg)!important}
.keyeg{
  font-family:var(--mono);font-size:11px;color:var(--txt-ghost);
  letter-spacing:.02em;
}
@media(max-width:900px){
  .keyrow{grid-template-columns:11px minmax(0,1fr)}
  .keyeg{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hl-def{animation:none}
  .msg.hit .msg-body,.msg.miss .msg-body{animation:none}
}

/* ==========================================================================
   THE AUDIO READER
   Transport bar sits between the feed and the composer, so it is always
   reachable but never covers the thing being read.
   ========================================================================== */

.rdbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 26px;border-top:1px solid var(--line);background:var(--bg-1);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.rdbar.live{background:linear-gradient(90deg,rgba(79,201,255,.10),rgba(79,201,255,.02));
  border-top-color:rgba(79,201,255,.35)}
.rdb{background:var(--bg-2);border:1px solid var(--line);color:var(--txt-dim);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  padding:4px 9px;cursor:pointer;transition:.14s;line-height:1.4}
.rdb:hover{border-color:var(--cyan);color:var(--cyan)}
.rdb.big{font-size:13px;padding:3px 13px;color:var(--cyan);border-color:rgba(79,201,255,.4)}
.rdbar.live .rdb.big{background:rgba(79,201,255,.16);color:#bfe9ff}
.rdb.auto.on{background:rgba(33,255,163,.14);border-color:var(--green);color:var(--green)}
.rdname{color:var(--txt-ghost);font-size:10.5px;cursor:pointer;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px dotted var(--line-hot)}
.rdname:hover{color:var(--cyan)}
.rdrate{display:flex;align-items:center;gap:6px;color:var(--txt-ghost);font-size:10px;margin-left:auto}
.rdrate input[type=range]{width:88px;accent-color:var(--cyan);background:transparent}
.rdrate span{color:var(--txt-dim);min-width:34px}

/* the bubble being read: cyan edge + a progress line under the label */
.msg.reading .msg-body{border-left-color:var(--cyan)!important;
  background:linear-gradient(90deg,rgba(79,201,255,.055),transparent 62%)}
.msg.reading .msg-who{color:var(--cyan)}
.msg.reading .msg-who::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;
  width:var(--rd,0%);background:var(--cyan);box-shadow:0 0 6px rgba(79,201,255,.8);
  transition:width .18s linear}
.msg-who{position:relative;display:flex;align-items:center;gap:9px}

.rd-btn{background:transparent;border:1px solid var(--line);color:var(--txt-ghost);
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;padding:1px 6px;
  cursor:pointer;opacity:0;transition:.16s;line-height:1.5}
.msg:hover .rd-btn,.msg.reading .rd-btn{opacity:1}
.rd-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.msg.reading .rd-btn{border-color:var(--cyan);color:var(--cyan)}
.rd-btn span{font-size:8px}

/* -------------------------------------------------------------- the panel */
.rd-panel{display:flex;flex-direction:column;gap:14px}
.rd-top{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.rd-toggle{flex:1 1 300px;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--bg-1);border:1px solid var(--line);color:var(--txt-dim);
  padding:12px 14px;cursor:pointer;transition:.16s;font-family:var(--sans)}
.rd-toggle:hover{border-color:var(--cyan)}
.rd-toggle.on{border-color:var(--green);background:rgba(33,255,163,.07)}
.rd-dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;
  border:1.5px solid var(--line-hot);transition:.16s}
.rd-toggle.on .rd-dot{background:var(--green);border-color:var(--green);
  box-shadow:0 0 9px rgba(33,255,163,.7)}
.rd-toggle b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--txt)}
.rd-toggle.on b{color:var(--green)}
.rd-toggle em{display:block;font-style:normal;font-size:12px;color:var(--txt-ghost);margin-top:3px}
.rd-sliders{flex:1 1 240px;display:flex;flex-direction:column;justify-content:center;gap:9px;
  background:var(--bg-1);border:1px solid var(--line);padding:12px 14px}
.rd-sliders label{display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--txt-ghost)}
.rd-sliders input[type=range]{flex:1;accent-color:var(--cyan);background:transparent}
.rd-sliders label span{min-width:38px;color:var(--amber);text-align:right}

.rd-head2{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:5px}
.rd-rescan{background:var(--bg-2);border:1px solid var(--line);color:var(--txt-dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:3px 9px;cursor:pointer}
.rd-rescan:hover{border-color:var(--amber);color:var(--amber)}

.rd-list{max-height:290px;overflow-y:auto;border:1px solid var(--line);background:var(--bg-1)}
.rd-tier{display:flex;align-items:baseline;gap:9px;padding:8px 12px 5px;
  background:var(--bg-2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
.rd-tier span{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;color:var(--amber)}
.rd-tier em{font-style:normal;font-size:11px;color:var(--txt-ghost)}
.rd-v{display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.03);transition:.12s}
.rd-v:hover{background:var(--bg-2)}
.rd-v.on{background:rgba(79,201,255,.09)}
.rd-pick{color:var(--line-hot);font-size:11px;width:11px}
.rd-v.on .rd-pick{color:var(--cyan)}
.rd-vn{flex:1;font-size:13.5px;color:var(--txt-dim)}
.rd-v.on .rd-vn{color:#cdeaff}
.rd-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--txt-ghost)}
.rd-prev{background:transparent;border:1px solid var(--line);color:var(--txt-ghost);
  font-family:var(--mono);font-size:9px;letter-spacing:.11em;padding:2px 7px;cursor:pointer}
.rd-prev:hover{border-color:var(--green);color:var(--green)}
.rd-empty{padding:18px;color:var(--txt-ghost);font-size:13px}

.rd-how{border:1px solid var(--line);border-left:2px solid var(--amber-dim);
  background:var(--bg-1);padding:14px 16px;font-size:13.5px;line-height:1.62;color:var(--txt-dim)}
.rd-howhead{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--amber);margin-bottom:9px}
.rd-how p{margin:0 0 10px}
.rd-how b{color:var(--txt)}
.rd-os{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--cyan);
  margin:12px 0 5px;padding-top:9px;border-top:1px solid var(--line)}
.rd-how ol{margin:0 0 4px;padding-left:20px}
.rd-how li{margin-bottom:4px}
.rd-note{font-size:12.5px;color:var(--txt-ghost);margin-top:12px!important;
  padding-top:10px;border-top:1px solid var(--line)}

@media(max-width:900px){
  .rdbar{padding:6px 18px}
  .rdrate{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .msg.reading .msg-who::after{transition:none}
}
.rd-warn{border:1px solid rgba(255,185,43,.35);border-left:2px solid var(--amber);
  background:rgba(255,185,43,.06);padding:11px 14px;font-size:13.5px;line-height:1.6;color:var(--txt-dim)}
.rd-warn b{color:var(--amber)}
.rd-warn i{color:var(--cyan);font-style:normal}
.rd-h2r{display:flex;gap:6px}
.rd-auto{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;color:var(--green);
  border:1px solid rgba(33,255,163,.4);background:rgba(33,255,163,.09);padding:1px 6px}
.rdname.picked::before{content:"✦ ";color:var(--green)}