/* Shift's site: one palette, no build step, no requests that leave the page. */
* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; color-scheme: dark; }
body { margin: 0; background: var(--plum-deep); color: var(--paper); font: 16px/1.55 "IBM Plex Sans", system-ui, sans-serif; }
a { color: inherit; text-underline-offset: .25em; }
a:hover { color: var(--lime-hi); }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--lime-hi); outline-offset: 4px; }
::selection { background: var(--lime-hi); color: var(--plum-deep); }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; line-height: 1.1; margin: 0; }
p { text-wrap: pretty; margin: 0 0 1rem; }
pre, code, .mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
pre { overflow-x: auto; line-height: 1.65; font-size: .875rem; margin: 0; }
pre code { white-space: pre; }
code { font-size: .9375em; }
.wrap { width: min(1200px, calc(100% - 5rem)); margin-inline: auto; }
.skip-link { position: absolute; top: 1rem; left: 1rem; padding: .75rem; background: var(--lime-hi); color: var(--plum-deep); transform: translateY(-200%); z-index: 10; }
.skip-link:focus { transform: translateY(0); color: var(--plum-deep); }
.wordmark { font: 700 1.5rem/1 "IBM Plex Mono", ui-monospace, monospace; text-decoration: none; white-space: nowrap; display: flex; gap: .5em; align-items: center; }
.wordmark .brand-mark { color: var(--lime-hi); }
nav { display: flex; gap: 2rem; align-items: center; }
nav a { text-decoration: none; padding-block: .75rem; font-size: .875rem; }
.eyebrow { font: .75rem/1.6 "IBM Plex Mono", ui-monospace, monospace; color: var(--cyan-faded); }
.caption { font-size: .8125rem; color: var(--cyan-faded); margin: 1rem 0 0; max-width: 90ch; }
.text-link { font-size: .9375rem; }
.button { display: inline-flex; align-items: center; padding: .875rem 1.25rem; min-height: 48px; text-decoration: none; font-weight: 600; border: 1px solid currentColor; }
.primary { background: var(--lime-hi); color: var(--plum-deep); border-color: var(--lime-hi); }
.primary:hover { background: var(--paper); border-color: var(--paper); color: var(--plum-deep); }
.actions { display: flex; align-items: center; gap: 1.5rem; }

