/* Look: Original, refined. Today's cream, terracotta and olive, made quieter: hairline borders, no blobs, outlined selections.
   Switch on with THEME=classic. Fonts are self-hosted (static/fonts). Generated; edit the colours in one place. */
@font-face { font-family: "Figtree"; src: url("../../fonts/figtree.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }
:root {
  --color-bg: #f5efe5;
  --color-surface: #fbf8f2;
  --color-text: #24201b;
  --color-divider: #e5dccd;
  --color-accent: #a9522a;
  --color-accent-2: #6d6458;
  --font-heading: "Figtree", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Figtree", system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #24201b 6%, transparent);
  --shadow-md: 0 4px 16px color-mix(in srgb, #24201b 7%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #24201b 9%, transparent);
  --color-accent-100: #f3e4d8;
  --color-accent-200: #e0c0ac;
  --color-accent-300: #ce9b81;
  --color-accent-400: #bc7959;
  --color-accent-500: #a9522a;
  --color-accent-600: #904624;
  --color-accent-700: #76391d;
  --color-accent-800: #5d2d17;
  --color-accent-900: #442111;
  --color-accent-2-100: #ece4d6;
  --color-accent-2-200: #cec7ba;
  --color-accent-2-300: #b0a99e;
  --color-accent-2-400: #928c82;
  --color-accent-2-600: #6d6458;
  --color-accent-2-700: #24201b;
  --color-accent-2-800: #38412f;
  --color-accent-2-900: #39352f;
  --color-neutral-100: #fbf8f2;
  --color-neutral-200: #e5dccd;
  --color-neutral-300: #cec5b8;
  --color-neutral-500: #8f877b;
  --color-neutral-600: #6d6458;
  --color-neutral-700: #504940;
  --color-neutral-800: #3a342d;
  --color-neutral-900: #24201b;
}

/* Calm surfaces: hairline borders, soft shadows, no decoration. */
body { background: #f5efe5; }
.site-header { background: #f5efe5; border-bottom: 1px solid #e5dccd; }
.deco { display: none; }
.display { font-size: 44px; letter-spacing: -0.03em; line-height: 1.08; }
.lede-strong { color: #24201b; font-weight: 500; }
.card, .step-card, .progress { background: #fbf8f2; border: 1px solid #e5dccd; box-shadow: var(--shadow-sm); }
.card { border-radius: var(--radius-lg); }
.progress { border-radius: var(--radius-lg); }
.progress-bar { height: 4px; background: #e5dccd; }
.progress-step.is-done .progress-bar { background: #a9522a; }
.progress-num, .card-kicker { color: #6d6458; letter-spacing: 0.06em; }
.btn, .seg, .input, .topic-input { border-radius: 10px; }
.btn-primary, a.btn-primary, a.btn-primary:hover { background: #a9522a; color: #ffffff; }
.btn-primary:hover { background: var(--color-accent-600); }
.chip { border-radius: 999px; border: 1px solid #e5dccd; background: #fbf8f2; color: #24201b; font-weight: 500; }
.topic-input { background: #f5efe5; border: 1px solid #e5dccd; color: #24201b; }
.usage-note, .tip-box { background: #ece4d6; color: #24201b; border: 1px solid #e5dccd; }
.usage-note svg, .tip-box svg { color: #a9522a; }
.tabs .seg-opt[aria-current="page"], .tabs .seg-opt[aria-current="page"]:hover,
.filter-seg .seg-opt[aria-selected="true"], .filter-seg .seg-opt[aria-selected="true"]:hover,
.method-seg .seg-opt[aria-selected="true"] { background: #24201b; color: #f5efe5; }
.nav .plan-chip { background: #ece4d6; color: #24201b; border: 1px solid #e5dccd; }
.plan-chip strong { color: #a9522a; }
.user-chip { background: #fbf8f2; border: 1px solid #e5dccd; }
.user-avatar, .count-pill { background: #a9522a; color: #ffffff; }
.brand-mark { background: #a9522a; color: #ffffff; box-shadow: none; }
.brand-dot { background: #6d6458; border-color: #f5efe5; }
.tag-accent-2, .tag-accent { background: #ece4d6; color: #6d6458; }
/* Platforms: the chosen one is outlined, not filled with colour. */
.platform-tile { background: #fbf8f2; color: #24201b; border: 1px solid #e5dccd; }
.platform-tile:hover { border-color: var(--color-neutral-300); box-shadow: var(--shadow-sm); }
.platform-tile[aria-checked="true"] { background: #f3e4d8; color: #24201b; border: 1.5px solid #a9522a; box-shadow: 0 0 0 3px color-mix(in srgb, #a9522a 14%, transparent); }
.platform-tile[aria-checked="true"] .tile-kind, .platform-tile[aria-checked="true"] .tile-maker, .tile-kind { color: #6d6458; }
.tile-check { color: #a9522a; }
.pick-ui { border: 1.5px solid var(--color-neutral-300); background: #fbf8f2; border-radius: 7px; }
.pick-box:checked + .pick-ui, .tile-wrap.is-on .pick-box:checked + .pick-ui { background: #a9522a; border-color: #a9522a; color: #ffffff; }
.tile-wrap.is-on .pick-ui { border-color: #a9522a; }
.pick-hint { color: #6d6458; }
.compare-bar { background: #ece4d6; color: #24201b; border: 1px solid #e5dccd; }
.site-footer { color: #6d6458; }


/* The prompt panel (calm dark). Colours are re-pointed inside the panel only. */
.output-panel {
  --color-bg: #f5efe5; --color-accent-2-800: #38412f; --color-accent-2-700: #4b5541; --color-accent-2-600: #767c6a;
  --color-accent-2-100: #f5efe5; --color-accent-2-200: #c9cfbd; --color-accent-2-300: #c9cfbd; --color-accent-2-900: #404836;
  --color-accent-300: #e9b48f; --color-accent-400: #e9b48f;
  background: #38412f; color: #f5efe5; border: 1px solid #4b5541; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.output-panel .output-head, .output-panel .output-foot { border-color: #4b5541; }
.output-panel .status-pill { background: #474f3e; color: #c9cfbd; }
.output-panel .btn-primary { background: #a9522a; color: #ffffff; }
.output-panel .guest-strip { background: #414a38; color: #f5efe5; border-top: 1px solid #4b5541; }
.output-panel .guest-strip a { color: #e9b48f; }
.output-panel .prompt-editor { color: #f5efe5; background: #3e4634; border: 1px solid #4b5541; }
.output-panel .output-tools .btn, .output-panel .copy-btn, .output-panel .compare-copy { border-width: 1px; }
.output-panel .output-tools .refine-go { background: #a9522a; border-color: #a9522a; color: #ffffff; }


/* Layout: two columns, idea on the left, prompt on the right (as today). */
.hero { padding-top: 48px; padding-bottom: 32px; }

@media (max-width: 640px) { .display { font-size: 34px; } }