/* Pel&Bee — PEL.OS: pink desk, 1-bit windows, pixel type, giant grotesk headlines, circuit motion.
   Fonts are self-hosted (OFL): Inter, Inter Tight, IBM Plex Mono, VT323. */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-tight-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-tight-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/vt323-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/vt323-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --pink: #F38BA8; --pink-hi: #F7A9BF; --rose: #FCE1EA; --hot: #D6336C;
  --ink: #2B2025; --ink-2: #5A4950; --ink-3: #7D6A72;
  --win: #D8D8D8; --win-hi: #FFFFFF; --win-lo: #8C8C8C; --tag: #C4C4C4; --paper: #FFFFFF;
  --head: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --pixel: 'VT323', 'IBM Plex Mono', ui-monospace, monospace;
  --gut: clamp(16px, 3vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--pink); -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
body { margin: 0; background: var(--pink); color: var(--ink); font: 400 18px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; font: 500 16px/1 var(--sans); text-decoration: none; }
.skip:focus { top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap, .os-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gut); }
.dotted { background-image: radial-gradient(rgba(43, 32, 37, 0.34) 0.85px, transparent 1.15px); background-size: 6px 6px; }

/* ---------- header: logo square left, white boxes right ---------- */
.os-top { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; justify-content: space-between; align-items: flex-start; padding: 8px; pointer-events: none; }
.os-top > * { pointer-events: auto; }
.os-logo { display: grid; place-items: center; width: 46px; height: 46px; background: var(--ink); }
.os-logo img { width: 27px; height: auto; image-rendering: pixelated; }
.os-nav { display: flex; gap: 6px; align-items: flex-start; }
.os-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 0; background: #fff; color: var(--ink); font: 500 18px/1 var(--sans); letter-spacing: -0.02em; text-decoration: none; cursor: pointer; }
.os-btn:hover { background: var(--rose); }
.os-btn .pn { font: 400 18px/1 var(--pixel); letter-spacing: 0; color: var(--ink-3); }
.os-btn[aria-current="page"] { background: var(--ink); color: #fff; }
.os-btn[aria-current="page"] .pn { color: #cdbfc4; }
.os-btn.dark { background: var(--ink); color: #fff; }
.os-btn.dark:hover { background: #45363c; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu-panel { position: absolute; right: 0; top: 46px; width: min(330px, calc(100vw - 16px)); }
.menu-panel nav { display: grid; }
.menu-panel nav a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 4px 7px; border-bottom: 1px solid #9C9C9C; color: var(--ink); text-decoration: none; font: 400 23px/1 var(--pixel); }
.menu-panel nav a:hover, .menu-panel nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.menu-panel nav a small { font: inherit; color: var(--ink-3); }
.menu-panel nav a:hover small, .menu-panel nav a[aria-current="page"] small { color: #cdbfc4; }
.menu-panel .llm-btn svg { display: none; }
.menu-panel .menu-mail { margin-top: 10px; justify-content: center; background: var(--ink); color: #fff; border: 0; }
@media (max-width: 899px) { .os-nav .os-btn.part { display: none; } }
/* site.css (loaded on the migrated pages) styles a different menu; keep ours */
.os-top .menu { display: block; }
.os-top .menu-btn { display: inline-flex; width: auto; height: auto; min-height: 40px; margin: 0; border-radius: 0; color: #fff; }
.os-top .menu-btn:hover { background: #45363c; }
.os-top .menu-panel { left: auto; right: 0; top: 46px; padding: 0; border-radius: 0; background: var(--win); border: 2px solid var(--ink); box-shadow: inset 1px 1px 0 var(--win-hi), inset -1px -1px 0 var(--win-lo); animation: none; }
.os-top .menu-panel nav a:not(.btn) { min-height: 0; font: 400 23px/1 var(--pixel); letter-spacing: 0; }
.os-top .menu-panel .menu-mail { min-height: 40px; font: 500 18px/1 var(--sans); }
.win, .os-label, .tag, .inv, .ds-strip, .menu-panel, .cue-col pre, .board-foot, .hero-film { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* ---------- windows ---------- */
.win { position: relative; background: var(--win); border: 2px solid var(--ink); color: var(--ink); box-shadow: inset 1px 1px 0 var(--win-hi), inset -1px -1px 0 var(--win-lo); }
.win-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 25px; padding: 3px 8px 1px; background: var(--ink); color: #EFEFEF; font: 400 20px/1 var(--pixel); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; user-select: none; -webkit-user-select: none; }
.win-bar span { overflow: hidden; text-overflow: ellipsis; }
.win-body { padding: 9px 11px 11px; font: 400 21px/1.08 var(--pixel); }
.win-body p { margin: 0; }
.win-white .win-body, .win-body.white { background: var(--paper); }
.inv { display: inline-block; background: var(--ink); color: #F4F4F4; font: 400 46px/0.86 var(--pixel); padding: 5px 7px 1px; letter-spacing: 0.01em; }
.inv.s { font-size: 22px; padding: 2px 5px 0; line-height: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0 0 !important; }
.tag { background: var(--tag); padding: 2px 6px 0; font: 400 20px/1.05 var(--pixel); white-space: nowrap; }
.tag::before { content: "+ "; }
.win-link { display: block; color: inherit; text-decoration: none; }
.win-link:hover .inv { background: var(--hot); }
.open { display: inline-block; margin-top: 8px; font: 400 20px/1 var(--pixel); text-decoration: underline; text-underline-offset: 3px; }
.os-label { display: inline-block; background: var(--ink); color: #F1F1F1; font: 400 21px/1 var(--pixel); padding: 3px 7px 1px; }

/* ---------- sky hero ---------- */
.sky { position: relative; isolation: isolate; overflow: hidden; background: #FFFFFF; text-align: center; padding: 92px 16px clamp(56px, 7vw, 96px); }
.sky::before { content: ""; position: absolute; inset: 0 0 auto 0; height: min(78vw, 820px); z-index: -2; background: url(/img/sky-v1-1920.webp) center top / cover no-repeat; }
.sky::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) min(40vw, 420px), #FFFFFF min(72vw, 760px)); }
@media (max-width: 1280px) { .sky::before { background-image: url(/img/sky-v1-1280.webp); } }
@media (max-width: 800px) { .sky::before { background-image: url(/img/sky-v1-800.webp); height: 560px; } .sky::after { background: linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,0) 260px, #FFFFFF 540px); } }
.news { width: min(400px, 100%); margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.news .win-bar { justify-content: flex-start; }
.news .win-body { padding: 12px 14px 12px; font-size: 21px; line-height: 1.12; }
.news a { display: inline-block; margin-top: 12px; text-underline-offset: 3px; }
.intro { margin: 0 0 6px; font: 500 clamp(18px, 1.7vw, 22px)/1.22 var(--sans); letter-spacing: -0.02em; }
.giant { margin: 10px auto 0; max-width: 14ch; font: 600 clamp(50px, 8.7vw, 142px)/0.86 var(--head); letter-spacing: -0.058em; color: var(--ink); text-wrap: balance; }
.giant-2 { margin: 0; font: 600 clamp(44px, 7.2vw, 122px)/0.88 var(--head); letter-spacing: -0.055em; text-wrap: balance; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(22px, 3vw, 40px); margin-top: clamp(32px, 4vw, 52px); }
.big-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 600 clamp(22px, 2.3vw, 32px)/1.15 var(--head); letter-spacing: -0.045em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.big-link svg { width: 0.72em; height: 0.72em; fill: currentColor; }
.big-link:hover { color: var(--hot); }
.watch { margin-top: clamp(20px, 2.4vw, 30px); }
.edge-marks { display: flex; justify-content: space-between; padding: clamp(40px, 6vw, 70px) 6px 0; font: 400 16px/1 var(--pixel); color: var(--ink-3); }

/* ---------- the desk ---------- */
.desk-sec { background: var(--pink); padding: 18px clamp(8px, 1.2vw, 16px) clamp(48px, 6vw, 80px); border-top: 1.5px solid var(--ink); }
.desk { position: relative; max-width: 1560px; margin: 0 auto; border: 1.5px solid var(--ink); background-color: var(--pink); background-image: radial-gradient(rgba(43, 32, 37, 0.32) 0.85px, transparent 1.15px); background-size: 6px 6px; }
.halftone { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.desk > .win, .desk > .os-label { position: relative; z-index: 2; }
.w-board .board-head { display: grid; grid-template-columns: auto 1fr; gap: 0; border-bottom: 2px solid var(--ink); background: var(--paper); }
.w-board .board-head canvas { width: 124px; height: 124px; border-right: 2px solid var(--ink); image-rendering: pixelated; background: #fff; }
.w-board .board-head > div { padding: 10px 12px; font: 400 22px/1.1 var(--pixel); }
.w-board .board-head .inv { margin-bottom: 8px; }
.w-board .win-body { padding: 0; background: var(--paper); }
.parts { list-style: none; margin: 0; padding: 4px 16px 0; }
.parts a { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1fr) 124px minmax(110px, auto); align-items: center; gap: 16px; padding: 13px 0 11px; border-bottom: 1.5px solid var(--ink); color: inherit; text-decoration: none; font: 400 22px/1 var(--pixel); }
.parts a:hover { background: var(--rose); }
.parts .inv.s { justify-self: start; }
.parts canvas { width: 124px; height: 30px; image-rendering: pixelated; }
.parts .st { justify-self: end; text-align: right; }
.parts .st::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: var(--ink); vertical-align: 1px; }
.board-foot { margin: 0; padding: 14px 16px 16px; font: 400 20px/1.15 var(--pixel); background-image: radial-gradient(rgba(43, 32, 37, 0.3) 0.8px, transparent 1.1px); background-size: 5px 5px; }
.board-foot span { background: var(--paper); padding: 0 4px; }
.w-clock .win-body { background: var(--pink-hi); font-size: 24px; line-height: 1.25; }
.w-scope .win-body { background: var(--paper); text-align: center; }
.w-scope canvas { width: 100%; height: auto; aspect-ratio: 2 / 1; image-rendering: pixelated; margin-bottom: 4px; }
.w-ver .win-body { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: var(--pink-hi); }
.w-ver img { width: 30px; height: auto; image-rendering: pixelated; margin-top: 2px; }
.motion-btn { margin-top: 8px; padding: 2px 8px 0; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 400 19px/1.1 var(--pixel); cursor: pointer; }
.motion-btn:hover { background: var(--ink); color: #fff; }

@media (min-width: 1100px) {
  .desk { aspect-ratio: 1440 / 1010; }
  .desk > .win, .desk > .os-label { position: absolute; }
  .desk > .os-label { left: 0; top: 0; }
  .desk .win-bar { cursor: grab; }
  .desk .win.dragging .win-bar { cursor: grabbing; }
  .w-pup { left: 4.5%; top: 8%; width: 15%; }
  .w-emu { left: 31%; top: 3.2%; width: 24%; }
  .w-lat { left: 81%; top: 18%; width: 16.5%; }
  .w-bee { left: 60.5%; top: 6%; width: 15%; }
  .w-board { left: 20.5%; top: 21%; width: 57%; }
  .w-clock { left: 79.5%; top: 1.2%; width: 18.5%; }
  .w-scope { left: 85.5%; top: 72%; width: 12.5%; }
  .w-ver { left: 1.2%; top: 84%; width: 25%; }
}
@media (max-width: 1099px) {
  .desk { display: flex; flex-direction: column; gap: 18px; padding: 14px; }
  .desk > .os-label { align-self: flex-start; margin: -14px 0 0 -14px; }
  .w-board { order: 1; } .w-clock { order: 0; } .w-pup { order: 2; } .w-emu { order: 3; } .w-lat { order: 4; } .w-bee { order: 5; } .w-scope { order: 6; } .w-ver { order: 7; }
  .parts a { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .parts a > span:nth-child(2) { grid-column: 1; }
  .parts canvas { grid-column: 2; grid-row: 1 / span 2; }
  .parts .st { grid-column: 1 / -1; justify-self: start; text-align: left; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .desk { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .desk > .os-label { grid-column: 1 / -1; }
  .w-board, .w-clock { grid-column: 1 / -1; }
}

/* ---------- sections on pink ---------- */
.os-sec { background: var(--pink); padding: clamp(64px, 9vw, 140px) 0; }
.os-sec + .os-sec { padding-top: 0; }
.os-sec.first-pink { border-top: 1.5px solid var(--ink); padding-top: clamp(48px, 7vw, 104px); }
.first-pink + .desk-sec { border-top: 0; padding-top: 0; }
.crop { position: relative; padding: clamp(30px, 4.4vw, 64px) clamp(18px, 3.4vw, 54px); }
.crop > i { position: absolute; width: 20px; height: 20px; border: 0 solid var(--ink); }
.crop > i:nth-of-type(1) { left: 0; top: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.crop > i:nth-of-type(2) { right: 0; top: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.crop > i:nth-of-type(3) { left: 0; bottom: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.crop > i:nth-of-type(4) { right: 0; bottom: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.crop.center { text-align: center; }
.crop .giant-2 { margin-inline: auto; max-width: 16ch; }
.crop .sub { margin: 22px 0 0; font: 500 16px/1.3 var(--mono); letter-spacing: 0.03em; }
.crop .sub a { text-underline-offset: 4px; }
.ruled { border-left: 1.5px solid var(--ink); padding: 0 0 0 18px; }
.lab { margin: 0; font: 500 15px/1.25 var(--mono); letter-spacing: 0.07em; }
.ruled .lab + * { margin-top: clamp(30px, 5vw, 88px); }
.big-p { margin: 0; font: 400 clamp(21px, 2.25vw, 33px)/1.28 var(--sans); letter-spacing: -0.022em; text-wrap: pretty; }
.mid-p { margin: 0; font: 400 clamp(19px, 1.7vw, 25px)/1.3 var(--sans); letter-spacing: -0.018em; }
.manifesto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(28px, 4vw, 64px); margin-top: clamp(48px, 7vw, 96px); }
.manifesto .stack { display: grid; gap: clamp(28px, 4vw, 44px); }
.cue-col .lab { margin-bottom: 14px; }
.cue-col pre { margin: 0; font: 400 19px/1.18 var(--pixel); white-space: pre; overflow: hidden; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(56px, 8vw, 120px); }
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(40px, 6vw, 80px); }
.four .ruled .lab + * { margin-top: clamp(22px, 3vw, 48px); }
.letter { display: block; font: 600 clamp(48px, 5vw, 80px)/0.9 var(--head); letter-spacing: -0.05em; margin-bottom: 12px; }

/* field: a dotted panel with halftone, holding a window (signal board, terminals, board) */
.field-wrap { border-left: 1.5px solid var(--ink); padding-left: clamp(10px, 1.4vw, 18px); }
.field { position: relative; overflow: hidden; padding: clamp(36px, 6.5vw, 110px) clamp(14px, 6vw, 120px); background-image: radial-gradient(rgba(43, 32, 37, 0.3) 0.85px, transparent 1.15px); background-size: 6px 6px; }
.field > .os-label { position: absolute; left: 0; top: 0; z-index: 2; }
.field > .win, .field > .pair { position: relative; z-index: 1; }
.signal-art { line-height: 0; padding: clamp(12px, 2vw, 26px); background: var(--paper); }
.signal-art img, .signal-art svg { width: 100%; height: auto; }
.signal-art svg rect { fill: var(--ink); }
.signal-art svg path, .signal-art svg line, .signal-art svg polyline, .signal-art svg circle { stroke: var(--ink); }
.signal-art svg circle[stroke="#F2C230"] { fill: var(--ink); stroke: var(--hot); stroke-width: 2.5px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 64px); margin-top: clamp(26px, 3.4vw, 44px); padding-left: 2px; }
.stat b { display: block; font: 600 clamp(56px, 6.4vw, 104px)/0.9 var(--head); letter-spacing: -0.055em; }
.stat span { display: block; margin-top: 10px; font: 500 clamp(18px, 1.9vw, 27px)/1.2 var(--sans); letter-spacing: -0.02em; color: #6E4E5A; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 72px); }
.term .win-body { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 8px; min-height: clamp(360px, 32vw, 470px); padding: 6px 10px 12px 4px; background: var(--paper); font: 400 19px/1.24 var(--pixel); align-content: start; }
.term.gray .win-body { background: #C9C9C9; }
.term ol { list-style: none; margin: 0; padding: 0; display: contents; }
.term li { display: contents; }
.term li > i { width: 15px; height: 15px; margin-top: 3px; border: 1.5px solid var(--ink); background: transparent; }
.term li > i.on { background: var(--ink); }
.term li > span { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.term li.cmd > span { font-weight: 400; }
.term li.hidden-line { visibility: hidden; }
.term .done > span { display: inline-block; background: var(--ink); color: #fff; padding: 1px 6px 0; margin-top: 10px; }
.pair-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(26px, 3vw, 40px); }
.pair-notes h3 { margin: 0; font: 600 clamp(22px, 2.1vw, 30px)/1.1 var(--head); letter-spacing: -0.04em; }
.pair-notes p { margin: 10px 0 0; font: 500 clamp(17px, 1.6vw, 23px)/1.25 var(--sans); color: #6E4E5A; letter-spacing: -0.02em; }
.pair-notes a { text-underline-offset: 5px; }
.pair-notes .right { text-align: right; align-self: start; }

/* the 1-bit board */
.board-win .win-body { padding: clamp(8px, 1.4vw, 16px); background: var(--paper); }
.pcb { width: 100%; height: auto; }
.pcb .comp { cursor: pointer; }
.pcb .comp:focus { outline: none; }
.pcb .comp:focus-visible .outline, .pcb .comp:hover .outline { stroke: var(--hot); stroke-width: 3; }
.pcb .trace { transition: stroke 0.2s ease, stroke-width 0.2s ease; }
.pcb .trace.lit { stroke: var(--hot) !important; stroke-width: 5; }
.board-cap { margin: 12px 0 0; font: 400 20px/1.15 var(--pixel); }

/* contact */
.contact { text-align: center; }
.contact .lab { margin-bottom: 18px; }
.contact .mid-p { max-width: 36em; margin: 22px auto 0; }
.mail-big { display: inline-block; margin-top: clamp(26px, 3vw, 40px); font: 600 clamp(28px, 4.6vw, 72px)/1 var(--head); letter-spacing: -0.05em; color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; overflow-wrap: anywhere; }
.mail-big:hover { color: var(--hot); }

/* footer */
.os-foot { background: var(--pink); padding: 0 0 clamp(24px, 3vw, 40px); }
.foot-win .win-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; background: var(--pink-hi); font-size: 20px; line-height: 1.2; }
.foot-win img { grid-row: span 3; width: 34px; height: auto; image-rendering: pixelated; margin-top: 3px; }
.foot-win p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-links a { text-underline-offset: 3px; }
.foot-win .llm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-win .llm-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ---------- inner pages ---------- */
.page-top { padding-top: 84px; }
.ds-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.ds-strip span { background: var(--paper); border: 1.5px solid var(--ink); padding: 2px 7px 0; font: 400 20px/1.1 var(--pixel); }
.ds-strip span:first-child { background: var(--ink); color: #fff; }
.ds-strip .led::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; background: var(--ink); vertical-align: 1px; }
.page-hero-os { text-align: left; }
.page-hero-os .giant-2 { max-width: 15ch; margin: 0; }
.page-hero-os .lede { max-width: 40em; margin: clamp(22px, 2.6vw, 34px) 0 0; font: 400 clamp(19px, 1.7vw, 25px)/1.35 var(--sans); letter-spacing: -0.018em; }
.page-hero-os .cta-row { justify-content: flex-start; margin-top: clamp(26px, 3vw, 40px); }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.diagram-win .win-body { background: var(--paper); padding: 14px; }
.diagram { width: 100%; height: auto; }
.spec-win .win-body { padding: 0; background: var(--paper); }
.specs { width: 100%; border-collapse: collapse; font: 400 17px/1.45 var(--sans); }
.specs th, .specs td { padding: 13px 16px; border-bottom: 1.5px solid var(--ink); text-align: left; vertical-align: top; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { width: 26%; font: 400 21px/1.1 var(--pixel); text-transform: uppercase; letter-spacing: 0.02em; border-right: 1.5px solid var(--ink); background: var(--win); }
.specs a { text-underline-offset: 3px; }
.sec-head { margin-bottom: clamp(26px, 3.4vw, 44px); }
.sec-head .lab { margin-bottom: 14px; }
.sec-head h2 { margin: 0; font: 600 clamp(36px, 4.8vw, 76px)/0.94 var(--head); letter-spacing: -0.05em; max-width: 18ch; }
.sec-head p { max-width: 42em; margin: 16px 0 0; font: 400 clamp(18px, 1.5vw, 21px)/1.45 var(--sans); }
.links-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }
.links-row a { font: 600 clamp(19px, 1.7vw, 24px)/1.2 var(--head); letter-spacing: -0.03em; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.founder-win .win-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0; padding: 0; background: var(--paper); }
.founder-win img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); border-right: 2px solid var(--ink); }
.founder-win .who { padding: clamp(16px, 2.4vw, 30px); font: 400 18px/1.5 var(--sans); }
.founder-win .who h3 { margin: 10px 0 2px; font: 600 clamp(30px, 3vw, 44px)/1 var(--head); letter-spacing: -0.045em; }
.founder-win .who .role { margin: 0 0 14px; font: 400 21px/1.1 var(--pixel); color: var(--ink-2); }
.founder-win .who p { margin: 0 0 12px; }

/* workflow film inside a window (from the Cuepup scene engine) */
.film-win .win-body { padding: 0; background: #11161B; }
.hero-film { margin: 0; }
.hero-film .anim-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #11161B; }
.hero-film .anim-stage picture, .hero-film .anim-stage img { width: 100%; height: 100%; object-fit: cover; }
.hero-film .anim-canvas, .hero-film video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-film.anim-live .anim-base { visibility: hidden; }
.hero-film .workflow-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 2px solid var(--ink); background: var(--win); }
.hero-film .workflow-tabs[hidden] { display: none; }
.hero-film .workflow-tabs button { min-height: 44px; padding: 4px 6px 2px; border: 0; border-right: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 400 20px/1 var(--pixel); cursor: pointer; }
.hero-film .workflow-tabs button:last-child { border-right: 0; }
.hero-film .workflow-tabs button:hover { background: var(--rose); }
.hero-film .workflow-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.hero-film .workflow-description { margin: 0; padding: 12px 14px 4px; background: var(--paper); font: 400 21px/1.15 var(--pixel); color: var(--ink); }
.hero-film figcaption { display: flex; align-items: center; gap: 12px; padding: 6px 14px 12px; background: var(--paper); font: 400 18px/1.15 var(--pixel); color: var(--ink-2); }
.hero-film figcaption > span:not(.pulse) { flex: 1 1 auto; min-width: 0; }
.hero-film .pulse { width: 9px; height: 9px; background: var(--ink); flex: none; }
.hero-film .anim-toggle { flex: none; padding: 3px 10px 1px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 400 19px/1 var(--pixel); cursor: pointer; }
@media (max-width: 699px) {
  .hero-film .anim-stage { aspect-ratio: 4 / 5; }
  .hero-film .workflow-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-film .workflow-tabs button:nth-child(3) { border-right: 0; }
  .hero-film .workflow-tabs button:nth-child(-n + 3) { border-bottom: 1.5px solid var(--ink); }
}

/* ---------- migrated Cuepup pages on PEL.OS (site.css loaded before this file) ---------- */
.legacy { background: var(--pink); }
.legacy .page-hero { background: transparent !important; border: 0 !important; padding-top: 96px; }
.legacy .wash::before { display: none; }
.legacy .page-hero h1, .legacy h2, .legacy .sub-title { font-family: var(--head) !important; font-weight: 600 !important; letter-spacing: -0.05em !important; color: var(--ink) !important; }
.legacy .page-hero h1 { font-size: clamp(42px, 6.4vw, 104px) !important; line-height: 0.9 !important; max-width: 15ch; }
.legacy p, .legacy li, .legacy dd, .legacy dt, .legacy figcaption { color: var(--ink) !important; }
.legacy .section, .legacy .page-content, .legacy section { background: transparent !important; }
.legacy .label, .legacy .block-label, .legacy .eyebrow { font-family: var(--mono) !important; color: var(--ink) !important; letter-spacing: 0.07em; }
.legacy .block-label::after { background: var(--ink) !important; }
.legacy .badge { border-radius: 0 !important; border: 1.5px solid var(--ink) !important; background: var(--paper) !important; color: var(--ink) !important; box-shadow: none !important; font-family: var(--pixel) !important; font-size: 19px !important; letter-spacing: 0.02em; }
.legacy .status-note, .legacy .stage, .legacy .next-card, .legacy .evidence-note, .legacy .tl, .legacy .mid-window, .legacy .shot, .legacy .cta-band, .legacy .retro-win, .legacy .music-id-illustration {
  background: var(--win) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: inset 1px 1px 0 var(--win-hi), inset -1px -1px 0 var(--win-lo) !important; color: var(--ink) !important;
}
.legacy .cta-band { background: var(--pink-hi) !important; }
.legacy .audiences li { background: var(--win) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: inset 1px 1px 0 var(--win-hi), inset -1px -1px 0 var(--win-lo) !important; }
.legacy .limits { border-color: var(--ink) !important; border-radius: 0 !important; }
.legacy .tag-mono { border-color: var(--ink) !important; border-radius: 0 !important; color: var(--ink) !important; font-family: var(--pixel) !important; font-size: 17px !important; letter-spacing: 0.04em; }
.legacy .uses li { border-top: 1.5px solid var(--ink) !important; }
.legacy .uses svg { stroke: var(--ink) !important; }
.legacy .fine, .legacy .sub-intro { color: var(--ink-2) !important; }
.legacy .section { padding-block: clamp(48px, 7vw, 104px) !important; }
.legacy .page-photo img, .legacy .wide-shot img, .legacy .split-media img, .legacy .shot img { border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.legacy .btn { border-radius: 0 !important; font-family: var(--sans) !important; }
.legacy .btn-primary { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.legacy .text-link { color: var(--ink) !important; border-bottom-color: var(--ink) !important; }
.legacy .stage-n { border-radius: 0 !important; border-color: var(--ink) !important; color: var(--ink) !important; font-family: var(--pixel); }
.legacy .entry { border-bottom-color: rgba(43, 32, 37, 0.35) !important; }
.legacy .product-tag { border-radius: 0 !important; background: var(--ink) !important; color: #fff !important; font-family: var(--pixel) !important; font-size: 18px !important; }
.legacy .ds-strip { margin-bottom: 26px; }
.legacy .title-row { display: none !important; }
.legacy .title-row .wordmark { font-family: var(--pixel) !important; font-size: 30px !important; letter-spacing: 0 !important; }
.legacy .part { display: inline-block; background: var(--ink); color: #fff; padding: 2px 7px 0; font: 400 21px/1.1 var(--pixel); }

/* ---------- small screens ---------- */
@media (max-width: 899px) {
  .manifesto { grid-template-columns: minmax(0, 1fr); }
  .cue-col { order: 2; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .three, .pair, .pair-notes, .stats { grid-template-columns: minmax(0, 1fr); }
  .four { grid-template-columns: minmax(0, 1fr); }
  .pair-notes .right { text-align: left; }
  .term .win-body { min-height: 0; }
  .founder-win .win-body { grid-template-columns: minmax(0, 1fr); }
  .founder-win img { border-right: 0; border-bottom: 2px solid var(--ink); max-height: 420px; }
  .specs, .specs tbody, .specs tr, .specs th, .specs td { display: block; width: auto; }
  .specs th { border-right: 0; border-bottom: 0; padding-bottom: 4px; }
  .specs td { padding-top: 6px; overflow-wrap: anywhere; }
  .w-board .board-head { grid-template-columns: minmax(0, 1fr); }
  .w-board .board-head canvas { border-right: 0; border-bottom: 2px solid var(--ink); width: 100%; height: 150px; object-fit: contain; }
  .field { padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) { .pcb .pulse { display: none; } }
.motion-paused .pcb .pulse { display: none; }

/* ===== v2 (11 Oct 2026): printed on pink. No white panels, flat ink frames, mono text;
   the pixel face stays for title bars, labels and the clock. ===== */
:root { --paper: #F9C8D5; --win: #F6B5C7; --tag: transparent; --win-hi: transparent; --win-lo: transparent; }
.win { box-shadow: none; border-width: 1.5px; }
.win-body { font: 400 15px/1.45 var(--mono); }
.news .win-body { font-size: 15px; line-height: 1.5; }
.news a { font: 500 13px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.tag { padding: 4px 7px 3px; border: 1px solid var(--ink); background: transparent; font: 500 12px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.open, .motion-btn { font: 500 12px/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.motion-btn { padding: 5px 9px 4px; }
.w-board .board-head > div { font: 400 15px/1.45 var(--mono); }
.w-board .board-head canvas { background: transparent; }
.parts a { font: 500 13.5px/1.25 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.parts .inv.s { font: 400 22px/1 var(--pixel); letter-spacing: 0.01em; text-transform: none; }
.board-foot { font: 400 12.5px/1.45 var(--mono); letter-spacing: 0.03em; }
.board-foot span { background: var(--paper); }
.w-clock .win-body { font: 400 25px/1.2 var(--pixel); }
.w-scope .win-body p, .w-ver .win-body { font: 400 13px/1.45 var(--mono); }
.term .win-body { font: 400 13.5px/1.6 var(--mono); grid-template-columns: 20px minmax(0, 1fr); }
.term li > i { width: 12px; height: 12px; margin-top: 5px; }
.term .done > span { font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.05em; padding: 3px 8px 2px; }
.term.gray .win-body { background: var(--win); }
.cue-col pre { font: 400 13px/1.5 var(--mono); }
.ds-strip span { padding: 5px 9px 4px; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.os-top .menu-panel nav a:not(.btn) { font: 500 15px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 12px 6px 11px; }
.os-top .menu-panel nav a small { font: 400 12px/1 var(--mono); }
.specs th { font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; }
.founder-win img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08); }
.founder-win .who .role { font: 400 13px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.foot-win .win-body { font: 400 13.5px/1.55 var(--mono); }
.hero-film .workflow-tabs button { font: 500 12.5px/1.15 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.hero-film .workflow-description { font: 400 15px/1.45 var(--mono); }
.hero-film figcaption, .hero-film .anim-toggle { font: 400 12.5px/1.3 var(--mono); letter-spacing: 0.03em; }
.legacy .badge, .legacy .tag-mono, .legacy .product-tag, .legacy .part { font-family: var(--mono) !important; font-size: 12px !important; letter-spacing: 0.06em !important; text-transform: uppercase; }
.legacy .title-row .wordmark, .legacy .stage-n { font-family: var(--mono) !important; }

/* Plate 1: the board printed as a two-ink halftone on pink */
.plate { margin: clamp(36px, 5vw, 72px) auto 0; max-width: 1360px; }
.plate-box { position: relative; aspect-ratio: 1200 / 560; background-image: radial-gradient(rgba(43, 32, 37, 0.26) 0.8px, transparent 1.1px); background-size: 6px 6px; }
.plate-poster, .plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate.live .plate-poster { visibility: hidden; }
.plate-hit { position: absolute; display: block; border-radius: 4px; }
.plate-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.plate figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 16px; font: 400 13px/1.45 var(--mono); letter-spacing: 0.03em; }
.plate figcaption span:first-child { background: var(--ink); color: #F4F4F4; padding: 3px 8px 2px; font: 400 19px/1 var(--pixel); letter-spacing: 0.02em; }
@media (max-width: 699px) { .plate { margin-left: calc(-1 * var(--gut) + 6px); margin-right: calc(-1 * var(--gut) + 6px); } .plate figcaption { padding: 0 10px; } }

/* hero, 11 Oct 2026: only the sky and the headline */
.sky { display: flex; flex-direction: column; justify-content: center; min-height: min(92vh, 920px); padding-top: 96px; padding-bottom: clamp(72px, 9vw, 120px); }
.sky .giant { margin-top: 0; }
.sky .edge-marks { position: absolute; left: 0; right: 0; bottom: 18px; padding: 0 14px; }
@media (max-width: 699px) { .sky { min-height: 78vh; } .sky::before { height: 100%; } .sky::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 64%, #FFFFFF 100%); } }

/* the four circuit names sit on one line in the four-column row */
.four .letter { font-size: clamp(40px, 4vw, 60px); }
@media (max-width: 899px) { .four .letter { font-size: clamp(44px, 7vw, 60px); } }
@media (max-width: 699px) { .four .letter { font-size: 52px; } }

/* four parts: circuit name, what the part does for us, then the part's own story */
.part-sub { margin: 8px 0 0; font: 500 13.5px/1.35 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.part-p { margin: 16px 0 0; font: 400 clamp(16px, 1.2vw, 18px)/1.55 var(--sans); letter-spacing: -0.01em; text-wrap: pretty; }
.four .ruled { padding-bottom: 4px; }