/*
 * Clear Sky, the PsychArch design language (psycharch-web/doc/design-language.md),
 * with the interface roles from psycharch-auth/doc/design-tokens.md.
 */
@font-face { font-family: "PsychArch Latin UI"; src: url("/intro/fonts/psycharch-latin-ui-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PsychArch Latin UI"; src: url("/intro/fonts/psycharch-latin-ui-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PsychArch Latin UI"; src: url("/intro/fonts/psycharch-latin-ui-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PsychArch Code"; src: url("/intro/fonts/psycharch-code-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --pa-bg: #fff;
  --pa-text: #263b48;          /* 11.7:1 */
  --pa-muted: #58707e;         /* 5.2:1; 4.9:1 on tint */
  --pa-primary: #365f78;       /* 6.9:1; inline links are underlined */
  --pa-primary-strong: #2d5065;
  --pa-border: #e4eaf0;        /* decorative rules only */
  --pa-tint: #f4f8fa;          /* hover */
  --pa-mist: #e2edf2;          /* selection and selected states */
  --pa-control: #798993;       /* 3.6:1 */
  --pa-control-quiet: #acc1cf;
  --pa-success: #37684d; --pa-success-tint: #eef9f2; --pa-success-border: #bfddca;
  --pa-warning: #7f5114; --pa-warning-tint: #fcf4ec; --pa-warning-border: #e6d0b9;
  --pa-radius: 4px;
  --font-sans: "PsychArch Latin UI", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "PsychArch Code", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--pa-bg); color: var(--pa-text); font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.6; }
strong, b { font-weight: 600; }
code, kbd, pre { font-family: var(--font-mono); font-weight: 400; }
a { color: inherit; text-underline-offset: 4px; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--pa-primary); outline-offset: 3px; }
::selection { background: var(--pa-mist); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Each client wears its own mark on a quiet tile; a pair overlaps two tiles. */
.mark { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--pa-border); border-radius: 10px; background: var(--pa-tint); color: var(--pa-primary); }
.mark .icon { width: 22px; height: 22px; }
.marks { display: inline-flex; flex: none; }
.marks .mark + .mark { margin-left: -10px; box-shadow: -2px 0 0 var(--pa-bg); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Page frame */
.shell { max-width: 1280px; min-height: 100svh; display: flex; flex-direction: column; margin: 0 auto; padding: 0 64px; }
.site-header { min-height: 88px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--pa-border); }
.brand { display: inline-flex; align-items: center; gap: 8px; margin-left: -4px; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; }
.brand-mark { width: 48px; height: 48px; }
nav { display: flex; gap: 24px; font-size: 15px; }
nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }
nav a:hover { color: var(--pa-primary-strong); text-decoration: underline; }
nav a[aria-current="page"] { box-shadow: inset 0 -2px var(--pa-primary); }
/* Tabs mark hover and the current page in one place: a quiet bar for hover, the sky bar for current. */
.tabs a:hover { text-decoration: none; box-shadow: inset 0 -2px var(--pa-control-quiet); }
.tabs a[aria-current="page"], .tabs a[aria-current="page"]:hover { box-shadow: inset 0 -2px var(--pa-primary); }
nav .icon { width: 16px; height: 16px; }
.tabs { margin-right: auto; }
.header-actions { display: flex; align-items: center; gap: 20px; font-size: 15px; }
.header-actions a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }
.header-actions .icon { width: 16px; height: 16px; }
.open-reader:hover { color: var(--pa-primary-strong); text-decoration: underline; }
/* One quiet icon opens the e-ink demo; e-ink screens get the full button. */
.view-switch { justify-content: center; min-width: 44px; padding: 0 10px; border: 1px solid var(--pa-control-quiet); border-radius: var(--pa-radius); color: var(--pa-primary); }
.view-switch:hover { background: var(--pa-tint); border-color: var(--pa-primary); }
.view-switch .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.view-switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (update: slow) {
  .view-switch { padding: 0 14px; border-color: var(--pa-primary); }
  .view-switch-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
main { flex: 1; }
.site-footer { min-height: 72px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--pa-border); color: var(--pa-muted); font-size: 13px; }
.site-footer p { margin: 0; }
.site-footer nav { font-size: 13px; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 10; padding: 8px 16px; background: var(--pa-bg); border: 1px solid var(--pa-primary); border-radius: var(--pa-radius); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Type */
.section-label { margin: 0 0 12px; font-size: 14px; color: var(--pa-muted); }
h1, h2 { font-weight: 500; letter-spacing: -0.015em; }
h1 { margin: 0 0 16px; font-size: clamp(2.75rem, 6vw, 3.75rem); line-height: 1.1; }
h2 { margin: 0; font-size: 24px; line-height: 1.3; }
.note { margin: 0; font-size: 14px; color: var(--pa-muted); }

/* Actions: a blue outline control and quiet text links */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 20px; border: 1px solid var(--pa-primary); border-radius: var(--pa-radius); color: var(--pa-primary); text-decoration: none; transition: background-color .15s, color .15s; }
.button:hover { background: var(--pa-tint); color: var(--pa-primary-strong); }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--pa-primary); text-decoration: underline; }
.text-link:hover { color: var(--pa-primary-strong); text-decoration-thickness: 2px; }
.text-link .icon { width: 16px; height: 16px; }

