/* EarthOnline's homepage (/home, src/views/landing.js, 10-05). Linked by that page alone. Built on ui.css's tokens and
   controls and style.css's picture (.pane, .crowd, .confetti, .pane-pause), which are not changed here.
   Proportions after Notion's homepage, measured 10-05 at 1100px and 375px wide: a centred title (Notion 96px / 42px
   on a phone; ours 72px / 40px, a step smaller), a 20px sentence (16px on a phone), the main button (280px wide on a
   phone, as Notion's), then the picture at the column's width. One thing moves: the picture. */
.landing {
  --t-landing-title: 72px; --lh-landing-title: 76px;
  --t-landing-lede: 20px; --lh-landing-lede: 28px;
  --t-landing-section: 36px; --lh-landing-section: 40px;
  padding-bottom: 24px;
}

/* ---- the hero: title, one sentence, the button ---- */
.landing-hero { display: flex; flex-direction: column; align-items: center; padding-top: 72px; text-align: center; }
.landing-hero h1 { margin: 0; max-width: 900px; font-size: var(--t-landing-title); line-height: var(--lh-landing-title); letter-spacing: -.04em; text-wrap: balance; }
/* Chinese is set without the tightening, as Notion's Chinese pages are, and breaks at its punctuation where it can */
.landing-hero h1:lang(zh) { letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere; }
.landing-lede { margin: 16px 0 0; max-width: 760px; color: var(--muted); font-size: var(--t-landing-lede); line-height: var(--lh-landing-lede); text-wrap: balance; }
.landing-lede:lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
.landing-cta { margin: 28px 0 0; }
/* the line under the button (10-06): one grey line, then the agents by their makers' marks in their makers' colours
   (Claude's orange; OpenAI's white; OpenRouter's the text colour) and names in the text's white; OpenRouter's has a small grey line
   under its name. Not links. */
.landing-runs { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 40px 0 0; }
.landing-runs-line { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-wrap: balance; }
.landing-marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.landing-mark { display: flex; align-items: center; gap: 8px; color: var(--fg); font-size: var(--text-base); line-height: var(--lh-base); font-weight: 500; white-space: nowrap; }
.landing-mark-icon { display: flex; flex: none; }
.landing-mark svg { display: block; width: 20px; height: 20px; }
.landing-mark-claude .landing-mark-icon { color: #D97757; }
.landing-mark-name { display: flex; flex-direction: column; }
.landing-mark-sub { color: var(--muted); font-size: var(--text-xs, 12px); line-height: 1.2; font-weight: 400; }

/* ---- the picture (10-06): the screening as it happens, on the login page's floor at the column's width. The product's
   own parts at their real size, laid out as Intercom's homepage picture (intercom.com, measured 10-06 at 1440: the
   window 57px down and running off the frame's bottom; a second panel at its right, 62px lower; its tabs at the top
   left). Here: the switch at the top left; the window (the inbox's list and one conversation) from 64px down, off the
   bottom; the card the agent sends its owner at the right, 62px lower, in front, over the window's edge, where the
   conversation keeps clear of it. Phones show the switch and the card. ---- */
.landing-stage { margin-top: 64px; }
.landing-stage .pane { height: 680px; --cs-foot: 112px; }
.landing-shot { position: absolute; inset: 0; z-index: 1; }
.landing-set { position: absolute; inset: 0; }
.landing-window { position: absolute; left: 24px; top: 32px; bottom: 8px; display: flex; width: 560px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--bg); }
.landing-list { flex: none; display: flex; width: 236px; border-right: 1px solid var(--line); }
.landing-list .ib-side { width: 100%; border-right: 0; overflow: hidden; }
.landing-list .ib-side::after { display: none; }
.landing-list .ib-head { min-height: 56px; padding: 0 16px; }
.landing-list .ib-head h2 { margin: 0; font-size: var(--t-l); line-height: 1.19048; }
/* the demo's own title is .ib-head's: the list's scrolling "Inbox N" and the pill it turns into (shown on every width in the
   real inbox since decisions-1009, inbox.css .ib-title) stay out of it, so the demo says Inbox once */
