/* Syntax monochrome identity: the final layer shared by the app and public pages. */
:root,
:root[data-theme="dark"],
:root[data-theme="graphite"],
body[data-theme="dark"],
body[data-theme="graphite"] {
  color-scheme: dark;
  --canvas: #08080a;
  --panel: #0e0f12;
  --raised: #15171b;
  --raised2: #1c1e23;
  --glass: rgba(14, 15, 18, .86);
  --ink: #f4f4f6;
  --muted: #a3a6af;
  --quiet: #818691;
  --line: rgba(255, 255, 255, .085);
  --line2: rgba(255, 255, 255, .16);
  --accent: #f59e0b;
  --accent-soft: rgba(245, 158, 11, .1);
  --signal: #10b981;
  --cyan: #06b6d4;
  --danger: #f87171;
  --shadow: 0 22px 64px rgba(0, 0, 0, .42);
  --docs-bg: var(--canvas);
  --docs-panel: var(--glass);
  --docs-raised: var(--raised);
  --docs-line: var(--line);
  --docs-faint: rgba(255, 255, 255, .045);
  --docs-ink: var(--ink);
  --docs-muted: var(--muted);
  --docs-dim: var(--quiet);
  --docs-amber: var(--accent);
}

:root[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
  --canvas: #f1f2f3;
  --panel: #fafafa;
  --raised: #e9eaec;
  --raised2: #dfe1e4;
  --glass: rgba(250, 250, 251, .88);
  --ink: #17181b;
  --muted: #50545c;
  --quiet: #6e727a;
  --line: rgba(20, 22, 26, .1);
  --line2: rgba(20, 22, 26, .18);
  --accent: #9a5b00;
  --accent-soft: rgba(154, 91, 0, .1);
  --signal: #087f5b;
  --cyan: #0b7285;
  --danger: #b42318;
  --shadow: 0 18px 48px rgba(10, 12, 16, .1);
  --docs-bg: var(--canvas);
  --docs-panel: var(--glass);
  --docs-raised: var(--raised);
  --docs-line: var(--line);
  --docs-faint: rgba(20, 22, 26, .055);
  --docs-ink: var(--ink);
  --docs-muted: var(--muted);
  --docs-dim: var(--quiet);
  --docs-amber: var(--accent);
}

html {
  color-scheme: dark;
  background: var(--canvas);
  scrollbar-color: rgba(220, 222, 226, .3) transparent;
}

html[data-theme="light"] { color-scheme: light; }
body { background-color: var(--canvas); color: var(--ink); }
::selection { color: var(--canvas); background: var(--accent); }

button, input, textarea, select { accent-color: var(--accent); }
button, a { -webkit-tap-highlight-color: rgba(255, 255, 255, .1); }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.welcome-stage {
  background-color: var(--canvas);
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(ellipse at 72% 12%, rgba(255,255,255,.055), transparent 40rem);
  background-size: 64px 64px, 64px 64px, auto;
}

