/* The shared palette is in /tokens.css, the canonical copy of which lives in
   the meticstate repo. Only what this app alone needs is here.

   --line was #3a4648 here and the other two properties carried #3a4649 under
   the name --edge. One colour, two names, one digit apart. It aliases now.

   --amber and --hot stay separate from the dashboard's --warn and --bad.
   Section 12 says amber and red are heat signals and nothing else, never
   decoration and never a button. A status colour that looks similar is a
   different thing. */
:root{
  --line:var(--edge);
  --panel2:#2f3a3c;
  --dimmer:#93a5a2;
  --amber:#d9923a; --hot:#d9553a;
  /* Signal colours double as text. The graphic values stay put because a bar
     or a border only needs 3:1; the -ink pair is what any text uses. */
  --hot-ink:#ff7952; --amber-ink:#f0a84a;
  --npu:#2ebd3a; --gpu:#7cb2c9; --cpu:#a8b3b0;
  --spring:cubic-bezier(.34,1.4,.64,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:400;
  color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased}
.phone{width:100%;height:100%;max-width:520px;margin:0 auto;position:relative;overflow:hidden;
  display:flex;flex-direction:column;background:var(--bg);
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.amb{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(130% 70% at 18% -6%,rgba(46,189,58,.11),transparent 58%),
    radial-gradient(110% 60% at 92% 4%,rgba(93,154,181,.08),transparent 60%),
    radial-gradient(150% 80% at 50% 110%,rgba(0,0,0,.42),transparent 60%);
  animation:drift 22s var(--ease-io) infinite alternate}
@keyframes drift{to{transform:translate3d(0,-10px,0) scale(1.05)}}
.grain{position:absolute;inset:-40%;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
.mesh{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(237,242,240,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(237,242,240,.022) 1px,transparent 1px);background-size:28px 28px}
.watermark{position:absolute;top:8%;right:-26%;width:94%;z-index:0;pointer-events:none;opacity:.03;
  animation:wmDrift 30s var(--ease-io) infinite alternate}
@keyframes wmDrift{to{transform:translate3d(-14px,16px,0) rotate(4deg)}}

/* boot */
.boot{position:absolute;inset:0;z-index:60;background:var(--bg-deep);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.boot.gone{opacity:0;transform:scale(1.06);pointer-events:none}
.bl{display:flex;justify-content:space-between;opacity:0;animation:blIn .32s var(--ease) forwards}
.bl .ok{color:var(--green-hi)} .bl .no{color:var(--hot-ink)}
@keyframes blIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.bootbar{width:210px;height:2px;background:rgba(237,242,240,.09);border-radius:2px;overflow:hidden}
.bootbar i{display:block;height:100%;width:0;background:var(--green-hi);
  box-shadow:0 0 10px var(--green-hi);animation:bootFill 1.6s var(--ease-io) forwards}
@keyframes bootFill{to{width:100%}}

/* header */
.hdr{position:relative;z-index:30;background:linear-gradient(180deg,rgba(35,43,45,.92),rgba(35,43,45,.62));
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid rgba(237,242,240,.07)}
.brand{display:flex;align-items:center;gap:11px;padding:14px 20px 13px}
.logoslot{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(46,189,58,.14),rgba(237,242,240,.025));
  border:1px solid rgba(46,189,58,.26);box-shadow:inset 0 1px 0 rgba(237,242,240,.11),0 0 18px rgba(46,189,58,.1)}
.logoslot svg{width:23px;height:23px;display:block;filter:drop-shadow(0 0 5px rgba(46,189,58,.4))}
.brand .stack{flex:1;min-width:0}
.brand .n{font-family:Archivo,sans-serif;font-size:19px;font-weight:800;letter-spacing:.17em;line-height:1;
  background:linear-gradient(180deg,#fff,#b9c6c3);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--dimmer);letter-spacing:.14em;margin-top:5px}
.ms{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.ms .r{width:22px;height:2px;border-radius:1px;background:var(--green-hi);box-shadow:0 0 8px rgba(46,189,58,.6)}
.ms .w{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase;line-height:1}

/* screens */
.screens{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative;z-index:10;-webkit-overflow-scrolling:touch}
.screens::-webkit-scrollbar{display:none}
.screen{display:none;padding:18px 18px 112px}
.screen.on{display:block}
.screen.in-r{animation:slideR .42s var(--ease) both}
.screen.in-l{animation:slideL .42s var(--ease) both}
@keyframes slideR{from{opacity:0;transform:translateX(26px)}}
@keyframes slideL{from{opacity:0;transform:translateX(-26px)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* tabs */
.tabs{position:absolute;left:14px;right:14px;z-index:40;bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;border-radius:19px;overflow:hidden;max-width:492px;margin:0 auto;
  background:linear-gradient(168deg,rgba(40,49,51,.88),rgba(31,39,41,.82));
  backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);
  border:var(--glass-br);box-shadow:var(--glass-sh)}
.tabs .ind{position:absolute;top:5px;bottom:5px;width:calc(33.333% - 6px);left:5px;border-radius:14px;
  background:linear-gradient(168deg,rgba(46,189,58,.17),rgba(46,189,58,.05));
  border:1px solid rgba(46,189,58,.25);transition:transform .48s var(--spring)}
.tab{flex:1;background:none;border:0;color:var(--dimmer);padding:12px 0 13px;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.15em;
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:color .3s var(--ease);position:relative;z-index:2}
.tab svg{display:block;opacity:.6;transition:opacity .3s,transform .4s var(--spring)}
.tab.on{color:var(--green-hi)} .tab.on svg{opacity:1;transform:translateY(-1px)}

/* primitives */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(237,242,240,.1),transparent)}
.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);border:var(--glass-br);box-shadow:var(--glass-sh);border-radius:17px}
.runbtn{position:relative;width:100%;border:0;border-radius:15px;cursor:pointer;padding:15px;
  font-family:Archivo,sans-serif;font-weight:800;font-size:13px;letter-spacing:.11em;color:#0c2410;
  overflow:hidden;margin-bottom:13px;background:linear-gradient(168deg,#44d950,#1f9c2a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 24px rgba(46,189,58,.26);
  transition:transform .3s var(--spring),box-shadow .3s var(--ease)}
.runbtn:active{transform:scale(.975)}
.runbtn span{position:relative;z-index:2}
.runbtn .sweep{position:absolute;inset:0;z-index:1;width:0;background:linear-gradient(90deg,rgba(255,255,255,.26),rgba(255,255,255,.07))}
.runbtn.busy{background:linear-gradient(168deg,rgba(237,242,240,.07),rgba(237,242,240,.02));color:var(--dim);
  cursor:default;box-shadow:inset 0 1px 0 rgba(237,242,240,.08);border:1px solid rgba(237,242,240,.08)}
.runbtn.busy .sweep{background:linear-gradient(90deg,rgba(46,189,58,.26),rgba(46,189,58,.07))}
.lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--dimmer)}
.meter{padding:13px 15px 14px;margin-bottom:12px}
.meter .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.meter .val{font-size:14px;font-weight:600;font-family:'IBM Plex Mono',monospace;transition:color .5s var(--ease)}
.track{height:6px;background:rgba(0,0,0,.4);border-radius:4px;overflow:hidden;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.fill{height:100%;width:0;border-radius:4px;position:relative;transition:width .3s linear,background .7s var(--ease)}

/* lanes */
.lane{cursor:pointer;padding:13px 14px 11px;margin-bottom:10px;position:relative;overflow:hidden;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .4s var(--ease)}
.lane.lead{border-color:rgba(46,189,58,.36);
  box-shadow:inset 0 1px 0 rgba(237,242,240,.11),0 14px 34px rgba(0,0,0,.42),0 0 26px rgba(46,189,58,.11)}
.lane.refused{opacity:.72}
.lane .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.lane .who{display:flex;align-items:center;gap:9px}
.dot{width:8px;height:8px;border-radius:50%;flex:none;transition:box-shadow .4s}
.lane.live .dot{animation:pulse 1.5s var(--ease-io) infinite}
@keyframes pulse{50%{transform:scale(1.35);opacity:.65}}
.lane .name{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:700;letter-spacing:.14em}
.lane .sub{font-size:11px;color:var(--dimmer);margin-top:3px;line-height:1.4}
.badge{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;padding:4px 8px;border-radius:7px;
  background:rgba(0,0,0,.3);color:var(--dimmer);border:1px solid rgba(237,242,240,.07)}
.badge.auto{color:var(--green-hi);border-color:rgba(46,189,58,.32);background:rgba(46,189,58,.09)}
.badge.no{color:var(--hot-ink);border-color:rgba(217,85,58,.3);background:rgba(217,85,58,.08)}
canvas.scope{width:100%;height:48px;display:block;margin-bottom:10px;border-radius:7px}
.readout{display:flex;gap:15px;align-items:baseline;flex-wrap:wrap}
.ro{display:flex;align-items:baseline;gap:4px}
.ro .v{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;transition:color .5s var(--ease)}
.ro .u{font-size:10.5px;color:var(--dimmer);letter-spacing:.06em}
.ro.small .v{font-size:12px;color:var(--dim);font-weight:400}
.whynot{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.6;color:var(--dimmer);
  border-left:2px solid rgba(217,85,58,.4);padding-left:9px}

/* banner */
.banner{display:flex;gap:9px;align-items:flex-start;border-radius:13px;padding:11px 13px;margin-bottom:13px;
  background:rgba(217,146,58,.07);border:1px solid rgba(217,146,58,.22)}
.banner i{width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none;margin-top:6px;box-shadow:0 0 8px var(--amber)}
.banner p{font-size:12px;line-height:1.65;color:var(--dim)}
.banner b{color:var(--amber-ink);font-weight:600}

/* sheet + detail */
.scrim{position:absolute;inset:0;z-index:48;background:rgba(10,14,15,.5);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:50;border-radius:26px 26px 0 0;
  padding:10px 0 calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(170deg,rgba(47,58,60,.96),rgba(31,39,41,.97));
  backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7);
  border-top:1px solid rgba(237,242,240,.13);box-shadow:0 -22px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(237,242,240,.14);
  transform:translateY(102%);transition:transform .62s var(--ease)}
.sheet.on{transform:translateY(0)}
.grab{width:38px;height:4px;border-radius:3px;background:rgba(237,242,240,.22);margin:4px auto 14px}
.deck{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:11px;padding:0 18px 4px;scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.dcard{flex:none;width:calc(100% - 36px);scroll-snap-align:center;cursor:pointer;position:relative;
  background:linear-gradient(168deg,rgba(237,242,240,.06),rgba(237,242,240,.015));
  border:1px solid rgba(237,242,240,.09);border-radius:17px;padding:17px;
  box-shadow:inset 0 1px 0 rgba(237,242,240,.09);transition:transform .3s var(--ease)}
.dcard:active{transform:scale(.985)}
.dcard .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--dimmer);margin-bottom:9px}
.dcard .big{font-family:'IBM Plex Mono',monospace;font-size:33px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:5px;color:var(--green-hi)}
.dcard .big.warn{color:var(--hot-ink)}
.dcard .unit{font-size:12px;color:var(--dim);font-weight:400;letter-spacing:0}
.dcard p{font-size:12px;line-height:1.65;color:var(--dim);margin-top:9px}
.dcard p b{color:var(--ink);font-weight:600}
.dcard .more{position:absolute;top:15px;right:15px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--dimmer)}
.cmprow{display:flex;align-items:center;gap:9px;margin-top:9px}
.cmprow .cl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--dim);width:62px;flex:none}
.cmpbar{flex:1;height:13px;background:rgba(0,0,0,.4);border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.cmpbar i{display:block;height:100%;border-radius:4px;width:0;transition:width 1.1s var(--ease)}
.cmprow .cv{font-family:'IBM Plex Mono',monospace;font-size:11px;width:62px;text-align:right;flex:none}
.dots{display:flex;gap:6px;justify-content:center;margin-top:14px}
.dots i{width:5px;height:5px;border-radius:50%;background:rgba(237,242,240,.2);transition:all .35s var(--ease)}
.dots i.on{background:var(--green-hi);width:16px;border-radius:3px}
.sheetclose{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--dimmer);padding:6px 14px}
.detail{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;
  background:linear-gradient(172deg,#2b3537,#1d2526 60%);padding-top:env(safe-area-inset-top);
  opacity:0;pointer-events:none;transform-origin:50% 50%;
  transition:opacity .34s var(--ease),transform .46s var(--ease)}
.detail.on{opacity:1;pointer-events:auto;transform:none !important}
.dhead{display:flex;align-items:center;gap:12px;padding:16px 18px 13px;border-bottom:1px solid rgba(237,242,240,.08);flex:none}
.dback{width:32px;height:32px;border-radius:9px;flex:none;border:1px solid rgba(237,242,240,.1);
  background:rgba(237,242,240,.045);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:15px;line-height:1;padding:0}
.dhead .t{font-family:Archivo,sans-serif;font-weight:800;font-size:15px}
.dhead .s{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--dimmer);text-transform:uppercase;margin-top:3px}
.dbody{flex:1;overflow-y:auto;padding:16px 18px 26px;scrollbar-width:none}
.dbody::-webkit-scrollbar{display:none}
.dhero{font-family:'IBM Plex Mono',monospace;font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1;margin-bottom:5px}
.dhero .u{font-size:14px;font-weight:400;color:var(--dim);letter-spacing:0}
.dlede{font-size:13px;line-height:1.65;color:var(--dim);margin-bottom:16px}
.dlede b{color:var(--ink);font-weight:500}
canvas.dchart{width:100%;height:146px;display:block;border-radius:10px;margin-bottom:6px;background:rgba(0,0,0,.3)}
.legend{display:flex;gap:13px;margin:9px 0 17px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--dim)}
.legend i{width:9px;height:2.5px;border-radius:2px;display:block}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(237,242,240,.08);
  border:1px solid rgba(237,242,240,.08);border-radius:12px;overflow:hidden;margin-bottom:18px}
