/* webxterm.com (cycle 150). One stylesheet, two fonts of its own, no
   images from elsewhere: the CSP in _headers allows 'self' only, and no
   style attribute. Motion is decoration: under prefers-reduced-motion
   every page reads the same, standing still.

   The colours are webx's own (static/style.css): one blue accent, so the
   site looks like the product a visitor will install. The gradient is
   kept for one moment, the headline. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/fonts/jetbrains-mono.woff2") format("woff2"); }
:root {
  --bg: #06070b;
  --bg-2: #0b0d14;
  --fg: #eef0f6;
  --muted: #9198ab;
  --dim: #5d6478;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --glass: rgba(18, 21, 32, .62);
  --card: rgba(255, 255, 255, .035);
  --a1: #6aa8e6;
  --a2: #4f8cc9;
  --a3: #9fcbf2;
  --ok: #7fb069;
  --bad: #e06c75;
  --warn: #d9a441;
  --grad: linear-gradient(100deg, #b9dcfa, var(--a1) 45%, var(--a2));
  /* Starts and ends on one colour, so a 200% copy slides with no seam. */
  --grad-loop: linear-gradient(100deg, #b9dcfa, var(--a1) 25%, var(--a2) 50%, var(--a1) 75%, #b9dcfa);
  /* webx's own desk, from static/style.css and theme.js */
  --wx-bg: #0d1117; --wx-head: #11161d; --wx-head-focus: #172029; --wx-border: #262d38;
  --wx-border-strong: #39424f; --wx-fg: #d7dde5; --wx-dim: #8b97a8; --wx-dock: #10151c;
  --wx-green: #7fb069; --wx-cyan: #56b6c2; --wx-magenta: #c678dd; --wx-yellow: #d9a441;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-s: 8px; --r-m: 12px; --r-l: 18px;
  --radius: var(--r-m);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .05);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--a1); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, pre, kbd { font-family: var(--mono); }
[hidden] { display: none !important; }
::selection { background: rgba(79, 140, 201, .35); }

/* ------------------------------------------------------------ backdrop */
/* Static, and part of the page: it scrolls with it and is painted once.
   A fixed layer with a mask and drifting light spots was re-rastered on
   every scroll step (1141 ms of raster in 3 s of scrolling at 2x). */
body { position: relative; }
/* A short page (404, the access page before a code) keeps its footer at
   the bottom of the window: main grows into the space. In a flex column,
   a child with auto side margins shrinks to its content, hence the width. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }
body > main, body > footer { width: 100%; }
/* A flex item keeps its last child's margin, which before merged into
   the footer's 4rem. */
body > main > :last-child { margin-bottom: 0; }
.bg { position: absolute; left: 0; right: 0; top: 0; height: 1500px; z-index: -1; overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 6% 0%, rgba(92, 58, 168, .38), transparent 70%),
    radial-gradient(ellipse 50% 45% at 96% 6%, rgba(38, 92, 168, .42), transparent 70%),
    radial-gradient(ellipse 45% 35% at 50% 62%, rgba(38, 92, 168, .14), transparent 70%); }
.bg .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 40% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 40% at 50% 0%, #000 30%, transparent 75%);
  opacity: .5;
}
.page-bg .bg { height: 900px; }

/* ------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  /* No backdrop-filter: the blur under a sticky bar is redrawn on every
     frame anything moves below it (28 -> 37 fps without it, CPU x4). */
  background: rgba(8, 9, 14, .9); border-bottom: 1px solid var(--line);
}
.nav-in { max-width: 72rem; margin: 0 auto; padding: .8rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* webx's mark (static/icon-*.png) and wordmark, as the promo draws them. */
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--fg);
  font: 700 1.2rem var(--sans); letter-spacing: -.03em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; }
.wm .x { display: inline-block; margin-left: .06em; padding: 0 .14em; border-radius: .14em;
  background: var(--fg); color: var(--bg); line-height: 1.1; }