.landing-list .ib-title, .landing-list .ib-scroll > .panel-pill-at { display: none; }
.landing-list .ib-list { padding: 0 8px; }
.landing-list .ib-scroll { overflow: hidden; }
.landing-thread { flex: 1 1 auto; min-width: 0; display: flex; }
.landing-thread .ib-pane { flex: 1 1 auto; }
/* the middle of the interview: the list says who it is; the box to type in is below the frame */
.landing-thread :is(.th-back, .th-pill, .th-who, .th-dock) { display: none; }
.landing-thread .th-scroll { flex-direction: column; overflow: hidden; scrollbar-gutter: auto; }
/* the messages keep clear of the card over the window's right edge */
.landing-thread .th-body { padding: 24px 52px 20px 16px; }
/* the card: one of the site's panels (1px line, 12px corners, no shadow, the page's ground), as wide as the count's
   line needs to stay one line (334px of text at 14px, measured 10-06); the paragraph in the text's colour, the count in
   grey, then the site's two buttons at the right, the primary last */
.landing-card { position: absolute; right: 24px; top: 94px; width: 376px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--bg); color: var(--fg); }
.landing-card p { margin: 0; }
.landing-card-text { font-size: var(--text-base); line-height: var(--lh-base); text-wrap: pretty; }
.landing-card .landing-card-since { margin-top: 12px; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.landing-card .landing-card-since:lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
.landing-card .landing-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---- the carousel (10-09, Bonan: "首页这个图，是轮窗，多搞几个"; then, from the key frames: no tabs over it, a sentence
   under each scene, "下面这个位置可以做一句话的解释嘛", and dots under that). Four slides side by side in the frame, moved
   by transform alone (public/app.js), each the scene above its sentence; the dots stay. The floor's own fade to black at
   its foot (style.css .pane-art) is the sentence's ground. Slides are dragged sideways; up and down stays the page's. */
.cs-frame { overflow: hidden; touch-action: pan-y; overscroll-behavior-x: contain; }
/* no text is selected while the slides are dragged (public/app.js); at rest the picture is like the rest of the page, so a press on it
   clears a selection (10-11, Bonan: "选中文字点击其他地方无法取消": with user-select: none here, Chrome left the selection alone) */
.cs-frame.cs-dragging { user-select: none; -webkit-user-select: none; }
.cs-slide { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) { .cs-slide { transition: none; } }
.cs-scene { position: absolute; left: 0; right: 0; top: 0; bottom: var(--cs-foot); }
/* the title: the page's section titles' (.landing-compare h2: its size, line and tracking, h2's weight), centred, the
   floor's white; under it the dots */
.cs-line { position: absolute; left: 24px; right: 24px; bottom: 48px; margin: 0; color: #f5f5f7; font-size: var(--t-landing-section); line-height: var(--lh-landing-section); font-weight: 600; letter-spacing: var(--tracking-tight); text-align: center; text-wrap: balance; }
.cs-line:lang(zh) { letter-spacing: 0; word-break: keep-all; }
/* the dots: 8px, the one shown white, the others dim; each a 24px place to press (taste: the hit area grows, not the dot) */
.cs-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1; display: flex; justify-content: center; gap: 0; }
.cs-dot { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cs-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .3); }
.cs-dot:hover::before { background: rgb(255 255 255 / .55); }
.cs-dot[aria-current]::before { background: #f5f5f7; }
.cs-dot:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
/* out of sight (public/app.js .cs-off: the picture scrolled away, the tab hidden), nothing in the picture moves. The floor and the confetti (.pane-art) hold where they are; the scenes' own blinking and typing dots (the ones in the slides) are off, not held: a paused animation in a slide kept Chrome recalculating styles over the whole page 60 times a second, with nobody there. The old rules held every element of the picture and of the slides (`.cs-off *`, `.cs-slide[aria-hidden] *`). */
/* (home-perf-max, 10-11) the floor's hold is the art's own class, .art-off (public/app.js sets it with .cs-off): a universal rule
   under .cs-off made Chrome restyle every element of the slides (about 1,100) each time the picture came into or went out of view,
   13 to 25 ms a time while scrolling */
.art-off *, .art-off *::before, .art-off *::after { animation-play-state: paused !important; }
.cs-off .cs-slide .eol-robot-eyes, .cs-off .cs-slide .th-typing-bubble i { animation: none; }
/* a slide not shown does not play: only the scene in view blinks and types */
.cs-slide[aria-hidden="true"] .eol-robot-eyes, .cs-slide[aria-hidden="true"] .th-typing-bubble i { animation: none; }
/* a scene put at a step at once (public/app.js putAt): no fade on the way */
.cs-instant :is([data-k], [data-to]) { transition: none !important; }
/* under the sentence and the dots, the floor goes darker still: a still shade, painted once, nothing blurred */
.cs-frame::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--cs-foot) + 32px); background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .72) 45%); pointer-events: none; }
/* the conversations are pictures: no scroll bar, message menu or empty note of their own */
.cs-frame :is(.ovl-bar, .th-msg-menu, .th-dock-note:empty) { display: none; }
/* the agent typing in its reply's place (landing.js replyTyping): the bubble over the item's top, the words after it */
.cs-reply { position: relative; }
.cs-typing { position: absolute; left: 0; top: 0; }
/* (the reply's own parts, named: a :not() here made each step restyle the whole scene, home-perf-max 10-11) */
.cs-embed[data-step="4"] .cs-reply > :is(.th-row, .th-post-foot), .cs-scan[data-step="3"] .cs-reply > :is(.th-row, .th-post-foot) { opacity: 0; }
/* scene 1 plays its two sets of people in turn */
.cs-screen:not([data-set="founder"]) .landing-set-founder, .cs-screen[data-set="founder"] .landing-set-investor { display: none; }

