@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Work+Sans:wght@700&display=swap');

@font-face {
  font-family: "Lilex";
  src: local("Lilex"), local("Lilex Regular");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --design-width: 1920;
  --u: calc(100vw / var(--design-width));
  --paper: #230949;
  --paper-deep: #1e0748;
  --surface: #240b4a;
  --surface-raised: #2f1854;
  --ink: #f3ecfa;
  --muted: #b7a8cc;
  --accept: #4cf397;
  --accept-line: #c1ff3c;
  --refuse: #ff6c91;
  --buy: #ff8c38;
  --rule: #6b48a4;
  --rule-bright: #9d76cf;
  --rule-muted: #3f276f;
  --rule-accept: #4fe795;
  --rule-panel: max(1px, calc(2.3 * var(--u)));
  --rule-card: max(1px, calc(2.2 * var(--u)));
  --rule-input: max(1px, calc(1.8 * var(--u)));
  --rule-row: max(1px, calc(1.1 * var(--u)));
  --rule-heavy: max(1px, calc(4 * var(--u)));
  --gutter-left: calc(56 * var(--u));
  --gutter-right: calc(55 * var(--u));
  --ease-inspect: cubic-bezier(.22, .8, .25, 1);
  --ease-route: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; background: var(--paper); color-scheme: dark; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Lato", Arial, sans-serif;
  font-size: max(12px, calc(17 * var(--u)));
  line-height: 1.4;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
:where(button, input, select) { border: 0; }
button { cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }

.nav {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: calc(24 * var(--u)) var(--gutter-right) calc(18 * var(--u)) var(--gutter-left);
  background: var(--paper);
}
.pill {
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  height: calc(64 * var(--u));
  min-height: 48px;
  padding: 0 calc(12 * var(--u)) 0 calc(14 * var(--u));
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(10, 2, 28, .55);
}
.brand {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  color: var(--ink);
  font-family: "Work Sans", sans-serif;
  font-size: max(15px, calc(21 * var(--u)));
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}
.brand img {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  min-width: 40px;
  min-height: 40px;
  object-fit: contain;
}
.pill-tick { align-self: stretch; margin-block: calc(18 * var(--u)); }
.links {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  font-size: max(12px, calc(17 * var(--u)));
  font-weight: 700;
}
.links a {
  position: relative;
  padding-block: calc(6 * var(--u));
  color: var(--muted);
  text-decoration: none;
  transition: color 180ms var(--ease-inspect);
}
.links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-6 * var(--u));
  width: max(5px, calc(6 * var(--u)));
  height: max(5px, calc(6 * var(--u)));
  margin-left: calc(-3 * var(--u));
  border-radius: 50%;
  background: linear-gradient(90deg, #9b5cff, #2ee86f);
  opacity: 0;
  transform: scale(0);
  transition: opacity 180ms var(--ease-inspect), transform 180ms var(--ease-inspect);
}
.links a:hover { color: var(--ink); }
.links a.is-active, .links a[aria-current="page"] { color: var(--ink); }
.links a.is-active::after, .links a[aria-current="page"]::after { opacity: 1; transform: scale(1); }
.pill-social { display: flex; align-items: center; gap: calc(18 * var(--u)); font-size: max(12px, calc(16 * var(--u))); font-weight: 700; }
.pill-social a { display: flex; align-items: center; gap: calc(7 * var(--u)); color: var(--accept-line); text-decoration: none; }
.pill-social a:hover { color: var(--ink); }
.pill-social svg { width: max(13px, calc(16 * var(--u))); height: max(13px, calc(16 * var(--u))); fill: currentColor; }
.pill-ca {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(42 * var(--u));
  min-height: 34px;
  padding: 0 calc(8 * var(--u)) 0 calc(16 * var(--u));
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--muted);
  font-family: "Lilex", monospace;
  font-size: max(12px, calc(14 * var(--u)));
}
.pill-ca b { color: var(--ink); font-weight: 500; }
.pill-ca button {
  height: calc(28 * var(--u));
  min-height: 24px;
  padding: 0 calc(12 * var(--u));
  border-radius: 999px;
  background: var(--accept-line);
  color: var(--paper);
  font-family: "Lato", sans-serif;
  font-size: max(12px, calc(13 * var(--u)));
  font-weight: 700;
}
.pill-ca button:disabled { background: var(--surface); color: var(--muted); cursor: default; }
.is-disabled { cursor: default; opacity: .52; }
.nav-toggle { display: none; background: transparent; color: var(--ink); font-weight: 700; }

.page-frame {
  width: 100%;
  min-height: calc(1080 * var(--u));
  padding-inline: var(--gutter-left) var(--gutter-right);
  background: var(--paper);
  opacity: 1;
  transition: opacity 180ms var(--ease-route);
}
.page-frame.is-leaving { opacity: .18; }
.page-frame.is-entering { opacity: .3; }