.mark .f { fill: var(--a1); } .mark .o { fill: none; stroke: var(--a1); stroke-width: 1.6; }
.nav-links { display: flex; align-items: center; gap: .3rem; }
.nav-links a { color: var(--muted); padding: .4rem .7rem; border-radius: 8px; font-size: .94rem; }
.nav-links a:hover { color: var(--fg); background: var(--card); text-decoration: none; }
.nav-links .pill { color: var(--fg); border: 1px solid var(--line-2); }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.25rem;
  border-radius: 11px; font-weight: 600; font-size: 1rem; border: 1px solid var(--line-2);
  color: var(--fg); background: var(--card); cursor: pointer; transition: transform .2s, border-color .2s, background .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); border-color: rgba(255, 255, 255, .28); }
.btn { border-radius: var(--r-s); }
.btn.primary { border: 0; color: #fff; background: var(--a2);
  box-shadow: 0 8px 26px -10px rgba(79, 140, 201, .8), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .2s, background .2s, box-shadow .3s; }
.btn.primary:hover { background: #5c99d6; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.btn svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------ hero */
/* The hero shows by CSS alone: no wait for the script, which hid it
   until it ran and then faded it in over 0.9 s. */
.hero { max-width: 72rem; margin: 0 auto; padding: 4rem 1rem 1rem; text-align: center; }
.rise { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.rise.d1 { animation-delay: .06s; } .rise.d2 { animation-delay: .12s; } .rise.d3 { animation-delay: .18s; }
.rise.d4 { animation-delay: .26s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem .35rem .45rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--card);
  color: var(--muted); font-size: .85rem;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a1);
  box-shadow: 0 0 10px rgba(106, 168, 230, .8); margin-left: .3rem; }
h1.display {
  font-size: clamp(2.5rem, 7vw, 5.2rem); line-height: 1; letter-spacing: -.05em;
  margin: 1.4rem auto 1.3rem; max-width: 15ch; font-weight: 750;
}
/* One pass on load, not a loop: a moving text gradient repaints every frame. */
.grad { background: var(--grad-loop); background-size: 200% 100%; -webkit-background-clip: text;
  background-clip: text; color: transparent; animation: sheen 2.4s cubic-bezier(.4, 0, .2, 1) .3s 1 both; }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--muted); max-width: 40rem;
  margin: 0 auto; }
.cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

/* ------------------------------------------------------------ the desk mock */
.stage { max-width: 72rem; margin: 2.8rem auto 0; padding: 0 1rem; }
.browser {
  position: relative; border-radius: 16px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(22, 25, 37, .9), rgba(11, 13, 20, .92));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(79, 140, 201, .12);
  container-type: inline-size; overflow: hidden;
  /* iOS Safari does not clip a composited child at a rounded corner unless
     the parent makes its own stacking context. */
  isolation: isolate;
}
.chrome { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
  border-bottom: 1px solid var(--line); }
