:root {
  --color-primary: #1E1B4B;
  --color-secondary: #312E81;
  --color-accent: #CA8A04;
  --color-on-accent: #0F172A;
  --color-background: #0F0F23;
  --color-foreground: #F8FAFC;
  --color-card: #1B1B30;
  --color-card-foreground: #F8FAFC;
  --color-muted: #27273B;
  --color-muted-foreground: #94A3B8;
  --color-border: #4338CA;
  --color-destructive: #EF4444;
  --color-on-destructive: #000000;
  --color-ring: #FFFFFF;
  --color-accent-hover: #E0A51A;
  --color-error-foreground: #FCA5A5;
  --color-shadow: rgb(0 0 0 / 0.24);
  --color-shadow-md: rgb(0 0 0 / 0.22);
  --color-shadow-lg: rgb(0 0 0 / 0.32);
  --color-secondary-wash: rgb(49 46 129 / 0.42);
  --color-card-wash: rgb(27 27 48 / 0.96);
  --color-card-report: rgb(27 27 48 / 0.88);
  --color-background-wash: rgb(15 15 35 / 0.96);
  --color-background-soft: rgb(15 15 35 / 0.56);
  --color-background-softer: rgb(15 15 35 / 0.42);
  --color-muted-border: rgb(148 163 184 / 0.28);
  --color-muted-border-soft: rgb(148 163 184 / 0.2);
  --color-muted-border-report: rgb(148 163 184 / 0.22);
  --color-muted-border-chart: rgb(148 163 184 / 0.18);
  --color-muted-border-faint: rgb(148 163 184 / 0.16);
  --color-secondary-soft: rgb(49 46 129 / 0.32);
  --color-secondary-softer: rgb(49 46 129 / 0.24);
  --color-secondary-softest: rgb(49 46 129 / 0.52);
  --color-secondary-hover: rgb(49 46 129 / 0.35);
  --color-accent-ring: rgb(202 138 4 / 0.25);
  --color-accent-ring-soft: rgb(202 138 4 / 0.18);
  --color-accent-ring-faint: rgb(202 138 4 / 0.22);
  --color-accent-border: rgb(202 138 4 / 0.5);
  --color-accent-border-soft: rgb(202 138 4 / 0.36);
  --color-accent-border-strong: rgb(202 138 4 / 0.48);
  --color-accent-surface: rgb(202 138 4 / 0.08);
  --color-shadow-halo: rgb(201 24 59 / 0.44);
  --color-shadow-halo-faint: rgb(201 24 59 / 0.16);
  --color-virtue-halo: rgb(214 162 78 / 0.32);
  --color-virtue-halo-faint: rgb(214 162 78 / 0.11);
  --color-shadow-surface: rgb(201 24 59 / 0.3);
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.24);
  --shadow-md: 0 8px 20px rgb(0 0 0 / 0.22);
  --shadow-lg: 0 16px 32px rgb(0 0 0 / 0.32);
  --transition: 180ms ease;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-background);
  color-scheme: dark;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgb(49 46 129 / 0.24), transparent 32rem),
    var(--color-background);
  color: var(--color-foreground);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--color-secondary);
  color: var(--color-foreground);
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  width: min(100%, 46rem);
  min-height: 100vh;
  margin: 0 auto;
  padding: 1.25rem;
}

.screen-content {
  display: grid;
  gap: 1.5rem;
  min-height: calc(100vh - 2.5rem);
  align-content: center;
}

.app-shell-question .screen-content,
.app-shell-result .screen-content {
  align-content: start;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
}

.hero-title,
.page-title,
.report-title {
  max-width: 18ch;
  margin: 0;
  color: var(--color-foreground);
  font-size: clamp(2.15rem, 9vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.page-title {
  max-width: 22ch;
  font-size: clamp(1.8rem, 7vw, 3.2rem);
}

.report-title {
  max-width: none;
  font-size: clamp(2rem, 7vw, 3.8rem);
}

.hero-subtitle,
.page-lead,
.report-lead {
  max-width: 48rem;
  margin: 1rem 0 0;
  color: var(--color-muted-foreground);
  font-size: 1.08rem;
  line-height: 1.7;
}

.hero-description {
  max-width: 42rem;
  margin: 1.25rem 0 0;
  color: var(--color-foreground);
  font-size: 1.12rem;
  line-height: 1.75;
}

.fine-print {
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: 0.8rem;
  line-height: 1.6;
}

.gate-hero,
.intro-hero,
.question-view,
.generating-view,
.error-view {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 5vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--color-secondary-wash), var(--color-card-wash) 48%, var(--color-background-wash));
  box-shadow: var(--shadow-lg);
}

.deployment-gate {
  justify-items: center;
  text-align: center;
}

.gate-form {
  display: grid;
  gap: 0.65rem;
  max-width: 32rem;
  padding: 1rem;
  border: 1px solid var(--color-muted-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-background-soft);
}

.field-label,
.field-legend {
  color: var(--color-foreground);
  font-size: 0.95rem;
  font-weight: 700;
}

.text-input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-muted-foreground);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  color: var(--color-foreground);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.text-input::placeholder {
  color: var(--color-muted-foreground);
  opacity: 0.9;
}

.text-input:hover {
  border-color: var(--color-muted-foreground);
}

.text-input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.text-input[aria-invalid="true"] {
  border-color: var(--color-destructive);
}

.field-help,
.field-error {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

.field-help {
  color: var(--color-muted-foreground);
}

.field-error {
  color: var(--color-error-foreground);
}

.button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  touch-action: manipulation;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.button:hover:not(:disabled) {
  box-shadow: 0 0 0 3px var(--color-accent-ring-soft);
}

.button:active:not(:disabled) {
  opacity: 0.82;
}

.button:disabled {
  opacity: 0.45;
  box-shadow: none;
}

.button-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.button-secondary {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-foreground);
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-secondary-hover);
}

.button-quiet {
  border-color: transparent;
  background: var(--color-muted);
  color: var(--color-foreground);
}

.button-quiet:hover:not(:disabled) {
  border-color: var(--color-border);
  background: var(--color-secondary);
}

.button-wide {
  width: 100%;
}

.icon {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  vertical-align: middle;
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.promo-card {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  min-height: 8.5rem;
  padding: 1rem;
  border: 1px solid var(--color-muted-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
}

.promo-card > .icon {
  color: var(--color-accent);
}

.promo-title,
.promo-text {
  margin: 0;
}

.promo-title {
  font-size: 0.95rem;
}

.promo-text {
  color: var(--color-muted-foreground);
  font-size: 0.84rem;
  line-height: 1.6;
}

.signal-mark {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-muted-border-soft);
  border-bottom: 1px solid var(--color-muted-border-soft);
  color: var(--color-muted-foreground);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.signal-number {
  color: var(--color-accent);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
}

.signal-caption {
  text-align: right;
}

.test-overview {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--color-muted-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-background-soft);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.stat-item {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.65rem 0.5rem;
  border-right: 1px solid var(--color-muted-border-soft);
  text-align: center;
}

.stat-item:last-child {
  border-right: 0;
}

.stat-value {
  color: var(--color-foreground);
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  line-height: 1.1;
}

.stat-label {
  color: var(--color-muted-foreground);
  font-size: 0.72rem;
  line-height: 1.35;
}

.mode-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.mode-preview-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.55rem;
  padding: 0.7rem;
  border: 1px solid var(--color-muted-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-card-wash);
}

.mode-preview-item > .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  color: var(--color-accent);
}

.mode-preview-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.mode-preview-title {
  color: var(--color-foreground);
  font-size: 0.82rem;
}

.mode-preview-description {
  color: var(--color-muted-foreground);
  font-size: 0.75rem;
  line-height: 1.45;
}

.mode-fieldset,
.question-fieldset {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mode-option,
.answer-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 4.25rem;
  padding: 1rem;
  border: 1px solid var(--color-muted-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.mode-option:hover,
.answer-option:hover {
  border-color: var(--color-secondary);
  background: var(--color-secondary-soft);
}

.mode-option:focus-within,
.answer-option:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring-faint);
}