.footer { padding: calc(28 * var(--u)) var(--gutter-right) 0 var(--gutter-left); background: var(--paper); }
.footer-row {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  min-height: calc(64 * var(--u));
  padding-block: calc(12 * var(--u));
  color: var(--muted);
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.35;
}
.footer-mark { width: calc(30 * var(--u)); height: calc(30 * var(--u)); min-width: 24px; min-height: 24px; object-fit: contain; }
.footer p { margin: 0; }
.footer-line { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(22 * var(--u)); row-gap: 4px; }
.footer-line p:first-child { color: var(--ink); }
.footer .sources { font-family: "Lilex", monospace; font-size: max(12px, calc(13 * var(--u))); }
.footer-launch { flex: none; display: flex; align-items: center; gap: calc(18 * var(--u)); font-weight: 700; }
.footer-launch a { color: var(--accept-line); text-decoration: none; }

/* Measured border vocabulary. Routes use these classes and never declare borders. */
.rule-panel { border: var(--rule-panel) solid var(--rule); }
.rule-card { border: var(--rule-card) solid var(--rule); }
.rule-input { border: var(--rule-input) solid var(--rule-bright); box-sizing: border-box; }
.rule-row { border-bottom: var(--rule-row) solid var(--rule-muted); }
.rule-column { border-right: var(--rule-row) solid var(--rule-muted); }
.rule-accept { border: var(--rule-panel) solid var(--rule-accept); }
.rule-heavy { border: var(--rule-heavy) solid var(--rule); }
.rule-stack > * + * { border-top: 0; }
.rule-no-bottom { border-bottom-width: 0; }
.rule-no-left { border-left-width: 0; }
.rule-lift { box-shadow: inset 0 var(--rule-row) 0 var(--rule-accept), 0 max(1px, calc(2 * var(--u))) 0 #234c53; }
.rule-drop { box-shadow: 0 max(1px, calc(2 * var(--u))) 0 #1d0042; }
.rule-columns > * + * { border-left: 0; }
.rule-pill { border: var(--rule-row) solid var(--rule); }
.rule-tick { border-left: var(--rule-row) solid var(--rule); }
.rule-base { border-bottom: var(--rule-row) solid var(--rule-muted); }

/* TAINT motion helpers: scan, UV flip, inspection ticks, rule growth. */
[data-uv-scan] { position: relative; overflow: hidden; }
[data-uv-scan]::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  background: var(--accept);
  opacity: 0;
  transform: translateX(-130%);
  pointer-events: none;
}
[data-uv-scan].is-scanning::after { animation: uv-scan 600ms var(--ease-inspect) both; }
[data-uv-flip] { transform-origin: 50% 0; backface-visibility: hidden; }
[data-uv-flip].is-resolving { animation: uv-flip 420ms var(--ease-inspect) both; }
[data-inspection-tick] { opacity: .42; transition: opacity 180ms var(--ease-inspect), transform 180ms var(--ease-inspect); }
[data-inspection-tick].is-checked { opacity: 1; transform: scale(.985); }
[data-rule-grow] { transform: scaleX(0); transform-origin: left center; }
[data-rule-grow].is-grown { transform: scaleX(1); transition: transform 600ms var(--ease-inspect); }
[data-uv-reveal] { opacity: 0; transform: perspective(900px) rotateX(-8deg); transform-origin: top; }
[data-uv-reveal].is-visible { opacity: 1; transform: perspective(900px) rotateX(0); transition: opacity 420ms var(--ease-inspect), transform 420ms var(--ease-inspect); }
@keyframes uv-scan { 0% { opacity: 0; transform: translateX(-130%); } 18% { opacity: .9; } 100% { opacity: 0; transform: translateX(1300%); } }
@keyframes uv-flip { 0% { opacity: .4; transform: perspective(900px) rotateX(-12deg); } 100% { opacity: 1; transform: perspective(900px) rotateX(0); } }

@media (max-width: 1023px) {
  :root { --u: 1px; --gutter-left: 20px; --gutter-right: 20px; }
  body { font-size: 15px; }
  .nav { padding: 12px 12px 8px; }
  .pill { position: relative; width: 100%; height: 56px; gap: 14px; padding: 0 10px 0 12px; }
  .brand { gap: 8px; font-size: 17px; margin-right: auto; }
  .pill-tick, .pill-ca { display: none; }
  .pill-social { gap: 14px; font-size: 14px; }
  .pill-social a span { display: none; }
  .pill-social svg { width: 18px; height: 18px; }
  .nav-toggle { display: block; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--paper-deep); font-size: 14px; }
  .links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 10px 18px 14px;
    border-radius: 24px;
    background: var(--surface-raised);
    box-shadow: 0 10px 28px rgba(10, 2, 28, .55);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 180ms var(--ease-route), transform 180ms var(--ease-route);
  }
  .nav.is-open .links { opacity: 1; transform: none; pointer-events: auto; }
  .links a { padding: 12px 6px 12px 18px; font-size: 15px; }
  .links a::after { left: 4px; bottom: 50%; margin: 0 0 -3px 0; }
  .page-frame { min-height: calc(100vh - 76px - 120px); padding-inline: 20px; }
  .footer { padding: 24px 20px 0; }
  .footer-row { flex-wrap: wrap; padding-block: 18px; }
  .footer-launch { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .page-frame, .page-frame.is-leaving, .page-frame.is-entering, [data-uv-reveal], [data-uv-flip], [data-inspection-tick] { opacity: 1; transform: none; }
  [data-rule-grow] { transform: scaleX(1); }
}