/* KERNEL — design system
   Concept: the product is a chip. Pages read like silicon: a die you can inspect,
   a process table, a datasheet. Monochrome; ice = live, copper = money. */
:root{
  --void:#000000;
  --die:#090A0D;
  --raised:#0D0F13;
  --rule:#1B1E24;
  --rule2:#2A2E36;
  --mute:#5A606B;
  --text2:#9AA0AB;
  --text:#ECEEF2;
  --ice:#CFE4FF;
  --copper:#D4955F;
  --ok:#8FE3B8;
  --warn:#F0C987;
  --bad:#FF9E8F;
  --sans:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1240px;
  /* aliases for older page styles */
  --black:var(--void);--panel:var(--die);--panel2:var(--raised);--line:var(--rule);
  --steel:var(--mute);--silver:var(--text2);--white:var(--text);--display:var(--sans);--body:var(--sans);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--void)}
body{background:var(--void);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--ice);outline-offset:3px}
::selection{background:var(--ice);color:#000}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono)}
.muted{color:var(--text2)}
.dim{color:var(--mute)}
.hidden{display:none!important}
.num{font-family:var(--mono);font-feature-settings:"zero" 1}

/* ---------- display type ---------- */
.display,h1.page,h2{font-family:var(--sans);font-stretch:118%;font-variation-settings:"wdth" 118;font-weight:640;letter-spacing:-.03em;line-height:1.02}
h1.page{font-size:clamp(40px,5.4vw,72px)}
h2{font-size:clamp(32px,4.2vw,58px)}
h3{font:600 17px/1.35 var(--sans);font-stretch:108%;font-variation-settings:"wdth" 108;letter-spacing:-.01em}
.lede{color:var(--text2);font-size:18px;line-height:1.55;max-width:540px}

/* ---------- nav ---------- */
nav.top{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.86);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--rule)}
nav.top .bar1{display:flex;align-items:center;gap:36px;height:62px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:28px;height:28px;border-radius:6px}
.brand span{font:760 15px var(--sans);font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:.16em}
.links{display:flex;gap:28px;font-size:14px;color:var(--text2)}
.links a{position:relative;padding:21px 0}
.links a:hover{color:var(--text)}
.links a.on{color:var(--text)}
.links a.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--text)}
.navr{margin-left:auto;display:flex;gap:8px;align-items:center}
.ca{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border:1px solid var(--rule2);border-radius:2px;background:none;cursor:pointer;font:12px var(--mono);color:var(--text2)}
.ca b{font:600 12px var(--sans);font-stretch:112%;font-variation-settings:"wdth" 112;color:var(--text);letter-spacing:.04em}
.ca:hover{border-color:var(--mute);color:var(--text)}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--rule2);border-radius:2px;color:var(--text2)}
.icon-btn:hover{color:var(--text);border-color:var(--mute)}

/* system bar: real chain data under the nav */
.sysbar{border-top:1px solid var(--rule);height:30px;display:flex;align-items:stretch;font:11.5px/30px var(--mono);color:var(--mute);overflow:hidden;white-space:nowrap}
.sysbar>span{padding:0 14px;border-right:1px solid var(--rule)}
.sysbar>span:first-child{padding-left:0}
.sysbar b{font-weight:400;color:var(--text2);margin-left:8px}
.sysbar .tick b{color:var(--text)}
.sysbar .flash b{color:var(--ice);transition:color 0s}
.sysbar b{transition:color 1.2s}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;border:1px solid var(--text);border-radius:2px;background:var(--text);color:#000;font:560 14px var(--sans);font-stretch:108%;font-variation-settings:"wdth" 108;letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.btn:hover{background:var(--ice);border-color:var(--ice)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--rule2)}
.btn.ghost:hover{border-color:var(--text);background:transparent}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:var(--text);border-color:var(--text)}

/* ---------- page head + sections ---------- */
header.pagehead{padding:84px 0 48px;border-bottom:1px solid var(--rule)}
header.pagehead .lede{margin-top:20px}
section.sec{padding:128px 0;border-top:1px solid var(--rule)}
.sec-head{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end;margin-bottom:64px}
.sec-head .lede{justify-self:end}

/* ---------- panels ---------- */
.panel{border:1px solid var(--rule);background:var(--die);border-radius:3px;overflow:hidden}
.panel .ph{display:flex;align-items:center;justify-content:space-between;gap:12px;height:46px;padding:0 18px;border-bottom:1px solid var(--rule);font-size:13px;color:var(--text2)}
.panel .ph a{color:var(--mute)}
.panel .ph a:hover{color:var(--text)}
.panel .pb{padding:20px}

