:root {
  color-scheme: dark;
  --ink: #0a0a0c;
  --paper: #e9e7e1;
  --paper-ink: #0a0a0c;
  --paper-dim: rgba(10,10,12,.68);
  --line: rgba(255,255,255,.15);
  --line-soft: rgba(255,255,255,.08);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --accent-rgb: 59 130 246;
  --accent-soft-rgb: 147 197 253;
  --accent-deep-rgb: 37 99 235;
  --accent-hover-rgb: 29 78 216;
  --accent-ink-rgb: 29 78 216;
}
[data-accent="amber"] {
  --accent-rgb: 245 158 11;
  --accent-soft-rgb: 252 211 77;
  --accent-deep-rgb: 180 83 9;
  --accent-hover-rgb: 120 53 15;
  --accent-ink-rgb: 146 64 14;
}
[data-accent="rose"] {
  --accent-rgb: 251 113 133;
  --accent-soft-rgb: 253 164 175;
  --accent-deep-rgb: 190 24 60;
  --accent-hover-rgb: 136 19 55;
  --accent-ink-rgb: 159 18 57;
}

[data-accent="amber"] .bg-accent-deep {
  background-color: rgb(var(--accent-rgb)) !important;
  color: #0a0a0c !important;
}
[data-accent="amber"] .hover\:bg-accent-hover:hover {
  background-color: rgb(var(--accent-soft-rgb)) !important;
}

html, body { background-color: #0a0a0c; }
html { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }
body {
  color: #ffffff;
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: rgb(var(--accent-rgb)); color: #fff; }

.shell { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }
@supports (padding: max(0px)) {
  .shell {
    padding-left: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left));
    padding-right: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right));
  }
}

.display {
  font-family: 'Oswald', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .9;
}
.meta {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
}
@media (min-width: 640px) { .meta { font-size: 11px; } }

.paper {
  background-color: var(--paper);
  color: var(--paper-ink);
  --line: rgba(10,10,12,.22);
  --line-soft: rgba(10,10,12,.13);
  background-image: radial-gradient(rgba(10,10,12,.11) 1px, transparent 1px);
  background-size: 26px 26px;
}
.paper [class*="text-white/"] { color: var(--paper-dim) !important; }
.paper .text-white { color: var(--paper-ink) !important; }
.paper .text-accent { color: rgb(var(--accent-ink-rgb)) !important; }
.paper .hover\:text-white:hover,
.paper .group:hover .group-hover\:text-white { color: var(--paper-ink) !important; }
.paper .hover\:text-accent:hover,
.paper .group:hover .group-hover\:text-accent { color: rgb(var(--accent-ink-rgb)) !important; }
.paper [class*="border-white/"] { border-color: rgba(10,10,12,.2) !important; }
.paper [class*="divide-white/"] > * { border-color: rgba(10,10,12,.14) !important; }
.paper [class*="bg-white/"]:not([class*="hover:bg-white/"]) { background-color: rgba(10,10,12,.13) !important; }
.paper [class*="hover:bg-white/"] { background-color: transparent !important; }
.paper [class*="hover:bg-white/"]:hover { background-color: rgba(10,10,12,.05) !important; }
.paper .border-accent { border-color: rgb(var(--accent-ink-rgb)) !important; }
.paper .bg-accent { background-color: rgb(var(--accent-ink-rgb)) !important; }
.paper .cross::before, .paper .cross::after { background: rgba(10,10,12,.4); }
.paper .cell:hover { background-color: rgb(var(--accent-ink-rgb) / .05); }
.paper .spec { border-top-color: rgba(10,10,12,.13); }
.paper .spec > * { border-bottom-color: rgba(10,10,12,.13); }
.paper .ghost { color: rgba(10,10,12,.055); }
.paper :focus-visible { outline-color: rgb(var(--accent-ink-rgb)); }
.paper .tech summary .sign::before, .paper .tech summary .sign::after,
.paper .faq summary .sign::before, .paper .faq summary .sign::after { background: rgb(var(--accent-ink-rgb)); }

