:root {
  --chimney: #252D37;
  --ashlin: #D3D9DA;
  --harbour: #427390;
  --clay: #B37121;
  --nether: #88150C;
  --paper: #F4F6F6;
  --clay-text: #6F4614;
  --content-width: 1120px;
  --serif: Georgia, "Times New Roman", "Songti SC", SimSun, serif;
  --sans: "Segoe UI", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
  font-family: var(--sans);
  color: var(--chimney);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  line-height: 1.65;
  background:
    radial-gradient(circle at 12% 9%, rgb(66 115 144 / .22), transparent 31rem),
    radial-gradient(circle at 91% 18%, rgb(179 113 33 / .18), transparent 27rem),
    radial-gradient(circle at 54% 76%, rgb(136 21 12 / .08), transparent 34rem),
    linear-gradient(145deg, var(--paper) 0%, var(--ashlin) 100%);
  background-attachment: fixed;
}
body::before {
  position: fixed;
  inset: -20%;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, rgb(66 115 144 / .16), transparent 45%);
  filter: blur(38px);
  animation: ambient-drift 18s ease-in-out infinite alternate;
}
@keyframes ambient-drift { to { transform: translate3d(3%, -2%, 0) scale(1.04); } }

[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--harbour); text-underline-offset: .2em; }
button, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible {
  outline: 3px solid var(--harbour);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper);
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: -9999px;
  z-index: 100;
  padding: .7rem 1rem;
  border-radius: .5rem;
  background: var(--paper);
}
.skip-link:focus { left: 1rem; }

.site-header, main, footer {
  width: min(var(--content-width), calc(100% - 3rem));
  margin-inline: auto;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 72px;
  border-bottom: 1px solid rgb(66 115 144 / .3);
  background: rgb(244 246 246 / .8);
  backdrop-filter: blur(18px);
}
.site-brand {
  color: var(--chimney);
  font-family: var(--mono);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}
.site-brand::before { color: var(--nether); content: "● "; text-shadow: 0 0 12px rgb(136 21 12 / .72); }
.site-header nav { display: flex; flex-wrap: wrap; gap: .45rem 1.25rem; }
.site-header nav a { color: var(--chimney); font-size: .9rem; text-decoration: none; }
.site-header nav a:hover { color: var(--harbour); }

main > section { margin-block: clamp(3.5rem, 6vw, 4.375rem); }
.hero {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  min-height: calc(100svh - 96px);
  padding-block: 3rem;
}
.hero-copy { min-width: 0; }
.eyebrow, .solution-code, .solution-card > p:first-child {
  color: var(--harbour);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero h1, .hero h2, section > h2, .result-shell > h2 {
  font-family: var(--serif);
  text-wrap: balance;
}
.hero h1 {
  margin: .35rem 0 1.4rem;
  font-size: clamp(4.6rem, 10vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .76;
}
.hero h1 span {
  display: inline-block;
  margin-top: .25em;
  color: var(--harbour);
  font-size: .47em;
  letter-spacing: .02em;
  text-shadow:
    0 0 3px rgb(66 115 144 / .88),
    0 0 12px rgb(66 115 144 / .62),
    0 0 28px rgb(66 115 144 / .34),
    0 0 42px rgb(66 115 144 / .16);
}
.hero h2 { margin: 0 0 1.5rem; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.18; }
.path-title {
  color: var(--clay);
  -webkit-text-stroke: 1.15px var(--harbour);
  paint-order: stroke fill;
  text-shadow:
    0 0 3px rgb(179 113 33 / .8),
    0 0 9px rgb(66 115 144 / .7),
    0 0 22px rgb(66 115 144 / .38),
    0 0 40px rgb(66 115 144 / .17);
}
.hero-copy > p:not(.eyebrow) { max-width: 38rem; font-size: 1.05rem; }
.primary-action, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .72rem 1.1rem;
  border: 1px solid var(--harbour);
  border-radius: .65rem;
  color: var(--harbour);
  font-weight: 760;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(66 115 144 / .12), 0 0 18px rgb(66 115 144 / .22);
}
.primary-action { margin-top: 1rem; padding: .95rem 1.45rem; text-decoration: none; }
.primary-action:hover, button:hover { color: var(--chimney); background: var(--ashlin); box-shadow: 0 0 7px rgb(66 115 144 / .42), 0 0 24px rgb(66 115 144 / .25); }

.risk-map-preview, .result-shell, .question-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(66 115 144 / .58);
  border-radius: 1.35rem;
  background: rgb(244 246 246 / .86);
  box-shadow:
    0 0 7px rgb(66 115 144 / .32),
    0 0 24px rgb(66 115 144 / .18),
    0 28px 70px rgb(37 45 55 / .12);
}
.risk-map-preview::before, .result-shell::before, .question-card::before {
  position: absolute;
  inset: 0 10% auto;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--harbour), var(--clay), transparent);
  box-shadow: 0 0 7px rgb(66 115 144 / .72), 0 0 23px rgb(179 113 33 / .38), 0 0 40px rgb(66 115 144 / .2);
}
.risk-map-preview { padding: clamp(1.35rem, 4vw, 2.2rem); }
.risk-map-preview h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem); }
.preview-note { margin-top: .15rem; color: var(--clay-text); font-size: .83rem; }
.risk-map-preview ol, .result-risk-map ol { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.risk-map-preview li, .result-risk-map li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .12rem 1rem;
  align-items: center;
  padding: .85rem .3rem;
  border-bottom: 1px solid rgb(66 115 144 / .25);
}
.risk-map-preview li:last-child, .result-risk-map li:last-child { border-bottom: 0; }
.risk-map-preview strong, .result-risk-map strong {
  min-width: 3.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-family: var(--mono);
  font-size: .75rem;
  text-align: center;
}
[data-level="controlled"] strong, strong[data-level="controlled"] { color: var(--harbour); text-shadow: 0 0 12px rgb(66 115 144 / .45); }
[data-level="repair"] strong, strong[data-level="repair"] { color: var(--clay-text); text-shadow: 0 0 14px rgb(179 113 33 / .3); }
[data-level="priority"] strong, strong[data-level="priority"] { color: var(--nether); text-shadow: 0 0 14px rgb(136 21 12 / .38); }
[data-level="skipped"] strong, strong[data-level="skipped"] { color: var(--chimney); }
.result-risk-map small { grid-column: 1 / -1; color: var(--clay-text); }