.dgrid div{background:#232b2d;padding:9px 7px;text-align:center}
.dgrid .h{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;color:var(--dimmer);text-transform:uppercase}
.dgrid .c{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-variant-numeric:tabular-nums}
.dsec{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--dimmer);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.dsec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(237,242,240,.1),transparent)}
.dnote{font-size:12px;line-height:1.65;color:var(--dim);font-style:italic}

/* die */
.dietitle{font-family:Archivo,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.diesub{font-size:12.5px;color:var(--dim);margin-bottom:14px;line-height:1.65}
.diewrap{position:relative;background:rgba(0,0,0,.34);border:1px solid rgba(237,242,240,.07);
  border-radius:17px;padding:12px;margin-bottom:13px;box-shadow:inset 0 1px 0 rgba(237,242,240,.06),inset 0 0 40px rgba(0,0,0,.4)}
.reticle{position:absolute;width:13px;height:13px;border:1.5px solid rgba(46,189,58,.5);pointer-events:none}
.reticle.tl{top:7px;left:7px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.reticle.tr{top:7px;right:7px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.reticle.bl{bottom:7px;left:7px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.reticle.br{bottom:7px;right:7px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.spec{padding:12px 13px;border-radius:14px;background:linear-gradient(168deg,rgba(237,242,240,.05),rgba(237,242,240,.013));
  border:1px solid rgba(237,242,240,.07);box-shadow:inset 0 1px 0 rgba(237,242,240,.07)}
.spec .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);margin-bottom:5px}
.spec .v{font-size:13.5px;font-weight:600;font-family:'IBM Plex Mono',monospace;word-break:break-word}
.sig{margin-top:18px;padding-top:15px;border-top:1px solid rgba(237,242,240,.07);display:flex;align-items:center;gap:10px}
.sig .r{width:18px;height:2px;background:var(--green-hi);border-radius:1px;flex:none;box-shadow:0 0 8px rgba(46,189,58,.5)}
.sig .t{font-size:12.5px;color:var(--dim);font-style:italic}

/* wire */
.ticker{display:flex;gap:8px;overflow-x:auto;padding:0 0 13px;margin-bottom:4px;scroll-snap-type:x proximity;scrollbar-width:none}
.ticker::-webkit-scrollbar{display:none}
.tk{flex:none;scroll-snap-align:start;border-radius:13px;padding:10px 12px;min-width:92px;cursor:pointer;
  background:linear-gradient(168deg,rgba(237,242,240,.05),rgba(237,242,240,.013));
  border:1px solid rgba(237,242,240,.07);box-shadow:inset 0 1px 0 rgba(237,242,240,.07)}
.tk .s{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--dim)}
.tk .p{font-family:'IBM Plex Mono',monospace;font-size:14px;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.tk .c{font-family:'IBM Plex Mono',monospace;font-size:10.5px;display:flex;align-items:center;gap:3px}
.up{color:var(--green-hi)} .dn{color:var(--hot-ink)}
.statusrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mock{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.14em;padding:5px 10px;border-radius:7px;border:1px solid rgba(237,242,240,.08);
  color:var(--dim);background:rgba(0,0,0,.2)}
.mock i{width:4px;height:4px;border-radius:50%;background:var(--green-hi);animation:pulse 2s infinite}
.vhead{display:flex;align-items:center;gap:8px;margin:18px 0 10px}
.vhead .l{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)}
.vhead .r{flex:1;height:1px;background:linear-gradient(90deg,rgba(237,242,240,.1),transparent)}
.vhead .ext{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--dimmer);
  border:1px solid rgba(237,242,240,.1);border-radius:5px;padding:3px 7px}
.vstrip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:none}
.vstrip::-webkit-scrollbar{display:none}
.vcard{flex:none;width:188px;scroll-snap-align:start;cursor:pointer;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease);display:block}
.vcard:active{transform:scale(.975)}
.vthumbwrap{position:relative;border-radius:11px;overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(155deg,#1b2224 10%,var(--green) 95%);
  border:1px solid rgba(237,242,240,.09);box-shadow:inset 0 1px 0 rgba(237,242,240,.08)}
.vthumbwrap img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.18);mix-blend-mode:luminosity;opacity:.92}
.vthumbwrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,transparent 55%,rgba(27,34,36,.9))}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(27,34,36,.66);border:1px solid rgba(46,189,58,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 18px rgba(46,189,58,.22)}
.vout{position:absolute;left:7px;top:7px;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:8px;
  letter-spacing:.1em;color:var(--green-hi);background:rgba(10,14,15,.62);
  border:1px solid rgba(46,189,58,.3);border-radius:4px;padding:2px 5px}
