:root {
  --ink: #161714;
  --muted: #6f7268;
  --paper: #f4f2ea;
  --surface: #fbfaf6;
  --line: #d9d6cb;
  --green: #215b47;
  --green-soft: #dbe8df;
  --orange: #d86c3d;
  --orange-soft: #f6e2d7;
  --red: #a43f32;
  --blue-soft: #dceaf5;
  --yellow-soft: #fff4c4;
  --shadow: 0 18px 60px rgba(34, 37, 29, 0.09);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
body { font-family: "Manrope", system-ui, sans-serif; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--green); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- shared bits ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 700; width: fit-content; }
.wordmark-mark { display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: white; border-radius: 8px 8px 8px 2px; font-family: Georgia, serif; }
.section-number { font-family: "DM Mono", monospace; color: var(--orange); font-size: 11px; }
.difficulty { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.difficulty.medium { color: #8a5a12; background: #f4e7c8; }
.difficulty.hard { color: var(--red); background: #f0dbd6; }
.tag { font-size: 10px; color: #4f524b; background: #ebe8de; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.q-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.label-pill { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: #ebe8de; color: #4f524b; white-space: nowrap; }
.label-pill.official_sample { background: var(--green); color: white; }
.label-pill.reported { background: var(--blue-soft); color: #1f4d73; }
.label-pill.inspired { background: var(--orange-soft); color: #8d3e1b; }
.label-pill.general { background: #ebe8de; color: #4f524b; }
.button { border: 0; border-radius: 9px; padding: 10px 15px; font-size: 12px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.button-quiet { background: transparent; color: var(--muted); }
.button-quiet:hover { color: var(--ink); background: #ebe8de; }
.button-danger { background: #efe0dc; color: var(--red); }
.button-primary { background: var(--green); color: white; }
.button-run { background: var(--green); color: white; min-width: 112px; }
.button-check { background: #e7a37e; color: #2b1a10; min-width: 128px; }
.button-large { padding: 14px 20px; font-size: 13px; width: 100%; margin-top: 18px; }
.button:disabled { opacity: .48; cursor: not-allowed; }
.link-button { align-self: flex-start; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-decoration: underline; padding: 4px; }
.link-button:disabled { opacity: .4; cursor: default; text-decoration: none; }
.fine-print { color: var(--muted); font-size: 11px; line-height: 1.55; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--muted); font-size: 12px; text-decoration: none; }
.back-link:hover { color: var(--ink); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #c3a352; box-shadow: 0 0 0 5px rgba(195,163,82,.14); flex: none; }
.status-dot.ready { background: var(--green); box-shadow: 0 0 0 5px rgba(33,91,71,.12); }
.setup-status { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.empty-state { color: var(--muted); font-size: 11px; line-height: 1.5; }
.mini-tabs { display: inline-flex; gap: 2px; background: #e9e6dc; padding: 3px; border-radius: 8px; }
.mini-tabs button { border: 0; background: transparent; padding: 5px 10px; border-radius: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }
.mini-tabs button[aria-selected="true"] { background: white; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- site header & views ---------- */
.site-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 14px clamp(16px, 4vw, 48px); background: rgba(244,242,234,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-nav { display: flex; gap: 4px; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 8px; }
.site-nav a.active, .site-nav a:hover { color: var(--ink); background: #e9e6dc; }
.site-header .setup-status { margin-left: auto; }
.view { padding: 28px clamp(16px, 4vw, 48px) 60px; max-width: 1440px; margin: 0 auto; }
.library-intro h1 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.04em; margin: 8px 0 16px; font-weight: 600; }
.lede { color: #4f524b; font-size: 14px; line-height: 1.65; max-width: 760px; }

/* ---------- library ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.chip:hover { border-color: #9da99e; }
.chip.active { background: var(--green); color: white; border-color: var(--green); }
.chip.small { padding: 6px 11px; font-size: 12px; }
.chip-count { font: 10px "DM Mono", monospace; opacity: .7; }
.sub-chips { margin-top: 14px; }
.sub-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.library-controls { margin: 22px 0 16px; }
.search-box { display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; max-width: 760px; }
.search-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(33,91,71,.1); }
.search-icon { color: var(--muted); font-size: 18px; }
.search-box input { border: 0; outline: 0; background: transparent; padding: 13px 0; width: 100%; font-size: 14px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.filter-row select { appearance: none; border: 1px solid var(--line); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236f7268'/%3E%3C/svg%3E") no-repeat right 11px center; border-radius: 9px; padding: 8px 30px 8px 11px; font-size: 12px; max-width: 240px; }
.filter-row select.active { border-color: var(--green); background-color: var(--green-soft); color: var(--green); font-weight: 600; }
.library-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 20px; align-items: start; }
.results-head { display: flex; justify-content: space-between; align-items: baseline; }
.result-count { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.question-table { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.question-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 90px 64px; gap: 14px; align-items: center; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.question-row:last-child { border-bottom: 0; }
.question-row.head { background: #efede5; padding: 9px 16px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
button.question-row:hover, a.question-row:hover { background: white; }
.question-row.selected { background: #fffdf3; box-shadow: inset 3px 0 0 var(--orange); }
.q-main { display: grid; gap: 5px; min-width: 0; }
.q-main strong { font-size: 14px; }
.q-main small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.q-context { font-size: 11px; color: #8d3e1b; font-weight: 600; }
.q-context.general { color: var(--muted); font-weight: 500; }
.q-format { font-size: 11px; }
.q-time { font: 11px "DM Mono", monospace; color: var(--muted); }
.empty-results { padding: 30px 20px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.empty-results p { margin: 0; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.page-button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 11px; font-size: 12px; }
.page-button.active { background: var(--ink); color: white; border-color: var(--ink); }
.page-button:disabled:not(.active) { opacity: .4; cursor: default; }

.preview-panel { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background-color: #fbfaf4; background-image: linear-gradient(#ece8dc 1px, transparent 1px); background-size: 100% 29px; padding: 20px; }
.preview-panel h2 { font-size: 22px; letter-spacing: -.03em; margin: 6px 0 10px; }
.preview-panel h3 { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 18px 0 7px; }
.preview-panel p { font-size: 13px; line-height: 1.6; margin: 0; }
.preview-summary { color: #4f524b; margin-top: 12px !important; }
.preview-statement { background: rgba(255,255,255,.82); padding: 10px 12px; border-radius: 8px; }
.preview-empty { color: var(--muted); }
.preview-guide h2 { font-size: 20px; margin: 6px 0 4px; }
.guide-steps { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 2px; }
.guide-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start; padding: 8px 0; }
.guide-steps b { display: block; font-size: 13px; }
.guide-steps small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.guide-index { font: 11px "DM Mono", monospace; color: var(--orange); padding-top: 2px; }
.guide-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 18px 0 8px; font-weight: 700; }
.guide-pick { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.guide-pick:hover { border-color: var(--green); box-shadow: 0 0 0 3px rgba(33,91,71,.08); }
.guide-pick strong { font-size: 14px; }
.guide-pick small { grid-column: 1; color: var(--muted); font-size: 11px; }
.guide-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--green); font-size: 18px; }
.guide-companies .chip-row { gap: 6px; }
.guide-companies a.chip { text-decoration: none; color: var(--ink); }
.preview-close { display: none; position: absolute; right: 14px; top: 10px; border: 0; background: transparent; font-size: 26px; color: var(--muted); }
.provenance { display: grid; gap: 8px; font-size: 12px; }
.provenance p { font-size: 12px; line-height: 1.55; margin: 0; }
.variant-note { background: var(--yellow-soft); border-left: 2px solid var(--orange); padding: 7px 9px; border-radius: 4px; }
.source-list, .company-links { margin: 0; padding-left: 16px; display: grid; gap: 6px; font-size: 12px; }
.source-list small, .company-links small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.rubric-list { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.5; display: grid; gap: 4px; }

/* ---------- companies ---------- */
.company-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 20px; }
.company-card { display: grid; gap: 7px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: .2s ease; }
.company-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #9da99e; }
.company-card strong { font-size: 17px; }
.company-card p { margin: 4px 0; font-size: 12px; line-height: 1.55; color: #4f524b; }
.company-counts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 11px; color: var(--muted); }
.label-legend { margin-top: 34px; max-width: 760px; }
.label-legend h2 { font-size: 15px; }
.label-legend dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; font-size: 12px; }
.label-legend dd { margin: 0; color: #4f524b; }
.company-hero h1 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.04em; margin: 0 0 4px; }
.company-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); gap: 32px; margin-top: 24px; }
.company-grid h2 { font-size: 14px; margin: 22px 0 10px; }
.company-grid h2:first-child { margin-top: 0; }
.theme-list { padding-left: 18px; font-size: 13px; line-height: 1.6; }
.company-group { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; margin-bottom: 14px; }
.company-group h3 { margin: 0; padding: 11px 14px; background: #efede5; font-size: 12px; font-weight: 600; }
.company-question { grid-template-columns: minmax(0, 1fr) 90px 64px; }

/* ---------- setup ---------- */
.setup-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 28px; align-items: start; }
.setup-question h1 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.035em; margin: 8px 0 12px; }
.setup-question .q-tags { margin-bottom: 14px; }
.setup-form { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.setup-form h2 { margin: 0 0 12px; font-size: 16px; }
.setup-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 12px; margin: 0 0 18px; }
.setup-facts dt { color: var(--muted); }
.setup-facts dd { margin: 0; }
.choice-group { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 7px; }
.choice-group legend { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.hint-text { font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 6px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--green); background: #f3f8f4; }
.choice input { margin-top: 3px; accent-color: var(--green); }
.choice b { display: block; font-size: 13px; }
.choice small { color: var(--muted); font-size: 11px; line-height: 1.45; }

/* ---------- resume interview preparation ---------- */
.resume-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 20px; align-items: start; }
.resume-card { padding: 0 22px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.resume-card .app-window-bar { margin: 0 -22px 20px; }
.resume-card h2, .resume-section h2 { font-size: 17px; margin: 0 0 12px; }
.field { display: grid; gap: 6px; margin: 0 0 14px; font-size: 12px; font-weight: 700; }
.field small { color: var(--muted); font-weight: 500; }
.field input, .field textarea, .field select, .clarification-card textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px; background: white; padding: 10px 11px; outline: 0; resize: vertical; font-weight: 400; }
.field input:focus, .field textarea:focus, .field select:focus, .clarification-card textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(33,91,71,.1); }
.resume-form-row { display: grid; grid-template-columns: 1fr 180px; gap: 12px; }
.resume-preparation-list { display: grid; gap: 8px; }
.resume-preparation-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; background: white; }
.resume-preparation-row:hover { border-color: var(--green); }
.resume-preparation-row div { min-width: 0; display: grid; gap: 3px; }
.resume-preparation-row small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 18px 0 22px; }
.resume-detail-head h1 { font-size: clamp(28px, 4vw, 46px); margin: 5px 0; letter-spacing: -.04em; }
.resume-status { flex: none; max-width: 220px; text-align: center; }
.resume-section { max-width: 900px; margin-bottom: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.resume-section > p { line-height: 1.65; }
.resume-claims { display: grid; gap: 7px; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.resume-links { display: grid; gap: 8px; }
.source-choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); padding: 10px 12px; border-radius: 10px; background: white; }
.source-choice input { margin-top: 3px; accent-color: var(--green); }
.source-choice span { display: grid; min-width: 0; gap: 2px; }
.source-choice small { color: var(--muted); overflow-wrap: anywhere; }
.source-choice em { color: var(--green); font-style: normal; font-size: 11px; }
.clarification-card { border-left: 4px solid var(--orange); }
.clarification-card textarea { margin: 4px 0 10px; }
.button-row, .resume-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.resume-actions { max-width: 900px; margin: 20px 0; }
.resume-ready { background: #f4f8f4; border-color: #a8bbaa; }
.resume-progress, .resume-error { max-width: 860px; padding: 14px 18px; margin-bottom: 16px; border-radius: 12px; background: var(--yellow-soft); }
.resume-progress { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; }
.resume-progress p { grid-column: 2; margin: 0; color: var(--muted); font-size: 12px; }
.resume-error { background: var(--orange-soft); }
.resume-error p { margin: 6px 0 10px; }
.resume-delete { margin: 10px 0 50px; }
.error-text { color: #a43f2b !important; }

/* ---------- interview workspace ---------- */
.workspace { min-height: 100vh; padding: 14px; }
.topbar { height: 62px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px; }
.interview-meta { display: flex; gap: 12px; align-items: center; }
.problem-badge { color: var(--muted); font-size: 12px; }
.timer { font-family: "DM Mono", monospace; font-size: 12px; background: #eae7dd; padding: 7px 10px; border-radius: 7px; }
.timer.over { background: var(--orange-soft); color: #8d3e1b; }
.top-actions { justify-self: end; display: flex; gap: 8px; }

.interview-grid { height: calc(100vh - 90px); min-height: 680px; display: grid; grid-template-columns: minmax(250px, .7fr) minmax(540px, 1.6fr) minmax(260px, .75fr); gap: 12px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.panel-heading { min-height: 64px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-heading > div { display: flex; gap: 10px; align-items: center; }
.panel-heading h2 { margin: 0; font-size: 14px; }
.pill { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: #eceae1; padding: 6px 8px; border-radius: 999px; }
.pill.connected { color: var(--green); background: var(--green-soft); }

.conversation-panel { display: grid; grid-template-rows: auto auto 1fr auto; }
.voice-stage { text-align: center; padding: 24px 20px 20px; border-bottom: 1px solid var(--line); }
.voice-stage p { color: var(--muted); font-size: 12px; min-height: 18px; }
.voice-orb { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 50%; background: #e5e8df; display: flex; align-items: center; justify-content: center; gap: 4px; transition: .2s ease; }
.voice-orb span { width: 3px; height: 13px; background: var(--green); border-radius: 4px; }
.voice-orb span:nth-child(2) { height: 24px; }
.voice-orb.active { background: var(--green); box-shadow: 0 0 0 10px rgba(33,91,71,.1); }
.voice-orb.active span { background: white; animation: pulse .8s ease-in-out infinite alternate; }
.voice-orb.active span:nth-child(2) { animation-delay: .18s; }
@keyframes pulse { to { transform: scaleY(.45); } }
body.text-mode .voice-orb, body.text-mode .mic-button { display: none; }
.mic-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: white; color: var(--ink); border-radius: 999px; padding: 9px 14px; font-size: 11px; font-weight: 700; }
.mic-button.on { border-color: #d29e8c; color: var(--red); background: #fff7f4; }
.mic-icon { width: 9px; height: 14px; border: 1.8px solid currentColor; border-radius: 7px; position: relative; }
.mic-icon::after { content: ""; position: absolute; width: 13px; height: 7px; left: -4px; top: 7px; border: 1.8px solid currentColor; border-top: 0; border-radius: 0 0 8px 8px; }
.transcript { overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.turn { display: grid; gap: 5px; }
.turn span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.turn p { margin: 0; font-size: 12px; line-height: 1.55; }
.turn.interviewer { padding-left: 14px; border-left: 2px solid var(--orange); }
.turn.partial { opacity: .58; }
.turn.sending { opacity: .6; }
.turn.sending span::after { content: " · sending…"; text-transform: none; letter-spacing: 0; font-weight: 500; }
.text-form { margin: 12px; display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: white; }
.text-form input { min-width: 0; border: 0; outline: 0; padding: 12px; font-size: 12px; background: transparent; }
.text-form button { border: 0; background: transparent; color: var(--green); font-size: 20px; padding: 0 12px; }

.work-panel { display: flex; flex-direction: column; min-height: 0; }
.problem-head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px 10px; }
.problem-head h1 { margin: 9px 0 0; font-size: 23px; letter-spacing: -.035em; }
.problem-actions { display: flex; gap: 4px; align-items: flex-start; }
.problem-prompt { padding: 0 22px 14px; max-height: 34vh; overflow-y: auto; border-bottom: 1px solid var(--line); flex: none; }
.problem-prompt .mini-tabs { margin-bottom: 8px; }
.prompt-pane > p { font-size: 13px; line-height: 1.6; color: #4f524b; margin-top: 4px; }
.case-brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 10px 0; }
.case-brief article { padding: 9px 11px; border-radius: 8px; background: #efede5; font-size: 11px; line-height: 1.5; }
.case-brief b { display: block; margin-bottom: 3px; color: var(--green); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.example { font-family: "DM Mono", monospace; font-size: 10px; background: #efede5; padding: 10px; border-radius: 8px; line-height: 1.5; }
.example b { display: block; font-family: "Manrope", sans-serif; color: var(--muted); font-size: 9px; text-transform: uppercase; margin-bottom: 4px; }
.example small { display: block; font-family: "Manrope", sans-serif; color: var(--muted); margin-top: 4px; }
details { margin-top: 10px; color: var(--muted); font-size: 11px; }
details ul { padding-left: 18px; }
.provenance-line { margin: 10px 0 0; }
.provenance-line .provenance p { font-size: 11px; color: var(--muted); }

.workspace-tabs { display: flex; gap: 2px; padding: 8px 14px 0; background: #efede5; border-bottom: 1px solid var(--line); flex: none; }
.workspace-tab { border: 1px solid transparent; border-bottom: 0; background: transparent; padding: 9px 16px; font-size: 12px; font-weight: 700; color: var(--muted); border-radius: 9px 9px 0 0; }
.workspace-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); border-color: var(--line); margin-bottom: -1px; }
.workspace-tab:hover { color: var(--ink); }
.tab-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.editor-toolbar { min-height: 48px; background: #22241f; color: #d9ddd4; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px 6px 18px; font-family: "DM Mono", monospace; font-size: 11px; flex: none; }
.editor-toolbar > div { display: flex; align-items: center; gap: 8px; }
.toolbar-buttons { display: flex; gap: 6px; }
.file-dot { width: 7px; height: 7px; border-radius: 50%; background: #78ad8e; }
.file-dot.sql { background: #7aa4d4; }
.save-state { color: #83877d; margin-left: 8px; }
.save-state.light { color: var(--muted); font-size: 11px; font-weight: 500; }
.editor-mount { flex: 1; min-height: 220px; background: #1b1d19; overflow: auto; display: flex; }
.editor-mount textarea { flex: 1; display: block; width: 100%; min-height: 220px; resize: none; border: 0; outline: 0; padding: 18px; background: #1b1d19; color: #e5e8df; caret-color: #e7a37e; font: 13px/1.7 "DM Mono", monospace; tab-size: 4; }
.editor-mount textarea:focus { box-shadow: inset 0 0 0 1px #394139; }
.sql-editor-mount { flex: .9; min-height: 160px; }
.test-drawer, .results-drawer { flex: .55; min-height: 150px; background: #f6f5f0; border-top: 1px solid #34362f; overflow: auto; }
.results-drawer { flex: 1; }
.test-heading { min-height: 42px; padding: 6px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 10px; }
.test-heading h3 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.test-heading > span { color: var(--muted); font-size: 10px; }
.test-results, .sql-results { padding: 10px 18px 16px; display: grid; gap: 6px; align-content: start; }
.test-row { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; font: 10px "DM Mono", monospace; }
.test-row small { font-family: "Manrope", sans-serif; }
.test-detail { grid-column: 2 / -1; color: var(--red); font-size: 10px !important; }
.test-mark { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #e4e1d8; }
.test-row.passed .test-mark { background: var(--green-soft); color: var(--green); }
.test-row.failed .test-mark, .test-row.error .test-mark, .test-row.timeout .test-mark { background: #f0dbd6; color: var(--red); }
.sql-results .test-row { align-items: start; font-family: "Manrope", sans-serif; font-size: 11px; line-height: 1.45; }
.check-summary { margin: 0 0 6px; font-weight: 700; font-size: 12px; }
.check-summary.passed { color: var(--green); }
.check-summary.failed { color: var(--red); }
.sql-error { background: #f7e4df; border-left: 3px solid var(--red); padding: 10px 12px; border-radius: 6px; font-size: 12px; }
.sql-error.timeout { background: var(--orange-soft); border-color: var(--orange); }
.sql-error p { margin: 4px 0 0; font-family: "DM Mono", monospace; font-size: 11px; white-space: pre-wrap; }
.result-meta { font-size: 11px; margin: 4px 0 0; }
.sample-scroll { overflow: auto; max-height: 280px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.data-table, .schema-table { border-collapse: collapse; width: 100%; font-size: 11px; }
.data-table th, .data-table td, .schema-table th, .schema-table td { text-align: left; padding: 5px 9px; border-bottom: 1px solid #ece9df; white-space: nowrap; }
.data-table th { position: sticky; top: 0; background: #f3f1ea; font-family: "DM Mono", monospace; font-weight: 500; }
.data-table th small { display: block; color: var(--muted); font-size: 9px; }
.data-table td { font-family: "DM Mono", monospace; }
.data-table td.null, .schema-table td.null { color: #a09c8e; font-style: italic; }
.schema-table th { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.table-card { margin: 12px 0; }
.table-card h4 { margin: 0 0 6px; font-size: 12px; }
.table-card .schema-table { margin-bottom: 8px; }
.key-badge { display: inline-block; font: 9px "DM Mono", monospace; padding: 2px 5px; border-radius: 4px; margin-right: 4px; }
.key-badge.pk { background: var(--green-soft); color: var(--green); }
.key-badge.fk { background: var(--blue-soft); color: #1f4d73; }
.pager { display: flex; gap: 10px; align-items: center; font-size: 11px; margin-top: 4px; }
.contract { font-size: 11px; background: var(--yellow-soft); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; }
.diagram-wrap { overflow-x: auto; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.er-diagram { display: block; min-width: 100%; height: auto; max-height: 230px; }
.er-box { fill: #fbfaf6; stroke: #bdb8a9; }
.er-title { font: 700 12px "Manrope", sans-serif; fill: var(--ink); }
.er-col { font: 11px "DM Mono", monospace; fill: #3d4039; }
.er-col.pk { fill: var(--green); }
.er-type { font: 10px "DM Mono", monospace; fill: #8b8e84; }
.er-link { fill: none; stroke: var(--orange); stroke-width: 1.5; }
.er-dot { fill: var(--orange); }

.notes-panel { background: var(--surface); }
.notes-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: #f6f4ec; font-size: 12px; }
.notes-toolbar > div:first-child { display: flex; align-items: center; gap: 8px; }
.notes-editor { flex: 1; min-height: 300px; width: 100%; border: 0; outline: 0; resize: none; padding: 16px 20px; background-color: #fffef9; background-image: linear-gradient(#efebdf 1px, transparent 1px); background-size: 100% 26px; background-position: 0 14px; font: 14px/26px "Manrope", sans-serif; }

.canvas-workspace { background: #e9e6dc; }
.canvas-toolbar { min-height: 50px; padding: 8px 12px; display: flex; justify-content: space-between; gap: 10px; align-items: center; background: #22241f; color: #e5e8df; flex-wrap: wrap; }
.canvas-tools, .canvas-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.canvas-tool { border: 1px solid #4c5048; background: transparent; color: #d9ddd4; border-radius: 7px; padding: 6px 10px; font-size: 10px; }
.canvas-tool:hover, .canvas-tool.active { background: #dbe8df; border-color: #dbe8df; color: var(--green); }
.color-choice { width: 29px; height: 29px; padding: 3px; border: 1px solid #55594f; border-radius: 50%; overflow: hidden; }
.color-choice input { width: 34px; height: 34px; margin: -6px; border: 0; background: transparent; cursor: pointer; }
.canvas-status { color: #aeb2a9; font: 9px "DM Mono", monospace; }
.canvas-surface { position: relative; margin: 12px; aspect-ratio: 16 / 10; max-height: calc(100% - 60px); border: 1px solid #cbc7ba; border-radius: 10px; overflow: hidden; background-color: #fffef9; background-image: radial-gradient(#d8d4c8 1px, transparent 1px); background-size: 20px 20px; touch-action: none; align-self: center; width: calc(100% - 24px); }
#caseCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: default; }
#caseCanvas[data-tool="pen"] { cursor: crosshair; }
#caseCanvas[data-tool="text"] { cursor: text; }
#caseCanvas[data-tool="eraser"] { cursor: cell; }
.canvas-overlay { position: absolute; inset: 0; pointer-events: none; }
.canvas-text { position: absolute; pointer-events: auto; display: flex; flex-direction: column; background: rgba(255,255,255,.94); border: 1.5px solid var(--ink, #215b47); border-color: var(--ink); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.06); min-width: 60px; min-height: 40px; }
.canvas-text { --ink: #215b47; }
.canvas-text.selected { box-shadow: 0 0 0 3px rgba(216,108,61,.35); }
.canvas-text.interviewer { border-style: dashed; border-color: #b8b39f; }
.text-handle { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 2px 7px; cursor: move; font: 700 8px "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #62655d; background: rgba(0,0,0,.035); user-select: none; }
.canvas-text.interviewer .text-handle { cursor: default; }
.text-delete { border: 0; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 3px; }
.text-delete:hover { color: var(--red); }
.canvas-text textarea { flex: 1; min-height: 0; border: 0; outline: 0; resize: none; background: transparent; padding: 4px 7px; font: 12px/1.4 "Manrope", sans-serif; color: #1c1d1a; }
.text-resize { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--ink) 50%); border-radius: 0 0 5px 0; opacity: .6; }
.canvas-overlay[data-tool="pen"] .canvas-text:not(.selected), .canvas-overlay[data-tool="eraser"] .canvas-text:not(.selected) { pointer-events: none; opacity: .85; }
.canvas-hint { margin: 0; padding: 0 16px 12px; color: var(--muted); font-size: 10px; flex: none; }

.notebook-panel { display: flex; flex-direction: column; background-color: #fbfaf4; background-image: linear-gradient(#e9e5d9 1px, transparent 1px); background-size: 100% 29px; }
.notebook-intro { margin: 16px 20px 8px; padding: 10px 12px; background: rgba(244,242,234,.92); color: var(--muted); font-size: 10px; line-height: 1.5; border-left: 2px solid var(--orange); }
.writing-badge { font: 10px "DM Mono", monospace; color: var(--orange); }
.stage-block { margin: 12px 20px; padding: 14px; background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 10px; }
.stage-block > span, .next-question > span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.stage-block strong { text-transform: capitalize; font-size: 13px; }
.stage-track { height: 3px; background: #dfddd4; margin-top: 12px; }
.stage-track i { display: block; height: 100%; background: var(--orange); width: 12%; transition: width .35s ease; }
.notes { padding: 8px 20px; overflow-y: auto; flex: 1; }
.note { position: relative; padding: 7px 0 8px 24px; min-height: 29px; font-size: 12px; line-height: 1.45; }
.note::before { content: ""; position: absolute; left: 2px; top: 12px; width: 8px; height: 8px; border: 1.5px solid var(--green); border-radius: 2px; }
.note small { display: block; color: var(--orange); text-transform: uppercase; letter-spacing: .09em; font-size: 8px; margin-top: 3px; }
.next-question { margin: 10px 20px 18px; padding: 14px; background: #fff9df; border: 1px solid #e7db9f; border-radius: 9px; }
.next-question p { margin: 0; font-family: Georgia, serif; font-size: 14px; line-height: 1.45; }
.privacy-note { margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; background: rgba(244,242,234,.9); }

/* ---------- scorecard ---------- */
.toast { position: fixed; z-index: 30; right: 22px; bottom: 22px; max-width: 380px; padding: 12px 15px; background: #24261f; color: white; border-radius: 9px; box-shadow: var(--shadow); font-size: 12px; line-height: 1.45; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .interview-grid { grid-template-columns: 280px minmax(480px, 1fr); height: auto; }
  .notebook-panel { grid-column: 1 / -1; min-height: 380px; }
  .work-panel { min-height: 820px; }
}
@media (max-width: 960px) {
  .library-body { grid-template-columns: 1fr; }
  .preview-panel { display: none; }
  body.preview-open .preview-panel { display: block; position: fixed; inset: 0; top: 0; max-height: none; z-index: 20; border-radius: 0; border: 0; padding: 22px 16px 40px; }
  body.preview-open { overflow: hidden; }
  .preview-close { display: block; }
  .setup-grid, .company-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .resume-layout, .resume-form-row { grid-template-columns: 1fr; }
  .resume-detail-head { display: grid; }
  .site-header { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .site-header .setup-status { display: none; }
  .view { padding: 20px 16px 48px; }
  .question-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .question-row .q-context { grid-column: 1; order: 3; }
  .question-row .q-format { display: none; }
  .question-row.head { display: none; }
  .company-question { grid-template-columns: minmax(0, 1fr) auto; }
  .filter-row select { max-width: none; flex: 1 1 45%; }
  .topbar { grid-template-columns: 1fr auto; height: auto; padding: 10px 4px 16px; }
  .interview-meta { display: none; }
  .interview-grid { grid-template-columns: 1fr; }
  .panel { min-height: 520px; }
  .work-panel { min-height: 900px; }
  .canvas-toolbar { align-items: flex-start; flex-direction: column; }
}

/* =====================================================================
   Landing — "Readme"
   Seven chapters. The recurring device is the notebook margin: an
   orange rule with chapter labels, and the companion — a living margin
   note — sitting in that column. Content never depends on the companion.
   ===================================================================== */
:root { --serif: "Instrument Serif", Georgia, serif; --margin-col: 190px; --header-h: 58px; }
.home { --measure: 700px; overflow-x: clip; }
.home em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.home code { font: .9em "DM Mono", monospace; background: #ebe8de; padding: 1px 5px; border-radius: 5px; }
.home pre code { background: none; padding: 0; font: inherit; }
.kicker { display: inline-block; font: 500 11px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.button-hero { padding: 15px 22px; font-size: 14px; border-radius: 11px; }
.button-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 14px 20px; font-size: 14px; border-radius: 11px; }
.button-ghost:hover { background: var(--surface); border-color: #b9b5a8; }
[data-chapter] { scroll-margin-top: calc(var(--header-h) + 28px); }
.chapter-title:focus { outline: none; }
.chapter-title:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 4px; }

/* Reveal on scroll. Content is only ever hidden once the enhancement has started,
   motion is allowed, and the element has not been seen — a failed script leaves it visible. */
.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.home.readme-enhanced[data-motion="full"] .reveal:not(.in) { opacity: 0; transform: translateY(14px); }

/* hero */
.home-hero { padding: clamp(48px, 9vw, 120px) clamp(16px, 5vw, 64px) 40px; max-width: 1280px; margin: 0 auto; }
.hero-copy { max-width: 1180px; }
.hero-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.hero-side { display: grid; gap: 22px; align-content: start; }
.hero-toc { display: grid; border-left: 1.5px solid rgba(216,108,61,.55); padding-left: 22px; gap: 2px; }
.hero-toc .kicker { margin-bottom: 10px; }
.hero-toc a { display: grid; grid-template-columns: 30px 1fr; padding: 7px 0; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--line); }
.hero-toc a:last-child { border-bottom: 0; }
.hero-toc a span { font: 11px "DM Mono", monospace; color: var(--orange); padding-top: 3px; grid-row: 1 / span 2; }
.hero-toc a small { font-weight: 400; color: var(--muted); font-size: 12px; }
.hero-toc a:hover { color: var(--green); }
.hero-copy h1 { font-size: clamp(44px, 7.4vw, 104px); line-height: .98; letter-spacing: -.055em; font-weight: 600; margin: 18px 0 26px; }
.hero-copy h1 em { color: var(--green); display: block; letter-spacing: -.035em; }
.hero-lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: #4b4e47; max-width: 680px; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 16px; }
.hero-meta { font: 12px "DM Mono", monospace; color: var(--muted); margin: 0; }
.hero-meta span { color: var(--ink); }

/* tour choice — the companion's first perch */
.tour-card { display: grid; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.tour-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tour-choice { min-height: 40px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 12.5px; font-weight: 700; }
.tour-choice:hover { border-color: #b9b5a8; }
.tour-choice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: white; }

.hero-figure { margin: clamp(40px, 6vw, 72px) 0 0; transition-delay: .15s; }
.hero-figure figcaption, .fig-compare figcaption { margin-top: 14px; font-size: 13px; color: var(--muted); }
.hero-figure figcaption span, .fig-compare figcaption span, .fig-caption { font: 11px "DM Mono", monospace; color: var(--orange); margin-right: 8px; }
.mock-window { border: 1px solid #cfcbbf; border-radius: 16px; background: var(--surface); box-shadow: 0 40px 90px -30px rgba(34,37,29,.35), 0 2px 0 rgba(255,255,255,.7) inset; overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #efede5; font-size: 12px; color: var(--muted); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d5c9; }
.mock-bar span { margin-left: 10px; }
.mock-grid { display: grid; grid-template-columns: 1fr 1.35fr .95fr; min-height: 360px; }
.mock-grid > div { padding: 18px 20px; min-width: 0; }
.mock-label { display: block; font: 10px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.mock-label.light { color: #9ca195; }
.mock-transcript { border-right: 1px solid var(--line); display: grid; align-content: start; gap: 14px; }
.mock-turn { display: grid; gap: 4px; font-size: 13px; line-height: 1.5; }
.mock-turn b { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mock-turn p { margin: 0; }
.mock-turn.interviewer { padding-left: 12px; border-left: 2px solid var(--orange); }
@keyframes blink { 50% { opacity: 0; } }
.mock-editor { background: #1b1d19; color: #e5e8df; }
.mock-editor pre, .ws-pane pre { margin: 0; font: 12.5px/1.7 "DM Mono", monospace; white-space: pre; overflow-x: auto; }
.mock-editor .k, .ws-pane .k { color: #e7a37e; }
.mock-editor .s, .ws-pane .s { color: #a9cfa2; }
.mock-editor .n, .ws-pane .n { color: #9fc3e8; }
.mock-checks { margin-top: 16px; display: grid; gap: 5px; font: 11px "DM Mono", monospace; }
.mock-checks .ok { color: #9bcfae; }
.mock-checks .bad { color: #f0a38f; }
.mock-notebook { border-left: 1px solid var(--line); background-color: #fbfaf4; background-image: linear-gradient(#ebe7db 1px, transparent 1px); background-size: 100% 29px; display: grid; align-content: start; gap: 10px; }
.mock-note { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.45; }
.mock-note::before { content: ""; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; border: 1.5px solid var(--green); border-radius: 2px; }
.mock-note small { display: block; color: var(--orange); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.mock-thread { margin-top: 6px; padding: 12px; background: #fff9df; border: 1px solid #e7db9f; border-radius: 9px; font-family: var(--serif); font-size: 17px; line-height: 1.3; }
.mock-thread span { display: block; font: 9px "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* prologue */
.prologue { max-width: 820px; margin: clamp(60px, 10vw, 140px) auto; padding: 0 clamp(16px, 5vw, 32px); text-align: center; }
.prologue p { font-size: clamp(18px, 2vw, 23px); line-height: 1.6; color: #4b4e47; margin: 0 0 18px; }
.prologue .prologue-strong { font-family: var(--serif); font-size: clamp(30px, 4vw, 48px); line-height: 1.15; color: var(--ink); margin: 28px 0; }

/* chapters with a notebook margin */
.chapter { display: grid; grid-template-columns: var(--margin-col) minmax(0, 1fr); max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px) clamp(70px, 10vw, 130px); }
.chapter-margin { position: relative; padding-top: 10px; }
.chapter-margin > span { position: sticky; top: 90px; display: block; }
.part-no { font: 500 11px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.part-name { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--muted); top: 110px !important; margin-top: 6px; }
.chapter-body { border-left: 1.5px solid rgba(216,108,61,.55); padding-left: clamp(22px, 4vw, 56px); min-width: 0; }
.chapter-body h2 { font-size: clamp(34px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; margin: 0 0 18px; max-width: 900px; }
.chapter-body h2 em { color: var(--green); }
.chapter-summary { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; font-weight: 600; letter-spacing: -.01em; color: var(--ink); max-width: 720px; margin: 0 0 32px; }
.chapter-summary mark { color: inherit; background: linear-gradient(transparent 60%, #f6dccb 60%); padding: 0 2px; }
.prose { max-width: var(--measure); }
.prose p { font-size: 18px; line-height: 1.7; color: #3f423b; margin: 0 0 14px; }
.margin-note { max-width: 420px; margin: 26px 0 0; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--orange); position: relative; }
.margin-note::before { content: "↳ "; font-style: normal; }
.subhead { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; margin: 60px 0 18px; }
.subhead em { color: var(--green); }

/* progressive disclosure: one level, clearly labelled */
.more { margin-top: 12px; }
.more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--green); border-radius: 6px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 5px; font: 12px/1 "DM Mono", monospace; flex: none; }
.more[open] summary::before { content: "−"; }
.more summary:hover { text-decoration: underline; }
.more ul, .more > p { margin: 8px 0 0; color: #4b4e47; font-size: 14px; line-height: 1.6; }
.more ul { padding-left: 18px; display: grid; gap: 4px; }

/* 01 · compare */
.fig-compare { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 10px; margin: 36px 0 0; max-width: 980px; }
.fig-compare figcaption { grid-column: 1 / -1; margin-top: 4px; }
.compare-col { border-radius: 16px; padding: 24px; border: 1px solid var(--line); }
.compare-col h3 { margin: 0 0 16px; font-size: 13px; letter-spacing: .02em; }
.compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.compare-col li { display: grid; grid-template-columns: 22px 1fr; font-size: 15px; line-height: 1.45; }
.compare-col.quiet { background: #ecebe4; color: #6c6f66; }
.compare-col.quiet span { color: #6e9a80; }
.compare-col.loud { background: var(--surface); box-shadow: var(--shadow); }
.compare-col.loud span { color: var(--orange); font-family: var(--serif); font-size: 20px; line-height: 1; }
.compare-gap { position: relative; display: grid; place-items: center; }
.compare-gap::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%; border-left: 1.5px dashed var(--orange); transform-origin: top; transition: transform .9s cubic-bezier(.3,.7,.2,1) .3s; }
.compare-gap span { position: relative; writing-mode: vertical-rl; transform: rotate(180deg); background: var(--paper); padding: 8px 0; font: italic 19px var(--serif); color: var(--orange); }
.home.readme-enhanced[data-motion="full"] .fig-compare:not(.in) .compare-gap::before { transform: scaleY(0); }

/* 02 · forces: problem on the left, Margin's answer on the right */
.forces { display: grid; gap: 14px; max-width: 980px; }
.force { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; }
.force-no { font: 500 11px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.force h3 { font-size: 23px; letter-spacing: -.02em; margin: 8px 0 10px; }
.force p { font-size: 15.5px; line-height: 1.6; color: #4b4e47; margin: 0; }
.force .answer { border-left: 2px solid var(--green); padding-left: 16px; color: var(--ink); margin: 0; align-self: start; font-size: 15.5px; line-height: 1.6; }
.force .answer p { color: var(--ink); }
.force .answer b { color: var(--green); }
.label-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.label-table div { display: grid; gap: 6px; padding: 10px; background: white; border: 1px solid #ebe8de; border-radius: 10px; justify-items: start; }
.label-table small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.pull { margin: 46px 0 0; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.03em; font-weight: 600; max-width: 820px; }
.pull em { color: var(--orange); }

/* 03 · steps — the step crossing the middle of the viewport is marked current */
.mini-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-chips .chip { color: var(--ink); text-decoration: none; }
.mini-chips .chip.active { color: white; }
.mini-card { background: #fbfaf4; border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 8px; box-shadow: var(--shadow); }
.mini-card strong { font-size: 20px; letter-spacing: -.02em; }
.mini-card p { font-size: 13px; line-height: 1.5; margin: 4px 0 0; color: #4b4e47; }
.mini-card small { color: var(--muted); font-size: 11px; }
.tone-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tone { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; align-content: start; gap: 8px; text-align: left; min-height: 44px; transition: border-color .2s ease, box-shadow .2s ease; }
.tone:hover { border-color: #9da99e; }
.tone b { font-size: 12px; }
.tone q { font-family: var(--serif); font-size: 18px; line-height: 1.25; color: #3f423b; }
.tone.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(33,91,71,.1); }
.tone.on b::after { content: " · selected"; font-weight: 500; color: var(--green); }
.tone-fixed { margin: 14px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.tone-fixed b { color: var(--ink); font-weight: 600; }
.ws-demo { background: #1b1d19; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.ws-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 8px 0; background: #22241f; }
.ws-tabs button { border: 0; background: transparent; color: #aeb2a7; font: 600 12px "Manrope", sans-serif; padding: 9px 13px; min-height: 36px; border-radius: 8px 8px 0 0; }
.ws-tabs button:hover { color: #f0f2ea; }
.ws-tabs button[aria-selected="true"] { background: #1b1d19; color: #f0f2ea; }
.ws-pane { padding: 18px; color: #e5e8df; min-height: 180px; }
.ws-result { margin-top: 14px; font: 11px "DM Mono", monospace; }
.ws-result.ok { color: #9bcfae; }
.ws-pane.notes { background-color: #fffef9; background-image: linear-gradient(#efebdf 1px, transparent 1px); background-size: 100% 26px; color: var(--ink); font-size: 14px; line-height: 26px; }
.ws-pane.notes p { margin: 0 0 6px; }
.ws-pane.notes b { font: 12px "DM Mono", monospace; color: var(--green); }
.ws-pane.canvas { background-color: #fffef9; background-image: radial-gradient(#d8d4c8 1px, transparent 1px); background-size: 18px 18px; }
.ws-pane.canvas > svg { width: 100%; height: auto; display: block; }
.ws-pane.canvas > svg .box rect { fill: white; stroke: var(--green); stroke-width: 1.5; }
.ws-pane.canvas > svg text { font: 11px "Manrope", sans-serif; fill: var(--ink); text-anchor: middle; }
.ws-pane.canvas > svg text.sub { font-size: 9px; fill: var(--muted); }
.ws-pane.canvas > svg path { stroke: var(--green); stroke-width: 1.8; fill: none; marker-end: none; }
.ws-pane.canvas > svg .ai rect { fill: #fff2a8; stroke: #b8b39f; stroke-dasharray: 4 3; }
.ws-pane.canvas > svg .ai text { text-anchor: start; font-size: 11px; }
.ws-pane.canvas > svg .ai .lbl { font-size: 7px; font-weight: 700; letter-spacing: .1em; fill: #62655d; }
.ws-pane.canvas > svg text.hand { font-family: var(--serif); font-style: italic; font-size: 15px; fill: var(--orange); }
.mini-score { display: grid; gap: 8px; }
.score-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; background: #fbfaf4; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.score-line span { font-size: 13px; font-weight: 600; }
.score-line b { font: 16px "DM Mono", monospace; }
.score-line small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* 04 · architecture — three places, revealed left to right */
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 900px; }
.principles li { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.5; color: #4b4e47; padding: 15px 0; border-bottom: 1px solid var(--line); }
.principles b { color: var(--ink); }

/* 05 · tracks, on a dark page */
.chapter-dark { background: var(--ink); color: #eeede6; padding-top: clamp(70px, 10vw, 130px); }
.chapter-dark .part-name { color: #a9ada2; }
.chapter-dark .chapter-body { border-left-color: rgba(231,163,126,.5); }
.chapter-dark .chapter-body h2 { color: white; }
.chapter-dark .chapter-body h2 em { color: #e7a37e; }
.chapter-dark .chapter-summary { color: #eeede6; }
.chapter-dark .chapter-summary mark { background: linear-gradient(transparent 60%, rgba(231,163,126,.34) 60%); }
.chapter-dark :focus-visible { outline-color: #e7a37e; }
.track-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 980px; }
.track-card { display: flex; flex-direction: column; gap: 10px; min-height: 210px; padding: 24px; border-radius: 16px; background: #22241f; border: 1px solid #34362f; color: inherit; text-decoration: none; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.track-card:hover { background: #2a2c26; border-color: #e7a37e; transform: translateY(-3px); }
.track-no { font: 11px "DM Mono", monospace; color: #e7a37e; }
.track-card strong { font-size: 21px; letter-spacing: -.02em; }
.track-card p { margin: 0; color: #c2c6bb; font-size: 14px; line-height: 1.55; }
.track-split { font: 11px "DM Mono", monospace; color: #d6d9cf; }
.track-card small { margin-top: auto; font: 11px "DM Mono", monospace; color: #a9ada2; }
.company-row { margin-top: 44px; max-width: 980px; }
.company-row h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; color: white; }
.company-row p { margin: 0 0 16px; color: #c2c6bb; font-size: 14px; line-height: 1.55; }
.company-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.company-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border: 1px solid #45483f; border-radius: 999px; color: #eeede6; text-decoration: none; font-size: 13px; font-weight: 600; }
.company-links a:hover { border-color: #e7a37e; color: white; }

/* 06 · begin */
.chapter-begin { padding-top: clamp(70px, 10vw, 130px); }
.begin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.home-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding: 22px clamp(16px, 5vw, 64px); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* ---------- live scenes (static/readme/scenes.js) ---------- */
/* Parts are only hidden once a scene is prepared; the HTML itself is the finished frame. */
[data-scene] { position: relative; }
[data-play] { transition: opacity .38s ease, transform .45s cubic-bezier(.3,.7,.2,1); }
.scene-ready [data-play].scene-hidden { opacity: 0; }
.scene-ready [data-play="reveal"].scene-hidden { transform: translateY(8px); }
.scene-ready [data-play="tick"].scene-hidden { transform: scale(.7); }
.scene-ready [data-play="drop"].scene-hidden { transform: translateY(-22px) rotate(-4deg); }
[data-play="tick"] { transform-origin: left center; }
.label-pill[data-play] { display: inline-block; }
svg [data-play="drop"] { transform-box: fill-box; transform-origin: center; }
.scene-caret { display: inline-block; width: .55ch; height: 1.05em; margin-left: 1px; vertical-align: -.16em; background: currentColor; opacity: .7; animation: scene-caret 1s steps(2) infinite; }
@keyframes scene-caret { 50% { opacity: 0; } }
.scene-replay { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251,250,246,.94); color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: 0 6px 16px -10px rgba(34,37,29,.4); }
.scene-replay:hover { border-color: #9da99e; }
.home[data-motion="reduced"] [data-play] { transition: none; }
.home[data-motion="reduced"] .scene-caret { display: none; }

/* the cursor that does the work: pointer, text caret, or pen, with a "You" tag */
.scene-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform; }
.scene-cursor.on { opacity: 1; }
.scene-cursor svg { position: absolute; left: 0; top: 0; width: auto; height: auto; overflow: visible; display: none; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); }
.scene-cursor[data-mode="pointer"] .c-pointer, .scene-cursor[data-mode="text"] .c-text, .scene-cursor[data-mode="pen"] .c-pen { display: block; }
.scene-cursor .c-pointer path { fill: var(--orange); stroke: white; stroke-width: 1.3; stroke-linejoin: round; }
.scene-cursor .c-text { transform: translate(-5px, -10px); }
.scene-cursor .c-text path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.scene-cursor .c-pen { transform: translate(-3px, -19px); }
.scene-cursor .c-pen .body { fill: var(--orange); stroke: white; stroke-width: 1.2; stroke-linejoin: round; }
.scene-cursor .c-pen .tip { fill: var(--ink); }
.scene-cursor-tag { position: absolute; left: 13px; top: 17px; padding: 2px 7px; border-radius: 6px 6px 6px 2px; background: var(--orange); color: white; font: 700 10px/1.4 "Manrope", sans-serif; white-space: nowrap; box-shadow: 0 2px 6px -2px rgba(0,0,0,.35); }
.scene-cursor[data-mode="text"] .scene-cursor-tag { left: 8px; top: 12px; }
.scene-cursor-tag { transition: opacity .2s ease; }
.scene-cursor.typing .scene-cursor-tag { opacity: 0; }
.scene-cursor[data-mode="pen"] .scene-cursor-tag { left: 12px; top: 6px; }
.scene-cursor.pressing svg { animation: scene-press .22s ease 1; }
@keyframes scene-press { 50% { scale: .85; } }
.scene-ripple { position: absolute; left: -11px; top: -11px; z-index: 4; width: 22px; height: 22px; border: 2px solid var(--orange); border-radius: 50%; pointer-events: none; animation: scene-ripple .5s ease-out forwards; }
@keyframes scene-ripple { from { opacity: .9; scale: .3; } to { opacity: 0; scale: 1.5; } }
.home[data-motion="reduced"] .scene-cursor, .home[data-motion="reduced"] .scene-ripple { display: none; }

/* workspace chrome inside the demos, modelled on the real interview screen */
.ws-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 12px; }
.ws-file { font: 500 11px "DM Mono", monospace; color: #9ca195; }
.ws-pane.notes .ws-file, .ws-pane.canvas .ws-file { color: var(--muted); }
.ws-actions, .ws-tools { display: inline-flex; gap: 6px; }
.ws-tools { padding: 3px; border-radius: 8px; background: #efece2; }
.ws-btn, .ws-tool { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 7px; font: 700 11px "Manrope", sans-serif; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.ws-btn { background: #2c2f28; color: #e5e8df; border: 1px solid #3d4038; }
.ws-btn.run { background: var(--green); border-color: var(--green); color: white; }
.ws-btn.check { background: #e7a37e; border-color: #e7a37e; color: #2b1a10; }
.ws-pane.notes .ws-btn, .ws-pane.canvas .ws-btn, .stage-head .ws-btn { background: white; color: var(--ink); border: 1px solid var(--line); }
.ws-pane.notes .ws-btn.primary, .ws-pane.canvas .ws-btn.primary { background: var(--green); border-color: var(--green); color: white; }
.stage-head .ws-btn.end { background: #efe0dc; border-color: #efe0dc; color: var(--red); }
.ws-tool { color: var(--muted); }
.ws-tool.active { background: white; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.story .ws-pane { height: 330px; min-height: 0; overflow: hidden; position: relative; }
.ws-table { width: 100%; margin-top: 10px; border-collapse: collapse; font: 11px "DM Mono", monospace; color: #e5e8df; }
.ws-table th, .ws-table td { padding: 4px 8px; border-bottom: 1px solid #34362f; text-align: left; }
.ws-table th { color: #9ca195; font-weight: 500; }
.notes-body p { margin: 0 0 6px; }
.ws-pane.canvas > svg .sketch { fill: none; stroke: #2b2d28; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ws-pane.canvas > svg .sketch.arrow { stroke: var(--green); }
.ws-pane.canvas > svg .sketch.underline { stroke: var(--orange); stroke-width: 1.6; }
.ws-pane.canvas > svg .ctext text { font: 11px "Manrope", sans-serif; fill: var(--ink); text-anchor: middle; }
.ws-pane.canvas > svg .ctext text.sub { font-size: 9px; fill: var(--muted); }
.ws-pane.canvas > svg .ctext text.hand { font-family: var(--serif); font-style: italic; font-size: 15px; fill: var(--orange); }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mock-check { margin-top: 14px; }

/* ---------- 03 · the story: before / during / after beside one live window ---------- */
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); margin-top: 12px; }
.story-beats { display: grid; }
.beat { min-height: 64vh; padding: 10vh 0 0 18px; border-left: 2px solid transparent; transition: border-color .3s ease; }
.beat:first-child { padding-top: 22vh; } /* the stage is already stuck in place by the time you read "Before" */
.beat.is-current { border-left-color: var(--orange); }
.beat-no { font: 500 11px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.beat h3 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.12; letter-spacing: -.03em; margin: 8px 0 12px; }
.beat p { font-size: 16px; line-height: 1.7; color: #4b4e47; margin: 0 0 12px; }
.story-stage { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.stage-tabs { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 12px; background: #e9e6dc; border-radius: 12px; }
.stage-tabs button { min-height: 36px; padding: 8px 15px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.stage-tabs button:hover { color: var(--ink); }
.stage-tabs button[aria-selected="true"] { background: white; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.stage-window, .mock-window { border-radius: 20px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 50px 100px -44px rgba(34,37,29,.34), 0 18px 40px -26px rgba(34,37,29,.22); }
.stage-window { position: relative; overflow: hidden; background: var(--surface); border: 1px solid #d6d2c5; }
.stage-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #efede5; font-size: 12px; color: var(--muted); }
.stage-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d5c9; }
.stage-bar span { margin-left: 10px; font-weight: 700; }
.stage-panel { display: grid; align-content: start; gap: 12px; min-height: 510px; padding: 18px 18px 58px; } /* one height for every stage: no jump when beats switch */
.stage-label { font: 500 10px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stage-caption { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.stage-panel .tone-fixed { margin: 0; }
/* compact figures inside the stage so each panel fits beside its beat on an 800px-tall screen */
.stage-panel .chip { padding: 6px 11px; font-size: 12px; }
.stage-panel .mini-chips { gap: 6px; }
.stage-panel .mini-card { padding: 14px; gap: 6px; }
.stage-panel .mini-card strong { font-size: 18px; }
.stage-panel .tone { padding: 10px 12px; gap: 6px; }
.stage-panel .tone q { font-size: 15.5px; }
.stage-panel .mini-card { box-shadow: 0 10px 30px -18px rgba(34,37,29,.3); }
/* the interviewer's prompts: only the most recent one shows */
.stage-strip { display: grid; }
.stage-strip p { grid-area: 1 / 1; margin: 0; padding: 9px 12px; background: #fff9df; border: 1px solid #e7db9f; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.stage-strip b { margin-right: 6px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stage-strip p:has(~ p:not(.scene-hidden)) { opacity: 0 !important; transform: translateY(-6px); }
.story .ws-pane { min-height: 300px; position: relative; }
.ws-sticky { position: absolute; right: 14px; bottom: 14px; width: min(190px, 60%); padding: 10px 12px; background: #fff2a8; border-radius: 3px; box-shadow: 0 10px 20px -12px rgba(34,37,29,.5); font: 16px/1.25 var(--serif); color: var(--ink); transform: rotate(2deg); }
.ws-sticky span { display: block; margin-bottom: 3px; font: 700 8px "Manrope", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #62655d; }
.score-bar { grid-column: 1 / -1; height: 5px; overflow: hidden; background: #ebe8de; border-radius: 3px; }
.score-bar i { display: block; height: 100%; background: var(--green); transform: scaleX(var(--fill, 1)); transform-origin: left; }

/* Granola-like calm: more air between chapters; no setup chrome on the Readme */
.chapter { padding-bottom: clamp(90px, 12vw, 170px); }
.hero-figure { margin-top: clamp(56px, 8vw, 104px); }
body[data-view="home"] .site-header .setup-status { display: none; }

/* ---------- chapter rail (independent of the companion) ---------- */
.chapter-rail { position: fixed; z-index: 4; right: max(10px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 8px; padding: 8px 5px; background: rgba(251,250,246,.92); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(6px); }
.chapter-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chapter-rail a { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); text-decoration: none; font: 500 10px "DM Mono", monospace; }
.chapter-rail a:hover { background: #e9e6dc; color: var(--ink); }
.chapter-rail a[aria-current] { background: var(--ink); color: white; }
.rail-label { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 7px; background: var(--ink); color: white; font: 600 12px "Manrope", sans-serif; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.chapter-rail a:hover .rail-label, .chapter-rail a:focus-visible .rail-label { opacity: 1; }
.rail-track { position: absolute; left: 1px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: #e4e0d4; overflow: hidden; }
.rail-fill { display: block; height: 100%; background: var(--orange); transform: scaleY(0); transform-origin: top; }
.rail-guide { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: white; }
.rail-guide svg { width: 16px; height: 16px; fill: var(--ink); }
.rail-guide.is-off svg { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 2.5 2; }
.rail-guide:hover { border-color: #9da99e; }
.readme-progress { display: none; position: fixed; z-index: 6; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.readme-progress span { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }

/* ---------- the companion ---------- */
.perch { position: sticky; top: var(--perch-top, 34vh); width: 100%; max-width: 172px; margin-top: 30px; }
.perch[data-perch-y="high"] { --perch-top: 176px; }
.perch[data-perch-y="mid"] { --perch-top: clamp(176px, 32vh, 300px); }
.perch[data-perch-y="low"] { --perch-top: clamp(176px, 44vh, 400px); }
.perch-intro { position: static; max-width: none; margin: 0; min-height: 78px; } /* reserved: no shift when the companion arrives */
.companion { --cmp-ink: var(--ink); --cmp-paper: var(--paper); --cmp-tick: var(--green); position: relative; display: grid; justify-items: start; gap: 6px; width: 100%; }
.companion[data-surface="dark"] { --cmp-ink: #f4f2ea; --cmp-paper: #161714; --cmp-tick: #9bcfae; }
.cmp-avatar { display: block; width: 72px; height: 60px; padding: 0; border: 0; border-radius: 12px; background: transparent; }
.cmp-art { display: block; width: 72px; height: 60px; overflow: visible; }
.cmp-shadow { fill: rgba(22,23,20,.12); }
.companion[data-surface="dark"] .cmp-shadow { fill: rgba(0,0,0,.45); }
.cmp-figure, .cmp-eyes { transform-box: fill-box; transform-origin: 50% 100%; }
.cmp-eyes { transform-origin: 50% 50%; }
.cmp-figure { transition: transform .4s cubic-bezier(.3,.7,.2,1); }
.cmp-body { fill: var(--cmp-ink); }
.cmp-sclera { fill: var(--cmp-paper); }
.cmp-pupils { fill: var(--cmp-ink); transform: translate(var(--gx, 0px), var(--gy, .6px)); transition: transform .35s ease; }
.cmp-lids path { fill: none; stroke: var(--cmp-paper); stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.cmp-brows path { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .2s ease, transform .25s ease; }
.cmp-mouth { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity .2s ease; }
.cmp-mouth-open { fill: var(--orange); stroke: none; }
.cmp-mouth-flat { opacity: 1; }
.cmp-arrow, .cmp-arrowhead, .cmp-tick { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cmp-arrow, .cmp-arrowhead { stroke: var(--orange); stroke-width: 2.6; transition: stroke-dashoffset .4s ease; }
.cmp-arrowhead { transition-delay: 0s; }
.cmp-tick { stroke: var(--cmp-tick); stroke-width: 3; transition: stroke-dashoffset .45s ease; }
.cmp-z { font: italic 20px var(--serif); fill: var(--orange); opacity: 0; transition: opacity .6s ease; }

.companion[data-state="moving"] .cmp-figure { transform: rotate(-5deg); }
.companion[data-state="observing"] .cmp-brows path { opacity: .9; }
.companion[data-state="pointing"] .cmp-arrow { stroke-dashoffset: 0; }
.companion[data-state="pointing"] .cmp-arrowhead { stroke-dashoffset: 0; transition-delay: .3s; }
.companion[data-state="pointing"] .cmp-figure { transform: rotate(3deg); }
.companion[data-state="reacting"] .cmp-figure { transform: translateY(-3px); }
.companion[data-state="reacting"] .cmp-brows path { opacity: 1; transform: translateY(-1.5px); }
.companion[data-state="reacting"] .cmp-mouth-flat, .companion[data-state="celebrating"] .cmp-mouth-flat { opacity: 0; }
.companion[data-state="reacting"] .cmp-mouth-open { opacity: 1; }
.companion[data-state="celebrating"] .cmp-mouth-smile { opacity: 1; }
.companion[data-state="celebrating"] .cmp-tick { stroke-dashoffset: 0; }
.companion[data-state="celebrating"] .cmp-figure { animation: cmp-hop .6s cubic-bezier(.3,.7,.2,1) 1; }
.companion[data-state="sleeping"] .cmp-eyes { opacity: 0; }
.companion[data-state="sleeping"] .cmp-lids path, .companion[data-state="sleeping"] .cmp-z { opacity: 1; }
.companion[data-state="sleeping"] .cmp-figure { transform: translateY(2px); }
.companion.blink .cmp-eyes { animation: cmp-blink .22s ease 1; }
/* speaking: the mouth follows the voice's loudness (set per frame as --mouth, 0…1) */
.companion.speaking .cmp-mouth-flat, .companion.speaking .cmp-mouth-smile { opacity: 0; }
.companion.speaking .cmp-mouth-open { opacity: 1; transform-box: fill-box; transform-origin: 50% 30%; transform: scale(calc(.75 + var(--mouth, 0) * .5), calc(.25 + var(--mouth, 0) * 1.35)); }
@keyframes cmp-blink { 50% { transform: scaleY(.12); } }
@keyframes cmp-hop { 40% { transform: translateY(-7px); } 70% { transform: translateY(0); } 85% { transform: translateY(-2px); } }

.cmp-bubble { position: relative; max-width: 100%; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; box-shadow: 0 10px 28px -16px rgba(34,37,29,.4); color: var(--ink); transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.cmp-bubble[data-empty="true"] { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.cmp-text { margin: 0; font: 17px/1.25 var(--serif); }
.cmp-text:empty { display: none; }
.cmp-next { display: inline-flex; align-items: center; min-height: 28px; margin-top: 6px; color: var(--green); font-size: 12px; font-weight: 700; text-decoration: none; }
.cmp-next::after { content: " ↓"; white-space: pre; }
.cmp-next:hover { text-decoration: underline; }
.cmp-menu { display: grid; gap: 6px; }
.cmp-text:not(:empty) ~ .cmp-menu { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cmp-menu-label { font: 500 10px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmp-menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cmp-menu button { min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 12px; font-weight: 700; text-align: left; }
.cmp-menu button:hover { border-color: #9da99e; }
.cmp-menu button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: white; }
.cmp-menu button:disabled { cursor: default; opacity: .75; }
.perch-intro .companion { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; }
.perch-intro .cmp-bubble { margin-top: 4px; }

/* ---------- hands-free tour ---------- */
.tour-play { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--green); color: white; text-align: left; font-size: 14px; font-weight: 700; }
.tour-play:hover { background: #1b4c3b; }
.tour-play:disabled { opacity: .5; cursor: default; }
.tour-play small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #d3e3d9; }
.tour-play-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 11px; padding-left: 2px; }
.tour-stage { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.tour-stage .companion { position: absolute; left: 0; top: 0; width: min(236px, calc(100vw - 24px)); pointer-events: auto; will-change: transform; }
.tour-stage .cmp-bubble { box-shadow: 0 16px 40px -18px rgba(34,37,29,.55); }
.companion[data-facing="left"] .cmp-art { transform: scaleX(-1); }
.companion[data-facing="left"].on-stage { justify-items: start; }
.tour-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 2px solid var(--orange); border-radius: 18px; box-shadow: 0 0 0 6px rgba(216,108,61,.14); opacity: 0; transition: transform .5s cubic-bezier(.3,.7,.2,1), width .5s cubic-bezier(.3,.7,.2,1), height .5s cubic-bezier(.3,.7,.2,1), opacity .25s ease; }
.tour-ring.on { opacity: 1; }
.track-card.tour-lit { background: #2a2c26; border-color: #e7a37e; }
.tour-player { position: fixed; z-index: 8; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; overflow: hidden; background: var(--ink); color: #eeede6; border-radius: 16px; box-shadow: 0 20px 50px -18px rgba(22,23,20,.6); }
.tour-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.08); }
.tour-progress span { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.tour-controls { display: flex; gap: 4px; }
.tour-player button { min-width: 40px; min-height: 40px; border: 1px solid #3d4038; border-radius: 10px; background: #22241f; color: #eeede6; font-size: 13px; font-weight: 700; }
.tour-player button:hover { border-color: #e7a37e; }
.tour-player :focus-visible { outline-color: #e7a37e; }
.tour-toggle { background: #eeede6 !important; color: var(--ink) !important; }
.tour-meta { min-width: 0; }
.tour-count { display: block; font: 500 10.5px "DM Mono", monospace; letter-spacing: .08em; color: #e7a37e; }
.tour-caption { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: #eeede6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tour-voice { padding: 0 12px; }
.tour-voice[aria-pressed="true"] { background: var(--green) !important; border-color: var(--green) !important; }
.tour-end { padding: 0 12px; }
.home.is-touring .chapter-rail { opacity: .55; }
.home[data-motion="reduced"] .tour-ring, .home[data-motion="reduced"] .tour-progress span { transition: opacity .2s ease; }
@media (max-width: 760px), (max-height: 480px) { /* keep in sync with landing.js `compact` */
  .tour-player { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; align-items: start; }
  .tour-voice, .tour-end { grid-row: 2; }
  .tour-voice { grid-column: 1; }
  .tour-end { grid-column: 2; justify-self: end; }
  /* Small screens: just the avatar flies; the line lives in the player as a caption. */
  .tour-stage .companion { width: auto; }
  .tour-stage .cmp-bubble { display: none; }
  .tour-caption { -webkit-line-clamp: 3; }
}

/* small screens: the companion docks in a corner instead of travelling */
.companion-dock { display: none; position: fixed; z-index: 4; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 24px)); pointer-events: none; }
.companion-dock > * { pointer-events: auto; }
.companion-dock .companion { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 8px; }
.companion-dock .cmp-avatar { display: grid; place-items: center; width: 54px; height: 50px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; box-shadow: 0 8px 22px -12px rgba(34,37,29,.45); }
.companion-dock .cmp-art { width: 52px; height: 44px; }
.companion-dock .cmp-shadow { display: none; }
.companion-dock .cmp-menu button { min-height: 44px; }
.guide-restore { min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 700; box-shadow: 0 8px 22px -12px rgba(34,37,29,.45); }

/* reduced motion — by OS setting or the guide's own toggle */
.home[data-motion="reduced"] .reveal,
.home[data-motion="reduced"] .cmp-figure,
.home[data-motion="reduced"] .cmp-pupils,
.home[data-motion="reduced"] .cmp-brows path,
.home[data-motion="reduced"] .cmp-arrow,
.home[data-motion="reduced"] .cmp-arrowhead,
.home[data-motion="reduced"] .cmp-tick,
.home[data-motion="reduced"] .compare-gap::before,
.home[data-motion="reduced"] .track-card { transition: none; animation: none; }
.home[data-motion="reduced"] .cmp-figure,
.home[data-motion="reduced"] .cmp-brows path,
.home[data-motion="reduced"] .track-card:hover { transform: none; }
.home[data-motion="reduced"] .cmp-bubble { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .track-card, .cmp-figure, .cmp-pupils { transition: none; }
  .track-card:hover { transform: none; }
}

@media (max-width: 1080px) {
  .hero-lower { grid-template-columns: 1fr; align-items: start; }
  .hero-side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
  .mock-grid { grid-template-columns: 1fr 1.3fr; }
  .mock-notebook { display: none !important; }
  .force { grid-template-columns: 1fr; }
}
@media (max-width: 760px), (max-height: 480px) {
  /* story: each panel sits under its own beat (story.js moves them); no sticky stage */
  .story { grid-template-columns: 1fr; }
  .story-stage { display: none; }
  .beat { min-height: 0; padding: 30px 0 0 14px; }
  .beat > .stage-panel { min-height: 0; margin-top: 14px; background: var(--surface); border: 1px solid #d6d2c5; border-radius: 16px; box-shadow: 0 30px 60px -40px rgba(34,37,29,.35); }
  .chapter-rail, .perch:not(.perch-intro) { display: none; }
  .readme-progress { display: block; }
  .companion-dock { display: block; }
  .home.readme-enhanced { padding-bottom: 84px; }
}
@media (max-width: 760px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter-margin { display: flex; gap: 10px; align-items: baseline; margin-bottom: 14px; }
  .chapter-margin > span { position: static; }
  .part-name { font-size: 20px; margin: 0; }
  .chapter-body { padding-left: 16px; }
  .chapter-summary { font-size: 17px; margin-bottom: 24px; }
  .mock-grid { grid-template-columns: 1fr; }
  .mock-transcript { border-right: 0; border-bottom: 1px solid var(--line); }
  .fig-compare { grid-template-columns: 1fr; }
  .compare-gap { min-height: 34px; }
  .compare-gap::before { top: 50%; bottom: auto; left: 14px; right: 14px; border-left: 0; border-top: 1.5px dashed var(--orange); transform-origin: left; }
  .compare-gap span { writing-mode: horizontal-tb; transform: none; padding: 0 10px; }
  .home.readme-enhanced[data-motion="full"] .fig-compare:not(.in) .compare-gap::before { transform: scaleX(0); }
  .label-table, .tone-row, .track-cards { grid-template-columns: 1fr; }
  .prose p { font-size: 16px; }
  .force { padding: 20px; }
  .subhead { margin-top: 44px; }
}

/* =====================================================================
   App pages: the practice library and company collections, written in
   the Readme's language: a notebook margin with the companion, calm
   serif-accented headlines, and product-window chrome.
   ===================================================================== */
.app-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.app-margin { position: relative; padding-top: 10px; }
.app-margin > span { position: sticky; top: 90px; display: block; }
.app-margin .part-name { font-size: 24px; }
.app-perch { top: 176px; max-width: 138px; margin-top: 30px; }
.app-body { min-width: 0; border-left: 1.5px solid rgba(216,108,61,.55); padding-left: clamp(20px, 3vw, 40px); }
.app-page .library-intro h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.045em; margin: 8px 0 12px; }
.app-page .library-intro h1 em, .app-page .company-hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--green); letter-spacing: -.01em; }
.app-page .chapter-summary { margin-bottom: 22px; max-width: 760px; }
.app-page .search-box { border-radius: 14px; box-shadow: 0 10px 30px -22px rgba(34,37,29,.4); }
.app-page .filter-row select { border-radius: 999px; padding-left: 14px; }

.app-window { background: var(--surface); border: 1px solid #d6d2c5; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 40px 90px -46px rgba(34,37,29,.3), 0 14px 34px -26px rgba(34,37,29,.2); }
.app-window-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #efede5; font-size: 12px; color: var(--muted); }
.app-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d5c9; flex: none; }
.app-window-bar span { margin-left: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* results */
.app-page .results .results-head { padding: 12px 16px 6px; }
.app-page .question-table { border: 0; border-radius: 0; background: transparent; }
.app-page .question-row:not(.head) { transition: box-shadow .2s ease, background-color .2s ease; }
.app-page .question-row:not(.head):hover, .app-page .question-row:not(.head):focus-visible { background: #fffdf6; box-shadow: inset 3px 0 0 rgba(216,108,61,.55); }
.app-page .question-row.selected { box-shadow: inset 3px 0 0 var(--orange); }
.q-title { display: flex; align-items: center; gap: 9px; }
.ws-glyph { display: inline-grid; place-items: center; flex: none; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 6px; font: 700 9.5px "DM Mono", monospace; letter-spacing: .02em; }
.ws-glyph.ws-python { background: var(--green-soft); color: var(--green); }
.ws-glyph.ws-sql { background: var(--orange-soft); color: #8d3e1b; }
.ws-glyph.ws-notes { background: var(--yellow-soft); color: #7a6512; font-size: 12px; }
.ws-glyph.ws-canvas { background: var(--blue-soft); color: #1f4d73; font-size: 12px; }
#questionRows.rows-enter .question-row.stagger { animation: row-in .42s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } }
.empty-note { font: italic 22px/1.3 var(--serif); color: var(--orange); }
.app-page .pagination { padding: 10px 16px 14px; }

/* preview window */
/* The window chrome's overflow: hidden must not win here: the preview scrolls on its own. */
.app-page .preview-panel { border: 1px solid #d6d2c5; border-radius: 20px; padding: 0 20px 20px; overflow-x: hidden; overflow-y: auto; }
.app-page .preview-panel .app-window-bar { margin: 0 -20px 16px; position: sticky; top: 0; z-index: 3; }
.app-page .preview-close { top: 5px; right: 10px; z-index: 4; } /* shown only on the mobile sheet */
/* the glyph already names the workspace, so the Format column steps aside */
.library-view .question-row { grid-template-columns: minmax(0, 1fr) 130px 64px; }
.library-view .question-row > :nth-child(3) { display: none; }
.company-view .chapter-summary { font-size: 18px; font-weight: 500; line-height: 1.55; color: #3f423b; }
.preview-demo { margin: 0 0 16px; }
.preview-demo .ws-demo { border-radius: 14px; }
.preview-demo .ws-pane { position: relative; height: 244px; overflow: hidden; }
.preview-demo .ws-pane.canvas > svg { max-height: 140px; }
.preview-demo figcaption { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.preview-demo figcaption span { display: inline-block; margin-right: 6px; padding: 2px 7px; border-radius: 5px; background: #ebe8de; font: 700 9px "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #4f524b; }

/* companies: dark rooms, like the Readme's tracks chapter */
.companies-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin-top: 8px; }
.companies-view .company-cards { margin-top: 0; }
.companies-view .company-card { background: #22241f; border-color: #34362f; color: #eeede6; border-radius: 16px; padding: 22px; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.companies-view .company-card:hover { background: #2a2c26; border-color: #e7a37e; transform: translateY(-3px); box-shadow: none; }
.companies-view .company-card .track-no { font: 11px "DM Mono", monospace; color: #e7a37e; }
.companies-view .company-card p { color: #c2c6bb; }
.companies-view .company-card small.muted, .companies-view .company-counts { color: #a9ada2; }
.companies-view .label-legend { margin-top: 0; position: sticky; top: 90px; padding: 0 16px 16px; }
.companies-view .label-legend .app-window-bar { margin: 0 -16px 12px; }
.companies-view .label-legend dl { grid-template-columns: 1fr; gap: 4px; }
.companies-view .label-legend dd { margin-bottom: 8px; }
.company-view .company-hero h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -.045em; margin: 8px 0 12px; }
.company-view .company-group { padding: 14px; margin-bottom: 14px; }

.app-page[data-motion="reduced"] #questionRows .question-row, .app-page[data-motion="reduced"] .company-card { animation: none; transition: none; }
.app-page[data-motion="reduced"] .scene-cursor, .app-page[data-motion="reduced"] .scene-ripple { display: none; }
@media (prefers-reduced-motion: reduce) { #questionRows .question-row { animation: none !important; } }

@media (max-width: 1080px), (max-height: 480px) { /* keep in sync with guide_host.js */
  .app-page .companion-dock { display: block; }
  .app-perch { display: none; }
  .app-page { padding-bottom: 96px; }
  .companies-layout { grid-template-columns: 1fr; }
  .companies-view .label-legend { position: static; }
}
@media (max-width: 1080px) {
  .app-layout { grid-template-columns: 1fr; }
  .app-margin { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
  .app-margin > span { position: static; }
  .app-margin .part-name { font-size: 20px; margin: 0; }
  .app-body { border-left: 0; padding-left: 0; }
}

/* =====================================================================
   Finishing an interview, the report page, and the report history.
   ===================================================================== */
.finish-dialog { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 20px; padding: 0; background: var(--surface); box-shadow: 0 30px 100px rgba(0,0,0,.25); }
.finish-dialog::backdrop { background: rgba(20,22,18,.6); backdrop-filter: blur(4px); }
.finish-shell { padding: 28px; }
.finish-shell h2 { font-size: 30px; letter-spacing: -.04em; margin: 8px 0 18px; font-weight: 600; }
.finish-shell h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--green); }
.finish-steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.finish-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.finish-steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; box-sizing: border-box; }
.finish-steps li.active { color: var(--ink); font-weight: 600; }
.finish-steps li.active::before { border-color: var(--orange); border-top-color: transparent; animation: finish-spin .9s linear infinite; }
.finish-steps li.done { color: var(--green); }
.finish-steps li.done::before { background: var(--green); border-color: var(--green); }
@keyframes finish-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .finish-steps li.active::before { animation: none; border-top-color: var(--orange); } }
.finish-actions { display: flex; gap: 8px; margin-top: 14px; }

.report-index { position: sticky; top: 360px; display: grid; gap: 2px; margin-top: 24px; max-width: 138px; }
.report-index button { border: 0; background: transparent; text-align: left; padding: 5px 8px 5px 0; font-size: 12px; color: var(--muted); }
.report-index button:hover { color: var(--ink); }
.report-detail { max-width: 980px; }
.report-detail .label { display: block; font: 600 10px "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }

.report-hero { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.report-hero h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.045em; margin: 8px 0 12px; font-weight: 600; }
.verdict-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px; }
.verdict-row > div { display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); min-width: 120px; }
.verdict-row span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.verdict-row strong { font-size: 24px; letter-spacing: -.03em; }
.verdict-confidence strong { text-transform: capitalize; }
.verdict-score strong, .verdict-confidence strong { font-family: "DM Mono", monospace; font-size: 22px; }
.verdict { min-width: 180px !important; }
.verdict-strong { background: var(--green) !important; border-color: var(--green) !important; color: white; }
.verdict-strong span { color: rgba(255,255,255,.75); }
.verdict-hire { background: var(--green-soft) !important; border-color: #b9d2c2 !important; color: var(--green); }
.verdict-mixed { background: #f4e7c8 !important; border-color: #e5d3a4 !important; color: #8a5a12; }
.verdict-nohire { background: #f0dbd6 !important; border-color: #e3c2ba !important; color: var(--red); }
.report-headline { font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; letter-spacing: -.015em; line-height: 1.4; margin: 0 0 10px; max-width: 760px; }
.report-debrief { font-size: 15px; line-height: 1.65; color: #3f423b; margin: 0 0 16px; max-width: 760px; }
.source-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.source-note.quick { background: var(--yellow-soft); color: #5f4f0f; }
.source-note.ai { background: #eeece4; color: #4f524b; }
.report-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.report-section { padding: 34px 0 8px; scroll-margin-top: 80px; }
.report-section-head h2 { font-size: 26px; letter-spacing: -.035em; margin: 0 0 4px; font-weight: 600; }
.report-section-head p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

.bucket-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bucket { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 16px 18px; border-top: 4px solid var(--line); }
.bucket-strengths { border-top-color: var(--green); }
.bucket-weaknesses { border-top-color: var(--orange); }
.bucket-should_be_better { border-top-color: #c98a1f; }
.bucket-could_be_better { border-top-color: #7aa7c7; }
.bucket-dealbreakers { border-top-color: var(--red); grid-column: 1 / -1; }
.bucket-head { display: flex; align-items: center; justify-content: space-between; }
.bucket-head h3 { margin: 0; font-size: 16px; }
.bucket-count { font: 12px "DM Mono", monospace; background: #ebe8de; border-radius: 999px; padding: 2px 9px; }
.bucket-help { margin: 4px 0 12px; font-size: 12px; color: var(--muted); }
.bucket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bucket-empty { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
.feedback-item strong { display: block; font-size: 14px; margin-bottom: 6px; }
.feedback-item p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: #3f423b; }
.report-detail blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid rgba(216,108,61,.55); background: #fffdf6; font-family: var(--serif); font-size: 17px; line-height: 1.35; color: #2b2d28; border-radius: 0 8px 8px 0; }

.dimension-list { display: grid; gap: 12px; }
.dimension { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 16px 18px; }
.dimension-head { display: flex; align-items: center; gap: 12px; }
.dimension-head h3 { margin: 0; font-size: 16px; flex: 1; }
.dimension-head strong { font: 18px "DM Mono", monospace; }
.score-meter { display: inline-flex; gap: 3px; }
.score-meter i { width: 22px; height: 6px; border-radius: 3px; background: #e3e0d5; }
.score-1 .score-meter i.on { background: var(--red); }
.score-2 .score-meter i.on { background: #c98a1f; }
.score-3 .score-meter i.on, .score-4 .score-meter i.on { background: var(--green); }
.dimension .evidence { margin: 12px 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: #4f524b; }
.dimension dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; line-height: 1.5; }
.dimension dt { color: var(--muted); font-weight: 600; }
.dimension dd { margin: 0; }

.moment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.moment { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.moment p { margin: 0; font-size: 13px; line-height: 1.55; }
.moment-kind { font: 500 11px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.moment-strongest .moment-kind { color: var(--green); }
.moment-weakest .moment-kind { color: var(--orange); }
.moment-missed .moment-kind { color: #1f4d73; }
.better ul, .note-block ul, .note-block ol { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: #3f423b; }

.notebook-grid, .next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.note-block { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; }
.note-block h3 { margin: 0 0 8px; font-size: 14px; }
.note-block p { margin: 0; font-size: 13px; line-height: 1.6; color: #3f423b; }
.private-notes { background: #fff9df; border-color: #e7db9f; grid-column: 1 / -1; }
.private-notes .fine-print { margin-bottom: 8px; }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.stat-tile { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; display: grid; gap: 4px; }
.stat-tile strong { font: 22px "DM Mono", monospace; }
.stat-tile span { font-size: 12px; color: var(--muted); }
.process-advice { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: #eeece4; font-size: 13px; line-height: 1.55; }

.reveal-button { margin: 4px 0 14px; }
.model-answer-body { display: grid; gap: 12px; }
.reference-text { white-space: pre-wrap; font-size: 13px; line-height: 1.65; color: #3f423b; }
.reference-code { margin: 0; padding: 14px; border-radius: 10px; background: #22241f; color: #eeede6; font: 12.5px/1.55 "DM Mono", monospace; overflow-x: auto; }

.next-steps li { margin-bottom: 6px; }
.next-questions { display: grid; gap: 8px; }
.next-question { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: #fffdf6; }
.next-question:hover { border-color: #e7a37e; }
.next-question span { font-size: 12px; color: var(--muted); }

.report-filters { margin-bottom: 14px; }
.report-table { padding-bottom: 4px; }
.report-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 60px 70px auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.report-row:first-of-type { border-top: 0; }
.report-row-main { display: grid; gap: 3px; text-decoration: none; color: var(--ink); min-width: 0; }
.report-row-main strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-row-main span { font-size: 12px; }
.report-row-main:hover strong { color: var(--green); }
.report-row-score { font: 14px "DM Mono", monospace; }
.report-row-source { font-size: 11px; color: var(--muted); }
.report-row-actions { display: flex; gap: 2px; }
.verdict-pill { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.verdict-pill.verdict-strong { background: var(--green); color: white; }
.verdict-pill.verdict-hire { background: var(--green-soft); color: var(--green); }
.verdict-pill.verdict-mixed { background: #f4e7c8; color: #8a5a12; }
.verdict-pill.verdict-nohire { background: #f0dbd6; color: var(--red); }

@media (max-width: 1080px) {
  .report-index { display: none; }
}
@media (max-width: 760px) {
  .bucket-grid, .notebook-grid, .next-grid { grid-template-columns: 1fr; }
  .dimension dl { grid-template-columns: 1fr; }
  .dimension dt { margin-top: 6px; }
  .dimension-head { flex-wrap: wrap; }
  .report-row { grid-template-columns: minmax(0, 1fr) auto; }
  .report-row-source { display: none; }
  .report-row-actions { grid-column: 1 / -1; }
  .verdict-row > div { flex: 1 1 40%; min-width: 0 !important; }
}

@media print {
  @page { margin: 16mm; }
  body { background: white; }
  .site-header, .app-margin, .companion-dock, .back-link, .report-actions, .regen-button, .reveal-button, .toast, #finishDialog { display: none !important; }
  .report-view, .report-view .app-body { padding: 0 !important; border: 0 !important; }
  .app-layout { display: block; }
  .model-answer-body { display: grid !important; }
  .model-answer-body[hidden] { display: grid !important; }
  .bucket, .dimension, .moment, .note-block, .stat-tile { break-inside: avoid; box-shadow: none; }
  .report-section { break-before: auto; padding-top: 18px; }
  .reference-code { background: #f4f2ea; color: #161714; white-space: pre-wrap; }
}

/* ---------- privacy, consent, feedback ---------- */
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { color: var(--muted); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--ink); }
.consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--green); flex: none; }
.report-feedback { display: grid; gap: 12px; max-width: 640px; }
.report-feedback .feedback-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.report-feedback .feedback-choices button[aria-pressed="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.report-feedback textarea, .report-feedback input[type="email"] { width: 100%; font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.report-feedback .thanks { color: var(--green); font-weight: 600; }
@media (max-width: 760px) {
  /* Keep every top-level page reachable on phones: the menu scrolls sideways instead of clipping. */
  .site-nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; flex: none; }
}