/* Hexley's Midnight theme as the app draws it since M54 (src/theme/themes.ts, rims.ts, decorations.ts):
   the Stage Lamp sky, cards with a "Twin Tone" rim, the "Ember Fill" main button, "Twin Accent" text. */
:root {
  color-scheme: dark;
  --background: #080b44;
  --surface: #070a36;
  --border: #2a2f63;
  --heading: #f4f1ff;
  --text: #e4e0f5;
  --text-muted: #a6add8;
  --accent: #c9a6f0;
  --accent-soft: #c9a6f0;
  --error: #f28b82;
  /* Twin Tone: rose on the left, violet, blue on the right, as if two lamps stood behind the card. */
  --rim-left: #f59cd0;
  --rim-middle: #8c66f5;
  --rim-right: #708df5;
  --rim: linear-gradient(90deg, var(--rim-left), var(--rim-middle), var(--rim-right));
  --rim-glow: -10px 0 24px -6px rgba(245, 156, 208, 0.45), 10px 0 24px -6px rgba(112, 141, 245, 0.45),
    0 0 40px 0 rgba(140, 102, 245, 0.2);
  /* Ember Fill: gold, peach and rose, the warmest part of the lamp, with a dark label. */
  --ember: linear-gradient(to bottom right, #ffd9a0, #f6a95f, #f07ca2);
  --ember-label: #1a0e2e;
  /* Links: rose into blue. */
  --link: linear-gradient(90deg, #f6a6d6, #a9b8ff);
  /* How strongly the lamp's white-pink core shines: dimmed under long text; the one-screen home page has it full. */
  --lamp: 0.32;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
  font: 17px/1.6 var(--body);
}

/* The Stage Lamp (decorations.ts): a breath of blue from above and a rose glow along the floor (::before), and the
   lamp below the screen with its white-pink core (::after). Fixed to the window, as in the app. */
body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
body::before {
  background:
    radial-gradient(ellipse 155.6% 39.5% at 50% 102.6%, rgba(211,125,233,0.45) 0%, rgba(180,107,231,0.414) 6.3%, rgba(164,97,230,0.378) 12.5%, rgba(150,91,228,0.344) 18.8%, rgba(137,86,223,0.31) 25%, rgba(126,82,219,0.276) 31.3%, rgba(115,78,215,0.244) 37.5%, rgba(106,74,212,0.213) 43.8%, rgba(96,70,208,0.183) 50%, rgba(89,66,200,0.154) 56.3%, rgba(82,62,191,0.126) 62.5%, rgba(75,58,183,0.099) 68.8%, rgba(68,54,174,0.074) 75%, rgba(62,51,166,0.051) 81.3%, rgba(56,47,159,0.03) 87.5%, rgba(50,43,151,0.012) 93.8%, rgba(44,40,144,0) 100%),
    radial-gradient(ellipse 105.6% 34.2% at 50% -10.5%, rgba(112,141,245,0.18) 0%, rgba(98,122,234,0.163) 6.3%, rgba(91,113,228,0.147) 12.5%, rgba(85,105,224,0.132) 18.8%, rgba(80,98,220,0.117) 25%, rgba(75,92,216,0.103) 31.3%, rgba(72,87,209,0.089) 37.5%, rgba(69,83,202,0.076) 43.8%, rgba(66,79,196,0.064) 50%, rgba(63,75,190,0.052) 56.3%, rgba(60,71,184,0.041) 62.5%, rgba(58,68,178,0.031) 68.8%, rgba(55,64,173,0.022) 75%, rgba(53,61,168,0.015) 81.3%, rgba(50,57,163,0.008) 87.5%, rgba(48,54,158,0.003) 93.8%, rgba(46,51,153,0) 100%),
    linear-gradient(#050733, #080b44, #0c0f52);
}
body::after {
  opacity: var(--lamp);
  background: radial-gradient(ellipse 83.3% 73.7% at 50% 107.9%, rgba(255,247,243,1) 0%, rgba(254,203,221,0.928) 6.3%, rgba(248,171,212,0.858) 12.5%, rgba(236,149,215,0.788) 18.8%, rgba(216,135,229,0.718) 25%, rgba(199,122,242,0.65) 31.3%, rgba(179,115,243,0.582) 37.5%, rgba(160,109,244,0.516) 43.8%, rgba(142,103,245,0.451) 50%, rgba(126,95,239,0.386) 56.3%, rgba(110,87,233,0.324) 62.5%, rgba(94,79,227,0.262) 68.8%, rgba(80,72,219,0.203) 75%, rgba(71,64,203,0.146) 81.3%, rgba(62,57,188,0.092) 87.5%, rgba(53,51,173,0.041) 93.8%, rgba(45,44,158,0) 100%);
}

a { color: #f6a6d6; }

/* A card: a dark body in front of the light, its rim lit rose to blue and glowing softly past its edge. */
.rim {
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--rim) border-box;
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow: var(--rim-glow);
}

/* The main button. */
.ember {
  background: var(--ember); color: var(--ember-label); border: 0; border-radius: 999px;
  font: 600 1rem var(--body); text-decoration: none; cursor: pointer;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 48px 16px 48px; }

.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.brand {
  font: 600 1.6rem var(--display); letter-spacing: 0.02em; text-decoration: none;
  color: #f6a95f; background: var(--ember); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The corner stars stay in the corners of the screen, behind everything; the bottom ones are drawn smaller. */
.corner { position: fixed; z-index: -1; pointer-events: none; opacity: 0.85; height: auto; }
.corner.tl { top: 0; left: 0; }
.corner.tr { top: 0; right: 0; }
.corner.bl { bottom: 0; left: 0; width: 85px; }
.corner.br { bottom: 0; right: 0; width: 85px; }

h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.15; color: var(--heading); }
h1 { font-size: clamp(2.1rem, 7vw, 3rem); margin: 0 0 16px; }
h2 { font-size: 1.6rem; margin: 36px 0 8px; }

.muted { color: var(--text-muted); }
.footer { margin-top: 48px; font-size: 0.85rem; color: var(--text-muted); text-align: center; }
.footer a { color: var(--text-muted); }