/* ============================================================
   EASYGROW 2.0 Field Manual
   Light editorial design system shared across all sections.
   Visual language borrowed from the Imperium worksheets:
   colour coded semantics (Input crimson, Output amber,
   Feedback green, Process purple, Environment slate).
   Typeface: Arial, matching the course documents.
   ============================================================ */

:root{
  /* base palette (light / warm paper) */
  --bg:        #f5f3ee;
  --bg-2:      #eeebe3;
  --panel:     #ffffff;
  --panel-2:   #faf8f3;
  --line:      rgba(28,24,18,.12);
  --line-2:    rgba(28,24,18,.22);
  --ink:       #201d18;
  --ink-soft:  #4f4a42;
  --ink-dim:   #8a847a;

  /* Imperium semantic accents, tuned for light background */
  --crimson:   #cc1f27;   /* inputs / humans */
  --crimson-d: #a2141b;
  --gold:      #b07d15;   /* outputs / clients / value */
  --purple:    #6a3cd0;   /* processes / stimuli */
  --green:     #1c8f4f;   /* feedback / metrics */
  --slate:     #566173;   /* environment / market */
  --blue:      #2f74d0;

  --grad: linear-gradient(120deg,var(--crimson),var(--purple) 80%);
  --grad-warm: linear-gradient(120deg,var(--crimson),var(--gold));

  --sans:  Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  --serif: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono:  Arial, "Helvetica Neue", Helvetica, sans-serif;

  --maxw: 1120px;
  --radius: 18px;
  --shadow: 0 20px 46px -28px rgba(40,30,15,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  /* soft ambient tint */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 6% -10%, rgba(204,31,39,.07), transparent 60%),
    radial-gradient(55vw 55vh at 100% 2%, rgba(106,60,208,.06), transparent 62%),
    radial-gradient(70vw 60vh at 60% 120%, rgba(176,125,21,.05), transparent 60%);
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
::selection{background:rgba(204,31,39,.18); color:var(--ink)}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.narrow{max-width:820px; margin-inline:auto}
section{position:relative}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- top nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px); background:rgba(245,243,238,.82);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.01em}
.brand small{color:var(--ink-dim); font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase}
.nav-links{margin-left:auto; display:flex; gap:26px; font-size:14px; color:var(--ink-soft)}
.nav-links a{padding:6px 2px; border-bottom:2px solid transparent; transition:.2s; font-weight:600}
.nav-links a:hover{color:var(--ink); border-color:var(--crimson)}
.nav-links a.active{color:var(--ink); border-color:var(--crimson)}

/* ---------- monogram ---------- */
.monogram{
  width:38px; height:38px; flex:none; border:1.5px solid var(--line-2);
  border-radius:9px; display:grid; place-items:center;
  font-weight:800; font-size:15px; line-height:1;
  background:linear-gradient(160deg,#ffffff,#f0ede6);
  color:var(--ink); letter-spacing:.02em;
}
.monogram b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- hero ---------- */
.hero{padding:96px 0 70px; text-align:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:26px; font-weight:600;
  padding:8px 16px; border:1px solid var(--line); border-radius:100px; background:var(--panel)
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--crimson);box-shadow:0 0 10px rgba(204,31,39,.6)}
h1.display{
  font-family:var(--serif); font-weight:800; letter-spacing:-.025em; line-height:1.02;
  font-size:clamp(2.6rem,7vw,5.2rem); margin:.1em 0 .32em;
}
h1.display .em{font-style:italic; background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--ink-soft); max-width:720px; margin:0 auto}

/* ---------- section header ---------- */
.sec-head{margin:0 0 42px}
.kicker{font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--crimson); font-weight:700; display:flex; align-items:center; gap:14px}
.kicker::before{content:""; width:34px; height:1px; background:var(--crimson); opacity:.6}
h2.sec{font-family:var(--serif); font-weight:800; font-size:clamp(2rem,4.6vw,3rem); letter-spacing:-.025em; line-height:1.06; margin:.28em 0 .35em}
h2.sec .em{font-style:italic; color:var(--gold)}
.sec-sub{color:var(--ink-soft); max-width:760px; font-size:1.06rem}

/* module band spacing */
.module{padding:88px 0; border-top:1px solid var(--line)}
.module:first-of-type{border-top:none}
.mod-index{font-size:13px; letter-spacing:.3em; color:var(--ink-dim); text-transform:uppercase; font-weight:700}

