:root {
  --ink: #1f2828;
  --ink-soft: #667371;
  --paper: #f5f6f4;
  --paper-light: #ffffff;
  --paper-muted: #edf0ed;
  --line: #dce2dd;
  --line-strong: #cbd4ce;
  --forest: #17665c;
  --forest-dark: #104940;
  --coral: #c97961;
  --night: #182122;
  --display: "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --sans: "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .7; }
.hidden { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 8; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 84px); border-bottom: 1px solid var(--line); background: rgba(245, 246, 244, .94); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--ink); border-radius: 6px; color: var(--forest-dark); font-family: var(--display); font-size: 17px; font-weight: 650; }
.brand strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 650; line-height: 1.05; }
.brand small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.test-mode-badge { padding: 6px 9px; border: 1px solid rgba(15, 107, 91, .28); border-radius: 6px; color: var(--forest); background: rgba(15, 107, 91, .08); font-size: 12px; font-weight: 700; white-space: nowrap; }
.text-button, .round-button, .back-button { border: 0; background: transparent; color: var(--ink-soft); }
.text-button { padding: 8px 0; font-size: 13px; }
.text-button:hover, .back-button:hover { color: var(--forest); }
.round-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; }

.home-view { width: min(1180px, 100%); min-height: calc(100vh - 68px); margin: 0 auto; padding: clamp(38px, 7vw, 92px) clamp(20px, 6vw, 84px) 32px; }
.home-intro { max-width: 620px; }
.eyebrow, .field-label { margin: 0; color: var(--ink-soft); font-size: 12px; font-weight: 560; }
.home-intro h1 { margin: 13px 0 14px; font-family: var(--display); font-size: clamp(40px, 5vw, 64px); font-weight: 650; line-height: 1.13; }
.home-copy { max-width: 530px; margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
.home-workspace { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr); gap: 18px; margin-top: clamp(35px, 6vw, 72px); }
.home-art { min-height: 358px; border-radius: 8px; background: url("assets/lake-dawn.png") center / cover no-repeat; filter: saturate(.75) contrast(.94); }
.skill-chooser { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.chooser-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.chooser-heading p { margin: 0; color: var(--ink); font-family: var(--display); font-size: 15px; font-weight: 650; }
.chooser-heading span { color: var(--ink-soft); font-size: 12px; }
.skill-route { position: relative; display: grid; grid-template-columns: 34px 1fr 24px; gap: 14px; align-items: center; width: 100%; min-height: 101px; padding: 18px 22px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; transition: background .18s ease, padding .18s ease; }
.skill-route:last-child { border-bottom: 0; }
.skill-route::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: transparent; content: ""; }
.skill-route:hover { padding-left: 27px; background: #f9faf8; }
.skill-route:hover::before { background: var(--forest); }
.route-index { color: var(--coral); font-size: 12px; font-variant-numeric: tabular-nums; }
.route-body strong { display: block; font-family: var(--display); font-size: 20px; font-weight: 650; }
.route-body small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.route-arrow { justify-self: end; color: var(--forest); font-size: 22px; font-weight: 400; }
.home-footnote { margin: 22px 0 0; color: var(--ink-soft); font-size: 12px; }

.intake-view, .result-view { width: min(960px, 100%); margin: 0 auto; padding: clamp(34px, 6vw, 76px) clamp(20px, 5vw, 62px) 82px; }
.back-button { padding: 0; font-size: 13px; }
.page-heading { max-width: 690px; margin: 34px 0 44px; }
.page-heading h1, .result-topline h1 { margin: 10px 0; font-family: var(--display); font-size: clamp(32px, 4vw, 48px); font-weight: 650; line-height: 1.2; }
.page-heading > p:last-child { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.intake-form { display: grid; gap: 30px; }
.profile-entry-button { display: flex; width: min(520px, 100%); align-items: center; justify-content: space-between; gap: 18px; margin: -18px 0 18px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--paper-light); color: var(--ink); text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.profile-entry-button:hover { border-color: var(--forest); background: #f8fbf9; transform: translateY(-1px); }
.profile-entry-button strong { display: block; font-family: var(--sans); font-size: 14px; font-weight: 650; line-height: 1.25; }
.profile-entry-button small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.profile-entry-button b { flex: 0 0 auto; padding: 7px 10px; border-radius: 5px; background: var(--forest); color: #fff; font-size: 11px; font-weight: 650; }
.profile-entry-button + .profile-panel { margin: 0 0 30px; }
.profile-panel { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.profile-panel p:not(.eyebrow) { margin: 5px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.profile-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; align-items: center; }
.profile-actions select { min-height: 37px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: transparent; font-size: 13px; }
.context-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 560px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.context-fields select#stateInput { min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); }
.context-fields select#stateInput:focus { border: 2px solid var(--forest); }
.field-block { display: grid; gap: 8px; min-width: 0; }
.field-label em { color: #929c98; font-style: normal; font-weight: 400; }
input, select { width: 100%; min-width: 0; min-height: 42px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line-strong); outline: 0; background: transparent; color: var(--ink); font-size: 15px; }
input:focus, select:focus { border-bottom: 2px solid var(--forest); }
input::placeholder { color: #a1aba5; }
.input-action-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.input-action-row input { min-width: 0; }
.inline-picker-button { min-height: 34px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper-light); color: var(--forest-dark); font-size: 12px; font-weight: 650; }
.inline-picker-button:hover { border-color: var(--forest); background: #f4faf7; }
.place-field { position: relative; }
.place-picker { position: relative; display: block; }
.inline-place-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; margin-top: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #f8faf8; }
.inline-place-grid .field-block { display: grid; grid-template-rows: 18px 42px; gap: 8px; align-items: end; }
.inline-place-grid .field-label { display: flex; align-items: center; min-height: 18px; font-size: 11px; line-height: 1; }
.inline-place-grid select { display: block; height: 42px; min-height: 42px; padding: 7px 0; font-size: 13px; line-height: 1.2; }
.place-suggestions { position: absolute; z-index: 12; top: calc(100% + 8px); right: 0; left: 0; max-height: 260px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-light); box-shadow: 0 18px 46px rgba(25, 42, 38, .14); }
.place-option { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 42px; padding: 9px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); text-align: left; }
.place-option:hover, .place-option:focus { background: #f3f7f4; outline: 0; }
.place-option strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.place-option span { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.place-empty { display: block; padding: 12px 10px; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.focus-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.focus-option { min-height: 31px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fbfcfa; color: var(--ink-soft); font-size: 12px; }
.focus-option:hover, .focus-option.is-selected { border-color: var(--forest); background: var(--forest); color: #fff; }
.person-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.person-grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.person-block { min-width: 0; margin: 0; padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.person-block legend { display: flex; align-items: center; gap: 9px; padding: 0; font-family: var(--display); font-size: 20px; font-weight: 650; }
.person-block legend span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #edf3f0; color: var(--forest); font-family: var(--sans); font-size: 10px; font-weight: 650; }
.person-block > .field-block:first-of-type { margin-top: 27px; }
.person-block > .field-block + .field-block { margin-top: 19px; }
.person-block .inline-place-grid .field-block { margin-top: 0; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 19px; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.consent-row input { width: 15px; min-height: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--forest); }
.save-profile-row { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: -12px; }
.form-error { margin: -16px 0 0; color: #b25748; font-size: 12px; line-height: 1.7; }
.generation-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, #ffffff 0%, #f2f6f3 100%); }
.generation-panel strong { display: block; color: var(--ink); font-family: var(--display); font-size: 17px; font-weight: 650; }
.generation-panel p { margin: 5px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.generation-panel small { display: block; margin-top: 7px; color: #829089; font-size: 10px; }
.generation-progress { height: 3px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #dce5df; }
.generation-progress span { display: block; width: 16%; height: 100%; border-radius: inherit; background: var(--forest); transition: width .6s ease; }
.generation-orbit { position: relative; width: 42px; height: 42px; border: 1px solid rgba(23, 102, 92, .28); border-radius: 50%; }
.generation-orbit span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--forest); animation: orbitPulse 1.8s ease-in-out infinite; }
.generation-orbit span:nth-child(1) { top: 7px; left: 17px; }
.generation-orbit span:nth-child(2) { right: 7px; bottom: 12px; animation-delay: .2s; }
.generation-orbit span:nth-child(3) { bottom: 12px; left: 7px; animation-delay: .4s; }
@keyframes orbitPulse { 0%, 100% { opacity: .28; transform: scale(.72); } 45% { opacity: 1; transform: scale(1); } }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-footer p { max-width: 460px; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; padding: 0 0 34px; color: var(--ink-soft); font-size: 11px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--forest); }
.primary-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 14px; padding: 12px 17px; border: 0; border-radius: 6px; background: var(--forest); color: #fff; font-size: 14px; font-weight: 600; transition: background .2s ease, transform .2s ease; }
.primary-button:hover { transform: translateY(-1px); background: var(--forest-dark); }
.primary-button span { font-size: 18px; font-weight: 400; line-height: .7; }

.result-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 35px 0 28px; }
.result-card { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 54px); border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.result-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--forest); content: ""; }
.result-card-label { margin: 0; color: var(--ink-soft); font-size: 12px; font-weight: 560; }
.result-card h2 { max-width: 660px; margin: 18px 0 13px; color: var(--ink); font-family: var(--display); font-size: clamp(32px, 5vw, 52px); font-weight: 650; line-height: 1.15; }
.result-card > p:not(.result-card-label):not(.card-signature) { max-width: 690px; margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.9; }
.result-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.result-tags span { padding: 6px 9px; border-radius: 5px; background: var(--paper-muted); color: var(--forest-dark); font-size: 11px; font-weight: 560; }
.axis-profile { display: grid; grid-template-columns: minmax(0, .9fr) minmax(260px, 1fr); gap: 18px; align-items: stretch; max-width: 760px; margin-top: 26px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .66); }
.axis-profile-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.axis-profile-copy span { color: var(--forest); font-size: 12px; font-weight: 700; }
.axis-profile-copy p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.75; }
.axis-profile-grid { display: grid; gap: 10px; }
.axis-profile-row { display: grid; grid-template-columns: 72px 1fr 30px; gap: 10px; align-items: center; color: var(--ink-soft); font-size: 12px; }
.axis-profile-row span { color: var(--ink); font-weight: 650; }
.axis-profile-row b { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: #dde5e0; }
.axis-profile-row b::before { display: block; width: var(--score); height: 100%; border-radius: inherit; background: var(--forest); content: ""; }
.axis-profile-row em { color: var(--ink); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.axis-profile-item + .axis-profile-item { margin-top: 4px; }
.axis-profile-poles { display: flex; justify-content: space-between; margin: 3px 40px 0 82px; color: var(--ink-faint); font-size: 9px; line-height: 1.2; }
.card-signature { margin: 36px 0 0 !important; color: #93a09a !important; font-size: 11px !important; }
.result-jump-nav { position: sticky; top: 68px; z-index: 7; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(245, 246, 244, .92); backdrop-filter: blur(12px); }
.result-jump-nav button { min-height: 34px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper-light); color: var(--forest-dark); font-size: 12px; font-weight: 650; }
.result-jump-nav button:hover { border-color: var(--forest); background: #f3f8f5; }
.preview-paper { margin-top: 18px; padding: clamp(26px, 5vw, 48px); border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.preview-heading h2 { margin: 8px 0 0; font-family: var(--display); font-size: 25px; font-weight: 650; }
.preview-heading > span { padding-top: 3px; color: var(--coral); font-size: 11px; font-weight: 650; }
.signal-list { display: grid; gap: 8px; }
.preview-signals { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 26px; }
.section-signals { display: flex; flex-wrap: wrap; margin-bottom: 16px; }
.signal-bridge { margin: -2px 0 20px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.signal-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.section-signals .signal-card { min-width: min(100%, 188px); flex: 1 1 188px; }
.signal-card span { align-self: start; padding: 3px 6px; border-radius: 4px; background: #e8f0ec; color: var(--forest); font-size: 10px; font-weight: 700; white-space: nowrap; }
.signal-chip-list { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
.signal-card strong { display: inline-flex; max-width: 100%; align-items: center; padding: 2px 0; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.25; }
.timing-timeline { position: relative; overflow-x: auto; margin: 0 0 18px; padding: 8px 2px 4px; scrollbar-width: thin; }
.timing-timeline-track { position: relative; display: grid; grid-auto-columns: minmax(142px, 1fr); grid-auto-flow: column; min-width: max-content; }
.timing-timeline-track::before { position: absolute; top: 11px; right: 10px; left: 10px; height: 1px; background: var(--line-strong); content: ""; }
.timing-window { position: relative; width: min(190px, 46vw); padding: 25px 20px 0 0; }
.timing-window-node { position: absolute; top: 6px; left: 0; width: 11px; height: 11px; border: 3px solid var(--paper); border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 1px var(--forest); }
.timing-window strong { display: block; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.35; }
.timing-window p { margin-top: 5px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.preview-copy { max-width: 820px; margin: 24px 0 0; color: var(--ink); font-size: 17px; line-height: 1.95; }
.preview-copy p { margin: 0; }
.preview-copy p + p { margin-top: 18px; color: var(--ink-soft); }
.locked-report { position: relative; min-height: 222px; margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.locked-copy { padding: 42px clamp(24px, 5vw, 52px); filter: blur(7px); opacity: .5; user-select: none; }
.locked-copy h2 { margin: 8px 0 11px; font-family: var(--display); font-size: 30px; font-weight: 650; }
.locked-copy p:last-child { max-width: 570px; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
.locked-veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 15px; background: rgba(255, 255, 255, .62); text-align: center; }
.locked-veil > span { color: var(--ink); font-family: var(--display); font-size: 18px; font-weight: 650; }
.complete-report { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--line); }
.complete-report-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.complete-report-heading h2 { margin: 8px 0 25px; font-family: var(--display); font-size: 30px; font-weight: 650; }
.complete-stage { display: grid; grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 34px); align-items: start; }
.complete-rail { position: sticky; top: 126px; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .74); backdrop-filter: blur(14px); }
.complete-rail button { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; padding: 10px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink-soft); text-align: left; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.complete-rail button:hover { border-color: var(--line-strong); background: var(--paper-light); color: var(--forest-dark); }
.complete-rail button:active { transform: translateY(1px); }
.complete-rail button.is-active { border-color: rgba(23, 102, 92, .22); background: #eef5f1; color: var(--forest-dark); }
.complete-rail span { color: var(--coral); font-size: 11px; font-variant-numeric: tabular-nums; }
.complete-rail strong { overflow: hidden; font-size: 12px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; }
.complete-section-list { display: grid; gap: 22px; padding-bottom: 10px; }
.complete-section { position: relative; display: grid; grid-template-columns: minmax(150px, .32fr) 1fr; gap: clamp(22px, 5vw, 44px); align-items: start; padding: clamp(22px, 4vw, 34px); border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 44px rgba(24, 33, 34, .08); scroll-margin-top: 96px; }
.complete-section:nth-child(2n) { background: rgba(249, 250, 248, .96); }
.complete-section-heading { min-width: 0; }
.section-index { display: block; margin-bottom: 8px; color: var(--coral); font-size: 11px; font-variant-numeric: tabular-nums; }
.complete-section h3 { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 650; }
.complete-section p { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.9; }
.complete-section .section-reading { display: grid; gap: 14px; margin-top: 20px; }
.complete-section .section-reading p { margin: 0; }
.share-panel { margin-top: 42px; padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.share-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.share-panel-heading h2 { margin: 8px 0 0; font-family: var(--display); font-size: 24px; font-weight: 650; }
.share-card { position: relative; overflow: hidden; display: flex; min-height: 268px; flex-direction: column; justify-content: space-between; margin-top: 22px; padding: 26px; border-radius: 7px; background: var(--night); color: #f7faf7; }
.share-card::after { position: absolute; top: -70px; right: -42px; width: 190px; height: 190px; border: 1px solid rgba(247, 250, 247, .28); border-radius: 50%; content: ""; }
.share-card-kicker, .share-card-label, .share-card-foot { position: relative; margin: 0; }
.share-card-kicker { color: rgba(247, 250, 247, .66); font-size: 11px; }
.share-card-label { margin-top: 42px; color: rgba(247, 250, 247, .66); font-size: 12px; }
.share-card h3 { position: relative; max-width: 420px; margin: 10px 0 0; font-family: var(--display); font-size: clamp(30px, 5vw, 44px); font-weight: 650; line-height: 1.18; }
.share-card-tags { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.share-card-tags span { padding: 5px 7px; border: 1px solid rgba(247, 250, 247, .32); border-radius: 4px; color: rgba(247, 250, 247, .8); font-size: 10px; }
.share-card-scores { position: relative; display: grid; gap: 10px; margin-top: 24px; }
.share-score-row { display: grid; grid-template-columns: 62px 1fr 28px; align-items: center; gap: 10px; color: rgba(247, 250, 247, .78); font-size: 11px; }
.share-score-row b { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(247, 250, 247, .16); }
.share-score-row b::before { display: block; width: var(--score); height: 100%; border-radius: inherit; background: #d5efe2; content: ""; }
.share-score-row em { color: rgba(247, 250, 247, .86); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.share-score-item + .share-score-item { margin-top: 10px; }
.share-score-poles { display: flex; justify-content: space-between; margin: 4px 38px 0 72px; color: rgba(247, 250, 247, .48); font-size: 9px; line-height: 1.2; }
.share-card-fit { position: relative; max-width: 390px; margin: 18px 0 0; color: rgba(247, 250, 247, .78); font-size: 12px; line-height: 1.7; }
.share-card-foot { margin-top: 35px; color: rgba(247, 250, 247, .42); font-size: 10px; }

.followup-panel { margin-top: 36px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.followup-panel h2 { max-width: 520px; margin: 8px 0 9px; font-family: var(--display); font-size: 25px; font-weight: 650; line-height: 1.3; }
.followup-panel p:not(.eyebrow) { max-width: 660px; margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.followup-panel textarea { width: 100%; min-height: 86px; margin: 14px 0 13px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-strong); outline: 0; resize: vertical; background: transparent; color: var(--ink); font: inherit; line-height: 1.7; }
.followup-panel textarea:focus { border-bottom: 2px solid var(--forest); }
.followup-note { display: inline-block; margin-left: 10px; color: var(--ink-soft); font-size: 12px; }

.paywall-dialog { width: min(550px, calc(100vw - 32px)); padding: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 68px rgba(19, 35, 31, .18); }
.paywall-dialog::backdrop { background: rgba(20, 31, 32, .38); backdrop-filter: blur(3px); }
.dialog-close { position: absolute; top: 13px; right: 16px; border: 0; background: transparent; color: var(--ink-soft); font-size: 26px; }
.paywall-dialog h2 { max-width: 440px; margin: 10px 0 13px; font-family: var(--display); font-size: 29px; font-weight: 650; line-height: 1.3; }
.dialog-copy { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.place-step-grid { display: grid; gap: 15px; margin: 22px 0 20px; }
.place-step-grid select { min-height: 42px; padding: 8px 0; }
.date-time-picker-dialog { width: min(460px, calc(100vw - 32px)); }
.picker-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 22px; }
.picker-columns#timePickerColumns { grid-template-columns: repeat(2, 1fr); }
.picker-columns select { min-height: 44px; padding: 8px 0; }
.fan-unlock { margin: 24px 0 20px; padding: 15px; border: 1px solid #bed6ce; border-radius: 6px; background: #f4faf7; }
.fan-unlock > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fan-unlock p { margin: 0; color: var(--forest-dark); font-size: 13px; font-weight: 650; }
.fan-unlock span { color: var(--ink-soft); font-size: 11px; text-align: right; }
.fan-code-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 13px; }
.fan-code-row input { min-height: 37px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; font-size: 13px; }
.secondary-button { min-height: 37px; padding: 8px 11px; border: 1px solid var(--forest); border-radius: 5px; background: transparent; color: var(--forest); font-size: 12px; font-weight: 600; }
.secondary-button:hover { background: var(--forest); color: #fff; }
.fan-code-note { min-height: 16px !important; margin: 8px 0 0 !important; color: var(--coral) !important; font-size: 11px !important; font-weight: 400 !important; }
.offer-list { display: grid; gap: 10px; margin: 25px 0 15px; }
.offer-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 76px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-light); color: var(--ink); text-align: left; }
.offer-option:hover, .offer-option.is-selected { border-color: var(--forest); background: #f7fbf9; }
.offer-option > span:not(.offer-recommendation) strong, .offer-option > span:not(.offer-recommendation) small { display: block; }
.offer-option strong { font-family: var(--display); font-size: 18px; font-weight: 650; }
.offer-option small { margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
.offer-option b { font-family: var(--display); font-size: 22px; font-weight: 650; }
.offer-recommendation { position: absolute; top: -10px; right: 14px; padding: 3px 7px; border-radius: 4px; background: var(--forest); color: #fff; font-size: 10px; font-weight: 600; }
.offer-explainer { min-height: 35px; margin: 0 0 17px; color: var(--forest); font-size: 12px; line-height: 1.65; }
.dialog-action { width: 100%; }
.dialog-note { min-height: 17px; margin: 12px 0 0; color: var(--coral); font-size: 12px; line-height: 1.65; }
.order-panel { margin-top: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-light); }
.order-title { margin: 0 0 6px; color: var(--ink); font-size: 13px; font-weight: 650; }
.order-panel p:not(.order-title) { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.order-actions { display: flex; justify-content: flex-end; margin-top: 11px; }
.profile-manager-dialog { width: min(820px, calc(100vw - 32px)); }
.profile-manager-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 18px; margin-top: 24px; }
.profile-manager-layout > section,
.profile-manager-form { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.profile-manager-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.profile-manager-heading strong { color: var(--ink); font-family: var(--display); font-size: 16px; font-weight: 650; }
.profile-manager-heading span { color: var(--ink-soft); font-size: 12px; }
.profile-manager-list { display: grid; gap: 10px; max-height: min(430px, 58vh); overflow: auto; padding-right: 2px; }
.profile-manager-empty { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.profile-manager-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.profile-manager-item strong,
.profile-manager-item span { display: block; }
.profile-manager-item strong { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.profile-manager-item span { margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.profile-manager-actions { display: flex; align-items: center; gap: 9px; }
.danger-button { color: #a95647; }
.danger-button:hover { color: #873a30; }
.profile-manager-form { display: grid; gap: 15px; }
.profile-manager-form .two-column { margin-top: 0; }
.compact-columns { gap: 14px; }

body.is-night { --ink: #e8eeea; --ink-soft: #b7c2bc; --paper: #182222; --paper-light: #202c2c; --paper-muted: #2b3836; --line: #394744; --line-strong: #4d5a56; --forest: #79b8a9; --forest-dark: #94cbbf; --night: #101817; }
body.is-night .topbar { background: rgba(24, 34, 34, .94); }
body.is-night .home-art { filter: saturate(.68) brightness(.72); }
body.is-night .skill-route:hover { background: #25302f; }
body.is-night .result-jump-nav { background: rgba(24, 34, 34, .92); }
body.is-night .result-jump-nav button { background: #202c2c; }
body.is-night .locked-veil { background: rgba(32, 44, 44, .68); }
body.is-night .primary-button { background: #8fc7bb; color: #13211f; }
body.is-night .profile-entry-button { background: #202c2c; }
body.is-night .profile-entry-button b { background: #8fc7bb; color: #13211f; }
body.is-night .inline-picker-button { background: #202c2c; }
body.is-night .fan-unlock { border-color: #456e63; background: #1d302c; }
body.is-night .inline-place-grid { background: #1d2928; }
body.is-night .signal-card span { background: #263a36; }
body.is-night .timing-window-node { border-color: #202c2c; }
body.is-night .fan-code-row input { background: #172826; }
body.is-night .place-option:hover, body.is-night .place-option:focus { background: #263634; }
body.is-night .order-panel { background: #1d2928; }
body.is-night .profile-manager-layout > section,
body.is-night .profile-manager-form { background: #202c2c; }
body.is-night .profile-manager-item { background: #1d2928; }
body.is-night .complete-rail { background: rgba(32, 44, 44, .84); }
body.is-night .complete-rail button:hover { background: #263634; }
body.is-night .complete-rail button.is-active { border-color: rgba(143, 199, 187, .34); background: #263a36; color: #dcece6; }
body.is-night .complete-section { background: rgba(32, 44, 44, .96); box-shadow: 0 18px 44px rgba(0, 0, 0, .2); }
body.is-night .complete-section:nth-child(2n) { background: rgba(29, 41, 40, .98); }

@media (max-width: 780px) {
  .home-view { min-height: calc(100svh - 68px); padding: 31px 20px 24px; }
  .home-intro h1 { font-size: clamp(36px, 10vw, 47px); }
  .home-copy { max-width: 480px; font-size: 15px; }
  .home-workspace { grid-template-columns: 1fr; gap: 14px; margin-top: 29px; }
  .home-art { min-height: 92px; border-radius: 8px; background-position: center 53%; }
  .profile-panel, .context-fields, .person-grid { grid-template-columns: 1fr; }
  .profile-actions { grid-template-columns: 1fr 1fr; }
  .profile-actions select { grid-column: 1 / -1; }
  .profile-manager-layout { grid-template-columns: 1fr; }
  .person-grid.is-single { max-width: none; }
  .complete-stage { grid-template-columns: 1fr; gap: 14px; }
  .complete-rail { position: sticky; top: 78px; z-index: 6; display: flex; overflow-x: auto; padding: 8px; scroll-snap-type: x mandatory; }
  .complete-rail button { grid-template-columns: auto 1fr; min-width: 150px; scroll-snap-align: start; }
}

@media (max-width: 560px) {
  .topbar { height: 62px; padding: 0 18px; }
  .topbar-actions { gap: 10px; }
  .topbar-actions .text-button { font-size: 12px; }
  .test-mode-badge { padding: 5px 7px; font-size: 11px; }
  .brand-mark { width: 30px; height: 30px; font-size: 16px; }
  .brand strong { font-size: 17px; }
  .home-view { min-height: calc(100svh - 62px); padding: 26px 18px 20px; }
  .home-intro h1 { margin: 11px 0 10px; font-size: 38px; }
  .home-copy { font-size: 14px; line-height: 1.7; }
  .home-workspace { margin-top: 24px; }
  .home-art { min-height: 78px; }
  .chooser-heading { padding: 17px 16px; }
  .chooser-heading span { font-size: 11px; }
  .skill-route { grid-template-columns: 27px 1fr 18px; min-height: 82px; gap: 10px; padding: 14px 16px; }
  .skill-route:hover { padding-left: 16px; }
  .route-body strong { font-size: 18px; }
  .route-body small { margin-top: 3px; font-size: 12px; }
  .route-arrow { font-size: 20px; }
  .home-footnote { margin-top: 16px; font-size: 11px; }
  .intake-view, .result-view { padding: 32px 18px 56px; }
  .page-heading { margin: 29px 0 34px; }
  .page-heading h1, .result-topline h1 { font-size: 32px; }
  .context-fields { gap: 22px; padding: 18px 16px; }
  .person-grid { gap: 14px; }
  .person-block { padding: 21px 16px 24px; }
  .inline-place-grid { grid-template-columns: 1fr; gap: 12px; }
  .place-suggestions { max-height: 232px; }
  .place-option { grid-template-columns: 1fr; gap: 2px; align-items: start; }
  .two-column { grid-template-columns: 1fr; gap: 18px; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .form-footer .primary-button { width: 100%; }
  .result-topline { margin-top: 28px; }
  .result-card, .preview-paper { margin-right: -18px; margin-left: -18px; border-radius: 0; border-right: 0; border-left: 0; }
  .result-card { padding: 31px 18px; }
  .result-card h2 { font-size: 32px; }
  .axis-profile { grid-template-columns: 1fr; padding: 15px; }
  .axis-profile-row { grid-template-columns: 70px 1fr 28px; }
  .result-jump-nav { top: 62px; margin-right: -10px; margin-left: -10px; }
  .preview-paper { padding: 28px 18px; }
  .preview-copy { font-size: 16px; line-height: 1.85; }
  .locked-copy h2 { font-size: 26px; }
  .complete-report { margin-right: -18px; margin-left: -18px; padding: 28px 18px 0; overflow: hidden; background: linear-gradient(180deg, rgba(245, 246, 244, 0) 0%, rgba(237, 240, 237, .72) 100%); }
  .complete-rail { top: 62px; margin-right: -18px; margin-left: -18px; border-right: 0; border-left: 0; border-radius: 0; }
  .complete-report-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .complete-report-heading h2 { margin-bottom: 10px; }
  .complete-section-list { display: grid; gap: 16px; margin-right: 0; margin-left: 0; padding: 2px 0 18px; overflow: visible; scroll-snap-type: none; }
  .complete-section { position: relative; top: auto; grid-template-columns: 1fr; min-width: 0; height: auto; min-height: 0; gap: 18px; padding: 22px 18px 24px; scroll-margin-top: 122px; scroll-snap-align: none; box-shadow: 0 12px 30px rgba(24, 33, 34, .08); }
  .timing-timeline { margin-right: -18px; padding-right: 18px; padding-left: 18px; }
  .timing-window { width: min(178px, 58vw); }
  .complete-section-list::-webkit-scrollbar, .complete-rail::-webkit-scrollbar { display: none; }
  .complete-report-heading h2 { font-size: 27px; }
  .share-panel { margin-right: -2px; margin-left: -2px; padding: 20px 16px; }
  .share-panel-heading { align-items: flex-end; }
  .share-panel-heading h2 { font-size: 21px; }
  .share-card { min-height: 244px; padding: 21px; }
  .share-card h3 { font-size: 31px; }
  .profile-manager-dialog { padding: 26px 18px; }
  .profile-manager-layout > section,
  .profile-manager-form { padding: 15px; }
  .profile-manager-item { grid-template-columns: 1fr; align-items: start; }
  .profile-manager-actions { justify-content: flex-start; }
  .fan-unlock > div:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
  .fan-unlock span { text-align: left; }
  .paywall-dialog { padding: 29px 20px; }
  .paywall-dialog h2 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .complete-section { position: relative; top: auto; will-change: auto; }
  .complete-rail button, .profile-entry-button, .skill-route { transition: none; }
  .generation-orbit span { animation: none; opacity: .72; }
}