@font-face { font-family: "Nunito Sans"; src: url("assets/fonts/nunito-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("assets/fonts/nunito-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("assets/fonts/nunito-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("assets/fonts/nunito-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("assets/fonts/roboto-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("assets/fonts/roboto-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --u: calc(100vw / 1920);
  --paper: #FAFAF9;
  --surface: #FEFEFE;
  --ink: #111827;
  --muted: #68728A;
  --hairline: #D9E1E8;
  --teal: #155E75;
  --coral: #FCA5A5;
  --selection: #DFF2FF;
  --font-ui: "Nunito Sans", sans-serif;
  --font-label: Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --radius-panel: calc(12 * var(--u));
  --radius-control: calc(8 * var(--u));
  --motion-fast: 220ms;
  --motion-base: 320ms;
  --motion-resolve: 640ms;
  --ease-land: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; background: var(--paper); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: max(12px, calc(16 * var(--u)));
  line-height: 1.35;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.page-frame {
  width: calc(1765 * var(--u));
  min-height: calc(1963 * var(--u));
  margin-left: calc(74 * var(--u));
  margin-right: calc(81 * var(--u));
  padding: 0;
  background: transparent;
  transform-origin: 50% 0;
  transition: transform var(--motion-fast) var(--ease-land), opacity var(--motion-fast) var(--ease-land);
}

main.is-leaving { transform: translateY(calc(-5 * var(--u))) rotate(-.06deg); opacity: .72; }
main.is-sorting > .route-root { animation: route-land var(--motion-base) var(--ease-land) both; }
@keyframes route-land {
  from { transform: translateX(calc(11 * var(--u))) rotate(.08deg); opacity: .82; }
  to { transform: translateX(0) rotate(0); opacity: 1; }
}

[data-chrome="nav"] {
  position: relative;
  width: 100% !important;
  height: calc(80 * var(--u)) !important;
  padding: 0 calc(48 * var(--u)) !important;
  grid-template-columns: calc(280 * var(--u)) 1fr auto !important;
  background: var(--paper) !important;
}
[data-chrome="nav"] .brand { gap: calc(2 * var(--u)); font-size: max(12px, calc(15 * var(--u))); }
[data-chrome="nav"] .brand img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); transform:scale(1.45); transform-origin:center; }
[data-chrome="nav"] .nav-desktop { gap: calc(28 * var(--u)); font-size: max(12px, calc(15 * var(--u))); }
[data-chrome="nav"] .nav-desktop > a { height: calc(80 * var(--u)); padding-top: calc(32 * var(--u)); }
[data-chrome="nav"] .social { gap: calc(24 * var(--u)); margin-left: calc(30 * var(--u)); font-size: max(12px, calc(15 * var(--u))); }
[data-chrome="nav"] .social .x { font-size: calc(24 * var(--u)); }
[data-chrome="nav"] .social a { color: inherit; text-decoration: none; }
[data-chrome="nav"] a:focus-visible, [data-chrome="nav"] button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
[data-chrome="nav"] .nav-desktop > a:hover { color: var(--teal); }
.menu-toggle, .mobile-drawer { display: none; }

[data-chrome="footer"] {
  width: 100% !important;
  height: calc(60 * var(--u)) !important;
  padding: calc(6 * var(--u)) calc(48 * var(--u)) !important;
  grid-template-columns: 1fr auto !important;
  gap: calc(20 * var(--u)) !important;
  background: var(--paper) !important;
  font-size: max(12px, calc(13 * var(--u))) !important;
}
[data-chrome="footer"] > div:first-child { column-gap: calc(12 * var(--u)) !important; }
[data-chrome="footer"] .lockup { gap: calc(8 * var(--u)); font-size: max(12px, calc(15 * var(--u))); }
[data-chrome="footer"] .lockup img { width: calc(30 * var(--u)); height: calc(22 * var(--u)); }
[data-chrome="footer"] .source { font-size: max(12px, calc(10 * var(--u))); margin-top: calc(2 * var(--u)); }
[data-chrome="footer"] .actions { gap: calc(16 * var(--u)); }
[data-chrome="footer"] .ca { padding: calc(7 * var(--u)) calc(13 * var(--u)); border-radius: calc(7 * var(--u)); }
[data-chrome="footer"] .actions a { color:inherit; text-decoration:none; }
[data-chrome="footer"] .ca { border:0; font:inherit; cursor:pointer; }

[data-shoebox-toast] { position:fixed; z-index:1000; left:50%; bottom:calc(28 * var(--u)); max-width:min(620px,calc(100vw - 32px)); padding:calc(13 * var(--u)) calc(20 * var(--u)); border:1px solid #A9C7D0; border-radius:calc(8 * var(--u)); background:#101B2D; color:#fff; box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) #10203a2e; font-size:max(14px,calc(16 * var(--u))); transform:translate(-50%,calc(20 * var(--u))); opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease; }
[data-shoebox-toast].is-visible { transform:translate(-50%,0); opacity:1; }

/* Route authors use these helpers so motion always feels like sorting receipts. */
[data-receipt-row], [data-sort-reveal] { transform-origin: 50% 50%; }
[data-receipt-row].is-waiting:nth-child(odd), [data-sort-reveal].is-waiting:nth-child(odd) { transform: translateX(calc(-12 * var(--u))) rotate(-.12deg); opacity: .76; }
[data-receipt-row].is-waiting:nth-child(even), [data-sort-reveal].is-waiting:nth-child(even) { transform: translateX(calc(12 * var(--u))) rotate(.12deg); opacity: .76; }
[data-receipt-row].is-landed, [data-sort-reveal].is-landed { transform: translateX(0) rotate(0); opacity: 1; transition: transform var(--motion-base) var(--ease-land), opacity var(--motion-fast) var(--ease-land); }
[data-receipt-row][role="button"]:hover, a[data-receipt-row]:hover { transform: translateX(calc(3 * var(--u))); }
[data-grow-bar] { transform: scaleX(0); transform-origin: left center; }
[data-grow-bar].is-grown { transform: scaleX(1); transition: transform var(--motion-resolve) var(--ease-land); }
[data-balance-tick]::after { content: "✓"; display: inline-block; margin-left: calc(7 * var(--u)); color: var(--teal); transform: scale(.35) rotate(-10deg); opacity: 0; }
[data-balance-tick].is-balanced::after { transform: scale(1) rotate(0); opacity: 1; transition: transform var(--motion-base) var(--ease-land), opacity var(--motion-fast) var(--ease-land); }
button:active, .button:active { transform: scale(.985); }

@media (max-width: 1023.98px) {
  :root { --u: 1px; }
  body { font-size: 16px; }
  [data-chrome="nav"] {
    height: 68px !important;
    padding: 0 18px !important;
    display: flex !important;
    justify-content: space-between;
    background: var(--paper) !important;
  }
  [data-chrome="nav"] .brand { gap: 2px; font-size: 14px; }
  [data-chrome="nav"] .brand img { width: 40px; height: 40px; }
  [data-chrome="nav"] .nav-desktop, [data-chrome="nav"] .social { display: none; }
  .menu-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 11px 9px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface);
    align-content: space-between;
  }
  .menu-toggle > span:not(.sr-only) { display: block; width: 24px; height: 2px; background: var(--ink); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
  [data-chrome="nav"] .mobile-drawer {
    position: absolute;
    z-index: 20;
    top: 68px;
    right: 0;
    left: 0;
    display: none;
    gap: 0;
    padding: 10px 18px 18px;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    pointer-events: none;
  }
  [data-chrome="nav"] .mobile-drawer.is-open { display: grid; pointer-events: auto; }
  [data-chrome="nav"] .mobile-drawer > a { height: 43px; padding: 13px 4px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
  [data-chrome="nav"] .mobile-drawer > a.is-active { border-bottom: 2px solid var(--teal); }
  .mobile-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; font-size: 14px; }
  .page-frame { width: auto; min-height: calc(100vh - 68px); margin: 0; padding: 0 18px; }
  [data-chrome="footer"] {
    height: auto !important;
    min-height: 154px;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    font-size: 12px !important;
  }
  [data-chrome="footer"] > div:first-child { display: grid !important; grid-template-columns: auto 1fr !important; column-gap: 10px !important; row-gap: 8px; }
  [data-chrome="footer"] .lockup { font-size: 13px; }
  [data-chrome="footer"] .lockup img { width: 30px; height: 22px; }
  [data-chrome="footer"] .source { grid-column: 1 / 3; font-size: 12px; overflow-wrap: anywhere; }
  [data-chrome="footer"] .actions { display: flex; flex-wrap: wrap; gap: 9px 14px; }
}

@media (max-width: 520px) {
  .page-frame { padding: 0 14px; }
  [data-chrome="nav"] { padding: 0 14px !important; }
  [data-chrome="nav"] .mobile-drawer { padding-right: 14px; padding-left: 14px; }
  [data-chrome="footer"] { padding: 16px 14px !important; }
  [data-chrome="footer"] > div:first-child { grid-template-columns: 1fr !important; }
  [data-chrome="footer"] .source { grid-column: 1; }
  [data-chrome="footer"] .boundary { line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  main, main.is-leaving, main.is-sorting > .route-root,
  [data-receipt-row], [data-sort-reveal], [data-grow-bar],
  [data-balance-tick]::after, .mobile-drawer { transform: none !important; opacity: 1 !important; }
}