.band-accent {
  background-color: rgb(var(--accent-deep-rgb));
  color: #ffffff;
  --line: rgba(255,255,255,.4);
  --line-soft: rgba(255,255,255,.22);
}
.band-accent [class*="text-white/"] { color: rgba(255,255,255,.94) !important; }
.band-accent .text-accent { color: #ffffff !important; }
.band-accent [class*="border-white/"] { border-color: rgba(255,255,255,.38) !important; }
.band-accent [class*="bg-white/"]:not([class*="hover:bg-white/"]) { background-color: rgba(255,255,255,.38) !important; }
.band-accent .bg-accent-deep { background-color: #0a0a0c !important; color: #ffffff !important; }
.band-accent .hover\:bg-accent-hover:hover { background-color: #22222b !important; }
.band-accent .bg-ink { background-color: #ffffff !important; color: #0a0a0c !important; }
.band-accent .bg-ink .text-white { color: #0a0a0c !important; }
.band-accent .bg-ink [class*="text-white/"] { color: rgba(10,10,12,.7) !important; }
.band-accent .bg-ink .text-accent { color: rgb(var(--accent-ink-rgb)) !important; }
.band-accent .bg-ink.group:hover .group-hover\:text-accent,
.band-accent .bg-ink .group:hover .group-hover\:text-accent { color: rgb(var(--accent-ink-rgb)) !important; }
.band-accent [class*="hover:bg-white/"]:hover { background-color: rgba(255,255,255,.85) !important; }
.band-accent .cross::before, .band-accent .cross::after { background: rgba(255,255,255,.55); }
.band-accent .ghost { color: rgba(255,255,255,.09); }
.band-accent :focus-visible { outline-color: #ffffff; }
@keyframes hazardRun { to { background-position: 25.46px 0; } }
.js [data-wipe].in::before { transform: scaleY(0); transition: transform 1s var(--ease-out); }
.js [data-rise].in { opacity: 1; transform: none; transition: opacity .75s var(--ease) var(--d,0s), transform .75s var(--ease) var(--d,0s); }
.js [data-stagger].in > * { opacity: 1; transform: none; transition: opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s); }

.js [data-rise] .meta > .h-px { transform: scaleX(0); transform-origin: left center; }
.js [data-rise].in .meta > .h-px { transform: none; transition: transform .9s var(--ease-out) .18s; }

.line {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
  padding-top: .16em;
  margin-top: -.16em;
}
.line > span { display: block; }
.js .line > span { transform: translateY(105%); }
.js .line.in > span { transform: none; transition: transform 1.05s var(--ease-out) var(--d,0s); }

@media (hover: hover) and (pointer: fine) {
  .paper .spot::before {
    mix-blend-mode: multiply;
    background: radial-gradient(300px circle at var(--mx,50%) var(--my,0%), rgb(var(--accent-ink-rgb) / .12), transparent 62%);
  }
}

@keyframes caret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .5 } 70%,100% { transform: scale(2.8); opacity: 0 } }
@keyframes panelNext { from { opacity: 0; transform: translate3d(30px,0,0) } to { opacity: 1; transform: none } }
@keyframes panelPrev { from { opacity: 0; transform: translate3d(-30px,0,0) } to { opacity: 1; transform: none } }
@keyframes wire { to { background-position: 145% 0 } }

.spec { border-top: 1px solid var(--line-soft); }
.spec > * { border-bottom: 1px solid var(--line-soft); }
.tech summary .sign { position: relative; width: 14px; height: 14px; flex: none; }
.tech summary .sign::before, .tech summary .sign::after {
  content: ''; position: absolute; background: rgb(var(--accent-rgb)); transition: transform .3s var(--ease);
}
.tech summary .sign::before { left: 0; right: 0; top: 6px; height: 2px; }
.tech summary .sign::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.tech[open] summary .sign::after { transform: scaleY(0); }

.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 1.5rem; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .sign { position: relative; width: 12px; height: 12px; flex: none; }
.faq summary .sign::before, .faq summary .sign::after {
  content: ''; position: absolute; background: rgb(var(--accent-rgb)); transition: transform .3s var(--ease);
}
.faq summary .sign::before { left: 0; right: 0; top: 5px; height: 2px; }
.faq summary .sign::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.faq[open] summary .sign::after { transform: scaleY(0); }
:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 2px; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #0a0a0c; }
body::-webkit-scrollbar-thumb { background: #2a2a33; border: 3px solid #0a0a0c; }
body::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent-rgb)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; animation-delay: 0s !important;
  }
  .js [data-rise], .js [data-stagger] > *, .js .line > span,
  .js .col .bar, .boot p, .log-line, .js [data-rise] .meta > .h-px { opacity: 1 !important; transform: none !important; }
}

.kpi { font-variant-numeric: tabular-nums; }