/* ttyak landing page — tokens, fonts, paper components. No third-party requests. */
@font-face { font-family: 'Rubik Mono One'; src: url('../fonts/rubik-mono-one-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Anton'; src: url('../fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Permanent Marker'; src: url('../fonts/permanent-marker-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --aubergine: #4A154B;
  --pink: #E01E5A;
  --blue: #36C5F0;
  --green: #2EB67D;
  --yellow: #ECB22E;
  --bg: #160a17;
  --cream: #f3e9d2;
  --scrap: #f6f1e6;
  --ink: #111;
  --muted: #bfb2a0;
  --dim: #6f6070;
  --crease: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='90'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018 0.04' numOctaves='3' seed='4'/%3E%3CfeDiffuseLighting surfaceScale='3.2' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='225' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='300' height='90' filter='url(%23c)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--cream); font: 15px/1.6 'Space Mono', monospace; }
a { color: var(--yellow); }
.wrap { width: min(836px, 100% - 32px); margin: 0 auto; }

.topnav { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 6px; font-size: 12px; color: var(--muted); }
.topnav .wordmark { font-family: 'Rubik Mono One', sans-serif; font-size: 16px; color: var(--yellow); text-decoration: none; }
.topnav span a { color: var(--muted); text-decoration: none; margin-left: 18px; white-space: nowrap; }
.topnav span a:hover { color: var(--cream); }

section { padding: 40px 0; }
section h2 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 44px; line-height: 1.02; letter-spacing: .5px; text-transform: uppercase; color: var(--cream); margin: 0 0 16px; }

/* paper pieces: crease texture, ragged straight-cut edges, hard shadow, no outline */
.cut, .paper { --paper: var(--cream); }
.cut { display: inline-block; font-family: 'Rubik Mono One', sans-serif; padding: 1px 10px; margin: 3px 2px; transform: rotate(var(--r, 0deg)); box-shadow: 3px 3px 0 #000; color: var(--ink); font-size: 50px; background: var(--paper); }
/* The ragged edge clips only the paper (::before) and its crease (::after), never the element itself:
   a clip-path on the element would clip its own shadow. The drop-shadow then follows the cut edge. */
.paper { position: relative; isolation: isolate; background: none; box-shadow: none; filter: drop-shadow(3px 3px 0 #000); }
.paper::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--paper); clip-path: var(--edge, none); }
.paper::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .9; background-image: var(--crease); background-size: cover; clip-path: var(--edge, none); }
.paper.a { --edge: polygon(0 4%, 30% 0, 62% 3%, 100% 0, 99% 52%, 100% 100%, 55% 97%, 20% 100%, 1% 96%, 0 50%); }
.paper.b { --edge: polygon(1% 0, 40% 3%, 75% 0, 100% 4%, 98% 48%, 100% 97%, 64% 100%, 28% 96%, 0 100%, 2% 46%); }
.paper.pink { --paper: var(--pink); color: #fff; }
.paper.scrap { --paper: var(--scrap); }

.sticker { display: inline-block; font-family: 'Permanent Marker', cursive; padding: 16px; border-radius: 50%; text-align: center; line-height: 1.05; box-shadow: 3px 3px 0 #000; background: var(--yellow); color: var(--ink); transform: rotate(var(--r, -10deg)); font-size: 14px; }

.scrawl { font-family: 'Permanent Marker', cursive; color: var(--yellow); display: inline-block; transform: rotate(-3deg); font-size: 24px; }
.jab { font-family: 'Permanent Marker', cursive; color: var(--cream); transform: rotate(-1.5deg); display: inline-block; font-size: 19px; line-height: 1.35; margin: 14px 0 0; max-width: 560px; }
.jab::before { content: '\2192\00a0'; color: var(--pink); }

.term { background: #0b0b0d; border: 1px solid #3a2a3b; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.6); overflow: hidden; color: #d8d8d8; font-size: 11px; line-height: 1.45; }
.term pre { margin: 0; padding: 10px 12px; font: inherit; white-space: pre; overflow-x: auto; }

/* the first screen: one fixed 836 × 690 px stage, scaled as one picture to the column's width (never up),
   so nothing inside the collage reflows on a phone. --k = column width / 836 px, a plain number:
   tan(atan2(a, b)) = a / b for lengths. Without support the stage stays 836 px, clipped. */
#top { padding: 0; position: relative; container-type: inline-size; }
.stage-fit { overflow: hidden; }
.stage { position: relative; overflow: hidden; width: 836px; height: 690px; background: var(--bg); transform-origin: 0 0; }
@supports (width: calc(1px * tan(atan2(1cqw, 1px)))) {
  .stage-fit, #top > .dl-area { --k: min(1, tan(atan2(100cqw, 836px))); }
  .stage-fit { height: calc(690px * var(--k)); }
  .stage { transform: scale(var(--k)); }
}
.stage .grain { position: absolute; inset: 0; opacity: .10; background-image: radial-gradient(#fff .7px, transparent .9px); background-size: 3px 3px; }
.stage .wallglow { position: absolute; left: 120px; top: 150px; width: 620px; height: 200px; background: radial-gradient(closest-side, rgba(224,30,90,.22), transparent); }
.headline { position: absolute; left: 0; top: 0; width: 836px; height: 380px; margin: 0; font-size: inherit; font-weight: 400; line-height: normal; }
.headline .cuts { position: absolute; left: 34px; top: 26px; }
.neon { position: absolute; left: 162px; top: 180px; font-family: 'Permanent Marker', cursive; font-size: 96px; line-height: 1; letter-spacing: 3px; color: #ffd6e4;
  text-shadow: 0 0 4px #fff, 0 0 10px #ff4f8b, 0 0 22px var(--pink), 0 0 44px var(--pink), 0 0 80px var(--pink); }
.neon.dim { text-shadow: 0 0 3px #fff, 0 0 8px #ff4f8b, 0 0 16px var(--pink); opacity: .85; }
.stage .art { position: absolute; left: 0; top: 0; width: 836px; height: 690px; overflow: visible; pointer-events: none; }
/* the pitch sits below where the hanging scrap reaches (y ≈ 440; tools/site/hero.test.mjs checks it) */
.stage .sub { position: absolute; left: 34px; top: 452px; width: 400px; color: #e8dcc4; }
.pitch { margin: 0; font-family: 'Anton', sans-serif; font-size: 44px; line-height: 1.02; letter-spacing: .5px; color: var(--cream); text-transform: uppercase; }
.really { margin-top: 8px; }
/* the call to action: outside the stage in the markup, laid over it at its design place (34, 604) and scaled with it
   from 760 px up; on phones a normal block below it, full size (see the max-width: 759px rule).
   Two buttons on macOS: the meta line takes what's left of 640 px and wraps inside it, clear of the sticker. */
#top > .dl-area { position: absolute; left: 34px; top: 604px; width: 640px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; transform-origin: 0 0; }
@supports (width: calc(1px * tan(atan2(1cqw, 1px)))) {
  #top > .dl-area { left: calc(34px * var(--k)); top: calc(604px * var(--k)); transform: scale(var(--k)); }
}
.dl { font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: 1px; background: var(--yellow); color: var(--ink); padding: 9px 20px; box-shadow: 4px 4px 0 var(--pink); text-decoration: none; white-space: nowrap; }
/* the hero from 0.11.0 (download.js installArea): the visitor's one-liner first, its zip beside it */
.dl-cmd { font-family: 'Space Mono', monospace; font-size: 15px; line-height: 24px; color: var(--cream); background: #0b0b0d; border-left: 4px solid var(--green); box-shadow: 4px 4px 0 var(--pink); padding: 12px 14px; white-space: nowrap; }
.dl-cmd .ps { color: var(--green); }
.dl.small { font-size: 18px; padding: 10px 16px; }
.dl-meta { flex: 1 1 220px; min-width: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.dl-meta a { color: inherit; }
.hero-capture { position: absolute; left: 478px; top: 336px; width: 326px; transform: rotate(2deg); }
.term { position: relative; }
.term .dots { padding: 6px 10px; font-size: 10px; color: #777; border-bottom: 1px solid #222; }
.hero-sticker { position: absolute; left: 700px; top: 575px; }

/* the rest of the page (LP5) */
code { font-family: 'Space Mono', monospace; font-size: .92em; }
.nowrap { white-space: nowrap; }
p code, li code, h3 code { color: var(--yellow); }
.lede { color: #e8dcc4; max-width: 640px; }

#features > h2 { margin-bottom: 30px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; margin: 0 0 64px; }
.feature.flip .words { order: 2; }
.feature h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: .4px; text-transform: uppercase; margin: 0 0 12px; color: var(--accent, var(--cream)); }
.feature h3 code { color: inherit; font-size: .8em; text-transform: none; }
.feature p { margin: 0 0 10px; }
.shot { transform: rotate(var(--r, 1.5deg)); }
.feature.flip .shot { --r: -1.5deg; }
.shot:empty { min-height: 210px; border: 2px dashed #3a2a3b; border-radius: 8px; background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(255,255,255,.025) 12px 24px); }
.q-meme { position: relative; margin-top: 22px; height: 150px; }
.q-crossed { position: absolute; left: 4px; top: 40px; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 52px; line-height: 1; color: var(--muted); transform: rotate(-8deg); }
.q-crossed s { text-decoration-color: var(--pink); text-decoration-thickness: 5px; }
.q-sticker { position: absolute; left: 110px; top: 0; width: 150px; height: 150px; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; --r: 9deg; background: var(--pink); color: #fff; }
.ctl { transform: rotate(1.5deg); }
.ctl pre, .cmd { white-space: pre-wrap; word-break: break-word; }
.term .ps, .cmd .ps { color: var(--green); }
.feature p.deadpan { font-size: 18px; line-height: 1.45; color: #e8dcc4; max-width: 400px; }
.cool-kids { display: block; width: fit-content; margin: 12px 0 0 18px; font-size: 22px; transform: rotate(-4deg); }
/* the features' closer: a strip pasted across the column, poster type */
.closer { --paper: var(--cream); color: var(--ink); width: fit-content; max-width: 100%; margin: 8px auto 0; padding: 18px 28px 20px;
  font-family: 'Rubik Mono One', sans-serif; font-size: 25px; line-height: 1.25; text-transform: uppercase; text-align: center; transform: rotate(var(--r, 0deg)); }

#numbers .sheet-slot { margin: 26px 0 10px; }
/* the defaced spec sheet (LP10): a printed sheet someone took a marker to */
.sheet { --paper: var(--scrap); color: var(--ink); padding: 26px 24px 24px; transform: rotate(-.6deg);
  /* a tall sheet: the ragged cut is in pixels, so it never eats a row */
  --edge: polygon(1% 0, 40% 7px, 75% 0, 100% 9px, 99% 50%, 100% calc(100% - 4px), 64% 100%, 28% calc(100% - 9px), 0 100%, 1% 50%); }
.sheet table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; }
.sheet thead th, .sheet thead td { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .6px; text-transform: uppercase; text-align: left; white-space: nowrap; padding: 0 10px 8px; border-bottom: 2px solid var(--ink); }
.sheet thead th:first-child { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0; text-transform: none; color: #6a5d55; vertical-align: bottom; padding-left: 0; }
.sheet thead .them { color: #6a5d55; }
.sheet thead .us { color: var(--aubergine); }
.sheet tbody th, .sheet td { padding: 11px 10px; border-bottom: 1px dashed #c9bca4; vertical-align: middle; text-align: left; }
.sheet tbody th { font-weight: 400; padding-left: 0; width: 31%; }
.sheet td.them, .sheet td.us { width: 19%; white-space: nowrap; font-weight: 700; font-size: 16px; }
.sheet td.them { color: #6a5d55; }
.sheet .crossed { position: relative; display: inline-block; }
.sheet .crossed::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; border-radius: 2px; background: var(--pink); opacity: .85; transform: rotate(var(--x, -5deg)); }
.sheet .circled { display: inline-block; padding: 3px 11px; margin: -3px -11px; border: 3px solid var(--yellow); border-radius: 55% 45% 52% 48% / 58% 46% 54% 42%; transform: rotate(var(--o, -4deg)); box-shadow: 1px 1px 0 rgba(0,0,0,.35), inset 1px 1px 0 rgba(0,0,0,.2); }
.sheet tbody tr:nth-child(2n) { --x: 4deg; --o: 3deg; --s: 2deg; }
.sheet tbody tr:nth-child(3n) { --x: -2deg; --o: -2deg; --s: -5deg; }
.sheet .remark { padding-right: 0; }
.sheet .scrawl { color: var(--aubergine); font-size: 17px; line-height: 1.15; transform: rotate(var(--s, -3deg)); }
.sheet .scrawl.ratio { color: var(--pink); font-size: 24px; white-space: nowrap; }
/* CPU rows (LP10b): the ratio leads; the machine-dependent percentages sit small beside it as evidence */
.sheet td.evidence { font-size: 12.5px; font-weight: 400; }
.sheet .scrawl.ratio.more { color: var(--aubergine); font-size: 21px; }
.sheet .remark .scrawl + .scrawl { display: block; width: fit-content; margin-top: 3px; }
.note .measured { font-size: 12px; color: var(--muted); max-width: 720px; margin: 18px 0 0; }
.note .measured a { color: var(--yellow); }
.standin-note { border: 2px dashed #3a2a3b; padding: 40px 20px; text-align: center; color: var(--dim); margin: 0; }

.cmd { font-size: 20px; color: var(--cream); background: #0b0b0d; border-left: 4px solid var(--green); padding: 10px 16px; margin: 8px 0 18px; max-width: 420px; }
/* Get it from 0.11.0 (fill.py render_install): a one-liner per system, then the package managers */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; max-width: 900px; }
.way h3, #get h3.or { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .5px; text-transform: uppercase; margin: 14px 0 0; color: var(--green); }
.way .cmd { font-size: 16px; max-width: none; margin-bottom: 8px; }
.fine { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.pkgs { list-style: none; margin: 8px 0 14px; padding: 0; font-size: 13.5px; color: #e8dcc4; }
.pkgs li { margin-bottom: 8px; overflow-wrap: anywhere; }
.pkgs b { color: var(--cream); margin-right: 6px; }
.pkgs code { margin-right: 6px; }
.verify { font-size: 13px; color: #e8dcc4; max-width: 720px; }
.table-wrap { overflow-x: auto; }
.downloads { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.45; }
.downloads thead th { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; text-align: left; color: var(--muted); border-bottom: 2px solid var(--pink); padding: 6px 10px; }
.downloads tbody th, .downloads td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px dashed #3a2a3b; }
.downloads tbody th a { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 18px; letter-spacing: .4px; display: block; }
.downloads tbody th code { color: var(--dim); font-size: 11px; white-space: nowrap; }
.downloads td:nth-child(2) { white-space: nowrap; color: var(--cream); }
.sums { font-size: 12px; color: var(--muted); }
.notes { margin: 18px 0 0; padding-left: 18px; color: #e8dcc4; font-size: 13.5px; }
.notes li { margin-bottom: 8px; }

/* terminal captures (LP7b): the screen as an SVG on kitty's cell grid (tools/site/ansi2html.py), scaled so --cols
   cells fill the box; the padding is the terminal's own background, as in kitty. Pictures sit over their cells. */
.capture .screen { container-type: inline-size; padding: 8px 10px 10px; background: #1e1e2e; }
.capture .grid { position: relative; font-size: calc(100cqw / var(--cols) / 0.6125); line-height: 1; }
.capture svg.cells { display: block; width: 100%; height: auto; }
.capture .tile { position: absolute; left: calc(var(--c) / var(--cols) * 100%); top: calc(var(--r) / var(--rows) * 100%); width: calc(var(--w) / var(--cols) * 100%); height: calc(var(--h) / var(--rows) * 100%); object-fit: cover; display: block; }
/* the shared screen on the huddle capture: one Swan Lake still under faint scanlines and grain. Nothing moves. */
.capture .tv { overflow: hidden; background: #000; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.capture .tv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capture .tv::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.capture .tv::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--grain); background-size: 120px 120px; opacity: .16; mix-blend-mode: overlay; }

/* captures zoom (js/zoom.js): a click, a tap, Enter or Space opens one enlarged; Esc or a click closes it.
   While it is open the page behind does not scroll. */
body:has(dialog.zoom[open]) { overflow: hidden; }
.term.capture[role=button] { cursor: zoom-in; }
.term.capture[role=button]:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.zoom-hint { float: right; font-family: 'Permanent Marker', cursive; font-size: 11px; line-height: 1.3; color: var(--yellow); }
dialog.zoom { padding: 0; border: 0; background: none; color: inherit; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain; }
dialog.zoom::backdrop { background: rgba(10, 4, 11, .88); }
dialog.zoom .term { cursor: zoom-out; box-shadow: none; }
.zoom-close { position: fixed; top: 10px; right: 12px; z-index: 1; font: 700 22px/1 'Space Mono', monospace; color: var(--ink); background: var(--yellow); border: 0; padding: 4px 10px 6px; box-shadow: 3px 3px 0 #000; cursor: pointer; }

#footer { position: relative; margin-top: 40px; padding: 34px 0 60px; border-top: 2px dashed #3a2a3b; display: flex; gap: 28px; align-items: center; font-size: 12.5px; color: var(--muted); }
#footer p { margin: 0 0 6px; }
#footer .credit { font-size: 11px; }
/* a rubber stamp, a bit worn: the ink skips where the crease noise is light */
.stamp { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px 10px; border: 4px double var(--pink); border-radius: 6px;
  color: var(--pink); font-family: 'Rubik Mono One', sans-serif; font-size: 13px; line-height: 1.15; text-align: center; transform: rotate(var(--r, -9deg)); opacity: .92;
  -webkit-mask-image: var(--crease); mask-image: var(--crease); -webkit-mask-size: 180px 60px; mask-size: 180px 60px; mask-mode: luminance; }
.stamp b { font-weight: 400; font-size: 17px; letter-spacing: 2px; border-top: 2px solid var(--pink); padding-top: 4px; margin-top: 2px; }

@media (max-width: 759px) {
  #top > .dl-area { position: static; left: auto; top: auto; width: auto; transform: none; padding: 16px 0 4px; }
  .dl-area .dl { padding: 10px 22px; }
  .dl-area .dl-cmd { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
  .dl-area .dl-meta { flex-basis: 100%; font-size: 14px; }
  .dl-area .dl-meta a { display: inline-block; padding: 6px 0; }
}

@media (max-width: 700px) {
  .topnav { flex-direction: column; align-items: flex-start; gap: 2px; }
  .topnav span a { margin: 0 16px 0 0; }
  .feature { grid-template-columns: 1fr; gap: 22px; }
  .ways { grid-template-columns: 1fr; }
  .feature.flip .words { order: 0; }
  .closer { font-size: 16px; padding: 14px 16px 16px; }
  .cool-kids { font-size: 18px; margin-left: 4px; }
  #footer { flex-direction: column; align-items: flex-start; }
  .sheet { padding: 20px 16px 18px; }
  .sheet thead tr { display: block; }
  .sheet thead th:not(:first-child), .sheet thead td { display: none; }
  .sheet thead th:first-child { display: block; border: 0; padding: 0 0 4px; }
  .sheet tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 12px 0; border-bottom: 1px dashed #c9bca4; }
  .sheet tbody th, .sheet td { display: block; width: auto; padding: 0; border: 0; }
  .sheet tbody th, .sheet .remark { grid-column: 1 / -1; }
  .sheet td.them::before, .sheet td.us::before { content: attr(data-side); display: block; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 2px; }
  .sheet td.us::before { color: var(--aubergine); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }