/* ================================================================
! ksam.pw · main.css
! description: everything past first paint. tokens live inline in
! index.html. two easings, four durations, one accent. that's it.
! motion law: STAMP (<=120ms, hard) or PLOT (240-600ms, drawn).
! nothing lives between 120 and 200ms.
================================================================ */

/* ---------- ambient layers ---------- */
.grid-layer{
  position:fixed; inset:-12% -2%; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, var(--gridline) 1px, transparent 1.5px);
  background-size:30px 30px;
  opacity:.55;
  will-change:transform;
}
body::after{ /* ~3% noise, everywhere, always */
  content:""; position:fixed; inset:0; z-index:240; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
main, footer.endtrace{ position:relative; z-index:1; }

/* mono blocks invert selection to amber. a tiny tell for the curious. */
.mono::selection, .mono ::selection{ background:rgba(255,209,102,.9); color:#0A0B10; }

/* ---------- preloader: SYN > SYN-ACK > ACK ---------- */
#preloader{
  position:fixed; inset:0; z-index:600; background:var(--bg);
  display:flex; align-items:flex-end; padding:28px;
}
#preloader.gone{ display:none; }
#handshake{ font-size:13px; line-height:1.7; color:var(--ink-2); }
#handshake .ok{ color:var(--live); }

/* ---------- traceroute rail (desktop) ---------- */
.rail{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:90; height:46vh; width:1px; background:var(--hairline);
}
.rail-hop{ position:absolute; left:-3.5px; width:8px; height:8px; border-radius:50%;
  background:var(--bg); border:1px solid var(--ink-3); }
.rail-hop .rail-label{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3); white-space:nowrap;
  opacity:0; transition:opacity var(--t-stamp) linear;
}
.rail-hop.passed{ border-color:var(--cyan); }
.rail-hop.flash .rail-label, .rail:hover .rail-label{ opacity:1; }
.rail-hop .rail-time{ color:var(--cyan); margin-left:6px; }
.rail-packet{
  position:absolute; left:-2.5px; top:0; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
}
.mob-progress{
  position:fixed; inset:0 0 auto 0; z-index:110; height:2px;
  background:var(--cyan); transform-origin:0 50%; transform:scaleX(0);
  box-shadow:0 0 8px rgba(84,232,255,.6);
}
@media (max-width:1100px){ .rail{ display:none; } }
@media (min-width:1101px){ .mob-progress{ display:none; } }

/* ---------- sections ---------- */
.section{
  padding-block:clamp(88px,13vh,150px);
  padding-inline:max(var(--pad), calc(50% - var(--maxw)/2)); /* the column */
  border-top:1px solid var(--hairline);
  position:relative;
}
/* cable run: a slow packet of dashes along each section seam */
.section::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:repeating-linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 80px);
  opacity:.25; background-size:200% 100%;
  animation:cable 9s linear infinite;
}
@keyframes cable{ to{ background-position:-200% 0; } }

.sec-head{ margin-bottom:clamp(36px,5vh,56px); }
.sec-eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
.sec-title{
  font-size:clamp(1.9rem,4.5vw,3.1rem); font-weight:650; letter-spacing:-.015em;
  line-height:1.05; color:var(--ink);
}
.sec-sub{ margin-top:12px; color:var(--ink-2); max-width:560px; }

/* kinetic headings: chars rise + gain weight, once, on scroll-in */
html.js [data-kinetic] .k-ch{
  display:inline-block; opacity:0; transform:translateY(.55em);
  font-weight:300;
  transition:opacity .5s var(--swift), transform .5s var(--swift), font-weight .5s var(--swift);
  transition-delay:var(--d,0ms);
}
html.js [data-kinetic] .k-ch.in{ opacity:1; transform:none; font-weight:650; }

/* generic reveal (sans-serif content only; mono types or stamps) */
html.js .rv{ opacity:0; transform:translateY(14px); }
html.js .rv.in{ opacity:1; transform:none; transition:opacity .5s var(--swift), transform .5s var(--swift); transition-delay:var(--d,0ms); }

