@font-face{font-family:"DM Mono";src:url("assets/fonts/dmmono_400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url("assets/fonts/dmmono_500.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url("assets/fonts/montserrat_400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url("assets/fonts/montserrat_500.ttf") format("truetype");font-style:normal;font-weight:500 600;font-display:swap}
@font-face{font-family:Montserrat;src:url("assets/fonts/montserrat_700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url("assets/fonts/splinesansmono_500.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url("assets/fonts/splinesansmono_700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}

:root {
  --u: calc(100vw / 1920);
  --paper: #15131e;
  --surface: #1b1a27;
  --surface-raised: #23212d;
  --hairline: #3b3743;
  --text: #f4f0e8;
  --muted: #a7a1a3;
  --receipt: #f0e2c7;
  --receipt-ink: #211b19;
  --emerald: #73e6b1;
  --lilac: #b8a4ff;
  --usdc: #2775ca;
  --danger: #ff716c;
  --page-ground: linear-gradient(180deg, #171522 0%, #15131e 52%, #12131d 100%);
  --font-display: "Montserrat", sans-serif;
  --font-number: "DM Mono", monospace;
  --font-label: "Spline Sans Mono", monospace;
  --rail-width: calc(280 * var(--u));
  --page-gutter: calc(36 * var(--u));
  --ease-feed: cubic-bezier(.22, .78, .18, 1);
  --ease-snap: cubic-bezier(.2, .9, .28, 1.18);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--page-ground);
  color: var(--text);
  font-family: var(--font-display);
  font-size: max(12px, calc(16 * var(--u)));
  font-weight: 400;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-shell {
  position: relative;
  display: grid;
  min-height: calc(1080 * var(--u));
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  align-items: stretch;
}

.site-shell::before {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: var(--rail-width);
  border-right: 1px solid #3a3347;
  background: linear-gradient(180deg, #11101a 0%, #151220 100%);
  content: "";
  pointer-events: none;
}

[data-chrome="nav"] {
  position: sticky;
  z-index: 20;
  top: 0;
  align-self: start;
  width: var(--rail-width);
  height: 100vh;
  min-height: 0;
  border-right: 1px solid #3a3347;
  background: linear-gradient(180deg, #11101a 0%, #151220 100%);
  color: #ede9f2;
}

[data-chrome="nav"] .rail {
  position: relative;
  display: flex;
  width: var(--rail-width);
  height: 100vh;
  flex-direction: column;
  padding: calc(48 * var(--u)) calc(22 * var(--u)) calc(34 * var(--u));
  font-family: var(--font-label);
}

[data-chrome="nav"] .brand {
  height: calc(150 * var(--u));
  flex: 0 0 auto;
  border-bottom: 1px solid #3a3347;
  text-align: center;
}

[data-chrome="nav"] .brand img {
  display: block;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  margin: 0 auto calc(10 * var(--u));
  object-fit: contain;
}

[data-chrome="nav"] .word {
  font: 700 max(12px, calc(22 * var(--u)))/1 var(--font-display);
  letter-spacing: .26em;
}

[data-chrome="nav"] .routes {
  display: grid;
  gap: calc(8 * var(--u));
  padding: calc(25 * var(--u)) 0;
}

[data-chrome="nav"] .routes a {
  position: relative;
  display: flex;
  height: calc(58 * var(--u));
  min-height: 38px;
  align-items: center;
  gap: calc(15 * var(--u));
  padding: 0 calc(16 * var(--u));
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: calc(5 * var(--u));
  color: #b8afcb;
  font-size: max(12px, calc(15 * var(--u)));
}

[data-chrome="nav"] .routes a::before {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  min-width: 9px;
  min-height: 9px;
  border: 2px solid #8f86a3;
  border-radius: calc(3 * var(--u));
  content: "";
  transition: transform 180ms var(--ease-snap), border-radius 180ms var(--ease-snap), background 180ms var(--ease-snap);
}

[data-chrome="nav"] .routes a::after,
[data-chrome="nav"] .social a::after {
  position: absolute;
  inset: auto 12% 0;
  height: 1px;
  background: var(--emerald);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease-feed);
}

[data-chrome="nav"] .routes a:hover::after,
[data-chrome="nav"] .routes a:focus-visible::after,
[data-chrome="nav"] .social a:hover::after,
[data-chrome="nav"] .social a:focus-visible::after { transform: scaleX(1); }

[data-chrome="nav"] .routes a.is-active {
  border-color: #3a3347;
  background: #201b2b;
  box-shadow: inset calc(4 * var(--u)) 0 #00c078;
  color: #fff;
}

[data-chrome="nav"] .routes a.is-active::before {
  border-color: #00c078;
  border-radius: 50%;
  background: #00c078;
  box-shadow: 0 0 calc(14 * var(--u)) #00c078;
  transform: scale(.92);
}

[data-chrome="nav"] .social {
  display: grid;
  gap: calc(12 * var(--u));
  margin-top: auto;
  padding-top: calc(24 * var(--u));
  border-top: 1px solid #3a3347;
}

[data-chrome="nav"] .social a {
  position: relative;
  padding: calc(3 * var(--u)) 0;
  color: #c4bdd2;
  font-size: max(12px, calc(14 * var(--u)));
}

@media (min-width: 1024px) and (max-height: 900px) {
  [data-chrome="nav"] .rail { padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); }
  [data-chrome="nav"] .brand { height: calc(105 * var(--u)); }
  [data-chrome="nav"] .brand img { width: calc(58 * var(--u)); height: calc(58 * var(--u)); margin-bottom: calc(7 * var(--u)); }
  [data-chrome="nav"] .routes { gap: calc(4 * var(--u)); padding: calc(14 * var(--u)) 0; }
  [data-chrome="nav"] .routes a { height: calc(47 * var(--u)); min-height: 34px; }
  [data-chrome="nav"] .social { gap: calc(6 * var(--u)); padding-top: calc(12 * var(--u)); }
}

@media (min-width: 1024px) and (max-height: 760px) {
  [data-chrome="nav"] .rail { padding-block: calc(12 * var(--u)); }
  [data-chrome="nav"] .brand { height: calc(82 * var(--u)); }
  [data-chrome="nav"] .brand img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); margin-bottom: calc(5 * var(--u)); }
  [data-chrome="nav"] .routes { gap: calc(2 * var(--u)); padding-block: calc(9 * var(--u)); }
  [data-chrome="nav"] .routes a { height: calc(42 * var(--u)); min-height: 32px; }
  [data-chrome="nav"] .social { gap: calc(3 * var(--u)); padding-top: calc(8 * var(--u)); }
}

.drawer-toggle, .nav-mobile { display: none; }

.page-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: calc(1080 * var(--u));
  margin-left: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  outline: 0;
  transform-origin: 50% 0;
}

.route-mount { min-height: calc(1080 * var(--u)); }

.page-frame.is-leaving {
  opacity: .12;
  clip-path: inset(0 0 92% 0);
  transition: opacity 180ms var(--ease-feed), clip-path 180ms var(--ease-feed);
}

.page-frame.route-printed { animation: route-print 420ms var(--ease-feed) both; }

[data-receipt-feed] {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateX(calc(-2 * var(--u)));
}

[data-receipt-feed].is-printed {
  opacity: 1;
  clip-path: inset(0);
  transform: translateX(0);
  transition: opacity 90ms linear, clip-path 420ms var(--ease-feed), transform 260ms steps(2, end);
}

[data-grow] { transform: scaleX(0); transform-origin: left; }
[data-grow].is-printed { transform: scaleX(1); transition: transform 420ms var(--ease-feed); }

@keyframes route-print {
  0% { opacity: .18; clip-path: inset(0 0 100% 0); transform: translateX(calc(-2 * var(--u))); }
  48% { transform: translateX(calc(2 * var(--u))); }
  100% { opacity: 1; clip-path: inset(0); transform: translateX(0); }
}

[data-chrome="footer"] {
  position: relative;
  z-index: 21;
  display: grid;
  width: 100%;
  height: calc(124 * var(--u));
  min-height: 82px;
  grid-template-columns: var(--rail-width) 1.15fr 1.3fr .95fr;
  align-items: center;
  border-top: 1px solid #3a3347;
  background: #15121f;
  color: #ede9f2;
  font: 500 max(12px, calc(14 * var(--u)))/1.45 var(--font-label);
}

[data-chrome="footer"] > div {
  display: flex;
  height: calc(66 * var(--u));
  min-height: 44px;
  align-items: center;
  padding: 0 calc(34 * var(--u));
  border-right: 1px solid #3a3347;
}

[data-chrome="footer"] .brand {
  gap: calc(16 * var(--u));
  font: 700 max(12px, calc(20 * var(--u)))/1 var(--font-display);
  letter-spacing: .22em;
}

[data-chrome="footer"] .brand img {
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  object-fit: contain;
}

[data-chrome="footer"] .source,
[data-chrome="footer"] .links { color: #b7afca; }
[data-chrome="footer"] .boundary { color: #ede9f2; }
[data-chrome="footer"] .links { justify-content: space-between; border-right: 0; }
[data-chrome="footer"] .links a:hover,
[data-chrome="footer"] .links a:focus-visible { color: var(--emerald); outline: 0; }
[data-chrome="footer"] .ca { color: #00df99; }

@media (max-width: 1023px) {
  :root { --rail-width: 0px; --page-gutter: 20px; }
  .site-shell { display: block; min-height: 100vh; }
  .site-shell::before { display: none; }

  [data-chrome="nav"] {
    position: sticky;
    top: 0;
    width: 100%;
    height: 72px;
    min-height: 72px;
    border-right: 0;
  }

  [data-chrome="nav"] .rail {
    position: relative;
    width: 100%;
    height: 72px;
    padding: 0 18px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 1px solid #3a3347;
  }

  [data-chrome="nav"] .brand {
    display: flex;
    width: auto;
    height: 71px;
    align-items: center;
    gap: 12px;
    border-bottom: 0;
  }

  [data-chrome="nav"] .brand img { width: 48px; height: 48px; margin: 0; }
  [data-chrome="nav"] .word { font-size: 15px; }
  .nav-desktop, [data-chrome="nav"] .social { display: none !important; }

  .drawer-toggle {
    display: flex;
    min-width: 94px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #635a75;
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    font: 700 12px/1 var(--font-label);
    text-transform: uppercase;
  }

  .drawer-toggle i,
  .drawer-toggle i::before,
  .drawer-toggle i::after { display: block; width: 18px; height: 1px; background: currentColor; content: ""; transition: transform 180ms var(--ease-snap); }
  .drawer-toggle i::before { transform: translateY(-5px); }
  .drawer-toggle i::after { transform: translateY(4px); }
  .drawer-open .drawer-toggle i { background: transparent; }
  .drawer-open .drawer-toggle i::before { transform: translateY(0) rotate(45deg); }
  .drawer-open .drawer-toggle i::after { transform: translateY(-1px) rotate(-45deg); }

  .nav-mobile {
    position: fixed;
    z-index: -1;
    inset: 72px 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--hairline);
    background: #12101a;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition: opacity 180ms linear, clip-path 260ms var(--ease-feed);
  }

  .drawer-open .nav-mobile { opacity: 1; clip-path: inset(0); pointer-events: auto; }
  .nav-mobile > a { min-height: 58px; padding: 20px 18px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); color: #c8bed7; font: 500 12px/1.25 var(--font-label); }
  .nav-mobile > a.is-active { color: var(--emerald); background: rgba(115, 230, 177, .07); box-shadow: inset 3px 0 var(--emerald); }
  .mobile-actions { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .mobile-actions a { padding: 18px; color: var(--muted); font: 500 12px/1.2 var(--font-label); text-align: center; }

  .page-frame { width: 100%; min-height: calc(100vh - 72px); margin-left: 0; }
  .route-mount { min-height: calc(100vh - 72px); }

  [data-chrome="footer"] {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 18px;
  }

  [data-chrome="footer"] > div { height: auto; min-height: 54px; padding: 12px 0; border-right: 0; border-bottom: 1px solid #3a3347; }
  [data-chrome="footer"] .brand img { width: 46px; height: 46px; }
  [data-chrome="footer"] .links { border-bottom: 0; gap: 20px; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 430px) {
  [data-chrome="nav"] .rail { padding-inline: 14px; }
  .nav-mobile > a { padding-inline: 15px; }
  .mobile-actions { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .page-frame, [data-receipt-feed], [data-grow] { opacity: 1 !important; clip-path: none !important; transform: none !important; }
}