h3.h3{font-family:var(--serif); font-weight:800; font-size:1.6rem; letter-spacing:-.015em; margin:2.4em 0 .6em; color:var(--ink)}
h4.h4{font-size:1.02rem; font-weight:800; letter-spacing:.01em; margin:2em 0 .5em; color:var(--ink)}
p{margin:0 0 1.1em}
.narrow p, .module p{color:var(--ink-soft)}
strong,b{color:var(--ink); font-weight:700}
em{color:var(--ink)}

/* ---------- lists ---------- */
ul.clean,ol.clean{margin:0 0 1.3em; padding:0; list-style:none}
ul.clean li,ol.clean li{position:relative; padding:0 0 .55em 1.5em; color:var(--ink-soft)}
ul.clean li::before{content:""; position:absolute; left:2px; top:.72em; width:7px; height:7px; border-radius:2px; background:var(--grad)}
ol.clean{counter-reset:c}
ol.clean li{counter-increment:c; padding-left:2.1em}
ol.clean li::before{content:counter(c); position:absolute; left:0; top:.12em; width:1.5em; height:1.5em; font:700 12px/1.5em var(--sans); text-align:center; color:var(--gold); border:1px solid var(--line-2); border-radius:6px; background:var(--panel)}

/* ---------- cards & grid ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{
  background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
  box-shadow:var(--shadow);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover{border-color:var(--line-2); transform:translateY(-3px); box-shadow:0 26px 54px -30px rgba(40,30,15,.5)}
.card .tag{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); font-weight:700}
.card h4{margin:.5em 0 .4em; font-size:1.12rem; color:var(--ink); font-weight:800}
.card p{font-size:.96rem; margin:0; color:var(--ink-soft)}
.card .num{font-family:var(--serif); font-weight:800; font-size:2rem; line-height:1; color:transparent; background:var(--grad-warm); -webkit-background-clip:text; background-clip:text}

/* coloured left rules for semantic cards */
.card.c-in{border-left:3px solid var(--crimson)}
.card.c-out{border-left:3px solid var(--gold)}
.card.c-proc{border-left:3px solid var(--purple)}
.card.c-feed{border-left:3px solid var(--green)}
.card.c-env{border-left:3px solid var(--slate)}

/* ---------- pull quote ---------- */
.pquote{
  margin:46px 0; padding:34px 34px 34px 40px; position:relative;
  border-left:3px solid var(--crimson); background:linear-gradient(100deg,rgba(204,31,39,.06),transparent 70%);
  border-radius:0 14px 14px 0;
}
.pquote p{font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.45rem; line-height:1.42; color:var(--ink); margin:0}
.pquote cite{display:block; margin-top:14px; font-style:normal; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); font-weight:700}

/* ---------- callout ---------- */
.callout{border:1px solid var(--line); border-radius:14px; padding:22px 24px; background:var(--panel); margin:26px 0; box-shadow:var(--shadow)}
.callout.warn{border-color:rgba(204,31,39,.35); background:linear-gradient(180deg,rgba(204,31,39,.05),var(--panel))}
.callout.key{border-color:rgba(176,125,21,.4); background:linear-gradient(180deg,rgba(176,125,21,.06),var(--panel))}
.callout .lbl{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:8px; font-weight:800}
.callout.warn .lbl{color:var(--crimson)}
.callout p:last-child{margin-bottom:0}

/* ---------- equation box ---------- */
.eqn{
  margin:30px 0; padding:26px 22px; text-align:center; border:1px solid var(--line-2);
  border-radius:14px; background:radial-gradient(120% 120% at 50% 0,rgba(106,60,208,.06),transparent 70%),var(--panel);
  font-family:var(--serif); font-weight:700; font-size:clamp(1.05rem,2.6vw,1.5rem); letter-spacing:.01em; box-shadow:var(--shadow);
}
.eqn .in{color:var(--crimson)} .eqn .proc{color:var(--purple)} .eqn .out{color:var(--gold)}
.eqn .feed{color:var(--green)} .eqn .env{color:var(--slate)} .eqn .op{color:var(--ink-dim); margin:0 .25em}
.eqn small{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); margin-top:12px; font-weight:600}

/* ---------- semantic legend chips ---------- */
.legend{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 0}
.chip{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:5px 13px; background:var(--panel); font-weight:600}
.chip i{width:9px;height:9px;border-radius:50%}
.chip.in i{background:var(--crimson)} .chip.out i{background:var(--gold)} .chip.proc i{background:var(--purple)}
.chip.feed i{background:var(--green)} .chip.env i{background:var(--slate)}

