:root {
  --hero: #111214;
  --hero-soft: #191a1d;
  --paper: #f4f0e9;
  --paper-deep: #e8e1d5;
  --ink: #1d2927;
  --body: #46524d;
  --muted: #69736e;
  --terracotta: #984126;
  --terracotta-bright: #d97757;
  --on-dark: #fffaf2;
  --on-dark-muted: rgba(255, 250, 242, .7);
  --line: rgba(29, 41, 39, .16);
  --line-dark: rgba(255, 250, 242, .14);
  --sidebar-width: 226px;
  --topbar-height: 60px;
  --font-body: "Space Grotesk", Arial, sans-serif;
  --font-display: "Space Grotesk", Arial, sans-serif;
  --font-label: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--body); background: var(--paper); font: 16px/1.58 var(--font-body); -webkit-font-smoothing: antialiased; }
button, a, textarea { font: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(217, 119, 87, .48); outline-offset: 3px; }
.module-main h1[tabindex="-1"]:focus, .module-main h2[tabindex="-1"]:focus { outline: none; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 9px 12px; color: var(--hero); background: var(--on-dark); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.module-shell { width: 100%; min-height: 100vh; }

.module-layout { min-height: 100vh; }
.module-main { min-width: 0; overflow: clip; }

.step-sidebar { position: sticky; z-index: 8; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px 16px; overflow-y: auto; color: var(--on-dark); background: linear-gradient(180deg, #17181b 0%, var(--hero) 62%); border-right: 1px solid var(--line-dark); scrollbar-width: thin; scrollbar-color: rgba(255, 250, 242, .18) transparent; }
.brand { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; padding: 3px 6px 16px; color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.brand > img { width: 32px; height: 32px; border-radius: 7px; }
.brand-copy { display: grid; gap: 4px; line-height: 1; }
.brand strong { font-size: .9rem; letter-spacing: -.025em; }
.brand strong span { color: var(--terracotta-bright); }
.brand small { color: var(--on-dark-muted); font-size: .7rem; }
.portal-quick-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 11px 5px 13px; border-bottom: 1px solid var(--line-dark); }
.portal-quick-nav > span { grid-column: 1 / -1; color: var(--terracotta-bright); font: 600 .56rem/1.2 var(--font-label); letter-spacing: .11em; text-transform: uppercase; }
.portal-quick-nav a { min-width: 0; min-height: 32px; display: flex; gap: 5px; align-items: center; padding: 6px 7px; overflow: hidden; color: var(--on-dark-muted); text-decoration: none; background: rgba(255,250,242,.025); border: 1px solid var(--line-dark); border-radius: 6px; font-size: .61rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.portal-quick-nav a:hover { color: var(--on-dark); background: rgba(255,250,242,.06); }
.portal-quick-nav a.is-current { color: var(--on-dark); background: rgba(217,119,87,.09); border-color: rgba(217,119,87,.42); }
.portal-quick-nav b { flex: 0 0 auto; color: var(--terracotta-bright); font: 600 .53rem/1 var(--font-label); }
.sidebar-intro { display: grid; gap: 4px; padding: 18px 6px 13px; }
.sidebar-intro > span, .sidebar-result > span { color: var(--terracotta-bright); font: 600 .64rem/1.35 var(--font-label); letter-spacing: .11em; text-transform: uppercase; }
.sidebar-intro strong { color: var(--on-dark); font-family: var(--font-display); font-size: 1.06rem; line-height: 1.08; }
.sidebar-intro p { color: var(--on-dark-muted); font-size: .69rem; line-height: 1.42; }

.progress { display: grid; border-top: 1px solid var(--line-dark); }
.progress button { position: relative; min-width: 0; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 11px 8px 11px 9px; color: var(--on-dark-muted); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); border-left: 3px solid transparent; cursor: pointer; }
.progress b { color: rgba(255, 250, 242, .4); font: 600 .62rem/1 var(--font-label); letter-spacing: .08em; }
.progress span { overflow: hidden; font-size: .74rem; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.progress i { color: var(--terracotta-bright); font: 600 .7rem/1 var(--font-label); font-style: normal; }
.progress .is-current { color: var(--on-dark); background: rgba(255, 250, 242, .055); border-left-color: var(--terracotta-bright); }
.progress .is-current b, .progress .is-done b { color: var(--terracotta-bright); }
.progress .is-done { color: rgba(255, 250, 242, .82); }
.progress .is-locked { opacity: .38; cursor: not-allowed; }
.sidebar-result { display: grid; gap: 4px; padding: 13px 9px; margin-top: auto; background: rgba(255, 250, 242, .045); border: 1px solid var(--line-dark); border-radius: 9px; }
.sidebar-result strong { color: var(--on-dark); font-size: .76rem; }
.sidebar-result small { color: var(--on-dark-muted); font-size: .65rem; line-height: 1.32; }

.module-header { position: sticky; z-index: 7; top: 0; color: var(--on-dark); background: rgba(17, 18, 20, .96); border-bottom: 1px solid var(--line-dark); backdrop-filter: blur(12px); }
.module-header-inner { width: min(1180px, calc(100% - 40px)); min-height: var(--topbar-height); display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(150px, 220px) auto; align-items: center; gap: 20px; margin: 0 auto; padding: 8px 0; }
.module-home { display: flex; gap: 9px; align-items: center; color: var(--on-dark); text-decoration: none; }
.module-home img { width: 30px; height: 30px; border-radius: 7px; }
.module-home > span { display: grid; gap: 2px; line-height: 1; }
.module-home strong { font-size: .75rem; }
.module-home small { color: var(--on-dark-muted); font: 500 .53rem/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.module-title { display: grid; gap: 2px; }
.module-title span { color: var(--terracotta-bright); font: 600 .62rem/1.35 var(--font-label); letter-spacing: .11em; text-transform: uppercase; }
.module-title strong { color: var(--on-dark); font-size: .78rem; }
.module-header p { display: flex; gap: 8px; margin: 0; color: var(--on-dark); font: 600 .72rem/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.module-header p span { color: var(--on-dark-muted); }
.module-progress { display: grid; grid-template-columns: minmax(70px, 1fr) auto; gap: 10px; align-items: center; }
.module-progress > i { height: 4px; overflow: hidden; background: rgba(255,250,242,.11); border-radius: 99px; }
.module-progress > i > b { display: block; height: 100%; background: var(--terracotta-bright); border-radius: inherit; transition: width 180ms ease; }
.module-header-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.module-reset { padding: 0 0 2px; color: var(--terracotta-bright); background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font: 700 .65rem/1.4 var(--font-body); white-space: nowrap; }
.module-reset:hover { color: var(--on-dark); }
.module-exit { padding-bottom: 2px; color: var(--on-dark-muted); text-decoration: none; border-bottom: 1px solid currentColor; font-size: .65rem; font-weight: 700; white-space: nowrap; }
.module-exit:hover { color: var(--on-dark); }
.sidebar-toggle { display: none; align-items: center; gap: 9px; padding: 8px 10px; color: var(--on-dark); background: transparent; border: 1px solid var(--line-dark); border-radius: 8px; cursor: pointer; }
.sidebar-toggle b { font-size: .76rem; }
.menu-icon { width: 17px; display: grid; gap: 3px; }
.menu-icon i { display: block; height: 1px; background: currentColor; }
.module-brand-symbol { display: none; flex: 0 0 auto; }
.module-brand-symbol img { display: block; width: 30px; height: 30px; border-radius: 7px; }
.sidebar-overlay { display: none; }

.welcome { min-height: calc(100svh - var(--topbar-height)); display: grid; overflow: hidden; color: var(--on-dark); background: radial-gradient(circle at 78% 22%, rgba(217, 119, 87, .14), transparent 34%), var(--hero); }
.welcome-inner { width: min(1100px, calc(100% - 48px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: clamp(30px, 4vw, 52px); align-items: center; margin: 0 auto; padding: 14px 0 20px; }
.kicker { display: block; margin: 0 0 10px; color: var(--terracotta); font: 600 .68rem/1.4 var(--font-label); letter-spacing: .13em; text-transform: uppercase; }
.welcome .kicker { color: var(--terracotta-bright); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--ink); font-family: var(--font-display); }
h1 { max-width: 12ch; color: var(--on-dark); font-size: clamp(2.7rem, 4.4vw, 4rem); line-height: .98; letter-spacing: -.045em; }
h1 > span { display: block; color: var(--terracotta-bright); }
.welcome-copy > p { max-width: 56ch; margin-top: 14px; color: var(--on-dark-muted); font-size: clamp(.92rem, 1.1vw, 1rem); }
.welcome-contrast { max-width: 660px; display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.welcome-contrast > div { display: grid; gap: 5px; padding: 14px 17px 15px 0; }
.welcome-contrast > div + div { padding-left: 17px; border-left: 1px solid var(--line-dark); }
.welcome-contrast span { color: var(--terracotta-bright); font: 600 .6rem/1.4 var(--font-label); letter-spacing: .09em; text-transform: uppercase; }
.welcome-contrast strong { color: var(--on-dark); font-size: .78rem; line-height: 1.4; }
.desktop-commitment { max-width: 700px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: center; margin-top: 14px; padding: 9px 12px; background: rgba(217, 119, 87, .09); border: 1px solid rgba(217, 119, 87, .28); border-left: 3px solid var(--terracotta-bright); border-radius: 8px; }
.desktop-commitment > span { color: var(--terracotta-bright); font: 600 .56rem/1.4 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.desktop-commitment > div { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.desktop-commitment strong { color: var(--on-dark); font-size: .72rem; }
.desktop-commitment p { color: var(--on-dark-muted); font-size: .67rem; line-height: 1.4; }
.welcome-copy > .welcome-tools { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 14px; color: var(--on-dark-muted); font: 500 .66rem/1.5 var(--font-label); }
.welcome-tools span { color: var(--terracotta-bright); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.welcome-route { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; color: rgba(255, 250, 242, .74); font: 500 .64rem/1.4 var(--font-label); letter-spacing: .1em; }
.welcome-route span + span::before { margin-right: 18px; color: var(--terracotta-bright); content: "·"; }
.start-map { max-width: 700px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.start-map article { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 11px 9px 12px 0; }
.start-map article + article { padding-left: 9px; border-left: 1px solid var(--line-dark); }
.start-map b { color: var(--terracotta-bright); font: 600 .56rem/1.2 var(--font-label); }
.start-map span { color: var(--on-dark); font-size: .62rem; font-weight: 600; line-height: 1.25; }
.start-map small { display: none; color: var(--on-dark-muted); font-size: .52rem; line-height: 1.35; }
.entry-actions { display: grid; grid-template-columns: minmax(240px, max-content) minmax(0, 1fr); gap: 15px; align-items: center; margin-top: 14px; }
.entry-button { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 17px; color: white; text-align: left; background: var(--terracotta); border: 1px solid var(--terracotta); border-radius: 9px; cursor: pointer; font-weight: 700; transition: background 160ms ease, transform 160ms ease; }
.entry-button:hover { background: #7f351f; transform: translateY(-1px); }
.entry-button b { font-size: 1.2rem; }
.entry-actions small { max-width: 28ch; color: var(--on-dark-muted); font-size: .7rem; line-height: 1.45; }

.result-card { position: relative; width: 100%; max-width: 300px; aspect-ratio: 4 / 5; margin: 0 0 0 auto; overflow: hidden; border: 1px solid var(--line-dark); border-radius: 14px; box-shadow: 0 22px 55px rgba(0, 0, 0, .25); }
.result-card picture, .result-card img { display: block; width: 100%; height: 100%; }
.result-card img { object-fit: cover; }
.result-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 9px; padding: 78px 17px 16px; background: linear-gradient(to bottom, rgba(17,18,20,0), rgba(17,18,20,.88) 47%, rgba(17,18,20,.98) 72%); }
.result-card figcaption > span { color: var(--terracotta-bright); font: 600 .61rem/1.4 var(--font-label); letter-spacing: .11em; text-transform: uppercase; }
.result-card figcaption > div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.result-card strong { display: flex; gap: 6px; align-items: center; color: var(--on-dark); font-size: .76rem; }
.result-card i { color: var(--terracotta-bright); font: 600 .6rem/1 var(--font-label); font-style: normal; }

.module-workspace { width: min(960px, calc(100% - 48px)); min-height: calc(100svh - var(--topbar-height)); margin: 0 auto; padding: 30px 0 46px; }

.work-card { max-width: 860px; margin: 0 auto; padding: clamp(30px, 4.5vw, 52px); background: rgba(255, 255, 255, .28); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 22px 55px rgba(29, 41, 39, .06); animation: card-enter 240ms ease-out both; }
.step-meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; color: var(--terracotta); font: 600 .66rem/1.4 var(--font-label); letter-spacing: .11em; text-transform: uppercase; }
h2 { max-width: 14ch; font-size: clamp(2.1rem, 4.1vw, 3.55rem); line-height: 1; letter-spacing: -.043em; }
.work-card > p { max-width: 650px; margin-top: 16px; color: var(--body); font-size: 1rem; }

.module-guide { display: grid; gap: 24px; margin-top: 30px; }
.guide-promise { display: grid; gap: 10px; padding: 22px 24px; background: var(--paper-deep); border-left: 3px solid var(--terracotta); border-radius: 0 10px 10px 0; }
.guide-promise .kicker { margin: 0; }
.guide-promise h3 { max-width: 28ch; font-size: clamp(1.45rem, 2.7vw, 2rem); line-height: 1.08; }
.guide-promise p { max-width: 690px; color: var(--body); font-size: .9rem; }
.guide-rules { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--terracotta); border-bottom: 1px solid var(--line); }
.guide-rules article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 18px; }
.guide-rules article + article { border-left: 1px solid var(--line); }
.guide-rules article > span { color: var(--terracotta); font: 600 .66rem/1.4 var(--font-label); }
.guide-rules article > div { display: grid; gap: 5px; }
.guide-rules strong { color: var(--ink); font-size: .9rem; }
.guide-rules p { color: var(--body); font-size: .8rem; line-height: 1.5; }
.guide-journey { display: grid; gap: 20px; padding: 24px; background: rgba(255, 255, 255, .28); border: 1px solid var(--line); border-radius: 12px; }
.guide-journey ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; margin: 0; border-top: 2px solid var(--terracotta); border-bottom: 1px solid var(--line); list-style: none; }
.guide-journey li { display: grid; align-content: start; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; min-width: 0; padding: 16px 11px 16px 0; }
.guide-journey li + li { padding-left: 11px; border-left: 1px solid var(--line); }
.guide-journey li > span { color: var(--terracotta); font: 600 .6rem/1.5 var(--font-label); }
.guide-journey li > div { display: grid; align-content: start; gap: 6px; }
.guide-journey li strong { color: var(--ink); font-size: .76rem; line-height: 1.35; }
.guide-journey li p { color: var(--body); font-size: .68rem; line-height: 1.45; }
.guide-journey code { color: var(--terracotta); font-family: var(--font-label); }
.guide-journey > aside { display: grid; grid-template-columns: minmax(140px, .42fr) minmax(0, 1.58fr); gap: 18px; padding: 17px 18px; color: var(--on-dark); background: var(--hero); border-radius: 9px; }
.guide-journey > aside > span { color: var(--terracotta-bright); font: 600 .6rem/1.4 var(--font-label); letter-spacing: .09em; text-transform: uppercase; }
.guide-journey > aside > div { display: grid; gap: 5px; }
.guide-journey > aside strong { color: var(--on-dark); font-size: .84rem; line-height: 1.42; }
.guide-journey > aside p { color: var(--on-dark-muted); font-size: .74rem; line-height: 1.5; }
.guide-knowledge { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: 20px; background: rgba(255, 255, 255, .28); border: 1px solid var(--line); border-radius: 11px; }
.guide-knowledge-sample { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 15px 16px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--terracotta); border-radius: 8px; box-shadow: 0 10px 24px rgba(29, 41, 39, .06); }
.guide-knowledge-sample span { grid-column: 1; color: var(--terracotta); font: 600 .57rem/1.35 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.guide-knowledge-sample strong { grid-column: 1; color: var(--ink); font-size: .78rem; line-height: 1.35; }
.guide-knowledge-sample b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--terracotta); font-size: 1.25rem; font-weight: 400; }
.guide-knowledge > div:last-child { display: grid; gap: 7px; }
.guide-knowledge h3 { max-width: 26ch; font-size: 1.25rem; line-height: 1.12; }
.guide-knowledge p { color: var(--body); font-size: .82rem; line-height: 1.5; }
.guide-language { display: grid; gap: 18px; padding: 24px; color: var(--on-dark); background: var(--hero); border-radius: 13px; }
.guide-language .section-heading h3 { color: var(--on-dark); }
.guide-language .section-heading p { color: var(--on-dark-muted); }
.guide-language-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.guide-language-grid article { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 18px; }
.guide-language-grid article + article { border-left: 1px solid var(--line-dark); }
.guide-language-grid span { color: var(--terracotta-bright); font: 600 .59rem/1.35 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.guide-language-grid strong { color: var(--on-dark); font-size: .82rem; line-height: 1.4; }
.guide-language-grid p { color: var(--on-dark-muted); font-size: .74rem; line-height: 1.48; }
.guide-language-note { padding: 12px 14px; color: var(--on-dark) !important; background: rgba(217, 119, 87, .1); border-left: 2px solid var(--terracotta-bright); font-size: .8rem; line-height: 1.48; }
.guide-navigation { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide-navigation > div { display: grid; gap: 7px; }
.guide-navigation h3 { font-size: 1.3rem; line-height: 1.1; }
.guide-navigation p { color: var(--body); font-size: .82rem; }
.guide-navigation > div:last-child span { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); gap: 12px; padding: 10px 0; }
.guide-navigation > div:last-child span + span { border-top: 1px solid var(--line); }
.guide-navigation b { color: var(--terracotta); font-size: .76rem; }
.guide-navigation small { color: var(--body); font-size: .73rem; line-height: 1.4; }
.guide-important { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; background: rgba(152, 65, 38, .07); border: 1px solid rgba(152, 65, 38, .2); border-radius: 10px; }
.guide-important > span { color: var(--terracotta); font: 600 .58rem/1.4 var(--font-label); letter-spacing: .09em; text-transform: uppercase; }
.guide-important > div { display: grid; gap: 4px; }
.guide-important strong { color: var(--ink); font-size: .86rem; }
.guide-important p { color: var(--body); font-size: .78rem; line-height: 1.48; }
.concept-marker { display: grid; grid-template-columns: minmax(145px, .45fr) minmax(0, 1.55fr); gap: 18px; align-items: start; margin: 24px 0 18px; padding: 18px 20px; background: rgba(152, 65, 38, .07); border: 1px solid rgba(152, 65, 38, .2); border-left: 3px solid var(--terracotta); border-radius: 10px; }
.concept-marker > span { color: var(--terracotta); font: 600 .6rem/1.4 var(--font-label); letter-spacing: .09em; text-transform: uppercase; }
.concept-marker > div { display: grid; gap: 4px; }
.concept-marker strong { color: var(--ink); font-size: .88rem; }
.concept-marker p { color: var(--body); font-size: .78rem; line-height: 1.48; }
.concept-marker code { color: var(--terracotta); font-family: var(--font-label); }
.concept-marker--compact { margin: 18px 0 8px; }

.goal-box { display: grid; gap: 17px; margin: 32px 0 22px; }
.goal-box > p { max-width: 680px; color: var(--body); font-size: .96rem; }
.term-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--terracotta); border-bottom: 1px solid var(--line); }
.term-grid article { min-height: 132px; display: grid; align-content: start; gap: 9px; padding: 18px 20px; }
.term-grid article + article { border-left: 1px solid var(--line); }
.term-grid strong { color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; }
.term-grid span { color: var(--body); font-size: .88rem; line-height: 1.52; }

.example-card { margin: 24px 0 20px; padding: clamp(22px, 3.5vw, 32px); color: var(--on-dark); background: var(--hero); border-radius: 14px; }
.example-card > span { color: var(--terracotta-bright); font: 600 .68rem/1.4 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.example-card h3 { max-width: 19ch; margin: 8px 0 18px; color: var(--on-dark); font-size: clamp(1.55rem, 2.7vw, 2.1rem); line-height: 1.08; }
.example-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.example-card p { color: var(--on-dark-muted); font-size: .9rem; }
.example-card p b { display: block; margin-bottom: 5px; color: var(--on-dark); }
.example-card small { display: block; margin-top: 22px; color: var(--on-dark-muted); font-size: .8rem; }
.intro-close, .creative-note, .privacy-lead, .save-note { padding: 15px 18px; color: var(--ink) !important; background: var(--paper-deep); border-left: 2px solid var(--terracotta); }

.knowledge-note { margin: 26px 0 20px; overflow: hidden; background: rgba(255, 255, 255, .3); border: 1px solid var(--line); border-left: 3px solid var(--terracotta); border-radius: 10px; }
.knowledge-note summary { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 15px 17px; color: var(--ink); cursor: pointer; list-style: none; }
.knowledge-note summary::-webkit-details-marker { display: none; }
.knowledge-note summary > span { display: grid; gap: 3px; }
.knowledge-note summary small { color: var(--terracotta); font: 600 .58rem/1.35 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.knowledge-note summary strong { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: .9rem; line-height: 1.35; }
.knowledge-note summary > b { color: var(--terracotta); font: 400 1.25rem/1 var(--font-body); transition: transform 160ms ease; }
.knowledge-note[open] summary > b { transform: rotate(45deg); }
.knowledge-note-body { display: grid; gap: 13px; padding: 17px; border-top: 1px solid var(--line); }
.knowledge-note-body > p { color: var(--body); font-size: .85rem; }
.knowledge-note-body code { color: var(--terracotta); font-family: var(--font-label); }
.knowledge-emphasis { padding: 13px 15px; color: var(--ink) !important; background: var(--paper-deep); border-radius: 8px; font-weight: 600; }
.knowledge-footnote { font-size: .76rem !important; }
.tool-landscape { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.tool-landscape li { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 15px; }
.tool-landscape li + li { border-left: 1px solid var(--line); }
.tool-landscape li > span { color: var(--terracotta); font: 600 .58rem/1.35 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.tool-landscape li > strong { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: .8rem; }
.tool-landscape li > small { color: var(--body); font-size: .69rem; line-height: 1.42; }
.tool-landscape li.is-current { background: rgba(152, 65, 38, .07); box-shadow: inset 0 3px 0 var(--terracotta); }

.section-heading { display: grid; gap: 8px; }
.section-heading .kicker { margin: 0; }
.section-heading h3 { max-width: 24ch; font-size: clamp(1.55rem, 2.8vw, 2.15rem); line-height: 1.08; letter-spacing: -.025em; }
.section-heading p { max-width: 650px; color: var(--body); font-size: .9rem; }
.route-picker, .tool-picker { display: grid; gap: 18px; margin: 32px 0 24px; scroll-margin-top: calc(var(--topbar-height) + 18px); }
.route-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.route-options button, .tool-options button { position: relative; display: grid; align-content: start; gap: 7px; min-width: 0; padding: 20px; color: var(--body); text-align: left; background: rgba(255, 255, 255, .3); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.route-options button:hover, .tool-options button:hover { border-color: rgba(152, 65, 38, .42); transform: translateY(-1px); }
.route-options button.is-selected, .tool-options button.is-selected { background: rgba(152, 65, 38, .07); border-color: var(--terracotta); box-shadow: inset 0 0 0 1px var(--terracotta); }
.route-options button > span, .tool-options button > span { color: var(--terracotta); font: 600 .64rem/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.route-options strong, .tool-options strong { color: var(--ink); font-family: var(--font-display); font-size: 1.18rem; line-height: 1.15; }
.route-options p, .tool-options p { color: var(--body); font-size: .83rem; line-height: 1.48; }
.route-options button > b { width: fit-content; margin-top: 4px; padding: 4px 7px; color: var(--terracotta); background: rgba(152, 65, 38, .08); border-radius: 5px; font: 600 .62rem/1.4 var(--font-label); }
.tool-picker { padding-top: 25px; border-top: 1px solid var(--line); }
.tool-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tool-options button { padding: 17px; }
.tool-options strong { font-size: 1rem; }
.selection-note { margin: 20px 0; padding: 18px; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 11px; }
.selection-note strong { display: block; color: var(--ink); }
.selection-note p { margin-top: 4px; color: var(--body); font-size: .86rem; }
.chosen-tool, .active-tool { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 11px 14px; color: var(--on-dark); background: var(--hero); border-radius: 10px; }
.chosen-tool { margin: 26px 0 0; scroll-margin-top: calc(var(--topbar-height) + 18px); }
.chosen-tool span, .active-tool span { color: var(--terracotta-bright); font: 600 .62rem/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.chosen-tool strong, .active-tool strong { color: var(--on-dark); font-size: .82rem; }
.chosen-tool button, .active-tool button { margin-left: auto; padding: 2px 0; color: var(--on-dark-muted); background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font-size: .72rem; }
.active-tool { margin: 27px 0 0; }

.setup-guide { display: grid; margin: 32px 0 22px; border-top: 1px solid var(--line); }
.setup-guide > section { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; padding: 19px 0; border-bottom: 1px solid var(--line); }
.setup-number { color: var(--terracotta); font: 600 .72rem/1.4 var(--font-label); letter-spacing: .08em; }
.setup-guide strong { display: block; margin-bottom: 5px; color: var(--ink); font-family: var(--font-display); font-size: 1.22rem; }
.setup-guide p { color: var(--body); font-size: .9rem; }
.inline-action, .learn-more { color: var(--terracotta); font-weight: 700; }
.step-check { display: flex; gap: 10px; align-items: center; width: fit-content; margin-top: 14px; color: var(--ink); font-size: .86rem; font-weight: 600; cursor: pointer; }
.step-check input { width: 19px; height: 19px; margin: 0; accent-color: var(--terracotta); }
.privacy-lead { margin: 12px 0 16px; font-size: .88rem !important; }
.privacy-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 17px; }
.privacy-paths--single { grid-template-columns: 1fr; }
.privacy-paths > div { padding: 15px 16px; background: rgba(255, 255, 255, .24); border: 1px solid var(--line); border-radius: 10px; }
.privacy-paths > div > span { color: var(--ink); font: 600 .66rem/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.click-path { display: grid; gap: 8px; padding-left: 23px; margin: 15px 0; color: var(--body); font-size: .88rem; }
.click-path li::marker { color: var(--terracotta); font-family: var(--font-label); font-weight: 600; }
.learn-more { display: inline-block; margin-top: 10px; font-size: .86rem; }
#privacy-settings, #dictation-test, #screen-help { scroll-margin-top: calc(var(--topbar-height) + 20px); }
.lesson-label { display: block; margin-bottom: 5px; color: var(--terracotta); font: 600 .63rem/1.4 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.dictation-test { display: grid; gap: 9px; padding: 0; margin: 17px 0; list-style: none; }
.dictation-test li { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: 14px; padding: 12px 14px; background: rgba(255, 255, 255, .28); border: 1px solid var(--line); border-radius: 8px; }
.dictation-test b { color: var(--ink); font-size: .8rem; }
.dictation-test span { color: var(--body); font-size: .76rem; line-height: 1.45; }
.dictation-lesson .knowledge-note { margin: 18px 0 6px; }
.screenshot-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; border-top: 2px solid var(--terracotta); border-bottom: 1px solid var(--line); }
.screenshot-flow article { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 16px; }
.screenshot-flow article + article { border-left: 1px solid var(--line); }
.screenshot-flow b { color: var(--ink); font-size: .84rem; }
.screenshot-flow span { color: var(--body); font-size: .76rem; line-height: 1.5; }
.screenshot-flow code { color: var(--terracotta); font: 600 .68rem/1.4 var(--font-label); white-space: nowrap; }
.screenshot-fallback { padding: 12px 14px; color: var(--ink) !important; background: rgba(152, 65, 38, .06); border-left: 2px solid var(--terracotta); }
.screenshot-prompt { margin: 18px 0 6px; }
.screenshot-prompt .prompt-card-top strong { margin: 0; font-family: var(--font-body); font-size: .8rem; }
.screenshot-prompt textarea { height: 225px; }

.action-box { display: grid; gap: 11px; margin: 28px 0 20px; padding: 17px; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 12px; }
.action-box > span { color: var(--body); font: 600 .68rem/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.primary-action, .continue-button { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 18px; color: white; text-align: left; background: var(--terracotta); border: 1px solid var(--terracotta); border-radius: 10px; cursor: pointer; font-weight: 700; transition: background 160ms ease, transform 160ms ease; }
.primary-action:hover, .continue-button:hover { background: #7f351f; transform: translateY(-1px); }
.primary-action { text-decoration: none; }
.action-box a.primary-action { color: white; }
.primary-action b, .continue-button b { font-size: 1.25rem; }
.primary-action.is-copied { background: var(--ink); border-color: var(--ink); }
.action-box > a:not(.primary-action) { width: fit-content; color: var(--terracotta); font-size: .86rem; font-weight: 700; }

.prompt-guide { display: grid; gap: 11px; margin: 32px 0 20px; }
.prompt-guide > span { color: var(--body); font-size: .9rem; }
.prompt-guide textarea { width: 100%; height: 180px; padding: 17px; color: var(--ink); background: var(--paper-deep); border: 1px solid var(--line); border-radius: 12px; font: 13px/1.55 var(--font-label); resize: vertical; }
.file-handoff { margin: -7px 0 20px; padding: 15px 17px; background: rgba(255, 255, 255, .28); border: 1px solid var(--line); border-radius: 10px; }
.file-handoff strong { display: block; color: var(--ink); }
.file-handoff p { margin-top: 4px; color: var(--body); font-size: .84rem; }
.context-bridge { display: grid; gap: 13px; margin: 24px 0; }
.context-bridge .kicker { margin: 0; }
.context-bridge > h3 { max-width: 28ch; font-size: clamp(1.45rem, 2.7vw, 2rem); line-height: 1.08; }
.context-bridge > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--terracotta); border-bottom: 1px solid var(--line); }
.context-bridge article { display: grid; align-content: start; gap: 6px; padding: 17px 18px 17px 0; }
.context-bridge article + article { padding-left: 18px; border-left: 1px solid var(--line); }
.context-bridge article > b { color: var(--terracotta); font: 600 .6rem/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.context-bridge article > strong { color: var(--ink); font-size: .86rem; }
.context-bridge article p { color: var(--body); font-size: .75rem; line-height: 1.48; }
.context-bridge code { color: var(--terracotta); font-family: var(--font-label); }

.profile-purpose { display: grid; gap: 14px; margin: 32px 0 24px; }
.profile-purpose .kicker { margin: 0; }
.profile-purpose h3 { max-width: 22ch; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; }
.profile-purpose > p { max-width: 680px; color: var(--body); font-size: .94rem; }
.file-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--terracotta); border-bottom: 1px solid var(--line); }
.file-benefits article { display: grid; align-content: start; gap: 8px; min-height: 155px; padding: 22px 24px; }
.file-benefits article + article { border-left: 1px solid var(--line); }
.file-benefits b { color: var(--ink); font-family: var(--font-display); font-size: 1.08rem; }
.file-benefits span { color: var(--body); font-size: .82rem; line-height: 1.5; }
.file-benefits code { padding: 1px 4px; color: var(--terracotta); background: rgba(152, 65, 38, .08); border-radius: 3px; font-family: var(--font-label); }
.creative-note { margin-top: 2px; }

.aha-card { display: grid; gap: 18px; margin: 26px 0 8px; padding: clamp(22px, 3.5vw, 32px); color: var(--on-dark); background: radial-gradient(circle at 86% 18%, rgba(217, 119, 87, .16), transparent 34%), var(--hero); border-radius: 14px; }
.aha-card .kicker { margin: 0 0 6px; color: var(--terracotta-bright); }
.aha-card h3 { max-width: 24ch; color: var(--on-dark); font-size: clamp(1.5rem, 2.7vw, 2rem); line-height: 1.08; }
.aha-card p { max-width: 650px; margin-top: 10px; color: var(--on-dark-muted); font-size: .9rem; }
.aha-card code { color: var(--terracotta-bright); font-family: var(--font-label); }
.aha-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.aha-flow span { display: flex; gap: 9px; align-items: flex-start; padding: 14px 14px 14px 0; color: var(--on-dark-muted); font-size: .78rem; line-height: 1.45; }
.aha-flow span + span { padding-left: 14px; border-left: 1px solid var(--line-dark); }
.aha-flow b { color: var(--terracotta-bright); font: 600 .64rem/1.6 var(--font-label); }
.aha-card .primary-action { max-width: 440px; }

.prompt-card { margin: 28px 0 20px; overflow: hidden; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 12px; }
.prompt-card-top { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 20px; color: var(--on-dark); background: var(--hero); }
.prompt-card-top div { display: grid; gap: 3px; }
.prompt-card-top span { color: var(--terracotta-bright); font: 600 .64rem/1.4 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.prompt-card-top strong { color: var(--on-dark); font-size: .86rem; line-height: 1.35; }
.copy-icon { display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; color: var(--ink); background: var(--on-dark); border: 0; border-radius: 8px; cursor: pointer; font-weight: 700; }
.copy-icon span { color: inherit; font: 600 1rem/1 var(--font-label); }
.copy-icon em { font-size: .78rem; font-style: normal; }
.copy-icon.is-copied { color: white; background: var(--terracotta); }
.prompt-card > p { padding: 15px 20px; color: var(--body); font-size: .86rem; }
.prompt-card details { border-top: 1px solid var(--line); }
.prompt-card summary { display: flex; justify-content: space-between; gap: 12px; padding: 15px 20px; color: var(--terracotta); cursor: pointer; font-size: .85rem; font-weight: 700; list-style: none; }
.prompt-card summary::-webkit-details-marker { display: none; }
.prompt-card details[open] summary span { transform: rotate(180deg); }
.prompt-card textarea { display: block; width: calc(100% - 32px); height: 270px; padding: 16px; margin: 0 16px 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font: 12px/1.55 var(--font-label); resize: vertical; }

.question-section { display: grid; gap: 13px; margin: 30px 0 22px; }
.question-section .kicker { margin: 0; }
.question-section h3 { max-width: 24ch; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.08; }
.question-section > p { max-width: 620px; color: var(--body); font-size: .9rem; }
.question-list { display: grid; gap: 10px; margin-top: 5px; }
.question-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 16px; background: rgba(255, 255, 255, .3); border: 1px solid var(--line); border-radius: 11px; }
.question-card > span { color: var(--terracotta); font: 600 .68rem/1.4 var(--font-label); }
.question-card p { color: var(--ink); font-size: .86rem; line-height: 1.48; }
.question-card button { display: inline-flex; gap: 8px; align-items: center; padding: 9px 11px; color: var(--terracotta); background: transparent; border: 1px solid rgba(152, 65, 38, .34); border-radius: 8px; cursor: pointer; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.question-card button:hover, .question-card button.is-copied { color: white; background: var(--terracotta); border-color: var(--terracotta); }

.save-note strong { display: block; color: var(--ink); }
.save-note p { margin-top: 4px; color: var(--body); font-size: .86rem; }
.step-footer { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.step-footer-secondary { display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: center; }
.quiet-button { width: fit-content; padding: 0 0 3px; color: var(--terracotta); background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font-size: .86rem; font-weight: 700; }
.continue-button { width: auto; justify-self: end; }
.continue-button:disabled { color: var(--muted); background: var(--paper-deep); border-color: var(--line); cursor: default; transform: none; }

.privacy { position: fixed; z-index: 10; right: 24px; bottom: 24px; width: min(430px, calc(100% - 48px)); padding: 28px; color: var(--on-dark); background: var(--hero); border: 1px solid var(--line-dark); border-radius: 16px; box-shadow: 0 28px 80px rgba(0, 0, 0, .28); }
.privacy button { position: absolute; top: 10px; right: 14px; color: var(--on-dark-muted); background: transparent; border: 0; cursor: pointer; font-size: 1.5rem; }
.privacy h2 { color: var(--on-dark); font-size: 2rem; }
.privacy p { margin: 14px 0; color: var(--on-dark-muted); }
.privacy a { color: var(--terracotta-bright); font-weight: 700; }
.privacy .kicker { color: var(--terracotta-bright); }

.completion-card { max-width: 860px; margin: 0 auto; overflow: hidden; background: rgba(255, 255, 255, .3); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 22px 55px rgba(29, 41, 39, .06); animation: card-enter 240ms ease-out both; }
.completion-hero { padding: clamp(30px, 5vw, 54px); color: var(--on-dark); background: radial-gradient(circle at 82% 20%, rgba(217, 119, 87, .18), transparent 36%), var(--hero); }
.completion-hero .kicker { color: var(--terracotta-bright); }
.completion-hero h2 { max-width: 16ch; color: var(--on-dark); }
.completion-hero p { max-width: 650px; margin-top: 18px; color: var(--on-dark-muted); }
.completion-hero code { color: var(--terracotta-bright); font-family: var(--font-label); }
.completion-proof { display: grid; gap: 11px; padding: clamp(26px, 4vw, 42px); border-bottom: 1px solid var(--line); }
.completion-proof > span { color: var(--terracotta); font: 600 .65rem/1.4 var(--font-label); letter-spacing: .09em; text-transform: uppercase; }
.completion-proof h3 { max-width: 24ch; margin-bottom: 7px; font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1.1; }
.completion-proof label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: .88rem; }
.completion-proof input { width: 19px; height: 19px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--terracotta); }
.learning-recap { display: grid; gap: 20px; padding: clamp(26px, 4vw, 42px); border-bottom: 1px solid var(--line); }
.learning-recap > div:not(.section-heading) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--terracotta); border-bottom: 1px solid var(--line); }
.learning-recap article { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 17px 16px 17px 0; }
.learning-recap article + article { padding-left: 16px; border-left: 1px solid var(--line); }
.learning-recap article span { color: var(--terracotta); font: 600 .6rem/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.learning-recap article strong { color: var(--ink); font-size: .82rem; line-height: 1.4; }
.learning-recap article p { color: var(--body); font-size: .72rem; line-height: 1.48; }
.learning-recap code { color: var(--terracotta); font-family: var(--font-label); }
.learning-recap-note { padding: 14px 16px; color: var(--ink); background: var(--paper-deep); border-left: 2px solid var(--terracotta); font-size: .8rem; line-height: 1.5; }
.ai-first-scale { display: grid; gap: 24px; padding: clamp(28px, 4.5vw, 46px); color: var(--on-dark); background: var(--hero); border-bottom: 1px solid var(--line-dark); }
.ai-first-scale .kicker { margin-bottom: 6px; color: var(--terracotta-bright); }
.ai-first-scale h3 { max-width: 22ch; color: var(--on-dark); font-size: clamp(1.65rem, 3.2vw, 2.35rem); line-height: 1.07; }
.ai-first-scale > div > p { max-width: 670px; margin-top: 13px; color: var(--on-dark-muted); font-size: .88rem; }
.ai-first-scale ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; margin: 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); list-style: none; }
.ai-first-scale li { position: relative; display: grid; align-content: start; gap: 5px; min-width: 0; padding: 16px 13px 16px 0; }
.ai-first-scale li + li { padding-left: 13px; border-left: 1px solid var(--line-dark); }
.ai-first-scale li span { color: rgba(255, 250, 242, .44); font: 600 .6rem/1.3 var(--font-label); }
.ai-first-scale li b { color: var(--on-dark); font-size: .78rem; }
.ai-first-scale li small { color: var(--on-dark-muted); font-size: .67rem; line-height: 1.35; }
.ai-first-scale li.is-current { background: rgba(217, 119, 87, .11); box-shadow: inset 0 3px 0 var(--terracotta-bright); }
.ai-first-scale li.is-current span, .ai-first-scale li.is-current small { color: var(--terracotta-bright); }
.completion-next { display: grid; gap: 20px; padding: clamp(26px, 4vw, 42px); }
.completion-next .kicker { margin-bottom: 5px; }
.completion-next h3 { max-width: 22ch; font-size: clamp(1.7rem, 3.2vw, 2.45rem); line-height: 1.05; }
.completion-next p { max-width: 640px; margin-top: 12px; color: var(--body); }
.completion-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--terracotta); border-bottom: 1px solid var(--line); }
.completion-route span { display: grid; gap: 6px; padding: 15px 16px 15px 0; color: var(--ink); font-size: .8rem; font-weight: 600; }
.completion-route span + span { padding-left: 16px; border-left: 1px solid var(--line); }
.completion-route b { color: var(--terracotta); font: 600 .63rem/1 var(--font-label); }
.completion-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.completion-actions .primary-action { width: 100%; }
.secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 15px; color: var(--ink); text-align: center; text-decoration: none; background: transparent; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-weight: 700; }
.secondary-action:hover { color: var(--terracotta); border-color: rgba(152, 65, 38, .42); }
.completion-next > small { color: var(--muted); font-size: .75rem; }
.pilot-feedback { margin: 0 clamp(26px, 4vw, 42px) clamp(26px, 4vw, 42px); background: var(--paper-deep); border: 1px solid var(--line); border-radius: 11px; }
.pilot-feedback summary { display: flex; justify-content: space-between; gap: 14px; padding: 17px 18px; color: var(--ink); cursor: pointer; font-weight: 700; list-style: none; }
.pilot-feedback summary::-webkit-details-marker { display: none; }
.pilot-feedback[open] summary span { transform: rotate(180deg); }
.pilot-feedback > div { display: grid; gap: 14px; padding: 0 18px 18px; border-top: 1px solid var(--line); }
.pilot-feedback > div > p { padding-top: 15px; color: var(--body); font-size: .83rem; }
.pilot-feedback label { display: grid; gap: 6px; color: var(--ink); font-size: .8rem; font-weight: 700; }
.pilot-feedback textarea { width: 100%; min-height: 76px; padding: 11px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.pilot-feedback .feedback-copy { background: var(--paper); }
.feedback-status { min-height: 1.4em; padding: 0 !important; color: var(--terracotta) !important; font-weight: 700; }
.completion-footer { display: flex; justify-content: space-between; gap: 18px; padding: 18px clamp(26px, 4vw, 42px); border-top: 1px solid var(--line); }
footer { margin-top: 32px; color: var(--body); text-align: center; font: 500 .66rem/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
footer span { color: var(--terracotta); }

.cai-consent-settings--floating { position: fixed !important; z-index: 90 !important; right: 14px !important; bottom: 14px !important; margin: 0 !important; }
.cai-consent-settings { min-height: 34px; padding: 7px 10px; color: var(--on-dark-muted); background: rgba(17,18,20,.94); border: 1px solid var(--line-dark); border-radius: 7px; cursor: pointer; font: 600 .58rem/1 var(--font-label); }

@media (max-width: 1180px) {
  .welcome-inner { grid-template-columns: minmax(0, 1fr) 250px; gap: 30px; }
  .result-card { max-width: 250px; }
  h1 { font-size: clamp(2.55rem, 4.3vw, 3.65rem); }
}

@media (min-height: 760px) and (min-width: 981px) {
  .start-map small { display: block; }
}

@media (max-height: 700px) and (min-width: 981px) {
  .welcome-inner { padding: 8px 0 10px; }
  h1 { font-size: 3.3rem; }
  .welcome-copy > p { margin-top: 9px; font-size: .86rem; }
  .welcome-contrast { margin-top: 10px; }
  .welcome-contrast > div { padding-top: 9px; padding-bottom: 10px; }
  .desktop-commitment { margin-top: 9px; padding-top: 7px; padding-bottom: 7px; }
  .start-map { margin-top: 8px; }
  .start-map article { padding-top: 7px; padding-bottom: 8px; }
  .entry-actions { margin-top: 9px; }
  .entry-button { min-height: 46px; }
}

@media (max-width: 980px) {
  html.has-open-sidebar { overflow: hidden; }
  .module-layout { display: block; }
  .step-sidebar { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(292px, calc(100% - 48px)); height: 100dvh; transform: translateX(-102%); box-shadow: 22px 0 60px rgba(0, 0, 0, .34); transition: transform 200ms ease; }
  .step-sidebar.is-open { transform: translateX(0); }
  .sidebar-overlay { position: fixed; z-index: 19; inset: 0 0 0 min(292px, calc(100% - 48px)); display: block; visibility: hidden; opacity: 0; background: rgba(17, 18, 20, .62); border: 0; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease; }
  .sidebar-overlay.is-visible { visibility: visible; opacity: 1; pointer-events: auto; }
  .sidebar-toggle { display: inline-flex; }
  .module-brand-symbol { display: inline-flex; }
}

@media (max-width: 760px) {
  .welcome-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 36px; }
  .result-card { width: min(100%, 360px); max-width: 360px; aspect-ratio: 16 / 9; margin: 0; }
  .result-card img { object-position: center 40%; }
  .result-card figcaption { padding: 52px 16px 13px; }
  .guide-rules, .guide-knowledge, .guide-navigation { grid-template-columns: 1fr; }
  .guide-rules article + article { border-top: 1px solid var(--line); border-left: 0; }
  .guide-journey ol { grid-template-columns: 1fr 1fr; }
  .guide-journey li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .guide-journey li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .guide-journey > aside { grid-template-columns: 1fr; gap: 8px; }
  .guide-language-grid { grid-template-columns: 1fr; }
  .guide-language-grid article + article { border-top: 1px solid var(--line-dark); border-left: 0; }
  .guide-important, .concept-marker { grid-template-columns: 1fr; gap: 8px; }
  .entry-actions { grid-template-columns: 1fr; gap: 9px; }
  .entry-button { width: 100%; }
  .entry-actions small { max-width: none; }
  .welcome-contrast { grid-template-columns: 1fr; }
  .welcome-contrast > div { padding: 12px 0; }
  .welcome-contrast > div + div { padding-left: 0; border-top: 1px solid var(--line-dark); border-left: 0; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .module-header-inner, .welcome-inner, .module-workspace { width: calc(100% - 32px); }
  .module-header-inner { min-height: 56px; grid-template-columns: auto minmax(80px, 1fr) auto; gap: 10px; padding: 7px 0; margin: 0 auto; }
  .module-home > span, .module-title { display: none; }
  .module-progress { grid-column: 2; grid-template-columns: minmax(52px, 1fr) auto; gap: 8px; }
  .module-header-actions { grid-column: 3; gap: 8px; }
  .module-reset, .module-exit { font-size: .58rem; }
  .module-exit { max-width: 42px; overflow: hidden; text-overflow: ellipsis; }
  .module-header p span { display: none; }
  .welcome-inner { gap: 22px; padding: 30px 0 34px; }
  h1 { font-size: clamp(2.45rem, 11.5vw, 3.3rem); }
  .module-workspace { padding-top: 24px; }
  .work-card { padding: 28px 18px; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }
  h2 { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  .term-grid, .file-benefits, .context-bridge > div, .learning-recap > div:not(.section-heading), .guide-journey ol { grid-template-columns: 1fr; }
  .term-grid article, .file-benefits article { min-height: 0; padding: 20px 4px; }
  .term-grid article + article, .file-benefits article + article { border-top: 1px solid var(--line); border-left: 0; }
  .context-bridge article, .learning-recap article, .guide-journey li { padding: 14px 0; }
  .context-bridge article + article, .learning-recap article + article, .guide-journey li + li { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .example-card > div { grid-template-columns: 1fr; gap: 15px; }
  .route-options, .tool-options, .screenshot-flow, .tool-landscape, .ai-first-scale ol { grid-template-columns: 1fr; }
  .route-options button, .tool-options button { padding: 17px; }
  .setup-guide > section { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .privacy-paths, .aha-flow, .completion-route { grid-template-columns: 1fr; }
  .privacy-paths { gap: 10px; }
  .screenshot-flow article { padding: 14px 0; }
  .screenshot-flow article + article { border-top: 1px solid var(--line); border-left: 0; }
  .tool-landscape li { padding: 13px 0; }
  .tool-landscape li + li { border-top: 1px solid var(--line); border-left: 0; }
  .dictation-test li { grid-template-columns: 1fr; gap: 4px; }
  .ai-first-scale li { padding: 13px 0; }
  .ai-first-scale li + li { padding-left: 0; border-top: 1px solid var(--line-dark); border-left: 0; }
  .aha-flow span, .completion-route span { padding: 12px 0; }
  .aha-flow span + span, .completion-route span + span { padding-left: 0; border-top: 1px solid var(--line-dark); border-left: 0; }
  .completion-route span + span { border-top-color: var(--line); }
  .prompt-card-top { align-items: flex-start; }
  .copy-icon em { display: none; }
  .prompt-guide textarea { height: 210px; font-size: 12px; }
  .question-card { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
  .question-card button { grid-column: 2; justify-self: start; }
  .step-footer { grid-template-columns: 1fr; }
  .step-footer-secondary { justify-content: space-between; }
  .continue-button { width: 100%; justify-self: stretch; }
  .completion-card { border-right: 0; border-left: 0; border-radius: 0; }
  .completion-actions { grid-template-columns: 1fr; }
  .completion-footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}