/* deterministic local preview surface: life-continuity · contract 67a8b28ad1c309daefdca34543cdae46952cfad88149985f914d448b69bcce5a */
:root {
  --surface-bg: hsl(291 24% 96%);
  --surface-panel: #ffffff;
  --surface-ink: #25272b;
  --surface-muted: #60656d;
  --surface-line: #d9dce1;
  --surface-primary: #147d78;
  --surface-accent: hsl(140 62% 52%);
  --surface-accent-alt: hsl(49 48% 45%);
  --surface-accent-tertiary: hsl(169 44% 40%);
  --surface-on-primary: #ffffff;
  --surface-heading-font: Inter, Pretendard, Apple SD Gothic Neo, Segoe UI, sans-serif;
  --surface-body-font: Inter, Pretendard, Apple SD Gothic Neo, Segoe UI, sans-serif;
  --surface-card-radius: 16px;
  --surface-control-radius: 11px;
  --surface-space: 16px;
  --surface-content-max: 960px;
}
body[data-surface-state="compiled"] {
  background:
    radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--surface-accent) 16%, transparent), transparent 30%),
    radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--surface-accent-alt) 10%, transparent), transparent 24%),
    var(--surface-bg);
  color: var(--surface-ink);
  font-family: var(--surface-body-font);
}
body[data-surface-state="compiled"] h1 { font-family: var(--surface-heading-font); letter-spacing: -0.025em; }
body[data-surface-state="compiled"] main { max-width: var(--surface-content-max); }
body[data-surface-state="compiled"] input,
body[data-surface-state="compiled"] .chip,
body[data-surface-state="compiled"] .card,
body[data-surface-state="compiled"] ul.list li { border-color: var(--surface-line); background: var(--surface-panel); }
body[data-surface-state="compiled"] input,
body[data-surface-state="compiled"] button.add { border-radius: var(--surface-control-radius); }
body[data-surface-state="compiled"] .card,
body[data-surface-state="compiled"] ul.list li,
body[data-surface-state="compiled"] .surface-identity-band { border-radius: var(--surface-card-radius); }
body[data-surface-state="compiled"] button.add { background: var(--surface-primary); border-color: var(--surface-primary); color: var(--surface-on-primary); }
body[data-surface-state="compiled"] .chip.on,
body[data-surface-state="compiled"] .g,
body[data-surface-state="compiled"] .lang b { color: var(--surface-ink); border-color: var(--surface-primary); }
body[data-surface-state="compiled"] .surface-shell { gap: var(--surface-space); }
body[data-surface-state="compiled"] .surface-identity-band {
  border: 1px solid var(--surface-line);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-panel) 92%, var(--surface-accent)), var(--surface-panel));
  padding: var(--surface-space);
}
body[data-surface-state="compiled"] .surface-term::before { background: var(--surface-accent); }
body[data-surface-state="compiled"] .surface-term:nth-child(even)::before { background: var(--surface-accent-alt); }
body[data-surface-state="compiled"] .surface-term:nth-child(3n)::before { background: var(--surface-accent-tertiary); }
body[data-surface-topology="focus-stack"] .surface-shell { display: block; }
body[data-surface-topology="guided-stepper"] .surface-workbench { border-left: 4px solid var(--surface-accent); padding-left: var(--surface-space); }
body[data-surface-topology="split-workbench"] .surface-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .38fr); align-items: start; }
body[data-surface-topology="navigation-rail"] .surface-shell { display: grid; grid-template-columns: minmax(160px, .28fr) minmax(0, 1fr); align-items: start; }
body[data-surface-topology="navigation-rail"] .surface-identity-band { grid-column: 1; grid-row: 1; position: sticky; top: var(--surface-space); }
body[data-surface-topology="navigation-rail"] .surface-workbench { grid-column: 2; }
body[data-surface-topology="timeline-flow"] .surface-identity-band { display: flex; overflow-x: auto; gap: calc(var(--surface-space) * .75); }
body[data-surface-topology="timeline-flow"] .surface-term { min-width: 180px; }
body[data-surface-topology="timeline-split-workbench"] .surface-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .42fr); align-items: start; }
body[data-surface-topology="timeline-split-workbench"] .surface-identity-band { display: flex; flex-direction: column; gap: calc(var(--surface-space) * .75); }
body[data-surface-topology="card-grid"] #view .list,
body[data-surface-topology="card-grid"] #view .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: calc(var(--surface-space) * .6); }
body[data-surface-topology="spatial-canvas"] .surface-workbench { border: 1px solid var(--surface-line); border-radius: var(--surface-card-radius); padding: var(--surface-space); background-image: radial-gradient(var(--surface-line) .75px, transparent .75px); background-size: 18px 18px; }
@media (max-width: 720px) {
  body[data-surface-state="compiled"] .surface-shell { display: block; }
  body[data-surface-state="compiled"] .surface-identity-band { margin-top: var(--surface-space); position: static; }
}
/* resolved topology: guided-stepper */