/* The Hacker Pages, product mockups. Shared stylesheet.
   Design language working name: KEYPUNCH (RT12 session 6, 2026-10-13).
   Two materials from the same machine room: PAPER (card stock, ink, one red) for everything people read
   and decide on, and GLASS (black tile, amber phosphor) for everything the machine says: logs, code,
   messages. One accent: the red line drawn across a card deck to keep it in order. No other hue on
   chrome; member ANSI art keeps its own palette inside its tile.
   Motifs: the corner cut of an 80-column card, printed column digits, punched holes as progress, the
   interpreted line (mono caps) as kickers, rubber stamps for states, tractor-feed holes on long logs,
   paper tape as decoration and loading, chad as the one celebration.
   Motion: short, physical, honest; everything under prefers-reduced-motion: no-preference.
   Fonts via CDN for the mockups only (IBM Plex, OFL, R7); production self-hosts. */

:root {
  --paper: #F4EDDF;          /* page */
  --card: #FBF6EA;           /* card stock face */
  --manila: #E8DBBE;         /* bars, bands, rails */
  --manila-2: #DCCDA8;       /* deeper band */
  --hairline: #D9CDB0;       /* decorative rules */
  --rule: #8C8369;           /* meaningful boundaries, 3.2:1 on paper */
  --ink: #1C1A16;            /* text, 14.9:1 on paper */
  --ink-2: #47423A;          /* secondary, 8.5:1 on paper, 7.3:1 on manila */
  --ink-3: #6F6858;          /* tertiary, 4.7:1 on paper; never on manila (4.0:1) */
  --red: #B8301B;            /* the deck line: marks, stamps, the cut on the mark, focus; 5.2:1 on paper, paper on red 6.0:1 */
  --red-text: #A42A17;       /* red as text or hover: 5.3:1 on manila, 6.4:1 on paper */
  --red-tint: rgba(184, 48, 27, 0.07);
  --glass: #0B0A08;          /* the machine side */
  --glass-2: #15130F;
  --glass-line: #2A2620;
  --phosphor: #FFB000;       /* amber, 10.7:1 on glass */
  --phosphor-dim: #B57D1A;   /* 5.5:1 on glass */
  --glass-text: #D9D2C0;     /* 13:1 on glass */
  /* Legacy names used by the pages */
  --bg: var(--paper); --surface: var(--card); --raised: var(--manila); --sunken: var(--glass);
  --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3);
  --line: var(--hairline); --line-ui: var(--rule); --line-strong: var(--rule);
  --accent: var(--ink); --accent-hover: #2E2A24; --accent-tint: var(--manila); --accent-line: var(--rule);
  --primary: var(--ink); --primary-hover: #2E2A24; --primary-soft: var(--manila);
  --hot: var(--red); --hot-text: var(--red); --hot-soft: var(--red-tint); --hot-tint: var(--red-tint); --hot-line: rgba(184, 48, 27, 0.5);
  --shield: var(--ink-2); --shield-tint: var(--manila); --shield-line: var(--rule);
  --lime: var(--manila); --lime-soft: var(--manila);
  --amber: var(--phosphor); --amber-tint: rgba(255, 176, 0, 0.10); --amber-line: rgba(255, 176, 0, 0.5);
  --sans: "IBM Plex Sans", Inter, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --r: 3px;                  /* paper does not have soft corners */
  --r-lg: 4px;
  --cut: 14px;               /* corner cut size */
  --frame: 1120px;
  --shadow: 0 1px 0 rgba(28, 26, 22, 0.10);  /* the card's edge, not a glow */
  --t-fast: 160ms; --t-med: 240ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
p { margin: 0; }
a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:not([class]):hover { color: var(--red-text); }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* #top takes focus after the intro for keyboard and screen-reader position; a section is not a control, so no ring (its bottom edge read as a red line across the page). */
.hero:focus, .hero:focus-visible { outline: none; }
::selection { background: var(--ink); color: var(--paper); }
input, textarea { caret-color: var(--red); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }
.frame { max-width: var(--frame); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }

/* The interpreted line: mono caps, the way a keypunch printed a card's content along its top edge */
.kicker, .sec-head .kicker, .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

/* Buttons: keycaps. Primary is ink on paper; the red is never a button. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r);
  font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer; border: 1px solid var(--ink); white-space: nowrap; color: var(--ink); background: transparent;
  box-shadow: 0 2px 0 var(--ink); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast); }
.btn:hover { background: var(--manila); color: var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: #2E2A24; color: var(--paper); }
.btn.secondary { border-color: var(--rule); box-shadow: 0 2px 0 var(--rule); }
.btn.secondary:active { box-shadow: 0 0 0 var(--rule); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn.xs { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.btn.tiny { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; background: transparent; color: var(--ink); }
.btn.primary:disabled { background: var(--manila-2); color: var(--ink-2); border-color: var(--manila-2); }
.textlink { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.textlink:hover { color: var(--red-text); }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(244, 237, 223, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--hairline); }
.topbar .frame { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 600; font-size: 14.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: var(--ink); }
.wordmark .mark { display: none; }
.wordmark svg { width: 36px; height: 27px; flex: 0 0 auto; }
.wordmark svg .cut, .mark-svg .cut { fill: var(--red); }
.topbar nav { display: flex; align-items: center; gap: 20px; }
.topbar nav a.signin { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.topbar nav a.signin:hover { color: var(--red-text); }

/* Hero: paper */
.hero { padding: 80px 0 72px; position: relative; }
.hero .frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
h1.display { font-size: clamp(32px, 3.45vw, 42px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 20px; color: var(--ink); font-weight: 600; }
h1.display .nw { white-space: nowrap; }
h1.display em { font-style: normal; font-weight: 400; color: var(--ink); }
.lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 32em; margin-bottom: 32px; }
.after { font-size: 14px; color: var(--ink-3); margin-top: 12px; line-height: 1.5; }
.after a { color: var(--ink-2); }

