:root{
  --plum:#140E12; --plum2:#19111A; --panel:#1A1219;
  --orange:#FF6A1A; --garnet:#8E1E3C; --bone:#EDE6DA; --sodium:#C98A3F;
  --rule:rgba(237,230,218,.20);
  --mich:'Michroma',system-ui,sans-serif;
  --body:'Geist',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--plum);color:var(--bone);font-family:var(--body);font-weight:400;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wrap{width:min(1420px,100%);margin:0 auto;padding:0 16px}
.grain{position:fixed;inset:0;background:url(texture-plate.jpg) center/cover no-repeat;opacity:.10;pointer-events:none;z-index:0}
main,header,footer{position:relative;z-index:1}

/* head */
.head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:9px 16px;background:rgba(20,14,18,.94);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--mich);font-size:12px;letter-spacing:.06em}
.brand img{width:26px;height:26px;border:1px solid var(--rule)}
.brand em{font-style:normal;font-family:var(--body);font-size:10px;letter-spacing:.12em;color:var(--sodium);border:1px solid rgba(201,138,63,.4);padding:1px 5px}
.nav{display:none;gap:18px;margin-left:auto;align-items:center;font-size:13px;color:rgba(237,230,218,.72)}
.nav a{padding:10px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{color:var(--bone);border-bottom-color:var(--orange)}
.xico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:rgba(237,230,218,.8)}
.xico:hover{color:var(--orange)}
.headact{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav+.headact{margin-left:14px}
.btn{font-family:var(--mich);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;padding:0 14px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--rule);background:transparent;color:var(--bone);transition:background .15s,color .15s,border-color .15s}
.btn-ghost:hover{border-color:var(--sodium);color:var(--sodium)}
.btn-primary{background:var(--orange);border-color:var(--orange);color:#1A0C04;font-weight:400}
.btn-primary:hover{background:#ff7f38;border-color:#ff7f38}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn.sm{height:32px;padding:0 10px;font-size:9px}
.btn.wide{width:100%}

/* hero */
.hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;padding:26px 0 30px;overflow:hidden}
.hero .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 55%}
.hero .dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,18,.86) 0%,rgba(20,14,18,.42) 38%,rgba(20,14,18,.72) 78%,rgba(20,14,18,.96) 100%)}
.hero-grid{position:relative;display:grid;gap:16px;width:min(1420px,100%)}
.kick{font-family:var(--mich);font-size:10px;letter-spacing:.16em;color:var(--sodium);margin:0 0 12px}
h1{font-family:var(--mich);font-size:clamp(1.22rem,4.3vw + .22rem,3.05rem);line-height:1.14;letter-spacing:.01em;margin:0;text-transform:uppercase;text-shadow:0 2px 20px rgba(20,14,18,.9)}
.lede{max-width:46ch;margin:16px 0 0;font-size:14.5px;color:rgba(237,230,218,.86);text-shadow:0 1px 10px rgba(20,14,18,.9)}
.lede b{color:var(--orange);font-weight:600}

/* panels */
.panel{position:relative;background:var(--panel);border:1px solid var(--rule);border-radius:2px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.panel.plated{background-image:linear-gradient(rgba(21,14,20,.9),rgba(21,14,20,.94)),url(texture-plate.jpg);background-size:cover;background-position:center}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  radial-gradient(circle at 8px 8px,rgba(237,230,218,.34) 0 1.6px,transparent 2.2px),
  radial-gradient(circle at calc(100% - 8px) 8px,rgba(237,230,218,.34) 0 1.6px,transparent 2.2px),
  radial-gradient(circle at 8px calc(100% - 8px),rgba(237,230,218,.34) 0 1.6px,transparent 2.2px),
  radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),rgba(237,230,218,.34) 0 1.6px,transparent 2.2px);
  background-repeat:no-repeat}