.chrome i { width: 11px; height: 11px; border-radius: 50%; background: #3a3f50; display: block; }
.chrome i:nth-child(1) { background: #ff5f57; } .chrome i:nth-child(2) { background: #febc2e; }
.chrome i:nth-child(3) { background: #28c840; }
.url { margin: 0 auto; display: flex; align-items: center; gap: .45rem; padding: .25rem .9rem;
  border-radius: 8px; background: rgba(255, 255, 255, .05); color: var(--muted);
  font: .78rem var(--mono); }
.url svg { width: 12px; height: 12px; color: var(--ok); }

.desk { position: relative; aspect-ratio: 16 / 9.4; font-size: clamp(7px, 1.32cqw, 13.5px);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(92, 58, 168, .22), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(38, 92, 168, .22), transparent 55%), #0a0d12; }
.win {
  position: absolute; display: flex; flex-direction: column; border-radius: .4em;
  border: 1px solid var(--wx-border); background: var(--wx-bg); overflow: hidden;
  box-shadow: 0 1.2em 2.5em -1em rgba(0, 0, 0, .7);
  transition: left .85s cubic-bezier(.65, 0, .2, 1), top .85s cubic-bezier(.65, 0, .2, 1),
    width .85s cubic-bezier(.65, 0, .2, 1), height .85s cubic-bezier(.65, 0, .2, 1),
    opacity .5s, transform .5s, border-color .4s, box-shadow .4s;
}
.win.focus { border-color: var(--a2); box-shadow: 0 1.2em 2.5em -1em rgba(0, 0, 0, .7); }
.win.focus .win-head { background: var(--wx-head-focus); color: var(--wx-fg); }
.win.enter { opacity: 0; transform: scale(.92); }
.win-head { display: flex; align-items: center; gap: .5em; padding: .42em .7em;
  border-bottom: 1px solid var(--wx-border); background: var(--wx-head); color: var(--wx-dim); font: 1em var(--mono);
  white-space: nowrap; overflow: hidden; flex: none; }
.win-head svg { width: 1.15em; height: 1.15em; flex: none; }
.win-head .host { margin-left: auto; padding: .05em .55em; border-radius: .4em; font-size: .85em;
  background: rgba(86, 182, 194, .13); color: var(--wx-cyan); }
.win-head .host.v { background: rgba(198, 120, 221, .14); color: var(--wx-magenta); }
.win-head .host.i { background: rgba(79, 140, 201, .16); color: var(--a1); }
.win-body { flex: 1; min-height: 0; overflow: hidden; padding: .6em .8em; font: 1em/1.5 var(--mono); }
.term .win-body { color: var(--wx-fg); }
.term .p { color: var(--wx-green); } .term .ok { color: var(--wx-green); } .term .mute { color: #5c6773; }
.term .warn { color: var(--warn); } .term .cmd { color: #fff; }
.caret { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.15em;
  background: var(--fg); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term .line { white-space: pre; }
.files .win-body { padding: .35em 0; }
.row { display: flex; align-items: center; gap: .6em; padding: .26em .9em; color: #cfd5e3;
  white-space: nowrap; transition: background .3s; }
.row svg { width: 1.2em; height: 1.2em; flex: none; }
.row .sz { margin-left: auto; color: var(--dim); }
.row.sel { background: rgba(79, 140, 201, .18); }
.row .folder { color: var(--a2); } .row .doc { color: var(--muted); }
.gui .win-body { padding: 0; display: flex; flex-direction: column; background: var(--wx-bg); }
.gui svg.chart { width: 100%; flex: 1; min-height: 0; }
.gui .spark { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; }
.gui .area { opacity: .18; }
.gui .gtitle { display: flex; justify-content: space-between; padding: .5em .8em 0; color: var(--muted);
  font: .95em var(--mono); }
.gui .gtitle b { color: var(--fg); font-weight: 600; }
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em; display: flex;
  align-items: center; gap: .45em; padding: 0 max(.7em, 9px); border-top: 1px solid var(--wx-border);
  background: var(--wx-dock); font: .95em var(--mono); color: var(--wx-dim); }
.taskbar .start { width: 1.25em; height: 1.25em; flex: none; }
.taskbar .search { display: flex; align-items: center; gap: .5em; min-width: 11em; padding: .22em .6em;
  border-radius: .35em; border: 1px solid var(--wx-border); background: var(--wx-bg); color: #5c6773;
  cursor: pointer; white-space: nowrap; font: inherit; }
.taskbar .search:hover { border-color: var(--wx-border-strong); color: var(--wx-dim); }
.taskbar .search kbd { margin-left: auto; font: .82em var(--mono); color: #5c6773; }
.taskbar .search svg { width: 1em; height: 1em; }
.taskbar .chip { padding: .2em .65em; border-radius: .4em; background: rgba(255, 255, 255, .05);
  white-space: nowrap; transition: background .3s, color .3s; }
.taskbar .chip.on { background: rgba(79, 140, 201, .22); color: var(--fg); }
.taskbar .desks { margin-left: auto; display: flex; gap: .25em; }
.taskbar .desks span { width: 1.45em; height: 1.45em; display: grid; place-items: center;
  border-radius: .3em; font-size: .85em; }
.taskbar .desks .cur { background: var(--a2); color: #fff; font-weight: 700; }
.taskbar .clock { margin-left: .8em; }
.palette { position: absolute; left: 50%; top: 14%; width: 46%; transform: translate(-50%, -.6em) scale(.97);
  border-radius: .7em; border: 1px solid rgba(79, 140, 201, .6); background: rgba(16, 19, 30, .97);
  box-shadow: 0 2em 5em -1em rgba(0, 0, 0, .85), 0 0 3em -1em rgba(79, 140, 201, .55);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 5; font: 1.05em var(--mono); }
.palette.open { opacity: 1; transform: translate(-50%, 0) scale(1); }
.palette .q { display: flex; align-items: center; gap: .6em; padding: .75em .95em;
  border-bottom: 1px solid var(--line); color: var(--fg); }
.palette .q svg { width: 1.15em; height: 1.15em; color: var(--a2); }
.palette .res { padding: .35em; }
.palette .item { display: flex; gap: .7em; align-items: center; padding: .45em .65em; border-radius: .45em;
  color: #cfd5e3; }
.palette .item.hit { background: rgba(79, 140, 201, .22); }
.palette .item small { margin-left: auto; color: var(--dim); }
.palette .item svg { width: 1.1em; height: 1.1em; color: var(--a1); }
.palette kbd { font-size: .8em; padding: .05em .4em; border: 1px solid var(--line-2); border-radius: .3em;
  color: var(--muted); margin-left: auto; }
.stage-caption { margin-top: 1.1rem; text-align: center; color: var(--dim); font-size: .88rem; }
.stage-caption kbd { padding: .05rem .4rem; border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 5px; color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------------------ sections */
section.block { max-width: 72rem; margin: 0 auto; padding: 7rem 1rem 0; }
.kicker { font: 600 .78rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a1); }
h2.title { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.06; letter-spacing: -.04em;
  margin: .7rem 0 1rem; font-weight: 700; max-width: 22ch; }
/* One section on a band of its own, so the page has a rhythm. */
.band { margin-top: 7rem; padding: 1px 0 6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 17, 23, .9), rgba(9, 11, 16, .95)); }
.band section.block { padding-top: 5.5rem; }
.band + section.block { padding-top: 6rem; }
.sub { color: var(--muted); max-width: 40rem; font-size: 1.08rem; margin: 0; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.6rem; }
.feature {
  position: relative; padding: 1.5rem; border-radius: var(--r-m);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  border: 1px solid var(--line); box-shadow: var(--hi); overflow: hidden; isolation: isolate;
  transition: border-color .3s, transform .3s;
}
.feature::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(79, 140, 201, .16), transparent 45%); }
.feature:hover { border-color: var(--line-2); transform: translateY(-2px); }
.feature:hover::before { opacity: 1; }
.feature .ico { width: 40px; height: 40px; border-radius: var(--r-s); display: grid; place-items: center;
  background: rgba(79, 140, 201, .12); border: 1px solid rgba(79, 140, 201, .28); color: var(--a1);
  margin-bottom: 1rem; }
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { margin: 0 0 .4rem; font-size: 1.08rem; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--muted); font-size: .96rem; }

/* the channel diagram */
.channel { margin-top: 2.6rem; padding: 1.6rem; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); }
.channel svg { width: 100%; height: auto; display: block; }
.channel .node { fill: rgba(18, 21, 32, .95); stroke: rgba(255, 255, 255, .16); }
.channel .label { fill: var(--fg); font: 600 15px var(--sans); }
.channel .small { fill: var(--muted); font: 12px var(--mono); }
.channel .tls { stroke: rgba(255, 255, 255, .13); stroke-width: 26; stroke-linecap: round; fill: none; }
.channel .pq { stroke: url(#pqgrad); stroke-width: 3; fill: none; stroke-dasharray: 2 12; stroke-linecap: round; }
.channel .ssh { stroke: rgba(106, 168, 230, .55); stroke-width: 2; fill: none; stroke-dasharray: 5 7; }
/* The packets are HTML over the drawing, moved by transform alone: an
   animated SVG redraws all of itself on every frame. The lane spans the
   tube, x 150 to 420 of 900, at y 115 of 230. */
.diagram { position: relative; }
.lane { position: absolute; left: 16.667%; width: 30%; top: 50%; height: 0; overflow: visible; pointer-events: none; }
.lane i { position: absolute; inset: 0; animation: pkt 2.2s linear infinite; will-change: transform; }
.lane i::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px rgba(79, 140, 201, .95); }
.lane i.back { animation-direction: reverse; animation-delay: -1.1s; }
@keyframes pkt { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.algos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 1.4rem; }
.algo { padding: .85rem 1rem; border-radius: 11px; border: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.algo b { display: block; font: 600 .95rem var(--mono); color: var(--fg); }
.algo span { color: var(--dim); font-size: .85rem; }

/* keyboard */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.keys { display: flex; flex-direction: column; gap: 1.1rem; padding: 2rem; border-radius: 18px;
  border: 1px solid var(--line); background: var(--card); }
.combo { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.combo .say { margin-left: auto; color: var(--muted); font-size: .92rem; }
.cap { min-width: 2.6rem; height: 2.6rem; padding: 0 .75rem; display: inline-grid; place-items: center;
  border-radius: 9px; font: 600 .9rem var(--mono); color: var(--fg);
  background: linear-gradient(180deg, #1d2130, #141722); border: 1px solid var(--line-2);
  box-shadow: 0 3px 0 #0a0c12, 0 4px 10px rgba(0, 0, 0, .4); transition: transform .12s, box-shadow .12s, color .12s, border-color .12s; }
.cap.down { transform: translateY(3px); box-shadow: 0 0 0 #0a0c12, 0 1px 4px rgba(0, 0, 0, .4);
  color: var(--a1); border-color: rgba(106, 168, 230, .6); }
.plus { color: var(--dim); }

/* ownership list */
.own { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.4rem; }
.own div { display: flex; gap: .9rem; padding: 1.1rem 1.2rem; border-radius: var(--r-m);
  border: 1px solid var(--line); box-shadow: var(--hi);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); }
.own svg { width: 22px; height: 22px; flex: none; color: var(--a1); margin-top: .15rem; }
.own b { display: block; }
/* The paragraph's margin put the title below its icon. */
.own p { margin: 0; }
.own span { color: var(--muted); font-size: .95rem; }

/* closing call */
.closing { max-width: 72rem; margin: 7rem auto 0; padding: 0 1rem; }
.closing-in { position: relative; overflow: hidden; text-align: center; padding: 4rem 1.5rem; border-radius: 24px;
  border: 1px solid var(--line-2);
  background: radial-gradient(ellipse at 50% 120%, rgba(79, 140, 201, .35), transparent 60%),
    radial-gradient(ellipse at 0% 0%, rgba(106, 168, 230, .14), transparent 50%), var(--bg-2); }
.closing h2 { font-size: clamp(1.9rem, 4.5vw, 3.1rem); letter-spacing: -.04em; margin: 0 0 .8rem; line-height: 1.08; }
.closing p { color: var(--muted); margin: 0 auto; max-width: 34rem; }
.mail { display: inline-block; margin-top: 1.6rem; font: 600 clamp(1.05rem, 3vw, 1.45rem) var(--mono); }

footer.foot { max-width: 72rem; margin: 4rem auto 0; padding: 1.6rem 1rem 2.4rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--dim); font-size: .9rem; }
footer.foot a { color: var(--muted); }
footer.foot nav { display: flex; gap: 1.2rem; }

/* ------------------------------------------------------------ inner pages */
.page { max-width: 46rem; margin: 0 auto; padding: 4.5rem 1rem 0; }
.page h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.04em; line-height: 1.08; margin: 1rem 0 1rem; }
.page h2 { font-size: 1.2rem; margin: 2.6rem 0 .6rem; letter-spacing: -.01em; }
.page p { color: #c9cedb; }
.glass { position: relative; padding: 1.6rem; border-radius: 18px; border: 1px solid var(--line-2);
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin: 1.4rem 0; }
.glass h2.first { margin-top: 0; }
pre.code { position: relative; margin: .6rem 0 1rem; padding: .95rem 1rem; border-radius: 11px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); color: #dfe3ee; font-size: .86rem;
  white-space: pre-wrap; word-break: break-all; }
pre.code.fp { color: var(--a1); font-size: .98rem; }
.copy { position: absolute; top: .5rem; right: .5rem; padding: .25rem .6rem; border-radius: 7px; font: 600 .75rem var(--sans);
  color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); cursor: pointer; }
/* A line of its own: the button covered the key's text. */
pre.code:has(.copy) { padding-top: 2.5rem; }
.copy:hover { color: var(--fg); }
.copy.done { color: var(--ok); border-color: rgba(74, 222, 128, .5); }
label { display: block; font-weight: 600; margin-bottom: .45rem; }
input { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line-2); border-radius: 11px;
  background: rgba(0, 0, 0, .35); color: var(--fg); font: 1.02rem var(--mono); letter-spacing: .03em;
  transition: border-color .2s, box-shadow .2s; }
input:focus { outline: none; border-color: var(--a2); box-shadow: 0 0 0 4px rgba(79, 140, 201, .2); }
form .btn { margin-top: 1rem; }
button:disabled { opacity: .55; cursor: progress; }
.msg { margin-top: .9rem; min-height: 1.5rem; }
.msg.bad { color: var(--bad); }
.msg.ok { color: var(--ok); }
.quiet { color: var(--muted); font-size: .92rem; }
.steps { display: flex; gap: .5rem; margin: 1.4rem 0 0; }
.steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); transition: background .5s; }
.steps span.done { background: var(--a2); }
.dl { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.lock { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 15px;
  background: linear-gradient(140deg, rgba(106, 168, 230, .18), rgba(159, 203, 242, .18));
  border: 1px solid var(--line-2); }
.lock svg { width: 26px; height: 26px; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ------------------------------------------------------------ reveal */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2, .8, .2, 1),
  transform .6s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .4s; }