/* Claim form: labels above, the button on the baseline of the fields */
form.claim { display: grid; gap: 10px; }
form.claim .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: end; }
form.claim .field { display: grid; gap: 6px; }
form.claim .field > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.input { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); overflow: hidden; }
.input:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--manila); }
.input .prefix { padding: 0 0 0 14px; color: var(--ink-3); font-family: var(--mono); font-size: 15px; }
.input input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; min-height: 46px; color: var(--ink); font-size: 16px; }
.input input::placeholder { color: var(--ink-3); }
.input input:focus { outline: none; }
.input.handle input { font-family: var(--mono); padding-left: 4px; }

/* Cards: card stock with the corner cut */
.card { position: relative; background: var(--card); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow); clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.card::before { content: ""; position: absolute; left: 0; top: 0; width: var(--cut); height: var(--cut); pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, transparent calc(50% - 0.75px), var(--hairline) calc(50% - 0.75px), var(--hairline) calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
.card .bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 10px 24px; border-bottom: 1px solid var(--hairline); background: var(--manila); font-size: 12px; color: var(--ink-2); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.card .bar .tab { font-weight: 600; color: var(--ink); }
.visual { position: relative; }
.profile { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 18px 18px 14px; align-items: center; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--manila-2); border: 1px solid var(--rule); background-image: radial-gradient(var(--rule) 0.7px, transparent 0.8px); background-size: 4px 4px; }
.avatar.sys { background: var(--ink); border-color: var(--ink); background-image: none; }
.profile .name { font-weight: 600; font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink); }
.profile .name .handle { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--ink-3); }
.profile .sub { font-size: 14px; color: var(--ink-2); }

/* Tags and stamps */
.tag { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); white-space: nowrap; }
.tag.verified, .tag.indigo { border-color: var(--ink); color: var(--ink); }
.tag.hot { border: 2px solid var(--red); color: var(--red); font-weight: 600; padding: 2px 7px; transform: rotate(-2deg); background: var(--card); }
/* Post type: a chip of card stock with one hole punched at the type's position (write-up, question, update, code).
   The stock tints are the four colours punched cards came in; the word is always printed next to the hole. */
.type { position: relative; padding-left: 36px; }
.type::before { content: ""; position: absolute; left: 7px; top: 50%; width: 22px; height: 11px; margin-top: -5.5px; background: var(--stock); border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(28, 26, 22, 0.14); }
.type::after { content: ""; position: absolute; left: calc(10px + var(--pos) * 5px); top: 50%; width: 3px; height: 6px; margin-top: -3px; background: var(--ink); border-radius: 0.5px; }
.type.writeup { --stock: #E6B8A2; --pos: 0; }
.type.question { --stock: #BFD3B0; --pos: 1; }
.type.update { --stock: #DCCDA8; --pos: 2; }
.type.code { --stock: #E9C978; --pos: 3; }
.typechip.type { padding-left: 38px; }
.typechip.type::before { left: 9px; }
.typechip.type::after { left: calc(12px + var(--pos) * 5px); }
.typechip.type[aria-pressed="true"]::after { background: var(--paper); }
.stamp { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border: 2px solid currentColor; border-radius: 3px; color: var(--red); transform: rotate(-2.5deg); background: var(--card); box-shadow: inset 0 0 0 1px var(--card), inset 0 0 0 2px currentColor; }
.stamp.ink { color: var(--ink); }

/* Breach: a stamped notice on the card */
.breach { margin: 0 18px 14px; padding: 14px 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 10px; }
.breach .title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink); }
.breach .meta { font-size: 13px; color: var(--ink-2); }
/* The calling card an attacker leaves on the page: a manila slip in their own words */
.breach .calling { margin: 0; padding: 8px 12px; background: var(--manila); font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--ink); clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.breach .calling cite { display: block; margin-top: 4px; font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.breach .meta code { font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--manila); border-radius: 2px; padding: 1px 6px; }
.breach .actions { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.evidence { list-style: none; margin: 0 18px; padding: 0; border-top: 1px solid var(--hairline); }
.evidence li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; font-size: 14px; }
.evidence li + li { border-top: 1px solid var(--hairline); }
.evidence .what { font-weight: 600; color: var(--ink); }
.evidence .how { font-size: 13px; color: var(--ink-2); }
.card .foot { margin-top: 14px; padding: 10px 18px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--ink-2); background: var(--manila); }
.visual figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); text-align: center; }
figure { margin: 0; }

