@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/Archivo-variable.ttf') format('truetype-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-variable.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spline Sans Mono';
  src: url('assets/fonts/SplineSansMono-variable.ttf') format('truetype-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --u: clamp(0.6667px, calc(100vw / 1920), 1.3333px);
  --paper: #180E0C;
  --surface: #231513;
  --surface-raised: #2C1B18;
  --text: #EFE6E1;
  --muted: #9C8A84;
  --hairline: #3A2622;
  --copper: #B8733A;
  --ice: #D8F1FF;
  --font-display: 'Archivo', Arial, sans-serif;
  --font-data: 'Spline Sans Mono', monospace;
  --font-label: 'JetBrains Mono', monospace;
  --motion-draw: cubic-bezier(.22, .72, .12, 1);
  --motion-alert: cubic-bezier(.16, 1, .3, 1);
  --route-time: 200ms;
  --state-time: 300ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 0; background: var(--paper); }
body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-display);
  font-size: max(12px, calc(15 * var(--u)));
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

[data-chrome="nav"] {
  position: relative;
  z-index: 20;
  width: 100%;
  height: calc(94 * var(--u));
  padding: 0 calc(80 * var(--u));
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  font-family: var(--font-display);
}
.brand {
  width: calc(300 * var(--u));
  height: calc(66 * var(--u));
  display: flex;
  align-items: center;
  padding-right: calc(28 * var(--u));
  border-right: 1px solid #5a403a;
}
.brand img {
  width: calc(245 * var(--u));
  height: calc(66 * var(--u));
  object-fit: contain;
  object-position: left center;
}
.links { height: 100%; display: flex; align-items: center; flex: 1; padding-left: calc(20 * var(--u)); }
.route {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 calc(22 * var(--u));
  font-size: max(12px, calc(15 * var(--u)));
  color: #c8b9b3;
  white-space: nowrap;
  transition: color var(--state-time) var(--motion-draw), transform var(--route-time) var(--motion-alert);
}
.route:hover { color: var(--text); transform: translateX(calc(2 * var(--u))); }
.route.is-active { color: var(--text); }
.route.is-active::after {
  content: '';
  position: absolute;
  left: calc(20 * var(--u));
  right: calc(20 * var(--u));
  bottom: calc(14 * var(--u));
  height: 2px;
  background: var(--copper);
  transform-origin: left;
  animation: blueprint-rule 900ms var(--motion-draw) both;
}
[data-chrome="nav"] > .actions { height: 100%; display: flex; align-items: center; border-left: 1px solid #5a403a; }
.action {
  height: calc(46 * var(--u));
  display: grid;
  place-items: center;
  padding: 0 calc(19 * var(--u));
  border-right: 1px solid #5a403a;
  font-size: max(12px, calc(15 * var(--u)));
}
.mobile-controls, .mobile-drawer { display: none; }

.page-frame {
  width: auto;
  min-height: calc(360 * var(--u));
  margin: 0;
  padding-left: calc(82 * var(--u));
  padding-right: calc(78 * var(--u));
  background: var(--paper);
  opacity: 1;
  transition: opacity var(--route-time) var(--motion-draw);
}
.page-frame.is-leaving { opacity: 0; }
.page-frame.is-entering { animation: route-scan var(--route-time) var(--motion-draw) both; }

[data-chrome="footer"] {
  width: 100%;
  min-height: calc(112 * var(--u));
  padding: 0 calc(48 * var(--u));
  display: grid;
  grid-template-columns: 1.15fr 1.35fr auto;
  align-items: center;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  font-family: var(--font-data);
  font-size: max(12px, calc(13 * var(--u)));
}
[data-chrome="footer"] .voice b { font-family: var(--font-display); letter-spacing: calc(4 * var(--u)); margin-right: calc(22 * var(--u)); }
[data-chrome="footer"] .source { color: var(--muted); line-height: 1.45; }
[data-chrome="footer"] .actions { display: flex; align-items: center; }
[data-chrome="footer"] .actions span { padding: calc(13 * var(--u)) calc(20 * var(--u)); border-left: 1px solid #5a403a; white-space: nowrap; }
[data-chrome="footer"] .copy { border: 1px solid var(--copper) !important; color: var(--copper); }

[data-blueprint-draw] { transform-origin: left center; }
[data-blueprint-draw]:not(.is-traced) { opacity: 0; transform: scaleX(.02); }
[data-blueprint-draw].is-traced { animation: blueprint-trace 900ms var(--motion-draw) both; }
[data-seal-reveal]:not(.is-revealed) { opacity: 0; transform: scaleX(.96); transform-origin: left center; }
[data-seal-reveal].is-revealed { animation: seal-reveal 300ms var(--motion-draw) both; }
[data-grow-in]:not(.is-grown) { opacity: 0; transform: scaleX(.96); transform-origin: var(--grow-origin, left center); }
[data-grow-in].is-grown { animation: seal-reveal 300ms var(--motion-draw) both; }
[data-alarm-pulse].is-stirred { animation: alarm-pulse 1200ms var(--motion-alert) 1; }
[data-radar-sweep] { position: relative; overflow: hidden; }
[data-radar-sweep]::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(64 * var(--u));
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ice) 10%, transparent), transparent);
  opacity: .35;
  transform: translateX(-110%);
  animation: radar-watch 9s linear infinite;
}
[data-motion-hover] { transition: transform var(--route-time) var(--motion-alert), opacity var(--route-time) linear; }
[data-motion-hover]:hover { transform: translateX(calc(2 * var(--u))); }

