/* exe.dev's homepage, the 2026 design (round seven, Oct 20, with the team's copy of Oct 27): a Blue dark hero about two
   thirds of the screen tall, so the wave below it says there's more (David and Josh, Oct 28), with its holes punched
   through; three sections, each a tan sheet with a screen of the product
   laid over its right side; and paintings between them, tucked to the right under the next sheet, each one's edges
   thinning out into the paper (painting.js), the last running on under the footer. Nothing is pinned and nothing slides
   faster than the page: the paintings' wash moves a little as you scroll, and each screen plays its story once. */

/* ---------- the hero: on Primary's measurements, holes 22 in, the binding hairline at 40, a divider at 62% ---------- */
.h-sheet { --sheet-ink: var(--tan-light); --split: 62%; flex: 1; container: sheet / inline-size; display: grid; grid-template-columns: var(--split) minmax(0, 1fr); min-height: clamp(400px, 64svh, 760px); background: rgb(61, 109, 125); color: var(--sheet-ink); }
.h-sheet .r2 { left: var(--split); }
.h-head { padding: 30px 40px 30px 74px; }   /* just past the binding line */
/* as big as the column allows with the headline on three lines, "Computer for" the longest (5.9 times its size) */
.h-head h1 { margin: 0; font: 300 clamp(44px, calc((62cqi - 114px) / 6), 108px)/.98 var(--font-serif); letter-spacing: -.025em; text-wrap: balance; }
.h-side { display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 46px 34px 34px; }
.h-sub { margin: 0; max-width: 30ch; font: 400 clamp(14.5px, 1.6cqi, 16.5px)/1.45 var(--font-tw); text-wrap: pretty; }
.h-side .actions { margin-top: 22px; }
.sheet .actions .btn { height: 42px; padding: 0 16px; font-size: 14.5px; }

/* ---------- the paintings between the sheets, as About's: tucked right, under the top of the sheet below ---------- */
.scene-row { position: relative; z-index: 0; display: grid; grid-template-columns: var(--reveal-x) repeat(12, minmax(0, 1fr)) clamp(24px, 4cqi, 64px); padding-top: clamp(12px, 3svh, 40px); margin-bottom: calc(-1 * var(--tuck, 12cqi)); pointer-events: none; }
.scene { grid-column: var(--col, 5 / -1); position: relative; margin: 0; aspect-ratio: 16 / 9; }
.scene picture, .scene img { display: block; width: 100%; height: 100%; }
.scene img { object-fit: cover; object-position: var(--focus, 50% 50%); }
.scene .paint-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene.is-gl picture { visibility: hidden; }
/* the last lies under the footer (Hunter, Oct 16: you shouldn't see its bottom edge): no space above the footer's sheet,
   and its foot runs on under the paper for about a quarter of its height */
.scene-row.is-last { margin-bottom: -14svh; }
.scene-row.is-last .scene { margin-bottom: calc(-1 * var(--ar, .5625) * 26%); }