/* ---------- /tools ---------- */
.subnet{ margin-top:clamp(28px,4vh,44px); }
.subnet-head{
  font-size:12.5px; letter-spacing:.12em; color:var(--ink-2);
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.subnet-head span{ color:var(--ink-3); letter-spacing:.06em; }
.subnet-head::after{ content:""; flex:1; height:1px; background:var(--gridline); }

.cards{
  list-style:none; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
}
.card{
  --status:var(--queued);
  position:relative; min-height:150px; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--hairline); border-radius:10px;
  padding:16px 18px 14px;
  transition:transform var(--t-plot) var(--exit), border-color var(--t-plot) var(--exit), box-shadow var(--t-plot) var(--exit), opacity var(--t-plot) var(--exit);
}
.card:hover, .card:focus-within{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--status) 65%, var(--hairline));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--status) 35%, transparent), 0 10px 32px rgba(0,0,0,.4);
  transition-duration:var(--t-stamp); transition-timing-function:var(--swift);
  opacity:1;
}
.card[data-status="live"]{ --status:var(--live); }
.card[data-status="beta"]{ --status:var(--beta); }
.card[data-status="building"]{ --status:var(--building); }
.card[data-status="degraded"]{ --status:var(--bad); }
.card[data-status="planned"]{
  --status:var(--queued);
  border-style:dashed; border-color:rgba(84,232,255,.22);
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  opacity:.82;
}
.card--reserved{
  border-style:dashed; border-color:var(--hairline);
  background:transparent; opacity:.6; justify-content:center; gap:8px;
}
.card--reserved .card-name{ color:var(--ink-3); }

.card-top{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.card-top .led{
  width:7px; height:7px; border-radius:50%; background:var(--status);
  box-shadow:0 0 8px var(--status); animation:led 2.2s ease-in-out infinite;
}
.card:hover .card-top .led{ animation-duration:1.1s; }
.card[data-status="planned"] .card-top .led{ box-shadow:none; animation:none; opacity:.7; }
.card-top .status-word{ color:var(--status); font-weight:700; }
.card-top .port{ margin-left:auto; color:var(--ink-3); text-transform:none; letter-spacing:.02em; }

.card-name{ font-size:1.22rem; font-weight:700; margin-top:12px; color:var(--ink); }
.card-name .dot{ color:var(--cyan); }
.card-desc{ margin-top:6px; font-size:.92rem; color:var(--ink-2); line-height:1.5; flex:1; }

.card-progress{ height:3px; border-radius:2px; background:var(--gridline); margin-top:12px; overflow:hidden; }
.card-progress i{ display:block; height:100%; background:var(--building); box-shadow:0 0 10px var(--building); border-radius:2px; }

.card-bot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.card-action{ font-size:11.5px; letter-spacing:.04em; color:var(--ink-3); }
.card[data-status="live"] .card-action{ color:var(--live); }
.card[data-status="beta"] .card-action{ color:var(--beta); }
.card[data-status="degraded"] .card-action{ color:var(--bad); }

.mini-route{ width:60px; height:16px; flex:none; }
.mini-route path{ stroke:var(--ink-3); stroke-width:1.4; opacity:.7; }
.mini-route circle{ fill:var(--ink-3); }
.card:hover .mini-route path{
  stroke:var(--cyan); stroke-dasharray:8 70; stroke-dashoffset:78; opacity:1;
  animation:route .6s linear forwards;
}
@keyframes route{ to{ stroke-dashoffset:0; } }

/* the whole card is the hit target */
.card-hit{
  position:absolute; inset:0; z-index:2; background:none; border:0; cursor:pointer;
  border-radius:10px;
}
.card-hit:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* receipt line: stamped in one frame under the card on launch */
.receipt{ font-family:var(--mono); font-size:12px; color:var(--ink-2); padding:10px 2px 0; }
.receipt b{ color:var(--live); font-weight:400; }
.receipt.err b{ color:var(--bad); }

/* connection-refused shake */
.card.refused{ animation:refused .3s linear; }
@keyframes refused{
  0%,100%{ transform:translateX(0); }
  20%,60%{ transform:translateX(-4px); }
  40%,80%{ transform:translateX(4px); }
}

/* perimeter race on launch (SVG injected by JS) */
.race{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); pointer-events:none; z-index:3; }
.race rect{
  fill:none; stroke:var(--cyan); stroke-width:2; rx:10;
  stroke-dasharray:25 1000; stroke-dashoffset:0;
  animation:race .4s linear forwards;
  filter:drop-shadow(0 0 6px var(--cyan));
}
@keyframes race{ to{ stroke-dashoffset:-1025; } }

