/* Bronte Nowcaster — display card.
   Brand green #52CF8E is taken from the sudo-rndm.ai mark.
   Data palette is fixed so the science reads consistently:
   Bronte blue + amber threshold contour, LightningCast orange (dashed),
   persistence grey, observed strikes red. */
:root{
  --brand:#52cf8e; --brand-dim:#2f8f61;
  --accu:#2f7fd0; --amber:#f5a623; --lc:#e8622a; --pers:#8a8a8a; --truth:#c0392b;
  --ok:#52cf8e;
  --bg:#070c12; --panel:rgba(22,32,44,.72); --panel2:rgba(12,19,27,.66);
  --line:rgba(120,160,200,.16); --ink:#e6eef7; --muted:#93a7bd;
  --radius:16px; --pad:22px;
  --shadow:0 18px 46px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --glow:0 0 34px rgba(82,207,142,.30);
  --font:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --label-tt:uppercase; --label-ls:.8px; --label-font:var(--font);
  --canvas-bg:#050a10; --grid:rgba(255,255,255,.03);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font)}
body{
  background:
    radial-gradient(900px 520px at 14% -8%, rgba(82,207,142,.13), transparent 60%),
    radial-gradient(760px 480px at 92% 4%, rgba(47,127,208,.13), transparent 62%), var(--bg);}

.hdr{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:14px 24px;border-bottom:1px solid var(--line);background:var(--panel2);
  backdrop-filter:blur(9px)}
.hdr-left{display:flex;gap:15px;align-items:center;min-width:0}
.mark{width:42px;height:42px;object-fit:contain;filter:drop-shadow(var(--glow))}
h1{margin:0;font-size:20px;font-weight:680;letter-spacing:-.2px}
.tagline{font-size:12.5px;color:var(--muted);margin-top:2px}
.dot{opacity:.55}
.hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.pill{padding:3px 11px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.7px;
  color:var(--brand);border:1px solid var(--brand-dim);background:rgba(82,207,142,.10)}
.stamp{font-size:11px;color:var(--muted)}
.banner{border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;
  padding:8px 24px;background:var(--panel2)}

main{display:grid;grid-template-columns:1fr 336px;gap:18px;padding:18px 24px}
.left{min-width:0}
.controls{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:13px}
.lbl{display:flex;flex-direction:column;gap:5px;font-size:10.5px;color:var(--muted);
  text-transform:var(--label-tt);letter-spacing:var(--label-ls);font-family:var(--label-font)}
select{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius);padding:8px 11px;font-size:13px;min-width:250px;font-family:var(--font)}
.layers{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
.ly{display:flex;align-items:center;gap:7px;background:var(--panel);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;font-size:12.5px;
  cursor:pointer;font-family:var(--font)}
.ly.on{color:var(--ink);border-color:var(--brand-dim);box-shadow:inset 0 0 0 1px rgba(82,207,142,.12)}
.sw{width:11px;height:11px;border-radius:2px}
.sw.accu{background:var(--accu)}.sw.lc{background:var(--lc)}
.sw.pers{background:var(--pers)}.sw.truth{background:var(--truth)}
.dash{color:var(--lc);letter-spacing:-1px;font-weight:700;margin-left:2px}

.canvas-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow)}
.cv-head{display:flex;justify-content:space-between;gap:14px;margin-bottom:10px;font-size:11.5px}
.ep{font-family:var(--mono);color:var(--brand);opacity:.9}
canvas{width:100%;max-width:600px;height:auto;display:block;margin:0 auto;
  image-rendering:pixelated;border-radius:calc(var(--radius) - 4px);background:var(--canvas-bg)}
.cv-foot{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--muted)}
.scale{font-family:var(--mono);font-size:11px}
.muted{color:var(--muted)}
.timeline{display:flex;align-items:center;gap:15px;margin-top:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow)}
.play{background:transparent;color:var(--ink);border:1px solid var(--brand-dim);
  border-radius:var(--radius);padding:8px 15px;cursor:pointer;font-size:13px;min-width:92px;
  font-family:var(--font)}
.play:hover{background:rgba(82,207,142,.12)}
input[type=range]{flex:1;accent-color:var(--brand)}
.leadnow{font-variant-numeric:tabular-nums;font-weight:700;min-width:76px;text-align:right;
  font-family:var(--mono)}

.rail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--pad);box-shadow:var(--shadow);align-self:start}
.rail h2{font-size:10.5px;text-transform:var(--label-tt);letter-spacing:var(--label-ls);
  color:var(--brand);margin:0 0 10px;font-family:var(--label-font)}
.rail h2 i,.kv i{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0;
  font-weight:400;font-family:var(--font)}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;font-size:13px}
.kv b{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap;font-family:var(--mono)}
hr{border:0;border-top:1px solid var(--line);margin:15px 0}
.note{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5}
.allclear{border:1px solid var(--line);border-radius:var(--radius);padding:13px;background:var(--panel2)}
.aclamp{font-weight:750;font-size:15px;letter-spacing:.2px;font-family:var(--mono)}
.aclamp.hold{color:var(--lc)}
.aclamp.clear{color:var(--ok);text-shadow:0 0 18px rgba(82,207,142,.45)}
.acdetail{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.55}
.foot{display:flex;align-items:center;gap:14px;padding:12px 24px;border-top:1px solid var(--line);
  color:var(--muted);font-size:11.5px;background:var(--panel2)}
.wm{height:17px;object-fit:contain;opacity:.85}

/* layer cadence sublabels — why only one layer moves with the scrubber */
.lname{display:flex;flex-direction:column;line-height:1.18;text-align:left}
.lname em{font-style:normal;font-size:10px;color:var(--muted);letter-spacing:.1px;margin-top:1px}
.ly.on .lname em{color:var(--muted)}
.cadence{margin-top:9px;padding:9px 13px;border:1px dashed var(--line);border-radius:var(--radius);
  font-size:11.5px;color:var(--muted);line-height:1.5;background:var(--panel2);transition:border-color .25s}
.cadence b{color:var(--ink);font-weight:640}
.cadence.live{border-color:var(--brand-dim);border-style:solid}