:root {
  --night: #030611;
  --panel: rgba(11, 16, 35, .74);
  --panel-solid: #0b1023;
  --panel-soft: rgba(20, 25, 52, .64);
  --line: rgba(182, 190, 255, .15);
  --line-strong: rgba(186, 161, 255, .42);
  --ink: #f5f2fb;
  --muted: #989cb2;
  --dim: #64697f;
  --accent: #9d7dff;
  --accent-rgb: 157, 125, 255;
  --blue: #66b8ff;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--night);
}

body {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, select { font: inherit; }
button { color: inherit; }

button, select, input[type="range"], input[type="checkbox"] { cursor: pointer; }

button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), .9);
  outline-offset: 2px;
}

.hidden { display: none !important; }

#visual-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background:
    radial-gradient(circle at 73% 18%, rgba(61, 52, 132, .2), transparent 28%),
    radial-gradient(circle at 18% 76%, rgba(27, 71, 123, .12), transparent 31%),
    linear-gradient(180deg, #030611 0%, #040817 62%, #02040b 100%);
}

.ambient-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 2, 10, .26) 68%, rgba(0, 1, 7, .76) 100%),
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 24% 76%, rgba(0,0,0,.32));
}

.film-grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  opacity: .075;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0 .4px, transparent .6px),
    radial-gradient(circle at 75% 65%, rgba(255,255,255,.45) 0 .4px, transparent .6px);
  background-size: 23px 19px, 29px 31px;
}

.app {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr) 76px;
  width: min(100%, 460px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(4, 7, 18, .28), rgba(4, 7, 18, .62));
  box-shadow: 0 0 100px rgba(0,0,0,.72);
}

.top-bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 16px 8px;
  border-bottom: 1px solid rgba(180, 190, 255, .06);
  background: linear-gradient(180deg, rgba(3,6,17,.9), rgba(3,6,17,.4));
  backdrop-filter: blur(18px);
}

.brand, .utility-btn, .alarm-icon-btn, .nav-btn,
.theme-card, .pill-btn, .story-card, .mood-card,
.text-btn, .console-action, .category-tabs button,
.primary-btn, .secondary-btn {
  border: 0;
  background: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.brand-system {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #fff, #ae9aff 30%, #7655e8 72%);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), .8);
}

.brand-system::after {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 50%;
  content: "";
}

.brand-copy { display: flex; flex-direction: column; align-items: flex-start; }
.brand-copy strong {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.03em;
  text-transform: none;
}
.brand-copy small { display: none; }

.status-cluster { display: flex; align-items: center; gap: 7px; }
.signal { display: none; }
.clock {
  color: #c9c7d4;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
}

.utility-btn, .alarm-icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(11,15,31,.6);
}

.utility-orbit {
  position: relative;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.utility-orbit::after {
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(var(--accent-rgb), .44);
  border-radius: 50%;
  content: "";
}
#theme-label { display: none; }

.alarm-icon-lines {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1px solid #9ca2b7;
  border-radius: 50%;
}
.alarm-icon-lines::before {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 1px;
  height: 4px;
  background: #9ca2b7;
  content: "";
}
.alarm-icon-lines::after {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 3px;
  height: 1px;
  background: #9ca2b7;
  content: "";
}
.badge {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -16px 0 0 17px;
  border: 1px solid #080b17;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.main {
  position: relative;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.main::-webkit-scrollbar { display: none; }

.mode {
  display: none;
  width: 100%;
  min-height: 100%;
  padding: 0 14px 28px;
  animation: screenIn .45s cubic-bezier(.2,.8,.2,1);
}
.mode.active { display: flex; flex-direction: column; }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to { opacity: 1; transform: none; }
}

.mode-header, .alarm-hero-heading {
  padding: 25px 8px 18px;
  text-align: center;
}

.screen-index, .eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #b8a1ff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.mode-header h1, .alarm-hero-heading h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 12vw, 58px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.04em;
}

