:root {
  --bg: #000;
  --fg: #fff;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --rule: 2px solid var(--fg);
  --dash: 2px dashed var(--fg);
  --bar: 3rem;
  --pad: 1rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + .5rem); -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font: 13px/1.5 var(--mono); }
a { color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: var(--dash); outline-offset: 3px; }
::selection { background: var(--fg); color: var(--bg); }

.skip { position: absolute; left: var(--pad); top: -4rem; z-index: 20; padding: .5rem .75rem; background: var(--fg); color: var(--bg); font-weight: 800; }
.skip:focus { top: .5rem; }

/* sticky menu */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  height: var(--bar); padding: 0 max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));
  background: var(--bg); border-bottom: var(--rule);
}
.logo { font-weight: 800; text-decoration: none; }
.top ul { display: flex; gap: .6rem; }
.top nav a { display: block; padding: .6rem 0; text-decoration: none; text-transform: uppercase; font-size: .75rem; }
.top nav a::before { content: "["; }
.top nav a::after { content: "]"; }
.top nav a[aria-current] { background: var(--fg); color: var(--bg); }

/* hero */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - var(--bar)); min-height: calc(100svh - var(--bar));
  padding: var(--pad); border-bottom: var(--rule);
  background: radial-gradient(var(--fg) .6px, transparent 1px) 0 0 / 24px 24px;
}
.scope { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero > :not(.scope) { position: relative; }
.hero h1 { align-self: center; font: 800 clamp(5rem, 36vw, 15rem)/.88 var(--mono); letter-spacing: -.06em; text-transform: uppercase; }
.hero h1 span { display: block; width: fit-content; padding: 0 .05em; }
.swap { background: var(--fg); color: var(--bg); }
.ware { color: transparent; -webkit-text-stroke: 2px var(--fg); }
.stat { display: flex; justify-content: space-between; font-size: .7rem; text-transform: uppercase; }

.hexdate { text-transform: none; }

/* cards */
.cards { display: grid; border-bottom: var(--rule); }
.card { display: grid; grid-template-columns: 6rem 1fr; align-items: center; border-bottom: var(--dash); }
.card:last-child { border-bottom: 0; }
.card figure { padding: 1rem; border-right: var(--dash); }
.card svg { display: block; width: 100%; }
.card div { padding: 1rem; }
.card small { display: block; }
.card h2, .card h3 { font-size: 1.4rem; letter-spacing: -.03em; text-transform: uppercase; }
.hub { fill: var(--bg); }

/* sections */
.sec { padding: 2.5rem var(--pad); border-bottom: var(--rule); }
.sec > h2 { margin-bottom: 1rem; font-size: .8rem; text-transform: uppercase; }
.sec > h2::before { content: "## "; }
.tree li { display: flex; gap: .5rem; white-space: nowrap; }
.tree a { flex: 1; overflow: hidden; padding: .35rem 0; text-decoration: none; }
.tree a::after { content: " ........................................................................................................................"; }
address { font-style: normal; }
.contact-links { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.btn { display: inline-block; padding: .75rem 1rem; border: var(--rule); font-weight: 800; text-decoration: none; }
.icon-btn { display: grid; place-items: center; padding: .5rem .75rem; }
.icon-btn svg { display: block; width: 1.6rem; height: 1.6rem; fill: var(--fg); }
.foot a { padding: .35rem 0; }

/* sub pages */
.page h1 { margin-bottom: 1.5rem; font: 800 clamp(2rem, 9vw, 5rem)/.95 var(--mono); letter-spacing: -.04em; text-transform: uppercase; }
.page p { max-width: 62ch; font-size: 1rem; }
.page p + p { margin-top: 1rem; }
.five .card h3 { font-size: 1.15rem; }

/* contact form */
.contact-form { display: grid; gap: 1rem; max-width: 40rem; }
.contact-form label { display: grid; gap: .35rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: .75rem; border: var(--rule); border-radius: 0;
  background: var(--bg); color: var(--fg); font: 16px/1.4 var(--mono); appearance: none;
}
.contact-form textarea { min-height: 10rem; resize: vertical; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline-offset: 0; background: var(--fg); color: var(--bg); }
button.btn { justify-self: start; background: var(--bg); color: var(--fg); font: 800 1rem var(--mono); cursor: pointer; }
.form-note { font-size: .8rem; min-height: 1.5em; }

.foot { padding: 1rem var(--pad) calc(1rem + env(safe-area-inset-bottom)); }

@media (hover: hover) {
  .top nav a:hover, .tree a:hover, .btn:hover, .card:hover { background: var(--fg); color: var(--bg); }
  .card:hover figure { border-color: var(--bg); }
  .card:hover .hub { fill: var(--fg); }
  .icon-btn:hover svg { fill: var(--bg); }
}

@media (min-width: 640px) {
  :root { --pad: 2rem; }
  body { font-size: 14px; }
  .top ul { gap: 1.25rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card { grid-template-columns: 1fr; border-bottom: 0; border-right: var(--dash); }
  .card:last-child { border-right: 0; }
  .card figure { padding: 2rem 30%; border-right: 0; border-bottom: var(--dash); }
  .card div { padding: 1.25rem 2rem; }
  .card h2 { font-size: clamp(1.4rem, 3vw, 2.5rem); }
  .sec { padding-block: 4rem; }
  .tree { max-width: 60rem; }
  .five { grid-template-columns: repeat(5, 1fr); }
  .five .card figure { padding: 1.5rem 25%; }
  .five .card div { padding: 1rem; }
  .five .card h3 { font-size: clamp(.8rem, 1.5vw, 1.4rem); }
}

/* animation */
.blink { animation: blink 1s steps(1) infinite; }
.ln { stroke-dasharray: 30; stroke-dashoffset: 30; animation: type 2.4s steps(10) infinite; }
.pins { stroke-dasharray: 3 3; animation: flow .8s linear infinite; }
.core { animation: blink .6s steps(1) infinite; }
.gear { transform-origin: 32px 32px; animation: spin 6s steps(24) infinite; }
.bar { transform-box: fill-box; transform-origin: bottom; animation: grow 2.4s steps(6) infinite; }
.shackle { animation: lock 3s steps(1) infinite; }
.needle { transform-origin: 32px 44px; animation: rev 1.6s steps(8) infinite alternate; }
.blk { animation: blk 1.8s linear infinite; }
.d1 { animation-delay: .3s; }
.d2 { animation-delay: .6s; }
@keyframes grow { 0% { transform: scaleY(.15); } 60%, 100% { transform: scaleY(1); } }
@keyframes lock { 0% { transform: translateY(-6px); } 45% { transform: none; } }
@keyframes rev { from { transform: rotate(-70deg); } to { transform: rotate(70deg); } }
@keyframes blk { 0%, 30% { opacity: 0; } 31%, 100% { opacity: 1; } }
@keyframes type { 60%, 100% { stroke-dashoffset: 0; } }
@keyframes flow { to { stroke-dashoffset: -6; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
  .ln { stroke-dashoffset: 0; }
}

@media print {
  .top { position: static; }
  .scope { display: none; }
  .hero { min-height: 0; }
}