.welcome-nav,
.standalone-nav,
.docs-page .standalone-nav {
  border-color: var(--line);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.welcome-nav nav a::after { background: var(--accent); }
.welcome-copy h1 { letter-spacing: -.06em; }
.welcome-code-card,
.share-card,
.verification-card,
.tool-panel,
.catalog-course-card,
.plan-card,
.plans-trust {
  border-color: var(--line2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 56px rgba(0,0,0,.24);
}

.welcome-code-card,
.share-card,
.verification-card,
.tool-panel,
.catalog-course-card,
.plan-card,
.plans-trust {
  background-color: var(--glass);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}

.welcome-brand-mark,
.brand-mark,
.welcome-course-card,
.welcome-agent,
.welcome-node,
.welcome-secondary,
.welcome-theme,
.welcome-login,
.welcome-nav-cta,
.solid-button,
.subtle-button,
.catalog-course-card,
.project-brief-card,
.tool-panel,
.tool-tabs,
.share-card,
.verification-card,
.plan-card {
  border-radius: 7px;
}

.welcome-brand-mark img,
.brand-mark img,
.welcome-bit-link img { filter: grayscale(1); }

.welcome-primary,
.welcome-nav-cta,
.solid-button,
.tool-actions .tool-primary,
.verification-print {
  border: 1px solid var(--line2);
  border-radius: 5px;
  color: #08080a;
  border-color: rgba(245, 158, 11, .5);
  background: linear-gradient(180deg, #ffb938, #f59e0b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 5px 16px rgba(0,0,0,.18);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.welcome-primary:hover,
.welcome-nav-cta:hover,
.solid-button:hover,
.tool-actions .tool-primary:hover,
.verification-print:hover {
  border-color: #ffd27a;
  color: #08080a;
  background: #ffbf4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px rgba(0,0,0,.28);
  transform: translateY(-1px);
}

.welcome-secondary,
.welcome-theme,
.welcome-login,
.subtle-button,
.tool-actions button,
.share-actions button,
.catalog-course-bottom button,
.catalog-stage-row > button,
.catalog-back-button {
  border-color: var(--line2);
  border-radius: 5px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent), var(--panel);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.welcome-secondary:hover,
.welcome-theme:hover,
.welcome-login:hover,
.subtle-button:hover,
.tool-actions button:hover,
.share-actions button:hover,
.catalog-course-bottom button:hover,
.catalog-stage-row > button:not(:disabled):hover,
.catalog-back-button:hover {
  border-color: #c8cbd1;
  color: #fff;
  background: #202228;
}

.welcome-node[aria-pressed="true"],
.tool-tabs button[aria-selected="true"],
.theme-option.active {
  border-color: rgba(244,244,246,.34);
  color: var(--ink);
  background: linear-gradient(100deg, var(--accent-soft), transparent 88%), var(--raised);
}

.welcome-node[aria-pressed="true"] span,
.welcome-course-card button,
.welcome-courses-foot .welcome-all-courses,
.standalone-brand .brand-dot,
.verification-home,
.catalog-course-footer > a {
  color: var(--ink);
}

.welcome-course-card,
.catalog-course-card,
.plan-card,
.tool-panel,
.project-brief-card {
  border-color: var(--line);
  background-image: linear-gradient(145deg, rgba(255,255,255,.035), transparent 52%);
}

.welcome-course-card:hover,
.catalog-course-card:hover,
.project-brief-card:hover {
  border-color: var(--line2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 36px rgba(0,0,0,.22);
}

.welcome-course-card button:hover,
.welcome-courses-foot .welcome-all-courses:hover,
.verification-home:hover { color: var(--ink); }

.catalog-course-progress i { background: var(--accent); }
.catalog-course-card:focus-within { outline-color: var(--line2); }

.page-heading h1,
.welcome h1,
.welcome-copy h1,
.docs-hero h1,
.plans-hero h1,
.tools-hero h1 { text-wrap: balance; }

.standalone-main,
.docs-shell,
.plans-main,
.tools-shell,
.reference-shell,
.catalog-shell { color: var(--ink); }
.standalone-footer { border-color: var(--line); }
.standalone-page,
.docs-page,
.plans-page,
.tools-page,
.reference-page,
.roadmaps-page,
.roadmap-page,
.courses-page { background-color: var(--canvas); color: var(--ink); }

/* Public site layout pass: editorial rhythm, open content, and useful frames. */
.welcome-stage,
.docs-page,
.plans-page,
.tools-page,
.reference-page,
.roadmaps-page,
.roadmap-page,
.courses-page,
.standalone-page {
  background-image: none;
}

.welcome-stage { overflow: clip; }
.welcome-nav {
  min-height: 66px;
  padding-inline: max(22px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(8, 8, 10, .88);
}

.welcome-brand { font-size: 18px; letter-spacing: -.045em; }
.welcome-brand-mark { width: 30px; height: 30px; background: #101114; }
.welcome-nav nav { gap: clamp(13px, 1.7vw, 24px); }
.welcome-nav nav a { color: #a3a6af; font-size: 12px; }
.welcome-nav nav a:hover { color: #f4f4f6; }
.welcome-nav nav a::after { bottom: 18px; }
.welcome-nav-actions { gap: 7px; }

.welcome-hero {
  width: min(1320px, calc(100% - 48px));
  min-height: min(680px, calc(100svh - 66px));
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(42px, 7vw, 96px);
  padding: clamp(76px, 8vw, 112px) 0 clamp(64px, 7vw, 94px);
}

.welcome-copy { max-width: 590px; }
.welcome-kicker { margin-bottom: 18px; font-size: 12px; letter-spacing: .14em; }
.welcome-copy h1 {
  max-width: 620px;
  font-size: clamp(48px, 6.1vw, 82px);
  line-height: .99;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.welcome-intro { max-width: 46ch; margin-top: 20px; font-size: 15px; line-height: 1.65; }
.welcome-hero-actions { gap: 9px; margin: 24px 0 20px; }
.welcome-primary,
.welcome-secondary { min-height: 45px; padding-inline: 15px; }
.welcome-proof { padding-top: 15px; }
.welcome-bit-link { max-width: 390px; border-radius: 7px; }

.welcome-visual { min-width: 0; min-height: 0; padding: 0; }
.welcome-code-card {
  width: 100%;
  max-width: 650px;
  padding: clamp(15px, 2vw, 22px);
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(255,255,255,.035), transparent 38%), #0d0e11;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 28px 76px rgba(0,0,0,.42);
}

.welcome-code-top { padding-bottom: 13px; }
.welcome-code { min-height: 84px; padding: 16px; border-color: rgba(255,255,255,.09); background: #090a0c; font-size: 13px; }
.welcome-result { min-height: 42px; padding-inline: 10px; }
.welcome-preview-tabs { gap: 6px; }
.welcome-node { min-height: 38px; border-radius: 4px; }
.welcome-node[aria-pressed="true"] { border-color: rgba(244,244,246,.36); color: #f4f4f6; background: #202227; }
.welcome-node span { color: #c4c7ce; }
.welcome-agent { border-radius: 6px; background: rgba(14,15,18,.88); }

.welcome-language-strip,
.welcome-method,
.welcome-courses,
.welcome-coach,
.welcome-footer {
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
}

.welcome-language-strip { padding: 24px 0 18px; border-top: 1px solid var(--line); border-bottom: 0; }
.strip-label { color: var(--quiet); font-size: 12px; letter-spacing: .14em; }
.welcome-marquee {
  margin-top: 12px;
  border-block: 1px solid var(--line);
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(220,222,226,.32) transparent;
}
.welcome-marquee-track { width: max-content; min-width: 100%; justify-content: space-between; gap: 22px; padding-block: 13px; }
.ticker-language { flex: none; color: #c5c8ce; font-size: 12px; }
.ticker-language i { color: var(--quiet); }
.welcome-runtime-bar { margin-top: 15px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.welcome-runtime-bar > div { padding: 13px 15px; }
.welcome-runtime-bar > div + div { border-left: 1px solid var(--line); }
.welcome-runtime-bar span { color: var(--quiet); }
.welcome-runtime-bar p { margin-top: 5px; color: var(--muted); }

.welcome-method,
.welcome-courses,
.welcome-coach {
  padding-block: clamp(58px, 7vw, 92px);
  border-top: 1px solid var(--line);
}

.welcome-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .52fr);
  align-items: end;
  gap: clamp(26px, 6vw, 80px);
  margin-bottom: 30px;
}

.welcome-section-head .welcome-kicker { margin-bottom: 12px; }
.welcome-section-head h2 { max-width: 700px; font-size: clamp(31px, 4vw, 50px); line-height: 1.04; letter-spacing: -.055em; }
.welcome-section-head h2 span { color: #aeb2ba; }
.welcome-section-head > p { max-width: 43ch; margin: 0 0 3px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.method-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}

.method-card,
.method-card + .method-card {
  min-width: 0;
  padding: 20px clamp(16px, 2.4vw, 32px) 23px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.method-card + .method-card { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line); }
.method-card:hover { background: transparent; box-shadow: none; }
.method-number { color: #f4f4f6; }
.method-illustration { min-height: 102px; margin-block: 18px 15px; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 54%), #0d0e11; }
.method-illustration i { color: #d5d7dc; }
.method-card h3 { font-size: 18px; letter-spacing: -.035em; }
.method-card p { max-width: 36ch; color: var(--muted); font-size: 13px; line-height: 1.65; }

.welcome-courses { padding-bottom: clamp(58px, 7vw, 86px); }
.welcome-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 42px); }
.welcome-course-card {
  min-width: 0;
  min-height: 228px;
  padding: 18px 0 17px;
  border: 0;
  border-top: 1px solid var(--line2);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.welcome-course-card:hover,
.welcome-course-card:focus-within { border-color: #d2d4d9; background: transparent; box-shadow: none; }
.welcome-course-card::before { display: none; }
.course-card-top { min-height: 31px; }
.course-mark { border-radius: 4px; border-color: var(--line2); color: #e2e3e7; background: #111216; }
.course-arrow { color: var(--quiet); }
.course-level { color: var(--quiet); }
.welcome-course-card h3 { margin-top: 17px; font-size: 22px; letter-spacing: -.045em; }
.welcome-course-card > p { min-height: 58px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.course-meta { padding-top: 12px; border-top: 1px solid var(--line); color: var(--quiet); }
.course-runtime i { background: #c5c8ce; box-shadow: none; }
.welcome-course-card > button { margin-top: 11px; color: #f4f4f6; font-size: 13px; }
.welcome-course-card > button:hover { color: #fff; }
.welcome-courses-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.welcome-courses-foot .welcome-all-courses { color: #f4f4f6; }

.welcome-coach { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(30px, 7vw, 96px); }
.welcome-coach .welcome-section-head { display: block; margin: 0; }
.welcome-coach .welcome-section-head > p { margin-top: 16px; }
.coach-demo,
.coach-card,
.coach-preview { border-color: var(--line2); border-radius: 7px; background: linear-gradient(150deg, rgba(255,255,255,.035), transparent 52%), #0d0e11; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.welcome-coach .coach-demo { margin: 0; }

.welcome-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 30px;
  padding: 22px 0 28px;
  border-top: 1px solid var(--line2);
}
.welcome-footer > .site-credit {
  grid-column: 1 / -1;
  padding-top: 9px;
  color: var(--quiet);
  font: 12px/1.6 var(--mono);
  text-align: end;
}
.welcome-footer .footer-links { justify-content: flex-end; gap: 18px; }
.welcome-footer .footer-links a { color: var(--muted); }
.welcome-footer .footer-links a:hover { color: var(--ink); }
.welcome-footer #welcomeFooterStart { color: var(--ink); }

.standalone-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  max-width: none;
  min-height: 64px;
  padding-inline: max(22px, calc((100vw - 1280px) / 2));
  background: rgba(8,8,10,.91);
}

.standalone-brand { font-size: 17px; letter-spacing: -.05em; }
.standalone-nav nav { gap: clamp(12px, 2vw, 25px); }
.standalone-nav nav a { color: var(--muted); font-size: 12px; }
.standalone-nav nav a:hover { color: var(--ink); }
.standalone-main,
.docs-shell,
.plans-main,
.tools-shell,
.reference-shell,
.routes-shell,
.catalog-shell {
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin-inline: auto;
  padding-block: clamp(46px, 7vw, 88px) 88px;
}

.standalone-hero,
.docs-hero,
.catalog-hero,
.reference-hero,
.tools-hero,
.plans-hero,
.support-center-hero,
.support-hero {
  padding: 0 0 28px;
  border-bottom: 1px solid var(--line2);
}

.standalone-hero h1,
.docs-hero h1,
.catalog-hero h1,
.reference-hero h1,
.tools-hero h1,
.plans-hero h1,
.support-center-hero h1,
.support-hero h1 {
  max-width: 800px;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: .99;
  letter-spacing: -.065em;
}

.standalone-lede,
.docs-lede { max-width: 66ch; color: var(--muted); font-size: 15px; line-height: 1.72; }
.page-eyebrow { color: var(--quiet); font-size: 12px; letter-spacing: .13em; }
.docs-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr); gap: clamp(28px, 5vw, 70px); }
.docs-hero h1 span,
.catalog-hero h1 span,
.reference-hero h1 span,
.tools-hero h1 span { color: #d2d4d9; }

.docs-layout { grid-template-columns: 208px minmax(0, 1fr); gap: clamp(26px, 5vw, 64px); padding-top: 40px; }
.docs-rail { padding-top: 12px; border-top-color: var(--line2); }
.docs-rail nav a { min-height: 36px; border-radius: 3px; }
.docs-section { padding-block: 38px 42px; border-bottom: 1px solid var(--line); }
.docs-section + .docs-section { margin-top: 0; }
.docs-section > header { margin-bottom: 20px; }
.docs-section > header h2 { max-width: 740px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.045em; }
.docs-card-grid,
.docs-link-grid { gap: 0 clamp(20px, 3vw, 38px); }
.docs-card-grid { border-top: 1px solid var(--line2); }
.docs-card {
  padding: 18px 0 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.docs-card:hover { border-color: var(--line2); background: transparent; box-shadow: none; }
.docs-card-index { border-radius: 3px; }
.docs-card h3 { font-size: 17px; letter-spacing: -.035em; }
.docs-card p { max-width: 65ch; font-size: 13px; line-height: 1.65; }
.docs-card > a,
.docs-section-link { color: var(--ink); font-size: 13px; }
.docs-endcap { margin-top: 32px; padding: 20px; border: 1px solid var(--line2); border-radius: 7px; background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 60%), var(--panel); }
.bit-intro { border-color: var(--line2); border-radius: 7px; background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 55%), var(--panel); }
.bit-art { border-right-color: var(--line); }

.catalog-hero { grid-template-columns: minmax(0, 1fr) 220px; align-items: end; gap: 42px; padding-bottom: 28px; }
.catalog-hero h1 { max-width: 790px; margin: 12px 0 15px; font-size: clamp(40px, 5.8vw, 72px); line-height: .98; letter-spacing: -.07em; }
.catalog-count-panel { padding: 17px 0 8px 18px; border: 0; border-left: 1px solid var(--line2); border-radius: 0; background: transparent; box-shadow: none; }
.catalog-count-panel strong { font-size: 58px; line-height: .95; }
.catalog-controls { position: sticky; top: 64px; z-index: 8; gap: 12px; margin-block: 18px 22px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(12,13,16,.92); backdrop-filter: blur(18px); }
.catalog-controls input,
.catalog-controls select { min-height: 40px; border-radius: 4px; background: #090a0c; }
.catalog-columns { grid-template-columns: minmax(0, 1fr) 230px; gap: clamp(22px, 3vw, 40px); }
.catalog-list-head { padding-bottom: 10px; border-bottom: 1px solid var(--line2); }
.catalog-grid { gap: 0 28px; border-top: 0; }
.catalog-course-card {
  min-height: 236px;
  padding: 17px 0 19px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.catalog-course-card:hover { border-color: var(--line2); background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 80%); box-shadow: none; }
.catalog-course-card h3 { font-size: 19px; letter-spacing: -.04em; }
.catalog-course-summary { color: var(--muted); font-size: 13px; line-height: 1.65; }
.catalog-course-footer { margin-top: auto; border-top: 1px solid var(--line); }
.catalog-side { gap: 0; margin-top: 0; border-top: 1px solid var(--line2); }
.catalog-note,
.catalog-note-accent { padding: 17px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.catalog-note h2 { font-size: 16px; }
.catalog-more { border-radius: 5px; color: var(--ink); background: #121317; }

.tools-hero { align-items: end; gap: 42px; padding-bottom: 24px; }
.tools-hero h1 { font-size: clamp(40px, 5.5vw, 70px); }
.tools-hero .docs-lede { margin-top: 12px; font-size: 14px; }
.tools-privacy { border-radius: 5px; color: var(--ink); background: rgba(255,255,255,.025); }
.tool-tabs { position: sticky; top: 64px; z-index: 8; margin: 18px 0; padding: 5px; border-radius: 5px; background: rgba(12,13,16,.94); backdrop-filter: blur(16px); }
.tool-tabs button { min-height: 39px; }
.tool-panel { padding: clamp(17px, 3vw, 28px); border: 1px solid var(--line2); border-radius: 7px; background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 48%), #0d0e11; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.tool-panel-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.tool-panel-head h2 { font-size: clamp(21px, 3vw, 27px); }
.tool-panel textarea,
.tool-panel input[type="text"],
.tool-panel input[type="number"] { border-radius: 4px; background: #08090b; }
.tool-actions button { min-height: 41px; }
.tool-output { border-radius: 4px; background: #08090b; }

.plan-picker,
.plan-compare,
.billing-section,
.refund-center,
.support-ticket-section,
.support-ticket-history,
.faq-group { padding-block: 34px; border-bottom: 1px solid var(--line); }
.plan-picker-head { margin-bottom: 18px; }
.plan-picker-head h2,
.plan-faq-intro h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.05em; }
.plan-grid,
.plan-cards,
.plan-picker-grid { gap: 12px; }
.plan-card { border-radius: 7px; background: linear-gradient(145deg, rgba(255,255,255,.04), transparent 55%), #0f1013; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.plan-card.is-featured { border-color: rgba(255,255,255,.3); background: linear-gradient(150deg, rgba(255,255,255,.075), transparent 55%), #111216; box-shadow: inset 0 1px 0 rgba(255,255,255,.13); }
.plan-card-action { min-height: 44px; border-radius: 5px; }
.plan-compare-wrap,
.billing-table-wrap { border-radius: 6px; }

.support-center-main,
.support-main { width: min(1080px, calc(100% - 48px)); }
.support-center-hero,
.support-hero { padding-bottom: 26px; }
.support-flow { gap: 12px; }
.support-panel,
.support-center-signal,
.support-center-footnote,
.donation-checkout,
.donation-history,
.support-trust { border-color: var(--line); border-radius: 6px; background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 55%), var(--panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.support-form input,
.support-form select,
.support-form textarea,
.support-ticket-form input,
.support-ticket-form textarea,
.refund-request-form input,
.refund-request-form select,
.refund-request-form textarea { min-height: 42px; border-radius: 4px; }
.support-form textarea,
.support-ticket-form textarea,
.refund-request-form textarea { min-height: 120px; }
.support-form button,
.support-ticket-form button,
.refund-request-form button { min-height: 43px; border-radius: 5px; }

.reference-hero { padding-bottom: 28px; }
.reference-controls { position: sticky; top: 64px; z-index: 8; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(12,13,16,.94); backdrop-filter: blur(16px); }
.reference-list-head { padding-block: 18px 9px; border-bottom: 1px solid var(--line2); }
.reference-entry,
.reference-item { border-color: var(--line); border-radius: 0; background: transparent; }
.route-finder-form { padding: 14px; border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); }
.route-card { padding: 20px 0; border: 0; border-top: 1px solid var(--line2); border-radius: 0; background: transparent; box-shadow: none; }
.route-card:hover { background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 75%); }
.roadmap-columns { gap: 0 28px; }
.roadmap-changelog { border-top: 1px solid var(--line); }

.faq-group { display: grid; grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); gap: 24px; }
.faq-group > h2 { position: sticky; top: 88px; align-self: start; font-size: 21px; letter-spacing: -.04em; }
.faq-group details { padding: 14px 0; border-top: 1px solid var(--line); }
.faq-group summary { font-size: 15px; font-weight: 600; }
.legal-copy { max-width: 78ch; font-size: 14px; line-height: 1.8; }
.legal-copy h2 { margin-top: 38px; padding-top: 15px; border-top: 1px solid var(--line); font-size: 21px; letter-spacing: -.04em; }

.language-hero,
.language-sample,
.language-faq,
.verification-card,
.verification-certificate-title { border-color: var(--line2); border-radius: 7px; }
.language-hero { padding: clamp(22px, 4vw, 38px); background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 55%), var(--panel); }
.language-sample { margin-top: 20px; padding: clamp(18px, 3vw, 26px); background: var(--panel); }
.language-faq { padding-top: 27px; border-top: 1px solid var(--line); }
.language-faq details { padding-block: 13px; border-bottom: 1px solid var(--line); }
.verification-shell { min-height: calc(100svh - 64px); }

.standalone-footer {
  width: min(1240px, calc(100% - 48px));
  flex-wrap: wrap;
  padding-block: 18px 24px;
  border-top: 1px solid var(--line2);
}
.standalone-footer > .site-credit {
  flex: 1 0 100%;
  padding-top: 9px;
  color: var(--quiet);
  font: 12px/1.6 var(--mono);
  text-align: end;
}
.standalone-footer nav { gap: 14px 20px; }

@media (max-width: 980px) {
  .welcome-nav nav { gap: 12px; }
  .welcome-nav nav a { font-size: 12px; }
  .welcome-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; }
  .welcome-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-hero { grid-template-columns: minmax(0, 1fr) 220px; }
  .docs-layout { grid-template-columns: 178px minmax(0, 1fr); gap: 24px; }
  .catalog-columns { grid-template-columns: minmax(0, 1fr) 210px; }
}

@media (max-width: 720px) {
  .welcome-nav { min-height: 58px; padding-inline: 16px; }
  .welcome-nav nav { display: none; }
  .welcome-nav-actions { margin-left: auto; }
  .welcome-hero,
  .welcome-language-strip,
  .welcome-method,
  .welcome-courses,
  .welcome-coach,
  .welcome-footer { width: calc(100% - 32px); }
  .welcome-hero { min-height: 0; grid-template-columns: 1fr; gap: 34px; padding-block: 52px 42px; }
  .welcome-copy h1 { max-width: 10ch; font-size: clamp(45px, 12vw, 66px); }
  .welcome-intro { font-size: 14px; }
  .welcome-visual { width: 100%; }
  .welcome-code-card { max-width: none; }
  .welcome-agent { position: static; width: max-content; max-width: 100%; margin: 10px 0 0 auto; }
  .welcome-marquee-track { justify-content: flex-start; gap: 20px; }
  .welcome-runtime-bar { grid-template-columns: 1fr; }
  .welcome-runtime-bar > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .welcome-section-head { grid-template-columns: 1fr; gap: 13px; margin-bottom: 21px; }
  .welcome-section-head > p { max-width: 55ch; }
  .welcome-method,
  .welcome-courses,
  .welcome-coach { padding-block: 46px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-card,
  .method-card + .method-card { padding: 16px 0 18px; border-left: 0; border-bottom: 1px solid var(--line); }
  .method-card:last-child { border-bottom: 0; }
  .method-illustration { min-height: 76px; }
  .welcome-course-grid { grid-template-columns: 1fr; }
  .welcome-course-card { min-height: 0; padding-block: 16px; }
  .welcome-course-card > p { min-height: 0; }
  .welcome-coach { grid-template-columns: 1fr; gap: 24px; }
  .welcome-footer { grid-template-columns: 1fr; }
  .welcome-footer .footer-links { justify-content: flex-start; flex-wrap: wrap; }
  .standalone-nav { min-height: 58px; padding-inline: 16px; }
  .standalone-nav nav { max-width: calc(100vw - 130px); overflow-x: auto; gap: 13px; scrollbar-width: none; }
  .standalone-nav nav::-webkit-scrollbar { display: none; }
  .standalone-main,
  .docs-shell,
  .plans-main,
  .tools-shell,
  .reference-shell,
  .routes-shell,
  .catalog-shell,
  .standalone-footer { width: calc(100% - 32px); padding-top: 36px; }
  .docs-hero,
  .catalog-hero { grid-template-columns: 1fr; gap: 18px; }
  .catalog-count-panel { grid-template-columns: 1fr auto; border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
  .catalog-count-panel strong { grid-column: 2; grid-row: 1 / span 3; }
  .catalog-controls { top: 58px; grid-template-columns: 1fr 1fr; }
  .catalog-controls label:first-child { grid-column: 1 / -1; }
  .catalog-columns { grid-template-columns: 1fr; }
  .catalog-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-note-accent { grid-column: 1 / -1; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-rail { position: static; max-height: none; }
  .docs-rail nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-card-grid { grid-template-columns: 1fr; }
  .docs-card-wide { grid-column: auto; }
  .tools-hero { align-items: flex-start; flex-direction: column; }
  .tool-tabs { top: 58px; }
  .plan-picker,
  .plan-compare,
  .billing-section,
  .refund-center,
  .support-ticket-section,
  .support-ticket-history,
  .faq-group { padding-block: 24px; }
  .faq-group { grid-template-columns: 1fr; gap: 8px; }
  .faq-group > h2 { position: static; }
  .standalone-footer { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-marquee-track { animation: none !important; }
  .welcome-code-card,
  .method-card,
  .welcome-course-card,
  .catalog-course-card,
  .route-card { transition: none !important; }
}

@media (max-width: 760px) {
  .welcome-nav { background: rgba(8,8,10,.94); }
  .welcome-code-card { backdrop-filter: blur(12px); }
  .welcome-primary,
  .welcome-secondary,
  .welcome-nav-cta,
  .welcome-login { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Final public composition layer. These scoped rules intentionally reshape
   the page hierarchy; the monochrome tokens are only the visual foundation. */
body.standalone-page {
  background-color: var(--canvas);
  background-image: none !important;
}
body.standalone-page::before,
body.standalone-page::after { display: none !important; }

.standalone-page a:not([class]) { text-underline-offset: 3px; }
.standalone-page button,
.welcome-stage button,
.standalone-page input,
.standalone-page select,
.standalone-page textarea { font-family: var(--sans); }
.standalone-page button,
.welcome-stage button { transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.standalone-page button:active,
.welcome-stage button:active { transform: translateY(1px); }
.standalone-page input:focus-visible,
.standalone-page select:focus-visible,
.standalone-page textarea:focus-visible,
.standalone-page button:focus-visible,
.standalone-page a:focus-visible,
.welcome-stage button:focus-visible,
.welcome-stage a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Welcome page: a compact masthead, working sample, and open editorial rows. */
#welcomeView {
  --home-measure: 1280px;
  background: var(--canvas);
  background-image: radial-gradient(ellipse at 72% 10%, rgba(255,255,255,.035), transparent 34rem);
}
#welcomeView .welcome-nav {
  min-height: 62px;
  padding-inline: max(22px, calc((100vw - var(--home-measure)) / 2));
  border-color: var(--line);
  background: rgba(8,8,10,.9);
}
#welcomeView .welcome-brand { gap: 10px; font-size: 17px; }
#welcomeView .welcome-brand-mark { width: 31px; height: 31px; border-radius: 5px; }
#welcomeView .welcome-nav nav { gap: clamp(12px, 1.35vw, 20px); }
#welcomeView .welcome-nav nav a { position: relative; color: var(--muted); font-size: 12px; }
#welcomeView .welcome-nav nav a:hover { color: var(--ink); }
#welcomeView .welcome-nav nav a::after { height: 1px; bottom: -5px; transform-origin: left; }
#welcomeView .welcome-nav-actions { gap: 6px; }
#welcomeView .welcome-nav-cta,
#welcomeView .welcome-primary { min-height: 42px; padding-inline: 14px; border-radius: 4px; }
#welcomeView .welcome-secondary,
#welcomeView .welcome-theme,
#welcomeView .welcome-login { min-height: 40px; border-radius: 4px; }
#welcomeView .welcome-hero {
  width: min(var(--home-measure), calc(100% - 48px));
  min-height: min(650px, calc(100svh - 62px));
  grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr);
  gap: clamp(40px,7vw,100px);
  padding: clamp(62px,7vw,94px) 0 clamp(58px,6vw,82px);
}
#welcomeView .welcome-copy { max-width: 540px; }
#welcomeView .welcome-kicker { margin-bottom: 16px; font-size: 12px; letter-spacing: .14em; }
#welcomeView .welcome-copy h1 {
  max-width: 10ch;
  font-size: clamp(54px,7vw,92px);
  line-height: .93;
  letter-spacing: -.075em;
  text-wrap: balance;
}
#welcomeView .welcome-copy h1 span { color: #aeb2ba; }
#welcomeView .welcome-intro { max-width: 43ch; margin-top: 19px; font-size: 15px; line-height: 1.7; }
#welcomeView .welcome-hero-actions { gap: 8px; margin: 22px 0 15px; }
#welcomeView .welcome-proof { padding-top: 14px; border-top: 1px solid var(--line); }
#welcomeView .welcome-bit-link { max-width: 410px; margin-top: 18px; border-radius: 5px; }
#welcomeView .welcome-visual { min-height: 0; padding: 0; }
#welcomeView .welcome-visual-halo { width: min(82%, 580px); border-radius: 8px; opacity: .24; }
#welcomeView .welcome-links { opacity: .36; }
#welcomeView .welcome-code-card {
  width: 100%;
  max-width: 650px;
  padding: clamp(16px,2vw,22px);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 52%), rgba(13,14,18,.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 58px rgba(0,0,0,.32);
  animation: none;
}
#welcomeView .welcome-code { min-height: 92px; padding: 15px; border-radius: 4px; }
#welcomeView .welcome-preview-steps { margin-block: 14px; }
#welcomeView .welcome-preview-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
#welcomeView .welcome-node {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  padding-inline: 8px;
  border-radius: 4px;
  white-space: nowrap;
}
#welcomeView .welcome-node[aria-pressed="true"] { border-color: rgba(244,244,246,.36); background: #202227; }
#welcomeView .welcome-agent { right: 0; bottom: -54px; border-radius: 4px; box-shadow: none; }
#welcomeView .welcome-language-strip,
#welcomeView .welcome-method,
#welcomeView .welcome-courses,
#welcomeView .welcome-footer { width: min(var(--home-measure), calc(100% - 48px)); padding-inline: 0; }
#welcomeView .welcome-language-strip { padding-block: 22px 26px; border-block: 1px solid var(--line); }
#welcomeView .strip-label { margin-bottom: 10px; color: var(--quiet); font-size: 12px; letter-spacing: .14em; }
#welcomeView .welcome-marquee { overflow: visible; border: 0; }
#welcomeView .welcome-marquee-track { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px 18px; width: auto; min-width: 0; padding-block: 5px; }
#welcomeView .ticker-language { min-height: 30px; padding: 5px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
#welcomeView .welcome-runtime-bar { margin-top: 18px; border-block: 1px solid var(--line); }
#welcomeView .welcome-runtime-bar > div { padding: 12px 14px; }
#welcomeView .welcome-method,
#welcomeView .welcome-courses { padding-block: clamp(52px,6vw,78px); border-top: 0; }
#welcomeView .welcome-method { border-bottom: 1px solid var(--line2); }
#welcomeView .welcome-section-head { margin-bottom: 25px; }
#welcomeView .welcome-section-head h2 { max-width: 15ch; font-size: clamp(34px,4vw,52px); line-height: 1; letter-spacing: -.06em; }
#welcomeView .welcome-section-head h2 span { color: #aeb2ba; }
#welcomeView .welcome-section-head > p { max-width: 42ch; font-size: 14px; line-height: 1.7; }
#welcomeView .method-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}
#welcomeView .method-card {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  grid-template-rows: auto 72px auto auto;
  align-content: start;
  column-gap: 15px;
  min-height: 0;
  padding: 20px 22px 22px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color .18s ease;
}
#welcomeView .method-card + .method-card { padding-left: 22px; border-left: 1px solid var(--line); }
#welcomeView .method-card:hover { transform: none; background: rgba(255,255,255,.018); box-shadow: none; }
#welcomeView .method-number { grid-row: 1 / span 4; padding-top: 3px; color: var(--quiet); font: 12px var(--mono); }
#welcomeView .method-illustration { grid-column: 2; min-height: 72px; margin: 0; border: 0; border-radius: 0; background: none; }
#welcomeView .method-illustration > span { border-radius: 3px; }
#welcomeView .method-card h3 { grid-column: 2; margin: 9px 0 5px; font-size: 17px; letter-spacing: -.03em; }
#welcomeView .method-card p { grid-column: 2; max-width: 35ch; margin: 0; font-size: 13px; line-height: 1.65; }
#welcomeView .welcome-course-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 28px; border-top: 1px solid var(--line2); }
#welcomeView .welcome-course-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 0 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color .18s ease, padding-inline .18s ease;
}
#welcomeView .welcome-course-card:hover,
#welcomeView .welcome-course-card:focus-within { transform: none; border-color: var(--line2); background: rgba(255,255,255,.018); box-shadow: none; }
#welcomeView .welcome-course-card h3 { margin: 15px 0 5px; font-size: 23px; }
#welcomeView .welcome-course-card > p { min-height: 0; max-width: 39ch; margin: 0 0 12px; font-size: 13px; line-height: 1.65; }
#welcomeView .course-meta { margin-top: auto; padding-top: 10px; }
#welcomeView .welcome-course-card > button { justify-content: space-between; min-height: 40px; margin-top: 6px; border-top: 1px solid var(--line); color: var(--ink); }
#welcomeView .welcome-course-card > button:hover { color: #fff; }
#welcomeView .welcome-courses-foot { align-items: center; margin-top: 13px; }
#welcomeView .welcome-coach {
  width: min(var(--home-measure), calc(100% - 48px));
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(32px,7vw,100px);
  margin: 0 auto;
  padding: clamp(42px,6vw,74px) 0;
  border: 0;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
#welcomeView .coach-copy h2 { font-size: clamp(38px,5vw,60px); }
#welcomeView .coach-demo { border-radius: 6px; background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 62%), #0d0e12; }
#welcomeView .welcome-footer { grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 14px 28px; padding-block: 20px 28px; }
#welcomeView .welcome-footer > span { color: var(--quiet); }
#welcomeView .welcome-footer .footer-links { justify-content: flex-end; gap: 8px 16px; }
#welcomeView .welcome-footer #welcomeFooterStart { grid-column: 2; justify-self: end; min-height: 39px; }

/* Guide pages: reading-first, navigable chapters with fewer repeated panels. */
.docs-shell { max-width: 1320px; }
.docs-hero { align-items: end; padding-bottom: 32px; }
.docs-hero h1 { max-width: 12ch; font-size: clamp(42px,6vw,76px); }
.docs-search { max-width: 670px; border-radius: 5px; box-shadow: none; }
.docs-layout { grid-template-columns: 210px minmax(0,1fr); gap: clamp(30px,5vw,72px); }
.docs-rail { top: 82px; }
.docs-rail nav a { border-radius: 0; }
.docs-section { padding-block: 36px 42px; }
.docs-section > header h2 { max-width: 18ch; }
#guideSections .docs-card-grid { gap: 0 28px; border-top: 1px solid var(--line2); }
#guideSections .docs-card {
  padding: 17px 0 19px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: color .16s ease, background-color .16s ease;
}
#guideSections .docs-card:hover { transform: none; border-color: var(--line2); background: rgba(255,255,255,.018); }
#guideSections .docs-card-wide { grid-column: 1/-1; }
.docs-flow { border-radius: 5px; box-shadow: none; }
.docs-link-grid a { border-radius: 4px; }
.docs-endcap { border-radius: 6px; }

/* Catalog: search remains pinned; entries read as a course index, not tiles. */
#catalogMain .catalog-hero { padding-top: 24px; }
#catalogMain .catalog-count-panel { padding-left: 20px; }
#catalogMain .catalog-controls { top: 64px; border-radius: 5px; box-shadow: none; }
#catalogMain .catalog-grid { gap: 0 28px; border-top: 1px solid var(--line2); }
#catalogMain .catalog-course-card {
  min-height: 0;
  padding: 15px 0 17px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color .16s ease;
}
#catalogMain .catalog-course-card:hover { transform: none; border-color: var(--line2); background: rgba(255,255,255,.018); }
#catalogMain .catalog-course-summary { min-height: 0; }
#catalogMain .catalog-course-focus { border-left-width: 1px; border-radius: 0; background: rgba(255,255,255,.025); }
#catalogMain .catalog-course-meta span { border-radius: 3px; }
#catalogMain .catalog-brief { border-color: var(--line); }
#catalogMain .catalog-brief summary { min-height: 36px; }
#catalogMain .catalog-course-footer { padding-top: 10px; }
#catalogMain .catalog-side { gap: 0; border-top: 1px solid var(--line2); }
#catalogMain .catalog-note { padding: 17px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
#catalogMain .catalog-note-accent { border-color: var(--line); }
#catalogMain .catalog-more { border-radius: 4px; }

/* Pricing: make the decision steps explicit and align every plan to one grid. */
.plans-main { max-width: 1240px; }
.plans-hero-row { grid-template-columns: minmax(0,1fr) 250px; gap: clamp(26px,5vw,72px); }
.plans-hero h1 { max-width: 11ch; }
.plans-trust { border-radius: 6px; }
.plans-proofline { border-radius: 0; }
.plan-picker-head { align-items: end; }
.duration-switch { border-radius: 5px; box-shadow: none; }
.duration-switch button { border-radius: 3px; }
.plan-grid { gap: 0 22px; border-top: 1px solid var(--line2); }
.plan-card {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color .16s ease;
}
.plan-card:hover,
.plan-card.is-featured { transform: none; border-color: var(--line2); background: rgba(255,255,255,.018); box-shadow: none; }
.plan-card.is-featured::before { display: none; }
.plan-card-action { border-radius: 4px; }
.plan-compare-wrap,
.billing-table-wrap { border-radius: 5px; }

/* Browser tools: put the active utility and its controls in one clear workbench. */
.tools-shell { max-width: 1240px; }
.tools-hero { padding-bottom: 30px; }
.tool-tabs { display: flex; flex-wrap: wrap; gap: 3px; border: 1px solid var(--line); border-radius: 5px; box-shadow: none; }
.tool-tabs button { border-radius: 3px; }
.tool-panel { border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.tool-panel-head { align-items: start; }
.tool-panel label { color: var(--muted); }
.tool-panel textarea,
.tool-panel input[type="text"],
.tool-panel input[type="number"] { border-radius: 3px; }
.tool-output { border-left: 1px solid var(--line2); border-radius: 0 3px 3px 0; }

/* Support, routes, and reference: keep the task prominent, remove card noise. */
.support-center-main { max-width: 1120px; }
.support-center-grid { gap: 0; border-top: 1px solid var(--line2); }
.support-center-grid .support-ticket-section,
.support-center-grid .support-ticket-history {
  padding: 24px 24px 24px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.support-center-grid .support-ticket-history { padding-left: 24px; border-left: 1px solid var(--line); }
.support-center-grid .support-ticket-form input,
.support-center-grid .support-ticket-form textarea { border-radius: 4px; }
.support-center-footnote { border-radius: 0; }
.route-finder-form { border-radius: 5px; }
.route-card { border-radius: 0; }
.reference-controls { border-radius: 5px; }
.reference-entry,
.reference-item { border-radius: 0; }
.faq-group { gap: clamp(24px,5vw,72px); }
.faq-item { border-radius: 0; }
.legal-copy h2 { scroll-margin-top: 88px; }

@media (max-width: 980px) {
  #welcomeView .welcome-nav { gap: 18px; }
  #welcomeView .welcome-nav nav { gap: 10px; }
  #welcomeView .welcome-hero { gap: 32px; }
  #welcomeView .welcome-course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .support-center-grid { grid-template-columns: 1fr; }
  .support-center-grid .support-ticket-section,
  .support-center-grid .support-ticket-history { padding: 22px 0; }
  .support-center-grid .support-ticket-history { border-left: 0; }
}

@media (max-width: 720px) {
  #welcomeView .welcome-nav { min-height: 58px; padding-inline: 16px; }
  #welcomeView .welcome-nav nav { display: none; }
  #welcomeView .welcome-hero,
  #welcomeView .welcome-language-strip,
  #welcomeView .welcome-method,
  #welcomeView .welcome-courses,
  #welcomeView .welcome-coach,
  #welcomeView .welcome-footer { width: calc(100% - 32px); }
  #welcomeView .welcome-hero { min-height: 0; grid-template-columns: 1fr; gap: 34px; padding-block: 48px 56px; }
  #welcomeView .welcome-copy h1 { max-width: 9ch; font-size: clamp(48px,12vw,68px); }
  #welcomeView .welcome-visual { padding-bottom: 42px; }
  #welcomeView .welcome-agent { bottom: -2px; }
  #welcomeView .welcome-preview-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #welcomeView .welcome-runtime-bar { grid-template-columns: 1fr; }
  #welcomeView .welcome-runtime-bar > div + div { padding-left: 14px; border-top: 1px solid var(--line); border-left: 0; }
  #welcomeView .welcome-section-head { grid-template-columns: 1fr; gap: 10px; }
  #welcomeView .method-grid,
  #welcomeView .welcome-course-grid { grid-template-columns: 1fr; }
  #welcomeView .method-card { grid-template-rows: auto 56px auto auto; padding: 17px 0; }
  #welcomeView .method-card + .method-card { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  #welcomeView .welcome-course-card { padding-block: 16px; }
  #welcomeView .welcome-coach { grid-template-columns: 1fr; gap: 25px; padding-block: 42px; }
  #welcomeView .welcome-footer { grid-template-columns: 1fr; }
  #welcomeView .welcome-footer .footer-links { justify-content: flex-start; }
  #welcomeView .welcome-footer #welcomeFooterStart { grid-column: 1; justify-self: start; }
  #catalogMain .catalog-grid { grid-template-columns: 1fr; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-rail { position: static; max-height: none; }
  .docs-hero { grid-template-columns: 1fr; }
  .docs-card-grid { grid-template-columns: 1fr; }
  .docs-card-wide { grid-column: auto; }
  .plans-hero-row { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { padding-block: 18px; }
  .faq-group { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #welcomeView .welcome-visual-halo,
  #welcomeView .welcome-code-card,
  #welcomeView .welcome-agent,
  #welcomeView .method-card,
  #welcomeView .welcome-course-card,
  #catalogMain .catalog-course-card,
  .plan-card,
  .standalone-page button,
  .welcome-stage button { animation: none !important; transition: none !important; }
}

/* Keep the current language picker animated after legacy homepage overrides. */
#welcomeView .welcome-marquee { overflow: hidden; border: 1px solid var(--home-line); border-radius: 8px; background: var(--home-panel); }
#welcomeView .welcome-marquee-track {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: max-content;
  min-width: max-content;
  gap: 0;
  padding: 9px 7px;
  animation: welcome-language-drift 52s linear infinite;
  will-change: transform;
}
#welcomeView .welcome-marquee:hover .welcome-marquee-track,
#welcomeView .welcome-marquee:focus-within .welcome-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  #welcomeView .welcome-marquee { overflow-x: auto; scrollbar-width: thin; mask-image: none; }
  #welcomeView .welcome-marquee-track { animation: none !important; will-change: auto; }
}