section > h2 { margin-bottom: .7rem; font-size: clamp(2.35rem, 5vw, 4.5rem); line-height: 1; }
#assessment { min-height: 42rem; }
#assessment > h2 { max-width: 12ch; }
#assessment-app { width: min(920px, 100%); margin: 2rem auto 0; }
.progress { height: .46rem; overflow: hidden; border-radius: 99px; background: rgb(66 115 144 / .15); }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--harbour), var(--clay)); box-shadow: 0 0 16px rgb(66 115 144 / .55); }
#question-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.question-card { margin-top: 1.5rem; padding: clamp(1.5rem, 4vw, 3.2rem); }
.question-card h3 { max-width: 25ch; margin: 0; font-family: var(--serif); font-size: clamp(1.65rem, 4vw, 2.8rem); line-height: 1.3; }
.checkpoint { margin-block: 1.2rem 1.8rem; padding: 1rem 1.1rem; border-left: 3px solid var(--clay); color: var(--clay-text); background: rgb(179 113 33 / .08); }
.answer-options, #question-actions, .resume-actions, .report-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.answer-options button { min-width: 7rem; }
.answer-options button[aria-pressed="true"] { border-color: var(--chimney); color: var(--paper); background: var(--chimney); box-shadow: 0 0 8px rgb(66 115 144 / .55), 0 0 25px rgb(66 115 144 / .3); }
#question-actions { margin-top: 1.7rem; }
.resume-actions { margin-top: 1rem; align-items: center; }
.resume-actions p { width: 100%; margin-bottom: 0; }

.solution-grid, .matched-solutions {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.15rem;
  margin-top: 2.2rem;
}
.solution-card, .matched-solution {
  position: relative;
  grid-column: span 2;
  min-width: 0;
  min-height: 12rem;
  overflow: hidden;
  padding: 1.45rem;
  border: 1px solid rgb(66 115 144 / .38);
  border-radius: 1rem;
  background: rgb(244 246 246 / .82);
  box-shadow: 0 12px 36px rgb(37 45 55 / .08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.solution-card::before, .matched-solution::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--harbour), var(--clay), var(--nether));
  box-shadow: 0 0 7px rgb(66 115 144 / .65), 0 0 21px rgb(179 113 33 / .32), 0 0 38px rgb(136 21 12 / .12);
}
.solution-card:hover, .matched-solution:hover { transform: translateY(-4px); border-color: var(--harbour); box-shadow: 0 0 24px rgb(66 115 144 / .17), 0 18px 44px rgb(37 45 55 / .1); }
.solution-card:last-child { grid-column: 3 / span 2; }
.solution-card h3, .matched-solution h4 { margin: .5rem 0; font-family: var(--serif); font-size: 1.45rem; }
.solution-dimension { color: var(--clay-text); }