/* Sections */
section.band { padding: 80px 0; }
section.band.white { background: var(--card); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.sec-head { max-width: 40em; margin-bottom: 40px; }
.sec-head .kicker { display: block; margin-bottom: 10px; color: var(--red); }
.sec-head h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; margin-bottom: 10px; color: var(--ink); }
.sec-head p { font-size: 17px; color: var(--ink-2); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Steps: punched column numbers */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps li { display: grid; gap: 10px; align-content: start; }
.steps .n { width: 36px; height: 36px; border-radius: 2px; background: var(--ink); color: var(--paper); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-family: var(--mono); }
.steps h3 { font-size: 20px; color: var(--ink); }
.steps p { color: var(--ink-2); font-size: 16px; }
.steps .proof { font-size: 14px; color: var(--ink-3); }
.footnote { margin-top: 28px; font-size: 15px; color: var(--ink-2); }

/* How it works: the two halves of the game, side by side */
.teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.team { padding-right: 40px; }
.team h3 { font-size: 22px; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.team + .team { border-left: 1px solid var(--hairline); padding-left: 40px; padding-right: 0; }
.moves { list-style: none; margin: 0; padding: 0; }
.moves li { padding: 18px 0; border-bottom: 1px solid var(--hairline); display: grid; gap: 6px; }
.moves li:last-child { border-bottom: 0; }
.moves h4 { font-size: 18px; font-weight: 600; color: var(--ink); }
.moves p { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 36em; }

/* Audience table: three columns, hairlines, no boxes */
.audiences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.aud { padding: 22px 32px 8px 0; display: grid; gap: 12px; align-content: start; }
.aud + .aud { border-left: 1px solid var(--hairline); padding-left: 32px; }
.aud:last-child { padding-right: 0; }
.aud h3 { font-size: 19px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.aud ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; display: grid; gap: 6px; }
.aud .never { font-size: 14px; color: var(--red-text); font-weight: 600; }
.aud .icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }

/* Season block */
.season { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.promises li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 16px; color: var(--ink-2); }
.promises li strong { color: var(--ink); }
.promises .check { width: 20px; height: 20px; border-radius: 2px; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; color: var(--paper); font-size: 12px; font-weight: 700; }
.promises.charter { counter-reset: none; }
.promises.charter .check { font-family: var(--mono); font-size: 11px; width: 22px; height: 22px; }
.panel { background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow); padding: 24px; }
.panel h3 { font-size: 20px; margin-bottom: 6px; }
.panel p { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; }
.panel form.claim .row { grid-template-columns: minmax(0, 1fr); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--rule); padding-top: 6px; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; font-size: 17px; position: relative; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink-3); font-weight: 400; font-family: var(--mono); }
.faq details[open] summary::after { content: "\2212"; color: var(--red); }
.faq .answer { padding: 0 0 18px; color: var(--ink-2); font-size: 16px; max-width: 42em; }

/* Founder note and closing */
.note { max-width: 640px; margin: 0 auto; text-align: center; }
.note blockquote { margin: 0 0 18px; font-size: 20px; line-height: 1.45; color: var(--ink); }
.note .sig { font-size: 13px; color: var(--ink-2); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.closing { text-align: center; padding: 64px 0 72px; }
.closing h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 20px; letter-spacing: -0.02em; }
.closing form.claim { max-width: 640px; margin: 0 auto; text-align: left; }
.closing .after { text-align: center; }

/* Recruiter strip */
.recruiters { border-top: 1px solid var(--hairline); background: var(--card); }
.recruiters .frame { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.recruiters p { font-size: 15px; color: var(--ink-2); align-self: center; }
.recruiters p strong { color: var(--ink); }
.recruiters form { display: flex; gap: 10px; align-items: end; }
.recruiters .field { display: grid; gap: 6px; }
.recruiters .field > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.recruiters .input { min-height: 42px; min-width: 240px; }
.recruiters .input input { min-height: 40px; font-size: 15px; }
.recruiters .btn { min-height: 42px; }

/* Footer */
footer { padding: 28px 0 48px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--rule); }
footer .frame { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer a { color: var(--ink-2); text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); }

/* Mockup tag, not product */
.mock-tag { position: fixed; left: 12px; bottom: 12px; z-index: 30; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 5px 8px; border-radius: 2px; font-family: var(--mono); }

/* ---------- Homepage: network section ---------- */
.social-demo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; align-items: start; }
.social-demo > * { min-width: 0; }
.social-demo .lines { max-height: none; }
.social-demo figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* ---------- App shell (logged-in surfaces) ---------- */
.appbar { position: sticky; top: 0; z-index: 20; background: rgba(244, 237, 223, 0.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--hairline); }
.appbar .frame { display: flex; align-items: center; gap: 18px; min-height: 60px; max-width: 1280px; }
.search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); color: var(--ink-3); font-size: 14.5px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 14.5px; color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; }
.appbar .icons { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r); color: var(--ink-2); text-decoration: none; }
.iconbtn:hover { background: var(--manila); color: var(--ink); }
.iconbtn .badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 2px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); }
.appbar .me { width: 32px; height: 32px; border-radius: 50%; background: var(--manila-2); margin-left: 6px; border: 1px solid var(--rule); display: inline-block; }