.subtitle, .alarm-hero-heading p {
  max-width: 330px;
  margin: 9px auto 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

/* BREATHE */

#mode-breathe { justify-content: flex-start; }
#mode-breathe .mode-header { padding-top: 34px; }

.orb-container {
  position: relative;
  display: grid;
  place-items: center;
  width: min(76vw, 330px);
  aspect-ratio: 1;
  margin: 6px auto 10px;
}

.breath-rings, .breath-rings::before, .breath-rings::after {
  position: absolute;
  inset: 3%;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 50%;
}
.breath-rings::before, .breath-rings::after { inset: 9%; content: ""; }
.breath-rings::after { inset: 18%; border-style: dotted; opacity: .45; }

.breath-rings i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  height: 42%;
  border: 1px solid rgba(185, 162, 255, .34);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: orbitTurn 17s linear infinite;
}
.breath-rings i:nth-child(2) { transform: translate(-50%,-50%) rotate(62deg); animation-duration: 21s; }
.breath-rings i:nth-child(3) { transform: translate(-50%,-50%) rotate(-62deg); animation-duration: 25s; }

.breath-orb {
  position: relative;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid rgba(223, 213, 255, .48);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 2%, #c5b2ff 4%, rgba(150,111,255,.48) 14%, transparent 46%),
    radial-gradient(circle at 30% 26%, rgba(130,112,255,.28), rgba(15,13,40,.98) 63%);
  box-shadow: 0 0 10px #d6c8ff, 0 0 28px rgba(var(--accent-rgb),.62), inset 0 0 55px rgba(var(--accent-rgb),.22);
  animation: orbPulse 12s ease-in-out infinite;
}

.breath-orb::before {
  position: absolute;
  inset: -13%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 56%, rgba(var(--accent-rgb),.26) 68%, transparent 72%);
  content: "";
}

.breath-text {
  position: absolute;
  bottom: 8%;
  color: #c4a7ff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.breath-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 4px;
}

.pill-btn {
  min-height: 68px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(10,13,28,.58);
}
.pill-btn strong { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; }
.pill-btn small { display: block; margin-top: 8px; color: var(--dim); font-family: var(--mono); font-size: 7px; letter-spacing: .15em; }
.pill-btn.active {
  border-color: rgba(var(--accent-rgb), .7);
  color: #c8adff;
  background: rgba(var(--accent-rgb), .12);
  box-shadow: inset 0 0 24px rgba(var(--accent-rgb),.05);
}

@keyframes orbPulse {
  0%,100% { transform: scale(.84); filter: brightness(.78); }
  45% { transform: scale(1.08); filter: brightness(1.22); }
  58% { transform: scale(1.08); filter: brightness(1.22); }
}
@keyframes orbitTurn { to { rotate: 360deg; } }

/* SOUND */

.category-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 4px;
  margin: 0 8px 14px;
  border: 1px solid rgba(170,179,233,.08);
  border-radius: 14px;
  background: rgba(12,16,34,.72);
}
.category-tabs button {
  min-height: 34px;
  padding: 0 5px;
  border-radius: 10px;
  color: #9297aa;
  font-size: 9px;
}
.category-tabs button.active { color: #c9b3ff; background: rgba(var(--accent-rgb),.13); }

.mixer { display: grid; gap: 7px; }
.filter-hidden { display: none !important; }
.mixer-channel {
  display: grid;
  grid-template-columns: 34px 95px minmax(0,1fr) 22px;
  align-items: center;
  min-height: 54px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(100deg, rgba(22,29,58,.88), rgba(15,19,40,.68));
}
.mixer-channel::after {
  content: "♡";
  color: #8f94aa;
  font-size: 17px;
  text-align: right;
}
.channel-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #b9a1ff;
  background: rgba(var(--accent-rgb),.1);
  font-size: 14px;
}
.channel-label { font-size: 10px; }

input[type="range"] {
  width: 100%;
  height: 2px;
  appearance: none;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), rgba(155,161,198,.2));
}
input[type="range"]::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: #ab8cff;
  box-shadow: 0 0 9px rgba(var(--accent-rgb),.8);
}