@keyframes blueprint-rule { from { transform: scaleX(.02); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes blueprint-trace { from { transform: scaleX(.02); opacity: 0; } 16% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
@keyframes seal-reveal { from { transform: scaleX(.96); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes alarm-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 18% { transform: scale(1.012); opacity: .72; } 34% { transform: scale(1); opacity: 1; } }
@keyframes radar-watch { 0%, 70% { transform: translateX(-110%); opacity: 0; } 73% { opacity: .35; } 91% { transform: translateX(calc(1760 * var(--u))); opacity: .35; } 94%, 100% { transform: translateX(calc(1760 * var(--u))); opacity: 0; } }
@keyframes route-scan { from { opacity: 0; transform: scaleX(.998); } to { opacity: 1; transform: scaleX(1); } }

@media (max-width: 1023px) {
  :root { --u: 1px; }
  [data-chrome="nav"] { height: 64px; padding: 0 18px; }
  .brand { width: 136px; height: 44px; padding-right: 14px; }
  .brand img { width: 118px; height: 40px; }
  [data-chrome="nav"] > .links, [data-chrome="nav"] > .actions { display: none; }
  .mobile-controls { display: flex; margin-left: auto; height: 100%; align-items: center; }
  .mobile-active { min-width: 82px; padding: 0 14px; color: var(--muted); font-size: 12px; text-align: right; }
  .menu-toggle { min-width: 58px; min-height: 44px; padding: 0; border: 0; border-left: 1px solid var(--hairline); background: transparent; text-transform: uppercase; font-family: var(--font-label); font-size: 10px; letter-spacing: .08em; }
  .menu-toggle i { display: block; width: 22px; height: 1px; margin: 5px auto 0; background: var(--copper); box-shadow: 0 5px 0 var(--copper); }
  .mobile-drawer {
    position: absolute;
    inset: 64px 0 auto;
    display: grid;
    height: auto;
    padding: 10px 18px 18px;
    border-bottom: 1px solid var(--hairline);
    background: var(--paper);
  }
  .mobile-drawer[hidden] { display: none; }
  .mobile-drawer .route { min-height: 46px; padding: 0; place-items: center start; border-bottom: 1px solid var(--hairline); }
  .mobile-drawer .route.is-active::after { left: 0; right: auto; bottom: 7px; width: 38px; }
  .mobile-channels { display: flex; gap: 24px; padding-top: 18px; font-family: var(--font-label); font-size: 12px; }
  .page-frame { min-height: 220px; padding-left: 18px; padding-right: 18px; }
  [data-chrome="footer"] { min-height: 0; padding: 26px 18px; grid-template-columns: 1fr; gap: 20px; font-size: 12px; }
  [data-chrome="footer"] .voice { line-height: 1.65; }
  [data-chrome="footer"] .voice b { display: block; margin: 0 0 6px; }
  [data-chrome="footer"] .actions { display: grid; grid-template-columns: repeat(4, 1fr); }
  [data-chrome="footer"] .actions span { padding: 12px 8px; text-align: center; border-top: 1px solid #5a403a; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  [data-blueprint-draw], [data-seal-reveal], [data-grow-in], .page-frame { opacity: 1 !important; transform: none !important; }
  [data-radar-sweep]::after { display: none; }
}

/* Functional states added without changing the approved frame geometry. */
.dormant-toasts {
  position: fixed;
  z-index: 1000;
  right: calc(28 * var(--u));
  bottom: calc(28 * var(--u));
  width: min(calc(430 * var(--u)), calc(100vw - 36px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.dormant-toast {
  padding: calc(15 * var(--u)) calc(18 * var(--u));
  border: 1px solid var(--copper);
  background: rgba(24,14,12,.97);
  color: var(--text);
  box-shadow: 0 12px 36px rgba(0,0,0,.38);
  font: 500 max(12px, calc(14 * var(--u)))/1.45 var(--font-label);
  letter-spacing: .025em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.dormant-toast.show { opacity: 1; transform: none; }
.dormant-toast.error { border-color: #d8f1ff; }
[aria-invalid="true"] { outline: 1px solid #d8f1ff !important; outline-offset: -2px; }
.vr-runtime-copy {
  margin-left: calc(7 * var(--u));
  padding: calc(3 * var(--u)) calc(6 * var(--u));
  border: 1px solid var(--copper);
  background: transparent;
  color: var(--copper);
  font: 500 calc(9 * var(--u))/1 var(--font-label);
}
.vr-subscribe { cursor: pointer; }
.vr-ready {
  margin-left: calc(6 * var(--u));
  color: var(--copper);
  font: 500 calc(9 * var(--u))/1 var(--font-label);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vr-runtime-status td,
.tape-runtime-status,
.look-runtime-status {
  color: var(--copper);
  font: 500 calc(9 * var(--u))/1.4 var(--font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vr-runtime-status td { padding-top: calc(8 * var(--u)); text-align: right; }
.tape-runtime-status,
.look-runtime-status { padding: calc(7 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid var(--hairline); }
.runtime-explorer { margin-left: calc(14 * var(--u)); color: var(--ice); font-family: var(--font-label); }
.tape-runtime-empty {
  min-height: calc(315 * var(--u));
  display: grid;
  place-items: center;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  font: 500 calc(14 * var(--u))/1.4 var(--font-data);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.al-runtime-input {
  width: 100%;
  height: calc(45 * var(--u));
  margin: calc(7 * var(--u)) 0;
  padding: 0 calc(13 * var(--u));
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 calc(12 * var(--u))/1 var(--font-data);
}
.al-subscribe-runtime {
  width: calc(210 * var(--u));
  height: calc(40 * var(--u));
  margin: calc(8 * var(--u)) auto 0;
  display: block;
  border: 1px solid var(--copper);
  background: transparent;
  color: var(--copper);
  font: 600 calc(13 * var(--u))/1 var(--font-label);
  letter-spacing: .1em;
}
.al-form-row .al-webhook-runtime {
  height: calc(30 * var(--u));
  margin: 0;
  padding: 0 calc(8 * var(--u));
}
.al-sub .al-intro { position: relative; }
.al-sub .al-subscribe-runtime {
  position: absolute;
  top: calc(11 * var(--u));
  right: calc(17 * var(--u));
  width: calc(122 * var(--u));
  margin: 0;
}
.al-subscribe-runtime:hover { background: rgba(184,115,58,.12); }
[data-cell="vault_address"] a,
.vr-table a,
.al-table a,
.holders-table a { color: inherit; text-decoration: none; }
[data-cell="vault_address"] a:hover,
.vr-table a:hover,
.al-table a:hover,
.holders-table a:hover { color: var(--ice); }

@media (max-width: 1023px) {
  .dormant-toasts { right: 18px; bottom: 18px; }
  .tape-runtime-empty { min-height: 180px; }
  .al-runtime-input { height: 44px; font-size: 12px; }
  .al-sub .al-subscribe-runtime { position: static; width: 100%; height: 44px; margin-top: 8px; font-size: 12px; }
}