.app { max-width: 1280px; margin: 0 auto; padding: 20px 24px 120px; display: grid; grid-template-columns: 232px minmax(0, 1fr) 312px; gap: 24px; align-items: start; }
.app.two-col-app { grid-template-columns: 232px minmax(0, 1fr); padding-bottom: 40px; }
.app > main { min-width: 0; }
.rail { position: sticky; top: 80px; display: grid; gap: 16px; }
.rail nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r); color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; }
.rail nav a:hover { background: var(--card); color: var(--ink); }
.rail nav a[aria-current="page"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--red); }
.rail nav a .count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.rail nav a .count.hot { color: var(--red); font-weight: 600; }
.rail nav svg { flex: 0 0 auto; }
.mini { padding: 14px 14px 14px 18px; display: grid; gap: 10px; }
.mini .who { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.mini .avatar { width: 40px; height: 40px; }
.mini .nm { font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--ink); }
.mini .hd { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.mini .st { display: flex; gap: 14px; font-size: 13px; color: var(--ink-3); }
.mini .st b { color: var(--ink); font-weight: 600; }
.mini .nodeline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--hairline); padding-top: 10px; }

/* Composer */
.composer { padding: 14px 16px 14px 20px; display: grid; gap: 10px; }
.composer .top { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.composer .avatar { width: 40px; height: 40px; }
.composer textarea { width: 100%; min-height: 56px; resize: vertical; border: 1px solid var(--rule); border-radius: var(--r); padding: 10px 12px; font: inherit; font-size: 15px; background: var(--paper); color: var(--ink); }
.composer textarea::placeholder { color: var(--ink-3); }
.composer textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--manila); }
.composer .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.composer .types { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.composer .types .lbl { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.typechip { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding: 5px 9px; border-radius: 2px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); cursor: pointer; }
.typechip:hover { border-color: var(--ink); color: var(--ink); }
.typechip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.composer .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.select { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

/* Feed tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: 18px 0 14px; overflow-x: auto; scrollbar-width: thin; }
.tabs a { padding: 10px 14px; font-weight: 600; font-size: 15px; color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.tabs .spacer { flex: 1; }
.tabs .order { align-self: center; font-size: 12px; color: var(--ink-3); padding-right: 6px; font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 1240px) { .tabs .order { display: none; } }

/* Posts: a deck. Each card carries its deck-line tick on the top edge; in order they form the diagonal. */
.feed { display: grid; gap: 12px; min-width: 0; counter-reset: deck; }
.post { padding: 16px 18px 16px 22px; display: grid; gap: 10px; min-width: 0; counter-increment: deck; }
.post > * { min-width: 0; }
.post .head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.post .avatar { width: 40px; height: 40px; }
.post .by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 15px; }
.post .by .nm { font-weight: 600; color: var(--ink); }
.post .by .hd { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.post .by .when { font-size: 12.5px; color: var(--ink-3); font-family: var(--mono); }
.post .by .when::before { content: "\00B7"; margin-right: 8px; }
.post .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.post .more { color: var(--ink-3); font-size: 18px; line-height: 1; text-decoration: none; padding: 2px 6px; border-radius: 2px; }
.post .more:hover { background: var(--manila); color: var(--ink); }
.post .body { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.post .body p + p { margin-top: 8px; }
.post .body h2, .post .body h3 { font-size: 17px; margin-bottom: 4px; }
.post .repost-of { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; margin-left: 50px; }
.post pre, .tile pre, pre.logx, pre.code { margin: 0; background: var(--glass); color: var(--glass-text); border-radius: 2px; padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; overflow-x: auto; }
.post pre .k, pre.code .k { color: var(--phosphor); }
.post pre .c, pre.code .c { color: var(--phosphor-dim); }
/* Column ruler: the printed column numbers of a card, on glass */
.post pre, pre.logx, pre.code { position: relative; padding-top: 26px; }
.post pre::before, pre.logx::before, pre.code::before { content: "1        10        20        30        40        50        60        70        80"; position: absolute; left: 14px; right: 14px; top: 7px; overflow: hidden; font-size: 10px; letter-spacing: 0; color: var(--phosphor-dim); opacity: 0.8; white-space: pre; }
.logx { color: var(--glass-text); border: 0; padding-left: 26px; background-image: radial-gradient(circle at 9px 50%, var(--glass-2) 0, var(--glass-2) 3px, transparent 3.5px); background-size: 100% 18px; background-repeat: repeat-y; }
.logx .hl { background: rgba(184, 48, 27, 0.35); color: #FFD9CF; }
.attached { border: 1px solid var(--hairline); padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--paper); font-size: 14px; }
.attached .what { font-weight: 600; color: var(--ink); }
.attached .how { font-size: 13px; color: var(--ink-3); }
.post .actions { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 0 -8px; }
.act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 2px; color: var(--ink-3); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.act.on { color: var(--red-text); }
.act.on svg { fill: var(--red); stroke: var(--red); }
.act.boosted { color: var(--ink); }
.act:hover, .act.on:hover { background: var(--manila); color: var(--ink); }
.act .n { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12.5px; }
.post.system { background: var(--manila); box-shadow: inset 0 0 0 1px var(--rule); }
.post.system .hd, .post.system .when, .post.system .act, .post.system .repost-of { color: var(--ink-2); }
.post.system::after { display: none; }
.post.system .by .nm { color: var(--ink-2); }
.replies { border-top: 1px solid var(--hairline); padding-top: 10px; display: grid; gap: 10px; }
.reply { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 14px; color: var(--ink-2); }
.reply .avatar { width: 28px; height: 28px; }
.reply .nm { font-weight: 600; margin-right: 6px; color: var(--ink); }
.reply .hd { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-right: 6px; }
.reply .when { font-size: 12.5px; color: var(--ink-3); font-family: var(--mono); }

/* Punched progress: three columns of a card; a completed step is a punched hole */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.strip li { display: grid; gap: 5px; font-size: 12px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.strip li .bar { height: 14px; width: 100%; border: 1px solid var(--rule); border-radius: 1px; background: var(--paper); position: relative; }
.strip li .bar::after { content: ""; position: absolute; left: 50%; top: 2px; width: 7px; height: 8px; transform: translateX(-50%) scale(0); background: var(--ink); border-radius: 1px; }
.strip li.done .bar::after { transform: translateX(-50%) scale(1); }
.strip li.now .bar { border-color: var(--ink); border-style: dashed; }
.strip li.done, .strip li.now { color: var(--ink); }
.strip li .lbl { font-weight: 600; }
.strip li .sub { font-size: 12px; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-family: var(--sans); }

/* Right column */
.side { position: sticky; top: 80px; display: grid; gap: 14px; }
.side .card { padding: 14px 16px 14px 20px; display: grid; gap: 10px; }
.side h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono); font-weight: 600; display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
.side h2 a { font-size: 12px; font-weight: 500; text-decoration: none; color: var(--ink-2); }
.side .breach { margin: 0; }
.kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
.kv div { border: 1px solid var(--hairline); padding: 8px 6px; text-align: center; background: var(--paper); }
.kv dt { font-size: 11px; font-weight: 500; color: var(--ink-2); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.kv dd { margin: 2px 0 0; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--ink); font-family: var(--mono); }
.kv .sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); font-family: var(--sans); }
.pager p { font-size: 14px; color: var(--ink-2); }
.pager ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); display: grid; gap: 4px; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.people li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.people .avatar { width: 32px; height: 32px; }
.people .nm { font-weight: 600; line-height: 1.2; color: var(--ink); }
.people .rl { font-size: 12.5px; color: var(--ink-3); }
.side .fine { font-size: 12px; color: var(--ink-3); }

