:root {
  color: #303846;
  background: #f7f7f5;
  color-scheme: light;
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  /* Canonical product colors. */
  --ee-bg: #f7f7f5;
  --ee-paper: #ffffff;
  --ee-ink: #171b24;
  --ee-text: #303846;
  --ee-secondary: #657080;
  --ee-caption: #87909c;
  --ee-divider: #e9ebee;
  --ee-divider-strong: #dce0e5;
  --ee-sidebar: #171b24;
  --ee-sidebar-raised: #252a34;
  --ee-coral: #f05a3a;
  --ee-coral-hover: #df4d30;
  --ee-success: #168566;
  --ee-warning: #bd821b;
  --ee-danger: #cf4d55;
  --ee-purple: #7657ad;
  --ee-success-soft: #eaf7f1;
  --ee-warning-soft: #fff5df;
  --ee-danger-soft: #fff0f1;
  --ee-purple-soft: #f2eef9;
  --ee-neutral-soft: #f2f4f6;

  /* Compatibility aliases for existing screens during gradual migration. */
  --ee-canvas: var(--ee-bg);
  --ee-surface: var(--ee-paper);
  --ee-surface-muted: #fbfbfa;
  --ee-line: var(--ee-divider);
  --ee-line-strong: var(--ee-divider-strong);
  --ee-shell: var(--ee-sidebar);
  --ee-shell-raised: var(--ee-sidebar-raised);
  --ee-shell-text: #f7f5f1;
  --ee-shell-muted: #aeb5c0;
  --ee-accent: var(--ee-coral);
  --ee-accent-strong: var(--ee-coral-hover);
  --ee-muted: var(--ee-secondary);
  --ee-subtle: var(--ee-caption);
  --ee-border: var(--ee-divider-strong);
  --ee-forest: var(--ee-success);
  --ee-forest-soft: var(--ee-success-soft);
  --ee-coral-soft: #fff3ef;
  --ee-amber: var(--ee-warning);
  --ee-amber-soft: var(--ee-warning-soft);

  /* Typography. */
  --ee-type-page-size: 31px;
  --ee-type-page-line: 38px;
  --ee-type-section-size: 16px;
  --ee-type-section-line: 24px;
  --ee-type-body-size: 14px;
  --ee-type-body-line: 22px;
  --ee-type-meta-size: 12px;
  --ee-type-meta-line: 18px;

  /* Spacing, shape and elevation. */
  --ee-space-1: 4px;
  --ee-space-2: 8px;
  --ee-space-3: 12px;
  --ee-space-4: 16px;
  --ee-space-5: 20px;
  --ee-space-6: 24px;
  --ee-space-8: 32px;
  --ee-space-10: 40px;
  --ee-radius-control: 8px;
  --ee-radius-surface: 12px;
  --ee-shadow-surface: 0 6px 18px rgba(23, 27, 36, 0.035);
  --ee-shadow-overlay: 0 18px 48px rgba(23, 27, 36, 0.18);
  --ee-focus-ring: 0 0 0 3px rgba(240, 90, 58, 0.24);
}

html { background: var(--ee-bg); }
body { background: var(--ee-bg); color: var(--ee-text); font-family: inherit; font-size: var(--ee-type-body-size); font-weight: 500; line-height: var(--ee-type-body-line); }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; box-shadow: var(--ee-focus-ring); }

*{box-sizing:border-box}body{margin:0}main{width:100%;max-width:400px;margin:64px auto;padding:24px}header{font-size:18px;font-weight:700;color:var(--ee-ink)}h1{font-size:var(--ee-type-page-size);margin:32px 0 24px}form{display:grid;gap:12px}label{font-weight:600}input{width:100%;min-width:0;min-height:42px;padding:10px;border:1px solid var(--ee-divider-strong);border-radius:6px;background:var(--ee-paper);font:inherit}button{min-height:42px;margin-top:12px;background:var(--ee-coral);color:var(--ee-paper);border:0;border-radius:6px;font:inherit;font-weight:700;cursor:pointer}button:hover{background:var(--ee-coral-hover)}@media(max-width:480px){main{margin-top:24px;padding:24px}}