/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Hallmark · macrostructure: Mobile Arcade Dashboard · tone: electric utilitarian · anchor hue: violet-cyan
 * Theme: screenshot-matched Arcade Dynamic · axes: dark / geometric-sans / cool-neon · native CSS · fresh DOM vocabulary
 */

:root {
  --pp-color-bg: oklch(16% 0.028 265);
  --pp-color-bg-deep: oklch(10% 0.03 265);
  --pp-color-panel: oklch(21% 0.032 265 / 0.88);
  --pp-color-panel-soft: oklch(24% 0.032 265 / 0.78);
  --pp-color-panel-high: oklch(30% 0.03 265 / 0.88);
  --pp-color-ink: oklch(91% 0.018 275);
  --pp-color-muted: oklch(73% 0.032 284);
  --pp-color-subtle: oklch(58% 0.035 284);
  --pp-color-line: oklch(48% 0.04 284 / 0.42);
  --pp-color-line-strong: oklch(76% 0.12 195 / 0.45);
  --pp-color-primary: oklch(79% 0.14 305);
  --pp-color-primary-deep: oklch(62% 0.2 300);
  --pp-color-primary-soft: oklch(42% 0.12 300 / 0.32);
  --pp-color-secondary: oklch(82% 0.16 205);
  --pp-color-secondary-deep: oklch(65% 0.14 205);
  --pp-color-secondary-soft: oklch(42% 0.11 205 / 0.24);
  --pp-color-tertiary: oklch(79% 0.16 160);
  --pp-color-tertiary-soft: oklch(42% 0.11 160 / 0.24);
  --pp-color-coral: oklch(72% 0.18 18);
  --pp-color-amber: oklch(82% 0.16 82);
  --pp-color-focus: var(--pp-color-secondary);
  --pp-color-card-shadow: oklch(4% 0.03 265 / 0.46);
  --pp-color-glow-primary: oklch(72% 0.19 300 / 0.38);
  --pp-color-glow-secondary: oklch(80% 0.16 205 / 0.34);
  --pp-font-display: "Sora", "Inter", system-ui, sans-serif;
  --pp-font-body: "Hanken Grotesk", "Inter", system-ui, sans-serif;
  --pp-font-mono: "Space Mono", ui-monospace, monospace;
  --pp-space-2xs: 0.25rem;
  --pp-space-xs: 0.5rem;
  --pp-space-sm: 0.75rem;
  --pp-space-md: 1rem;
  --pp-space-lg: 1.5rem;
  --pp-space-xl: 2rem;
  --pp-space-2xl: 3rem;
  --pp-space-3xl: 4rem;
  --pp-radius-sm: 0.5rem;
  --pp-radius-md: 0.75rem;
  --pp-radius-lg: 1rem;
  --pp-radius-xl: 1.45rem;
  --pp-radius-pill: 999px;
  --pp-rule: 1px solid var(--pp-color-line);
  --pp-shadow-sm: 0 10px 26px var(--pp-color-card-shadow);
  --pp-shadow-md: 0 18px 44px var(--pp-color-card-shadow);
  --pp-shadow-glow: 0 0 28px var(--pp-color-glow-secondary), 0 0 46px var(--pp-color-glow-primary);
  --pp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pp-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --pp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pp-dur-fast: 140ms;
  --pp-dur: 240ms;
  --pp-dur-slow: 520ms;
  --pp-max: min(100% - 2rem, 1180px);
  --pp-mobile-max: 430px;
  --pp-header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; background: var(--pp-color-bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--pp-color-ink);
  background:
    radial-gradient(circle at 12% -6%, var(--pp-color-primary-soft), transparent 19rem),
    radial-gradient(circle at 95% 10%, var(--pp-color-secondary-soft), transparent 18rem),
    radial-gradient(circle at 50% 110%, var(--pp-color-tertiary-soft), transparent 18rem),
    linear-gradient(180deg, var(--pp-color-bg), var(--pp-color-bg-deep));
  font-family: var(--pp-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.36;
  background-image:
    linear-gradient(var(--pp-color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pp-color-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, black, transparent 72%);
  z-index: -1;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--pp-color-focus); outline-offset: 3px; }
.pp-wrap { width: var(--pp-max); margin-inline: auto; }
.pp-mobile-shell { width: min(100%, var(--pp-mobile-max)); margin-inline: auto; padding-inline: var(--pp-space-md); }
.pp-sr, .pp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pp-skip {
  position: absolute;
  left: -999px;
  top: var(--pp-space-sm);
  z-index: 1000;
  padding: var(--pp-space-xs) var(--pp-space-md);
  background: var(--pp-color-secondary);
  color: var(--pp-color-bg-deep);
  border-radius: var(--pp-radius-pill);
  font-weight: 800;
}
.pp-skip:focus { left: var(--pp-space-sm); }
.pp-stamp {
  margin: 0 0 var(--pp-space-xs);
  font-family: var(--pp-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--pp-color-secondary);
}
h1, h2, h3 {
  font-family: var(--pp-font-display);
  line-height: 1.03;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.pp-loading {
  padding: var(--pp-space-xl);
  color: var(--pp-color-muted);
  font-family: var(--pp-font-mono);
  text-align: center;
}
.pp-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--pp-dur-slow) var(--pp-ease-out), transform var(--pp-dur-slow) var(--pp-ease-out);
}
.pp-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .pp-reveal { opacity: 1; transform: none; }
}