.panel-card {
  margin-top: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(12,17,36,.78);
}
.nature-select, .option select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #dad8e4;
  background: #0c1021;
  font-size: 9px;
}
.nature-volume-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; margin-top: 14px; color: var(--dim); font-family: var(--mono); font-size: 8px; }
.text-btn {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #aaaec0;
  background: rgba(14,18,37,.82);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
}
.nature-player .text-btn { width: 100%; margin-top: 14px; }
.mixer-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 10px; }

/* JOURNEY */

#mode-journey {
  background:
    radial-gradient(circle at 50% 22%, rgba(62,86,196,.28), transparent 26%),
    linear-gradient(180deg, transparent 0 28%, rgba(66,45,135,.08));
}

.mood-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mood-card {
  position: relative;
  min-height: 210px;
  padding: 0 11px 15px;
  overflow: hidden;
  border: 1px solid rgba(170,179,240,.24);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(19,27,63,.95), rgba(7,11,25,.96));
  text-align: center;
}
.mood-visual {
  position: relative;
  display: block;
  width: calc(100% + 22px);
  height: 135px;
  margin: 0 -11px 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(145,119,255,.55), transparent 22%),
    linear-gradient(180deg,#172a61,#29205d 52%,#090d22);
}
.mood-visual::after {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -26px;
  height: 74px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(150deg,#1b244a,#080b1d 70%);
  box-shadow: 0 -16px 34px rgba(122,93,255,.15);
  content: "";
}
.mood-visual i {
  position: absolute;
  top: 35px;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8e2ff, #8a6ae4 42%, #34216b 74%);
  box-shadow: 0 0 25px rgba(var(--accent-rgb),.68);
  transform: translateX(-50%);
}
.mood-galaxy { background: radial-gradient(ellipse at 50% 40%,#815dff 0 5%,#4031a0 10%,#182653 28%,#080e23 52%); }
.mood-galaxy i { width: 70px; height: 30px; border: 5px solid #987fff; background: transparent; transform: translateX(-50%) rotate(-18deg); box-shadow: 0 0 18px #7957ff, inset 0 0 14px #7957ff; }
.mood-energy { background: linear-gradient(180deg,#17214c,#482268 58%,#0b0d22); }
.mood-energy i { width: 0; height: 0; border-radius: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 54px solid #bc8cff; background: none; filter: drop-shadow(0 0 12px #9b6eff); }
.mood-dusk { background: radial-gradient(circle at 50% 38%,#ffd2c1 0 13%,#8d6da0 14%,#4e3b76 31%,#1a1b3e 64%); }
.mood-dusk i { background: #f4c7bd; box-shadow: 0 0 25px rgba(255,190,190,.7); }
.mood-name { display: block; font-family: var(--serif); font-size: 19px; line-height: 1; }
.mood-card small { display: block; margin-top: 6px; color: #9297ad; font-size: 9px; }

.journey-active, .story-reader {
  margin-top: 14px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgba(12,15,35,.94);
}
.journey-step, .story-text { font-family: var(--serif); font-size: 22px; line-height: 1.35; }
.journey-progress { height: 2px; margin: 18px 0; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.1); }
.journey-bar { width: 0; height: 100%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: width .6s; }

/* STORIES */

.story-tabs { margin-bottom: 12px; }
.story-list { display: grid; gap: 7px; }
.story-card {
  display: grid;
  grid-template-columns: 64px 1fr auto 24px;
  align-items: center;
  min-height: 60px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(25,31,61,.86), rgba(12,16,33,.72));
  text-align: left;
}
.story-card::after { content: "♡"; color: #989caf; font-size: 16px; }
.story-number {
  display: grid;
  place-items: center;
  width: 54px;
  height: 46px;
  border-radius: 9px;
  color: rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 64% 28%,#d8b578 0 7%,transparent 8%),
    linear-gradient(150deg,#254057,#0a1424 60%,#050811);
  font-family: var(--mono);
  font-size: 8px;
  box-shadow: inset 0 -15px 20px rgba(0,0,0,.35);
}
.story-card:nth-child(2) .story-number { background: radial-gradient(circle at 68% 34%,#d2894e 0 7%,transparent 8%),linear-gradient(150deg,#523b39,#17152b 60%); }
.story-card:nth-child(3) .story-number { background: linear-gradient(155deg,#38617a,#101a2b 65%); }
.story-card:nth-child(4) .story-number { background: radial-gradient(circle at 70% 28%,#ead1a5 0 8%,transparent 9%),linear-gradient(155deg,#3f4774,#12142b 65%); }
.story-card:nth-child(5) .story-number { background: radial-gradient(circle at 70% 25%,#ffb06c 0 8%,transparent 9%),linear-gradient(155deg,#654130,#211827 65%); }
.story-title { font-family: var(--serif); font-size: 15px; }
.story-length { color: #9297aa; font-family: var(--mono); font-size: 7px; letter-spacing: .06em; }
.story-reader .text-btn { width: 100%; margin-top: 18px; }

/* ALARM / 3D EARTH HERO */

#mode-alarm { padding-top: 0; }
.alarm-hero-heading { padding: 18px 8px 12px; }
.alarm-hero-heading h1 { font-size: 46px; }

.clock-stage {
  position: relative;
  flex: none;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(173,184,255,.2);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 65%, rgba(93,93,227,.26), transparent 36%),
    linear-gradient(180deg, rgba(5,9,24,.42), rgba(4,7,18,.96));
  isolation: isolate;
  box-shadow: inset 0 0 60px rgba(0,0,0,.32), 0 22px 60px rgba(0,0,0,.28);
}

.clock-stage::before {
  position: absolute;
  inset: 16px;
  z-index: 1;
  border: 1px solid rgba(178,166,255,.09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.alarm-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }

.earth-drag-surface {
  position: absolute;
  top: 48%;
  right: 4%;
  bottom: 0;
  left: 4%;
  z-index: 8;
  border-radius: 52% 52% 20px 20px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.earth-drag-surface.dragging { cursor: grabbing; }

.earth-drag-surface:focus-visible {
  outline: 1px solid rgba(157,125,255,.66);
  outline-offset: -5px;
}

.clock-stage:has(.earth-drag-surface.dragging) .alarm-orbit-ui {
  border-color: rgba(83,207,255,.72);
  box-shadow: 0 0 24px rgba(85,108,255,.25);
}
.stage-reticle { display: none; }
.stage-kicker {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  color: #858ba2;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
}
.stage-live { color: #b8a5ff; }
.stage-live i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.clock-display {
  position: absolute;
  top: 36%;
  left: 50%;
  z-index: 5;
  width: 94%;
  text-align: center;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.chrono-frame {
  position: relative;
  width: 100%;
  min-height: 148px;
  padding: 19px 15px 12px;
  overflow: hidden;
  border: 1px solid rgba(116, 122, 255, .25);
  border-radius: 9px;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(84,213,255,.08) 50%, transparent 50.3%),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(126,97,255,.035) 9px),
    linear-gradient(135deg, rgba(10,7,31,.64), rgba(18,7,42,.24) 50%, rgba(4,20,39,.54));
  box-shadow:
    inset 0 0 34px rgba(45,31,115,.24),
    0 0 26px rgba(68,81,255,.08);
  clip-path: polygon(0 11px, 11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px));
}

.chrono-frame::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(105deg, transparent 0 30%, rgba(68,221,255,.1) 45%, transparent 57% 100%);
  content: "";
  animation: chronoScan 4.6s ease-in-out infinite;
  pointer-events: none;
}

.chrono-telemetry {
  position: absolute;
  top: 7px;
  left: 11px;
  right: 11px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  color: #896dff;
  font-family: var(--mono);
  font-size: 5px;
  letter-spacing: .16em;
  text-shadow: 0 0 7px rgba(127,89,255,.8);
}

.chrono-telemetry i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 4px;
  border-radius: 50%;
  background: #ff632f;
  box-shadow: 0 0 8px #ff4b19;
  animation: chronoBlink 1.3s steps(2,end) infinite;
}

.clock-date {
  position: relative;
  z-index: 3;
  color: #997bff;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .22em;
  text-shadow: 0 0 8px rgba(112,81,255,.9);
  text-transform: uppercase;
}

.clock-time-row {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 78px;
}

.alarm-digital-time {
  color: #835cff;
  background:
    linear-gradient(180deg, #ff5524 0%, #ff9c32 15%, #dd4eff 40%, #7659ff 64%, #34cfff 88%, #1f7cff 100%);
  background-clip: text;
  filter:
    drop-shadow(0 0 3px rgba(255,74,31,.85))
    drop-shadow(0 0 10px rgba(174,64,255,.82))
    drop-shadow(0 0 20px rgba(44,137,255,.55));
  font-family: "Orbitron", var(--mono);
  font-size: clamp(48px, 14.2vw, 68px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.055em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: chronoPulse 3.1s ease-in-out infinite;
}

.clock-minor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 0 0 7px 9px;
  color: #35d5ff;
  font-family: "Orbitron", var(--mono);
  font-size: 8px;
  font-weight: 600;
  text-shadow: 0 0 7px rgba(35,198,255,.9), 0 0 15px rgba(84,77,255,.7);
}

.clock-minor span:last-child { color: #f454dc; text-shadow: 0 0 8px rgba(244,84,220,.86); }

.clock-coordinate {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: #4d9dce;
  font-family: var(--mono);
  font-size: 5px;
  letter-spacing: .14em;
}

.chrono-energy-line {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 30px;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f63de9 18%, #5d5cff 49%, #33dfff 81%, transparent);
  box-shadow: 0 0 5px #813eff, 0 0 13px #3e9eff;
}

.chrono-corner {
  position: absolute;
  z-index: 6;
  width: 17px;
  height: 17px;
  border-color: #684fff;
  opacity: .68;
  filter: drop-shadow(0 0 4px #5738ff);
}
.chrono-corner-a { top: 4px; left: 4px; border-top: 1px solid; border-left: 1px solid; }
.chrono-corner-b { top: 4px; right: 4px; border-top: 1px solid; border-right: 1px solid; }
.chrono-corner-c { bottom: 4px; left: 4px; border-bottom: 1px solid; border-left: 1px solid; }
.chrono-corner-d { right: 4px; bottom: 4px; border-right: 1px solid; border-bottom: 1px solid; }

@keyframes chronoPulse {
  0%, 100% { opacity: .94; filter: drop-shadow(0 0 3px rgba(255,74,31,.75)) drop-shadow(0 0 10px rgba(174,64,255,.7)) drop-shadow(0 0 19px rgba(44,137,255,.48)); }
  50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,74,31,.95)) drop-shadow(0 0 15px rgba(174,64,255,.94)) drop-shadow(0 0 27px rgba(44,137,255,.7)); }
}

@keyframes chronoScan {
  0%, 15% { transform: translateX(-130%); opacity: 0; }
  28% { opacity: 1; }
  62%, 100% { transform: translateX(130%); opacity: 0; }
}

@keyframes chronoBlink { 50% { opacity: .35; } }

.alarm-orbit-ui {
  --orbit-size: min(82vw, 350px);
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 3;
  width: var(--orbit-size);
  height: var(--orbit-size);
  border: 1px solid rgba(201,190,255,.42);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.alarm-orbit-ui::before {
  position: absolute;
  inset: 10%;
  border: 1px dotted rgba(191,176,255,.16);
  border-radius: 50%;
  content: "";
}
.orbit-marker { position: absolute; left: 50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #c3badf; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.orbit-marker i { width: 9px; height: 9px; border: 1px solid #fff; border-radius: 50%; background: #f4f1ff; box-shadow: 0 0 10px #fff, 0 0 20px var(--accent); }
.orbit-now { top: -5px; transform: translateX(-50%); }
.orbit-alarm { bottom: -5px; transform: translateX(-50%); }

.orbit-legend { display: none; }
.earth-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 17px;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: #b2a5d5;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .1em;
}
.earth-caption small { color: #74798d; font-size: 6px; }

.theme-deck { margin-top: 12px; }
.section-label-row { display: flex; justify-content: space-between; align-items: end; margin: 0 4px 9px; }
.section-label-row h1 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.deck-hint { color: var(--dim); font-family: var(--mono); font-size: 7px; }
.theme-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.theme-card {
  padding: 6px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(10,14,30,.72);
  text-align: left;
}
.theme-card.active { border-color: rgba(var(--accent-rgb),.65); background: rgba(var(--accent-rgb),.1); }
.theme-preview { position: relative; display: block; height: 44px; margin-bottom: 7px; overflow: hidden; border-radius: 9px; background: radial-gradient(circle at 55% 40%,#ffe3aa 0 8%,#493557 9%,#10162a 42%,#060914 70%); }
.theme-preview-lunar { background: radial-gradient(circle at 55% 40%,#d9d4ff 0 8%,#3d417e 9%,#121633 42%,#060914 70%); }
.theme-preview-aurora { background: radial-gradient(circle at 55% 40%,#b9ffe6 0 7%,#245e69 9%,#173956 38%,#080d1c 72%); }
.theme-preview-void { background: radial-gradient(circle at 55% 40%,#ffb4dd 0 7%,#6b2c75 9%,#291843 39%,#090813 72%); }
.theme-card strong { display: block; font-size: 8px; font-weight: 500; }
.theme-card small { display: none; }

.alarm-console {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(16,21,44,.95), rgba(9,13,28,.92));
}
.console-heading { display: flex; align-items: center; justify-content: space-between; }
.console-heading h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 500; }
.switch { position: relative; width: 52px; height: 29px; }
.switch input { position: absolute; opacity: 0; }
.slider { position: absolute; inset: 0; border: 1px solid rgba(172,178,207,.32); border-radius: 30px; background: rgba(80,86,108,.24); transition: .3s; }
.slider::before { position: absolute; top: 4px; left: 4px; width: 19px; height: 19px; border-radius: 50%; background: #aab0c2; content: ""; transition: .3s; }
.switch input:checked + .slider { border-color: rgba(var(--accent-rgb),.7); background: rgba(var(--accent-rgb),.28); }
.switch input:checked + .slider::before { background: #b89cff; box-shadow: 0 0 10px var(--accent); transform: translateX(22px); }

.alarm-time-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.alarm-time-row label { color: #8990a7; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.alarm-time-input { width: 100%; border: 0; color: var(--ink); background: transparent; font-family: var(--serif); font-size: 42px; line-height: 1; text-align: right; }
.alarm-status { display: flex; align-items: center; gap: 8px; padding: 13px 0 5px; color: #8e94a8; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.alarm-status span { width: 7px; height: 7px; border-radius: 50%; background: #9ba0b2; }
.alarm-status.on span { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.alarm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.alarm-stat { min-height: 69px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(17,22,43,.55); }
.alarm-stat-label { display: block; color: #777d94; font-family: var(--mono); font-size: 7px; letter-spacing: .11em; }
.alarm-stat-value { display: block; margin-top: 10px; font-family: var(--serif); font-size: 20px; }
.alarm-options { margin-top: 12px; border-top: 1px solid var(--line); }
.option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 63px; border-bottom: 1px solid var(--line); }
.option strong { display: block; font-size: 11px; font-weight: 500; }
.option small { display: block; margin-top: 4px; color: #74798e; font-size: 8px; }
.option select { width: 132px; }
.option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.console-action { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 14px; padding: 0 13px; border: 1px solid rgba(var(--accent-rgb),.55); border-radius: 13px; color: #bfa7ff; background: rgba(var(--accent-rgb),.09); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.console-action span { color: #73788e; font-size: 7px; }
.alarm-note { margin: 12px 8px 0; color: #62677b; font-size: 8px; line-height: 1.5; text-align: center; }

/* BOTTOM NAV */

.bottom-nav {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 76px;
  padding: 6px 8px max(7px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(174,183,239,.12);
  background: rgba(4,7,16,.88);
  backdrop-filter: blur(24px);
}
.nav-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border-radius: 14px;
  color: #70758a;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .03em;
}
.nav-btn.active { color: #b89cff; background: rgba(var(--accent-rgb),.09); }
.nav-glyph { position: relative; display: block; width: 20px; height: 20px; }
.nav-glyph::before, .nav-glyph::after { position: absolute; content: ""; }
.nav-breathe::before { inset: 4px; border: 1px solid currentColor; border-radius: 50%; }
.nav-breathe::after { top: 1px; left: 9px; width: 1px; height: 18px; background: currentColor; opacity: .5; }
.nav-wave::before { top: 3px; left: 2px; width: 1px; height: 14px; background: currentColor; box-shadow: 4px 3px currentColor,8px -1px currentColor,12px 2px currentColor,16px 5px currentColor; }
.nav-journey::before { inset: 4px; border: 1px solid currentColor; transform: rotate(45deg); }
.nav-journey::after { top: 8px; left: 8px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.nav-stories::before { inset: 3px 5px; border: 1px solid currentColor; border-left: 0; border-radius: 0 6px 6px 0; }
.nav-stories::after { top: 4px; left: 4px; width: 1px; height: 12px; background: currentColor; }
.nav-clock::before { inset: 2px; border: 1px solid currentColor; border-radius: 50%; }
.nav-clock::after { top: 5px; left: 9px; width: 1px; height: 6px; background: currentColor; box-shadow: 3px 5px 0 -0.2px currentColor; transform-origin: bottom; }

/* LOADING + WAKE OVERLAY */

.overlay, .alarm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  color: var(--ink);
  background: #030611;
}
.overlay.active { display: grid; }
.loading-system { position: relative; width: 96px; height: 96px; }
.loading-core { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: #b69cff; box-shadow: 0 0 24px var(--accent); transform: translate(-50%,-50%); }
.loading-orbit { position: absolute; inset: 8px; border: 1px solid rgba(var(--accent-rgb),.36); border-radius: 50%; animation: orbitTurn 2.8s linear infinite; }
.loading-orbit::after { position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; content: ""; }
.loading-orbit-two { inset: 22px; animation-direction: reverse; animation-duration: 2s; }
.loading-copy { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: -30vh; }
.loading-copy strong { font-family: var(--serif); font-size: 28px; }
.loading-copy span { color: #898fa5; font-family: var(--mono); font-size: 8px; letter-spacing: .16em; }

.alarm-overlay:not(.hidden) { display: grid; }
.supernova { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle,#fff 0 3%,#c9b4ff 8%,rgba(var(--accent-rgb),.3) 28%,transparent 68%); animation: wakeGlow 2.8s ease-in-out infinite; }
.supernova-rays { position: absolute; width: 80vmax; height: 1px; background: linear-gradient(90deg,transparent,#d6caff,transparent); box-shadow: 0 0 25px var(--accent); }
.alarm-ring-content { position: relative; z-index: 2; width: min(88vw,360px); padding: 28px; border: 1px solid var(--line-strong); border-radius: 24px; background: rgba(7,10,24,.88); text-align: center; backdrop-filter: blur(18px); }
.alarm-ring-content h2 { margin: 5px 0; font-family: var(--serif); font-size: 42px; font-weight: 500; }
.alarm-ring-content p { margin: 0 0 18px; font-family: var(--serif); font-size: 60px; }
.primary-btn, .secondary-btn { width: 100%; min-height: 48px; margin-top: 8px; border-radius: 13px; font-family: var(--mono); font-size: 9px; }
.primary-btn { color: #080612; background: #bda7ff; }
.secondary-btn { border: 1px solid var(--line); color: #aaaec2; background: rgba(255,255,255,.03); }
@keyframes wakeGlow { 50% { transform: scale(1.18); filter: brightness(1.3); } }

/* THEMES */

body[data-theme="aurora"] { --accent: #69edcf; --accent-rgb: 105, 237, 207; }
body[data-theme="void"] { --accent: #e879d0; --accent-rgb: 232, 121, 208; }
body[data-theme="solar"] { --accent: #efb86f; --accent-rgb: 239, 184, 111; }

@media (min-width: 620px) {
  body { display: grid; place-items: center; padding: 18px; }
  .app {
    height: min(900px, calc(100dvh - 36px));
    border: 1px solid rgba(170,181,245,.16);
    border-radius: 28px;
  }
}

@media (max-height: 720px) {
  .mode-header { padding-top: 16px; padding-bottom: 12px; }
  .orb-container { width: min(63vw,270px); }
  .clock-stage { min-height: 380px; }
  .alarm-hero-heading { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}