/* Soft Workshop: peach-to-lilac wash, rounded white cards with soft shadows, violet and coral accents. */
:root {
  --bg: #fbefe9;
  --surface: #ffffff;
  --ink: #2a2440;
  --muted: #6c6683;
  --line: #e7def0;
  --accent: #7b5cf0;
  --accent-ink: #ffffff;
  --accent-2: #ff8a65;
  --ok: #2f9e74;
  --bad: #e5604b;
  --font-display: "Deck Grotesk", var(--cjk), system-ui, sans-serif;
  --font-body: "Deck Sans", var(--cjk), system-ui, sans-serif;
  --radius: 30px;
  --pad: 140px;
  --chart-colors: #7b5cf0, #ff8a65, #4fb3a9, #f2b84b, #b8a9f5;
  --outer: #241e38;
}
.deck-stage > section { background: linear-gradient(135deg, #fdeee6 0%, #f6ebf4 55%, #e9e6fb 100%); }
section h1, section h2 { font-weight: 600; letter-spacing: -0.03em; }
section .kicker { color: var(--accent); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.06em; }
section em { color: var(--accent); font-style: normal; }
section[data-layout="cover"]::after { content: ""; position: absolute; right: 140px; top: 140px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd3c4, var(--accent-2)); opacity: 0.85; }
section[data-layout="bullets"] li { background: var(--surface); border-radius: var(--radius); padding: 22px 32px 22px 92px; box-shadow: 0 10px 30px rgb(60 40 120 / 0.08); }
section[data-layout="bullets"] li::before { left: 32px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--accent); }
section[data-layout="bullets"] ol li::before { color: #fff; background: var(--accent); width: 40px; height: 40px; left: 28px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; font-size: 20px; border-radius: 50%; }
.stat { border: 0; background: var(--surface); border-radius: var(--radius); padding: 36px 40px; box-shadow: 0 10px 30px rgb(60 40 120 / 0.08); }
.stat b { color: var(--accent); font-family: var(--font-display); font-weight: 600; }
section[data-layout="compare"] .col, .quiz li, ol.sort li, .match .target { border: 0; box-shadow: 0 10px 30px rgb(60 40 120 / 0.08); }
section[data-layout="compare"] .col:last-child { outline: 3px solid var(--accent); }
.match .target { border: 2px dashed var(--line); box-shadow: none; background: rgb(255 255 255 / 0.6); }
.match .item { background: var(--accent); border-radius: 999px; }
ol.sort li::before { background: var(--accent); }