:root{
    --bg:#000000; --bg2:#020603; --panel:#040904; --line:#134023;
    --ink:#c8ffd8; --dim:#4e9c68; --green:#39ff88; --amber:#ffb84d; --red:#ff6a5c;
    --steel:#8fbf9f; --cyan:#5ce1ff; --violet:#b98cff; --gold:#ffd463;
  }
  *{box-sizing:border-box}
  body{
    margin:0;color:var(--ink);font-family:'IBM Plex Mono',ui-monospace,'DejaVu Sans Mono',monospace;font-size:14.5px;line-height:1.65;
    background:#000;
    background-image:
      repeating-linear-gradient(0deg,rgba(57,255,136,.05) 0 1px,rgba(0,0,0,0) 1px 34px),
      repeating-linear-gradient(90deg,rgba(57,255,136,.05) 0 1px,rgba(0,0,0,0) 1px 34px);
  }
  a{color:var(--amber);text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px}
  header.bar{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:#000;
    transition:transform .28s ease}
  header.bar.tersembunyi{transform:translateY(-102%)}
  section{scroll-margin-top:74px}
  header.bar .wrap{display:flex;align-items:center;gap:8px 20px;min-height:58px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
  .tag{white-space:nowrap}
  @media (max-width:760px){.tag-mech{display:none}}
  @media (max-width:430px){.tag-gate{display:none}}
  .brand{font-family:'VT323',monospace;font-size:26px;letter-spacing:4px;margin-right:auto;color:var(--green)}
  .tag{color:var(--dim);font-size:12px;letter-spacing:1.4px}
  .tag b{color:var(--green);font-weight:700}
  h1{font-family:'VT323',monospace;font-size:clamp(44px,7vw,74px);line-height:1;margin:0 0 12px;letter-spacing:1px;color:var(--green)}
  h2{font-family:'VT323',monospace;font-size:34px;margin:0 0 6px;letter-spacing:1.4px;color:var(--green)}
  h3{font-size:16px;margin:0 0 6px;letter-spacing:.4px}
  p{margin:0 0 12px}
  .lede{font-size:16px;max-width:58ch;margin-bottom:14px}
  .muted{color:var(--dim)}
  .amber{color:var(--green)}
  .green{color:var(--green)}
  section{padding:56px 0;border-bottom:1px solid var(--line)}
  section:first-of-type{padding-top:34px}
  .split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
  @media (max-width:860px){.split{grid-template-columns:1fr;gap:30px}}
  .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  button{font-family:inherit;font-size:14px;letter-spacing:1px;cursor:pointer;background:var(--green);color:#00160a;
    border:1px solid var(--green);padding:0 24px;height:50px;font-weight:700}
  button.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  button.ghost:hover{border-color:var(--green);color:var(--green)}
  button:disabled{opacity:.45;cursor:not-allowed}
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 16px}
  .facts div{background:var(--panel);padding:14px 16px}
  .facts dt{color:var(--dim);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 4px}
  .facts dd{margin:0;font-size:26px;font-family:'VT323',monospace;letter-spacing:1px;text-shadow:0 0 8px rgba(57,255,136,.3)}
  .plate{border:1px solid var(--line);background:#000;padding:14px}
  .plate img{display:block;width:100%;height:auto;max-height:290px;object-fit:contain;filter:none}
  .plate .cap{display:flex;justify-content:space-between;color:var(--dim);font-size:11.5px;letter-spacing:1.2px;margin-top:10px}
  .track{height:10px;background:#12161a;border:1px solid var(--line);margin:8px 0 6px}
  .track i{display:block;height:100%;background:var(--green);width:0}
  table{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:13.5px}
  th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
  th{color:var(--dim);font-weight:400;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase}
  code{background:#061206;border:1px solid var(--line);padding:2px 6px;font-size:13px;font-family:'IBM Plex Mono',ui-monospace,monospace}
  pre{background:#030803;border:1px solid var(--line);padding:16px;overflow:auto;font-size:12.5px;line-height:1.55;
    font-family:'IBM Plex Mono',ui-monospace,monospace}
  .note{border-left:3px solid var(--green);padding:10px 0 10px 14px;color:var(--dim);font-size:13.5px}
  footer{padding:40px 0 70px;color:var(--dim);font-size:12.5px}
  .gradeRow{margin:0 0 34px;border:1px solid var(--line);background:rgba(1,7,3,.55)}
  .gradeRow>.gradeTitle{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
  .gradeRow>.gradeTitle b{font-family:'VT323',monospace;font-size:25px;letter-spacing:2px;color:var(--tierTint)}
  .gradeRow>.gradeTitle span{color:var(--dim);font-size:12px;letter-spacing:1.1px}
  .gradeRow>.gradeTitle .gradeBar{margin-left:auto;width:130px;height:6px;background:rgba(255,255,255,.07)}
  .gradeRow>.gradeTitle .gradeBar i{display:block;height:100%;background:var(--tierTint)}
  .pieceRow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px;background:transparent}
  @media (max-width:900px){.pieceRow{grid-template-columns:repeat(3,1fr);gap:16px;padding:16px}}
  @media (max-width:680px){.pieceRow{grid-template-columns:repeat(2,1fr);gap:12px;padding:12px}}
  @media (max-width:520px){
    /* on a phone the pieces sit two to a row so more of them fit on screen */
    .pieceRow{grid-template-columns:repeat(2,1fr);gap:10px;padding:10px}
    .pieceTile{padding:6px}
    .pieceTile figcaption{font-size:9.5px;letter-spacing:.4px;padding:6px 3px 2px}
    .traitLine{font-size:8.8px;letter-spacing:.3px;padding:0 3px 6px;line-height:1.45}
    .gradeRow>.gradeTitle{flex-wrap:wrap;gap:6px 10px;padding:9px 12px}
    .gradeRow>.gradeTitle b{font-size:22px}
    .gradeRow>.gradeTitle .gradeBar{width:100%;margin-left:0}
  }
  .pieceTile{margin:0;background:#010602;border:1px solid var(--line);padding:9px;position:relative;
    overflow:hidden;transition:border-color .2s,transform .25s ease}
  .pieceTile img{display:block;width:100%;height:auto;transition:transform .35s ease}
  .pieceTile figcaption{display:flex;justify-content:space-between;gap:6px;padding:7px 9px;font-size:10.5px;letter-spacing:1px;color:var(--dim)}
  .pieceTile figcaption .tierTint{color:var(--tierTint)}
  .pieceTile:hover img{transform:scale(1.03)}
  .pieceTile:hover{border-color:var(--tierTint);transform:translateY(-3px)}
  .pieceTile:hover{outline:1px solid var(--tierTint);outline-offset:-1px}
  .pieceTile:hover figcaption{color:var(--ink)}
  .traitLine{padding:0 9px 9px;font-size:10px;letter-spacing:.7px;color:var(--dim)}
  .pieceTile:hover .traitLine{color:#c9c4e6}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media (max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
  .grid figure{margin:0;border:1px solid var(--line);background:#000}
  .grid img{display:block;width:100%;height:auto}
  .log{font-size:12.5px;color:var(--dim);min-height:20px;margin-top:8px}
  .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 20px}
  @media (max-width:860px){.steps3{grid-template-columns:1fr}}
  .steps3>div{border:1px solid var(--line);padding:16px 18px;background:var(--panel)}
  .steps3 b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
    background:var(--green);color:#00160a;font-family:'VT323',monospace;font-size:20px;margin-bottom:8px}
  .gauge{height:8px;background:#12161a;border:1px solid var(--line);margin-top:10px}
  .gauge i{display:block;height:100%;background:var(--green);width:0}

  /* ------------------------------------------------------------ tabung glitching */
  .blink{display:inline-block;width:8px;height:15px;background:var(--green);margin-left:6px;
    vertical-align:-2px;animation:blink 1.05s steps(1) infinite}
  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
  @media (prefers-reduced-motion:reduce){.blink{animation:none}}
  .glitch{position:relative;display:inline-block}
  .glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;
    overflow:hidden;pointer-events:none}
  .glitch::before{color:var(--red);clip-path:inset(0 0 62% 0);animation:shift-a 4.2s steps(2) infinite}
  .glitch::after{color:var(--green);clip-path:inset(58% 0 0 0);animation:shift-b 3.3s steps(2) infinite}
  @keyframes shift-a{0%,93%{transform:none;opacity:0}94%{transform:translateX(-3px);opacity:.8}97%{transform:translateX(2px);opacity:.5}100%{opacity:0}}
  @keyframes shift-b{0%,89%{transform:none;opacity:0}90%{transform:translateX(3px);opacity:.7}96%{transform:translateX(-2px);opacity:.45}100%{opacity:0}}
  @media (prefers-reduced-motion:reduce){.glitch::before,.glitch::after{display:none}}
  /* ------------------------------------------------------------ papan faultBar */
  .faultBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);
    border-left:3px solid var(--red);background:#140807;padding:9px 13px;margin:0 0 20px;
    font-size:12.5px;letter-spacing:1.1px;color:var(--ink)}
  .faultBar.safe{border-left-color:var(--green);background:#0b120e}
  .faultBar b{color:#ff9b90;letter-spacing:2px}
  .faultBar.safe b{color:var(--green)}
  .faultBar .clock{color:var(--dim);margin-left:auto;font-size:11.5px;letter-spacing:.8px}
  .lamp{width:8px;height:8px;background:var(--red);border-radius:50%;animation:blink 1.4s steps(1) infinite}
  .faultBar.safe .lamp{background:var(--green)}
  /* -------------------------------------------------------------- bingkai laporan */
  .panel{border:1px solid var(--line);position:relative;margin:14px 0;background:var(--panel)}
  .panel .head{display:flex;justify-content:space-between;gap:10px;padding:8px 13px;
    border-bottom:1px solid var(--line);color:var(--dim);font-size:11px;letter-spacing:1.6px;text-transform:uppercase}
  .panel .body{padding:12px 13px 13px}
  .panel .body>*:last-child{margin-bottom:0}
  .cornerTicks::before,.cornerTicks::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--green);pointer-events:none}
  .cornerTicks::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
  .cornerTicks::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
  .diag{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  @media (max-width:700px){.diag{grid-template-columns:repeat(2,1fr)}}
  .diag div{background:var(--panel);padding:9px 11px}
  .diag dt{color:var(--dim);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase}
  .diag dd{margin:3px 0 0;font-size:19px;font-family:'VT323',monospace;letter-spacing:.8px}
  .machineLog{font-size:12px;line-height:1.75;color:var(--dim);max-height:230px;overflow:auto;white-space:pre-wrap}
  .machineLog .j{color:#4a5560}
  .machineLog .p{color:var(--green)}
  .machineLog .g{color:var(--green)}

  .hashStream{font-size:11.5px;line-height:1.7;color:var(--dim);white-space:pre;overflow:hidden}
  .hashStream b{color:var(--green);font-weight:700}
  .hashStream .near{color:var(--green)}


  @keyframes sisir{0%{left:-30%}100%{left:105%}}
  @media (prefers-reduced-motion:reduce){.sweep::after{display:none}}
  .checker{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .checker input{height:46px;background:#12161a;border:1px solid var(--line);color:var(--ink);
    font-family:inherit;padding:0 12px;font-size:13.5px}
  .hashLine{font-size:13px;word-break:break-all;line-height:1.7}
  .hashLine .zeroByte{color:var(--amber);font-weight:700}

  /* ------------------------------------------------------------ glitching look */

  @keyframes derau{0%{background-position:0 0}33%{background-position:37px 61px}66%{background-position:-53px 29px}100%{background-position:11px -47px}}

  .tape{height:9px;background:repeating-linear-gradient(45deg,var(--green) 0 7px,#000 7px 14px);opacity:.55}
  .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#000;overflow:hidden;white-space:nowrap}
  .ticker .tickerLine{display:inline-block;padding:8px 0;font-size:12px;letter-spacing:1.5px;color:#6fc48c;
    animation:tickerLine 46s linear infinite}
  .ticker b{color:#ff9b90}
  .ticker .safe{color:var(--green)}
  @keyframes tickerLine{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.ticker .tickerLine{animation:none}}
  .glitching{position:relative}
  .glitching::before,.glitching::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
  .glitching::before{color:#ff3b2f;clip-path:inset(12% 0 58% 0);animation:glitch-a 5.6s steps(2) infinite}
  .glitching::after{color:#18ffa1;clip-path:inset(52% 0 14% 0);animation:glitch-b 4.4s steps(2) infinite}
  @keyframes glitch-a{0%,95%{transform:none;opacity:0}96%{transform:translate(-4px,1px);opacity:.85}98%{transform:translate(3px,-1px);opacity:.55}100%{opacity:0}}
  @keyframes glitch-b{0%,92%{transform:none;opacity:0}93%{transform:translate(4px,-1px);opacity:.8}97%{transform:translate(-3px,1px);opacity:.5}100%{opacity:0}}
  @media (prefers-reduced-motion:reduce){.glitching::before,.glitching::after{display:none}}
  .glitching.hot::before{animation-duration:2.7s}
  .glitching.hot::after{animation-duration:2.1s}
  .cacat{color:var(--red)}
  body.glitching .panel{border-color:#3a2320}
  body.glitching .steps3>div{border-color:#3a2320}
  .boot{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center;
    transition:opacity .5s ease}
  .boot.done{opacity:0;pointer-events:none}
  .boot .interior{width:min(560px,88vw)}
  .boot .interior p{font-family:'VT323',monospace;font-size:24px;letter-spacing:3px;color:var(--green);margin:0 0 10px}
  .boot pre{background:#08090b;border:1px solid var(--line);padding:14px;font-size:12.5px;line-height:1.7;margin:0 0 10px;min-height:132px}
  .boot .persen{color:var(--amber);font-weight:700}
  .bootHint{font-size:11.5px;color:var(--dim);letter-spacing:1.6px;text-transform:uppercase}

  /* ------------------------------------------------------- kerusakan nyata */






  .unreadable{border:1px dashed #3a2320;background:#030503;color:var(--red);font-size:11.5px;letter-spacing:1.6px;
    display:flex;align-items:center;justify-content:center;min-height:74px;text-align:center;padding:10px}
  .pieceDecode{animation:singkap .55s steps(6)}
  @keyframes singkap{0%{filter:brightness(2.4) contrast(2);opacity:.4}100%{filter:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){.pieceDecode{animation:none}}

  /* --------------------------------------------------------- the screen stop */
  .stop{background:#0a0405;border-top:1px solid #3a1a18;border-bottom:1px solid #3a1a18}
  .stop .faultCode{display:inline-block;border:1px solid #5c2a26;background:#140807;color:#ff9b90;
    font-family:'VT323',monospace;font-size:20px;letter-spacing:2.4px;padding:3px 12px;margin-bottom:16px}
  .stop h2{font-size:clamp(34px,5.6vw,56px);color:#ffd9d4;text-shadow:2px 0 rgba(255,59,47,.55),-2px 0 rgba(24,255,161,.25)}
  .stop p{max-width:74ch}
  .stop .info{font-size:13.5px;color:#f0cfc9}
  .stop table{margin:16px 0 18px}
  .stop td:first-child{color:var(--dim);width:190px}
  .torn{position:relative;overflow:hidden}
  .torn .band{position:absolute;left:0;width:100%;height:7px;overflow:hidden;pointer-events:none;
    background-repeat:no-repeat;mix-blend-mode:screen;opacity:.85;animation:band 5.5s steps(1) infinite}
  @keyframes band{0%,88%{opacity:0}89%{opacity:.9;transform:translateX(-9px)}92%{opacity:.7;transform:translateX(7px)}94%{opacity:0;transform:none}100%{opacity:0}}
  @media (prefers-reduced-motion:reduce){.torn .band{display:none}}


/* ------------------------------------------------------------ the menu */
.bar .wrap.barInner{display:flex;align-items:center;gap:12px}
.burger{margin-left:auto;width:42px;height:32px;background:#000;border:1px solid var(--line);cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.burger:hover{border-color:var(--green)}
.menu{border-bottom:1px solid var(--line);background:#000;padding:4px 0}
.menu[hidden]{display:none}
.menu .wrap{display:flex;flex-direction:column}
.menu a{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:14px 2px;border-bottom:1px solid #0b1a0f;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.menu a:last-child{border-bottom:0}
.menu a:hover{color:var(--green);background:#040904}
.menu a.here{color:var(--green)}
.menu a em{font-style:normal;color:var(--dim);font-size:10.5px;letter-spacing:1px}
@media(min-width:760px){
  .menu{padding:0}
  .menu .wrap{flex-direction:row;flex-wrap:wrap;gap:0 26px}
  .menu a{border-bottom:0;padding:12px 0}
  .menu a em{display:none}
}

/* a tile keeps its shape before the image arrives, so lazy loading has a box to intersect */
.pieceTile img{aspect-ratio:1/1;background:#010602}
.pageStage img,#stageImage,#showcase{aspect-ratio:1/1}


/* ------------------------------------------------------------ the top bar
   One slim line: a prompt, the name with a blinking cursor, the page you are on, and the button.
   No gradients, no pills, nothing that would not survive being printed on a terminal. */
header.bar{border-bottom:1px solid var(--line)}
.bar .wrap.barInner{display:flex;align-items:center;gap:14px;min-height:62px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:9px;margin-right:0;text-decoration:none;color:var(--green);
  font-family:'VT323',monospace;font-size:27px;letter-spacing:5px;line-height:1}
.brand:hover .brandWord{color:var(--amber)}
.brandTick{width:3px;height:21px;background:var(--amber);display:block}
.brandCaret{width:10px;height:19px;background:var(--green);display:block;animation:brandBlink 1.15s steps(1) infinite}
@keyframes brandBlink{0%,52%{opacity:1}53%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.brandCaret{animation:none}}
.barHere{margin-left:auto;font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.burger{margin-left:2px;display:flex;align-items:center;gap:10px;background:#000;border:1px solid var(--line);
  padding:8px 12px;cursor:pointer;border-radius:0;width:auto;height:auto}
/* the base sheet squashes every span inside the button, so the word and the bar stack are restored here,
   and the selectors carry the bar prefix because the base rules for the button win on a plain match */
header.bar .burger{width:auto;height:auto;flex:0 0 auto}
header.bar .burger .burgerWord{height:auto;width:auto;background:none}
header.bar .burger .burgerBars{height:auto;width:16px;background:none}
header.bar .burger .burgerBars i{width:100%;background:var(--green)}
.burger:hover{border-color:var(--green);background:#040904}
.burger:hover .burgerWord,.burger.on .burgerWord{color:var(--green)}
.burgerWord{font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--dim);line-height:1}
.burgerBars{display:flex;flex-direction:column;gap:4px;width:16px}
.burgerBars i{display:block;height:2px;background:var(--green)}
.burger.on .burgerBars i:first-child{transform:translateY(6px) rotate(45deg)}
.burger.on .burgerBars i:nth-child(2){opacity:0}
.burger.on .burgerBars i:last-child{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:520px){.barHere{display:none}}
@media (max-width:430px){.burgerWord{display:none}.burger{padding:8px 10px}}


/* ------------------------------------------------------------ the upgrade
   Flat, printed, one accent colour. Nothing here uses a gradient: the look comes from spacing,
   one pixel rules, dotted leaders and a single amber mark. */
section{padding:54px 0}
@media (max-width:760px){section{padding:38px 0}}
h2{font-size:clamp(30px,4.4vw,42px);letter-spacing:1.8px;margin-bottom:2px}
h3{letter-spacing:.6px}
.kicker{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.kicker i{flex:1;height:1px;background:var(--line);max-width:120px}
.kicker b{color:var(--amber);font-weight:700}
.facts{grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px}
.facts div{padding:12px 15px}
.facts dt{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:2px}
.facts dt::before{content:"\25A0";color:var(--amber);font-size:7px;line-height:1}
.facts dd{font-size:24px;text-shadow:none}
.panel{border-color:var(--line);background:var(--panel)}
.panel .head{border-bottom:1px solid var(--line);background:#010502}
.panel .head::before{content:"\25CF";color:var(--green);font-size:8px;margin-right:9px;line-height:1}
.panel .head span:first-child{letter-spacing:2.2px;text-transform:uppercase;font-size:11px}
button{border-radius:0;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:2.2px;
  text-transform:uppercase;height:46px;padding:0 22px;transition:background .12s linear,color .12s linear}
button:hover:not(:disabled){background:#000;color:var(--green)}
button.ghost{background:#010502}
button.ghost:hover:not(:disabled){background:#040904;border-color:var(--green)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
table{font-size:13px}
table th{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--dim);font-weight:600}
table tr:nth-child(even) td{background:#030704}
table tr:hover td{background:#040b06}
a{color:var(--green);text-decoration:none;border-bottom:1px solid #1d4a2c}
a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.log::before{content:"> ";color:var(--dim)}
.log{line-height:1.7}
.plate .cap{border-top:1px solid var(--line);padding-top:9px;margin-top:12px}
.track i{background:var(--green)}


/* ------------------------------------------------------- the wallet dialog
   Flat like the rest: one border, one accent, no gradients. The QR sits on white because a QR on a
   dark panel is harder for a phone camera to read. */
.walletBtn{background:#010502;border:1px solid var(--line);color:var(--green);font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;height:36px;padding:0 14px;cursor:pointer}
.walletBtn:hover{background:#040904;border-color:var(--green)}
@media (max-width:520px){.walletBtn{font-size:10px;letter-spacing:1.2px;padding:0 10px;height:32px}}
.dlg{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:60;display:flex;align-items:center;justify-content:center;padding:18px}
.dlg[hidden]{display:none}
.dlgPanel{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);max-height:92vh;overflow:auto}
.dlgHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.dlgTitle{font-family:'VT323',monospace;font-size:24px;color:var(--green);letter-spacing:1px}
.dlgX{background:none;border:0;color:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;height:auto;padding:0}
.dlgX:hover{color:var(--amber)}
.dlgBody{padding:18px 16px 20px}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:#010502;border:1px solid var(--line);
  color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:13px;padding:13px 14px;margin-bottom:10px;cursor:pointer;
  height:auto;letter-spacing:0;text-transform:none;line-height:1.4}
.opt:hover{background:#040904;border-color:var(--green)}
.opt .ico{color:var(--amber);font-size:14px;line-height:1.2}
.opt small{display:block;color:var(--dim);font-size:11px;margin-top:4px;letter-spacing:0}
.dlgNote{color:var(--dim);font-size:12px;line-height:1.65;margin:10px 0 0}
.dlgNote b{color:var(--ink)}
.qrHead{font-size:13.5px;color:var(--ink);margin-bottom:14px}
.qrWrap{text-align:center}
.qrCard{display:inline-block;background:#fff;padding:18px;border:1px solid #ffffff;line-height:0}
.qrSteps{margin:16px 0 6px;color:var(--dim);font-size:11px;line-height:2;letter-spacing:1.2px;text-transform:uppercase}
.qrSteps span{color:var(--amber);margin-right:7px}
.qrState{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:12px;margin-top:6px}
.qrDot{width:7px;height:7px;background:var(--green);animation:qrpulse 1.1s steps(2,end) infinite}
@keyframes qrpulse{0%,100%{opacity:1}50%{opacity:.12}}
.qrLink{display:inline-block;margin-top:10px;color:var(--amber);border-bottom:1px solid var(--amber);font-size:11.5px}
.addrBox{margin-top:10px;padding:11px 12px;border:1px solid var(--line);background:#010502;color:var(--green);
  font-family:'IBM Plex Mono',monospace;font-size:12px;word-break:break-all}
.back{background:none;border:0;color:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;padding:0;margin-bottom:14px;height:auto}
.back:hover{color:var(--amber)}


/* ------------------------------------------------------------ the polish pass
   Balance first, then legibility. Still flat: no gradient anywhere, the only new marks are one pixel rules. */
.split{align-items:center;gap:52px}
@media (max-width:860px){.split{gap:34px}}
section + section{border-top:1px solid #0b2415}
::selection{background:var(--green);color:#000}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#134023;border:1px solid #1d4a2c}
::-webkit-scrollbar-thumb:hover{background:#1d4a2c}
:root{--dim:#58ad77}
.pieceTile figcaption{font-size:11.5px}
.traitLine{font-size:11px}
.gradeRow>.gradeTitle span{font-size:12.5px}
.facts dt{font-size:11.5px}
.gradeRow>.gradeTitle .gradeBar{background:#0d2a18;border:1px solid var(--line)}
.boot pre{white-space:pre-wrap;word-break:break-word;overflow-x:hidden}
@media (max-width:620px){
  .boot .interior{width:92vw}
  .boot .interior p{font-size:19px;letter-spacing:1.6px;margin-bottom:8px}
  .boot pre{font-size:11.5px;line-height:1.62;padding:11px;min-height:120px}
  .bootHint{font-size:10.5px;letter-spacing:1.1px}
  h1{font-size:clamp(30px,9vw,40px)}
  .lede{font-size:14.5px}
}

/* the hero's primary action reads as the one thing to press */
.ctaBig{height:52px;padding:0 30px;font-size:14px;letter-spacing:2.6px}

/* the home hero asks a little less space above itself so the action is on screen without scrolling */
.heroTop{padding-top:30px}
.heroTop h1{margin-bottom:14px}
.heroTop .lede{margin-bottom:18px}
@media (max-width:860px){.heroTop{padding-top:20px}}

/* a short window must still show the whole promise, not half a sentence */
@media (max-height:800px){
  header.bar .wrap{min-height:52px;padding-top:6px;padding-bottom:6px}
  .heroTop{padding-top:16px}
  .heroTop h1{font-size:clamp(28px,3.6vw,38px);line-height:1.04;margin-bottom:10px}
  .heroTop .lede{font-size:15px;margin-bottom:14px}
  .faultBar{margin-bottom:10px}
  .ctaBig{height:46px;font-size:13px}
}
/* a very short window drops the hero to its promise and the one action, nothing else */
@media (max-height:700px){
  .heroTop{padding-top:12px}
  .heroTop h1{font-size:30px;margin-bottom:8px}
  .heroTop .faultBar{padding:6px 10px;font-size:11px}
  .ticker{display:none}
  /* the action climbs above the description so a short window still shows something to press */
  .heroTop .split>div:first-child{display:flex;flex-direction:column}
  .heroTop .split>div:first-child h1{order:1}
  .heroTop .split>div:first-child .row{order:2;margin-bottom:14px}
  .heroTop .split>div:first-child .faultBar{order:0}
  .heroTop .split>div:first-child .lede{order:3;font-size:14px;line-height:1.5;margin:0 0 10px}
  .heroTop .split>div:first-child .log{order:4}
}

/* the burn and repair panel: same flat furniture as the rest of the page */
.bayRow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.bayLabel{min-width:200px;color:var(--dim);font-size:13px}
.bayRow input{width:104px;height:44px;background:#12161a;border:1px solid var(--line);color:var(--ink);
  font-family:'IBM Plex Mono',ui-monospace,monospace;padding:0 10px}
.bayRow input:focus{border-color:var(--green)}
#bayPanel .log{margin-top:12px}
@media (max-width:620px){.bayLabel{min-width:100%}}

.baySteps{color:var(--dim);font-size:11.5px;letter-spacing:1.1px;line-height:1.9;margin:0 0 10px;text-transform:uppercase}
.bayMine{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.chip{background:#010502;border:1px solid var(--line);color:var(--green);font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:1px;height:32px;padding:0 10px;cursor:pointer;text-transform:none}
.chip:hover{background:#040904;border-color:var(--amber);color:var(--amber)}

.bayHint{color:var(--dim);font-size:12.5px;line-height:1.65;margin:0 0 12px}

/* the pick list: the pieces a wallet holds, as pictures, because a number is harder to recognise */
.bayPick{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 14px}
.pickTile{width:112px;background:#010602;border:1px solid var(--line);padding:6px;cursor:pointer;text-align:center}
.pickTile img{display:block;width:100%;height:auto;border:1px solid #0b2415}
.pickTile b{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--dim);margin-top:5px;text-transform:uppercase}
.pickTile:hover{border-color:var(--green)}
.pickTile.on{border-color:var(--amber);background:#0b0a02}
.pickTile.on b{color:var(--amber)}
@media (max-width:620px){.pickTile{width:86px}}

.pickMark{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim);margin-top:3px;letter-spacing:1px}
.pickTile.on .pickMark{color:var(--amber)}
.pickTile.on img{border-color:var(--amber)}

/* the status panel turns green when the archive is running, and keeps the red setback look for a failure */
.stop.ok{background:#030b06;border-top-color:#134023;border-bottom-color:#134023}
.stop.ok .faultCode{border-color:#1d4a2c;background:#04120a;color:var(--green)}
.stop.ok h2{color:#c8ffd8;text-shadow:2px 0 rgba(57,255,136,.35),-2px 0 rgba(255,184,77,.18)}
.stop.ok .info{color:#bfe8cd}

/* ---------------------------------------------------- the wide screen pass
   On a 1920 canvas the sheet held the content to 1080px, which left 415px of dead space on each side
   and made body copy look small. The container, the type and the rhythm now grow with the viewport,
   while the reading measure stays capped so lines never run the whole width. */
@media (min-width:1400px){
  .wrap{max-width:1240px}
  body{font-size:15px}
  section{padding:62px 0}
  .lede{max-width:62ch}
}
@media (min-width:1700px){
  .wrap{max-width:1420px}
  body{font-size:15.5px}
  section{padding:70px 0}
  h1{letter-spacing:1.6px}
  h2{font-size:clamp(34px,3.2vw,50px)}
  .facts dd{font-size:27px}
  .pieceTile figcaption{font-size:12px}
  .traitLine{font-size:11.5px}
}
@media (min-width:2100px){
  .wrap{max-width:1580px}
  body{font-size:16px}
  .lede{max-width:66ch}
}

/* the dense technical strings are the first thing to strain on a big screen, so they grow with it */
@media (min-width:1400px){
  .hashStream{font-size:12.5px;line-height:1.85}
  .machineLog{font-size:12.5px}
  .diag dt{font-size:11px}
  .diag dd{font-size:21px}
  .diag div{padding:11px 13px}
}
@media (min-width:1700px){
  .hashStream{font-size:13px}
  .machineLog{font-size:13px}
  .diag dt{font-size:11.5px;letter-spacing:1.6px}
  .diag dd{font-size:23px}
  .steps3>div{padding:20px 22px}
  .steps3{grid-template-columns:repeat(3,1fr);gap:16px}
  table{font-size:14px}
  pre{font-size:13.5px}
}

/* the pick counter sits next to the buttons and is the only thing telling you how many are picked,
   so it should not read as fine print */
#baySel{font-size:13.5px;color:var(--ink)}
@media (min-width:1700px){#baySel{font-size:14.5px}}

/* on a phone the status table ran past the screen: a 190px label column plus a 42 character address
   that cannot break pushed the page sideways. The rows stack instead, and long strings may break. */
@media (max-width:620px){
  .stop table{table-layout:fixed;width:100%;margin:14px 0 16px}
  .stop td{display:block;width:100%}
  .stop td:first-child{width:auto;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;padding-bottom:1px}
  .stop td+td{font-size:13.5px;line-height:1.6;overflow-wrap:anywhere;word-break:break-word;padding-top:0;padding-bottom:10px}
  .stop h2{font-size:clamp(26px,8.4vw,36px)}
  .stop .faultCode{font-size:11px;letter-spacing:1.6px}
}

/* the contract address in the footer is one unbreakable 42 character string, and on a 320px screen it
   pushed the whole page sideways on its own */
@media (max-width:620px){
  footer{font-size:12px}
  footer p{line-height:1.7}
  #footContract, #footContract a, .muted a{overflow-wrap:anywhere;word-break:break-all}
}

/* the address is 42 characters of monospace, so on a phone it is given the one size that fits a line */
@media (max-width:620px){
  #stopRow1{font-size:12.5px;letter-spacing:0}
}

/* the market grid: the same tile as elsewhere, with a price line and an amber mark when it is yours */
/* the market grid: columns that fill the width instead of a loose row, three to a row on a phone */
.mGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:8px 0 4px}
.mTile{width:auto;min-width:0;background:#010602;border:1px solid var(--line);padding:7px;cursor:default;text-align:center}
@media (max-width:1400px){.mGrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1100px){.mGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.mGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
@media (max-width:700px){.mGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mTile{padding:5px}.mTile b{font-size:10px;letter-spacing:0}.mTile .mPrice{font-size:11px}.mTile .mCopy{height:25px;font-size:9px;letter-spacing:0;padding:0 2px}}
.mTile img{display:block;width:100%;height:auto;border:1px solid #0b2415}
.mTile b{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim);margin-top:5px;letter-spacing:1px}
.mTile .mPrice{display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--amber);margin-top:3px}
.mTile .mMine{display:block;font-size:10.5px;color:var(--green);margin-top:2px;text-transform:uppercase;letter-spacing:1.2px}
.mTile:hover{border-color:var(--green)}
.mTile.on{border-color:var(--amber);background:#0b0a02}
.mTile.on img{border-color:var(--amber)}
.mTile .mOff{display:block;font-size:10.5px;color:var(--amber);margin-top:2px}
.mTile .mCopy{display:block;width:100%;margin-top:6px;height:30px;padding:0;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1px;background:transparent;border:1px solid var(--line);color:var(--dim);cursor:pointer;text-transform:uppercase}
.mTile .mCopy:hover{border-color:var(--green);color:var(--green)}
.mTile .mCopy.done{border-color:var(--green);color:var(--green)}

/* the activity feed: one line per action, mono, with the money on the right */
.acts{margin-top:10px;border-top:1px solid #0b2415}
.acts .aRow{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid #0b2415;font-family:'IBM Plex Mono',monospace;font-size:12.5px;flex-wrap:wrap}
.acts .aRow:hover{background:#010602}
.acts .aWhen{color:var(--dim);min-width:76px}
.acts .aKind{min-width:150px;color:var(--ink)}
.acts .aKind.sold, .acts .aKind.accepted{color:var(--green)}
.acts .aKind.burned{color:var(--red)}
.acts .aKind.listed, .acts .aKind.offered{color:var(--amber)}
.acts .aWhat{color:var(--ink)}
.acts .aWho{color:var(--dim)}
.acts .aAmt{margin-left:auto;color:var(--amber)}
.acts a{color:var(--dim);text-decoration:none;border-bottom:1px dotted #123a22}
.acts a:hover{color:var(--green)}
@media (max-width:620px){.acts .aRow{font-size:11.5px}.acts .aKind{min-width:120px}.acts .aAmt{margin-left:0}}

/* the market page: the listings and the activity feed sit side by side, and the feed gets the filters */
.mktCols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:stretch}
.mktCols>.panel{height:100%}
/* the rarity row: one grade at a time on a phone, everything on a wide screen */
.mktFilters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 4px}
.actFilters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.fBtn{height:28px;padding:0 9px;background:transparent;border:1px solid var(--line);color:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1px;cursor:pointer;text-transform:uppercase}
.fBtn:hover{border-color:var(--green);color:var(--green)}
.fBtn.on{border-color:var(--amber);color:var(--amber)}
.acts{max-height:452px;overflow-y:auto}
@media (max-width:1100px){.mktCols{grid-template-columns:1fr}.acts{max-height:none;overflow:visible}}
@media (max-width:700px){.fBtn{height:26px;font-size:9.5px;letter-spacing:0;padding:0 7px}}

/* the market list, grouped by grade: the group header borrows the archive's own look */
#marketGrid{display:block}
#marketGrid .gradeRow{margin:0 0 18px}
#marketGrid .gradeRow>.gradeTitle{padding:9px 12px}
#marketGrid .gradeRow>.gradeTitle b{font-size:22px}
#marketGrid .gradeRow>.gradeTitle span{color:var(--dim);font-size:12px;letter-spacing:1px;margin-left:auto}
#marketGrid .gradeRow .mGrid{padding:12px}
@media (max-width:700px){#marketGrid .gradeRow>.gradeTitle b{font-size:19px}
  #marketGrid .gradeRow>.gradeTitle span{font-size:11px}#marketGrid .gradeRow .mGrid{padding:9px}}

/* the button that opens one grade fully, instead of one endless page */
.mMore{display:block;width:calc(100% - 24px);margin:0 12px 10px;height:32px;background:transparent;border:1px solid var(--line);
  color:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1.4px;cursor:pointer;text-transform:uppercase}
.mMore:hover{border-color:var(--green);color:var(--green)}
@media (max-width:700px){.mMore{width:calc(100% - 18px);margin:0 9px 8px;font-size:9.5px;letter-spacing:1px}}

/* everything on the market moves, nothing snaps: a short fade as a group or a row arrives, and a soft
   hand on the tiles and the filter buttons. All of it is skipped when the reader asked for less motion. */
@keyframes mktIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#marketGrid .gradeRow,#actList .aRow,.mTile{animation:mktIn .3s cubic-bezier(.22,.61,.36,1) both}
#marketGrid .gradeRow:nth-child(2){animation-delay:.05s}
#marketGrid .gradeRow:nth-child(3){animation-delay:.1s}
#marketGrid .gradeRow:nth-child(4){animation-delay:.15s}
.mTile{transition:border-color .18s ease,background .18s ease,transform .18s ease}
.mTile:hover{border-color:var(--green);transform:translateY(-2px)}
.mTile .mCopy{transition:border-color .16s ease,color .16s ease,background .16s ease}
.mTile .mCopy:active{transform:translateY(1px)}
.fBtn{transition:border-color .16s ease,color .16s ease,background .16s ease}
.acts .aRow{transition:background .18s ease}
.mMore{transition:border-color .16s ease,color .16s ease}
.gradeRow{transition:border-color .2s ease}
@media (prefers-reduced-motion: reduce){
  #marketGrid .gradeRow,#actList .aRow,.mTile,.mTile .mCopy,.fBtn,.acts .aRow,.mMore{animation:none;transition:none}
  .mTile:hover{transform:none}
}

/* a field the page just filled in says so for a moment */
input.need{border-color:var(--amber);background:#0b0a02;box-shadow:0 0 0 1px var(--amber)}

/* the market chart: an svg drawn from the feed's minute by minute history, flat colours only */
.chartWrap{position:relative;margin:6px 0 8px}
.chartWrap svg{display:block;width:100%;height:auto}
.chartLegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--dim)}
.chartLegend b{font-weight:400;color:var(--ink)}
.chartLegend i{display:inline-block;width:10px;height:2px;vertical-align:middle;margin-right:6px}
.chartLegend .l1 i{background:var(--amber)}
.chartLegend .l2 i{background:var(--green)}

/* the burn page on small screens. Grid children default to a minimum width of their own content, which is what
   pushed the two panels 47 pixels past the edge of a 360 pixel phone. min-width:0 lets them shrink, and the
   three-across rows become single columns so nothing has to be squeezed. */
.mktCols > *{min-width:0}
#burn .panel .head{gap:10px;flex-wrap:wrap}
#burn .steps3 > *{min-width:0}
#burn .facts > *{min-width:0}
@media(max-width:720px){
  #burn .steps3{grid-template-columns:1fr}
  #burn .mktCols{grid-template-columns:1fr}
}