/* Starqueen: night and chalk. The drawings and the birth form are Mushlove's (engine/life/life.css) and take their
   colours from the same names, set here for the dark */
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url(/fonts/manrope-latin-500-normal.woff2) format('woff2') }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(/fonts/manrope-latin-600-normal.woff2) format('woff2') }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(/fonts/manrope-latin-700-normal.woff2) format('woff2') }
@font-face { font-family: 'Manrope'; font-weight: 800; font-display: swap; src: url(/fonts/manrope-latin-800-normal.woff2) format('woff2') }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2') }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2') }

:root {
  --night: #07070a; --dusk: #0d0e15; --chalk: #f3f0e8; --neon: #ff3a1c; --rib: #2fd9b9; --sand: #ece8de; --charcoal: #1c1b19;
  --bg: var(--night); --ink: var(--chalk);
  --soft: color-mix(in srgb, var(--ink) 60%, var(--bg));
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --wash: color-mix(in srgb, var(--ink) 5%, transparent);
  --wash2: color-mix(in srgb, var(--ink) 10%, transparent);
  --sans: 'Manrope', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --bar: 12px; --gutter: clamp(18px, 4vw, 40px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
html { background: var(--bg); scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; accent-color: var(--ink) }
a { color: inherit; text-underline-offset: 3px }
::selection { background: var(--ink); color: var(--bg) }
[hidden] { display: none !important }

/* ---------- the night: sky, word, and the three fields ---------- */
.night { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: clip; isolation: isolate;
  background: linear-gradient(180deg, #05060b 0%, var(--dusk) 62%, #12110f 100%) }
.night canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none }
#sky { z-index: -2 }
#mark { z-index: -1 }
.night-in { flex: 1; display: flex; flex-direction: column; align-items: center; padding: clamp(96px, 23svh, 240px) var(--gutter) 84px; box-sizing: border-box }
.markbox { width: min(84%, 900px); container-type: inline-size; align-self: flex-start; margin-left: clamp(0px, 5vw, 96px) }
/* the heading holds the word's place; where WebGL draws it the type itself is cleared, and read aloud all the same */
.mark { margin: 0; aspect-ratio: 6167 / 720; font: 800 calc(100cqw / 6.2) / .72 var(--sans); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; text-align: center; rotate: -6deg;
  color: var(--neon); text-shadow: 0 0 28px color-mix(in srgb, var(--neon) 70%, transparent), .05em .07em 0 var(--rib) }
.gl .mark { color: transparent; text-shadow: none; user-select: none }
.ask { width: min(100%, 760px); margin-top: clamp(84px, 17svh, 190px); display: flex; flex-direction: column; gap: 22px }
.say { margin: 0; font-size: clamp(19px, 2.3vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; text-align: center; text-wrap: balance }
.kept { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--soft); text-align: center }
.skycap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; margin: 0; font: 400 12px/1.4 var(--mono); color: var(--soft); text-align: center }

/* the form sits on the sky: glass enough to read on, not a card */
.night .entry :is(input:not([type="checkbox"]), select) { background: color-mix(in srgb, var(--night) 62%, transparent); border-color: color-mix(in srgb, var(--ink) 24%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }
.night .entry label > span { color: color-mix(in srgb, var(--ink) 72%, transparent) }
.night .entry .row { justify-content: center }
.night .entry .entry-set { justify-content: center; text-align: center }
.night .entry .entry-line { align-items: center }
.night .entry .entry-line b { display: none }
.night .entry .err { text-align: center }
.night .entry .suggest { background: #101016; border: 1px solid var(--line) }
.onward, .pill { align-self: center; display: inline-flex; align-items: center; min-height: 46px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: 700 16px var(--sans); text-decoration: none; cursor: pointer; transition: opacity .15s }
:is(.onward, .pill):hover { opacity: .88 }
:is(.onward, .pill):focus-visible, .doors a:focus-visible, .makers summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }

/* ---------- the readings ---------- */
.reading { margin: 0 auto; padding: 56px var(--gutter) 0; box-sizing: content-box }
.readings-h { margin: 0 0 28px; font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1; scroll-margin-top: 28px }
.readings-h:focus { outline: none }
.reading > section { padding: 44px 0 }
.reading .rd-text h2 small a { color: inherit }
.reading .more-link { font: 500 13px/1.4 var(--mono); color: var(--soft) }
.reading .more-link:hover { color: var(--ink) }
.reading .rd-vis { top: 24px }
.reading .gk-spheres li { background: var(--wash) }
.cl-fig { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 12px 0 }
.cl-fig .cl-day { text-align: center }
.cl-fig .cl-day b { font-size: clamp(26px, 3.4vw, 38px) }
.cl-fig .cl-stela { gap: 10px }
.cl-fig .cl-stela figure { width: 64px }
.cl-fig .cl-stela svg { width: 44px; height: 44px; fill: var(--ink); stroke: var(--ink) }
.maya-fig { display: flex; flex-direction: column; align-items: center; gap: 12px }
.maya-fig svg { max-width: 380px }

/* your lines on the Earth */
.linemap { display: block; width: 100%; height: auto; color: var(--ink) }
.linemap .lm-sphere { fill: var(--wash); stroke: var(--line) }
.linemap .lm-land { fill: none; stroke: currentColor; stroke-width: .6px; opacity: .34; vector-effect: non-scaling-stroke }
.linemap .lm-line { fill: none; stroke: currentColor; stroke-width: 1px; opacity: .5; vector-effect: non-scaling-stroke }
.linemap .lm-line.curve { stroke-dasharray: 4 3; opacity: .36 }
.linemap .lm-line.near { opacity: 1; stroke-width: 1.6px }
.linemap text { font: 400 13px/1 var(--sans); fill: var(--ink); text-anchor: middle }
.linemap .lm-home { fill: var(--ink) }
.linemap .lm-halo { fill: none; stroke: var(--ink); opacity: .5 }
.reading .lines-key { margin: 10px 0 0; font: 400 12px/1.5 var(--mono); color: var(--soft) }

/* ---------- take it with you ---------- */
.carry { margin-top: 40px; padding: 72px var(--gutter) 80px; background: linear-gradient(180deg, transparent, var(--dusk)) }
.carry-in { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px }
.carry h2 { margin: 0; font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1 }
.carry p { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.55; text-wrap: pretty }
.doors { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--line) }
.doors a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; padding: 18px 2px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .25s var(--ease-out) }
.doors a:hover { padding-left: 12px }
.doors b { font-size: 22px; font-weight: 800; letter-spacing: -.02em }
.doors span { font-size: 15px; color: var(--soft) }
.carry .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.carry .pill { align-self: auto; background: none; color: var(--ink) }
.carry .pill:hover { background: var(--wash2); opacity: 1 }
.copied { font: 400 12px/1.4 var(--mono); color: var(--soft) }
.makers summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--soft) }
.makers summary:hover { color: var(--ink) }
.makers p { margin: 14px 0; font-size: 15px; color: var(--soft) }
.makers pre { margin: 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--wash) }
.makers code { font: 400 13px/1.6 var(--mono) }
.foot { padding: 28px var(--gutter) 40px; background: var(--dusk); font: 400 12px/1.5 var(--mono); color: var(--soft) }
.foot p { margin: 0 auto; max-width: 760px }