/* ---------- the sections: a tan sheet each, the product laid over its right side ---------- */
.st { position: relative; z-index: 1; display: grid; grid-template-columns: var(--reveal-x) repeat(12, minmax(0, 1fr)) clamp(24px, 4cqi, 64px); align-items: start; }
.st-bed { grid-column: 2 / span 8; grid-row: 1; display: flex; }
.st-ui-wrap { grid-column: 8 / span 6; grid-row: 1; position: relative; z-index: 3; margin-top: clamp(72px, 10svh, 116px); }
.st-sheet { --sheet-ink: var(--black); --split: 75%; flex: 1; min-width: 0; min-height: clamp(540px, 72svh, 700px); display: grid; grid-template-columns: var(--split) minmax(0, 1fr); background: var(--medium-sheet); color: var(--sheet-ink); --star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012.73%2012.73%22%3E%3Cpath%20d%3D%22M6.36304%200L7.46788%203.42516L10.5159%201.51152L9.1606%204.84552L12.7256%205.33881L9.54431%207.02164L11.9582%209.69104L8.43946%208.93528L8.57272%2012.5318L6.36304%209.69104L4.15335%2012.5318L4.28661%208.93528L0.767912%209.69104L3.18177%207.02164L0.000496387%205.33881L3.56547%204.84552L2.21018%201.51152L5.25819%203.42516L6.36304%200Z%22%2F%3E%3C%2Fsvg%3E"); }
.st-sheet .r2 { left: var(--split); }
.st-text { display: flex; flex-direction: column; padding: 30px 34px 34px 74px; }
.st-text h2 { margin: 30px 0 0; font: 300 clamp(40px, 4.6cqi, 66px)/1 var(--font-serif); letter-spacing: -.02em; text-wrap: balance; }
.st-dek { margin: 18px 0 0; max-width: 34ch; font: 400 15.5px/1.45 var(--font-tw); text-wrap: pretty; }
.st-points { margin: auto 0 0; padding: 40px 0 0; list-style: none; font: 300 17px/1.4 var(--font-serif); }
.st-points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); padding: 13px 0; text-wrap: pretty; }
.st-points li + li { border-top: .5px solid color-mix(in srgb, var(--sheet-ink) 34%, transparent); }
/* a point with a note under it (Google's, kept for its app verification): the point reads like the others, the note
   smaller, in the typewriter, so it doesn't make the point the longest in the list (Josh, Oct 28) */
.st-note { display: block; max-width: 62ch; margin-top: 7px; font: 400 13px/1.5 var(--font-tw); text-wrap: pretty; }
/* Primary's starfish on each line, as on Pricing */
.star { display: block; width: 12.7px; height: 12.7px; margin-top: .32em; background: currentColor; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }

/* ---------- the product, dark, in Primary's language: square, like the sheets and buttons; a header band with tabs,
   0.5px rules, Antarctican Mono for what the machine says, GT Alpina Typewriter for what you press, GT Alpina for names.
   A little colour, each with a job: the machines' hatches in the pale accents, running and root in Green light, what's
   live (the tab you're on, a packet on its way) in Orange ---------- */
.ui-d { --d-bg: #111010; --d-head: color-mix(in srgb, var(--d-bg) 91%, #F7F4EF); --d-term: color-mix(in srgb, var(--d-bg) 70%, #000); --d-line: rgba(247, 244, 239, .14); --d-line2: rgba(247, 244, 239, .32); --d-hatch: rgba(247, 244, 239, .62); --d-text: #F7F4EF; --d-dim: #A39C92; --accent: var(--orange); --run: var(--green-light);
  position: relative; background: var(--d-bg); color: var(--d-text); border: .5px solid var(--d-line2); font: 400 13px/1.5 var(--font-mono); text-align: left; overflow: hidden; }
