/* Calctric uses one charcoal appearance for every device preference. */
:root,
.experience-page {
  color-scheme: dark;
  --paper: #191a1c;
  --ink: #f1f0eb;
  --muted: #b9bbbd;
  --orange: #e6a16b;
  --line: #3e4246;
  --dark: #131416;
}

/* Fixed, decorative light adds depth without moving behind the content. */
.experience-page { isolation: isolate; }
.experience-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 82% 18%, #8996aa26, transparent 58%),
    radial-gradient(ellipse at 28% 78%, #b3865420, transparent 56%),
    linear-gradient(145deg, #151618, #202225 52%, #151719);
}

/* Shared navigation, legal pages and native form controls. */
h1 em,
.feature-copy li::before { color: var(--orange); }
.button,
.experience-page .nav-cta {
  background: #ececea;
  color: #202224;
  border-color: #ececea;
}
.button:hover,
.experience-page .nav-cta:hover { background: #d8d9d7; }
.nav-cta { border-color: #7c8287; }
.skip { background: #ececea; color: #202224; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.tool-details summary:focus-visible,
.feedback-panel > summary:focus-visible,
.demo-transcript summary:focus-visible { outline-color: #efac76; }
.regional-note { border-color: var(--orange); }

/* Keep the app's recorded colours intact; only its surroundings change. */
.scroll-story,
.scroll-story[data-current="guide"] {
  background: transparent;
  color: var(--ink);
}
/* A single green chapter accents the otherwise charcoal walkthrough. */
.scroll-story[data-current="voltage"] { background: #202224; }
.scroll-story[data-current="bending"] { background: #233020; color: var(--ink); }
.story-viewport::before,
.story-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s;
}
.story-viewport::before { background: radial-gradient(ellipse at 76% 48%, #a3adbd20, transparent 68%); }
.scroll-story[data-current="voltage"] .story-viewport::before { opacity: 1; }
.scroll-story[data-current="bending"] .story-viewport::after { opacity: 1; }
.story-viewport::after {
  background:
    radial-gradient(ellipse at 78% 36%, #8caa5b30, transparent 65%),
    linear-gradient(125deg, #101c1966, transparent 58%, #10171160);
}
.story-content { z-index: 1; }
.story-step .eyebrow,
.scroll-story[data-current="bending"] .story-step .eyebrow { color: var(--orange); }
.story-tags,
.stage-counter,
.scroll-story[data-current="bending"] .story-tags,
.scroll-story[data-current="bending"] .stage-counter { color: var(--muted); }
.story-device-backdrop { background: radial-gradient(ellipse, #b68a5820, #7d89952b 38%, transparent 72%); }
.scroll-story[data-current="bending"] .story-device-backdrop {
  background: radial-gradient(ellipse, #4a5b3690, transparent 70%);
}
.stage-phone {
  border-color: #777b7e;
  box-shadow: 0 32px 65px -20px #0009, 0 0 0 1px #c0c4c71a;
}
.story-nav a { color: var(--muted); opacity: 1; }
.story-nav a:hover,
.story-nav a[aria-current="step"] { color: var(--ink); }
.story-nav a[aria-current="step"] { border-color: var(--orange); }
.scroll-cue { color: var(--muted); opacity: 1; }
.experience-page .motion-toggle { border-color: #8c9195; }

/* Specifications, download and support share the same quiet surfaces. */
.details-list,
.details-list > details,
.feedback-copy .detail-note { border-color: var(--line); }
.detail-index,
.detail-plus,
.download-note { color: var(--muted); }
.download-card { background: radial-gradient(ellipse at 96% 0%, #ad875026, transparent 62%), linear-gradient(125deg, #2d3034, #24272a); border-color: #484d52; color: var(--ink); }
.download-card .eyebrow,
.download-card p:not(.eyebrow) { color: var(--muted); }
.experience-page .download-card .button { background: #ececea; color: #202224; }
.experience-page .download-card .button:hover { background: #d8d9d7; }
.feedback-panel { background: linear-gradient(145deg, #2c2e32, #222427 72%); border-color: #474c51; }
.experience-page .feedback-panel form { border-color: #474c51; }
.feedback-panel select,
.feedback-panel textarea,
.feedback-panel input[type="text"],
.feedback-panel input[type="email"] {
  background: #191b1e;
  border-color: #7c8287;
  color: var(--ink);
}
.feedback-panel input::placeholder,
.feedback-panel textarea::placeholder { color: #adb1b5; opacity: 1; }
.feedback-panel select:invalid { color: #adb1b5; }
.feedback-panel select option { background: #191b1e; color: var(--ink); }

.page-tape,
.page-tape.on-dark {
  --tape-ink: #b0b5b9;
  --tape-tick: #afb6bb70;
  --tape-accent: #e0a36f;
}
.tape-section-name { background: #292c2f; border-color: #677077; color: var(--ink); }