/* Introduction: one line and the main action */
.intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; padding: 32px 0 8px; }
.intro h1 { margin: 0 0 8px; font-size: clamp(2.25rem, 5vw, 3.25rem); }
.nowrap { white-space: nowrap; }
.lede { margin: 0; font-size: 17px; color: var(--pa-muted); }

/* Diagram: every block is an option of one native radio group. */
.flow { display: flex; flex-direction: column; }
.flow-diagram { position: relative; aspect-ratio: 12 / 5; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wire { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .15s, stroke-width .15s; }
.wire.available { stroke: var(--pa-control-quiet); }
.pulse { fill: none; stroke: var(--pa-primary); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.5 200; stroke-dashoffset: 1; animation: travel 5.6s linear infinite; }
.pulse[data-client="codex"] { animation-delay: -.8s; }
.pulse[data-client="cli"] { animation-delay: -1.6s; }
.pulse[data-client="web"] { animation-delay: -2.4s; }
.pulse[data-client="chrome"] { animation-delay: -3.2s; }
.pulse[data-client="edge"] { animation-delay: -4s; }
.pulse[data-client="firefox"] { animation-delay: -4.8s; }
.pulse.delivery { animation-duration: 1.6s; }
@keyframes travel { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -101; } }

.node { position: relative; background: var(--pa-bg); cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; animation: appear .5s ease-out backwards; }
.node input { position: absolute; opacity: 0; pointer-events: none; }
.node:hover { background: var(--pa-tint); }
.node:has(input:focus-visible) { outline: 2px solid var(--pa-primary); outline-offset: 3px; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } }

.client-picker { position: absolute; top: 0; left: 0; width: 23%; height: 100%; display: grid; grid-auto-rows: 1fr; }
.client { display: flex; align-items: center; gap: 12px; align-self: center; min-height: 48px; padding: 6px 12px; border: 1px solid var(--pa-control-quiet); border-radius: var(--pa-radius); }
.client:nth-child(2) { animation-delay: .05s; } .client:nth-child(3) { animation-delay: .1s; } .client:nth-child(4) { animation-delay: .15s; }
.client .mark { width: 32px; height: 32px; border-radius: 8px; color: var(--pa-muted); transition: color .15s, background-color .15s, border-color .15s; }
/* In the diagram a pair stacks diagonally so every name keeps its room. */
.client .marks { position: relative; width: 32px; height: 32px; }
.client .marks .mark { position: absolute; width: 19px; height: 19px; border-radius: 5px; }
.client .marks .mark:first-child { top: 0; left: 0; }
.client .marks .mark + .mark { right: 0; bottom: 0; margin: 0; box-shadow: 0 0 0 2px var(--pa-bg); }
.client .marks .icon { width: 11px; height: 11px; }
.client .icon { width: 18px; height: 18px; }
.client-text { display: grid; min-width: 0; line-height: 1.3; }
.client-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-status { font-size: 13px; color: var(--pa-muted); }
/* Clients in development sit in one quiet row under the diagram. */
.client-pending { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.client-pending .client { min-height: 0; padding: 4px 12px 4px 10px; gap: 8px; }
.client-pending .client[data-status="developing"] { border-style: dashed; }
.client-pending .client .mark { width: 26px; height: 26px; border-radius: 7px; }
.client-pending .client .icon { width: 15px; height: 15px; }
.client-pending .client-name { font-size: 14px; }
.client-pending .client-status { font-size: 12px; }
.client:hover { border-color: var(--pa-control); }
.client:has(input:checked) { background: var(--pa-mist); border-color: var(--pa-primary); box-shadow: inset 3px 0 var(--pa-primary); }
.client:has(input:checked) .client-name { font-weight: 600; }
.client:hover .mark { color: var(--pa-primary); }
.client:has(input:checked) .mark { color: var(--pa-primary); background: var(--pa-bg); border-color: var(--pa-control-quiet); }
.flow:has(input[value="mcp"]:checked) .wire[data-client="mcp"],
.flow:has(input[value="codex"]:checked) .wire[data-client="codex"],
.flow:has(input[value="cli"]:checked) .wire[data-client="cli"],
.flow:has(input[value="web"]:checked) .wire[data-client="web"],
.flow:has(input[value="chrome"]:checked) .wire[data-client="chrome"],
.flow:has(input[value="edge"]:checked) .wire[data-client="edge"],
.flow:has(input[value="firefox"]:checked) .wire[data-client="firefox"],
.flow:has(input[value="macos"]:checked) .wire[data-client="macos"],
.flow:has(input[value="library"]:checked) .wire.available:not(.delivery),
.flow:has(input[value="eink"]:checked) .wire.delivery { stroke: var(--pa-primary); stroke-width: 2.5; }

.hub { position: absolute; left: 39.1667%; top: 40%; width: 18.3333%; height: 20%; display: grid; place-content: center; justify-items: center; gap: 2px; border: 1px solid var(--pa-primary); border-radius: var(--pa-radius); text-align: center; animation-delay: .45s; }
.hub:has(input:checked) { background: var(--pa-mist); box-shadow: 0 0 0 4px var(--pa-mist); }
.hub .icon { width: 28px; height: 28px; color: var(--pa-primary); animation: receive 1.6s ease-out infinite; }
.hub-name { font-size: 18px; font-weight: 600; }
.hub-detail { font-size: 13px; color: var(--pa-muted); }
@keyframes drop { to { transform: translateY(60px); } }
@keyframes receive { 0%, 70% { transform: none; } 85% { transform: translateY(-2px); } 100% { transform: none; } }

.eink { position: absolute; left: 67.5%; top: 2%; width: 30%; height: 96%; display: flex; flex-direction: column; border-radius: 20px; animation-delay: .6s; }
.eink:hover, .eink:has(input:checked) { background: none; }
.eink-device { display: block; flex: 1; min-height: 0; padding: 14px 14px 36px; border: 1px solid var(--pa-control); border-radius: 18px; background: var(--pa-tint); transition: border-color .15s, box-shadow .15s; }
.eink:hover .eink-device { border-color: var(--pa-primary); }
.eink:has(input:checked) .eink-device { border-color: var(--pa-primary); box-shadow: 0 0 0 4px var(--pa-mist); }
.eink-screen { position: relative; display: block; height: 100%; overflow: hidden; border: 1px solid var(--pa-control-quiet); border-radius: 2px; background: #f2f2ef; }
.eink-document { display: block; width: 100%; height: 100%; padding: 4%; }
/* A slow, low-contrast sweep, like an e-ink partial refresh. */
.eink-refresh { position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(to bottom, transparent, rgb(38 59 72 / .14) 45%, rgb(38 59 72 / .2) 55%, transparent); animation: refresh 4.8s ease-in-out infinite; }
@keyframes refresh { 0%, 72% { transform: translateY(0); opacity: 0; } 74% { opacity: 1; } 96% { transform: translateY(440%); opacity: 1; } 100% { transform: translateY(440%); opacity: 0; } }
.eink-caption { margin-top: 10px; font-size: 13px; color: var(--pa-muted); text-align: center; }
.eink:has(input:checked) .eink-caption { color: var(--pa-text); font-weight: 600; }
.flow-step { display: none; }

/* Details: one short note per block, selected by the radio group. */
.details { min-height: 112px; margin: 24px 0 32px; padding-top: 20px; border-top: 1px solid var(--pa-border); }
.detail + .detail { margin-top: 20px; }
@supports selector(:has(*)) {
  .detail { display: none; animation: appear .25s ease-out; }
  .detail + .detail { margin-top: 0; }
  .flow:has(#node-library:checked) #detail-library,
  .flow:has(#node-eink:checked) #detail-eink,
  .flow:has(#node-mcp:checked) #detail-mcp,
  .flow:has(#node-codex:checked) #detail-codex,
  .flow:has(#node-cli:checked) #detail-cli,
  .flow:has(#node-web:checked) #detail-web,
  .flow:has(#node-chrome:checked) #detail-chrome,
  .flow:has(#node-edge:checked) #detail-edge,
  .flow:has(#node-firefox:checked) #detail-firefox,
  .flow:has(#node-macos:checked) #detail-macos,
  .flow:has(#node-ios:checked) #detail-ios,
  .flow:has(#node-windows:checked) #detail-windows { display: block; }
}
.detail h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; font-size: 20px; font-weight: 600; }
.detail p { max-width: 46em; margin: 0; font-size: 17px; font-weight: 400; }
.detail .note { margin-top: 4px; font-size: 14px; }
.detail .text-link { min-height: 0; margin-left: 4px; }
.detail code { font-size: .9em; padding: 1px 6px; border-radius: 3px; background: var(--pa-tint); }
kbd { padding: 1px 6px; border: 1px solid var(--pa-control-quiet); border-radius: var(--pa-radius); background: var(--pa-tint); }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1px solid var(--pa-border); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--pa-muted); background: var(--pa-bg); }
.badge.available { color: var(--pa-success); background: var(--pa-success-tint); border-color: var(--pa-success-border); }
.badge.developing { color: var(--pa-primary); background: var(--pa-mist); border-color: var(--pa-control-quiet); }

/* Pricing: the two plans differ only in their daily limit. */
.pricing { margin-top: 36px; }
.pricing table { width: 100%; max-width: 480px; border-collapse: collapse; font-size: 16px; font-weight: 400; }
.pricing th, .pricing td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--pa-border); text-align: left; vertical-align: middle; }
.pricing thead th { font-size: 17px; font-weight: 600; white-space: nowrap; }
.pricing thead .badge { margin-left: 8px; }
.pricing tbody th { font-weight: 500; color: var(--pa-muted); }
.pricing tbody td { font-variant-numeric: tabular-nums; }

/* Bands: one short heading and one illustration each. */
.hero { padding-bottom: 40px; }
.band { padding: 56px 0; border-top: 1px solid var(--pa-border); }
.band > h2 { margin-bottom: 28px; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.15; }
.art { display: block; width: 100%; max-width: 960px; height: auto; margin: 0 auto; overflow: visible; }
.art-hero { margin-top: 32px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.trio .art { max-width: 300px; }
.trio p { margin: 8px 0 0; font-size: 18px; text-align: center; }
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px 64px; }
.art-start { max-width: 420px; }
.steps { display: grid; gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; align-items: baseline; gap: 12px; font-size: 20px; counter-increment: step; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--pa-control-quiet); border-radius: 50%; font-size: 12px; color: var(--pa-muted); }
.steps p { margin: 0; }

/* Illustrations: schematic SVG animated with CSS only. Screens move smoothly;
   e-ink pages change only in stepped refreshes with a dark flash. */
.a-ui { font-family: var(--font-sans); font-weight: 500; }
.a-mono { font-family: var(--font-mono); font-weight: 400; }
.a-math { font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", "Times New Roman", serif; }
.a-dev { fill: #fff; stroke: var(--pa-control-quiet); stroke-width: 1.5; }
.a-dev-base { fill: var(--pa-tint); stroke: var(--pa-control-quiet); stroke-width: 1.5; }
.a-notch { fill: var(--pa-mist); }
.a-screen, .a-cover { fill: #fbfdfe; }
.a-glow { fill: url(#art-glow); }
.a-tab { fill: var(--pa-tint); stroke: var(--pa-control); stroke-width: 1.5; }
.a-tab-edge { fill: none; stroke: var(--pa-control-quiet); }
.a-tab-button { fill: var(--pa-control-quiet); }
.a-paper, .a-cover-paper { fill: #f2f2ef; }
.a-flash, .a-flash-part { fill: #2c2c29; opacity: 0; }
.a-ripple { fill: rgb(54 95 120 / .14); stroke: var(--pa-primary); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.a-wire { fill: none; stroke: var(--pa-control-quiet); stroke-width: 1.5; stroke-dasharray: 5 5; }
.a-wire-solid { fill: none; stroke: var(--pa-control-quiet); stroke-width: 1.5; }
.a-ln { fill: var(--pa-control); opacity: .55; }
.a-ln-strong { fill: var(--pa-text); opacity: .75; }
.a-ink { fill: #33332f; }
.a-ink-2 { fill: #6b6b66; }
.a-ink-3 { fill: #9a9a94; }
.a-ink-fill { fill: #e3e3de; }
.a-ink-stroke { fill: none; stroke: #33332f; stroke-width: 1.4; }
.a-ink-rule { fill: none; stroke: #6b6b66; stroke-width: 1; }
.a-ink-arrow { fill: none; stroke: #33332f; stroke-width: 1.3; marker-end: url(#art-arrow); }
.a-anim { animation-iteration-count: infinite; animation-timing-function: linear; }

/* Hero, 10 s: a source writes, the page flies to the tablet, a tap turns it.
   The source rotates every loop (chat, terminal, upload page). */
.art-hero .a-anim { animation-duration: 10s; animation-delay: -5.6s; }
.art-hero .a-src { animation-duration: 30s; }
.a-glow-soft { animation: glow-soft 4s ease-in-out infinite alternate; }
@keyframes glow-soft { from { opacity: .7; } to { opacity: 1; } }
.h-src-chat { animation-name: h-src-chat; }
.h-src-cli { animation-name: h-src-cli; }
.h-src-web { animation-name: h-src-web; }
@keyframes h-src-chat { 0%, 32.6% { opacity: 1; } 32.7%, 99.3% { opacity: 0; } 99.4%, 100% { opacity: 1; } }
@keyframes h-src-cli { 0%, 32.6% { opacity: 0; } 32.7%, 66% { opacity: 1; } 66.1%, 100% { opacity: 0; } }
@keyframes h-src-web { 0%, 66% { opacity: 0; } 66.1%, 99.3% { opacity: 1; } 99.4%, 100% { opacity: 0; } }
.h-content { animation-name: h-content; }
@keyframes h-content { 0% { opacity: 0; } 3%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.h-bubble { animation-name: h-bubble; }
@keyframes h-bubble { 0%, 2% { opacity: 0; } 5%, 100% { opacity: 1; } }
.h-reveal { animation-name: h-reveal; animation-timing-function: steps(9); }
@keyframes h-reveal { 0%, 8% { transform: translateY(0); } 28%, 100% { transform: translateY(134px); } }
.h-chip { animation-name: h-chip; }
@keyframes h-chip { 0%, 31% { opacity: 0; } 32%, 100% { opacity: 1; } }
.h-type { animation-name: h-type; animation-timing-function: steps(38); }
@keyframes h-type { 0%, 6% { transform: translateX(0); } 24%, 100% { transform: translateX(240px); } }
.h-output { animation-name: h-output; }
@keyframes h-output { 0%, 26.5% { opacity: 0; } 27%, 100% { opacity: 1; } }
.h-paste { animation-name: h-paste; }
@keyframes h-paste { 0%, 10% { opacity: 0; } 10.5%, 100% { opacity: 1; } }
.h-press { fill: #fff; animation-name: h-press; }
@keyframes h-press { 0%, 26% { fill: #fff; } 27%, 29.5% { fill: var(--pa-mist); } 30%, 100% { fill: #fff; } }
.h-cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.h-fly { animation-name: h-fly; animation-timing-function: ease-in-out; transform-box: fill-box; transform-origin: center; }
@keyframes h-fly {
  0%, 33% { opacity: 0; transform: translate(0, 0) scale(1); }
  34% { opacity: 1; transform: translate(0, -6px) scale(1.12); }
  38% { transform: translate(205px, 0) scale(.95); }
  43% { transform: translate(300px, 1px) scale(.85); }
  49% { opacity: 1; transform: translate(530px, -4px) scale(.7); }
  50%, 100% { opacity: 0; transform: translate(530px, -4px) scale(.7); }
}
.h-page { animation-name: h-page; }
@keyframes h-page { 0%, 52% { opacity: 0; } 52.4%, 78.6% { opacity: 1; } 79%, 100% { opacity: 0; } }
.h-page-next { animation-name: h-page-next; }
@keyframes h-page-next { 0%, 50.2% { opacity: 1; } 50.4%, 80.6% { opacity: 0; } 81%, 100% { opacity: 1; } }
.h-flash { animation-name: h-flash; }
@keyframes h-flash { 0%, 50% { opacity: 0; } 50.4%, 51.6% { opacity: .92; } 52%, 78.6% { opacity: 0; } 79%, 80.2% { opacity: .92; } 80.6%, 100% { opacity: 0; } }
.h-tap { animation-name: h-tap; }
@keyframes h-tap { 0%, 73% { opacity: 0; transform: scale(.3); } 74% { opacity: 1; transform: scale(.5); } 78%, 100% { opacity: 0; transform: scale(1.7); } }

/* Why, 12 s: the laptop scrolls and pings; the e-ink page turns twice. */
.art-why .a-anim { animation-duration: 12s; animation-delay: -3s; }
.a-glow-strong { animation: glow-strong 2.2s ease-in-out infinite alternate; }
@keyframes glow-strong { from { opacity: .55; } to { opacity: 1; } }
.w-scroll { animation: w-scroll 6s linear infinite; }
@keyframes w-scroll { to { transform: translateY(-120px); } }
.w-thumb { animation: w-thumb 6s linear infinite; }
@keyframes w-thumb { to { transform: translateY(156px); } }
.w-ping-1 { animation-name: w-ping-1; }
.w-ping-2 { animation-name: w-ping-2; }
.w-ping-3 { animation-name: w-ping-3; }
@keyframes w-ping-1 { 0%, 6% { transform: translateX(170px); } 9%, 92% { transform: none; } 96%, 100% { transform: translateX(170px); } }
@keyframes w-ping-2 { 0%, 30% { transform: translateX(170px); } 33%, 92% { transform: none; } 96%, 100% { transform: translateX(170px); } }
@keyframes w-ping-3 { 0%, 56% { transform: translateX(170px); } 59%, 92% { transform: none; } 96%, 100% { transform: translateX(170px); } }
.w-page { animation-name: w-page; }
@keyframes w-page { 0%, 50% { opacity: 1; } 50.4%, 98.2% { opacity: 0; } 98.6%, 100% { opacity: 1; } }
.w-page-next { animation-name: w-page-next; }
@keyframes w-page-next { 0%, 51% { opacity: 0; } 51.4%, 97.8% { opacity: 1; } 98.2%, 100% { opacity: 0; } }
.w-flash { animation-name: w-flash; }
@keyframes w-flash { 0%, 49.8% { opacity: 0; } 50.2%, 51.2% { opacity: .92; } 51.6%, 97.6% { opacity: 0; } 98%, 99% { opacity: .92; } 99.4%, 100% { opacity: 0; } }

/* Reading, 14 s: each Markdown block lights up and appears typeset, then a tap turns the page. */
.art-read .a-anim { animation-duration: 14s; animation-delay: -10.6s; }
.r-source-1 { animation-name: r-source-1; } @keyframes r-source-1 { 0%, 3.6% { opacity: 0; } 4%, 17.6% { opacity: 1; } 18%, 100% { opacity: 0; } }
.r-refresh-1 { animation-name: r-refresh-1; } @keyframes r-refresh-1 { 0%, 5% { opacity: 0; } 5.4%, 6.2% { opacity: .9; } 6.6%, 100% { opacity: 0; } }
.r-block-1 { animation-name: r-block-1; } @keyframes r-block-1 { 0%, 6.4% { opacity: 0; } 6.6%, 82.2% { opacity: 1; } 82.4%, 100% { opacity: 0; } }
.r-source-2 { animation-name: r-source-2; } @keyframes r-source-2 { 0%, 17.6% { opacity: 0; } 18%, 31.6% { opacity: 1; } 32%, 100% { opacity: 0; } }
.r-refresh-2 { animation-name: r-refresh-2; } @keyframes r-refresh-2 { 0%, 19% { opacity: 0; } 19.4%, 20.2% { opacity: .9; } 20.6%, 100% { opacity: 0; } }
.r-block-2 { animation-name: r-block-2; } @keyframes r-block-2 { 0%, 20.4% { opacity: 0; } 20.6%, 82.2% { opacity: 1; } 82.4%, 100% { opacity: 0; } }
.r-source-3 { animation-name: r-source-3; } @keyframes r-source-3 { 0%, 31.6% { opacity: 0; } 32%, 45.6% { opacity: 1; } 46%, 100% { opacity: 0; } }
.r-refresh-3 { animation-name: r-refresh-3; } @keyframes r-refresh-3 { 0%, 33% { opacity: 0; } 33.4%, 34.2% { opacity: .9; } 34.6%, 100% { opacity: 0; } }
.r-block-3 { animation-name: r-block-3; } @keyframes r-block-3 { 0%, 34.4% { opacity: 0; } 34.6%, 82.2% { opacity: 1; } 82.4%, 100% { opacity: 0; } }
.r-source-4 { animation-name: r-source-4; } @keyframes r-source-4 { 0%, 45.6% { opacity: 0; } 46%, 59.6% { opacity: 1; } 60%, 100% { opacity: 0; } }
.r-refresh-4 { animation-name: r-refresh-4; } @keyframes r-refresh-4 { 0%, 47% { opacity: 0; } 47.4%, 48.2% { opacity: .9; } 48.6%, 100% { opacity: 0; } }
.r-block-4 { animation-name: r-block-4; } @keyframes r-block-4 { 0%, 48.4% { opacity: 0; } 48.6%, 82.2% { opacity: 1; } 82.4%, 100% { opacity: 0; } }
.r-source-5 { animation-name: r-source-5; } @keyframes r-source-5 { 0%, 59.6% { opacity: 0; } 60%, 73.6% { opacity: 1; } 74%, 100% { opacity: 0; } }
.r-refresh-5 { animation-name: r-refresh-5; } @keyframes r-refresh-5 { 0%, 61% { opacity: 0; } 61.4%, 62.2% { opacity: .9; } 62.6%, 100% { opacity: 0; } }
.r-block-5 { animation-name: r-block-5; } @keyframes r-block-5 { 0%, 62.4% { opacity: 0; } 62.6%, 82.2% { opacity: 1; } 82.4%, 100% { opacity: 0; } }
.r-zones { animation-name: r-zones; }
@keyframes r-zones { 0%, 78.5% { opacity: 0; } 79%, 82.2% { opacity: 1; } 82.4%, 100% { opacity: 0; } }
.r-tap { animation-name: r-tap; }
@keyframes r-tap { 0%, 79.5% { opacity: 0; transform: scale(.3); } 80.5% { opacity: 1; transform: scale(.5); } 83.5%, 100% { opacity: 0; transform: scale(1.7); } }
.r-flash { animation-name: r-flash; }
@keyframes r-flash { 0%, 82% { opacity: 0; } 82.3%, 83.6% { opacity: .92; } 84%, 96.6% { opacity: 0; } 97%, 98.4% { opacity: .92; } 98.8%, 100% { opacity: 0; } }
.r-page-next { animation-name: r-page-next; }
@keyframes r-page-next { 0%, 83.6% { opacity: 0; } 84%, 97% { opacity: 1; } 97.2%, 100% { opacity: 0; } }

/* Calm, 6 s: the lock closes, the oldest item expires, pages still turn offline. */
.calm .a-anim { animation-duration: 6s; animation-delay: -1.5s; }
.c-shackle { animation-name: c-shackle; animation-timing-function: ease-out; }
@keyframes c-shackle { 0%, 8% { transform: translateY(-9px); } 16%, 92% { transform: none; } 100% { transform: translateY(-9px); } }
.c-belt { animation-name: c-belt; animation-timing-function: ease-in-out; }
@keyframes c-belt { 0%, 62% { transform: translateY(0); } 74%, 100% { transform: translateY(30px); } }
.c-arrive { animation-name: c-arrive; }
@keyframes c-arrive { 0%, 66% { opacity: 0; } 76%, 100% { opacity: 1; } }
.c-expire { animation-name: c-expire; }
@keyframes c-expire { 0%, 52% { opacity: 1; } 64%, 100% { opacity: 0; } }
.c-hand { animation: c-hand 6s linear infinite; transform-origin: 236px 147px; }
@keyframes c-hand { to { transform: rotate(360deg); } }
.c-offline { stroke-dasharray: 60; animation-name: c-offline; }
@keyframes c-offline { 0%, 12% { stroke-dashoffset: 60; } 22%, 90% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 60; } }
.c-page { animation-name: c-page; }
@keyframes c-page { 0%, 54% { opacity: 1; } 54.6%, 100% { opacity: 0; } }
.c-page-next { animation-name: c-page-next; }
@keyframes c-page-next { 0%, 55.6% { opacity: 0; } 56.2%, 100% { opacity: 1; } }
.c-flash { animation-name: c-flash; }
@keyframes c-flash { 0%, 54% { opacity: 0; } 54.4%, 55.8% { opacity: .92; } 56.2%, 100% { opacity: 0; } }
.c-tap { animation-name: c-tap; }
@keyframes c-tap { 0%, 48% { opacity: 0; transform: scale(.3); } 49% { opacity: 1; transform: scale(.5); } 53%, 100% { opacity: 0; transform: scale(1.7); } }

/* Start, 9 s: type the address on the tablet, open the welcome article. */
.art-start .a-anim { animation-duration: 9s; animation-delay: -7.4s; }
.s-browser { animation-name: s-browser; }
@keyframes s-browser { 0%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
.s-type { animation-name: s-type; animation-timing-function: steps(20); }
@keyframes s-type { 0%, 5% { transform: translateX(0); } 30%, 100% { transform: translateX(124px); } }
.s-library { animation-name: s-library; }
@keyframes s-library { 0%, 37.6% { opacity: 0; } 38%, 62% { opacity: 1; } 62.4%, 100% { opacity: 0; } }
.s-article { animation-name: s-article; }
@keyframes s-article { 0%, 63.6% { opacity: 0; } 64%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
.s-flash { animation-name: s-flash; }
@keyframes s-flash { 0%, 35.6% { opacity: 0; } 36%, 37.4% { opacity: .92; } 37.8%, 61.8% { opacity: 0; } 62.2%, 63.4% { opacity: .92; } 63.8%, 100% { opacity: 0; } }
.s-tap { animation-name: s-tap; }
@keyframes s-tap { 0%, 55% { opacity: 0; transform: scale(.3); } 56% { opacity: 1; transform: scale(.5); } 60%, 100% { opacity: 0; transform: scale(1.7); } }

/* Long-form pages */
/* Tab pages */
.page { padding: 56px 0 72px; }
.page h1 { font-size: 32px; line-height: 1.2; margin: 0 0 32px; }
.downloads { display: grid; gap: 0; max-width: 820px; }
.download { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 24px 0; border-top: 1px solid var(--pa-border); }
.download > div { min-width: 0; }
.download > .mark, .download > .marks { justify-self: center; margin-top: -4px; }
.download .mark { width: 44px; height: 44px; border-radius: 11px; }
.download .marks .mark + .mark { margin-left: -12px; }
.download .mark .icon { width: 24px; height: 24px; }
.download h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; font-size: 20px; font-weight: 600; }
.download p { max-width: 46em; margin: 0; font-size: 17px; font-weight: 400; }
.download .note { margin-top: 4px; font-size: 14px; }
.download .text-link { min-height: 0; }
.download .qr { display: block; width: 132px; height: 132px; margin: 12px 0 4px; }
.download code { font-size: .9em; padding: 1px 6px; border-radius: 3px; background: var(--pa-tint); }
.page .pricing { margin-top: 0; }
.page .pricing table { max-width: 560px; }
.check { color: var(--pa-primary); font-weight: 600; }
.pricing .price th, .pricing .price td { font-weight: 600; color: var(--pa-text); }
.page .actions { margin-top: 32px; }
.prose { max-width: 62ch; padding: 56px 0 72px; }
.prose h1 { font-size: 32px; line-height: 1.2; margin: 0 0 24px; }
.prose h2 { margin: 36px 0 10px; font-size: 20px; font-weight: 600; }
.prose p { margin: 0 0 16px; font-size: 17px; font-weight: 400; line-height: 1.7; }
.prose a { color: var(--pa-primary); }
.prose a:hover { color: var(--pa-primary-strong); }
.prose :not(pre) > code { overflow-wrap: anywhere; }

@media (max-width: 1023px) {
  .shell { padding: 0 32px; }
  .flow-group { display: flex; flex-direction: column; align-items: center; }
  .flow-diagram { display: contents; }
  .wires { display: none; }
  .client-picker { order: 1; }
  .client-pending { order: 7; width: 100%; margin-top: 20px; }
  .flow-step { order: 3; }
  .hub { order: 4; }
  .hub ~ .flow-step { order: 5; }
  .eink { order: 6; }
  .client-picker { position: static; width: 100%; height: auto; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .hub, .eink { position: static; }
  .hub { width: min(100%, 280px); height: auto; padding: 16px 24px; }
  .eink { width: min(100%, 300px); height: auto; }
  .eink-device { aspect-ratio: 3 / 4; }
  .flow-step { position: relative; display: block; width: 2px; height: 48px; background: var(--pa-control-quiet); overflow: hidden; }
  .flow-step::after { content: ""; position: absolute; left: -2px; top: -6px; width: 6px; height: 6px; border-radius: 50%; background: var(--pa-primary); animation: drop 1.6s linear infinite; }
  /* Keep the selected block's note in view while the stacked diagram scrolls. */
  .details { position: sticky; bottom: 0; z-index: 1; min-height: 0; margin: 24px 0 0; padding: 16px 0 20px; background: var(--pa-bg); }
}
@media (max-width: 640px) {
  .shell { padding: 0 24px; }
  .site-header { flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; }
  /* Logo only on phones, as in the Reader, so the header actions share its row. */
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand-mark { width: 40px; height: 40px; }
  nav { gap: 20px; }
  .tabs { order: 3; width: 100%; justify-content: space-between; }
  .header-actions { gap: 12px; }
  .page { padding: 32px 0 56px; }
  .page h1 { margin-bottom: 20px; }
  .download { grid-template-columns: 40px 1fr; gap: 12px; padding: 20px 0; }
  .download .mark { width: 40px; height: 40px; border-radius: 10px; }
  .download .mark .icon { width: 22px; height: 22px; }
  .download .marks { position: relative; width: 40px; height: 40px; }
  .download .marks .mark { position: absolute; width: 26px; height: 26px; border-radius: 7px; }
  .download .marks .mark:first-child { top: 0; left: 0; }
  .download .marks .mark + .mark { right: 0; bottom: 0; margin: 0; box-shadow: 0 0 0 2px var(--pa-bg); }
  .download .marks .icon { width: 15px; height: 15px; }
  .download h2 { font-size: 18px; }
  .download p { font-size: 16px; }
  .intro { padding: 32px 0 16px; }
  .client-picker { grid-template-columns: 1fr 1fr; gap: 8px; }
  .client { gap: 8px; padding: 6px 10px; }
  .client .mark { width: 28px; height: 28px; border-radius: 7px; }
  .client .icon { width: 16px; height: 16px; }
  .client .marks { width: 28px; height: 28px; }
  .client .marks .mark { width: 17px; height: 17px; }
  .client .marks .icon { width: 10px; height: 10px; }
  .client-name { font-size: 14px; white-space: normal; }
  .flow-step { height: 32px; }
  .hub { grid-template-columns: auto auto; column-gap: 12px; align-items: center; padding: 10px 20px; }
  .hub .icon { grid-row: span 2; }
  .hub-name, .hub-detail { justify-self: start; }
  .eink { width: min(100%, 220px); }
  .band { padding: 40px 0; }
  .trio { grid-template-columns: 1fr; gap: 28px; }
  .trio .art { max-width: 260px; }
  .start { grid-template-columns: 1fr; }
  .steps li { font-size: 18px; }
  .eink-device { padding: 10px 10px 26px; border-radius: 14px; }
  .detail h2 { font-size: 18px; }
  .detail p { font-size: 16px; }
  .prose { padding-top: 40px; }
  .pricing th, .pricing td { padding-right: 10px; font-size: 15px; }
  .pricing thead th { white-space: normal; }
  .pricing thead .badge { margin: 4px 0 0; padding: 0 8px; white-space: nowrap; font-size: 12px; }
}
@media (max-width: 359px) {
  .client-picker { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse, .flow-step::after, .eink-refresh { display: none; }
  .hub .icon, .node, .detail { animation: none; }
  /* Illustrations hold one representative frame, set by each band's negative delay. */
  .art, .art * { animation-play-state: paused !important; }
  * { transition: none !important; }
}

.install-command { max-width: 100%; overflow-x: auto; padding: 10px 12px; margin: 8px 0; background: var(--pa-tint); border-radius: 4px; font-size: 13px; }
.install-command code { padding: 0; background: none; }
.install-command.prompt { white-space: pre-wrap; user-select: all; }