/* Sections below the hero: a heading column and a proof column. */
.page-nav { border-block: 1px solid var(--plum); padding-block: .5rem; flex-wrap: wrap; gap: 0 1.5rem; }
.page-nav a { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8125rem; }
.section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 3rem; row-gap: 1.5rem; padding-block: 4rem; border-bottom: 1px solid var(--plum); align-items: start; }
.section:last-of-type { border-bottom: 0; }
.section h2, .start h2, .doc h1 { font-family: "IBM EGA", ui-monospace, monospace; font-weight: 400; letter-spacing: 0; }
/* Now and then a header flickers into the face of another generation for a frame or two (hero.js, docs.js). */
[data-glitch="cga"] { font-family: "IBM CGA", ui-monospace, monospace !important; }
[data-glitch="vga"] { font-family: "IBM VGA", ui-monospace, monospace !important; }
.section h2 { font-size: 1.75rem; line-height: 1; margin-bottom: 1rem; }
.section .lede { font-size: 1rem; line-height: 1.6; color: color-mix(in srgb, var(--paper) 82%, var(--plum-deep)); margin: 0; max-width: 40rem; }
.section-copy .text-link { display: inline-block; margin-top: 1rem; }
.proof { min-width: 0; }
.proof pre { padding: 1.5rem; background: #0f0314; color: var(--paper); font-size: .8125rem; line-height: 1.7; }
.proof .k { color: var(--cyan-faded); }
.proof .cmd { color: var(--lime-faded); }
.proof .note { color: var(--magenta-faded); }
.proof .dim { color: color-mix(in srgb, var(--paper) 70%, var(--plum-deep)); }
.results { border-collapse: collapse; width: 100%; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8125rem; }
.results th { text-align: left; font-weight: 400; color: var(--cyan-faded); padding: .625rem 0; border-bottom: 1px solid var(--cyan-faded); }
.results td { padding: .625rem 1rem .625rem 0; vertical-align: top; border-bottom: 1px solid var(--plum); }
.results .good { color: var(--lime-hi); white-space: nowrap; }
.results td:nth-child(3), .results td:nth-child(4) { white-space: nowrap; }
.results .dim { color: color-mix(in srgb, var(--paper) 70%, var(--plum-deep)); }

/* Make it yours: the Ghostty themes, with the generated file's own colors as swatches. */
.theme-downloads { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.theme-card { background: var(--plum); padding: 1rem; display: grid; gap: .5rem; align-content: start; }
.swatches { display: flex; height: 12px; }
.swatches i { flex: 1; display: block; }
.theme-card h3 { font-size: 1rem; margin-top: .25rem; }
.theme-card p { font-size: .8125rem; color: color-mix(in srgb, var(--paper) 75%, var(--plum-deep)); margin: 0; }
.theme-card a { font-size: .8125rem; padding-block: .375rem; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.theme-card[data-swatch="acid"] .s1 { background: #170626; } .theme-card[data-swatch="acid"] .s2 { background: #f4edff; } .theme-card[data-swatch="acid"] .s3 { background: #b6ff00; } .theme-card[data-swatch="acid"] .s4 { background: #45f6ff; } .theme-card[data-swatch="acid"] .s5 { background: #ae7deb; }
.theme-card[data-swatch="paddock"] .s1 { background: #ffffd7; } .theme-card[data-swatch="paddock"] .s2 { background: #262626; } .theme-card[data-swatch="paddock"] .s3 { background: #d70000; } .theme-card[data-swatch="paddock"] .s4 { background: #005f00; } .theme-card[data-swatch="paddock"] .s5 { background: #585858; }
.theme-card[data-swatch="blueprint"] .s1 { background: #000087; } .theme-card[data-swatch="blueprint"] .s2 { background: #eeeeee; } .theme-card[data-swatch="blueprint"] .s3 { background: #ffffaf; } .theme-card[data-swatch="blueprint"] .s4 { background: #afd7ff; } .theme-card[data-swatch="blueprint"] .s5 { background: #0000af; }
.theme-card[data-swatch="qdos"] .s1 { background: #000000; } .theme-card[data-swatch="qdos"] .s2 { background: #ffffff; } .theme-card[data-swatch="qdos"] .s3 { background: #e8da59; } .theme-card[data-swatch="qdos"] .s4 { background: #66b7b3; } .theme-card[data-swatch="qdos"] .s5 { background: #67cc4d; }
.yours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.yours-grid > div { min-width: 0; }
.yours-grid h3 { font-size: 1rem; margin-bottom: .5rem; }
.yours-grid p { font-size: .875rem; color: color-mix(in srgb, var(--paper) 75%, var(--plum-deep)); }
.yours-grid pre { font-size: .8125rem; }
.yours-grid pre code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Start: a plum box under the sixteen-color ramp, drawn as a band through a dot screen. */
.start { margin-top: 4rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem 3rem; align-items: center; padding: 0 2rem 2rem; background: var(--plum); color: var(--paper); }
.start .ramp { grid-column: 1 / -1; height: 12px; margin: 0 -2rem 1rem; background-color: var(--cyan-faded); background-image: radial-gradient(var(--plum) .75px, transparent .9px), linear-gradient(100deg, var(--lime-faded) 0%, var(--cyan-faded) 48%, var(--magenta-faded) 100%); background-size: 4px 4px, 100% 100%; }
.start h2 { font-size: 1.75rem; line-height: 1; margin-bottom: 1rem; }
.start p { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.6; color: color-mix(in srgb, var(--paper) 82%, var(--plum)); }
.start p:last-child { margin: 0; }
.start a { color: var(--paper); }
.start pre { padding: 1.5rem; background: var(--plum-deep); color: var(--lime-hi); min-width: 0; font-size: .8125rem; line-height: 1.7; }
.start .dim { color: var(--cyan-faded); }
.site-footer { margin-top: 4rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--plum); display: flex; align-items: center; justify-content: space-between; gap: 2rem; font-size: .8125rem; color: var(--cyan-faded); }
.site-footer .type { display: block; margin-top: .25rem; }
.site-footer p { margin: 0; }
.site-footer nav a { color: var(--paper); }

/* Docs: a rail of every page, one page of text beside it. */
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; padding-block: 2rem 4rem; align-items: start; }
.rail { position: sticky; top: 1.5rem; font-size: .875rem; }
.rail > summary { list-style: none; cursor: default; pointer-events: none; }
.rail > summary::-webkit-details-marker { display: none; }
.rail-pages { display: grid; gap: 1.25rem; }
.rail h2 { font: .75rem/1.6 "IBM Plex Mono", ui-monospace, monospace; color: var(--cyan-faded); margin-bottom: .25rem; }
.rail a { display: block; text-decoration: none; padding: .25rem 0; }
.rail a[aria-current] { color: var(--lime-hi); }
.doc { max-width: 44rem; min-width: 0; }
.doc .crumbs { font: .8125rem/1.6 "IBM Plex Mono", ui-monospace, monospace; color: var(--cyan-faded); margin-bottom: 1rem; }
.doc h1 { font-size: 2.625rem; line-height: 1; margin-bottom: 1rem; }
.doc h2 { font-size: 1.375rem; font-weight: 700; margin: 2.5rem 0 .75rem; }
.doc h3 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.doc p, .doc li { font-size: 1rem; line-height: 1.6; color: color-mix(in srgb, var(--paper) 88%, var(--plum-deep)); }
.doc p { margin-bottom: 1rem; }
.doc ul, .doc ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.doc li { margin-bottom: .375rem; }
.doc pre { padding: 1.25rem 1.5rem; background: #0f0314; font-size: .8125rem; line-height: 1.7; margin-bottom: 1rem; }
.doc code { background: #0f0314; padding: .1em .35em; }
.doc pre code { background: none; padding: 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: .875rem; margin-bottom: 1rem; }
.doc th { text-align: left; font-weight: 400; color: var(--cyan-faded); padding: .5rem 1rem .5rem 0; border-bottom: 1px solid var(--cyan-faded); }
.doc td { padding: .5rem 1rem .5rem 0; border-bottom: 1px solid var(--plum); vertical-align: top; }
.doc .note { border-left: 3px solid var(--cyan-faded); padding: .25rem 0 .25rem 1rem; margin-bottom: 1rem; }
.doc .shot { margin: 1.5rem 0; }
.doc .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--plum); }
.doc .shot figcaption { font-size: .8125rem; line-height: 1.5; color: var(--cyan-faded); margin-top: .5rem; }
.doc .note p { margin: 0; }
.doc-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--plum); font-size: .875rem; }
.doc-nav a { text-decoration: none; }
.doc-index { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; }
.doc-index h2 { margin-top: 0; }
.doc-index ul { list-style: none; padding: 0; }

/* The pane pack reference page. */
.reference { padding-top: 3rem; }
.reference-intro { max-width: 70ch; margin-bottom: 2.5rem; }
.reference-intro h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 1rem; }
.lede { font-size: 1.125rem; color: color-mix(in srgb, var(--paper) 82%, var(--plum-deep)); }
.reference-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--plum); align-items: start; }
.reference-block h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; }
.reference-block p { font-size: .9375rem; color: color-mix(in srgb, var(--paper) 82%, var(--plum-deep)); }
.reference-block pre { padding: 1.25rem 1.5rem; background: #0f0314; }
.plain { color: var(--paper); }
.code-accent { color: var(--lime-faded); }
.code-muted { color: var(--cyan-faded); }
.fields { width: 100%; border-collapse: collapse; font-size: .875rem; }
.fields th { text-align: left; font-weight: 400; color: var(--cyan-faded); padding: .5rem 1rem .5rem 0; border-bottom: 1px solid var(--cyan-faded); }
.fields td { padding: .5rem 1rem .5rem 0; border-bottom: 1px solid var(--plum); vertical-align: top; }
.fields td:first-child { font-family: "IBM Plex Mono", ui-monospace, monospace; white-space: nowrap; }

@media (max-width: 900px) {
  .section, .start, .reference-block, .docs, .doc-index { grid-template-columns: 1fr; }
  .rail { position: static; }
  .rail > summary { pointer-events: auto; cursor: pointer; padding: .75rem 0; border-block: 1px solid var(--plum); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8125rem; color: var(--cyan-faded); }
  .rail > summary::before { content: "▸ "; }
  .rail[open] > summary::before { content: "▾ "; }
  .rail-pages { padding-top: 1rem; }
  .screen-foot { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .screen-foot > :last-child, .pager { justify-self: start; }
  .theme-downloads { grid-template-columns: 1fr 1fr; }
  .yours-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 2rem); }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 480px) { .theme-downloads { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) { .primary, .button { border: 1px solid ButtonText; } }

/* Brand: the aged-tape palette, highlights past sRGB where the display allows. */
:root { --plum: #2e1635; --plum-deep: #18071e; --lime-faded: #add658; --cyan-faded: #59c2d6; --magenta-faded: #d8559b; --paper: #e8e0d3; --lime-hi: #aaff00; --cyan-hi: #00f4ff; --magenta-hi: #ff00b9; --cga-cyan: #55ffff; --cga-magenta: #ff55ff; }
@supports (color: oklch(50% 0.1 120)) {
  :root { --plum: oklch(25% 0.065 318); --plum-deep: oklch(17% 0.05 316); --lime-faded: oklch(82% 0.16 125); --cyan-faded: oklch(76% 0.1 212); --magenta-faded: oklch(64% 0.18 350); --paper: oklch(91% 0.02 80); --lime-hi: oklch(93% 0.31 128); --cyan-hi: oklch(88% 0.17 210); --magenta-hi: oklch(70% 0.32 350); }
}
/* The IBM CGA, EGA and VGA text-mode faces, from the Oldschool PC Font Pack (CC BY-SA 4.0). Sizes are multiples of the cell so the pixels stay square. */
@font-face { font-family: "IBM CGA"; src: url(./assets/fonts/ibm-cga.woff) format("woff"); font-display: swap; }
@font-face { font-family: "IBM EGA"; src: url(./assets/fonts/ibm-ega.woff) format("woff"); font-display: swap; }
@font-face { font-family: "IBM VGA"; src: url(./assets/fonts/ibm-vga.woff) format("woff"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 100 700; src: url(./assets/fonts/plex-sans.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; src: url(./assets/fonts/plex-mono-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; src: url(./assets/fonts/plex-mono-600.woff2) format("woff2"); font-display: swap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The header. */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 96px; width: auto; padding-inline: max(2.5rem, calc((100% - 1200px) / 2)); }
.site-header .wordmark canvas { display: block; height: 56px; width: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.site-header nav a { color: var(--paper); }
.site-header nav a:hover { color: var(--lime-hi); }
.hero { background: var(--plum-deep); color: var(--paper); padding-top: 0; }
.hero a { color: inherit; }
.screen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto; column-gap: 3rem; row-gap: 1.5rem; min-height: calc(100svh - 96px); padding-block: 1rem 2rem; }
.hero:not([data-js]) .screen { min-height: 0; padding-block: 3rem; border-top: 1px solid var(--plum); }
.screen-copy { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; max-width: 34rem; }
.screen > * { min-width: 0; }
.screen-foot > * { min-width: 0; }
.install { overflow-wrap: anywhere; }
.screen-copy h1, .screen-copy h2 { outline: none; }
.screen-copy p { margin: 0; }
.screen-visual { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.screen-foot { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.screen-foot > :last-child { justify-self: end; }
.pager { display: flex; gap: .75rem; justify-self: center; }
.pager a { text-decoration: none; min-width: 2rem; text-align: center; padding: .25rem 0; }
.pager a[aria-current] { text-decoration: underline; text-underline-offset: .35em; }
.back { text-decoration: none; }
.continue { text-decoration: none; }
.continue:hover { color: var(--lime-hi); }
.stage { width: 100%; max-width: 760px; aspect-ratio: 1600 / 1132; }
.stage canvas, .stage img { display: block; width: 100%; height: 100%; background: var(--plum-deep); }

/* Screen 1: four colors, the CGA face at whole multiples of its 8px cell. */
.gen-1 { font-family: "IBM CGA", ui-monospace, monospace; color: #fff; }
.gen-1 h1 { font-size: clamp(1.5rem, 3.3vw, 3rem); font-weight: 400; line-height: 1; text-transform: uppercase; }
.gen-1 .lead { font-size: clamp(1rem, 1.66vw, 1.5rem); line-height: 1.33; text-transform: uppercase; }
.gen-1 .aside { font-size: 1rem; line-height: 1.5; text-transform: uppercase; color: var(--cga-cyan); }
.gen-1 .install { font-size: 1rem; color: var(--cga-magenta); }
.gen-1 .caret { background: var(--cga-magenta); color: var(--plum-deep); animation: caret 1s steps(1) infinite; }
.gen-1 .continue, .gen-1 .pager a { font-size: 1rem; color: var(--cga-cyan); text-transform: uppercase; }
.gen-1 .pager a[aria-current] { color: var(--cga-magenta); }
@keyframes caret { 50% { opacity: 0; } }

/* Screen 2: sixteen colors, the EGA face at multiples of its 9x14 cell, a hard shadow. */
.gen-2 { font-family: "IBM EGA", ui-monospace, monospace; }
.gen-2 h2 { font-size: clamp(1.75rem, 2.9vw, 2.625rem); font-weight: 400; line-height: 1; color: #fff; }
.gen-2 .lead { font-size: 1.3125rem; line-height: 1.33; }
.gen-2 .capture { width: 100%; max-width: 800px; height: auto; box-shadow: 12px 12px 0 var(--plum); }
.gen-2 .install { font-size: 1.05rem; color: var(--lime-faded); }
.gen-2 .continue, .gen-2 .back, .gen-2 .pager a { font-size: 1.3125rem; color: var(--cyan-faded); }
.gen-2 .pager a[aria-current] { color: var(--magenta-faded); }

/* Screen 3: the full palette and the reading faces. */
.gen-3 { font-family: "IBM Plex Sans", system-ui, sans-serif; }
.gen-3 .mono, .gen-3 .button, .gen-3 .pager, .gen-3 .continue, .gen-3 .back { font-family: "IBM VGA", ui-monospace, monospace; }
.gen-3 h2 { font-family: "IBM VGA", ui-monospace, monospace; font-size: clamp(1.5rem, 3.3vw, 3rem); font-weight: 400; line-height: 1; letter-spacing: 0; }
.gen-3 p { font-size: 1.0625rem; line-height: 1.5; color: color-mix(in srgb, var(--paper) 82%, var(--plum-deep)); }
.gen-3 .actions { margin: .25rem 0 0; flex-wrap: wrap; gap: 1.25rem; }
.gen-3 .button.primary { background: var(--lime-hi); border-color: var(--lime-hi); color: var(--plum-deep); font-weight: 400; font-size: 1rem; gap: 0; }
.gen-3 .button.primary:hover { background: var(--paper); border-color: var(--paper); }
.gen-3 .text-link { font-size: 1rem; color: var(--cyan-hi); }
.gen-3 .aside { font-size: 1rem; color: var(--cyan-faded); }
.gen-3 .continue, .gen-3 .back, .gen-3 .pager a { font-size: 1rem; color: var(--cyan-faded); }
.gen-3 .pager a[aria-current] { color: var(--lime-hi); }
.theme-captures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; width: 100%; max-width: 800px; }
.theme-captures li { display: grid; gap: .375rem; }
.theme-captures img { width: 100%; height: auto; display: block; border: 1px solid var(--plum); }
.theme-captures span { font-size: 1rem; color: var(--cyan-faded); }
@media (max-width: 900px) {
  .screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; padding-block: 2rem; }
  .screen-visual { justify-content: stretch; }
  .stage, .gen-2 .capture, .theme-captures { max-width: none; }
  .site-header { padding-inline: 1rem; }
}
@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; padding-block: .75rem; min-height: 0; }
  .site-header .wordmark canvas { height: 40px; }
  .site-header nav { width: 100%; gap: 1.25rem; flex-wrap: wrap; }
}
@media (max-width: 520px) { .theme-captures { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gen-1 .caret { animation: none; } }