/* spec cells */
.stats{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--die)}
.stats>div{padding:18px 20px 20px;border-right:1px solid var(--rule)}
.stats>div:last-child{border-right:0}
.stats small{display:block;font-size:12.5px;color:var(--mute)}
.stats b{display:block;font:400 22px var(--mono);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em}

/* state LED */
.pill{display:inline-flex;align-items:center;gap:8px;font:500 12.5px var(--sans);color:var(--text2);white-space:nowrap}
.pill i{width:7px;height:7px;background:var(--mute);flex:none}
.pill.working{color:var(--ice)}
.pill.working i{background:var(--ice);box-shadow:0 0 10px var(--ice);animation:blink 1.2s steps(2) infinite}
.pill.idle i{background:var(--ok)}
.pill.sleeping{color:var(--warn)}.pill.sleeping i{background:var(--warn)}
.pill.paused{color:var(--bad)}.pill.paused i{background:var(--bad)}
@keyframes blink{50%{opacity:.25}}

/* logos */
.logo{width:40px;height:40px;border-radius:4px;object-fit:cover;background:var(--raised);border:1px solid var(--rule2);display:grid;place-items:center;font:700 12px var(--sans);font-stretch:120%;color:var(--text2);flex:none}

/* process table (companies) */
.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable th{text-align:left;font:500 12px var(--sans);color:var(--mute);padding:0 14px 12px;border-bottom:1px solid var(--rule2);white-space:nowrap}
.ptable th.r,.ptable td.r{text-align:right}
.ptable td{padding:16px 14px;border-bottom:1px solid var(--rule);vertical-align:middle}
.ptable tbody tr{cursor:pointer;transition:background .15s}
.ptable tbody tr:hover{background:var(--die)}
.ptable td.pid{font:12.5px var(--mono);color:var(--mute);width:70px}
.ptable td.co{display:flex;align-items:center;gap:14px;min-width:260px}
.ptable td.co b{font-weight:600;display:block}
.ptable td.co p{color:var(--text2);font-size:13px;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptable td.n{font:13.5px var(--mono);white-space:nowrap}
.ptable tr.wait td{color:var(--mute);cursor:default}
.ptable tr.wait:hover{background:none}
.ptable .sym{color:var(--mute);font-weight:400;margin-left:6px}

/* old row list (kept for small embeds) */
.crow{display:grid;grid-template-columns:44px 52px 1fr 120px;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--rule);font-size:14px}
.crow:last-child{border-bottom:0}
.crow:hover{background:var(--raised)}
.crow .rank{font:12px var(--mono);color:var(--mute)}
.crow .nm p{color:var(--text2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .meta{display:flex;gap:12px;align-items:center;margin-top:4px;font:12px var(--mono);color:var(--mute)}
.crow .num small{display:block;font:12px var(--sans);color:var(--mute)}
.crow .num b{font:400 14px var(--mono)}
.rows{border:1px solid var(--rule);border-radius:3px;overflow:hidden}

.empty{padding:64px 24px;text-align:center}
.empty h3{font-size:20px}
.empty p{color:var(--text2);margin:10px auto 24px;max-width:440px}

/* kernel log (events) */
.feed{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:12px 18px;border-bottom:1px solid var(--rule);font-size:14px;align-items:baseline}
.ev:last-child{border-bottom:0}
.ev .k{font:11.5px var(--mono);color:var(--mute);white-space:nowrap}
.ev.thought .k{color:var(--text2)}
.ev.browse .k{color:var(--ice)}
.ev.ship .k{color:var(--ok)}
.ev.money .k{color:var(--copper)}
.ev.post .k{color:var(--text)}
.ev .t{word-break:break-word}
.ev .b{color:var(--text2);font-size:13px;margin-top:4px;white-space:pre-wrap;word-break:break-word}
.ev time{font:11.5px var(--mono);color:var(--mute);white-space:nowrap}
.ev a.tx{font:12px var(--mono);color:var(--copper);margin-left:6px}

/* forms */
label.f{display:block;font-size:13.5px;color:var(--text2);margin-bottom:8px}
.input,textarea.input,select.input{width:100%;background:var(--void);border:1px solid var(--rule2);border-radius:2px;color:var(--text);font:15px var(--sans);padding:12px 14px;transition:border-color .15s}
textarea.input{min-height:110px;resize:vertical;line-height:1.5}
.input::placeholder{color:var(--mute)}
.input:focus{outline:none;border-color:var(--text2)}
.hint{font-size:13px;color:var(--mute);margin-top:7px}
.field{margin-bottom:22px}

/* modal + toast */
.veil{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);z-index:60;display:none;align-items:center;justify-content:center;padding:16px}
.veil.open{display:flex}
.sheet{width:min(520px,100%);max-height:90vh;overflow:auto;background:var(--die);border:1px solid var(--rule2);border-radius:3px;padding:30px}
.sheet h3{font-size:22px;font-stretch:118%;font-variation-settings:"wdth" 118;letter-spacing:-.02em;margin-bottom:10px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);opacity:0;background:var(--text);color:#000;padding:11px 18px;border-radius:2px;font:500 14px var(--sans);transition:.22s;pointer-events:none;z-index:80;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* footer */
footer.foot{border-top:1px solid var(--rule);padding:40px 0 56px;color:var(--mute);font-size:13px}
footer.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer.foot a:hover{color:var(--text)}

@media (max-width:980px){
  .links{display:none}
  .sec-head{grid-template-columns:1fr;gap:20px}
  .sec-head .lede{justify-self:start}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats>div:nth-child(3n){border-right:0}
  .stats>div:nth-child(-n+3){border-bottom:1px solid var(--rule)}
  .ptable .h{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .ca{display:none}
  .navr .ghost{display:none}
  section.sec{padding:88px 0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div{border-right:1px solid var(--rule)!important;border-bottom:1px solid var(--rule)}
  .stats>div:nth-child(2n){border-right:0!important}
  .stats b{font-size:18px}
  .sysbar .x{display:none}
  .ev{grid-template-columns:1fr auto}
  .ev .k{grid-column:1/-1}
  .ptable td.co{min-width:0}
  .ptable td.co p{max-width:180px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   MOTION LAYER — only when html.mo (JS on, motion allowed)
   wafer grid behind everything, reveals, word-masked headings,
   section labels that decode, crop marks on hover, button sheen.
   ===================================================================== */
#kbg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
html.mo body{background:transparent}
html.mo .rv{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1);transition-delay:var(--d,0s)}
html.mo .rv.in{opacity:1;transform:none}
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hw>span{display:inline-block}
html.mo .rvh .hw>span{transform:translateY(108%);transition:transform 1.05s cubic-bezier(.2,.75,.1,1);transition-delay:var(--d,0s)}
html.mo .rvh.in .hw>span{transform:none}
.sid{display:flex;align-items:center;gap:14px;font:11.5px/1 var(--mono);letter-spacing:.16em;color:var(--mute);margin-bottom:30px;min-height:12px}
.sid b{font-weight:400;color:var(--ice)}
.sid i{display:block;height:1px;width:0;background:var(--rule2);transition:width 1.1s cubic-bezier(.2,.7,.1,1) .1s}
.sid.in i{width:64px}
/* crop marks: the block is "inspected" on hover */
.cm{--c:rgba(207,228,255,.75);background:
  linear-gradient(var(--c),var(--c)) left top/0 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px 0 no-repeat,
  linear-gradient(var(--c),var(--c)) right top/0 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px 0 no-repeat,
  linear-gradient(var(--c),var(--c)) left bottom/0 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px 0 no-repeat,
  linear-gradient(var(--c),var(--c)) right bottom/0 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px 0 no-repeat;
  transition:background-size .35s cubic-bezier(.2,.7,.1,1)}
.cm:hover{background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px}
/* light passes across buttons */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.7,.1,1);pointer-events:none;z-index:-1}
.btn.ghost:before{background:linear-gradient(100deg,transparent,rgba(207,228,255,.14),transparent)}
.btn:hover:before{left:135%}
/* idle process slots scan like a waiting bus */
html.mo .ptable tr.wait{background:linear-gradient(90deg,transparent,rgba(207,228,255,.04),transparent) -60% 0/40% 100% no-repeat;animation:rowscan 5s linear infinite}
html.mo .ptable tr.wait:nth-child(2){animation-delay:.5s}html.mo .ptable tr.wait:nth-child(3){animation-delay:1s}html.mo .ptable tr.wait:nth-child(4){animation-delay:1.5s}
@keyframes rowscan{to{background-position:170% 0}}
.ptable tbody tr:hover td.pid{color:var(--ice)}