.ui-d-head { display: flex; align-items: stretch; min-height: 42px; background: var(--d-head); border-bottom: .5px solid var(--d-line); }
.ui-d-tab { display: flex; align-items: center; padding: 0 18px; border: 0; border-right: .5px solid var(--d-line); background: none; color: var(--d-dim); font: 400 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ui-d-tab:hover { color: var(--d-text); }
.ui-d-tab[aria-selected="true"], .ui-d-tab.on { color: var(--d-text); background: var(--d-bg); box-shadow: inset 0 -1px 0 var(--accent); }
.ui-d-tab.on { cursor: default; }
.ui-d-tab:focus-visible, .ui-d-btn:focus-visible, .ui-d-replay:focus-visible, .choice button:focus-visible { outline: .5px solid var(--d-text); outline-offset: -4px; }
.ui-d-meta { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-left: .5px solid var(--d-line); color: var(--d-dim); font: 400 11.5px/1 var(--font-mono); white-space: nowrap; }
/* Play again: shows once a screen has told its story */
.ui-d-replay { margin-left: auto; display: grid; place-items: center; width: 42px; padding: 0; border: 0; border-left: .5px solid var(--d-line); background: none; color: var(--d-dim); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.ui-d.is-done .ui-d-replay { opacity: 1; pointer-events: auto; }
.ui-d-replay:hover { color: var(--d-text); }
.ui-d-replay svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ui-d-body { position: relative; padding: 20px 20px 18px; }
.ui-d-label { font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--d-dim); }
/* Primary's layout markers, a few pixels long: crop marks at two corners of each screen's body, a tick before each label,
   tick ends where the list's rules stop */
.ui-d-body::before, .ui-d-body::after { content: ""; position: absolute; z-index: 1; width: 7px; height: 7px; pointer-events: none; }
.ui-d-body::before { left: 7px; top: 7px; border-left: .5px solid var(--d-line2); border-top: .5px solid var(--d-line2); }
.ui-d-body::after { right: 7px; bottom: 7px; border-right: .5px solid var(--d-line2); border-bottom: .5px solid var(--d-line2); }
.ui-d-label::before { content: ""; display: inline-block; width: 9px; margin-right: 7px; vertical-align: .32em; border-top: .5px solid currentColor; }
.ui-d-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: .5px solid var(--d-line2); background: none; color: var(--d-text); font: 400 13px/1 var(--font-tw); cursor: pointer; white-space: nowrap; }
.ui-d-btn:hover:not(:disabled) { background: rgba(247, 244, 239, .07); }
.ui-d-btn:disabled { color: var(--d-dim); cursor: default; }
.ui-d-btn.pressed { border-color: var(--accent); color: var(--accent); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--run); }   /* running */
.ui-d-term { margin: 18px -20px -18px; padding: 14px 20px 16px; border-top: .5px solid var(--d-line); background: var(--d-term); font: 400 13px/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; min-height: 4.4em; }
.ui-d-term .p, .ui-d-term .c { color: var(--d-dim); }
.ui-d-term .c { font-style: italic; }
.ui-d-term .hl { color: var(--d-term); background: var(--yellow-light); box-shadow: 0 0 0 2px var(--yellow-light); }
.ui-d-term .root { color: var(--run); }
.ui-d .caret { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.18em; background: var(--d-text); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* the bars' shading on the first frame; home.js then draws it by hand, as the engravings are */
.hatch { --hcol: var(--hc, var(--d-hatch)); background: repeating-linear-gradient(var(--a, 135deg), var(--hcol) 0 .75px, transparent .75px 4.5px); }

/* 1 · one pool, as many machines as you need */
.pool-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pool-row b { font: 500 14px/1 var(--font-mono); }
.pool-bar { display: flex; height: 46px; margin: 14px 0 0; border: .5px solid var(--d-line2); }
.pool-bar .seg { position: relative; flex: 0 0 0; min-width: 0; overflow: hidden; border-right: .5px solid var(--d-line2); transition: flex-grow .6s var(--ease); }
.pool-bar .free { flex: 1 1 0; transition: flex-grow .6s var(--ease); }
/* a tick every quarter vCPU under the bar (home.js sets how many), Primary's small marks */
.pool-ticks { height: 7px; background: repeating-linear-gradient(to right, var(--d-line2) 0 .5px, transparent .5px calc(100% / var(--ticks, 8))); border-right: .5px solid var(--d-line2); }
.pool-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; color: var(--d-dim); font-size: 12px; }
.pool-foot span { white-space: nowrap; }
.vms { position: relative; margin: 18px 0 0; padding: 0; list-style: none; border-top: .5px solid var(--d-line); }
.vms li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 42px; border-bottom: .5px solid var(--d-line); }
.vms::before, .vms::after, .vms li::before, .vms li::after { content: ""; position: absolute; height: 5px; border-left: .5px solid var(--d-line2); }
.vms::before { left: 0; top: -2.5px; } .vms::after { right: 0; top: -2.5px; }
.vms li::before { left: 0; bottom: -2.5px; } .vms li::after { right: 0; bottom: -2.5px; }
.vms .sw { width: 11px; height: 11px; border: .5px solid var(--d-line2); }
.vm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-name span, .vm-size { color: var(--d-dim); }
.vm-size { font-size: 12px; white-space: nowrap; }
.vms .ui-d-btn { height: 28px; padding: 0 10px; font-size: 12px; }
.vms li.is-new { animation: arrive .7s var(--ease) both; }
@keyframes arrive { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.vms li.more { display: flex; min-height: 34px; color: var(--d-dim); font-size: 12px; }
.vms li[hidden] { display: none; }
.pool-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
/* every screen keeps its size while its story plays: room for the rows and lines it will have, and the tabs stacked */
#vms { min-height: calc(3 * 42px + 34px); }
#agents { min-height: calc(4 * 42px); }
#pool-term { min-height: calc(2 * 1.7em + 30px); }
#agents-term { min-height: calc(4 * 1.7em + 30px); }
#ui-prod .ui-d-body { display: grid; }
#ui-prod .pane { grid-area: 1 / 1; }
#ui-prod .pane[hidden] { display: block; visibility: hidden; }

/* 2 · what exe looks after: Primary's docs diagram, in the dark */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.15fr) 64px minmax(0, 1fr); align-items: center; margin: 8px 0 0; }
.node { display: grid; align-content: center; justify-items: center; gap: 5px; min-height: 76px; padding: 12px 8px; border: .5px solid var(--d-line2); text-align: center; }
.node b { font: 400 16px/1.1 var(--font-serif); }
.node span { color: var(--d-dim); font: 400 11px/1.3 var(--font-mono); }
.node.is-exe { background: rgba(247, 244, 239, .06); }
.edge { position: relative; height: 34px; }
.edge::before { content: ""; position: absolute; left: 6px; right: 7px; top: 50%; border-top: .5px solid var(--d-text); }
.edge::after { content: ""; position: absolute; right: 6px; top: 50%; width: 6px; height: 6px; border-top: .5px solid var(--d-text); border-right: .5px solid var(--d-text); transform: translateY(-50%) rotate(45deg); }
.edge span { position: absolute; left: 0; right: 0; top: -1px; text-align: center; color: var(--d-dim); font: 400 10px/1 var(--font-mono); }
.edge .pkt { position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent); opacity: 0; }
.edge.run .pkt { animation: pkt .85s var(--ease) forwards; }
@keyframes pkt { 0% { opacity: 0; left: 6px; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 12px); } }
/* a node doing its job outlines in the accent for a moment; a header exe adds is marked as it lands */
.node.ping { animation: ping 1.2s ease-out 1; }
@keyframes ping { 0%, 30% { border-color: var(--accent); } 100% { border-color: var(--d-line2); } }
.req .add { animation: add 1.8s ease-out 1; }
@keyframes add { 0%, 30% { background: color-mix(in srgb, var(--accent) 32%, transparent); } 100% { background: transparent; } }
.req { margin: 18px 0 0; padding: 12px 14px; border: .5px solid var(--d-line); background: var(--d-term); font: 400 12px/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.req .k { color: var(--d-dim); }
.choice { display: inline-flex; border: .5px solid var(--d-line2); }
.choice button { height: 30px; padding: 0 14px; border: 0; background: none; color: var(--d-dim); font: 400 12.5px/1 var(--font-tw); cursor: pointer; }
.choice button + button { border-left: .5px solid var(--d-line2); }
.choice button[aria-checked="true"] { background: var(--d-text); color: var(--d-bg); }
.pane-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--d-dim); font-size: 12px; }
/* the disk: a write lands on it, then the machine's own df says so */
.disks { margin-top: 6px; border-top: .5px solid var(--d-line); }
.disk-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 76px; align-items: center; gap: 14px; min-height: 46px; border-bottom: .5px solid var(--d-line); }
.disk-row b { font: 400 16px/1.1 var(--font-serif); }
.dval { text-align: right; color: var(--d-dim); font-size: 12px; white-space: nowrap; }
.req .p { color: var(--d-dim); }
.disk-use { display: flex; height: 14px; border: .5px solid var(--d-line2); }
.disk-use .hatch { flex: 0 0 38%; border-right: .5px solid var(--d-line2); transition: flex-basis .8s var(--ease); }
.tags { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 6px 9px; border: .5px solid var(--d-line2); font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; transition: border-color .3s ease, color .3s ease; }
.tags li.on { border-color: var(--run); color: var(--run); }