/* drawer: ERR_NOT_YET → demand capture, right where curiosity peaked */
.drawer{
  grid-column:1/-1; display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--t-move) var(--swift);
}
.drawer.open{ grid-template-rows:1fr; }
.drawer-in{ overflow:hidden; }
.drawer-box{
  margin-top:12px; padding:16px 18px; border:1px solid var(--hairline);
  border-radius:10px; background:var(--surface);
}
.drawer-box .err-tag{ font-family:var(--mono); font-size:11.5px; color:var(--bad); letter-spacing:.06em; }
.drawer-box .spec{ margin-top:8px; color:var(--ink-2); font-size:.95rem; }
.drawer-box .eta{ margin-top:8px; font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.drawer-box .dlog{ margin-top:4px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.drawer-form{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.drawer-form input{
  flex:1; min-width:180px; background:var(--bg); border:1px solid var(--hairline);
  border-radius:6px; padding:9px 12px; color:var(--ink); font:inherit; font-size:14px;
}
.drawer-form input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(84,232,255,.14); }
.drawer-form .btn{ padding:9px 14px; }
.drawer-msg{ width:100%; font-family:var(--mono); font-size:12px; color:var(--live); min-height:1.2em; }
.drawer-msg.err{ color:var(--bad); }

/* ---------- /whoami ---------- */
.whoami-grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:clamp(32px,6vw,72px); align-items:start;
}
@media (max-width:900px){
  .whoami-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .peer{ display:flex; flex-wrap:wrap; gap:4px 14px; }
}
.bio p{ font-size:clamp(1.05rem,1.8vw,1.25rem); line-height:1.7; color:var(--ink); }
.bio p + p{ margin-top:18px; }
.fn-ref{
  background:none; border:0; color:var(--cyan); cursor:pointer; font:inherit;
  padding:0 2px; position:relative;
}
.fn-ref sup{ font-size:.7em; font-family:var(--mono); }
.fn-ref:hover sup, .fn-ref[aria-expanded="true"] sup{ color:var(--ink); background:var(--cyan); border-radius:3px; padding:0 3px; color:#0A0B10; }

.fn{
  position:fixed; z-index:260; max-width:320px;
  background:var(--surface); border:1px solid var(--hairline); border-left:2px solid var(--cyan);
  border-radius:8px; padding:10px 14px;
  font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--ink-2);
  transform:translateY(6px); opacity:0;
  transition:transform 200ms var(--swift), opacity 200ms var(--swift);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.fn.open{ transform:none; opacity:1; }
.fn .fn-n{ color:var(--cyan); margin-right:6px; }

.peering{ margin-top:36px; display:flex; flex-direction:column; gap:2px; }
.peer{
  display:grid; grid-template-columns:140px 1fr auto; gap:14px; align-items:baseline;
  padding:10px 0; border-bottom:1px dashed var(--gridline); font-size:13px;
}
.peer-as{ color:var(--cyan); letter-spacing:.04em; }
.peer-name{ color:var(--ink-2); transition:color var(--t-stamp) linear; }
.peer:hover .peer-name{ color:var(--cyan); }
.peer-note{ color:var(--ink-3); }

.panel-widgets{ display:flex; flex-direction:column; gap:18px; }
.widget{
  border:1px solid var(--hairline); border-radius:12px; background:var(--surface);
  padding:18px 20px;
}
.widget-cap{ text-align:center; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }
.fn-felt{ color:var(--bad); text-transform:none; letter-spacing:.02em; }

.gauge{ display:block; width:100%; background:none; border:0; cursor:pointer; }
.gauge svg{ width:100%; max-width:240px; display:block; margin:0 auto; }
.g-track{ stroke:var(--gridline); stroke-width:10; stroke-linecap:round; }
.g-fill{ stroke:var(--building); stroke-width:10; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(183,138,255,.5)); }
.g-needle{ stroke:var(--ink); stroke-width:2.5; stroke-linecap:round; }
.g-hub{ fill:var(--ink); }
.g-num{ fill:var(--ink); font-size:21px; font-family:var(--mono); font-variant-numeric:tabular-nums; }

.colophon .widget-head{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:10px; }
.colophon-note{ color:var(--ink-3); text-transform:none; letter-spacing:.02em; }
.colophon dl div{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px dashed var(--gridline); font-size:12.5px;
}
.colophon dl div:last-child{ border-bottom:0; }
.colophon dt{ color:var(--ink-3); }
.colophon dd{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---------- /syslog ---------- */
.log{ font-size:13px; line-height:2.1; max-width:860px; }
.log .line{ border-left:2px solid var(--gridline); padding-left:16px; }
html.js .log .line{ visibility:hidden; }       /* lines stamp in, one frame each */
html.js .log .line.on{ visibility:visible; }
.log .ts{ color:var(--ink-3); margin-right:10px; }
.log .sev{ font-weight:700; margin-right:8px; }
.log .sev-info{ color:var(--cyan); }
.log .sev-warn{ color:var(--beta); }
.log .blink{ animation:blink 1.05s steps(1) infinite; color:var(--cyan); }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- /subscribe ---------- */
.notify{ max-width:560px; }
.prompt-field{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:10px;
  padding:10px 12px; position:relative;
  transition:border-color var(--t-plot) var(--exit), box-shadow var(--t-plot) var(--exit);
}
.prompt-field:focus-within{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(84,232,255,.13), 0 0 28px rgba(84,232,255,.10);
  transition-duration:var(--t-stamp);
}
.prompt-field.nack{ border-color:var(--bad); animation:nackshake .2s linear; }
@keyframes nackshake{ 25%,75%{ transform:translateX(-2px); } 50%{ transform:translateX(2px); } }
.prompt-field .pr{ color:var(--live); font-weight:700; user-select:none; }
.prompt-field input{
  flex:1; min-width:0; background:transparent; border:0; outline:0;
  color:var(--ink); font-family:var(--mono); font-size:16px;
  caret-color:var(--cyan);
}
.prompt-field input::placeholder{ color:var(--ink-3); }
.btn{
  flex:none; cursor:pointer; border:0; border-radius:6px;
  padding:10px 18px; font-weight:700; font-size:13.5px; color:#0A0B10;
  background:var(--cyan);
  transition:filter var(--t-stamp) linear, transform var(--t-stamp) linear;
}
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.6; cursor:default; }
.hp{ position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }
.form-msg{ margin-top:12px; font-size:13px; color:var(--live); min-height:1.4em; }
.form-msg.err{ color:var(--bad); }
.ack-packet{
  position:fixed; z-index:260; width:8px; height:8px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 12px var(--cyan); pointer-events:none;
}

/* ---------- end of trace ---------- */
.endtrace{ padding-bottom:clamp(48px,7vh,80px); }
.trace-title{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); margin-bottom:20px; }
.trace{ list-style:none; max-width:560px; font-size:13px; }
.trace li{
  display:grid; grid-template-columns:28px 1fr auto; gap:12px;
  padding:7px 0; border-bottom:1px dashed var(--gridline);
}
.trace .hop-n{ color:var(--ink-3); }
.trace .hop-name{ color:var(--ink-2); }
.trace .hop-ms{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
.trace-sum{ margin-top:16px; font-size:13px; color:var(--live); }
.foot-links{ display:flex; flex-wrap:wrap; gap:22px; margin-top:36px; font-size:13px; }
.foot-links a, .linklike{
  color:var(--ink-2); background:none; border:0; padding:0; font:inherit; cursor:pointer;
  border-bottom:1px dashed var(--ink-3);
  transition:color var(--t-stamp) linear, border-color var(--t-stamp) linear;
}
.foot-links a:hover, .linklike:hover{ color:var(--cyan); border-color:var(--cyan); }
.foot-sign{ margin-top:44px; font-size:12px; color:var(--ink-3); }

/* ---------- tooltip / toast / plate ---------- */
.tooltip{
  position:fixed; z-index:280; pointer-events:none;
  background:var(--surface); border:1px solid var(--hairline); border-radius:6px;
  padding:8px 11px; font-size:12px; line-height:1.55; color:var(--ink-2);
  white-space:nowrap; max-width:min(280px, calc(100vw - 16px));
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.tooltip b{ color:var(--ink); font-weight:700; }
.tooltip .tt-status{ text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; }

.toast{
  position:fixed; z-index:290; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--hairline); border-radius:8px;
  padding:10px 16px; font-size:13px; color:var(--ink);
  box-shadow:0 14px 40px rgba(0,0,0,.5); white-space:pre;
  max-width:min(92vw, 640px); overflow-x:auto;
}
.toast.leaving{ opacity:0; transition:opacity 120ms var(--exit); }

.plate-view[hidden], .palette-wrap[hidden], .toast[hidden], .tooltip[hidden]{ display:none; }
.plate-view{
  position:fixed; inset:0; z-index:340; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:rgba(10,11,16,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.plate-view canvas{
  width:min(80vmin,720px); height:auto; border:1px solid var(--hairline); border-radius:12px;
  background:var(--bg);
}
.plate-view p{ font-size:13px; color:var(--ink-2); }

/* ---------- command palette ---------- */
.palette-wrap{ position:fixed; inset:0; z-index:320; }
.palette-backdrop{
  position:absolute; inset:0; background:rgba(10,11,16,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.palette{
  position:relative; margin:16vh auto 0; width:min(580px, calc(100vw - 28px));
  background:var(--surface); border:1px solid var(--hairline); border-radius:12px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:scale(.98); opacity:0;
  transition:transform 160ms var(--swift), opacity 160ms var(--swift);
}
.palette-wrap.open .palette{ transform:scale(1); opacity:1; }
.palette-wrap.closing .palette{ transform:scale(.98); opacity:0; transition-duration:120ms; transition-timing-function:var(--exit); }
.palette-field{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--hairline); font-size:14px;
}
.palette-field .pr{ color:var(--cyan); font-weight:700; }
.palette-field input{
  flex:1; background:transparent; border:0; outline:0; color:var(--ink);
  font:inherit; font-size:16px; caret-color:var(--cyan);
}
.palette-field input::placeholder{ color:var(--ink-3); }
.palette-list{ list-style:none; max-height:46vh; overflow-y:auto; padding:6px; }
.p-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:7px;
  font-size:13px; color:var(--ink-2); cursor:pointer; border-left:2px solid transparent;
}
.p-item .p-kind{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-left:auto; flex:none; }
.p-item .p-led{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--st,var(--ink-3)); box-shadow:0 0 6px var(--st,transparent); }
.p-item mark{ background:none; color:var(--cyan); }
.p-item.sel{ background:rgba(84,232,255,.07); color:var(--ink); border-left-color:var(--cyan); }
.p-empty{ padding:16px 14px; font-size:13px; color:var(--ink-3); }
.p-empty b{ color:var(--cyan); font-weight:400; cursor:pointer; }
.palette-foot{
  padding:9px 16px; border-top:1px solid var(--hairline);
  font-size:11px; color:var(--ink-3); letter-spacing:.04em;
}
@media (max-width:720px){
  .palette{ margin:0; position:absolute; bottom:0; left:0; right:0; width:100%;
    border-radius:14px 14px 0 0; transform:translateY(12px); }
  .palette-wrap.open .palette{ transform:translateY(0); }
  .palette-list{ max-height:38vh; }
}

.fab{
  position:fixed; right:18px; bottom:18px; z-index:300;
  width:50px; height:50px; border-radius:50%;
  background:var(--surface); border:1px solid var(--hairline); color:var(--cyan);
  font-size:15px; cursor:pointer; display:none;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
html.js .fab{ display:none; }
@media (max-width:1100px){ html.js .fab{ display:block; } }

/* ---------- reading-mode switch (masthead) ---------- */
.mode-toggle{
  display:inline-flex; align-items:center;
  border:1px solid var(--hairline); border-radius:6px; overflow:hidden;
  background:color-mix(in srgb, var(--bg) 60%, transparent);
}
.mode-toggle .mt-opt{
  background:none; border:0; cursor:pointer; font:inherit; font-size:11px;
  letter-spacing:.04em; color:var(--ink-3); padding:3px 9px; line-height:1.7;
  transition:color var(--t-stamp) linear, background var(--t-stamp) linear;
}
.mode-toggle .mt-opt + .mt-opt{ border-left:1px solid var(--hairline); }
.mode-toggle .mt-opt:not(.on):hover{ color:var(--cyan); }
.mode-toggle .mt-opt.on{ color:#0A0B10; background:var(--cyan); font-weight:700; }
.mode-toggle .mt-opt:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }

/* ---------- custom cursor (fine pointers; html.cur-on set by JS) ---------- */
html.cur-on, html.cur-on * { cursor: none !important; }
.cursor-dot, .cursor-ring{ display:none; }
html.cur-on .cursor-dot{
  display:block; position:fixed; top:0; left:0; z-index:999999; width:7px; height:7px; border-radius:50%;
  background:var(--cyan); pointer-events:none; transform:translate(-50%,-50%);
  box-shadow: 0 0 10px var(--cyan), 0 0 4px var(--cyan);
}
html.cur-on .cursor-ring{
  display:flex; align-items:center; position:fixed; top:0; left:0; z-index:999998;
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid rgba(255, 200, 97, 0.85); pointer-events:none;
  transform:translate(-50%,-50%);
  box-shadow: 0 0 8px rgba(255, 200, 97, 0.3);
  transition:width 160ms var(--swift), height 160ms var(--swift), border-color 160ms var(--swift), box-shadow 160ms var(--swift);
}
html.cur-on .cursor-ring.big{ width:44px; height:44px; border-color:var(--cyan); box-shadow: 0 0 12px rgba(255, 200, 97, 0.5); }
.cursor-label{
  position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
  font-size:10px; letter-spacing:.1em; color:var(--cyan); white-space:nowrap;
}

/* ---------- reduced motion: designed stillness, not breakage ---------- */
@media (prefers-reduced-motion:reduce){
  .section::before{ animation:none; }
  .card-top .led, .brand .led, .log .blink{ animation:none; }
  .card:hover .mini-route path{ animation:none; stroke-dasharray:none; }
  html.js [data-kinetic] .k-ch, html.js .rv{ opacity:1; transform:none; transition:none; font-weight:inherit; }
  .card, .prompt-field, .palette{ transition-duration:1ms; }
  .race rect{ animation:none; opacity:0; }
}

/* ---------- print: one-page network documentation ---------- */
@media print{
  :root{ --bg:#fff; --surface:#fff; --ink:#16181f; --ink-2:#3c4150; --ink-3:#6a7080; --hairline:#ccc; --gridline:#ddd; }
  body{ background:#fff; color:#16181f; }
  body::after, .grid-layer, #map, #preloader, .rail, .mob-progress, .fab,
  .scroll-cue, .kbd-hint, .seed-btn, .rtt-box, .utc, .cursor-dot, .cursor-ring,
  .toast, .tooltip, .plate-view, .palette-wrap, .card-hit, .skip{ display:none !important; }
  .masthead{ position:static; background:#fff; border-color:#ccc; }
  .hero{ min-height:auto; padding:40px 0; }
  .wordmark-wrap{ display:none; }
  .section{ padding:24px 0; page-break-inside:avoid; border-color:#ccc; }
  .section::before{ display:none; }
  .card{ box-shadow:none; }
  .foot-links a::after{ content:" (" attr(href) ")"; color:#6a7080; }
  html.js .log .line{ visibility:visible; }
  html.js [data-kinetic] .k-ch, html.js .rv{ opacity:1; transform:none; }
}

/* ---------- Interactive MOTD Terminal ---------- */
#syslogForm {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 0;
  margin: 0;
}
#syslogForm .prompt {
  color: var(--cyan);
  font-weight: 700;
  white-space: nowrap;
}
#syslogInput {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: inherit;
  caret-color: var(--cyan);
}
#syslogInput::placeholder {
  color: var(--ink-3);
  opacity: 0.5;
}