/* ------------------------------------------------------------ small screens */
/* ------------------------------------------------------------ the desk, driven */
/* Containment: a key typed in one window repaints that window only. */
.desk { outline: none; touch-action: manipulation; contain: layout paint; }
.win { contain: layout paint; }
/* Focus sits on the hidden input, so the desk shows it with focus-within. */
.desk:focus-visible, .desk:has(.sink:focus-visible) { box-shadow: inset 0 0 0 2px rgba(79, 140, 201, .5); }
.sink { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0;
  padding: 0; font-size: 16px; pointer-events: none; }
.win { cursor: default; }
.win-head { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.win.dragging { opacity: .55; transition: opacity .2s; z-index: 4; }
.win.drop { border-color: var(--a1); box-shadow: 0 0 0 2px rgba(106, 168, 230, .45), 0 0 2.4em -.4em rgba(106, 168, 230, .6); }
.win.gone { opacity: 0; transform: scale(.9); pointer-events: none; }
.win-head .x { margin-left: .45em; width: 1.35em; height: 1.35em; display: grid; place-items: center;
  border-radius: .35em; color: var(--dim); cursor: pointer; flex: none; background: transparent; border: 0; padding: 0; }
.win-head .x:hover { background: rgba(251, 113, 133, .18); color: var(--bad); }
.win-head .x svg { width: .9em; height: .9em; }
.host.agent { background: rgba(251, 191, 36, .14); color: var(--warn); }
.term .win-body { cursor: text; }
.row { cursor: pointer; }
.row:hover { background: rgba(255, 255, 255, .04); }
.row.sel:hover { background: rgba(79, 140, 201, .22); }
.peek { position: absolute; inset: auto .6em .6em .6em; max-height: 45%; overflow: hidden; padding: .5em .7em;
  border-radius: .45em; background: rgba(0, 0, 0, .55); border: 1px solid var(--line-2); color: #cfd5e3;
  font: .92em/1.45 var(--mono); white-space: pre; opacity: 0; transform: translateY(.4em);
  transition: opacity .25s, transform .25s; pointer-events: none; }
.peek.on { opacity: 1; transform: none; }
.files .win-body { position: relative; }
.gui .win-body { position: relative; cursor: crosshair; }
.gui .cross { position: absolute; top: 2.2em; bottom: 0; width: 1px; background: rgba(255, 255, 255, .35);
  pointer-events: none; opacity: 0; }
.gui .cross.on { opacity: 1; }
.gui .tip { position: absolute; top: 2.4em; padding: .1em .45em; border-radius: .3em; font: .85em var(--mono);
  background: rgba(16, 19, 30, .95); border: 1px solid var(--line-2); color: var(--fg); pointer-events: none;
  opacity: 0; transform: translateX(-50%); white-space: nowrap; }
.gui .tip.on { opacity: 1; }
.taskbar .chip { cursor: pointer; }
.taskbar .chip:hover { color: var(--fg); }
.taskbar .desks span { cursor: pointer; }
.taskbar .desks span:hover:not(.cur) { background: rgba(255, 255, 255, .08); }
.taskbar .start { cursor: pointer; }
.palette { pointer-events: none; }
.palette.open { pointer-events: auto; }
.palette .item { cursor: pointer; }
.palette .item:hover:not(.hit) { background: rgba(255, 255, 255, .05); }
.palette .none { padding: .6em .8em; color: var(--dim); }
.empty { position: absolute; inset: 0 0 2.6em; display: grid; place-items: center; text-align: center;
  color: var(--dim); font: 1.1em var(--mono); pointer-events: none; opacity: 0; transition: opacity .4s; }
.empty.on { opacity: 1; }
.empty kbd { padding: .05em .4em; border: 1px solid var(--line-2); border-radius: .3em; }
.veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 7, 11, .82);
  color: var(--muted); font: 1.3em var(--mono); opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 6; }