/* 3 · agents, each in its own VM */
.agents { margin-top: 0; }
.agent-up { color: var(--d-dim); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agent-who { color: var(--d-dim); }
.vms li.starting .dot { background: none; box-shadow: inset 0 0 0 .5px var(--d-dim); }
.vms li.starting .agent-up { color: var(--accent); }
.agent-up.jump { animation: jump 1.4s ease-out 1; }
@keyframes jump { 0%, 30% { color: var(--accent); } 100% { color: var(--d-dim); } }
@media (prefers-reduced-motion: reduce) { .node.ping, .req .add, .agent-up.jump, .vms li.is-new, .edge.run .pkt { animation: none; } .ui-d .caret { animation: none; } }

/* ---------- narrower: the sheets stack, the product hangs off each sheet's foot, every sheet on the hero's left edge
   (on a phone, 16px in) ---------- */
@container main (max-width: 980px) {
  .st { grid-template-columns: var(--reveal-x) minmax(0, 1fr) 16px; }
  .st-bed { grid-column: 2; }
  .st-ui-wrap { grid-column: 2; grid-row: 2; margin: -36px -4px 0 22px; }
  .st-sheet { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .st-sheet .r2 { display: none; }
  .st-text { padding: 28px 26px 70px 62px; }
  .scene-row { grid-template-columns: 16px minmax(0, 1fr) 16px; --tuck: 14cqi; }
  .scene { grid-column: 2 / -1; aspect-ratio: 4 / 3; --ar: .75; }
}
@container main (max-width: 560px) {
  .ui-d-tab { padding: 0 12px; }
  #ui-prod .ui-d-meta { display: none; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .edge { height: 30px; width: 1px; justify-self: center; }
  .edge::before { left: 0; right: auto; top: 4px; bottom: 7px; border-top: 0; border-left: .5px solid var(--d-text); }
  .edge::after { right: auto; left: -3px; top: auto; bottom: 6px; transform: rotate(135deg); }
  .edge span { left: 12px; right: auto; top: 50%; transform: translateY(-50%); white-space: nowrap; }
  .edge .pkt { display: none; }
  .pane-foot { flex-wrap: wrap; }
  .df-fs { display: none; }   /* df's first column, so its lines fit a phone */
  .vms li { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .vm-size { display: none; }
  .agents li { grid-template-columns: 12px minmax(0, 1fr) auto auto; }
  .agents .vm-name > span { display: none; }   /* the name alone says whose it is; with .exe.xyz and the agent it was cut off */
}
/* the hero on a phone: as tall as what's on it, the headline at the top and the rest under it */
@container page (max-width: 900px) {
  .h-sheet { min-height: 0; }
}
@container sheet (max-width: 700px) {
  .h-sheet .r2 { display: none; }
  .h-head { grid-column: 1 / -1; padding: 28px 28px 0 62px; }
  .h-head h1 { font-size: clamp(40px, calc((100cqi - 92px) / 5.6), 80px); }
  .h-side { grid-column: 1 / -1; padding: 44px 28px 28px 62px; }
}

/* ---------- dark: the tan sheets a step deeper to Primary's Tan dark with light type; the hero and the screens keep
   their colours, and the paintings dim toward the page (home.js) ---------- */
html[data-theme="dark"] .st-sheet { --sheet-ink: var(--tan-light); background: var(--tan-sheet); }
html[data-theme="dark"] .scene:not(.is-gl) picture { filter: brightness(.85) saturate(.92); }