.vmeta{padding:9px 2px 0}
.vch{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--green-hi);margin-bottom:4px}
.vti{font-size:12.5px;font-weight:500;line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vage{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--dimmer);margin-top:5px}
.story{padding:14px 0;border-bottom:1px solid rgba(237,242,240,.06);cursor:pointer;display:block;
  text-decoration:none;color:inherit;transition:transform .3s var(--ease)}
.story:active{transform:translateX(3px)}
.story:last-child{border-bottom:0}
.story .meta{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.story .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;padding:3px 7px;border-radius:6px;
  background:rgba(46,189,58,.11);color:var(--green-hi);border:1px solid rgba(46,189,58,.17)}
.story .ago{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--dimmer)}
.story h3{font-weight:500;font-size:15px;line-height:1.48}
.story.own{border-left:2px solid var(--green-hi);padding-left:11px;
  background:linear-gradient(90deg,rgba(46,189,58,.07),transparent 60%)}
.note{font-size:12px;color:var(--dim);margin-top:16px;line-height:1.65;font-style:italic}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* wire additions */
.stamp{display:inline-flex;gap:5px;align-items:baseline;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;color:var(--dimmer)}
.stamp b{color:var(--dim);font-weight:400}
canvas.tkspark{width:100%;height:18px;display:block;margin:2px 0 4px}
.board{margin-top:4px}
.grp{margin-bottom:14px;border-radius:14px;overflow:hidden;border:1px solid rgba(237,242,240,.07);
  background:linear-gradient(168deg,rgba(237,242,240,.035),rgba(237,242,240,.008))}