.phead{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule);font-family:var(--mich);font-size:10px;letter-spacing:.11em;text-transform:uppercase}
.pno{color:var(--garnet);border:1px solid rgba(142,30,60,.6);padding:2px 5px;border-radius:2px;color:#D4697F}
.pstat{margin-left:auto;font-family:var(--body);letter-spacing:.06em;font-size:10px;color:var(--sodium)}
.pstat.live{color:var(--orange)}
.pbody{padding:14px}
.pimg{width:100%;height:118px;object-fit:cover;object-position:center 58%;border-bottom:1px solid var(--rule);filter:saturate(.92)}
.ptext{margin:0 0 12px;font-size:13.5px;color:rgba(237,230,218,.8)}
.status{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:rgba(237,230,218,.52)}
.err{margin:8px 0 0;font-size:12px;color:#E2566F;min-height:1em}

/* wizard */
.field{margin-bottom:10px}
.field label,#amtLab{display:block;font-family:var(--mich);font-size:9px;letter-spacing:.12em;color:var(--sodium);margin-bottom:5px}
input,select{width:100%;height:44px;background:#120C11;border:1px solid rgba(142,30,60,.55);border-radius:2px;color:var(--bone);font-family:var(--body);font-size:15px;padding:0 11px;outline:none}
select{font-size:13px}
input:focus,select:focus{border-color:var(--orange)}
input::placeholder{color:rgba(237,230,218,.3)}
.gate{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid rgba(142,30,60,.6);border-radius:2px;font-size:12px;color:rgba(237,230,218,.76);margin:4px 0 12px}
.gate i{width:9px;height:9px;border-radius:50%;background:var(--garnet);flex:0 0 auto}
.gate[data-state="ok"]{border-color:rgba(255,106,26,.7);color:var(--bone)}
.gate[data-state="ok"] i{background:var(--orange);box-shadow:0 0 0 3px rgba(255,106,26,.18)}

/* odometer */
.odo{margin-bottom:12px}
.olab{display:block;font-family:var(--mich);font-size:8.5px;letter-spacing:.13em;color:var(--sodium);margin-bottom:6px}
.flaps{display:flex;gap:2px;flex-wrap:wrap}
.flap{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:30px;padding:0 2px;background:#0E090D;border:1px solid rgba(237,230,218,.16);border-radius:1px;font-family:var(--mich);font-size:15px;color:var(--bone);position:relative;overflow:hidden}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.65)}
.flap.sep{min-width:9px;border-color:transparent;background:transparent}
.burn .flap{color:var(--orange)}
.flap.flip{animation:flip .4s ease}
@keyframes flip{0%{transform:rotateX(-82deg);filter:brightness(2.1)}60%{transform:rotateX(6deg)}100%{transform:none}}
.osub{margin:2px 0 12px;font-size:11px;color:rgba(237,230,218,.5)}
.odo-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid var(--rule);padding-top:10px}
.odo-rows span{display:block;font-size:9px;letter-spacing:.1em;color:var(--sodium);font-family:var(--mich)}
.odo-rows b{font-size:17px;font-weight:500}

/* feeline */
.feeline{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#110C11;padding:10px 0 12px}
.fl-wrap{overflow:hidden}
#lineSvg{width:100%;height:auto;min-width:0}
.casing path{fill:none;stroke:#2A1C25;stroke-width:13;stroke-linecap:square}
.live path{fill:none;stroke:var(--garnet);stroke-width:5;stroke-linecap:square;opacity:.85}
.fit{fill:#8A6A33;stroke:rgba(237,230,218,.3)}
.pedestal{fill:#241821;stroke:rgba(237,230,218,.35)}
.furnace{fill:#2A1410;stroke:rgba(255,106,26,.45)}
.firing #trunk,.charging #trunk{stroke:var(--orange);stroke-dasharray:90 600;stroke-dashoffset:690;animation:run .55s linear forwards;opacity:1}
.firing #brA{stroke:var(--orange);stroke-dasharray:70 700;stroke-dashoffset:770;animation:run .6s .5s linear forwards;opacity:1}
.firing #brB{stroke:var(--orange);stroke-dasharray:70 700;stroke-dashoffset:770;animation:run .6s .5s linear forwards;opacity:1}
@keyframes run{to{stroke-dashoffset:0}}
.firing #ped{fill:#4A3016;stroke:var(--sodium);animation:lamp 1.1s 1s ease-out}
.firing #fur{fill:#6A2A08;stroke:var(--orange);animation:lamp 1.1s 1s ease-out}
@keyframes lamp{0%{filter:brightness(2.4)}100%{filter:none}}
.fl-tags{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:4px;font-family:var(--mich);font-size:9px;letter-spacing:.11em;color:rgba(237,230,218,.6)}
.fl-tags b{color:var(--orange);font-weight:400}
.fl-tags .dim{color:var(--sodium);margin-left:auto}

/* floor */
.floor{display:grid;grid-template-columns:1fr;gap:16px;padding-top:18px;padding-bottom:40px}
.rail{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--rule);border-radius:2px;font-family:var(--mich);font-size:9.5px;letter-spacing:.12em;color:rgba(237,230,218,.66);background:rgba(26,18,25,.7)}
.rail a em{font-style:normal;color:var(--garnet);color:#C0516A}
.rail a.on{color:var(--bone);border-color:var(--orange)}
.rail a.on em{color:var(--orange)}
.stack{display:grid;gap:16px;min-width:0}

/* tables */
.table{display:grid;gap:1px;background:rgba(142,30,60,.35);border:1px solid rgba(142,30,60,.4);border-radius:2px;overflow:hidden}
.row{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;background:#150F15;padding:9px 10px;font-size:12.5px}
.row .idx{color:var(--sodium);font-size:10px;font-family:var(--mich)}
.row .tick{font-family:var(--mich);font-size:11px;letter-spacing:.06em}
.row .sub{display:block;font-size:11px;color:rgba(237,230,218,.5);margin-top:2px}
.row .st{font-family:var(--mich);font-size:9px;letter-spacing:.1em;color:var(--sodium);border:1px solid rgba(201,138,63,.4);padding:3px 6px;border-radius:2px;white-space:nowrap}
.row .st.hot{color:var(--orange);border-color:rgba(255,106,26,.5)}
.empty{background:#150F15;padding:16px 10px;font-size:12.5px;color:rgba(237,230,218,.52)}
.tick .row{grid-template-columns:1fr auto}

/* curve */
.ca{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:2px;padding:9px 10px;margin-bottom:12px;background:#120C11}
.ca img{width:28px;height:28px;border:1px solid var(--rule)}
.cacol{min-width:0;flex:1}
.calab{display:block;font-family:var(--mich);font-size:8.5px;letter-spacing:.12em;color:var(--sodium)}
.ca code{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bone)}
.mkt{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(237,230,218,.14);border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.m{background:#150F15;padding:9px 10px}
.m span{display:block;font-family:var(--mich);font-size:8.5px;letter-spacing:.11em;color:var(--sodium);margin-bottom:3px}
.m b{font-size:15px;font-weight:500}
.prog{margin:12px 0}
.bar{height:7px;background:#120C11;border:1px solid rgba(142,30,60,.6);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--orange);transition:width .6s ease}
.prog span{display:block;margin-top:6px;font-size:11px;color:rgba(237,230,218,.6)}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tab{flex:1;height:38px;background:#120C11;border:1px solid var(--rule);color:rgba(237,230,218,.6);font-family:var(--mich);font-size:10px;letter-spacing:.1em;border-radius:2px;cursor:pointer}
.tab.on{color:#1A0C04;background:var(--bone);border-color:var(--bone)}
.quote{margin:8px 0 10px;font-size:12.5px;color:var(--sodium);min-height:1.2em}
.quote b{color:var(--bone)}

/* keeper */
.keeper{display:grid;grid-template-columns:1fr;gap:14px}
.kimg{width:100%;max-width:220px;border:1px solid var(--rule);border-radius:2px}
.kv{display:flex;justify-content:space-between;gap:10px;border-top:1px solid rgba(237,230,218,.12);padding:7px 0;font-size:12px}
.kv span{font-family:var(--mich);font-size:8.5px;letter-spacing:.11em;color:var(--sodium)}
.kv b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}

/* spec */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:rgba(237,230,218,.14);border:1px solid var(--rule)}
.steps li{background:#150F15;padding:11px 12px;display:grid;grid-template-columns:30px 76px 1fr;gap:8px;align-items:baseline;font-size:13px;color:rgba(237,230,218,.8)}
.steps em{font-style:normal;font-family:var(--mich);font-size:9px;color:var(--sodium)}
.steps b{font-family:var(--mich);font-size:10px;letter-spacing:.08em;color:var(--bone)}
.loop{margin:12px 0 0;padding:11px 12px;border:1px solid rgba(255,106,26,.4);border-radius:2px;font-size:12.5px;color:rgba(237,230,218,.86)}

/* ticker rail */
.ticker-rail .table{max-height:none}

/* footer */
footer{border-top:1px solid var(--rule);padding:20px 0 40px;background:#110C11}
.fgrid{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fgrid>div{display:flex;align-items:center;gap:8px;font-family:var(--mich);font-size:11px;letter-spacing:.07em}
.fgrid em{font-style:normal;color:var(--orange);font-size:10px}
.fca{margin:0;font-size:11px;color:rgba(237,230,218,.6)}
.fca code{color:var(--bone)}
.fgrid .xico{margin-left:auto}
.fine{margin:12px auto 0;font-size:11px;color:rgba(237,230,218,.4);max-width:70ch}

/* focus rack */
.rackable{filter:blur(calc(var(--rack,0) * 2.4px));opacity:calc(1 - var(--rack,0) * .38);transition:filter .28s ease,opacity .28s ease}
@media (prefers-reduced-motion:reduce){.rackable{filter:none;opacity:1}.flap.flip{animation:none}}

@media (min-width:720px){
  .wrap{padding:0 26px}
  .hero{padding:40px 0 44px}
  .pbody{padding:16px}
  .keeper{grid-template-columns:200px 1fr;align-items:start}
  .mkt{grid-template-columns:repeat(4,1fr)}
  .row{grid-template-columns:40px 1fr 120px auto}
}
@media (min-width:900px){
  .nav{display:flex}
  .hero-grid{grid-template-columns:minmax(340px,480px) 1fr minmax(250px,290px);grid-template-rows:auto 1fr auto;align-items:start;min-height:72svh}
  .headblock{grid-column:1;grid-row:1}
  .wizard{grid-column:1;grid-row:3;align-self:end;max-width:480px}
  .odo-panel{grid-column:3;grid-row:3;align-self:end}
}
@media (min-width:1100px){
  .floor{grid-template-columns:150px minmax(0,1fr) 302px;align-items:start}
  .rail{position:sticky;top:72px;flex-direction:column;overflow:visible}
  .rail a{padding:11px 12px}
  .ticker-rail{position:sticky;top:72px}
  .ticker-rail .table{max-height:62svh;overflow-y:auto}
}