/* the steps: a part waits for its step (data-k) or leaves after one (data-to), by opacity and a short rise alone, in
   place, so nothing around it moves (CLS 0); with less motion asked for, at once */
/* shown, a part keeps a transform of nothing rather than none: a change between none and a transform is a change of
   layout (a new containing block), one between two transforms is not */
.cs-scene [data-k], .cs-scene [data-to] { transform: translateY(0); transition: opacity .32s ease-out, transform .32s ease-out; }
@media (prefers-reduced-motion: reduce) { .cs-scene [data-k], .cs-scene [data-to] { transition: none; } }
.cs-scene[data-step="1"] [data-k]:not([data-k="1"]),
.cs-scene[data-step="2"] :is([data-k="3"], [data-k="4"], [data-k="5"], [data-k="6"]),
.cs-scene[data-step="3"] :is([data-k="4"], [data-k="5"], [data-k="6"]),
.cs-scene[data-step="4"] :is([data-k="5"], [data-k="6"]),
.cs-scene[data-step="5"] [data-k="6"],
.cs-scene:not([data-step="1"]) [data-to="1"],
.cs-scene:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) [data-to="2"],
.cs-scene:is([data-step="4"], [data-step="5"], [data-step="6"]) [data-to="3"],
.cs-scene:is([data-step="5"], [data-step="6"]) [data-to="4"] { opacity: 0; transform: translateY(8px); }
/* a part its step hides: its blinks and typing dots are off, as a hidden slide's (home-perf-max, 10-11: Chrome does not hand
   an animation it cannot see to the compositor, so these ran on the main thread every frame, unseen) */