/* Docked messages: glass */
.dock { position: fixed; right: 24px; bottom: 0; width: 380px; z-index: 25; background: var(--glass); border: 1px solid var(--glass-line); border-bottom: 0; box-shadow: var(--shadow); font-family: var(--mono); font-size: 12.5px; color: var(--glass-text); }
.dock .head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--glass-line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--phosphor); }
.dock .head .lock { display: inline-flex; align-items: center; color: var(--phosphor-dim); }
.dock .head .ctl { margin-left: auto; display: flex; gap: 4px; }
.dock .head .status { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--glass-text); margin-left: 6px; }
.dock .head .status .u { color: var(--phosphor); font-weight: 700; }
/* Collapsed to a status line: the default on member pages, so the right column stays readable. */
.dock.min .bufs, .dock.min .lines, .dock.min .in { display: none; }
.dock .head .ctl a { color: var(--phosphor-dim); text-decoration: none; padding: 2px 6px; }
.dock .head .ctl a:hover { color: var(--phosphor); }
.dock .bufs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--glass-line); overflow-x: auto; }
.dock .bufs a { padding: 5px 9px; color: var(--phosphor-dim); text-decoration: none; white-space: nowrap; }
.dock .bufs a[aria-current="true"] { background: var(--glass-2); color: var(--phosphor); }
.dock .bufs .u { color: var(--phosphor); font-weight: 700; }
.lines { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 3px; line-height: 1.5; max-height: 170px; overflow-y: auto; background: var(--glass); color: var(--glass-text); }
.lines li { padding-left: 4em; text-indent: -4em; }
.lines li.day { padding-left: 0; text-indent: 0; }
.lines .t { display: inline-block; width: 3.4em; margin-right: 0.6em; text-indent: 0; color: var(--phosphor-dim); }
.lines .n1 { color: var(--phosphor); font-weight: 600; }
.lines .n2 { color: var(--glass-text); font-weight: 700; }
.lines .sys { color: var(--phosphor-dim); font-style: italic; }
.lines .srv { color: var(--glass-text); background: var(--glass-2); border-left: 2px solid var(--phosphor-dim); padding: 2px 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lines .srv b { color: var(--phosphor); font-weight: 700; margin-right: 6px; }
.lines .day { text-align: center; color: var(--phosphor-dim); font-size: 12px; margin: 4px 0; }
.lines code { background: var(--glass-2); border: 1px solid var(--glass-line); padding: 0 4px; color: var(--phosphor); }
.dock .in { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--glass-line); overflow: hidden; }
.dock .in .pr { color: var(--phosphor-dim); white-space: nowrap; }
.dock .in input { flex: 1 1 0; width: 0; min-width: 0; border: 0; background: transparent; font-family: var(--mono); font-size: 12.5px; color: var(--phosphor); caret-color: var(--phosphor); }
.dock .in input::placeholder { color: var(--phosphor-dim); }
.dock .in input:focus { outline: none; }
.dock .foot { padding: 6px 12px 8px; font-size: 12px; color: var(--phosphor-dim); }