.veil.on { opacity: 1; }
.veil span::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .6em;
  border: 2px solid var(--a2); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite;
  vertical-align: -.1em; }
@keyframes spin { to { transform: rotate(360deg); } }

.tools { display: flex; gap: .3rem; }
.tools button { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.tools button:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }
.tools button.on { color: var(--fg); border-color: var(--line-2); background: rgba(79, 140, 201, .16); }
.tools svg { width: 16px; height: 16px; }
.tools .sep { width: 1px; background: var(--line-2); margin: 3px 2px; }
.driving { display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap;
  margin-top: 1.1rem; color: var(--dim); font-size: .88rem; }
.driving b { color: var(--a1); font-weight: 600; }
.driving button { font: inherit; color: var(--muted); background: var(--card); border: 1px solid var(--line-2);
  border-radius: 999px; padding: .25rem .8rem; cursor: pointer; }
.driving button:hover { color: var(--fg); }
.driving kbd { padding: .05rem .4rem; border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 5px; color: var(--muted); font-size: .8rem; }

/* phone mode: one window, full bleed, as the compact shell draws it */
.browser { transition: max-width .6s cubic-bezier(.65, 0, .2, 1); max-width: 100%; margin: 0 auto; }
/* A tighter corner, and the taskbar clear of its curve: at 34 px, it cut the
   logo. */