.grph{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);background:rgba(0,0,0,.22);border-bottom:1px solid rgba(237,242,240,.06)}
.grph span{color:var(--dimmer);font-size:10px}
.row{display:grid;grid-template-columns:50px 1fr 62px 58px;align-items:center;gap:6px;padding:9px 13px;
  cursor:pointer;border-bottom:1px solid rgba(237,242,240,.04);transition:background .25s var(--ease)}
.row:last-child{border-bottom:0}
.row:active{background:rgba(46,189,58,.06)}
.rs{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.rn{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp{font-family:'IBM Plex Mono',monospace;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.rc{font-family:'IBM Plex Mono',monospace;font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.boardtoggle{display:flex;align-items:center;gap:6px;margin:2px 0 12px;cursor:pointer;
  background:rgba(0,0,0,.22);border:1px solid rgba(237,242,240,.08);border-radius:8px;padding:9px 13px;
  min-height:40px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;color:var(--dimmer)}
.boardtoggle b{color:var(--dim);font-weight:400}
.boardtoggle svg{transition:transform .4s var(--spring);margin-left:2px}
.boardtoggle.open svg{transform:rotate(180deg)}
.board{display:none}
.board.open{display:block;animation:rise .4s var(--ease) both}

/* The real mark, straight from the apex master, inline and transparent.
   No plate, no rounded square, nothing to mismatch the background. The green
   is the apex #1a8021 and is left alone: it gets lifted with a glow rather
   than recoloured, per the brand rules. */
.logomark{width:34px;height:34px;flex:none;display:block}
.logomark .ms-w{fill:#edf2f0}
.logomark .ms-g{fill:var(--green);filter:drop-shadow(0 0 2.5px rgba(46,189,58,.7))}

.bootmark{width:124px;height:124px;display:block;overflow:visible;
  filter:drop-shadow(0 0 20px rgba(46,189,58,.26)) drop-shadow(0 0 46px rgba(46,189,58,.11))}
.bootmark .ms-w{fill:#edf2f0;stroke:#edf2f0}
.bootmark .ms-g{fill:var(--green);stroke:var(--green-hi)}

/* Draw the mark on rather than fading a square in. stroke-dasharray is in the
   path's own user space, and these paths are ~31k and ~13k units long, so the
   lengths are written out. pathLength="1" was tried first and resolved to one
   CSS pixel against a 31,328-unit path, which renders as a solid line and no
   animation at all. */
.bootmark path{
  vector-effect:non-scaling-stroke;stroke-width:1.2;
  fill-opacity:0;
  animation:msInk .5s ease-out 1.02s forwards, msFade .3s ease-out 1.3s forwards;
}
.bootmark .ms-w{
  stroke-dasharray:31329;stroke-dashoffset:31329;
  animation:msDrawW 1.25s cubic-bezier(.33,0,.2,1) .1s forwards,
            msInk .5s ease-out 1.02s forwards, msFade .3s ease-out 1.3s forwards;
}
.bootmark .ms-g:nth-of-type(1){
  stroke-dasharray:13070;stroke-dashoffset:13070;
  animation:msDrawG1 1.1s cubic-bezier(.33,0,.2,1) .34s forwards,
            msInk .5s ease-out 1.16s forwards, msFade .3s ease-out 1.44s forwards;
}
.bootmark .ms-g:nth-of-type(2){
  stroke-dasharray:8530;stroke-dashoffset:8530;
  animation:msDrawG2 1.0s cubic-bezier(.33,0,.2,1) .46s forwards,
            msInk .5s ease-out 1.16s forwards, msFade .3s ease-out 1.44s forwards;
}
@keyframes msDrawW{to{stroke-dashoffset:0}}
@keyframes msDrawG1{to{stroke-dashoffset:0}}
@keyframes msDrawG2{to{stroke-dashoffset:0}}
@keyframes msInk{to{fill-opacity:1}}
@keyframes msFade{to{stroke-opacity:0}}
@media(prefers-reduced-motion:reduce){
  .bootmark path,.bootmark .ms-w,.bootmark .ms-g{
    stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0;animation:none}
}

/* ---------------------------------------------------------------
   Accessibility pass, 13 November. Measured rather than guessed:
   every text tier above now clears 4.5:1 on every surface it sits
   on, and the clickable panels are real buttons so they answer to
   a keyboard and announce themselves.
   --------------------------------------------------------------- */

/* The panels were divs with click handlers. As buttons they inherit a
   user-agent look that has to be undone without touching their own rules. */
button.lane,button.tk,button.row,button.dcard{
  -webkit-appearance:none;appearance:none;font:inherit;color:inherit;
  text-align:left;width:100%}
button.lane{display:block}
button.tk{width:auto;display:block}
button.dcard{display:block;font-family:inherit}
button.row{display:grid}

/* Nothing here had a focus style, so a keyboard user was navigating blind.
   :focus-visible keeps it off pointer taps. */
:focus-visible{
  outline:2px solid var(--green-hi);outline-offset:3px;border-radius:6px}
.tab:focus-visible{outline-offset:-4px;border-radius:14px}
.lane:focus-visible,.dcard:focus-visible{outline-offset:2px;border-radius:17px}
.tk:focus-visible{border-radius:13px}
.row:focus-visible{outline-offset:-2px;border-radius:4px}
.story:focus-visible,.vcard:focus-visible{outline-offset:2px}
.screen:focus{outline:none}
.screen:focus-visible{outline:2px solid var(--green-hi);outline-offset:-4px}

/* A horizontally scrolling strip needs to be reachable without a mouse.
   Its children are buttons, so tabbing into them scrolls it. */
.ticker,.vstrip,.deck{scroll-padding-inline:18px}

/* The wordmark is gradient-filled text, which disappears entirely when the
   OS forces its own colours. */
@media (forced-colors: active){
  .brand .n{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}
  .glass,.lane,.tk,.dcard,.sheet,.detail{border:1px solid CanvasText}
  :focus-visible{outline:2px solid Highlight}
  .dot,.ind{forced-color-adjust:none}
}

/* Respect a smaller or larger system text size rather than locking px. */
@media (min-width:380px){ .story h3{font-size:15.5px} }

/* The tablist dissolves into the nav's flex row so the nav keeps its landmark. */
.tablist{display:contents}
/* Available to a screen reader, out of the way of everything else. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dhead .t{font-family:Archivo,sans-serif;font-weight:800;font-size:15px}

/* [hidden] sets display:none, and these all set display themselves, so the
   attribute lost. A keyboard user could tab into a closed dialog. */
.detail[hidden],.sheet[hidden],.scrim[hidden],.screen[hidden]{display:none !important}

/* The video strip when there is nothing in it. Secondary text on the panel
   reads 7.71:1, so it stays AAA rather than fading out of reach. */
.vnone{margin:2px 0 4px;padding:14px 16px;border:1px solid var(--edge);
  border-radius:3px;color:var(--dim);font-size:12.5px;line-height:1.55;max-width:62ch}