*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg:          #fff6f4;
  --color-bg-soft:     #fff9f8;
  --color-surface:     rgba(255, 253, 252, 0.92);
  --color-surface-solid:#ffffff;
  --color-border:      #e7dcef;
  --color-border-strong:#d7c8e5;
  --color-border-focus:#8c4ed8;
  --color-text:        #302541;
  --color-text-muted:  #7d738d;
  --color-accent:      #6d38c3;
  --color-accent-strong:#ff6c46;
  --color-accent-text: #ffffff;

  --color-danger:      #cf4b4b;
  --color-danger-bg:   #fff0f0;
  --color-danger-border:#f3c8ce;
  --color-success:     #2e8962;
  --color-success-bg:  #eef9f4;
  --color-success-border:#bee4d1;

  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --shadow:    0 24px 60px rgba(139, 91, 145, .12), 0 10px 26px rgba(255, 156, 121, .10);
  --shadow-soft: 0 14px 34px rgba(124, 86, 138, .08);

  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-up {
  animation: fadeUp .3s ease both;
}

.hidden { display: none !important; }

.screen {
  width: 100%;
  display: none;
}

.screen.active {
  display: block;
  animation: fadeUp .3s ease both;
}

.panel-eyebrow {
  color: #5f556f;
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}