:root {
  --md-sys-color-background: #0b0f0c;
  --md-sys-color-surface: #121614;
  --md-sys-color-surface-container: #171c18;
  --md-sys-color-surface-container-high: #1d231f;
  --md-sys-color-on-surface: #e2e6e1;
  --md-sys-color-on-surface-variant: #a4aea4;
  --md-sys-color-outline: #3a443c;
  --md-sys-color-primary: #89a874;
  --md-sys-color-on-primary: #0f130f;
  --md-sys-color-secondary: #bccbb3;
  --md-sys-color-error: #f2b8b5;

  --md-sys-type-display: 600 32px/40px "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --md-sys-type-headline: 600 24px/32px "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --md-sys-type-title: 600 18px/24px "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --md-sys-type-body: 400 16px/24px "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --md-sys-type-label: 600 12px/16px "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-shape-corner-xl: 28px;

  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.35);
  --md-sys-elevation-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.35);
  --md-sys-elevation-3: 0 6px 18px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  --md-sys-elevation-4: 0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);

  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-12: 48px;

  --focus-ring: 0 0 0 3px rgba(137, 168, 116, 0.55);
  --layout-gutter: 24px;
  --layout-header: 56px;
  --layout-nav: 72px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font: var(--md-sys-type-body);
  background: radial-gradient(circle at top right, rgba(137, 168, 116, 0.12), transparent 45%), var(--md-sys-color-background);
  color: var(--md-sys-color-on-surface);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--md-sys-spacing-4) var(--md-sys-spacing-4) calc(120px + env(safe-area-inset-bottom));
  overflow: hidden;
  user-select: none;
}

.bg-grid {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(137, 168, 116, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137, 168, 116, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.18;
  pointer-events: none;
}

.app {
  width: min(920px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-6);
}

.app__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--md-sys-spacing-4);
}

.progress {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-2);
  font: var(--md-sys-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

.progress.is-hidden {
  visibility: hidden;
}

.progress__bar {
  width: 200px;
  height: 4px;
  border-radius: 999px;
  background: rgba(137, 168, 116, 0.2);
  overflow: hidden;
}

.progress__fill {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, rgba(137, 168, 116, 0.95), rgba(137, 168, 116, 0.45));
  border-radius: inherit;
  transition: width 220ms cubic-bezier(0.2, 0, 0, 1);
}

.carousel-window {
  width: 100%;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-xl);
}

.carousel-track {
  display: flex;
  width: 100%;
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

.card {
  flex: 0 0 100%;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-xl);
  padding: var(--md-sys-spacing-8);
  box-shadow: var(--md-sys-elevation-2);
  max-height: calc(100vh - var(--layout-header) - var(--layout-nav) - (var(--layout-gutter) * 2) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.step {
  opacity: 1;
}

h1 {
  margin: 0 0 var(--md-sys-spacing-4);
  font: 600 40px/48px "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

h2 {
  margin: 0 0 var(--md-sys-spacing-8);
  font: 600 32px/40px "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.muted {
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 var(--md-sys-spacing-6);
  font-size: 18px;
  line-height: 1.6;
  padding-top: var(--md-sys-spacing-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-3);
  margin-bottom: var(--md-sys-spacing-8);
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

label, legend {
  font: var(--md-sys-type-label);
  color: var(--md-sys-color-on-surface-variant);
}

.field-question {
  margin: 0;
  font: var(--md-sys-type-body);
  color: var(--md-sys-color-on-surface-variant);
  padding-top: var(--md-sys-spacing-4);
}

.field-subtext {
  margin: 0;
  font: var(--md-sys-type-body);
  color: var(--md-sys-color-on-surface);
}

.field-subtext a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

.field-subtext a:hover {
  text-decoration: underline;
}

input[type="text"],
select {
  min-height: 48px;
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-md);
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-type-body);
}

input[type="text"]::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

input[type="range"] {
  accent-color: var(--md-sys-color-primary);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--md-sys-color-error);
  box-shadow: 0 0 0 2px rgba(242, 184, 181, 0.2);
}

.range-meta {
  display: flex;
  justify-content: space-between;
  font: var(--md-sys-type-label);
  color: var(--md-sys-color-on-surface-variant);
}

.option {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-5) var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-lg);
  border: 1px solid transparent;
  background: rgba(23, 28, 24, 0.8);
  transition: border-color 150ms ease, background 150ms ease;
  font-size: 14px;
}

.option input {
  accent-color: var(--md-sys-color-primary);
}

.option--radio {
  border-color: var(--md-sys-color-outline);
  position: relative;
  justify-content: flex-start;
  text-align: left;
}

.option--radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option--radio.is-checked {
  border-color: var(--md-sys-color-primary);
  background: rgba(137, 168, 116, 0.18);
}

.option:hover {
  border-color: var(--md-sys-color-outline);
  background: rgba(29, 35, 31, 0.9);
}

.option:focus-within {
  box-shadow: var(--focus-ring);
}

.options-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--md-sys-spacing-3);
}

.options-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

fieldset.is-invalid {
  border-radius: var(--md-sys-shape-corner-md);
  border: 1px solid var(--md-sys-color-error);
  padding: var(--md-sys-spacing-2);
}

.summary {
  display: grid;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-lg);
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline);
  margin-bottom: var(--md-sys-spacing-4);
  user-select: none;
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--md-sys-spacing-4);
  font: var(--md-sys-type-body);
  color: var(--md-sys-color-on-surface-variant);
}

.summary__row strong {
  color: var(--md-sys-color-on-surface);
  font-weight: 600;
  user-select: text;
}

.submit {
  min-height: 48px;
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-6);
  border-radius: 999px;
  border: none;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font: 600 16px/20px "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: var(--md-sys-elevation-1);
  transition: transform 120ms ease, box-shadow 120ms ease;
  width: 100%;
}

.submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--md-sys-elevation-2);
}

.fineprint {
  margin-top: var(--md-sys-spacing-2);
  font: var(--md-sys-type-label);
  color: var(--md-sys-color-on-surface-variant);
}

.nav-island {
  position: fixed;
  left: 50%;
  bottom: calc(var(--md-sys-spacing-5) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  width: min(920px, calc(100% - 32px));
  border-radius: var(--md-sys-shape-corner-xl);
  background: rgba(23, 28, 24, 0.92);
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-3);
  z-index: 10;
}

.nav-btn {
  min-height: 48px;
  padding: 0 var(--md-sys-spacing-5);
  border-radius: 999px;
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font: 600 16px/20px "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.nav-btn--primary {
  background: var(--md-sys-color-primary);
  border-color: transparent;
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-1);
}

.nav-btn:hover {
  background: rgba(137, 168, 116, 0.12);
}

.nav-btn--primary:hover {
  background: #9ab983;
  box-shadow: var(--md-sys-elevation-2);
}

.nav-btn:active,
.submit:active {
  transform: translateY(1px);
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.nav-btn.is-hidden {
  visibility: hidden;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (min-width: 720px) {
  body {
    padding: var(--md-sys-spacing-6) var(--md-sys-spacing-6) calc(120px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .app__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .progress__bar {
    width: 160px;
  }

  .card {
    padding: var(--md-sys-spacing-6);
  }

  .nav-island {
    justify-content: space-between;
  }

  .options-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track,
  .progress__fill,
  .submit,
  .nav-btn {
    transition: none;
  }
}