.browser.phone { max-width: 380px; border-radius: 20px; }
.browser.phone .taskbar { padding-left: 1em; padding-right: 1em; }
.browser.phone .desk { aspect-ratio: 9 / 16; font-size: 12px; }
.browser.phone .url { display: none; }
.browser.phone .chrome { gap: .35rem; }
.browser.phone .tools { margin-left: auto; }
.browser.phone .win:not(.focus) { opacity: 0; pointer-events: none; }
.browser.phone .win.focus { left: 1.5% !important; top: 1% !important; width: 97% !important; height: 87% !important; }
.browser.phone .palette { width: 88%; }
.browser.phone .taskbar .chip:not(.on), .browser.phone .taskbar .desks { display: none; }

/* feature cards drive the demo */
.feature { cursor: pointer; }
.feature .show { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font: 600 .82rem var(--mono);
  color: var(--a1); opacity: .75; transition: opacity .2s, gap .2s; background: none; border: 0; padding: 0; cursor: pointer; }
.feature:hover .show { opacity: 1; gap: .55rem; }
.feature .show svg { width: 14px; height: 14px; }
.feature.playing { border-color: rgba(106, 168, 230, .55); }

/* what a proxy reads */
.proxy { margin-top: 1.4rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); overflow: hidden; }
.proxy-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem .9rem; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: .9rem; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); margin-left: auto; }
.seg button { font: 600 .8rem var(--sans); color: var(--muted); background: none; border: 0; padding: .35rem .8rem; border-radius: 6px; cursor: pointer; }
.seg button.on { color: #fff; background: var(--a2); }
.wire { padding: .8rem .9rem; font: .86rem/1.6 var(--mono); color: #cfd5e3; white-space: pre-wrap; word-break: break-all; min-height: 5.2em; }
.wire .leak { color: var(--bad); }
.wire .ct { color: var(--a2); opacity: .85; }
.channel .hop { cursor: pointer; }
.channel .hop:hover .node, .channel .hop.on .node { stroke: var(--a1); }
.algo { cursor: pointer; transition: border-color .2s, background .2s; }
.algo:hover, .algo.on { border-color: rgba(79, 140, 201, .55); background: rgba(79, 140, 201, .08); }
.explain { margin-top: .9rem; min-height: 3.2em; color: var(--muted); font-size: .95rem; }
.explain b { color: var(--fg); }

.cap { cursor: pointer; user-select: none; -webkit-user-select: none; }
.keys .hint { color: var(--dim); font-size: .85rem; margin-top: .2rem; }

/* Off screen, nothing animates (site.js sets .idle). */
.idle, .idle * { animation-play-state: paused !important; }

/* The diagram for a phone: a drawing 900 units wide has 4 px labels at 300 px. */
.diagram-phone { display: none; }
.dp-node { display: block; width: 100%; padding: .75rem 1rem; text-align: center; color: var(--fg); cursor: pointer;
  border-radius: 12px; border: 1px solid var(--line-2); background: rgba(18, 21, 32, .95); font: inherit; }
.dp-node.on { border-color: var(--a1); }
.dp-node b { display: block; }
.dp-node span { color: var(--dim); font-size: .85rem; }
.dp-link { margin: 0 auto; width: fit-content; padding: .55rem 0 .55rem .8rem; border-left: 1px dashed var(--line-2);
  color: var(--dim); font-size: .85rem; }

@media (max-width: 860px) {
  .features { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .algos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hero { padding-top: 2.5rem; }
  .eyebrow { font-size: .76rem; }
  .features, .own { grid-template-columns: 1fr; }
  .nav-links a:not(.pill) { display: none; }
  .palette { width: 70%; }
  .combo .say { margin-left: 0; width: 100%; }
  section.block { padding-top: 4.5rem; }

  /* The model starts in its phone mode (site.js), so no layouts to choose. */
  .browser .tools { display: none; }
  .term .line { white-space: pre-wrap; overflow-wrap: anywhere; }
  .diagram { display: none; }
  .diagram-phone { display: block; }
  .algos { grid-template-columns: 1fr; }
  .glass { padding: 1.1rem; }

  /* 44 px to touch. Links inside a sentence stay as they are. */
  .brand, .nav-links .pill, .feature .show, .seg button, .copy, .mail { min-height: 44px; display: inline-flex; align-items: center; }
  .copy { justify-content: center; min-width: 44px; padding: 0 .9rem; }
  pre.code:has(.copy) { padding-top: 3.6rem; }
  .feature .show { margin-top: .3rem; }
  .seg { margin-left: 0; width: 100%; }
  .seg button { flex: 1; justify-content: center; }
  footer.foot { flex-direction: column; gap: .4rem; }
  footer.foot nav { flex-direction: column; gap: 0; }
  footer.foot nav a { display: flex; align-items: center; min-height: 44px; }

  /* Break at spaces first: a command stays readable. */
  pre.code { word-break: normal; overflow-wrap: anywhere; }

  /* 16 px or iOS zooms the page when the field takes focus. */
  input { font-size: 16px; letter-spacing: 0; padding: .85rem .7rem; }
  input::placeholder { font-size: .74rem; }
  form .btn, .dl .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}