/* ---------- the door (connect) ---------- */
.door { min-height: 100svh; display: grid; place-items: center; padding: 40px var(--gutter); box-sizing: border-box; background: radial-gradient(120% 70% at 50% 0%, #16161f 0%, var(--night) 60%) }
.door-in { width: min(100%, 460px); display: flex; flex-direction: column; gap: 22px; text-align: center }
.door .star { width: 46px; height: 46px; margin: 0 auto; fill: var(--chalk); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--chalk) 60%, transparent)) }
.door h1 { margin: 0; font-size: clamp(28px, 6vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance }
.door p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--soft); text-wrap: pretty }
.door .birth { padding: 18px; border: 1px solid var(--line); border-radius: 18px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink) }
.door .to { font: 400 13px/1.5 var(--mono); overflow-wrap: anywhere }
.door .warn { padding: 12px 14px; border: 1px solid var(--ink); border-radius: 14px; font-size: 14px; color: var(--ink); text-align: left }
.door .row { display: flex; flex-direction: column; gap: 10px }
.door .pill { align-self: stretch; justify-content: center }
.door .pill.quiet { background: none; color: var(--ink); border-color: var(--line) }

@media (max-width: 720px) {
  .night .entry .row { justify-content: flex-start }
  .reading { padding-top: 40px }
  .reading > section { padding: 32px 0 }
  .reading .rd-vis { position: static }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .doors a { transition: none } }

/* ---------- the account line ---------- */
.kept { display: flex; flex-direction: column; align-items: center; gap: 10px }
.kept .link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.kept .link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px }
.signin { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px }
.signin input { min-height: 46px; width: min(100%, 260px); box-sizing: border-box; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); background: color-mix(in srgb, var(--night) 62%, transparent); color: var(--ink); font: 500 16px var(--sans); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }
.signin input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.signin .pill { align-self: auto }
.signin .pill:disabled { opacity: .5; cursor: default }
.say-err:empty { display: none }
.say-err { color: var(--ink) }
.reading .ts { text-decoration: underline dotted; text-underline-offset: 3px }

/* the parts under a reading, and the two sets of questions */
.reading .sub-h { margin: 36px 0 10px; font-size: 20px; font-weight: 800; letter-spacing: -.015em }
.reading .rd-vis .cap { margin: 0; text-align: center }
.reading .en > details.more { margin-top: 24px }
.reading .en-result h3 { margin: 6px 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.015em }
.reading :is(.pk-result, .en-result) { background: var(--wash) }