.mode-option.is-selected,
.answer-option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-secondary-softest);
  box-shadow: inset 4px 0 0 var(--color-accent);
}

.mode-radio,
.answer-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mode-radio + .mode-copy::before,
.answer-input + .answer-marker {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--color-muted-foreground);
  border-radius: 50%;
  color: transparent;
  font-size: 0.75rem;
  font-weight: 700;
}

.mode-radio:checked + .mode-copy::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  content: "✓";
}

.mode-copy,
.answer-label {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.mode-label,
.answer-label {
  font-weight: 700;
}

.mode-description {
  color: var(--color-muted-foreground);
  font-size: 0.84rem;
  line-height: 1.5;
}

.mode-option > .icon {
  color: var(--color-accent);
}

.commitment-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted-foreground);
  font-size: 0.9rem;
}

.commitment-list li {
  position: relative;
  padding-left: 1.2rem;
}

.commitment-list li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-accent);
  content: "";
}

.intro-actions {
  display: grid;
  gap: 0.75rem;
}

.question-top,
.question-header,
.question-navigation,
.report-actions,
.error-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.report-actions {
  flex-wrap: wrap;
}

.report-card-status {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8rem;
}

.report-card-status[data-state="done"] {
  color: var(--color-accent);
}

.report-card-status[data-state="error"] {
  color: var(--color-cta);
}

.report-card-status[data-state="pending"] {
  color: var(--color-muted-foreground);
}

.report-signature {
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.joke-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.joke-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-muted-border-faint);
  border-left: 3px solid var(--color-muted-border);
  border-radius: var(--radius-sm);
  background: var(--color-background-softer);
}

.joke-item-overall {
  border-left-color: var(--color-accent);
}

.joke-item-shadow {
  border-left-color: var(--color-cta);
}

.joke-item-virtue {
  border-left-color: var(--color-accent);
}

.joke-name {
  margin: 0 0 0.15rem;
  color: var(--color-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.joke-text {
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: 0.88rem;
  line-height: 1.6;
}

.history-view {
  display: grid;
  gap: 1rem;
}

.history-header {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.history-list {
  display: grid;
  gap: 0.75rem;
}

.history-row {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid var(--color-muted-border-chart);
  border-radius: var(--radius-sm);
  background: var(--color-background-softer);
}

.history-row-head {
  display: grid;
  gap: 0.3rem;
}

.history-label-input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-muted-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-foreground);
  font: inherit;
  font-size: 0.9rem;
}

.history-label-input::placeholder {
  color: var(--color-muted-foreground);
}

.history-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: 0.72rem;
}

.history-row-mode {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--color-accent-border-soft);
  border-radius: 999px;
  color: var(--color-accent);
}

.history-row-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.history-row-stat {
  display: grid;
  gap: 0.1rem;
}

.history-row-stat dt {
  color: var(--color-muted-foreground);
  font-size: 0.68rem;
}

.history-row-stat dd {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.history-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.history-footer,
.history-empty {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: 1rem;
  border: 1px dashed var(--color-muted-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted-foreground);
}

.history-empty p {
  margin: 0;
}

.report-history-back {
  order: -1;
  flex-basis: 100%;
  text-align: left;
}

.mode-chip {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-muted-foreground);
  font-size: 0.78rem;
  font-weight: 700;
}

.text-button {
  min-height: 2.75rem;
  padding: 0.35rem 0;
  border: 0;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 0.86rem;
  transition: color var(--transition);
}

.text-button:hover {
  color: var(--color-foreground);
}

.question-count {
  margin: 0;
  color: var(--color-accent);
  font-size: 0.88rem;
  font-weight: 700;
}

.question-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.question-index {
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  background: var(--color-accent-surface);
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.question-guidance {
  margin: 0.65rem 0 0;
  color: var(--color-muted-foreground);
  font-size: 0.82rem;
}

.question-title {
  margin: 0;
  color: var(--color-foreground);
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  line-height: 1.3;
}

.question-progress {
  display: block;
  width: 100%;
  height: 0.55rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  accent-color: var(--color-accent);
}

.question-progress::-webkit-progress-bar {
  background: var(--color-muted);
}

.question-progress::-webkit-progress-value {
  background: var(--color-accent);
}

.question-progress::-moz-progress-bar {
  background: var(--color-accent);
}

.question-prompt {
  max-width: 38rem;
  margin: 0;
  color: var(--color-foreground);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
}

.answer-list {
  display: grid;
  gap: 0.65rem;
}

.answer-option {
  grid-template-columns: auto 1fr;
  min-height: 4.5rem;
  padding: 0.9rem 1rem;
}

.answer-option:active {
  background: var(--color-secondary-wash);
}

.answer-marker {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--color-muted-foreground);
  border-radius: 50%;
  color: var(--color-muted-foreground);
  font-size: 0.78rem;
  font-weight: 700;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.answer-option.is-selected .answer-marker {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.answer-label {
  color: var(--color-foreground);
  line-height: 1.55;
}

.question-navigation {
  align-items: stretch;
  flex-wrap: wrap;
}

.question-navigation .button {
  flex: 1 1 10rem;
}

.generating-view,
.error-view {
  justify-items: center;
  text-align: center;
}

.generating-view > .icon,
.error-view > .icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-accent);
}

.generating-view .page-lead,
.error-view .page-lead {
  margin-right: auto;
  margin-left: auto;
}

.loading-dots {
  display: flex;
  gap: 0.45rem;
  min-height: 1rem;
}

.loading-dots span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 900ms ease-in-out infinite alternate;
}

.loading-dots span:nth-child(2) {
  animation-delay: 160ms;
}

.loading-dots span:nth-child(3) {
  animation-delay: 320ms;
}

.generation-status {
  margin: 0;
  color: var(--color-accent);
  font-size: 0.86rem;
  font-weight: 700;
}

.analysis-steps {
  display: grid;
  width: min(100%, 34rem);
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.analysis-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-muted-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-background-softer);
}

.analysis-step-index {
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.analysis-step-label {
  color: var(--color-foreground);
  font-size: 0.82rem;
  font-weight: 700;
}

.analysis-step-status {
  color: var(--color-muted-foreground);
  font-size: 0.72rem;
}

@keyframes pulse {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.report {
  display: grid;
  gap: 1.5rem;
}

.report-header {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem 0 0.25rem;
}

.report-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--color-accent-border-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-accent-surface), var(--color-card-report));
  box-shadow: var(--shadow-sm);
}

.report-banner > .icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-accent);
}

.report-banner-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.report-banner-eyebrow,
.report-banner-title,
.report-status {
  margin: 0;
}

.report-banner-eyebrow {
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.report-banner-title {
  color: var(--color-foreground);
  font-size: 1.1rem;
  font-weight: 800;
}

.report-status {
  color: var(--color-muted-foreground);
  font-size: 0.78rem;
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
}

.metric-card,
.report-section,
.report-disclaimer {
  border: 1px solid var(--color-muted-border-report);
  border-radius: var(--radius-md);
  background: var(--color-card-report);
  box-shadow: var(--shadow-md);
}

.metric-card {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
}

.average-card {
  border-color: var(--color-accent-border);
}

.average-card .metric-note {
  line-height: 1.55;
}

.metric-label,
.metric-note,
.metric-score,
.metric-name {
  margin: 0;
}

.metric-label,
.metric-note {
  color: var(--color-muted-foreground);
  font-size: 0.78rem;
}

.metric-name {
  font-size: 1.2rem;
}

.metric-score {
  color: var(--color-accent);
  font-size: 1.8rem;
  font-weight: 700;
}

.report-section {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.section-heading {
  display: grid;
  gap: 0.25rem;
}

.section-title,
.chart-title,
.suggestion-title {
  margin: 0;
  color: var(--color-foreground);
  font-size: 1.2rem;
  line-height: 1.35;
}

.section-description,
.chart-description,
.suggestion-text {
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: 0.86rem;
  line-height: 1.65;
}

.chart-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
      }

      .chart-grid-single {
        grid-template-columns: minmax(0, 1fr);
      }

.chart-card {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-muted-border-chart);
  border-radius: var(--radius-sm);
  background: var(--color-background-softer);
}