#result { scroll-margin-top: 6rem; }
.result-shell { padding: clamp(1.5rem, 5vw, 3.5rem); }
.result-shell > h2 { margin-top: 0; font-size: clamp(2.4rem, 5vw, 4.6rem); }
.result-risk-map, .result-path, .report-export { margin-block: 2.5rem; }
.matched-solutions { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.matched-solution { grid-column: auto; }
.matched-solution textarea, .generated-report textarea {
  display: block;
  width: 100%;
  margin-block: .75rem;
  border: 1px solid rgb(66 115 144 / .35);
  border-radius: .65rem;
  padding: .75rem;
  color: var(--chimney);
  background: var(--paper);
  resize: vertical;
}
.copy-status { display: inline-block; margin-left: .5rem; color: var(--clay-text); }
.community-entry { width: min(23rem, 100%); margin: 2.5rem auto 0; padding: 1.25rem; border: 1px solid var(--harbour); border-radius: 1rem; text-align: center; background: var(--paper); box-shadow: 0 0 7px rgb(66 115 144 / .45), 0 0 24px rgb(66 115 144 / .22), 0 0 42px rgb(179 113 33 / .13); }
.community-entry img { display: block; width: 100%; height: auto; border-radius: .6rem; }
.community-entry figcaption { margin-top: .75rem; color: var(--clay-text); font-size: .9rem; }
.legal-disclaimer { padding: 1rem; border-left: 3px solid var(--nether); background: rgb(136 21 12 / .06); }
.report-actions { align-items: center; }
.generated-report img { display: block; width: min(100%, 34rem); height: auto; margin-top: 1rem; border: 1px solid var(--ashlin); }
.print-return-path { color: var(--clay-text); font-size: .88rem; }

#tools { padding: 2rem; border: 1px solid rgb(66 115 144 / .38); border-radius: 1rem; background: rgb(244 246 246 / .72); }
.content-page { max-width: 860px; padding-block: clamp(4rem, 9vw, 8rem); }
.content-page > h1 { margin: .2rem 0 1rem; font-family: var(--serif); font-size: clamp(3rem, 8vw, 6rem); line-height: .95; }
.content-page > section { margin-block: 3.5rem; }
.content-page h2 { font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.6rem); }
.page-intro { max-width: 44rem; font-size: 1.15rem; }
.event-list { display: grid; gap: .6rem; padding-left: 1.2rem; }
code { font-family: var(--mono); color: var(--harbour); }
.identity-card { padding: 1.5rem; border: 1px solid rgb(66 115 144 / .4); border-radius: 1rem; background: rgb(244 246 246 / .78); }
.identity-card dl { margin: 0; }
.identity-card dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding-block: .8rem; border-bottom: 1px solid rgb(66 115 144 / .22); }
.identity-card dl > div:last-child { border-bottom: 0; }
.identity-card dt { font-weight: 800; }
.identity-card dd { margin: 0; }
footer { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; padding-block: 2.5rem; border-top: 1px solid rgb(66 115 144 / .3); font-size: .88rem; }
footer p { flex-basis: 100%; margin: 0; }

@media (max-width: 720px) {
  .site-header, .hero { display: block; }
  .site-header { position: static; padding-block: 1rem; }
  .site-header nav { margin-top: .75rem; }
  .site-header, main, footer { width: min(100% - 1.5rem, var(--content-width)); }
  .hero { min-height: auto; padding-top: 4rem; }
  .risk-map-preview { margin-top: 3rem; }
  main > section { margin-block: 4.5rem; }
  .solution-grid, .matched-solutions { grid-template-columns: 1fr; }
  .solution-card, .solution-card:last-child, .matched-solution { grid-column: 1; }
  .answer-options { display: grid; grid-template-columns: 1fr; }
  .answer-options button { width: 100%; }
  .hero h1 { font-size: clamp(4rem, 25vw, 6.5rem); }
  .identity-card dl > div { grid-template-columns: 1fr; gap: .2rem; }
}

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

