/*
  Shared, script-free presentation for app pages (/parkpulse/, /cubbycorner/ …).
  A static CytechX horizon sits behind the header; content lives on a surface whose top edge is a glowing horizon arc.
  Fonts are self-hosted (OFL licences in /fonts/). Legal bodies are styled, never edited.
*/
@font-face {
  font-family: 'Manrope';
  src: url('/app-pages/fonts/manrope-latin-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/app-pages/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #0b0e12;
  --slate: #161b21;
  --card: #1b2129;
  --line: rgba(248, 249, 252, 0.12);
  --text: #f8f9fc;
  --soft: #d3d8e0;
  --muted: #a9b1bd;
  --accent: #00ddfd;
  --glow-1: 0, 221, 253;
  --glow-2: 47, 107, 255;
  --glow-3: 122, 77, 255;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--font);
  color: var(--text);
  background: var(--ink);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
body {
  position: relative;
  margin: 0;
  line-height: 1.75;
  overflow-x: hidden;
}

/* Static sky: stars and the atmosphere glowing above the horizon arc. */
body::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 300px;
  background:
    radial-gradient(
      ellipse 60% 55% at 50% 100%,
      rgba(var(--glow-1), 0.28),
      rgba(var(--glow-2), 0.12) 45%,
      transparent 75%
    ),
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22600%22%20height%3D%22300%22%3E%3Ccircle%20cx%3D%22194%22%20cy%3D%2245%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.24%22/%3E%3Ccircle%20cx%3D%22322%22%20cy%3D%22110%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.75%22/%3E%3Ccircle%20cx%3D%22129%22%20cy%3D%2226%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.24%22/%3E%3Ccircle%20cx%3D%2254%22%20cy%3D%22127%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.77%22/%3E%3Ccircle%20cx%3D%22378%22%20cy%3D%22175%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%22238%22%20cy%3D%22293%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.53%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22126%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.54%22/%3E%3Ccircle%20cx%3D%22336%22%20cy%3D%22205%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%22383%22%20cy%3D%22112%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.54%22/%3E%3Ccircle%20cx%3D%22371%22%20cy%3D%22149%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.67%22/%3E%3Ccircle%20cx%3D%22279%22%20cy%3D%22277%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.38%22/%3E%3Ccircle%20cx%3D%22477%22%20cy%3D%22210%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.25%22/%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22149%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.64%22/%3E%3Ccircle%20cx%3D%22173%22%20cy%3D%22294%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.51%22/%3E%3Ccircle%20cx%3D%2299%22%20cy%3D%22103%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22577%22%20cy%3D%2223%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.40%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22149%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.24%22/%3E%3Ccircle%20cx%3D%2256%22%20cy%3D%2281%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.24%22/%3E%3Ccircle%20cx%3D%22421%22%20cy%3D%22194%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.37%22/%3E%3Ccircle%20cx%3D%22231%22%20cy%3D%22201%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.76%22/%3E%3Ccircle%20cx%3D%22213%22%20cy%3D%22183%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.24%22/%3E%3Ccircle%20cx%3D%22461%22%20cy%3D%2239%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.44%22/%3E%3Ccircle%20cx%3D%22550%22%20cy%3D%22149%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.47%22/%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22265%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.72%22/%3E%3Ccircle%20cx%3D%22167%22%20cy%3D%22125%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.61%22/%3E%3Ccircle%20cx%3D%22228%22%20cy%3D%2269%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.31%22/%3E%3Ccircle%20cx%3D%22139%22%20cy%3D%2270%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.70%22/%3E%3Ccircle%20cx%3D%22109%22%20cy%3D%2285%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22222%22%20cy%3D%22170%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.61%22/%3E%3Ccircle%20cx%3D%22309%22%20cy%3D%22185%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.47%22/%3E%3Ccircle%20cx%3D%22523%22%20cy%3D%22286%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.44%22/%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%22144%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.24%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2263%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.27%22/%3E%3Ccircle%20cx%3D%22360%22%20cy%3D%2231%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.52%22/%3E%3Ccircle%20cx%3D%22569%22%20cy%3D%22184%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.72%22/%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%2245%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.77%22/%3E%3Ccircle%20cx%3D%22361%22%20cy%3D%22142%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.71%22/%3E%3Ccircle%20cx%3D%22596%22%20cy%3D%22140%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.39%22/%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%22225%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.49%22/%3E%3Ccircle%20cx%3D%22415%22%20cy%3D%22155%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.77%22/%3E%3Ccircle%20cx%3D%22317%22%20cy%3D%2244%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.65%22/%3E%3Ccircle%20cx%3D%22179%22%20cy%3D%22193%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.62%22/%3E%3Ccircle%20cx%3D%22157%22%20cy%3D%22110%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.41%22/%3E%3Ccircle%20cx%3D%22134%22%20cy%3D%22162%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.58%22/%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%22237%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.68%22/%3E%3Ccircle%20cx%3D%22491%22%20cy%3D%22222%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.32%22/%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22219%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.67%22/%3E%3Ccircle%20cx%3D%22283%22%20cy%3D%2258%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.47%22/%3E%3Ccircle%20cx%3D%22562%22%20cy%3D%22296%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.25%22/%3E%3Ccircle%20cx%3D%2261%22%20cy%3D%22141%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.32%22/%3E%3Ccircle%20cx%3D%22374%22%20cy%3D%22270%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.49%22/%3E%3Ccircle%20cx%3D%22392%22%20cy%3D%22240%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.70%22/%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%22117%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.49%22/%3E%3Ccircle%20cx%3D%22107%22%20cy%3D%22237%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.25%22/%3E%3Ccircle%20cx%3D%22568%22%20cy%3D%22217%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.44%22/%3E%3Ccircle%20cx%3D%22568%22%20cy%3D%22217%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.80%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%22177%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.68%22/%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22248%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.59%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22165%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.21%22/%3E%3Ccircle%20cx%3D%22480%22%20cy%3D%22218%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.52%22/%3E%3Ccircle%20cx%3D%22560%22%20cy%3D%22130%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.70%22/%3E%3Ccircle%20cx%3D%22127%22%20cy%3D%2276%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.50%22/%3E%3Ccircle%20cx%3D%22458%22%20cy%3D%2298%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.70%22/%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%22222%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.60%22/%3E%3Ccircle%20cx%3D%22489%22%20cy%3D%22155%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.52%22/%3E%3Ccircle%20cx%3D%22314%22%20cy%3D%226%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.67%22/%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%22233%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.30%22/%3E%3Ccircle%20cx%3D%22284%22%20cy%3D%22218%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.40%22/%3E%3Ccircle%20cx%3D%22311%22%20cy%3D%22167%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.73%22/%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2257%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20opacity%3D%220.66%22/%3E%3C/svg%3E')
      center top / 600px 300px,
    linear-gradient(#04060a, #0b1322 85%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%20.5%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E')
    0 0 / 180px;
}

a {
  color: var(--accent);
  text-underline-offset: 0.22em;
  transition: color 0.25s;
}
a:hover {
  color: var(--text);
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
  border-radius: 3px;
}

header,
footer {
  width: min(100% - 3rem, 72rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
header {
  padding-block: 1.75rem;
}
.brand {
  display: inline-flex;
}
.brand img {
  width: 150px;
  height: auto;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid rgba(248, 249, 252, 0.14);
  border-radius: 999px;
  background: rgba(11, 14, 18, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.9rem;
  font-weight: 500;
}
nav a {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: var(--soft);
  text-decoration: none;
  line-height: 1.5;
  transition:
    color 0.25s,
    background-color 0.25s;
}
nav a:hover {
  color: var(--text);
  background: rgba(248, 249, 252, 0.08);
}
nav a[aria-current='page'] {
  color: var(--ink);
  background: var(--text);
}

/* Reading surface: its top edge is a glowing horizon arc, tinted per app. */
.paper {
  --arc: clamp(24px, 4.5vw, 64px);
  position: relative;
  margin-top: 170px;
  padding-top: 4rem;
  border-radius: 50% 50% 0 0 / var(--arc) var(--arc) 0 0;
  background:
    radial-gradient(900px 360px at 50% 0%, rgba(var(--glow-1), 0.06), transparent 70%), var(--slate);
}
/* The glowing horizon line fades out towards both edges. */
.paper::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--arc) * 2);
  border-top: 1px solid rgba(var(--glow-1), 0.9);
  border-radius: inherit;
  box-shadow:
    0 -2px 16px -2px rgba(var(--glow-1), 0.9),
    0 -18px 60px -16px rgba(var(--glow-1), 0.55);
  mask-image: linear-gradient(90deg, transparent 2%, #000 28%, #000 72%, transparent 98%);
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 28%, #000 72%, transparent 98%);
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
  width: min(100% - 3rem, 44rem);
  margin: 0 auto;
  padding-bottom: 6rem;
  min-height: 45vh;
}
main:focus {
  outline: none;
}
h1,
h2 {
  color: var(--text);
  line-height: 1.12;
}
h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -0.035em;
}
h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
p {
  margin: 0 0 1.1rem;
  color: var(--soft);
}
.eyebrow {
  margin-bottom: 1rem;
  font: 400 0.8rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.lead {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.55;
  color: var(--text);
}
.app-icon {
  display: block;
  margin-bottom: 1.75rem;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
}
.status {
  display: inline-block;
  padding: 0.25rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 400 0.8rem/1.6 var(--mono);
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* Resource cards: numbered, no arrows. */
.resources {
  display: grid;
  gap: 0.9rem;
  margin-top: 2.75rem;
  counter-reset: res;
}
.resources > a {
  position: relative;
  display: block;
  padding: 1.35rem 1.5rem 1.35rem 4.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 60%), var(--card);
  text-decoration: none;
  counter-increment: res;
  transition:
    border-color 0.35s var(--ease),
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.resources > a::before {
  content: counter(res, decimal-leading-zero);
  position: absolute;
  left: 1.5rem;
  top: 1.55rem;
  font: 400 0.8rem var(--mono);
  color: var(--accent);
}
.resources > a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(var(--glow-1), 0.55);
}
.resources h2 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}
.resources p {
  margin: 0;
  color: var(--muted);
}

/* Legal documents (bodies are unchanged app snapshots). */
.legal {
  font-size: 1.0625rem;
}
.legal h1 {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
}
.legal h2 {
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.updated {
  display: inline-block;
  margin-bottom: 2.5rem;
  font: 400 0.8rem/1.6 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
}

footer {
  position: relative;
  z-index: 1;
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
footer a {
  color: var(--soft);
}
.skip {
  position: absolute;
  z-index: 20;
  left: 1rem;
  top: -100px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--ink);
}
.skip:focus {
  top: 1rem;
}

@media (max-width: 560px) {
  header,
  footer,
  main {
    width: calc(100% - 2.5rem);
  }
  header {
    gap: 1rem;
  }
  nav {
    width: 100%;
    justify-content: space-between;
  }
  nav a {
    padding-inline: 0.7rem;
  }
  .paper {
    margin-top: 100px;
  }
  body::before {
    height: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* App accents: each app tints the horizon and accents on the shared CytechX shell. */
.theme-parkpulse {
  --accent: #bbb4ff;
  --glow-1: 187, 180, 255;
  --glow-2: 107, 92, 255;
  --glow-3: 47, 107, 255;
  --card: #1c1f33;
}
.theme-parkpulse .app-icon {
  border-radius: 22%;
}
.theme-ember {
  --accent: #f3ad91;
  --glow-1: 243, 173, 145;
  --glow-2: 201, 87, 58;
  --glow-3: 90, 42, 74;
  --card: #221d1c;
}