/* ---------- figure frame for SVG diagrams ---------- */
figure.fig{margin:40px 0; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:radial-gradient(130% 110% at 50% -10%, #ffffff, #f4f1ea 90%); box-shadow:var(--shadow)}
figure.fig .cap{padding:14px 24px; font-size:13.5px; color:var(--ink-soft); border-top:1px solid var(--line); background:rgba(255,255,255,.55)}
figure.fig .cap b{color:var(--crimson); font-weight:800; letter-spacing:.01em}
figure.fig svg{display:block; width:100%; height:auto}
.fig-pad{padding:38px 34px}
@media(max-width:640px){.fig-pad{padding:22px 16px}}

/* diagram kit: refined nodes, edges, labels */
.dnode{fill:#ffffff; stroke:var(--line-2); stroke-width:1.5; filter:url(#softshadow)}
.dnode.in{fill:#fbecec; stroke:var(--crimson)}
.dnode.out{fill:#f8f0da; stroke:var(--gold)}
.dnode.proc{fill:#efeafb; stroke:var(--purple)}
.dnode.feed{fill:#e6f5ec; stroke:var(--green)}
.dnode.env{fill:#eef0f3; stroke:var(--slate)}
.dnode.solid-in{fill:var(--crimson); stroke:none}
.dnode.solid-out{fill:var(--gold); stroke:none}
.dnode.solid-proc{fill:var(--purple); stroke:none}
.dnode.solid-feed{fill:var(--green); stroke:none}
.dlabel{font-family:var(--sans); font-weight:800; fill:var(--ink)}
.dlabel.on{fill:#fff}
.dsub{font-family:var(--sans); font-weight:600; fill:var(--ink-dim)}
.dsub.in{fill:var(--crimson)} .dsub.out{fill:var(--gold)} .dsub.proc{fill:var(--purple)}
.dsub.feed{fill:var(--green)} .dsub.env{fill:var(--slate)}
.dedge{fill:none; stroke:var(--ink-dim); stroke-width:2.2; stroke-linecap:round; marker-end:url(#ah); opacity:.85}
.dedge.in{stroke:var(--crimson)} .dedge.out{stroke:var(--gold)} .dedge.proc{stroke:var(--purple)}
.dedge.feed{stroke:var(--green)} .dedge.soft{stroke:var(--line-2); stroke-dasharray:2 5; opacity:1}

/* legacy helpers, upgraded so older diagrams look clean too */
.dg-box{fill:#ffffff; stroke:var(--line-2); stroke-width:1.5; filter:url(#softshadow)}
.dg-lbl{font-family:var(--sans); font-weight:800; fill:var(--ink)}
.dg-sub{font-family:var(--sans); font-weight:600; fill:var(--ink-dim)}
.dg-flow{stroke:var(--ink-dim); stroke-width:2.2; fill:none; stroke-linecap:round; opacity:.85; marker-end:url(#ah)}

/* ---------- data / metric rows ---------- */
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:28px 0}
.metric{border:1px solid var(--line); border-radius:14px; padding:18px 18px; background:var(--panel); box-shadow:var(--shadow)}
.metric .v{font-family:var(--serif); font-weight:800; font-size:2rem; line-height:1; color:var(--gold)}
.metric .k{font-size:12.5px; color:var(--ink-dim); margin-top:8px; letter-spacing:.02em}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto; margin:28px 0; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; font-size:.95rem; min-width:520px; background:var(--panel)}
th,td{text-align:left; padding:13px 18px; border-bottom:1px solid var(--line)}
thead th{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); background:var(--panel-2); font-weight:700}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(28,24,18,.02)}
td.faulty{color:var(--crimson)} td.truth{color:var(--green)}

/* ---------- step list ---------- */
.steps{counter-reset:st; margin:30px 0; display:grid; gap:14px}
.step{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:var(--shadow)}
.step .st-n{counter-increment:st; font-family:var(--serif); font-weight:800; font-size:1.5rem; color:transparent; background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; min-width:1.4em}
.step h4{margin:.1em 0 .3em; font-size:1.05rem; font-weight:800}
.step p{margin:0; font-size:.94rem; color:var(--ink-soft)}
.step .sub{font-size:11.5px; color:var(--ink-dim); letter-spacing:.03em; margin-top:8px; font-weight:600}

/* ---------- accordion ---------- */
details.acc{border:1px solid var(--line); border-radius:14px; background:var(--panel); margin:14px 0; overflow:hidden; box-shadow:var(--shadow)}
details.acc>summary{cursor:pointer; list-style:none; padding:20px 24px; display:flex; align-items:center; gap:16px; font-weight:800}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary .idx{font-size:12px; color:var(--gold); font-weight:800}
details.acc>summary .plus{margin-left:auto; color:var(--ink-dim); transition:.3s; font-size:1.3rem; line-height:1}
details.acc[open]>summary .plus{transform:rotate(45deg); color:var(--crimson)}
details.acc .body{padding:0 24px 22px 24px; color:var(--ink-soft); font-size:.97rem}
.hlist{columns:2; column-gap:22px; margin:22px 0}
@media(max-width:720px){.hlist{columns:1}}
.hlist .hitem{break-inside:avoid; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 14px; background:var(--panel-2)}
.hlist .hitem .n{font-size:11px; color:var(--gold); letter-spacing:.06em; font-weight:800}
.hlist .hitem b{display:block; margin:2px 0 4px}
.hlist .hitem span{font-size:.88rem; color:var(--ink-dim); line-height:1.5}

/* ---------- table of contents rail ---------- */
.toc{position:fixed; top:50%; right:22px; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:11px}
.toc a{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line-2); position:relative; transition:.25s; background:var(--panel)}
.toc a:hover, .toc a.active{background:var(--crimson); border-color:var(--crimson); box-shadow:0 0 10px rgba(204,31,39,.5)}
.toc a span{position:absolute; right:20px; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:12px; color:var(--ink-soft); background:var(--panel); border:1px solid var(--line); padding:4px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:.25s; font-weight:600; box-shadow:var(--shadow)}
.toc a:hover span{opacity:1}
@media(max-width:1200px){.toc{display:none}}

/* ---------- pillar layouts ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar{text-align:center; padding:28px 20px; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--shadow)}
.pillar .ic{font-size:1.7rem; margin-bottom:10px}
.pillar b{display:block; font-family:var(--serif); font-weight:800; font-size:1.2rem; color:var(--ink); margin-bottom:6px}
.pillar span{font-size:.9rem; color:var(--ink-dim)}

/* ---------- section nav cards ---------- */
.section-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px}
@media(max-width:860px){.section-cards{grid-template-columns:1fr}}
.sc{position:relative; border:1px solid var(--line); border-radius:20px; padding:30px 26px; min-height:220px; display:flex; flex-direction:column; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); transition:.3s}
.sc:hover{border-color:var(--line-2); transform:translateY(-4px); box-shadow:0 30px 60px -32px rgba(40,30,15,.5)}
.sc .n{font-family:var(--serif); font-weight:800; font-size:2.6rem; color:transparent; -webkit-background-clip:text; background-clip:text; line-height:1}
.sc.s1 .n{background:linear-gradient(120deg,var(--crimson),var(--gold))}
.sc.s2 .n{background:linear-gradient(120deg,var(--purple),var(--blue))}
.sc.s3 .n{background:linear-gradient(120deg,var(--green),var(--gold))}
.sc h3{font-family:var(--serif); font-weight:800; font-size:1.5rem; margin:.4em 0 .3em; color:var(--ink)}
.sc p{font-size:.95rem; color:var(--ink-soft); margin:0 0 auto}
.sc .go{margin-top:20px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; font-weight:700}
.sc.soon{opacity:.66}
.sc .badge{position:absolute; top:20px; right:20px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:5px 11px; border-radius:100px; border:1px solid var(--line-2); color:var(--ink-dim); font-weight:700}
.sc.s1 .badge, .sc.s2 .badge.ready{color:var(--green); border-color:rgba(28,143,79,.4)}

footer.foot{border-top:1px solid var(--line); padding:50px 0 60px; margin-top:40px; color:var(--ink-dim); font-size:13px}
footer.foot .wrap{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}

/* ---------- misc ---------- */
.hr{height:1px; background:var(--line); margin:60px 0; border:0}
.center{text-align:center}
.small{font-size:.86rem; color:var(--ink-dim)}
[id]{scroll-margin-top:84px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:100px; font-weight:700; font-size:.95rem; background:var(--grad); color:#fff; border:none; cursor:pointer; transition:.25s; box-shadow:0 12px 28px -12px rgba(204,31,39,.5)}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(204,31,39,.6)}
.btn.ghost{background:var(--panel); border:1px solid var(--line-2); color:var(--ink); box-shadow:var(--shadow)}
.btn.ghost:hover{border-color:var(--crimson)}

/* ============================================================
   INTERACTIVE WIDGETS (sliders, simulators, live diagrams)
   ============================================================ */
.widget{margin:40px 0; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:radial-gradient(130% 110% at 50% -10%, #ffffff, #f4f1ea 90%); box-shadow:var(--shadow)}
.widget .w-body{padding:30px 30px 28px}
@media(max-width:640px){.widget .w-body{padding:22px 16px}}
.widget .w-cap{padding:14px 24px; font-size:13.5px; color:var(--ink-soft); border-top:1px solid var(--line); background:rgba(255,255,255,.55)}
.widget .w-cap b{color:var(--crimson); font-weight:800}
.w-head{display:flex; align-items:center; gap:10px; margin:0 0 20px}
.w-head .w-tag{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--purple); font-weight:800}
.w-head .w-tag::before{content:"◆ "; color:var(--gold)}
.w-head .w-live{margin-left:auto; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); font-weight:800; display:inline-flex; align-items:center; gap:7px}
.w-head .w-live i{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:wpulse 1.8s ease-in-out infinite}
@keyframes wpulse{0%,100%{opacity:.4}50%{opacity:1}}

.w-controls{display:grid; gap:20px}
.w-controls.two{grid-template-columns:1fr 1fr}
@media(max-width:640px){.w-controls.two{grid-template-columns:1fr}}
.w-ctl label{display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:11px}
.w-ctl label .v{font-family:var(--sans); font-weight:800; font-size:15px; color:var(--purple); font-variant-numeric:tabular-nums}

/* custom range slider */
.rng{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:8px;
  background:#e7e2d6; outline:none; cursor:pointer; margin:0}
.rng::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(140deg,var(--crimson),var(--purple)); border:3px solid #fff;
  box-shadow:0 2px 9px rgba(40,30,15,.35); cursor:pointer; transition:transform .12s}
.rng::-webkit-slider-thumb:active{transform:scale(1.14)}
.rng::-moz-range-thumb{width:22px; height:22px; border-radius:50%;
  background:linear-gradient(140deg,var(--crimson),var(--purple)); border:3px solid #fff;
  box-shadow:0 2px 9px rgba(40,30,15,.35); cursor:pointer}
.rng:focus-visible{box-shadow:0 0 0 3px rgba(106,60,208,.25)}

/* live output tiles */
.w-outs{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; margin-top:24px}
.w-out{border:1px solid var(--line); border-radius:14px; padding:16px 16px; background:var(--panel); text-align:center}
.w-out .n{font-family:var(--sans); font-weight:800; font-size:1.9rem; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.w-out .k{font-size:12px; color:var(--ink-dim); margin-top:8px; font-weight:600}
.w-out.hero .n{font-size:2.4rem; background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent}

/* verdict pill */
.w-verdict{margin-top:22px; text-align:center; padding:14px; border-radius:14px; font-weight:800; font-size:1.05rem; letter-spacing:.01em; transition:.3s; border:1px solid var(--line)}
.w-verdict.no{background:#fbecec; color:var(--crimson-d); border-color:rgba(204,31,39,.3)}
.w-verdict.yes{background:#e6f5ec; color:#136b3b; border-color:rgba(28,143,79,.4)}
.w-verdict.mid{background:#f8f0da; color:#8a5f10; border-color:rgba(176,125,21,.35)}

/* simulator buttons + call cells */
.w-btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.w-btn{padding:11px 20px; border-radius:100px; font-weight:700; font-size:.9rem; border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink); cursor:pointer; transition:.2s}
.w-btn:hover{border-color:var(--purple); transform:translateY(-1px)}
.w-btn.primary{background:var(--grad); color:#fff; border:none; box-shadow:0 10px 24px -12px rgba(204,31,39,.5)}
.w-cells{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; min-height:24px}
.w-cell{width:20px; height:20px; border-radius:5px; background:#e7e2d6; transition:.25s; transform:scale(.6); opacity:0}
.w-cell.show{transform:scale(1); opacity:1}
.w-cell.win{background:var(--green)}
.w-cell.loss{background:var(--crimson); opacity:.55}
.w-cell.win.show{opacity:1}

/* interactive svg helpers */
.iz-line{transition:d .25s ease, transform .25s ease}
.iz-marker{transition:transform .18s ease, cx .18s ease, cy .18s ease}
.iz-fill{transition:height .3s ease, y .3s ease, width .3s ease, fill .3s ease}