@media print {
  @page { margin: 16mm; }
  :root, body { color: #000 !important; background: #fff !important; }
  body::before, .site-header, .hero, #assessment, #solutions, #tools, footer,
  .report-actions, .community-entry, .generated-report, button { display: none !important; }
  main, #result { width: 100%; margin: 0; }
  #result[hidden] { display: none !important; }
  #result:not([hidden]) { display: block !important; }
  .result-shell { overflow: visible; border: 0; padding: 0; background: #fff; box-shadow: none; }
  .result-shell::before { display: none; }
  .matched-solution::before { display: none; }
  #result * { text-shadow: none !important; }
  .result-risk-map li, .matched-solution, .result-path, .legal-disclaimer,
  .print-return-path { break-inside: avoid; page-break-inside: avoid; }
  .result-risk-map li { margin-bottom: 3mm; border: 1px solid #666; }
  .matched-solutions { display: block; }
  .matched-solution { min-height: 0; margin-bottom: 4mm; border: 1px solid #666; background: #fff !important; box-shadow: none !important; }
  textarea { overflow: visible; border: 0; resize: none; }
  a { color: #000; text-decoration: none; }
}


.solution-card .solution-summary,
.solution-card .solution-output {
  margin-top: 0.8rem;
  line-height: 1.65;
}

.solution-card .solution-action {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}


/* Online assessment v2 */
.assessment-shell { margin-top: 2rem; }
.assessment-intro, .quiz-shell, .checkpoint-card, .completion-banner, .conversion-panel {
  border: 1px solid var(--line); background: var(--surface); padding: clamp(1.25rem, 3vw, 2rem);
}
.assessment-privacy, .answer-hint { color: var(--muted); }
.dimension-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.dimension-option { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--line); cursor: pointer; }
.dimension-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dimension-option input { margin-top: .25rem; }
.dimension-option span, .dimension-option small { display: block; }
.dimension-option small { margin-top: .25rem; color: var(--muted); }
.form-error { min-height: 1.5em; color: var(--danger, #a02b2b); }
.assessment-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
button.primary-action, button.secondary-action { font: inherit; cursor: pointer; }
.quiz-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font-size: .9rem; color: var(--muted); }
.progress { height: .6rem; margin: .8rem 0 1.5rem; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.question-title { max-width: 46rem; font-size: clamp(1.4rem, 3vw, 2.25rem); line-height: 1.35; }
.answer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.answer-button { min-height: 8rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.answer-button span { display: block; margin-top: .5rem; color: var(--muted); font-size: .85rem; font-weight: 400; }
.answer-button:hover, .answer-button:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.checkpoint-level { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1rem; }
.checkpoint-level span { padding: .25rem .6rem; border: 1px solid currentColor; font-weight: 800; }
.checkpoint-level strong { font-size: 2.5rem; }
.checkpoint-insight { max-width: 48rem; padding: 1rem; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.override-note { font-weight: 800; color: #a02b2b; }
.risk-map-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: 1.5rem 0 2.5rem; }
.risk-map-item { display: grid; gap: .4rem; padding: 1rem; border: 1px solid var(--line); }
.risk-map-item span { color: var(--muted); font-size: .8rem; }
.risk-map-item strong { justify-self: start; padding: .15rem .45rem; border: 1px solid currentColor; }
.level-red { --level-color: #a02b2b; }
.level-yellow { --level-color: #9a6500; }
.level-green { --level-color: #176b47; }
.level-skipped { --level-color: #6d6d6d; }
.risk-map-item strong, .result-card summary strong, .checkpoint-card { color: var(--level-color); }
.result-solutions { display: grid; gap: 1rem; }
.result-card { border: 1px solid var(--line); border-left: .35rem solid var(--level-color); background: var(--surface); }
.result-card summary { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; cursor: pointer; }
.result-card summary span { color: var(--muted); font-family: ui-monospace, monospace; }
.result-card-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 0 1.25rem 1.25rem; }
.result-card-body section { padding: 1rem; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.result-card-body h4 { margin-top: 0; }
.solution-code { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1rem; }
.conversion-panel { margin-top: 2rem; }
.outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; }
.outcome-grid article { border: 1px solid var(--line); padding: 1.25rem; }
.outcome-grid span { font-family: ui-monospace, monospace; color: var(--accent); }
@media (max-width: 760px) {
  .answer-grid, .outcome-grid, .result-card-body { grid-template-columns: 1fr; }
  .result-card summary { grid-template-columns: 1fr; gap: .35rem; }
}

:root { --surface: #FFFFFF; --ink: var(--chimney); --accent: var(--harbour); --line: rgb(37 45 55 / .22); }