/* Neural scaling law lesson. All rules scoped under .nsl-* */

/* On a short phone the sheet reaches into the scene, so the two scenes that
   grow while the user taps keep clear of it. */
@media (max-height: 700px) { #scene > .nsl-runs { margin-bottom: 54px; } }

.nsl-runs .cap, .nsl-chart .cap, .nsl-bets .cap, .nsl-split .cap {
  font-size: 12px; font-weight: 700;
  color: var(--dim); padding-left: 2px; margin-bottom: 8px;
}

/* ---------- 1. one row per run ---------- */
.nsl-runs .rows { display: flex; flex-direction: column; gap: 11px; }
.nsl-runs .rw { display: flex; flex-direction: column; gap: 5px; animation: cardIn .24s both; }
.nsl-runs .tp { display: flex; align-items: baseline; gap: 9px; }
.nsl-runs .lb { font-size: 12.5px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.nsl-runs .cut { font-size: 12px; font-weight: 800; color: var(--mint); letter-spacing: .02em; white-space: nowrap; }
.nsl-runs .pv { margin-left: auto; font-family: var(--mono); font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.nsl-runs .tr { height: 12px; border-radius: 999px; background: #06080f; overflow: hidden; }
.nsl-runs .tr i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.nsl-runs .rw.lit .pv { color: var(--gold); text-shadow: 0 0 14px rgba(252,192,80,.5); }
.nsl-runs .rw.lit .tr i { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }

/* ---------- 2. the chart ---------- */
.nsl-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.nsl-chart .ax { stroke: var(--line-strong); stroke-width: 1; }
.nsl-chart .gl { stroke: rgba(234,227,215,.09); stroke-width: 1; }
.nsl-chart .yl { fill: var(--dim); font: 700 11px var(--mono); }
.nsl-chart .xc { fill: var(--dim); font: 700 11px var(--sans); }
.nsl-chart .pt circle { fill: var(--violet-bright); stroke: var(--bg); stroke-width: 1.5; }
.nsl-chart .pt.in circle { animation: nslDot .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes nslDot { from { r: 0; } }
.nsl-chart .pt.lit circle { fill: var(--gold); stroke-width: 2; filter: drop-shadow(0 0 7px rgba(252,192,80,.85)); }
.nsl-chart .fit, .nsl-chart .ext { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.nsl-chart .fit.on { opacity: 1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: nslDash .8s ease-out forwards; }
.nsl-chart .ext { stroke: var(--gold); stroke-dasharray: 5 4; }
.nsl-chart .ext.on { opacity: 1; animation: nslFade .6s both; }
@keyframes nslDash { to { stroke-dashoffset: 0; } }
@keyframes nslFade { from { opacity: 0; } }
.nsl-chart .rule line { stroke: var(--gold-deep); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.nsl-chart .rule text { fill: var(--gold-deep); font: 700 11px var(--sans); }
.nsl-chart .tg { fill: var(--gold); font: 700 11px var(--mono); animation: nslFade .3s both; }
.nsl-chart .ray { fill: none; stroke: var(--violet-bright); stroke-width: 2; stroke-dasharray: 4 4; }
.nsl-chart .ray.spent { opacity: .25; }
.nsl-chart .tip { fill: var(--violet-bright); stroke: var(--bg); stroke-width: 2; }

/* ---------- 3. one budget, size against text ---------- */
.nsl-bud { display: flex; flex-direction: column; gap: 8px; }
.nsl-bud .br { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.nsl-bud .br b { font: 600 13px var(--mono); color: var(--text); }
.nsl-bud .br i { grid-column: 1 / -1; height: 12px; border-radius: 999px; background: #06080f; overflow: hidden; }
.nsl-bud .br u { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .15s linear; }
.nsl-bud .a u { background: linear-gradient(90deg, var(--violet-deep), var(--violet-bright)); }
.nsl-bud .b u { background: linear-gradient(90deg, #35507A, #7FA8E0); }
.nsl-cap { font-size: 12px; font-weight: 700; color: var(--dim); margin: 12px 0 4px; }
.nsl-split svg { width: 100%; height: auto; display: block; overflow: visible; }
.nsl-split .base { stroke: var(--line-strong); stroke-width: 1; }
.nsl-split .gh { fill: var(--violet); opacity: .28; }
.nsl-split .cur { fill: var(--violet-bright); }
.nsl-split .curve { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.nsl-split .curve.on { opacity: 1; stroke-dasharray: 460; stroke-dashoffset: 460; animation: nslDash .8s ease-out forwards; }
.nsl-split .mk { animation: nslFade .3s both; }
.nsl-split .mk text { font: 700 11.5px var(--sans); }
.nsl-split .mk.past circle { fill: var(--dim); stroke: var(--bg); stroke-width: 2; }
.nsl-split .mk.past text { fill: var(--dim); }
.nsl-split .mk.best circle { fill: var(--gold); stroke: var(--bg); stroke-width: 2; filter: drop-shadow(0 0 7px rgba(252,192,80,.85)); }
.nsl-split .mk.best text { fill: var(--gold); }

/* ---------- 5. two bets, one with a floor ---------- */
.nsl-bets .bt { padding: 11px 13px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; transition: border-color .3s; }
.nsl-bets .bt + .bt { margin-top: 10px; }
.nsl-bets .bt.stuck { border-color: var(--red); }
.nsl-bets .bt.nudge { animation: shake .4s; }
.nsl-bets .tx { font-family: var(--serif); font-size: 15.5px; line-height: 1.25; color: var(--dim); }
.nsl-bets .tx .bl { color: #fff; font-weight: 700; border-bottom: 2px solid var(--violet-bright); }
.nsl-bets .mt { display: flex; align-items: center; gap: 9px; }
.nsl-bets .mt i { flex: 1; height: 13px; border-radius: 999px; background: #06080f; overflow: hidden; }
.nsl-bets .mt i b { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.nsl-bets .mt .pv { font-family: var(--mono); font-size: 13px; color: var(--violet-bright); font-variant-numeric: tabular-nums; }
.nsl-bets .bt.stuck .mt i b { background: linear-gradient(90deg, #8f2f2f, var(--red)); }
.nsl-bets .bt.stuck .mt .pv { color: #FF8A8A; }

@media (max-height: 700px) {
  .nsl-runs .rows { gap: 8px; }
  .nsl-cap { margin-top: 6px; }
  .nsl-runs .tr { height: 10px; }
  .nsl-runs .pv { font-size: 15px; }
  .nsl-bets .bt { gap: 7px; padding: 9px 12px; }
  .nsl-bets .bt + .bt { margin-top: 8px; }
  .nsl-bets .tx { font-size: 14.5px; }
}

/* ---------- 4. digits against whole answers ---------- */
.nsl-skill { display: flex; flex-direction: column; gap: 8px; }
.nsl-sum { text-align: center; font-family: var(--mono); font-size: 17px; color: var(--dim); padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.nsl-sum .ans { display: inline-block; min-width: 86px; color: var(--text); }
.nsl-sum .ans.ok { color: var(--mint); } .nsl-sum .ans.no { color: #FF9C9C; }
.nsl-skill svg { width: 100%; height: auto; display: block; overflow: visible; }
.nsl-skill .ax { stroke: var(--line-strong); stroke-width: 1; }
.nsl-skill .yl { fill: var(--dim); font: 700 11px var(--mono); }
.nsl-skill .xc { fill: var(--dim); font: 700 11px var(--sans); }
.nsl-skill .dg, .nsl-skill .wh { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nsl-skill .dg { stroke: var(--violet-bright); } .nsl-skill .dgp { fill: var(--violet-bright); }
.nsl-skill .wh { stroke: var(--gold); } .nsl-skill .whp { fill: var(--gold); }
.nsl-key { display: flex; justify-content: center; gap: 16px; font-size: 13px; font-weight: 700; color: var(--dim); }
.nsl-key span { display: inline-flex; align-items: center; gap: 6px; }
.nsl-key i { width: 14px; height: 4px; border-radius: 2px; }
.nsl-key .k1 i { background: var(--violet-bright); } .nsl-key .k2 i { background: var(--gold); }