.cs-scene[data-step="1"] [data-k]:not([data-k="1"]) .eol-robot-eyes, .cs-scene[data-step="1"] [data-k]:not([data-k="1"]) .th-typing-bubble i,
.cs-scene[data-step="2"] :is([data-k="3"], [data-k="4"], [data-k="5"], [data-k="6"]) .eol-robot-eyes, .cs-scene[data-step="2"] :is([data-k="3"], [data-k="4"], [data-k="5"], [data-k="6"]) .th-typing-bubble i,
.cs-scene[data-step="3"] :is([data-k="4"], [data-k="5"], [data-k="6"]) .eol-robot-eyes, .cs-scene[data-step="3"] :is([data-k="4"], [data-k="5"], [data-k="6"]) .th-typing-bubble i,
.cs-scene[data-step="4"] :is([data-k="5"], [data-k="6"]) .eol-robot-eyes, .cs-scene[data-step="4"] :is([data-k="5"], [data-k="6"]) .th-typing-bubble i,
.cs-scene[data-step="5"] [data-k="6"] .eol-robot-eyes, .cs-scene[data-step="5"] [data-k="6"] .th-typing-bubble i,
.cs-scene:not([data-step="1"]) [data-to="1"] .eol-robot-eyes, .cs-scene:not([data-step="1"]) [data-to="1"] .th-typing-bubble i,
.cs-scene:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) [data-to="2"] .eol-robot-eyes, .cs-scene:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) [data-to="2"] .th-typing-bubble i,
.cs-scene:is([data-step="4"], [data-step="5"], [data-step="6"]) [data-to="3"] .eol-robot-eyes, .cs-scene:is([data-step="4"], [data-step="5"], [data-step="6"]) [data-to="3"] .th-typing-bubble i,
.cs-scene:is([data-step="5"], [data-step="6"]) [data-to="4"] .eol-robot-eyes, .cs-scene:is([data-step="5"], [data-step="6"]) [data-to="4"] .th-typing-bubble i { animation: none; }