.chart-card-accent {
  border-color: var(--color-accent-border);
}

.radar-svg {
  display: block;
  width: 100%;
  min-height: 15rem;
  height: auto;
  overflow: visible;
}

.radar-ring,
.radar-axis {
  fill: none;
  stroke: var(--color-muted-border);
  stroke-width: 1;
}

.radar-axis {
  stroke-dasharray: 3 5;
}

.radar-polygon {
  stroke-width: 2;
}

.radar-point {
  stroke-width: 2;
}

.radar-label {
  fill: var(--color-foreground);
  font-family: inherit;
  font-weight: 600;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-muted-border-faint);
  border-radius: var(--radius-sm);
}

.table-scroll:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring-soft);
}

.data-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  color: var(--color-foreground);
  font-size: 0.84rem;
}

.data-table caption {
  padding: 0.75rem;
  color: var(--color-muted-foreground);
  font-size: 0.78rem;
  text-align: left;
}

.data-table th,
.data-table td {
  padding: 0.7rem 0.75rem;
  border-top: 1px solid var(--color-muted-border-faint);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  color: var(--color-muted-foreground);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.data-table tbody th {
  color: var(--color-accent);
  font-weight: 700;
}

.score-value {
  display: block;
  font-weight: 700;
}

.score-bar {
  display: block;
  width: 4.5rem;
  height: 0.35rem;
  margin-top: 0.35rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
}

.score-bar::after {
  display: block;
  width: var(--score, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  content: "";
}

.paired-table td:last-child,
.trigger-table td:last-child {
  color: var(--color-muted-foreground);
}

.suggestion-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.suggestion-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--color-accent-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-secondary-softer);
}

.suggestion-card > .icon {
  color: var(--color-accent);
}

.suggestion-content {
  display: grid;
  gap: 0.25rem;
}

.report-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1rem;
  border-color: var(--color-accent-border-strong);
  background: var(--color-accent-surface);
}

.report-disclaimer > .icon {
  color: var(--color-accent);
}

.report-disclaimer p {
  margin: 0;
  color: var(--color-foreground);
  font-size: 0.86rem;
  line-height: 1.6;
}

.report-actions {
  flex-wrap: wrap;
  padding-top: 0.25rem;
}

.report-actions .button {
  flex: 1 1 10rem;
}

@media (max-width: 40rem) {
  .app-shell {
    padding: 0.75rem;
  }

  .screen-content {
    min-height: calc(100vh - 1.5rem);
  }

  .gate-hero,
  .intro-hero,
  .question-view,
  .generating-view,
  .error-view {
    padding: 1rem;
  }

  .promo-grid,
  .chart-grid,
  .report-summary {
    grid-template-columns: 1fr;
  }

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

  .stat-item:nth-child(2n) {
    border-right: 0;
  }

  .mode-preview {
    grid-template-columns: 1fr;
  }

  .question-navigation {
    position: static;
    bottom: 0.5rem;
    z-index: 2;
    padding: 0.5rem;
    border: 1px solid var(--color-muted-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-card-wash);
    box-shadow: var(--shadow-md);
  }

  .commitment-list {
    grid-template-columns: 1fr;
  }

  .question-navigation .button,
  .report-actions .button {
    flex-basis: 100%;
  }
}

