:root { color-scheme: dark; } /* tells phone browsers the page is already dark */
/* Samsung Internet only skips its own dark-mode recoloring when the site has a
   dark-mode rule of its own. Our design is always dark, so this rule changes nothing visible. */
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
/* Dark glass + orange trial theme for /motion (inspired by the user's reference).
   Remove the <link> to this file to go back to mint. */
:root {
  --ember: #ff8a2a;
  --ember-deep: #f2701a;
  --night: #0f0b09;
  --on-ember: #1a0f08;
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.1);
  --glass-line: rgba(255,255,255,.13);
  --honey: #ff8a2a;
  --honey-deep: #f2701a;
  --honey-soft: rgba(255,138,42,.14);
  --mint: #ffa24d;
  --mint-soft: rgba(255,138,42,.14);
  --ink: #fbf3ec;
  --ink-2: #c7b6a8;
  --line: rgba(255,255,255,.13);
  --bg: #120d0a;
  --bg-grad: radial-gradient(120% 70% at 85% 0%, rgba(255,120,30,.22), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(255,100,20,.14), transparent 60%), linear-gradient(180deg, #17110d 0%, #0f0b09 100%);
  --card: rgba(255,255,255,.06);
  --lemon: #ffb547;
  --ready: #ff8a2a;
  --shadow: 0 12px 34px rgba(0,0,0,.45);
}
body { background-color: var(--night); }
nav.top { background: rgba(18,13,10,.72); border-bottom: 1px solid var(--glass-line); }
.preview-tag { color: var(--on-ember); }

/* Glass surfaces */
.card, .panel, .feat > div, .toast, .chip, .cam, .rs-tile, .rs-card, .btn-ghost, .btn-round, input, select {
  background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink);
}
.btn-ghost:hover { background: var(--glass-2); border-color: rgba(255,255,255,.25); }
input:focus { border-color: var(--ember); box-shadow: 0 0 0 4px rgba(255,138,42,.25); }
input::placeholder { color: #8f8078; }

/* Orange: buttons, badges, icons */
.btn-primary, .btn-honey, .btn-mint { background: linear-gradient(180deg, #ffa04a, #f2701a); color: var(--on-ember); box-shadow: 0 8px 24px rgba(255,120,30,.35); }
.btn-primary:hover, .btn-honey:hover, .btn-mint:hover { background: linear-gradient(180deg, #ffad60, #ff7a1f); }
.pill, .pill-mint { background: rgba(255,138,42,.16); color: #ffb06a; border: 1px solid rgba(255,138,42,.35); }
.logo-mark, .intro-brand .mark, .bell, .beat .n, .feat .ic, .shop-avatar, .ph-shop i, .rs-fork { background: linear-gradient(180deg, #ffa04a, #f2701a); color: var(--on-ember); }
.logo-mark svg, .intro-brand .mark svg, .bell svg, .rs-fork .icon { stroke: var(--on-ember); }
.feat > div:first-child { background: linear-gradient(160deg, rgba(255,138,42,.28), rgba(255,138,42,.08)); }
.hero h1 em { color: var(--ember); background: none; }
.ticks span::before { color: var(--ember); }
.story-dots i { background: rgba(255,255,255,.18); }
.story-dots i.on { background: var(--ember); }
.stars svg { fill: rgba(255,255,255,.14); }
.blob { background: radial-gradient(circle, rgba(255,138,42,.45) 0%, rgba(255,90,20,.18) 50%, transparent 72%); }
.price-wrap { background: conic-gradient(from var(--ang), var(--ember), rgba(255,255,255,.08), var(--lemon), var(--ember)); }
.price-wrap > * { background: #17110d; }
.sweep { box-shadow: 0 0 16px 4px rgba(255,138,42,.7); }
.ring .track { stroke: rgba(255,255,255,.12); }
.ring .bar { stroke: var(--ember); }
@media (max-width: 860px) { .story-sticky { background: rgba(16,11,9,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(#000 calc(100% - 16px), transparent); mask-image: linear-gradient(#000 calc(100% - 16px), transparent); } }

/* Phones */
.ph { background: #070505; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,120,30,.12), inset 0 0 0 2px rgba(255,255,255,.12); }
.ph-notch { background: #070505; }
.rs { color: var(--ink); }
.rs-sound { background: var(--glass-2); border: 1px solid var(--glass-line); }
.rs-sound i { background: var(--ember); color: var(--on-ember); }
.rs-tile.mint { background: linear-gradient(160deg, #ffa04a, #f2701a); color: var(--on-ember); border: 0; }
.rs-timer circle:not(.arc) { stroke: rgba(255,255,255,.12); }
.rs-timer .arc { stroke: var(--ember); }
.rs-car .box { border-color: #8f8078; }
.rs-input .caret { background: var(--ember); }
.rs-honey { background: linear-gradient(180deg, #ffa04a, #f2701a); color: var(--on-ember); }
.rs-black { background: var(--ember); color: var(--on-ember); }
.rs-stars .icon { fill: var(--ember); stroke: var(--ember); }
/* Ready screen: full orange, dark text, like a lit-up pager */
.rs-ready { background: radial-gradient(circle at 50% 30%, #ffb062, #ff8a2a 55%, #e8641a); color: var(--on-ember); }
@keyframes rs-flash { to { background: #ffc285; } }
.rs-ready .rs-muted, .rs-ready p { color: var(--on-ember); }
.rs-bell { background: var(--on-ember); }
.rs-bell svg { stroke: var(--ember); }
.rs-bell .waves span { border-color: var(--on-ember); }
.rs-btn { background: var(--on-ember); color: #fff; }

/* Fixes after the first look */
.feat > div:nth-child(4) { background: linear-gradient(160deg, rgba(255,181,71,.22), rgba(255,181,71,.06)); }
.toast { background: rgba(28,20,15,.88); }
.vs > div { background: var(--glass); border: 1px solid var(--glass-line); }
details { border-color: var(--glass-line); }

/* Ready screen must stay solid while it flashes (a background-colour flash made it see-through) */
.rs-ready { background-color: #ff8a2a; }
@keyframes rs-flash { from { filter: brightness(1); } to { filter: brightness(1.15); } }

/* Intro pager: lift the black pager off the dark background */
.pager { background: linear-gradient(160deg, #3d4148, #17181b 70%); box-shadow: 0 0 0 1.5px rgba(255,255,255,.16), 0 0 90px 10px rgba(255,138,42,.28), 0 24px 46px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22); }
.pager-ripples span { border-color: rgba(255,138,42,.7); }
.intro-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,138,42,.18), transparent 65%); pointer-events: none; }