/* The page's own styles, in a file rather than a <style> block so the site's policy can refuse
   every inline style (kb/plans/RELEASING.md §2.16).

   Layout: one vertical page in the app's own reading-pane idiom; the tour is one window, clicked through under a bar of its twenty-three steps. */
:root {
  --ground: #F5F6F8; --surface: #FFFFFF; --surface-2: #EEF0F4;
  --claude: #C2603A; --codex: #6A55D8; --opencode: #14897F;
  --ink: #191C22; --ink-soft: #5A6270; --ink-faint: #69717F;
  --rule: #D9DDE3; --rule-soft: #E7EAEF;
  --accent: #1F5673; --accent-soft: #E3EDF2; --accent-line: #9FC0D2; --on-accent: #FFFFFF;
  --flag: #8A5510; --flag-soft: #F6ECDD; --flag-line: #D8B683;
  --busy: #E97C3F; --busy-glow: rgba(233,124,63,.45);
  --chrome: #20242B; --chrome-2: #2A2F38; --chrome-ink: #C9CFD9;
  --header: color-mix(in oklab, #F5F6F8 82%, transparent);
  --shadow: 0 1px 2px rgba(25,28,34,.06), 0 8px 24px -12px rgba(25,28,34,.16);

  --serif: "Source Serif 4", Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --hdr: 64px;
  --idk-ui-accent: var(--accent); --idk-ui-accent-ink: var(--on-accent);
  --idk-dlg-font: var(--sans); --idk-dlg-head: var(--serif); --idk-dlg-radius: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #15181D; --surface: #1B1F25; --surface-2: #232830;
    --claude: #E58A62; --codex: #A898F0; --opencode: #4FD1C1;
    --ink: #E7EAEF; --ink-soft: #A0A8B5; --ink-faint: #8B93A1;
    --rule: #333A44; --rule-soft: #2A303A;
    --accent: #8FBEDA; --accent-soft: #1D2B36; --accent-line: #3C5A6E; --on-accent: #0E1A22;
    --flag: #D9AE6C; --flag-soft: #2E2519; --flag-line: #5E4A29;
    --busy: #F28A4C; --busy-glow: rgba(242,138,76,.5);
    --chrome: #101317; --chrome-2: #181C22; --chrome-ink: #B4BCC8;
    --header: color-mix(in oklab, #15181D 82%, transparent);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #15181D; --surface: #1B1F25; --surface-2: #232830;
  --claude: #E58A62; --codex: #A898F0; --opencode: #4FD1C1;
  --ink: #E7EAEF; --ink-soft: #A0A8B5; --ink-faint: #8B93A1;
  --rule: #333A44; --rule-soft: #2A303A;
  --accent: #8FBEDA; --accent-soft: #1D2B36; --accent-line: #3C5A6E; --on-accent: #0E1A22;
  --flag: #D9AE6C; --flag-soft: #2E2519; --flag-line: #5E4A29;
  --busy: #F28A4C; --busy-glow: rgba(242,138,76,.5);
  --chrome: #101317; --chrome-2: #181C22; --chrome-ink: #B4BCC8;
  --header: color-mix(in oklab, #15181D 82%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
  color-scheme: dark;
}
/* High contrast, from the accessibility panel (kit.js): the same tokens, white and yellow on black.
   A class on the root outranks both dark schemes above, so it wins whichever one is in force.
   What the tokens do not reach, the tour's drawn window, keeps its own colours. */
html.idk-contrast:root {
  --ground: #000; --surface: #000; --surface-2: #111;
  --ink: #fff; --ink-soft: #fff; --ink-faint: #f2f2f2;
  --rule: #fff; --rule-soft: #bbb;
  --accent: #ffe500; --accent-soft: #222; --accent-line: #ffe500; --on-accent: #000;
  --flag: #ffb000; --flag-soft: #1a1200; --flag-line: #ffb000;
  --header: #000; --shadow: none;
  color-scheme: dark;
}
html.idk-contrast a { color: var(--accent); }
/* The skip link is the one link drawn on the accent itself. */
html.idk-contrast .skip { color: var(--on-accent); }
:root:lang(ar) { --serif: "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Naskh Arabic", Tahoma, serif; --sans: "IBM Plex Sans", "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; }
:root:lang(hi) { --serif: "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", sans-serif; --sans: "IBM Plex Sans", "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", sans-serif; }
:root:lang(zh) { --serif: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; --sans: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
:root:lang(ja) { --serif: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; --sans: "IBM Plex Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; }
:root:lang(ko) { --serif: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --sans: "IBM Plex Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; word-break: keep-all; overflow-wrap: break-word; }
/* Tracking pulls Arabic's joined letters apart and Devanagari's marks off their letters. */
:root:is(:lang(ar), :lang(hi), :lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, h3, h4, p, a, button, span, li) { letter-spacing: 0; }
:root:is(:lang(ar), :lang(hi)) .hero h1 { line-height: 1.3; font-weight: 700; }
:root:is(:lang(zh), :lang(ja), :lang(ko)) .hero h1 { line-height: 1.2; font-weight: 700; }
/* Japanese breaks between any two characters unless told where its phrases are. */
:root:lang(ja) :is(h1, h2, h3, h4) { word-break: auto-phrase; }
:root:lang(he) {
  --serif: "Frank Ruhl Libre", "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans Hebrew", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, h4, p, ol, ul) { margin: 0; }
a { color: var(--accent); }
code { font-family: var(--mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 520px) { .wrap { padding-inline: 16px; } }
section[id] { scroll-margin-top: calc(var(--hdr) + 8px); }

.skip { position: fixed; z-index: 100; inset-inline-start: 16px; top: 10px; transform: translateY(-160%); background: var(--accent); color: var(--on-accent);
  padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { transform: none; }

/* scroll progress hairline */
.progress { position: fixed; z-index: 60; inset-inline: 0; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
html[dir="rtl"] .progress { transform-origin: 100% 50%; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--header); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--rule); }
.top .wrap { height: var(--hdr); display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; flex: none; }
.brand svg { width: 30px; height: 30px; border-radius: 7px; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: .93rem; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="true"] { color: var(--ink); }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The language button is drawn like the links beside it: the globe and the language's own name. */
.lang { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: .93rem; padding: 8px 12px; border-radius: 8px; color: var(--ink-soft); white-space: nowrap; }
.lang:hover, .lang[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
.lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang .idk-globe { width: 17px; height: 17px; flex: none; }
.lang .idk-ln-code { display: none; font-size: .85rem; letter-spacing: .04em; }
@media (max-width: 640px) {
  .brand span { display: none; }
  .nav .home-link { display: none; }
  .nav a { padding: 8px 9px; font-size: .9rem; }
  .top .lang { padding: 8px 9px; }
  .top .lang .idk-ln-name { display: none; }
  .top .lang .idk-ln-code { display: inline; }
  .top .wrap { gap: 10px; }
}

/* buttons */
.btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: 13px 20px; border-radius: 10px; line-height: 1.2; text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.quiet { color: var(--ink); border: 1px solid var(--rule); background: var(--surface); }
.btn.quiet:hover { border-color: var(--accent-line); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn .arr { display: inline-block; }
html[dir="rtl"] .btn .arr { transform: scaleX(-1); }

/* hero */
.hero { padding-block: clamp(48px, 9vw, 112px) clamp(40px, 7vw, 88px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.hero h1 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; max-width: 19ch; }
:root:lang(he) .hero h1 { letter-spacing: -.01em; line-height: 1.1; font-weight: 700; }
.hero h1 .a { color: var(--ink-soft); font-weight: 400; display: block; }
.hero h1 .b { display: block; }
.hero .sub { margin-top: 26px; max-width: 58ch; font-size: 1.12rem; line-height: 1.6; color: var(--ink-soft); }
.hero .ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.markbox { position: relative; width: clamp(150px, 20vw, 248px); aspect-ratio: 1; max-width: 100%; }
.markbox::after { content: ""; position: absolute; inset: 10% 8% -6%; z-index: -1; border-radius: 30%; background: var(--accent); opacity: .16; filter: blur(34px); }
.mark { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 30px rgba(25,28,34,.22)); }
.mark .arm, .mark .head { transform-box: view-box; }
.mark .arm.l { transform-origin: 42.2px 52.93px; }
.mark .arm.r { transform-origin: 57.8px 52.93px; }
.mark.go .arm.l { animation: shrug-l 1.5s cubic-bezier(.35,.0,.25,1) .45s 1 both; }
.mark.go .arm.r { animation: shrug-r 1.5s cubic-bezier(.35,.0,.25,1) .45s 1 both; }
.mark.go .head { animation: shrug-h 1.5s cubic-bezier(.35,.0,.25,1) .45s 1 both; }
@keyframes shrug-l { 0% { transform: none; } 28% { transform: translateY(-4.5px) rotate(11deg); } 58% { transform: translateY(-4.5px) rotate(11deg); } 82% { transform: translateY(.6px) rotate(-1.5deg); } 100% { transform: none; } }
@keyframes shrug-r { 0% { transform: none; } 28% { transform: translateY(-4.5px) rotate(-11deg); } 58% { transform: translateY(-4.5px) rotate(-11deg); } 82% { transform: translateY(.6px) rotate(1.5deg); } 100% { transform: none; } }
@keyframes shrug-h { 0% { transform: none; } 28% { transform: translateY(1.6px); } 58% { transform: translateY(1.6px); } 100% { transform: none; } }
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .markbox { order: -1; width: 96px; }
  .markbox::after { display: none; }
}

/* section heads */
.shead { display: grid; gap: 10px; margin-bottom: 30px; max-width: 64ch; }
.shead h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.shead p { color: var(--ink-soft); font-size: 1.05rem; }

/* how it works */
.how { padding-block: 96px 64px; background: linear-gradient(to bottom, var(--ground), var(--surface-2) 340px, var(--surface-2) calc(100% - 240px), var(--ground)); border-top: 1px solid var(--rule-soft); }
.tourhead { display: grid; gap: 6px; margin-bottom: 26px; max-width: 70ch; }
.tourhead .lead { font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; }
.tourhead .note { color: var(--flag); font-size: .95rem; }
.tourhead .note:empty { display: none; }

/* The four ideas idk is built on, each with an example drawn in the app's own look, and a way into
   the tour at the card about it. The drawings are of the app, which is English, so they stay English
   whatever the page's language, as the window does. */
.how .shead .harness { font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; color: var(--ink); }
/* The sentence above says idk wraps your agent, and this draws it: idk's frame around the agents it
   can run, with the dots the app's own agent menu names them by. It is no menu here, since nothing on
   it is pressed. The names are proper nouns, so a screen reader gets them as a real list in English
   in every language, and "Supported platforms" says them again further down. Names and dots only:
   those companies' logos need a licence (CLAUDE.md). */
.wraps { width: min(100%, 340px); margin: 0 0 40px; padding: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); }
.wraps-head { display: flex; align-items: center; gap: 9px; padding: 4px 6px 10px; font-weight: 600; color: var(--ink); }
.wraps-head svg { width: 24px; height: 24px; border-radius: 6px; }
.wraps ul { list-style: none; margin: 0; padding: 4px; background: var(--surface-2); border: 1px solid var(--rule-soft); border-radius: 9px; }
.wraps li { display: flex; align-items: center; gap: 11px; padding: 8px 10px; font-weight: 600; color: var(--ink); }
.wraps .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.wraps .dot.claude { background: var(--claude); }
.wraps .dot.codex { background: var(--codex); }
.wraps .dot.opencode { background: var(--opencode); }
.concepts { list-style: none; margin: 0 0 72px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .concepts { grid-template-columns: 1fr; } }
.concept { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 22px 22px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); min-width: 0; }
.concept h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.concept p { color: var(--ink-soft); }
.concept p i { color: var(--ink); font-style: italic; font-weight: 600; }
.concept .go { justify-self: start; display: inline-flex; gap: 6px; align-items: baseline; font-weight: 600; text-decoration: none; padding-block: 4px; }
.concept .go:hover { text-decoration: underline; text-underline-offset: 3px; }
:root[dir="rtl"] .concept .go .arr { transform: scaleX(-1); display: inline-block; }
.tourh { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; margin-bottom: 10px; }

/* The drawings: small pieces of the window, in its tokens and faces, so each looks like the part of
   the app it is an example of. */
.cx { --c-ground: #F5F6F8; --c-surface: #FFFFFF; --c-ink: #191C22; --c-soft: #5A6270; --c-faint: #858C99; --c-rule: #D9DDE3; --c-rule-soft: #E7EAEF;
  --c-accent: #1F5673; --c-accent-soft: #E3EDF2; --c-accent-line: #9FC0D2; --c-flag: #8A5510; --c-flag-soft: #F6ECDD; --c-flag-line: #D8B683;
  --c-warn: #973F31; --c-warn-soft: #F7E4E0; --c-ok: #3F7A5A; --c-ok-soft: #E3F0E8; --c-lit: #FFD98A; --c-lit-ink: #2A1E00; --c-flow: #EAF0F5;
  --c-chrome: #20242B; --c-chrome-2: #2A2F38; --c-chrome-ink: #C9CFD9; --c-chrome-faint: #7F8798;
  --c-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --c-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --c-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  margin: 4px 0 6px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  font-family: var(--c-sans); font-size: 11.5px; line-height: 1.4; color: var(--c-ink); direction: ltr; text-align: left; user-select: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cx { --c-ground: #15181D; --c-surface: #1B1F25; --c-ink: #E7EAEF; --c-soft: #A0A8B5; --c-faint: #767E8C;
  --c-rule: #333A44; --c-rule-soft: #2A303A; --c-accent: #8FBEDA; --c-accent-soft: #1D2B36; --c-accent-line: #3C5A6E; --c-flag: #D9AE6C; --c-flag-soft: #2E2519; --c-flag-line: #5E4A29;
  --c-warn: #E09384; --c-warn-soft: #33201C; --c-ok: #7FBE9B; --c-ok-soft: #1B2A22; --c-lit: #FFB340; --c-lit-ink: #1A1200; --c-flow: #11171E;
  --c-chrome: #101317; --c-chrome-2: #181C22; --c-chrome-ink: #B4BCC8; --c-chrome-faint: #6E7686; } }
:root[data-theme="dark"] .cx { --c-ground: #15181D; --c-surface: #1B1F25; --c-ink: #E7EAEF; --c-soft: #A0A8B5; --c-faint: #767E8C;
  --c-rule: #333A44; --c-rule-soft: #2A303A; --c-accent: #8FBEDA; --c-accent-soft: #1D2B36; --c-accent-line: #3C5A6E; --c-flag: #D9AE6C; --c-flag-soft: #2E2519; --c-flag-line: #5E4A29;
  --c-warn: #E09384; --c-warn-soft: #33201C; --c-ok: #7FBE9B; --c-ok-soft: #1B2A22; --c-lit: #FFB340; --c-lit-ink: #1A1200; --c-flow: #11171E;
  --c-chrome: #101317; --c-chrome-2: #181C22; --c-chrome-ink: #B4BCC8; --c-chrome-faint: #6E7686; }
@media (max-width: 520px) { .cx { grid-template-columns: 1fr; } }
.cx .rail { background: var(--c-chrome-2); color: var(--c-chrome-ink); border-radius: 10px; padding: 8px 8px 10px; display: grid; gap: 1px; align-content: start; min-width: 0; }
.cx .tabs { display: flex; gap: 12px; padding: 0 4px 7px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 10.5px; color: var(--c-chrome-faint); }
.cx .tabs b { color: #fff; font-weight: 600; box-shadow: 0 2px 0 #8FBEDA; padding-bottom: 5px; margin-bottom: -7px; }
/* The first tab names the panel showing and, faint after a slash, the one it turns to. */
.cx .tabs b i { font-style: normal; font-weight: 400; color: var(--c-chrome-faint); }
.cx .row { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 0 5px; padding: 3px 4px; border-radius: 4px; }
.cx .row .n { color: var(--c-chrome-faint); font-variant-numeric: tabular-nums; }
.cx .row.on { background: rgba(255,255,255,.08); color: #fff; }
.cx .row.deep { padding-left: 22px; position: relative; }
.cx .row.deep::before { content: ""; position: absolute; left: 10px; top: -2px; width: 8px; height: 11px; border: 0 solid rgba(255,255,255,.22); border-left-width: 1px; border-bottom-width: 1px; border-bottom-left-radius: 4px; }
.cx .row.sug span { font-style: italic; color: var(--c-chrome-faint); }
.cx .feat { font-weight: 600; color: #fff; padding: 6px 4px 2px; }
.cx .why { grid-column: 2; font-size: 10px; color: var(--c-chrome-faint); line-height: 1.35; }
.cx .page { background: var(--c-flow); border: 1px solid var(--c-rule-soft); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; min-width: 0; color: var(--c-ink); }
.cx .eyebrow { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-faint); }
.cx .h { font-family: var(--c-serif); font-size: 15px; font-weight: 600; line-height: 1.25; }
.cx .step { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 4px; font-family: var(--c-serif); font-size: 12.5px; line-height: 1.35; }
.cx .step .n { font: 600 10px var(--c-mono); color: var(--c-faint); padding-top: 2px; }
.cx .step.sel { font-weight: 650; }
.cx .step.sel .n { color: var(--c-accent); }
.cx .val { margin-left: 22px; border: 1px solid var(--c-rule); border-radius: 7px; background: var(--c-surface); font-family: var(--c-mono); font-size: 10.5px; overflow: hidden; }
.cx .val .vh { display: flex; justify-content: space-between; gap: 8px; padding: 3px 7px; border-bottom: 1px solid var(--c-rule); }
.cx .val .vh span { color: #7E52A8; font-size: 9.5px; }
.cx .val .vb { padding: 4px 7px; display: grid; gap: 1px; }
.cx .val .k { color: #7E52A8; }
.cx .val .lit { background: var(--c-lit); color: var(--c-lit-ink); border-radius: 3px; padding: 0 3px; }
.cx .tm { text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 2px; }
.cx .proc { margin-left: 22px; border: 1px solid var(--c-rule); border-radius: 7px; background: var(--c-surface); padding: 5px 8px 4px; display: grid; gap: 3px; }
.cx .proc .ph { display: flex; gap: 6px; align-items: baseline; font-size: 10.5px; font-weight: 600; color: var(--c-ink); }
.cx .proc .ph b { padding: 0 4px; border-radius: 3px; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; background: var(--c-rule-soft); color: var(--c-soft); }
.cx .proc ol { margin: 0; padding-left: 16px; display: grid; gap: 2px; font-family: var(--c-serif); font-size: 11.5px; line-height: 1.35; }
.cx .proc code { font-family: var(--c-mono); font-size: 10px; }
.cx .prim { margin: 2px 0 6px; padding: 8px 10px; border-radius: 5px; background: var(--c-accent); color: var(--c-ground); display: grid; gap: 4px; }
.cx .prim code { font-family: var(--c-mono); font-size: 11.5px; }
.cx .prim .sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 10px; opacity: .85; }
.cx .prim .pip { margin: 0; background: rgba(255,255,255,.2); color: inherit; }
.cx .col { display: grid; gap: 4px; align-content: start; min-width: 0; }
.cx .pip { justify-self: start; margin: 3px 4px 4px; padding: 1px 6px; border-radius: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; background: rgba(224,147,132,.16); color: #E09384; }
.cx .grp { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-chrome-faint); padding: 8px 4px 3px; }
.cx .cnt { font-size: 10px; color: var(--c-chrome-faint); padding: 0 4px 4px; }
.cx .fail { border-left: 2px solid #E09384; background: rgba(224,147,132,.07); padding: 5px 7px; border-radius: 0 5px 5px 0; display: grid; gap: 2px; }
.cx .fail .t { font-family: var(--c-mono); font-size: 10.5px; color: #fff; }
.cx .fail .w { color: #8FBEDA; font-size: 10px; }
.cx .chk { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: 6px; padding: 6px 8px; display: grid; gap: 3px; }
.cx .chk .s { font-size: 10px; color: var(--c-chrome-faint); }
.cx .chk code { font-family: var(--c-mono); color: #fff; }
.cx .said { font-family: var(--c-serif); font-size: 12px; color: #fff; line-height: 1.35; }
.cx .tag { justify-self: start; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); padding: 0 2px 2px; }
.cx .diff { background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: 10px; overflow: hidden; font-family: var(--c-mono); font-size: 10px; line-height: 1.6; min-width: 0; align-self: start; }
.cx .diff .f { padding: 5px 9px; border-bottom: 1px solid var(--c-rule-soft); color: var(--c-soft); }
.cx .diff div.l { padding: 0 9px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.cx .diff .del { background: var(--c-warn-soft); color: var(--c-warn); }
.cx .diff .add { background: var(--c-ok-soft); color: var(--c-ok); }
.cx .diff .ctx { color: var(--c-faint); }
.cx .card { background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: 10px; padding: 10px 12px; display: grid; gap: 7px; align-content: start; min-width: 0; }
.cx .card .h { font-size: 13.5px; }
.cx .bn { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 8px; font-family: var(--c-serif); font-size: 11.5px; line-height: 1.4; color: var(--c-soft); }
.cx .bn b { font: 600 9px var(--c-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); padding-top: 2px; }
.cx .bn b.now { color: var(--c-accent); }
.cx .ex { border: 1px solid var(--c-rule-soft); border-radius: 7px; background: var(--c-ground); padding: 6px 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; font-size: 10.5px; align-items: baseline; }
.cx .ex .cap { grid-column: 1 / -1; font-size: 9.5px; color: var(--c-faint); }
.cx .ex b { font-weight: 600; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); }
.cx .ex b.now { color: var(--c-accent); }
.cx .ex s { color: var(--c-faint); text-decoration: none; }
.cx .ex .ln { grid-column: 1 / -1; font-family: var(--c-serif); font-size: 11.5px; line-height: 1.45; color: var(--c-soft); }
.cx .ex del { color: var(--c-warn); background: var(--c-warn-soft); border-radius: 2px; }
.cx .ex ins { text-decoration: none; color: var(--c-ok); background: var(--c-ok-soft); border-radius: 2px; }
.cx .chip.kind { background: var(--c-accent-soft); color: var(--c-accent); border-color: var(--c-accent-line); }
.cx .slot { display: inline-block; border: 1px solid var(--c-rule); border-radius: 5px; padding: 1px 6px; margin-right: 4px; background: var(--c-surface); }
.cx .slot.off { color: var(--c-faint); background: var(--c-rule-soft); }
.cx .slot small { color: var(--c-flag); font-size: 9px; margin-left: 4px; }
.cx.wide { grid-template-columns: 1fr; }
.cx .dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cx .chip { font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 1px 7px; background: var(--c-flag-soft); color: var(--c-flag); border: 1px solid var(--c-flag-line); }
.cx .meta { font-size: 10px; color: var(--c-faint); }
.cx .try { border: 1px solid #E3D6C6; background: #FBF6EF; color: #3A2A1E; border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; }
.cx .try .rp { font-family: var(--c-serif); color: #6B2B3F; font-weight: 600; font-size: 12.5px; }
.cx .try .opts { display: flex; flex-wrap: wrap; gap: 5px; }
.cx .try .opt { border: 1px solid #E3D6C6; background: #fff; border-radius: 6px; padding: 3px 8px; font-size: 10.5px; }
.cx .try .opt.on { border-color: #6B2B3F; box-shadow: inset 0 0 0 1px #6B2B3F; font-weight: 600; }
.cx .tp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cx .tp > div { border: 1px solid var(--c-rule-soft); border-radius: 7px; padding: 6px 8px; background: var(--c-ground); font-family: var(--c-serif); font-size: 11.5px; line-height: 1.4; color: var(--c-soft); display: grid; gap: 2px; align-content: start; }
.cx .tp b { font: 600 9px var(--c-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); }
.cx .tp .pl b { color: var(--c-accent); }
.cx .btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cx .btn { font-size: 10.5px; border: 1px solid var(--c-rule); border-radius: 6px; padding: 3px 9px; color: var(--c-ink); background: var(--c-surface); }
.cx .btn.go { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-surface); font-weight: 600; }

/* The tour is one window clicked through, under a bar of its twenty-three steps. It leaves the page's
   column and fills what the screen has under the header: the script hands the kit that height,
   and the window takes the screen's shape, wider rather than smaller. The bar and the note under
   the window follow the width the window ends up at (--win-w). */
.tourbox { scroll-margin-top: calc(var(--hdr) + 12px); min-width: 0; padding-inline: 24px; }
@media (max-width: 520px) { .tourbox { padding-inline: 16px; } }
.tourbar { display: flex; align-items: center; gap: 6px 18px; margin: 0 auto 10px; max-width: var(--win-w, 100%); }
.tourbar .count { flex: none; min-width: 8.5em; font-size: .92rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.track { flex: 1; min-width: 0; display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.track li { flex: 1; min-width: 0; display: flex; }
/* Each step is a button as tall as a finger needs, drawn as a thin segment. */
.track button { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; height: 24px; display: grid; align-items: center; border-radius: 4px; }
.track button::before { content: ""; height: 6px; border-radius: 3px; background: var(--rule); transition: background-color .15s, height .15s; }
.track button:hover::before { background: var(--accent-line); }
.track button.past::before { background: color-mix(in oklab, var(--accent) 45%, var(--rule)); }
.track button[aria-current="step"]::before { height: 10px; background: var(--accent); }
.track button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stage { width: 100%; }
.tstate { max-width: var(--win-w, 100%); margin: 12px auto 0; color: var(--accent); font-size: .95rem; }
.tstate:empty { display: none; }
@media (max-width: 640px) {
  .tourbar { flex-wrap: wrap; }
  .track { flex-basis: 100%; gap: 2px; }
}

/* supported platforms */
/* Names only: Apple, Microsoft, Anthropic and OpenAI allow their names in a statement of what
   runs where, and allow their logos only under a licence. */
.sup { padding-block: 72px 0; }
.supgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) { .supgrid { grid-template-columns: 1fr; } }
.supgrp h3 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 12px; }
:root:lang(he) .supgrp h3 { letter-spacing: .02em; font-size: .92rem; }
.suplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.supitem { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 116px; padding: 38px 10px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; text-align: center; }
.supname { font-weight: 600; font-size: 1.22rem; line-height: 1.2; letter-spacing: -.01em; }
.supitem.soon { background: var(--surface-2); border-style: dashed; }
.supitem.soon .supname { color: var(--ink-soft); }
/* OpenCode's label runs to two or three lines, so it takes its own room above the name rather
   lying over the card as the one-line labels do. */
.supitem.alongside { display: flex; flex-direction: column; padding: 0 0 20px; }
.supitem.alongside .supbanner { position: static; order: -1; }
.supitem.alongside .supname { margin: auto 10px; padding-block-start: 14px; }
.supbanner { position: absolute; inset-block-start: 0; inset-inline: 0; padding: 5px 6px; background: var(--flag-soft); border-bottom: 1px solid var(--flag-line); color: var(--flag); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
:root:lang(he) .supbanner { letter-spacing: .02em; font-size: .8rem; }
@media (max-width: 520px) { .sup { padding-block: 40px 0; } .suplist { gap: 8px; } .supitem { min-height: 96px; padding: 34px 4px 16px; } .supname { font-size: 1rem; } .supitem.alongside { padding-block-end: 16px; } .supitem.alongside .supname { margin-inline: 4px; padding-block-start: 10px; } .supbanner { padding-inline: 2px; font-size: .64rem; letter-spacing: .03em; } }

/* download */
.dl { padding-block: 104px 104px; }
.dl .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 900px) { .dl .wrap { grid-template-columns: 1fr; } }
.dl h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
.get { margin-top: 32px; display: grid; gap: 12px; justify-items: start; }
.detected { font-size: .92rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.detected::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3F7A5A; box-shadow: 0 0 0 3px rgba(63,122,90,.18); }
.unsure { font-size: .88rem; color: var(--ink-faint); max-width: 52ch; }
/* The one way in: the Homebrew command in the accent the download button had, so it reads as
   the thing to do, with Copy at its end in the page's own surface. */
.brew { display: grid; gap: 8px; inline-size: min(100%, 600px); }
.brewh { font-size: .92rem; color: var(--ink-soft); }
.brewrow { display: flex; align-items: center; gap: 12px; border-radius: 14px; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); padding: 10px 10px 10px 22px; }
html[dir="rtl"] .brewrow { padding: 10px 22px 10px 10px; }
.brewrow code { flex: 1; min-inline-size: 0; font-size: 1rem; color: inherit; direction: ltr; text-align: left; overflow-wrap: anywhere; user-select: all; }
.brewrow code span { white-space: nowrap; }
.copy { all: unset; box-sizing: border-box; cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--accent); background: var(--surface);
  border-radius: 9px; padding: 10px 16px; white-space: nowrap; min-width: 6.5em; text-align: center; }
.copy:hover { background: var(--accent-soft); }
.copy:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; }
.brewnote { font-size: .86rem; color: var(--ink-faint); }
.brewnote a { color: var(--ink-soft); }
.brewnote code { font-size: .95em; color: var(--ink-soft); }
/* Read out, not seen: the button itself says Copied. */
.brewsaid { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nodesk { background: var(--flag-soft); border: 1px solid var(--flag-line); color: var(--ink); border-radius: 10px; padding: 12px 14px; max-width: 52ch; }
.side { display: grid; gap: 28px; }
.side h3 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 10px; }
:root:lang(he) .side h3 { letter-spacing: .02em; font-size: .92rem; }
.req { list-style: none; padding: 0; display: grid; gap: 8px; }
.req li { display: flex; gap: 10px; align-items: baseline; }
.req li[hidden] { display: none; }
.req li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.req small { display: block; margin-top: 2px; font-size: .86em; color: var(--ink-soft); }
/* "macOS 13+" broken across two lines of right-to-left text reads "+13" on the second, so it stays whole. */
.req bdi { white-space: nowrap; }
.fine { font-size: .9rem; color: var(--ink-soft); display: grid; gap: 4px; }

/* footer */
.foot { border-top: 1px solid var(--rule); padding-block: 40px calc(96px + env(safe-area-inset-bottom, 0px)); background: var(--surface); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) auto; gap: 28px 40px; align-items: start; }
@media (max-width: 860px) { .foot .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot .wrap { grid-template-columns: 1fr; } }
.foot h2 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 10px; }
:root:lang(he) .foot h2 { letter-spacing: .02em; font-size: .9rem; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--accent); text-decoration: underline; }
.foot .made { display: grid; gap: 10px; color: var(--ink-soft); }
.foot .made .brand { color: var(--ink); }
.foot .made .brand svg { width: 28px; height: 28px; }
.foot .tm { grid-column: 1 / -1; font-size: .82rem; color: var(--ink-faint); border-top: 1px solid var(--rule-soft); padding-top: 18px; max-width: 90ch; }

@media (prefers-reduced-motion: reduce) {
  .top { transition: none; }
  .mark.go .arm, .mark.go .head { animation: none; }
  .track button::before { transition: none; }
}