/* ---- scene 2, On any website: someone's own plain site (white, as most are), their agent in its corner ---- */
.cs-site { position: absolute; inset: 24px 24px 8px; overflow: hidden; border-radius: var(--radius-box); background: #fff; color: #18181b; color-scheme: light; }
.cs-example { position: absolute; z-index: 3; bottom: 14px; left: 32px; margin: 0; padding: 2px 8px; border-radius: 999px; background: #f4f4f5; color: #52525b; font-size: 12px; line-height: 16px; }
.cs-site-head { display: flex; align-items: center; gap: 28px; padding: 22px 32px; font-size: 15px; line-height: 20px; color: #52525b; }
.cs-site-head b { margin-right: auto; color: #18181b; font-weight: 600; }
.cs-site-title { max-width: 520px; margin: 36px 32px 0; font: 600 40px/46px var(--font); letter-spacing: -.02em; color: #18181b; }
.cs-site-work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 32px 0; padding: 0; list-style: none; }
.cs-site-work li { display: grid; gap: 2px; font-size: 14px; line-height: 20px; color: #71717a; }
.cs-site-work b { margin-top: 8px; color: #18181b; font-weight: 600; }
.cs-tile { display: block; aspect-ratio: 4 / 3; border-radius: 8px; }
.cs-tile-a { background: #e8e2d6; } .cs-tile-b { background: #d9e4ea; } .cs-tile-c { background: #dfe8d8; } .cs-tile-d { background: #eadbe0; }
/* the pet in the corner (embed.js .pet: 84 x 74, the page's ink: a light page's) and its hello (embed.js .greet) */
.cs-pet { position: absolute; right: 20px; bottom: 20px; width: 84px; height: 74px; color: #191918; }
.cs-pet svg, .cs-peek svg { display: block; width: 84px; height: 74px; overflow: visible; }
.cs-greet { position: absolute; right: 20px; bottom: 104px; margin: 0; padding: 6px 10px; border-radius: 6px; background: #18181b; color: #fafafa; font: 500 14px/20px var(--font); white-space: nowrap; }
.cs-greet i { position: absolute; right: 36px; bottom: -4px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
/* the panel (embed.js .panel), in the dark the owner picked, where the pet was; the robot over its top edge, cut at the
   rim (embed.js .peek-clip) */
.cs-panel { position: absolute; right: 20px; bottom: 20px; width: 380px; height: 432px; border: 1px solid #424245; border-radius: 12px; background: var(--bg); color-scheme: dark; }
.cs-scene .cs-panel[data-k] { transform-origin: 100% 100%; }
.cs-embed[data-step="1"] .cs-panel, .cs-embed[data-step="2"] .cs-panel { transform: translateY(24px); }
.cs-peek { position: absolute; right: 36px; top: -46px; width: 84px; height: 46px; overflow: hidden; color: #191918; }
/* its close where the frame has it (embed.css html.in-frame .embed-close) */
.cs-panel .embed-close { display: grid; place-items: center; left: auto; right: 12px; width: 36px; padding: 0; border: 0; color: var(--fg); }
.cs-panel-in { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: 11px; }
.cs-panel-in > .ib-pane { flex: 1 1 auto; min-width: 0; }
.cs-panel .th-scroll, .cs-phone .th-scroll { overflow: hidden; scrollbar-gutter: auto; }

/* ---- scene 3, No website needed: two people's own AIs in their terminals, side by side (stacked on a phone): Sam's
   Claude Code and Alice's Codex, each as its own screen looks, over each who it is (its maker's mark and name) ---- */
.cs-terms { position: absolute; inset: 24px 24px 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cs-term { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-box); background: #0a0a0a; color: #e4e4e7; font: 400 13px/20px ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; }
.cs-term p { margin: 0; font-weight: 400; }
.cs-term-who { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; font: 500 var(--text-sm)/20px var(--font) !important; color: #a1a1aa; }
.cs-term-who b { color: #fafafa; font-weight: 600; }
.cs-term-mark { display: flex; flex: none; }
.cs-term-mark svg { display: block; width: 18px; height: 18px; }
.cs-term-mark.landing-mark-claude { color: #D97757; }
.cs-term-mark.landing-mark-openai { color: #fafafa; }
.cs-term-slot { display: grid; }
.cs-term-slot > * { grid-area: 1 / 1; }
.cs-term-you { color: #a1a1aa; }
.cs-term-dot, .cs-term-tool > p, .cs-term-spin, .cs-term-work { display: flex; gap: 10px; }
.cs-term i { flex: none; font-style: normal; }
.cs-term i.ok { color: #4eba65; }
.cs-term b { font-weight: 700; color: #fafafa; }
.cs-term-out { display: flex; gap: 10px; margin-top: 2px !important; padding-left: 20px; color: #a1a1aa; }
.cs-term-spin { color: #d97757; }
.cs-term-work { color: #a1a1aa; }
.cs-term em { font-style: normal; color: #71717a; }
.cs-term-box { position: relative; display: flex; gap: 10px; margin-top: auto; padding: 8px 12px; border: 1px solid #52525b; border-radius: 8px; color: #fafafa; }
.cs-term-codex .cs-term-box { border-color: transparent; background: #18181b; }
.cs-term-caret { flex: none; color: #a1a1aa; }
.cs-term-hint { color: #71717a; }

/* ---- scene 4, Scan to talk: someone's card (the Card dialog's, .sx-card), then what a phone opens from its code ---- */
.cs-card { position: absolute; left: 48px; top: 120px; width: 460px; }
.cs-card .home-card-qr svg { display: block; width: 160px; height: 160px; }
.cs-card .card-qr-narrow svg { width: 200px; height: 200px; }
.cs-phone { position: absolute; right: 48px; top: 24px; bottom: 8px; width: 360px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--bg); }
.cs-phone-in { position: absolute; inset: 0; display: flex; }
.cs-phone-in > .ib-pane { flex: 1 1 auto; min-width: 0; }

/* ---- why not the usual ways: one row each, what it is on the left, what it lacks on the right; EarthOnline last, its
   words the one white line. Rows are kept apart by a hairline, as a table's are; no line under the heading. ---- */
.landing-compare { margin-top: 120px; }
.landing-compare h2 { margin: 0 0 24px; font-size: var(--t-landing-section); line-height: var(--lh-landing-section); letter-spacing: var(--tracking-tight); }
.landing-ways { margin: 0; }
.landing-way { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; gap: 24px; padding: 20px 0; }
.landing-way + .landing-way { border-top: 1px solid var(--line); }
.landing-way dt { margin: 0; font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; }
.landing-way dd { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--lh-lg); text-wrap: pretty; }
/* the names people know it by, after the way: as large as it, grey and regular (taste: a count after a title) */
.landing-names { color: var(--muted); font-weight: 400; }
.landing-ours dt { display: flex; align-items: center; gap: 8px; }
.landing-ours dt .logo { flex: none; }
.landing-ours dd { color: var(--fg); }

/* ---- Connect your agent (10-14, devil-connectblock; views/landing.js connectBlock): developer tools' install command (Bun, Deno,
   Astro, looked at 10-14 at 1440 and 390): a title, then the site's underline tabs (rail.css .prof-tab: the chosen one bold in the
   text's colour with a 3px bar under its words, the others grey; colour only under the pointer, as a label's), one line under the
   row; the command in a box of the site's raised ground (the copy box's, .prompt) in the monospace face, after a grey $ that is not
   copied, Copy at its right (36px, the box 6px round it, the command's line on the button's middle); the command one line always,
   as Bun's, sliding sideways when longer than its box; the next step in one grey sentence under it, its commands the site's inline
   code (as on the Docs page); last, "Or ask your agent:" and the Get started prompt, small and grey, a quiet Copy (ghost) at its
   right. The block is as wide as the command needs on a wide screen (Consolas at 14px). Under the picture (1014d), where the old
   "Or copy this to your agent" block stood. ---- */
.connect { width: 100%; max-width: 840px; margin: 64px auto 0; text-align: left; }
.connect-title { margin: 0 0 8px; font: var(--level-title); letter-spacing: var(--tracking-tight); text-align: center; }
.cmd-tabs { display: flex; gap: 24px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.cmd-tabs > label { position: relative; padding: 12px 0; color: var(--muted); font: 600 var(--fs-body)/var(--lh-base) var(--font); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cmd-tabs > label:hover { color: var(--fg); }
#cmd-claude:checked ~ .cmd-tabs > [for="cmd-claude"], #cmd-codex:checked ~ .cmd-tabs > [for="cmd-codex"] { color: var(--fg); font-weight: 700; }
#cmd-claude:checked ~ .cmd-tabs > [for="cmd-claude"]::after, #cmd-codex:checked ~ .cmd-tabs > [for="cmd-codex"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--fg); }
#cmd-claude:focus-visible ~ .cmd-tabs > [for="cmd-claude"], #cmd-codex:focus-visible ~ .cmd-tabs > [for="cmd-codex"] { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
#cmd-claude:checked ~ [data-cmd="codex"], #cmd-codex:checked ~ [data-cmd="claude"] { display: none; }
.cmd-box { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: var(--radius-box); background: var(--bg2); }
.cmd-sign, .cmd-box > code { padding: 8px 0; font: 400 var(--text-sm)/var(--lh-sm) var(--mono); }
.cmd-sign { flex: none; color: var(--subtle); user-select: none; -webkit-user-select: none; }
.cmd-box > code { flex: 1 1 auto; min-width: 0; border-radius: 0; background: none; color: var(--fg); white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.cmd-box > code::-webkit-scrollbar { display: none; }
/* a command longer than its box (a phone; a wide font) slides sideways inside it, no bar shown, its cut end fading out while there is more
   (taste: a row that slides sideways shows no bar and fades at the side with more); a command that fits has no fade */
@supports (animation-timeline: scroll()) {
  .cmd-box > code { animation: cmd-more linear both; animation-timeline: scroll(self inline); }
  @keyframes cmd-more { from { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); } 99% { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); } to { mask-image: none; } }
}
.cmd-box > .btn { flex: none; }
.cmd-then { margin: 12px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-wrap: pretty; }
.cmd-then:lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
.cmd-then code { white-space: nowrap; } /* a command is never cut across two lines */
.cmd-ask { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 0; }
.cmd-ask > p { flex: 1 1 auto; min-width: 0; margin: 0; padding: 8px 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; text-wrap: pretty; }
.cmd-ask-label { font-weight: 500; }
.cmd-ask > .btn { flex: none; }

/* About, Privacy, Terms: the login page's one grey line, at the foot */
.landing-links { margin-top: 96px; padding: 0; }
.landing-agent-start { max-width: 880px; margin: 16px auto 0; padding: 0 16px; font-size: 12px; line-height: 1.5; opacity: .6; }
.landing-agent-start p { margin: 0 0 2px; }
.landing-agent-start ol { margin: 0; padding-left: 18px; }
.landing-agent-start code { font-size: 11px; overflow-wrap: anywhere; }
.landing-agents { margin: 96px 0 0; text-align: center; font-size: 13px; opacity: .65; }
.landing-agents + .landing-links { margin-top: 12px; }

@media (max-width: 767px) {
  .landing { --t-landing-title: 40px; --lh-landing-title: 46px; --t-landing-lede: 16px; --lh-landing-lede: 24px; --t-landing-section: 28px; --lh-landing-section: 34px; }
  .landing-hero { padding-top: 48px; }
  .landing-hero h1 { letter-spacing: -.035em; }
  .landing-hero h1:lang(zh) { letter-spacing: 0; }
  .landing-cta .btn { width: 280px; max-width: 100%; }
  /* a phone: the marks alone (each keeps its name for screen readers and the tooltip), a little larger, the same gap */
  .landing-mark-name { display: none; }
  .landing-mark svg { width: 24px; height: 24px; }
  .landing-stage { margin-top: 48px; }
  .connect { margin-top: 48px; }
  .landing-stage .pane { height: auto; border-radius: 18px; }
  .landing-compare { margin-top: 80px; }
  .landing-way { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; }
  .landing-links { margin-top: 64px; }
}

/* the carousel on a phone: the same frame, 640px tall, each scene in one column above a foot of 124 for its sentence
   (two or three lines) and the dots */
@media (max-width: 767px) {
  .landing-stage .pane { height: 640px; --cs-foot: 124px; }
  .cs-line { left: 12px; right: 12px; bottom: 44px; }
  .cs-dots { bottom: 10px; }
  .landing-window { left: 12px; right: 12px; top: 12px; bottom: 4px; width: auto; }
  .landing-list { display: none; }
  .landing-thread .th-body { padding: 16px 12px; }
  .landing-card { left: 12px; right: 12px; top: auto; bottom: 4px; width: auto; }
  .cs-site { inset: 12px 12px 4px; }
  .cs-site-head { gap: 16px; padding: 16px; font-size: 14px; }
  .cs-site-head span:not(:last-child) { display: none; }
  .cs-site-title { margin: 20px 16px 0; font-size: 28px; line-height: 34px; }
  .cs-site-work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 16px 0; }
  .cs-panel { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; }
  .cs-panel-in { border-radius: 0; }
  .cs-peek { display: none; }
  .cs-terms { inset: 12px 12px 4px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .cs-term { padding: 10px 12px; gap: 6px; font-size: 11px; line-height: 16px; }
  .cs-term-who { padding-bottom: 0; }
  .cs-term-out { padding-left: 0; }
  .cs-term-box { padding: 4px 10px; }
  .cs-card { left: 12px; right: 12px; top: 12px; width: auto; }
  .cs-scan:not([data-step="1"]) .cs-card { opacity: 0; }
  .cs-phone { inset: 12px 12px 4px; width: auto; height: auto; }
}