:root {
  --ink: #f5f8f6;
  --muted: #aebdc6;
  --paper: #070a0f;
  --panel: #10171f;
  --line: #283740;
  --accent: #ff3cac;
  --accent-dark: #d72891;
  --shadow: 0 20px 48px rgba(0, 0, 0, .3);
}
html { color: var(--ink); background: var(--paper); }
body { background: radial-gradient(circle at 80% -6%, #2a1730 0, transparent 29%), radial-gradient(circle at 10% 39%, #10212b 0, transparent 31%), var(--paper); }
.topbar { background: #05080d; border-bottom-color: #253239; box-shadow: 0 10px 32px #0007; }
.brand-mark { border: 1px solid #5b3154; box-shadow: 0 0 18px #ff3cac36; }
.brand-type strong { color: #f8fbf6; }
.brand-type small, .local-badge { color: #aebdc6; }
.top-actions select { background: #151e27; border-color: #3b4c54; color: #f5f8f6; }
.ghost { background: #151e27; border-color: #3b4c54; color: #f5f8f6; }
.ghost:hover { background: #30202e; border-color: #db479f; }
.intro { background: linear-gradient(118deg, #111a23 0%, #0d151c 55%, #271823 100%); border-color: #2c3b3d; box-shadow: 0 22px 54px #0005; }
.intro::before { background: radial-gradient(circle at 82% 2%, #ff3cac1e, transparent 37%), linear-gradient(114deg, transparent 70%, #3c1a3c55); }
.eyebrow { color: #ff3cac; }
h1 { color: #f8fbf6; }
h1 em { color: #ff3cac; }
.intro-copy { color: #b2c1c9; }
.step-chip { color: #dbe7df; background: #271a29df; border-color: #6a3c5d; box-shadow: 0 12px 29px #0004; }
.step-chip span { color: #ff3cac; }
.step-chip i { color: #9b8298; }
.visual-card { border-color: #fff1fa; box-shadow: 0 18px 33px #0008; }
.visual-card-back { background: linear-gradient(145deg, #29316c, #6a4c9f 59%, #241a3e); }
.visual-card-front { background: linear-gradient(135deg, #ff9fdf, #ff56bd 60%, #c92592); }
.visual-sun { background: #c0a7ff; }
.visual-hill { background: #191a39; }
.visual-glow { background: #ff8bd699; }
.visual-play { background: #1a0b19; box-shadow: 0 9px 22px #6a1d5480; }
.visual-play::after { border-left-color: #ff3cac; }
.visual-trail { background: #ff3cac; opacity: .72; }
.mode-card { background: #121b23; border-color: #2a3941; color: #f5f8f6; box-shadow: 0 12px 29px #0004; }
.mode-card:hover { border-color: #d14f9f; background: #251b2a; box-shadow: 0 17px 38px #0007; }
.mode-card.active { background: linear-gradient(115deg, #342033, #121b23 78%); border-color: #ed5bab; box-shadow: inset 0 0 0 1px #ff3cac3b, 0 0 27px #ff3cac1a; }
.mode-card small { color: #b2c1c9; }
.mode-icon { background: #3b2038; color: #ff3cac; }
.mode-card.active .mode-icon { background: #ff3cac; color: #1c0a18; box-shadow: 0 0 22px #ff3cac45; }
.mode-arrow { color: #8fa2a8; }
.mode-card.active .mode-arrow { color: #ff3cac; }
.panel, .stage-panel { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
.panel-section { border-bottom-color: var(--line); }
.section-heading h2, .stage-top h2, .selection-panel h3 { color: #f5f8f6; }
.section-heading p { color: #aebdc6; }
.step-number { background: #49243d; color: #ff3cac; }
.field-label { color: #d5e1e4; }
.field-label span { color: #aebdc6; }
.panel input[type=text], .field-select { background: #17212a; border-color: #35444c; color: #f5f8f6; }
.panel input[type=text]::placeholder { color: #83949f; }
.panel input[type=text]:focus, .field-select:focus { border-color: #f55eb5; box-shadow: 0 0 0 3px #ff3cac34; }
.upload-box { background: linear-gradient(145deg, #2a1c2a, #131e24); border-color: #995176; color: #f5f8f6; }
.upload-box:hover, .upload-inline:hover { background: #372237; border-color: #ff3cac; }
.upload-icon { color: #ff3cac; }
.upload-box small, .helper { color: #aebdc6; }
.scenario-card { background: #17222b; border-color: #32414a; color: #f5f8f6; }
.scenario-card:hover { border-color: #d4589d; }
.scenario-card.active { background: #312235; border-color: #e665ab; box-shadow: inset 0 0 0 1px #ff3cac42; }
.scenario-card .scenario-symbol { background: #41263c; color: #ff3cac; }
.scenario-meta { color: #aebdc6; }
.scenario-card .chevron { color: #a8b7bd; }
.photo-item { background: #17222b; border-color: #32414a; }
.photo-item .photo-name { color: #e3ebed; }
.photo-controls button { background: #26333d; border-color: #425159; color: #e3ebed; }
.photo-controls button:hover { border-color: #ff3cac; color: #ff3cac; }
.stage-switch { background: #1d2932; }
.stage-switch button { color: #aebdc6; }
.stage-switch button.active { background: #ff3cac; color: #1c0a18; box-shadow: 0 2px 8px #0004; }
.stage-shell { background: radial-gradient(circle at 50% 23%, #2a1b35 0, #0d1820 51%, #0a1118 100%); border-color: #2d3d40; }
.stage-shell canvas { background: #0a1118; box-shadow: 0 24px 54px #000a, 0 0 0 1px #75536a; }
.stage-hint { background: #060b0feb; border: 1px solid #705061; color: #f5f8f6; box-shadow: 0 9px 24px #0008; }
.stage-footer { color: #aab9c1; }
.tool-button { background: #17222a; border-color: #32414a; color: #d5e1e4; }
.tool-button:hover { background: #352235; border-color: #e357a4; }
.tool-button span { color: #ff3cac; }
.upload-inline { background: #17222a; border-color: #78516e; color: #d5e1e4; }
.divider { border-color: #2d3b43; }
.selection-panel input[type=range] { accent-color: #ff3cac; }
.selection-panel input[type=color] { background: #17222a; border-color: #425159; }
.text-danger { color: #ff948b; }
.primary { background: linear-gradient(135deg, #ff8bd5, #ff3cac); color: #1c0a18; box-shadow: 0 11px 24px #ff3cac32; }
.primary:hover { background: linear-gradient(135deg, #ffa3e0, #ff3cac); color: #1b0717; box-shadow: 0 15px 32px #ff3cac47; }
.secondary { background: #1a252e; border-color: #3a4b54; color: #eef4f4; }
.secondary:hover { background: #322431; border-color: #d65c9f; color: #fff; }
footer { border-top-color: #283740; color: #98abb5; }
footer span:first-child { color: #f5f8f6; }
:focus-visible { outline-color: #ff3cac; }
@media (max-width: 760px) {
  .topbar { background: #05080d; }
  .intro { border-color: #2c3b3d; }
}