/* Full messages page: glass console inside a paper frame */
.chat { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: calc(100vh - 124px); min-height: 480px; }
.chat.card-in, .chat .card-in { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); overflow: hidden; color: var(--glass-text); }
.bufferlist { border-right: 1px solid var(--glass-line); background: var(--glass-2); display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.bufferlist h2 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono); padding: 12px 14px; border-bottom: 1px solid var(--glass-line); display: flex; justify-content: space-between; align-items: center; color: var(--phosphor); }
.bufferlist h2 .textlink { color: var(--phosphor-dim); text-decoration: none; }
.bufferlist ul { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; align-content: start; font-family: var(--mono); font-size: 13px; }
.bufferlist li a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; color: var(--glass-text); text-decoration: none; }
.bufferlist li a:hover { background: var(--glass); color: var(--phosphor); }
.bufferlist li a[aria-current="true"] { background: var(--glass); color: var(--phosphor); box-shadow: inset 2px 0 0 var(--phosphor); }
.bufferlist .idx { color: var(--phosphor-dim); width: 14px; }
.bufferlist .u { margin-left: auto; font-weight: 700; color: var(--phosphor); }
.bufferlist .req { margin: 8px; padding: 10px; border-top: 1px solid var(--glass-line); font-size: 12.5px; color: var(--glass-text); display: grid; gap: 8px; font-family: var(--mono); }
.bufferlist .req strong { color: var(--phosphor); }
.bufferlist .req .acts { display: flex; gap: 6px; }
/* Keycaps on glass: phosphor lines, phosphor fill for the primary */
.bufferlist .req .btn, .on-glass .btn { border-color: var(--phosphor); color: var(--phosphor); box-shadow: 0 2px 0 var(--phosphor-dim); font-family: var(--mono); }
.bufferlist .req .btn:hover, .on-glass .btn:hover { background: var(--glass-2); color: var(--phosphor); }
.bufferlist .req .btn.primary, .on-glass .btn.primary { background: var(--phosphor); color: var(--glass); }
.bufferlist .req .btn.primary:hover, .on-glass .btn.primary:hover { background: #FFC23D; color: var(--glass); }
.bufferlist .req .btn.secondary, .on-glass .btn.secondary { border-color: var(--phosphor-dim); color: var(--glass-text); }
.on-glass :focus-visible { outline-color: var(--phosphor); }
.conv { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.conv > * { min-width: 0; }
.conv .lines li { overflow-wrap: anywhere; min-width: 0; }
.conv .title { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--glass-line); font-size: 13px; font-family: var(--mono); }
.conv .title .who { font-weight: 700; font-size: 14px; color: var(--phosphor); }
.conv .title .topic { color: var(--phosphor-dim); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .title .lock { margin-left: auto; display: inline-flex; color: var(--phosphor-dim); }
.conv .title .more { color: var(--phosphor-dim); text-decoration: none; font-size: 18px; line-height: 1; padding: 0 4px; }
.conv .title .more:hover { color: var(--phosphor); }
.conv .lines { max-height: none; min-height: 0; overflow-y: auto; font-size: 13px; padding: 14px 16px; align-content: end; }
.conv .in { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--glass-line); font-family: var(--mono); font-size: 13px; overflow: hidden; }
.conv .in input { flex: 1 1 0; width: 0; min-width: 0; border: 0; background: transparent; font-family: var(--mono); font-size: 13px; color: var(--phosphor); caret-color: var(--phosphor); }
.conv .in input::placeholder { color: var(--phosphor-dim); }
.conv .in input:focus { outline: none; }
.conv .in .send { font-family: var(--mono); background: var(--phosphor); color: var(--glass); border-color: var(--phosphor); box-shadow: 0 2px 0 var(--phosphor-dim); }
.conv .in .send:hover { background: #FFC23D; color: var(--glass); }

/* ---------- Motion catalogue (all gated) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .strip li.done .bar::after { animation: punch var(--t-fast) var(--ease-snap) both; }
  .strip li:nth-child(2).done .bar::after { animation-delay: 120ms; }
  .strip li:nth-child(3).done .bar::after { animation-delay: 240ms; }
  .tag.hot, .stamp { animation: stamp var(--t-med) var(--ease-snap) both; }
  .feed .post, .picks li { animation: deal var(--t-med) var(--ease-out) both; }
  .feed .post:nth-child(2), .picks li:nth-child(2) { animation-delay: 50ms; }
  .feed .post:nth-child(3), .picks li:nth-child(3) { animation-delay: 100ms; }
  .feed .post:nth-child(4) { animation-delay: 150ms; }
  .feed .post:nth-child(5) { animation-delay: 200ms; }
  .tape.feeding { animation: feed 1.4s linear infinite; }
  .caret::after { content: "\2588"; margin-left: 1px; animation: caret 1s steps(1) infinite; }
  .chad { animation: chad 700ms var(--ease-out) both; }
}
@keyframes punch { from { transform: translateX(-50%) scale(0); } 60% { transform: translateX(-50%) scale(1.25); } to { transform: translateX(-50%) scale(1); } }
@keyframes stamp { from { transform: rotate(-2.5deg) scale(1.35); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-2.5deg) scale(1); opacity: 1; } }
@keyframes deal { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes feed { from { background-position-x: 0; } to { background-position-x: -72px; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes chad { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(70px) rotate(220deg); opacity: 0; } }
.chad { position: absolute; width: 5px; height: 9px; background: var(--manila-2); border: 1px solid var(--rule); border-radius: 1px; pointer-events: none; }

/* Paper tape: 8-level, sprocket holes between tracks 3 and 4; decorative or a loader */
.tape { height: 26px; background-color: var(--manila); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background-image: radial-gradient(circle at 9px 13px, var(--paper) 0 1.6px, transparent 2px); background-size: 18px 26px; }

/* ---------- Opening sequence: a dark room, two desks under a blue and a red lamp, a terminal between them.
   A punched card (the mark) feeds into the reader and starts the machine. First visit only, skippable at any
   moment, nothing waits on it, no trademarks or film quotes. Reduced motion shows the final frame at once.
   Blue and red are the two teams' lamps and exist only in this film, never in the interface. ---------- */
.boot { position: fixed; inset: 0; z-index: 40; background: #07070A; display: grid; place-items: center; padding: 32px 16px; overflow: hidden; touch-action: none; color: var(--glass-text); }
.boot.off { display: none; }
/* The page sits at scroll 0 under the overlay; a wheel or key that enters must not also move it. */
html.booting { overflow: hidden; }
.boot-skip { position: absolute; top: 14px; right: 16px; z-index: 3; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--phosphor-dim); text-decoration: none; border: 1px solid var(--glass-line); padding: 6px 10px; background: rgba(11, 10, 8, 0.8); }
.boot-skip:hover, .boot-skip:focus-visible { color: var(--phosphor); border-color: var(--phosphor-dim); }
.boot-skip:focus-visible { outline-color: var(--phosphor); }
/* The room: two workstations as silhouettes, lit only by their lamps */
.room { position: absolute; inset: 0; pointer-events: none; }
.boot .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.boot.film .plate { opacity: 1; }
.boot.film .room { display: none; }
.station { position: absolute; bottom: 0; width: 22vw; height: 100%; --lamp: #4C7DFF; }
.station.blue { left: 0; }
.station.red { right: 0; --lamp: #FF4A2A; }
.station .cord { position: absolute; left: 50%; top: 0; width: 1px; height: 14vh; background: #1A1813; }
.station .bulb { position: absolute; left: 50%; top: 14vh; width: 14px; height: 18px; margin-left: -7px; border-radius: 7px 7px 9px 9px; background: var(--lamp); box-shadow: 0 0 28px 8px var(--lamp); opacity: 0; }
.station .pool { position: absolute; left: 50%; top: 2vh; width: 60vw; height: 96vh; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 13%, var(--lamp) 0%, transparent 56%); opacity: 0; }
.station .desk { position: absolute; left: 50%; bottom: 16vh; width: 20vw; height: 3px; margin-left: -10vw; background: #2A2620; border-radius: 1px; }
.station .monitor { position: absolute; left: 50%; bottom: calc(16vh + 3px); width: 7vw; height: 5.2vw; margin-left: 0; background: #0F0E0B; border: 1px solid #1E1B16; border-radius: 2px; box-shadow: inset 0 0 14px rgba(255, 176, 0, 0.22); }
.station .figure { position: absolute; left: 50%; bottom: 0; width: 9vw; height: 24vh; margin-left: -8vw; background: #0E0D0A; border-radius: 45% 45% 10% 10% / 60% 60% 10% 10%; }
.station .figure::before { content: ""; position: absolute; left: 50%; top: -4.2vw; width: 4.2vw; height: 4.2vw; margin-left: -2.1vw; border-radius: 50%; background: #0E0D0A; }
.boot.lit .station .bulb { opacity: 1; }
.boot.lit .station .pool { opacity: 0.22; }
.boot.lit .station.red .pool { opacity: 0.17; }
.boot.lit .station .figure, .boot.lit .station .figure::before { background: color-mix(in srgb, var(--lamp) 18%, #0E0D0A); }
.boot.lit .station .desk { background: color-mix(in srgb, var(--lamp) 35%, #2A2620); }
/* The reader: a slot in the bezel, and the card that goes into it */
.bezel { position: relative; z-index: 1; width: min(760px, 52vw, calc((100vh - 220px) * 1.25)); border-radius: 22px; padding: 26px 26px 38px; background: linear-gradient(170deg, #E6D9BA, #CDBF9B); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(28,26,22,0.25), 0 30px 80px -30px rgba(0,0,0,0.9), 0 0 140px rgba(255, 176, 0, 0.08); will-change: transform, opacity; }
.reader { position: absolute; right: 36px; top: -10px; width: 120px; height: 26px; }
.reader .slot { position: absolute; left: 0; right: 0; top: 10px; height: 10px; background: #15120A; border-radius: 2px; box-shadow: inset 0 2px 3px rgba(0,0,0,0.8); }
.punchcard { position: absolute; left: 10px; bottom: 12px; width: 100px; height: 75px; transform: translateY(-120px); opacity: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
.boot.on .punchcard { animation: cardin 1.2s var(--ease-out) 150ms both; }
@keyframes cardin { 0% { transform: translateY(-140px) rotate(-6deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(0) rotate(0); opacity: 1; } }
.boot.read .punchcard { clip-path: inset(0 0 100% 0); transition: clip-path 500ms linear; }
.bezel .model { position: absolute; left: 30px; bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.bezel .led { position: absolute; right: 30px; bottom: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); opacity: 0; }
.boot.lit .bezel .led { opacity: 1; }
.crt { position: relative; aspect-ratio: 4 / 3; border-radius: 14px / 18px; background: radial-gradient(ellipse at center, #15120A 0%, #0B0A08 70%); box-shadow: inset 0 0 70px rgba(255, 176, 0, 0.10), inset 0 0 0 2px #050505; overflow: hidden; transform-origin: center; }
.crt::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); }
.crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.55) 100%); }
.crt .screen { position: absolute; inset: 0; padding: 4.5% 5.5%; overflow: hidden; }
.crt pre { margin: 0; font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace; font-size: clamp(9px, min(1.45vw, 2vh), 16px); line-height: 1.3; color: var(--phosphor); text-shadow: 0 0 6px rgba(255, 176, 0, 0.45); white-space: pre; }
.crt pre .dim { color: var(--phosphor-dim); text-shadow: none; }
.crt pre .hi { color: #FFD56A; }
.crt pre .cur { display: inline-block; width: 0.6em; height: 1.05em; background: var(--phosphor); vertical-align: -0.15em; }
.boot.leaving .bezel { transition: transform 600ms var(--ease-out), opacity 600ms var(--ease-out); transform: scale(1.5); opacity: 0; }
.boot.leaving { opacity: 0; transition: opacity 440ms var(--ease-out) 180ms; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* 1500ms = LAMP_AT in homepage.html: lamps, LED and screen come on together */
  .boot.on .crt { animation: crt-on 480ms var(--ease-out) 1500ms both; }
  .boot.ready .crt pre .cur { animation: caret 1s steps(1) infinite; }
  .station .bulb, .station .pool { transition: opacity 500ms ease-out; }
}
@keyframes crt-on { 0% { transform: scaleY(0.004) scaleX(0.6); filter: brightness(3); } 55% { transform: scaleY(0.004) scaleX(1); filter: brightness(3); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .boot.leaving .bezel { transition: none; transform: none; opacity: 1; }
  .boot.leaving { transition: none; opacity: 1; }
  .boot .punchcard { animation: none; transform: none; opacity: 1; clip-path: inset(0 0 100% 0); }
}
@media (max-width: 900px) { .room { display: none; } .bezel { width: min(860px, 94vw); } }
@media (max-width: 640px) {
  .bezel { padding: 18px 16px 30px; border-radius: 16px; }
  .reader { right: 18px; width: 90px; }
  .punchcard { width: 76px; height: 57px; left: 7px; }
  .bezel .model { left: 18px; bottom: 9px; font-size: 11px; }
  .bezel .led { right: 18px; bottom: 11px; }
  .crt { aspect-ratio: 3 / 4; }
  .crt pre { font-size: 10px; }
  .boot-skip { top: 10px; right: 10px; }
}

@media (max-width: 1100px) {
  .app, .app.two-col-app { grid-template-columns: 200px minmax(0, 1fr); }
  .side { display: none; }
  .chat { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app, .app.two-col-app { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
  .app > * { min-width: 0; }
  .rail { position: static; min-width: 0; }
  .rail nav { min-width: 0; }
  .rail nav ul { display: flex; overflow-x: auto; gap: 4px; width: 100%; padding-bottom: 4px; }
  .rail nav a { white-space: nowrap; }
  .mini { display: none; }
  .dock { display: none; }
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 205px); min-height: 420px; }
  .bufferlist { display: none; }
  .search { display: none; }
  .social-demo { grid-template-columns: minmax(0, 1fr); }
  .post pre::before, pre.logx::before, pre.code::before { display: none; }
  .post pre, pre.logx, pre.code { padding-top: 12px; }
}

/* Responsive (landing) */
@media (max-width: 900px) {
  .hero { padding: 48px 0 40px; }
  .hero .frame { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero::after { display: none; }
  .steps, .audiences { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .aud { padding-right: 0; }
  .aud + .aud { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); }
  .steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .teams { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .team { padding-right: 0; }
  .team + .team { border-left: 0; padding-left: 0; }
  .season { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  section.band { padding: 52px 0; }
}
@media (max-width: 640px) {
  form.claim .row { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .topbar .btn { display: none; }
  .topbar .frame { min-height: 56px; }
  .topbar nav { gap: 12px; }
  .topbar nav a.signin { font-size: 13px; }
  .topbar nav[aria-label="Mockups"] a:not(:first-child) { display: none; }
  .wordmark { font-size: 12px; }
  .wordmark svg { width: 28px; height: 21px; }
  .recruiters form { width: 100%; flex-direction: column; }
  .evidence li { grid-template-columns: minmax(0, 1fr); }
  .mock-tag { left: auto; right: 12px; }
}