@media (max-width: 23.5rem) {
  .hero-title,
  .page-title,
  .report-title {
    font-size: 1.9rem;
  }

  .mode-option,
  .answer-option {
    gap: 0.65rem;
    padding: 0.8rem;
  }

  .report-actions {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  :root {
    color-scheme: light;
    --color-primary: #1E1B4B;
    --color-secondary: #312E81;
    --color-on-primary: #FFFFFF;
    --color-on-secondary: #FFFFFF;
    --color-accent: #8A5A00;
    --color-on-accent: #FFFFFF;
    --color-background: #FFFFFF;
    --color-foreground: #111827;
    --color-card: #FFFFFF;
    --color-card-foreground: #111827;
    --color-muted: #E5E7EB;
    --color-muted-foreground: #374151;
    --color-border: #4B5563;
    --color-destructive: #B91C1C;
    --color-on-destructive: #FFFFFF;
    --color-ring: #1F2937;
    --color-accent-hover: #6B4200;
    --color-error-foreground: #991B1B;
    --color-shadow: transparent;
    --color-shadow-md: transparent;
    --color-shadow-lg: transparent;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --color-secondary-wash: #E0E7FF;
    --color-card-wash: #F8FAFC;
    --color-card-report: #FFFFFF;
    --color-background-wash: #FFFFFF;
    --color-background-soft: #F8FAFC;
    --color-background-softer: #F8FAFC;
    --color-muted-border: #6B7280;
    --color-muted-border-soft: #D1D5DB;
    --color-muted-border-report: #D1D5DB;
    --color-muted-border-chart: #D1D5DB;
    --color-muted-border-faint: #E5E7EB;
    --color-secondary-soft: #E0E7FF;
    --color-secondary-softer: #EEF2FF;
    --color-secondary-softest: #E0E7FF;
    --color-secondary-hover: #C7D2FE;
    --color-accent-ring: rgb(138 90 0 / 0.24);
    --color-accent-ring-soft: rgb(138 90 0 / 0.18);
    --color-accent-ring-faint: rgb(138 90 0 / 0.16);
    --color-accent-border: #8A5A00;
    --color-accent-border-soft: #B7791F;
    --color-accent-border-strong: #8A5A00;
    --color-accent-surface: #FFF7ED;
  }

  html,
  body,
  #app,
  .app-shell,
  .screen-content,
  .report {
    background: var(--color-background);
    color: var(--color-foreground);
  }

  body {
    min-width: 0;
  }

  .app-shell,
  .screen-content {
    width: 100%;
    min-height: 0;
    padding: 0;
  }

  .report-header,
  .report-banner,
  .report-summary,
  .metric-card,
  .report-section,
  .report-disclaimer,
  .chart-card,
  .suggestion-card {
    break-inside: avoid;
    box-shadow: none;
  }

  .metric-card,
  .report-section,
  .report-disclaimer {
    background: var(--color-card-report);
    border-color: var(--color-muted-border-report);
  }

  .chart-card {
    background: var(--color-background-softer);
    border-color: var(--color-muted-border-chart);
  }

  .chart-card-accent {
    border-color: var(--color-accent-border);
  }

  .suggestion-card {
    background: var(--color-secondary-softer);
    border-color: var(--color-accent-border-soft);
  }

  .report-disclaimer {
    background: var(--color-accent-surface);
    border-color: var(--color-accent-border-strong);
  }

  .table-scroll {
    overflow: visible;
    border-color: var(--color-muted-border-faint);
    background: var(--color-card);
  }

  .data-table {
    min-width: 0;
    color: var(--color-foreground);
  }

  .data-table th,
  .data-table td {
    border-color: var(--color-muted-border-faint);
  }

  .radar-svg {
    min-height: 12rem;
  }

  .radar-ring,
  .radar-axis {
    stroke: var(--color-muted-border);
  }

  .radar-polygon {
    fill: var(--color-accent-ring-faint);
    stroke: var(--color-accent);
  }

  .radar-point {
    fill: var(--color-foreground);
    stroke: var(--color-accent);
  }

  .radar-label {
    fill: var(--color-foreground);
    stroke: var(--color-background);
  }

  .radar-polygon-shadow,
  .radar-polygon-virtue {
    fill: var(--color-accent-ring-faint);
    stroke: var(--color-accent);
  }

  .radar-grid-subdued .radar-ring,
  .radar-grid-subdued .radar-axis {
    stroke: var(--color-muted-border-faint);
  }

  .radar-divider {
    stroke: var(--color-muted-border);
  }

  .radar-halo circle {
    opacity: 0.35;
  }

  .radar-point-shadow,
  .radar-point-virtue {
    fill: var(--color-foreground);
    stroke: var(--color-accent);
  }

  .radar-label-shadow,
  .radar-label-virtue {
    fill: var(--color-foreground);
  }

  .paired-radar-readout-item {
    background: var(--color-card-report);
    border-color: var(--color-muted-border-report);
  }

  .reading-guide-card,
  .balance-chart,
  .rhythm-strip {
    background: var(--color-card-report);
    border-color: var(--color-muted-border-report);
  }

  .balance-bar-shadow,
  .rhythm-bar {
    background: var(--color-accent);
  }

  .balance-bar-virtue {
    background: var(--color-accent);
  }

  .report-actions,
  .skip-link {
    display: none !important;
  }

  * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

@media screen {
  :root {
    --color-primary: #3A0B12;
    --color-secondary: #5B111B;
    --color-accent: #D6A24E;
    --color-on-accent: #1B0B08;
    --color-background: #070606;
    --color-foreground: #F6E8CE;
    --color-card: #12090A;
    --color-card-foreground: #F6E8CE;
    --color-muted: #211113;
    --color-muted-foreground: #BBA58E;
    --color-border: #6F2A2E;
    --color-destructive: #E3264F;
    --color-on-destructive: #FFF7ED;
    --color-ring: #F6E8CE;
    --color-accent-hover: #E8BD70;
    --color-error-foreground: #FF9AAA;
    --color-shadow: rgb(0 0 0 / 0.44);
    --color-shadow-md: rgb(0 0 0 / 0.34);
    --color-shadow-lg: rgb(0 0 0 / 0.56);
    --color-secondary-wash: rgb(91 17 27 / 0.62);
    --color-card-wash: rgb(18 9 10 / 0.97);
    --color-card-report: rgb(18 9 10 / 0.94);
    --color-background-wash: rgb(7 6 6 / 0.98);
    --color-background-soft: rgb(18 9 10 / 0.86);
    --color-background-softer: rgb(18 9 10 / 0.64);
    --color-muted-border: rgb(214 162 78 / 0.32);
    --color-muted-border-soft: rgb(214 162 78 / 0.2);
    --color-muted-border-report: rgb(214 162 78 / 0.24);
    --color-muted-border-chart: rgb(214 162 78 / 0.18);
    --color-muted-border-faint: rgb(214 162 78 / 0.14);
    --color-secondary-soft: rgb(91 17 27 / 0.42);
    --color-secondary-softer: rgb(91 17 27 / 0.28);
    --color-secondary-softest: rgb(201 24 59 / 0.26);
    --color-secondary-hover: rgb(201 24 59 / 0.2);
    --color-accent-ring: rgb(214 162 78 / 0.3);
    --color-accent-ring-soft: rgb(214 162 78 / 0.2);
    --color-accent-ring-faint: rgb(214 162 78 / 0.24);
    --color-accent-border: rgb(214 162 78 / 0.62);
    --color-accent-border-soft: rgb(214 162 78 / 0.42);
    --color-accent-border-strong: rgb(214 162 78 / 0.78);
    --color-accent-surface: rgb(214 162 78 / 0.1);
    --color-cta: #C9183B;
    --color-cta-hover: #E52C4D;
    --color-red-soft: rgb(201 24 59 / 0.2);
    --color-red-border: rgb(201 24 59 / 0.72);
    --color-ink: #F6E8CE;
    --color-panel: #140B0C;
    --color-panel-raised: #1C0E10;
    --color-grid: rgb(214 162 78 / 0.07);
    --font-display: Georgia, "Songti SC", STSong, SimSun, serif;
    --shadow-soft: 0 10px 30px rgb(0 0 0 / 0.28);
    --shadow-deep: 0 20px 60px rgb(0 0 0 / 0.48);
  }

  html {
    background: var(--color-background);
  }

  body {
    position: relative;
    background-color: var(--color-background);
    background-image:
      linear-gradient(var(--color-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-grid) 1px, transparent 1px),
      radial-gradient(circle at 50% -10%, rgb(128 16 35 / 0.38), transparent 32rem);
    background-size: 48px 48px, 48px 48px, auto;
    color: var(--color-foreground);
  }

  body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at 50% 28%, rgb(201 24 59 / 0.12), transparent 26rem);
    content: "";
    pointer-events: none;
  }

  ::selection {
    background: var(--color-cta);
    color: var(--color-foreground);
  }

  .app-shell {
    width: min(100%, 46rem);
    padding: 1rem;
  }

  .screen-content {
    gap: 1rem;
  }

  .gate-hero,
  .intro-hero,
  .question-view,
  .generating-view,
  .error-view {
    border-color: var(--color-border);
    border-radius: 1.1rem;
    background: linear-gradient(145deg, rgb(42 10 14 / 0.96), rgb(10 7 7 / 0.98) 60%);
    box-shadow: var(--shadow-deep), inset 0 0 0 1px rgb(214 162 78 / 0.05);
  }

  .landing-hero {
    position: relative;
    overflow: visible;
    padding: 1rem;
  }

  .landing-hero::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 28%, rgb(201 24 59 / 0.2), transparent 34%), linear-gradient(135deg, transparent 35%, rgb(214 162 78 / 0.05) 50%, transparent 65%);
    border-radius: inherit;
    content: "";
    pointer-events: none;
  }

  .landing-topbar,
  .landing-hero > .eyebrow,
  .landing-hero > .hero-title,
  .landing-hero > .hero-subtitle,
  .landing-hero > .hero-description,
  .landing-hero > .fine-print,
  .landing-hero > .signal-mark,
  .landing-hero > .signal-orbit,
  .landing-hero > .test-overview,
  .landing-hero > .landing-actions,
  .landing-hero > .promo-grid {
    position: relative;
    z-index: 1;
  }

  .landing-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.4rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-muted-border-soft);
    color: var(--color-muted-foreground);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .landing-topbar-brand {
    color: var(--color-accent);
    font-weight: 800;
  }

  .landing-topbar-title {
    color: var(--color-foreground);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .landing-topbar-menu {
    justify-self: end;
    color: var(--color-accent);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
  }

  .eyebrow {
    color: var(--color-accent);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
  }

  .hero-title,
  .page-title,
  .report-title,
  .question-prompt,
  .question-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  .hero-title {
    max-width: 11ch;
    margin-top: 0.8rem;
    color: var(--color-ink);
    font-size: clamp(2.7rem, 12vw, 5.2rem);
    line-height: 1.02;
    text-shadow: 0 0 24px rgb(201 24 59 / 0.18);
  }

  .hero-title-display {
    max-width: none;
    font-size: clamp(3.4rem, 19vw, 7.4rem);
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: 0 0 32px rgb(201 24 59 / 0.28);
  }

  .hero-subtitle,
  .page-lead,
  .report-lead {
    color: var(--color-muted-foreground);
  }

  .hero-subtitle {
    max-width: 32rem;
    margin-top: 0.8rem;
    font-size: 1rem;
  }

  .hero-description {
    max-width: 34rem;
    color: var(--color-foreground);
    font-size: 0.95rem;
  }

  .signal-mark {
    margin-top: 0.6rem;
    border-color: var(--color-muted-border-soft);
  }

  .signal-caption {
    color: var(--color-accent);
  }

  .signal-orbit {
    position: relative;
    display: grid;
    width: min(100%, 22rem);
    aspect-ratio: 1;
    place-items: center;
    margin: 0.4rem auto 0.2rem;
  }

  .signal-orbit::before,
  .signal-orbit::after {
    position: absolute;
    inset: 12%;
    border: 1px solid rgb(214 162 78 / 0.32);
    border-radius: 50%;
    box-shadow: 0 0 36px rgb(201 24 59 / 0.16), inset 0 0 28px rgb(201 24 59 / 0.12);
    content: "";
  }

  .signal-orbit::after {
    inset: 25%;
    border-color: rgb(201 24 59 / 0.5);
    box-shadow: 0 0 28px rgb(201 24 59 / 0.22);
  }

  .signal-orbit {
    background: repeating-conic-gradient(from 0deg, rgb(214 162 78 / 0.13) 0deg 1deg, transparent 1deg 45deg);
    border-radius: 50%;
  }

  .landing-hero .hero-title:focus,
  .landing-hero .hero-title:focus-visible,
  .question-title:focus,
  .question-title:focus-visible,
  .generating-view .page-title:focus,
  .generating-view .page-title:focus-visible,
  .report-title:focus,
  .report-title:focus-visible {
    outline: none;
  }

  .orbit-core {
    position: relative;
    z-index: 2;
    display: grid;
    width: 5.2rem;
    height: 5.2rem;
    place-items: center;
    background: linear-gradient(135deg, #8F1028, #3A0B12);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    color: var(--color-foreground);
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 700;
    filter: drop-shadow(0 0 14px rgb(201 24 59 / 0.48));
  }

  .orbit-node {
    position: absolute;
    z-index: 3;
    display: grid;
    width: 3.8rem;
    height: 3.8rem;
    place-items: center;
    border: 1px solid var(--color-accent-border-soft);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #641323, #19090b 68%);
    box-shadow: 0 0 20px rgb(201 24 59 / 0.28), inset 0 0 14px rgb(214 162 78 / 0.14);
    color: var(--color-foreground);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
  }

  .orbit-node-1 { top: 2%; left: 38%; }
  .orbit-node-2 { top: 15%; right: 7%; }
  .orbit-node-3 { top: 43%; right: 0; }
  .orbit-node-4 { right: 14%; bottom: 5%; }
  .orbit-node-5 { bottom: 5%; left: 14%; }
  .orbit-node-6 { top: 43%; left: 0; }
  .orbit-node-7 { top: 15%; left: 7%; }

  .test-overview {
    gap: 0.7rem;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .stat-grid {
    overflow: hidden;
    border: 1px solid var(--color-accent-border-soft);
    border-radius: 0.7rem;
    background: rgb(7 6 6 / 0.64);
  }

  .stat-item {
    padding: 0.75rem 0.35rem;
    border-color: var(--color-muted-border-soft);
  }

  .stat-value {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 1.55rem;
  }

  .stat-label {
    color: var(--color-muted-foreground);
  }

  .mode-preview {
    gap: 0.5rem;
  }

  .mode-preview-item {
    position: relative;
    min-height: 4.2rem;
    padding: 0.8rem;
    border-color: var(--color-muted-border-soft);
    border-radius: 0.65rem;
    background: rgb(7 6 6 / 0.7);
  }

  .mode-preview-item.is-selected {
    border-color: var(--color-red-border);
    background: linear-gradient(135deg, rgb(91 17 27 / 0.72), rgb(20 9 10 / 0.9));
  }

  .mode-preview-item.is-selected::before {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    color: var(--color-foreground);
    content: "已选择";
    font-size: 0.65rem;
    font-weight: 800;
  }

  .mode-preview-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mode-preview-item:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring-soft);
  }

  .mode-preview-item > .icon {
    color: var(--color-accent);
  }

  .mode-preview-title {
    color: var(--color-foreground);
    font-family: var(--font-display);
    font-size: 1rem;
  }

  .landing-actions {
    display: grid;
    gap: 0.55rem;
  }

  .button-cta {
    min-height: 3.4rem;
    border-color: var(--color-red-border);
    background: linear-gradient(135deg, #7F0C24, #B31336);
    box-shadow: 0 10px 24px rgb(143 15 44 / 0.3);
    color: var(--color-foreground);
    font-family: var(--font-display);
    font-size: 1.1rem;
  }

  .button-cta:hover:not(:disabled) {
    background: linear-gradient(135deg, #8F1028, #B31336);
    box-shadow: 0 12px 30px rgb(201 24 59 / 0.4), 0 0 0 3px rgb(214 162 78 / 0.18);
  }

  .landing-hero > .promo-grid {
    gap: 0.45rem;
  }

  .landing-hero .promo-card {
    min-height: 0;
    padding: 0.65rem;
    border-color: var(--color-muted-border-faint);
    background: rgb(18 9 10 / 0.58);
    box-shadow: none;
  }

  .landing-hero .promo-card > .icon {
    width: 0.95rem;
    height: 0.95rem;
  }

  .landing-hero .promo-title {
    font-size: 0.78rem;
  }

  .landing-hero .promo-text {
    font-size: 0.7rem;
    line-height: 1.45;
  }

  .access-modal-backdrop {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(7 6 6 / 0.78);
    backdrop-filter: blur(10px);
  }

  .access-modal-backdrop[hidden] {
    display: none;
  }

  .access-modal {
    width: min(100%, 31rem);
    padding: 1.4rem;
    border: 1px solid rgb(214 162 78 / 0.42);
    border-radius: 1.1rem;
    background: #F8F0E2;
    box-shadow: 0 24px 80px rgb(0 0 0 / 0.6);
    color: #211315;
  }

  .access-modal :focus-visible {
    outline-color: #7A1F2B;
  }

  .access-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .access-modal-icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    background: #E9B957;
    color: #4B1B13;
  }

  .access-modal-icon .icon {
    width: 1.4rem;
    height: 1.4rem;
  }

  .modal-close {
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #5B4544;
    font-size: 1.6rem;
    line-height: 1;
  }

  .access-modal-title {
    margin: 0.8rem 0 0;
    color: #211315;
    font-family: var(--font-display);
    font-size: 1.65rem;
    text-align: center;
  }

  .access-modal-lead {
    margin: 0.45rem 0 1rem;
    color: #5B4544;
    font-size: 0.86rem;
    line-height: 1.65;
    text-align: center;
  }

  .access-modal .gate-form {
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .access-modal .field-label {
    color: #211315;
  }

  .access-modal .text-input {
    min-height: 3.5rem;
    border-color: #D6C3A4;
    background: #FFFDF8;
    color: #211315;
  }

  .access-modal .text-input::placeholder {
    color: #6B5651;
  }

  .access-modal .field-help {
    color: #6B5651;
  }

  .access-modal .field-error {
    color: #B4233D;
  }

  .access-modal .button-primary {
    border-color: #315BC7;
    background: #315BC7;
    color: #FFFFFF;
  }

  .access-modal .button-primary:hover:not(:disabled) {
    background: #2448A9;
  }

  .intro-hero,
  .question-view,
  .generating-view,
  .error-view {
    padding: 1rem;
  }

  .page-title {
    color: var(--color-ink);
    font-size: clamp(2.2rem, 9vw, 3.8rem);
  }

  .mode-fieldset,
  .question-fieldset {
    gap: 0.55rem;
  }

  .mode-option,
  .answer-option {
    border-color: var(--color-muted-border-soft);
    background: rgb(7 6 6 / 0.72);
    box-shadow: none;
  }

  .mode-option:hover,
  .answer-option:hover {
    border-color: var(--color-accent-border);
    background: var(--color-secondary-softer);
  }

  .mode-option.is-selected,
  .answer-option.is-selected {
    border-color: var(--color-red-border);
    background: linear-gradient(100deg, rgb(143 15 44 / 0.82), rgb(71 12 23 / 0.76));
    box-shadow: inset 3px 0 0 var(--color-cta), 0 0 20px rgb(201 24 59 / 0.14);
  }

  .mode-label,
  .answer-label {
    color: var(--color-foreground);
    font-family: var(--font-display);
  }

  .mode-description,
  .answer-label {
    color: var(--color-muted-foreground);
  }

  .mode-option > .icon {
    color: var(--color-accent);
  }

  .commitment-list {
    color: var(--color-muted-foreground);
  }

  .commitment-list li::before {
    background: var(--color-cta);
  }

  .button-primary {
    border-color: var(--color-red-border);
    background: linear-gradient(135deg, #7F0C24, #B31336);
    color: var(--color-foreground);
  }

  .button-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #8F1028, #B31336);
  }

  .button-secondary {
    border-color: var(--color-accent-border-soft);
    background: rgb(7 6 6 / 0.72);
    color: var(--color-foreground);
  }

  .button-secondary:hover:not(:disabled) {
    border-color: var(--color-accent);
    background: var(--color-secondary-softer);
  }

  .question-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-content: initial;
    gap: 0.45rem;
  }

  .question-top {
    min-height: 2.6rem;
  }

  .mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-color: var(--color-accent-border-soft);
    background: rgb(91 17 27 / 0.32);
    color: var(--color-accent);
  }

  .mode-chip .icon {
    width: 0.8rem;
    height: 0.8rem;
  }

  .question-header {
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid var(--color-muted-border-soft);
    border-radius: 0.75rem;
    background: rgb(7 6 6 / 0.64);
  }

  .question-index {
    width: 3.3rem;
    height: 2.35rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-cta);
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
  }

  .question-count {
    color: var(--color-muted-foreground);
    font-family: var(--font-display);
    font-size: 0.95rem;
  }

  .question-guidance {
    color: var(--color-muted-foreground);
  }

  .question-title {
    margin: 0.2rem 0 0;
    color: var(--color-ink);
    font-size: 1.25rem;
  }

  .question-prompt {
    max-width: 40rem;
    color: var(--color-ink);
    font-size: clamp(1.45rem, 6vw, 2.15rem);
    line-height: 1.35;
  }

  .question-progress {
    height: 0.42rem;
    background: #241416;
  }

  .question-progress::-webkit-progress-bar {
    background: #241416;
  }

  .question-progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--color-cta), var(--color-accent));
  }

  .question-progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--color-cta), var(--color-accent));
  }

  .answer-option {
    min-height: 3.8rem;
    padding: 0.75rem 0.85rem;
  }

  .answer-option .answer-marker {
    color: var(--color-accent);
  }

  .answer-marker {
    width: 2.25rem;
    height: 2.25rem;
    border-color: var(--color-accent-border);
    background: rgb(7 6 6 / 0.8);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 1rem;
  }

  .answer-option.is-selected .answer-marker {
    border-color: var(--color-foreground);
    background: var(--color-foreground);
    color: var(--color-cta);
  }

  .answer-label {
    color: var(--color-foreground);
    font-size: 1rem;
  }

  .question-navigation {
    gap: 0.55rem;
  }

  .question-navigation .button {
    min-height: 3.3rem;
    border-radius: 0.65rem;
    font-family: var(--font-display);
  }

  .generating-view {
    justify-items: center;
    text-align: center;
  }

  .generating-view > .icon {
    color: var(--color-accent);
    filter: drop-shadow(0 0 12px rgb(214 162 78 / 0.28));
  }

  .generation-status {
    color: var(--color-accent);
  }

  .analysis-visual {
    display: grid;
    width: min(100%, 19rem);
    place-items: center;
    margin: 0.2rem auto;
  }

  .analysis-orbit {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgb(201 24 59 / 0.34);
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgb(214 162 78 / 0.12) 0deg 1deg, transparent 1deg 30deg), radial-gradient(circle, rgb(91 17 27 / 0.46), transparent 62%);
    box-shadow: 0 0 38px rgb(143 15 44 / 0.22), inset 0 0 34px rgb(201 24 59 / 0.18);
  }

  .analysis-orbit::before {
    position: absolute;
    inset: 22%;
    border: 1px solid rgb(201 24 59 / 0.46);
    border-radius: 50%;
    content: "";
  }

  .analysis-center {
    position: relative;
    z-index: 2;
    display: grid;
    width: 4.2rem;
    height: 4.2rem;
    place-items: center;
    background: linear-gradient(135deg, #B31336, #4B0C17);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    color: var(--color-foreground);
    font-family: var(--font-display);
    font-size: 1.8rem;
  }

  .analysis-node {
    position: absolute;
    z-index: 3;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--color-accent-border);
    border-radius: 50%;
    background: #080607;
    box-shadow: 0 0 12px rgb(214 162 78 / 0.4);
  }

  .analysis-node-1 { top: 8%; left: 46%; }
  .analysis-node-2 { top: 23%; right: 12%; }
  .analysis-node-3 { top: 48%; right: 3%; }
  .analysis-node-4 { right: 20%; bottom: 8%; }
  .analysis-node-5 { bottom: 8%; left: 20%; }
  .analysis-node-6 { top: 48%; left: 3%; }
  .analysis-node-7 { top: 23%; left: 12%; }

  .generation-progress {
    width: min(100%, 34rem);
    height: 0.48rem;
    overflow: hidden;
    border-radius: 999px;
    background: #2A1718;
  }

  .generation-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-cta), var(--color-accent));
    transform-origin: left;
    animation: generation-fill 1.5s ease-out both;
  }

  .analysis-steps {
    width: min(100%, 34rem);
    gap: 0.4rem;
  }

  .analysis-step {
    border-color: var(--color-accent-border-soft);
    background: rgb(7 6 6 / 0.76);
  }

  .analysis-step-index,
  .analysis-step-status {
    color: var(--color-accent);
  }

  .report {
    gap: 1rem;
  }

  .report-header {
    gap: 0.45rem;
    padding: 0.2rem 0 0;
    text-align: center;
  }

  .report-title {
    color: var(--color-ink);
    font-size: clamp(2.15rem, 8vw, 3.65rem);
  }

  .report-banner {
    border-color: var(--color-accent-border-soft);
    background: linear-gradient(135deg, rgb(91 17 27 / 0.78), rgb(18 9 10 / 0.96));
  }

  .report-banner-eyebrow {
    color: var(--color-accent);
  }

  .report-banner-title {
    color: var(--color-ink);
    font-family: var(--font-display);
  }

  .report-summary {
    gap: 0.55rem;
  }

  .metric-card,
  .report-section,
  .report-disclaimer {
    border-color: var(--color-accent-border-soft);
    background: rgb(12 8 8 / 0.92);
    box-shadow: var(--shadow-soft);
  }

  .metric-card {
    min-height: 7.2rem;
    padding: 0.85rem;
  }

  .metric-card.average-card {
    border-color: var(--color-red-border);
    background: linear-gradient(145deg, rgb(91 17 27 / 0.62), rgb(12 8 8 / 0.94));
  }

  .metric-label,
  .metric-note,
  .section-description,
  .chart-description,
  .suggestion-text {
    color: var(--color-muted-foreground);
  }

  .metric-name,
  .section-title,
  .chart-title,
  .suggestion-title {
    color: var(--color-ink);
    font-family: var(--font-display);
  }

  .metric-score {
    color: var(--color-cta);
    font-family: var(--font-display);
  }

  .average-card .metric-score {
    color: var(--color-accent);
  }

  .report-section {
    gap: 0.8rem;
    padding: 0.85rem;
  }

  .section-heading {
    text-align: center;
  }

  .chart-grid {
    gap: 0.55rem;
  }

  .chart-card {
    border-color: var(--color-accent-border-soft);
    background: rgb(7 6 6 / 0.7);
  }

  .chart-card-accent {
    border-color: var(--color-accent-border);
  }

  .report-summary-sentence {
    margin: 0.15rem 0 0;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 0.92rem;
    line-height: 1.7;
    text-align: center;
  }

  .reading-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .reading-guide-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--color-muted-border-soft);
    border-radius: var(--radius-sm);
    background: rgb(7 6 6 / 0.58);
  }

  .reading-guide-card > .icon {
    color: var(--color-accent);
  }

  .reading-guide-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
  }

  .reading-guide-title,
  .reading-guide-text {
    margin: 0;
  }

  .reading-guide-title {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 0.88rem;
  }

  .reading-guide-text {
    color: var(--color-muted-foreground);
    font-size: 0.74rem;
    line-height: 1.55;
  }

  .balance-chart {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--color-muted-border-soft);
    border-radius: var(--radius-sm);
    background: rgb(7 6 6 / 0.62);
  }

  .balance-legend {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    color: var(--color-muted-foreground);
    font-size: 0.72rem;
  }

  .balance-legend-shadow {
    color: var(--color-cta);
  }

  .balance-legend-virtue {
    color: var(--color-accent);
  }

  .balance-row {
    display: grid;
    grid-template-columns: minmax(4.5rem, 1fr) minmax(8rem, 2fr) minmax(4.5rem, 1fr);
    align-items: center;
    gap: 0.6rem;
  }

  .balance-label {
    color: var(--color-foreground);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .balance-label-shadow {
    text-align: right;
  }

  .balance-label-virtue {
    text-align: left;
  }

  .balance-track {
    position: relative;
    height: 1.35rem;
    border: 1px solid var(--color-muted-border-soft);
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(201 24 59 / 0.13) 0 50%, rgb(214 162 78 / 0.13) 50% 100%);
  }

  .balance-track::after {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 50%;
    width: 1px;
    background: var(--color-muted-foreground);
    content: "";
    opacity: 0.6;
  }

  .balance-bar {
    position: absolute;
    top: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
  }

  .balance-bar-shadow {
    left: 0.25rem;
    width: var(--balance-size);
    max-width: calc(50% - 0.35rem);
    background: var(--color-cta);
  }

  .balance-bar-virtue {
    right: 0.25rem;
    width: var(--balance-size);
    max-width: calc(50% - 0.35rem);
    background: var(--color-accent);
  }

  .chart-empty {
    margin: 0;
    color: var(--color-muted-foreground);
    font-size: 0.8rem;
  }

  .rhythm-strip {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid var(--color-muted-border-soft);
    border-radius: var(--radius-sm);
    background: rgb(7 6 6 / 0.62);
  }

  .rhythm-bars {
    display: grid;
    grid-template-columns: repeat(35, minmax(0, 1fr));
    align-items: end;
    gap: 0.12rem;
    height: 7rem;
    padding: 0.35rem 0.25rem 0;
    border-bottom: 1px solid var(--color-muted-border-soft);
  }

  .rhythm-bar {
    display: block;
    min-height: 0.7rem;
    height: calc(0.7rem + var(--rhythm-level));
    border-radius: 0.2rem 0.2rem 0 0;
    background: linear-gradient(180deg, var(--color-cta), rgb(143 15 44 / 0.72));
  }

  .rhythm-bar:nth-child(3n) {
    background: linear-gradient(180deg, var(--color-accent), rgb(143 102 32 / 0.72));
  }

  .rhythm-scale {
    display: flex;
    justify-content: space-between;
    color: var(--color-muted-foreground);
    font-size: 0.65rem;
  }

  .radar-svg {
    min-height: 17rem;
  }

  .radar-ring,
  .radar-axis {
    stroke: rgb(214 162 78 / 0.34);
  }

  .radar-polygon {
    fill: rgb(201 24 59 / 0.28);
    stroke: var(--color-cta);
  }

  .chart-card-accent .radar-polygon {
    fill: rgb(214 162 78 / 0.2);
    stroke: var(--color-accent);
  }

  .radar-point {
    fill: var(--color-foreground);
    stroke: var(--color-cta);
  }

  .chart-card-accent .radar-point {
    stroke: var(--color-accent);
  }

  .radar-label {
    fill: var(--color-cta);
    stroke: var(--color-background);
    stroke-width: 3px;
    paint-order: stroke;
    stroke-linejoin: round;
    font-family: var(--font-display);
    font-weight: 700;
  }

  .chart-card-accent .radar-label {
    fill: var(--color-accent);
  }

  .chart-card-wide {
    grid-column: 1 / -1;
  }

  .radar-svg-personality {
    justify-self: center;
    width: min(100%, 32rem);
    min-height: 0;
  }

  .radar-label-personality {
    stroke-width: 4px;
  }

  .radar-label-name {
    font-weight: 700;
  }

  .radar-label-score {
    font-weight: 800;
  }

  .radar-grid-subdued .radar-ring {
    stroke: rgb(246 232 206 / 0.1);
  }

  .radar-grid-subdued .radar-axis {
    stroke: rgb(246 232 206 / 0.12);
  }

  .radar-divider {
    stroke: rgb(246 232 206 / 0.28);
    stroke-width: 1.5;
    stroke-dasharray: 5 6;
  }

  .radar-point-ring {
    fill: var(--color-foreground);
    stroke-width: 2.5;
  }

  .radar-polygon-personality {
    stroke: var(--color-accent);
    stroke-width: 2px;
  }

  .radar-svg-paired {
    justify-self: center;
    width: min(100%, 30rem);
    min-height: 22rem;
  }

  .radar-polygon-shadow {
    fill: rgb(201 24 59 / 0.22);
    stroke: var(--color-cta);
  }

  .radar-polygon-virtue {
    fill: rgb(214 162 78 / 0.18);
    stroke: var(--color-accent);
  }

  .radar-point-shadow {
    fill: var(--color-cta);
    stroke: var(--color-background);
  }

  .radar-point-virtue {
    fill: var(--color-accent);
    stroke: var(--color-background);
  }

  .radar-label-shadow {
    fill: var(--color-cta);
  }

  .radar-label-virtue {
    fill: var(--color-accent);
  }

  .paired-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .paired-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .paired-legend-item::before {
    width: 0.7rem;
    height: 0.16rem;
    border-radius: 999px;
    content: "";
  }

  .paired-legend-shadow {
    color: var(--color-cta);
  }

  .paired-legend-shadow::before {
    background: var(--color-cta);
  }

  .paired-legend-virtue {
    color: var(--color-accent);
  }

  .paired-legend-virtue::before {
    background: var(--color-accent);
  }

  .paired-radar-readout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.4rem;
  }

  .paired-radar-readout-item {
    display: grid;
    gap: 0.2rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-muted-border-chart);
    border-radius: var(--radius-sm);
    background: var(--color-background-softer);
  }

  .paired-readout-pair {
    color: var(--color-ink);
    font-size: 0.78rem;
    font-weight: 700;
  }

  .paired-readout-values {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.72rem;
  }

  .paired-readout-shadow {
    color: var(--color-cta);
    font-weight: 700;
  }

  .paired-readout-virtue {
    color: var(--color-accent);
    font-weight: 700;
  }

  .paired-readout-delta {
    color: var(--color-muted-foreground);
  }

  .paired-readout-arrow {
    color: var(--color-muted-foreground);
  }

  .table-scroll {
    border-color: var(--color-accent-border-soft);
    background: rgb(7 6 6 / 0.7);
  }

  .data-table {
    color: var(--color-foreground);
  }

  .data-table caption {
    color: var(--color-accent);
    font-family: var(--font-display);
  }

  .data-table th,
  .data-table td {
    border-color: var(--color-muted-border-faint);
  }

  .data-table thead th {
    color: var(--color-muted-foreground);
  }

  .data-table tbody th {
    color: var(--color-foreground);
    font-family: var(--font-display);
  }

  .score-bar {
    background: #3A1A1B;
  }

  .score-bar::after {
    background: linear-gradient(90deg, var(--color-cta), var(--color-accent));
  }

  .paired-table td:last-child,
  .trigger-table td:last-child {
    color: var(--color-muted-foreground);
  }

  .suggestion-list {
    counter-reset: suggestion;
  }

  .suggestion-card {
    position: relative;
    grid-template-columns: auto 1fr;
    border-color: var(--color-accent-border-soft);
    background: linear-gradient(135deg, rgb(91 17 27 / 0.4), rgb(12 8 8 / 0.9));
  }

  .suggestion-card::before {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--color-accent-border);
    border-radius: 50%;
    color: var(--color-accent);
    content: counter(suggestion);
    counter-increment: suggestion;
    font-family: var(--font-display);
    font-size: 0.85rem;
  }

  .suggestion-card > .icon {
    display: none;
  }

  .suggestion-title {
    color: var(--color-ink);
  }

  .report-disclaimer {
    border-color: var(--color-accent-border);
    background: rgb(91 17 27 / 0.28);
  }

  .report-disclaimer p {
    color: var(--color-foreground);
  }

  .report-actions .button-primary {
    background: linear-gradient(135deg, #7F0C24, #B31336);
  }

  .report-actions .button-secondary {
    border-color: var(--color-accent-border-soft);
  }

  .text-input {
    border-color: var(--color-accent-border);
    background: #FFFDF8;
    color: #211315;
  }

  .text-input::placeholder {
    color: #8B7770;
  }

  .text-input:hover {
    border-color: var(--color-accent);
  }

  .text-input:focus {
    border-color: var(--color-cta);
    box-shadow: 0 0 0 3px rgb(201 24 59 / 0.2);
  }

  .landing-hero .fine-print,
  .fine-print {
    color: var(--color-muted-foreground);
  }

  .table-scroll:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring-soft);
  }

  @keyframes generation-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  @media (max-width: 40rem) {
    .app-shell {
      padding: 0.5rem;
    }

    .landing-hero,
    .intro-hero,
    .question-view,
    .generating-view,
    .error-view {
      padding: 0.8rem;
    }

    .hero-title {
      font-size: clamp(2.5rem, 13vw, 4rem);
    }

    .hero-title-display {
      font-size: clamp(3rem, 17vw, 5.5rem);
    }

    .signal-orbit {
      width: min(100%, 18rem);
    }

    .orbit-node {
      width: 3.2rem;
      height: 3.2rem;
      font-size: 0.72rem;
    }

    .orbit-core {
      width: 4.3rem;
      height: 4.3rem;
      font-size: 1.9rem;
    }

    .stat-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .stat-item {
      padding: 0.55rem 0.2rem;
    }

    .stat-value {
      font-size: 1.2rem;
    }

    .stat-label {
      font-size: 0.62rem;
    }

    .mode-preview {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mode-preview-item {
      min-height: 4.6rem;
      padding: 0.65rem;
    }

    .mode-preview-title {
      font-size: 0.88rem;
    }

    .mode-preview-description {
      font-size: 0.68rem;
    }

    .question-prompt {
      font-size: 1.55rem;
    }

    .question-navigation {
      position: static;
      bottom: 0.4rem;
      z-index: 4;
      padding: 0.45rem;
      border: 1px solid var(--color-accent-border-soft);
      border-radius: 0.75rem;
      background: rgb(7 6 6 / 0.94);
      box-shadow: var(--shadow-deep);
      backdrop-filter: blur(10px);
    }

    .chart-grid,
    .report-summary {
      grid-template-columns: 1fr;
    }

    .reading-guide-grid {
      grid-template-columns: 1fr;
    }

    .balance-row {
      grid-template-columns: minmax(3.4rem, 1fr) minmax(6rem, 1.6fr) minmax(3.4rem, 1fr);
      gap: 0.35rem;
    }

    .balance-label {
      font-size: 0.62rem;
    }

    .rhythm-bars {
      gap: 0.08rem;
      height: 6rem;
    }

    .report-title {
      font-size: clamp(2rem, 10vw, 3.1rem);
    }
  }

  @media (max-width: 23.5rem) {
    .landing-topbar {
      font-size: 0.62rem;
    }

    .hero-title {
      font-size: 2.35rem;
    }

    .hero-title-display {
      font-size: clamp(2.8rem, 15vw, 4.2rem);
    }

    .signal-orbit {
      width: 14.5rem;
    }

    .orbit-node {
      width: 2.8rem;
      height: 2.8rem;
      font-size: 0.64rem;
    }

    .orbit-core {
      width: 3.8rem;
      height: 3.8rem;
      font-size: 1.7rem;
    }

    .stat-value {
      font-size: 1.05rem;
    }

    .stat-label {
      font-size: 0.56rem;
    }

    .mode-preview {
      gap: 0.35rem;
    }

    .mode-preview-item {
      padding: 0.55rem;
    }

    .mode-preview-title {
      font-size: 0.8rem;
    }

    .mode-preview-description {
      font-size: 0.62rem;
    }

    .question-index {
      font-size: 1.9rem;
    }

    .answer-option {
      padding: 0.65rem;
    }

    .answer-marker {
      width: 2rem;
      height: 2rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .generation-progress-fill {
      animation: none;
      transform: none;
    }
  }

  .report-actions-top {
    padding: 0.9rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgb(214 162 78 / 0.28);
    border-radius: var(--radius-md);
    background: rgb(18 9 10 / 0.72);
  }

  .report-actions-top .button {
    flex: 1 1 7.5rem;
  }

  .share-sheet-backdrop {
    position: fixed;
    z-index: 40;
    inset: 0;
    display: grid;
    place-items: end center;
    padding: 0;
    background: rgb(7 6 6 / 0.82);
    backdrop-filter: blur(10px);
    overscroll-behavior: contain;
  }

  .share-sheet-backdrop[hidden] {
    display: none;
  }

  .share-sheet {
    width: min(100%, 34rem);
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    padding: 1.15rem 1.15rem 1.4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgb(214 162 78 / 0.42);
    border-bottom: 0;
    border-radius: 1.2rem 1.2rem 0 0;
    background: #F8F0E2;
    box-shadow: 0 -18px 60px rgb(0 0 0 / 0.55);
    color: #211315;
  }

  .share-sheet :focus-visible {
    outline-color: #7A1F2B;
  }

  .share-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .share-sheet-icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    background: #E9B957;
    color: #4B1B13;
  }

  .share-sheet-icon .icon {
    width: 1.4rem;
    height: 1.4rem;
  }

  .share-sheet-title {
    margin: 0.7rem 0 0;
    color: #211315;
    font-family: var(--font-display);
    font-size: 1.45rem;
    text-align: center;
  }

  .share-sheet-lead {
    margin: 0.4rem 0 0.9rem;
    color: #5B4544;
    font-size: 0.84rem;
    line-height: 1.6;
    text-align: center;
  }

  .share-sheet-stage {
    display: grid;
    place-items: center;
    min-height: 9rem;
    padding: 0.6rem;
    border: 1px dashed rgb(107 74 20 / 0.42);
    border-radius: var(--radius-md);
    background: rgb(33 17 19 / 0.06);
  }

  .share-sheet-stage-status {
    margin: 0;
    color: #6B5554;
    font-size: 0.82rem;
    text-align: center;
  }

  .share-card-image {
    display: block;
    width: 100%;
    max-width: 17rem;
    height: auto;
    border-radius: 0.55rem;
    box-shadow: 0 10px 30px rgb(33 17 19 / 0.3);
  }

  .share-sheet-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.65rem 0 0;
    color: #5B4544;
    font-size: 0.8rem;
    text-align: center;
  }

  .share-sheet-hint .icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
  }

  .share-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
  }

  .share-sheet-actions .button {
    flex: 1 1 9rem;
    touch-action: manipulation;
  }

  .share-sheet-status {
    min-height: 1.2rem;
    margin: 0.7rem 0 0;
    color: #5B4544;
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
  }

  .share-sheet-status[data-state="done"] {
    color: #1F6B45;
  }

  .share-sheet-status[data-state="error"] {
    color: #A3231F;
  }

  @media (max-width: 23.5rem) {
    .share-sheet {
      padding: 1rem 0.85rem 1.25rem;
    }

    .share-card-image {
      max-width: 100%;
    }

    .share-sheet-actions .button {
      flex: 1 1 100%;
    }
  }
}