/* vow: engraved-certificate look. Hairline grid, one stamp colour, paper for the rules. */
:root {
  --bg: #0a0f0c; --s1: #0e1511; --s2: #141d18;
  --line: rgba(210,228,205,.11); --line2: rgba(210,228,205,.24);
  --ink: #e4e9da; --mut: #8e9b8f; --dim: #586458;
  --stamp: #ff5a36; --ok: #8fe3a6; --paper: #e9e4d2; --pink: #1a1d16;
  --px: 32px; --nav: 56px;
  --disp: "Bodoni Moda", "Didot", Georgia, serif; --sans: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; margin: 0; scrollbar-width: thin; scrollbar-color: rgba(210,228,205,.24) transparent; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
ol, ul { list-style: none; padding: 0; }
main { overflow-x: clip; }
.mono, span.no { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.up { color: var(--ok); } .down, .red { color: var(--stamp); } .up, .down { font-family: var(--mono); font-size: .88em; }
.wrap { width: min(1560px, 100% - 48px); margin-inline: auto; border-inline: 1px solid var(--line); }
h4 { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.fine { font-size: 12px; color: var(--dim); }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: stretch; height: var(--nav); background: rgba(10,15,12,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav > * { display: flex; align-items: center; }
.logo { gap: 9px; padding: 0 22px; font: 500 25px/1 var(--disp); letter-spacing: -.01em; border-right: 1px solid var(--line); display: flex; align-items: center; }
.links a { padding: 0 20px; height: 100%; display: flex; align-items: center; color: var(--mut); border-right: 1px solid var(--line); transition: color .2s, background .2s; position: relative; }
.links a:hover { color: var(--ink); background: var(--s1); } .links a.on { color: var(--ink); }
.links a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--stamp); }
.quote { margin-left: auto; gap: 10px; padding: 0 20px; border-left: 1px solid var(--line); font: 12px var(--mono); color: var(--mut); white-space: nowrap; }
.quote b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; } .quote .soon { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.tick-up { animation: tickUp 1s ease-out; } .tick-dn { animation: tickDn 1s ease-out; }
@keyframes tickUp { from { color: var(--ok); } } @keyframes tickDn { from { color: var(--stamp); } } .quote .sep { width: 1px; height: 16px; background: var(--line2); margin: 0 4px; }
.nav .btn { margin: auto 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 3px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14.5px; white-space: nowrap; border: 1px solid var(--ink); transition: background .2s, color .2s, border-color .2s, transform .15s; }
.btn:hover { background: #fff; border-color: #fff; } .btn:active { transform: translateY(1px); }
.btn .arr { transition: transform .25s var(--ease); } .btn:hover .arr { transform: translateX(4px); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; } .btn.wide { width: 100%; }
.btn.line { background: none; color: var(--ink); border-color: var(--line2); font-weight: 500; } .btn.line:hover { border-color: var(--ink); background: var(--s1); }
.btn.danger { background: var(--stamp); border-color: var(--stamp); color: #1a0500; }
.btn:disabled { background: var(--s2); border-color: var(--line); color: var(--dim); cursor: not-allowed; }

/* tags + stamps */
.tag { display: inline-block; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--line2); border-radius: 2px; white-space: nowrap; }
.tag.dim { color: var(--dim); border-color: var(--line); } .tag.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); } .tag.red { color: var(--stamp); border-color: var(--stamp); }
.tagsr { display: flex; flex-wrap: wrap; gap: 5px; }
.stamp { --rot: -6deg; display: inline-block; font: 700 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 7px 13px 6px; color: var(--stamp); border: 2px solid; box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 3px currentColor; transform: rotate(var(--rot)); filter: url(#rough); }
.stamp.ok { --rot: 4deg; color: var(--ok); }
.stamp.slam { animation: slam .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes slam { from { transform: rotate(var(--rot)) scale(2.6); opacity: 0; } 55% { opacity: 1; } to { transform: rotate(var(--rot)) scale(1); } }

/* view + reveal */
#view.in { animation: viewIn .45s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: min(calc(100vh - var(--nav)), 780px); }
.hero-t { display: flex; flex-direction: column; justify-content: center; padding: 44px var(--px); border-right: 1px solid var(--line); }
.kicker { display: flex; justify-content: space-between; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 44px; }
.d1 { font: 500 clamp(44px, 6.1vw, 94px)/.94 var(--disp); letter-spacing: -.028em; }
.d1 .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.d1 i { display: block; font-style: normal; transform: translateY(108%); animation: rise 1s var(--ease) calc(var(--i, 0) * 110ms + 80ms) forwards; }
@keyframes rise { to { transform: none; } }
.lede { max-width: 500px; font-size: 17px; color: var(--mut); margin-top: 28px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; padding-top: 14px; border-top: 1px solid var(--line); }
.meta dt { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .meta dd { font-size: 13.5px; margin-top: 2px; }
.hero-c { position: relative; min-height: 460px; background: radial-gradient(closest-side, rgba(228,233,218,.05), transparent 78%); }
.hero-c canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); pointer-events: none; }

.ledger { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.ledger div { padding: 22px var(--px); border-right: 1px solid var(--line); } .ledger div:last-child { border: 0; }
.ledger div > span { display: block; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.ledger b { font: 500 34px/1.2 var(--mono); letter-spacing: -.04em; }

.tape { overflow: hidden; border-block: 1px solid var(--line); padding: 11px 0; background: var(--s1); }
.tape div { display: flex; gap: 44px; width: max-content; animation: slide 90s linear infinite; }
.tape:hover div { animation-play-state: paused; }
.tape span { font: 11px var(--mono); letter-spacing: .06em; white-space: nowrap; color: var(--mut); } .tape .no { color: var(--stamp); }
@keyframes slide { to { transform: translateX(-50%); } }

/* sections */
.sec { position: relative; padding: 76px var(--px) 84px; border-top: 1px solid var(--line); }
.tape + .sec { border-top: 0; }
.sec::before, .sec::after { content: ""; position: absolute; top: -5px; width: 9px; height: 9px; background: linear-gradient(var(--mut), var(--mut)) center / 1px 100% no-repeat, linear-gradient(var(--mut), var(--mut)) center / 100% 1px no-repeat; }
.sec::before { left: -5px; } .sec::after { right: -5px; }
.sh { display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: end; margin-bottom: 40px; }
.sh .no { align-self: start; padding-top: 12px; }
h2 { font: 500 clamp(32px, 3.9vw, 54px)/1 var(--disp); letter-spacing: -.02em; }
.sh p { color: var(--mut); font-size: 15.5px; max-width: 440px; }

.browser { display: grid; grid-template-columns: 290px minmax(0, 1fr); border: 1px solid var(--line); }
.rlist { border-right: 1px solid var(--line); max-height: 470px; overflow: auto; }
.rlist h4, .liblist h4 { padding: 14px 16px 6px; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.rlist button { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 8px 16px; text-align: left; color: var(--mut); border-left: 2px solid transparent; transition: .15s; }
.rlist button:hover { color: var(--ink); background: var(--s1); } .rlist button.on { color: var(--ink); background: var(--s2); border-left-color: var(--stamp); }
.rlist .mono { color: var(--dim); width: 34px; flex: none; }
.spec { padding: 26px 30px 30px; display: flex; flex-direction: column; align-items: flex-start; background: var(--s1); }
.sp-h { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.spec canvas { width: 100%; height: 210px; margin: 14px 0 18px; border-block: 1px solid var(--line); }
.spec h3 { font: 500 32px/1.05 var(--disp); letter-spacing: -.015em; }
.clause { font-size: 17px; color: var(--ink); margin: 8px 0 22px; max-width: 520px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.duo figure { padding: 24px 26px; } .duo figure + figure { border-left: 1px solid var(--line); }
.duo figcaption { display: flex; flex-wrap: wrap; gap: 5px; }
.duo svg { display: block; width: 100%; height: 180px; margin: 18px 0 10px; overflow: visible; background: repeating-linear-gradient(0deg, transparent 0 44px, var(--line) 44px 45px), repeating-linear-gradient(90deg, transparent 0 59px, var(--line) 59px 60px); }
.lnp { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) .25s; }
.lnp.bad { stroke: var(--stamp); } .in .lnp { stroke-dashoffset: 0; }
.duo ol { counter-reset: n; } .duo li { counter-increment: n; display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--mut); }
.duo li::before { content: "0" counter(n); font: 11px var(--mono); color: var(--dim); padding-top: 3px; }

.flow { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.flow li { position: relative; padding: 24px 26px 28px; } .flow li + li { border-left: 1px solid var(--line); }
.flow li + li::before { content: "→"; position: absolute; left: -13px; top: 24px; width: 25px; height: 25px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line2); border-radius: 50%; font-size: 12px; color: var(--mut); }
.flow h3 { font: 500 25px/1.1 var(--disp); margin: 26px 0 8px; } .flow p { color: var(--mut); }
.stamps { display: flex; gap: 14px; margin-top: 20px; }

/* token table */
.table { border: 1px solid var(--line); }
.tr { display: grid; grid-template-columns: minmax(180px, 1.5fr) 130px 1fr .8fr .7fr .7fr minmax(190px, 1.4fr); gap: 16px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); transition: background .15s; }
.tr:first-child { border-top: 0; } a.tr:hover { background: var(--s1); }
.tr.th { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-block: 9px; }
.tk { display: flex; align-items: center; gap: 12px; min-width: 0; } .tk b { display: block; font-weight: 500; } .tk i { font: normal 11px var(--mono); color: var(--mut); }
.r { text-align: right; } .n { font-family: var(--mono); font-size: 13.5px; }
.spark { display: block; width: 130px; height: 30px; }
.em { display: inline-block; width: var(--s); height: var(--s); flex: none; border: 1px solid var(--line2); border-radius: 2px; overflow: hidden; background: var(--s2); } .em img { display: block; width: 100%; height: 100%; object-fit: cover; }
.more { margin-top: 20px; } .none { padding: 30px 18px; color: var(--mut); } .none a { color: var(--ink); text-decoration: underline; }

.final { text-align: center; border-top: 1px solid var(--line); }
.braid { display: block; width: 100%; height: 22px; } .braid path { fill: none; stroke: currentColor; stroke-width: .7; vector-effect: non-scaling-stroke; }
.final .braid { color: var(--dim); }
.final h2 { font-size: clamp(46px, 8.6vw, 132px); letter-spacing: -.035em; margin: 96px 0 40px; } .final .btn { margin-bottom: 100px; }

.foot { border-top: 1px solid var(--line); color: var(--mut); }
.foot-in { display: grid; grid-template-columns: auto 1fr; gap: 14px 40px; align-items: center; padding: 26px var(--px); }
.foot .logo { border: 0; padding: 0; color: var(--ink); } .foot nav { display: flex; gap: 22px; justify-content: flex-end; font-size: 13.5px; } .foot nav a:hover { color: var(--ink); } .foot .fine { grid-column: 1 / -1; max-width: 660px; }

/* page head */
.ph { padding: 46px var(--px) 30px; } .d2 { font: 500 clamp(38px, 5vw, 70px)/1 var(--disp); letter-spacing: -.025em; margin-top: 10px; } .ph p { color: var(--mut); font-size: 16px; margin-top: 12px; } .ph a { text-decoration: underline; }

/* launch */
.lgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; border-top: 1px solid var(--line); align-items: start; }
.lib { border-right: 1px solid var(--line); position: sticky; top: var(--nav); } .set { border-left: 1px solid var(--line); padding: 20px; position: sticky; top: var(--nav); }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.presets span { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); width: 100%; margin-bottom: 4px; }
.presets button { font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--line2); border-radius: 2px; transition: .15s; } .presets button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { flex: 1; padding: 9px 6px; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); white-space: nowrap; } .tabs button:hover { color: var(--ink); } .tabs .on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--stamp); }
.liblist { max-height: calc(100vh - var(--nav) - 330px); min-height: 220px; overflow: auto; }
.rl { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; text-align: left; transition: background .15s; }
.rl:hover:not(:disabled) { background: var(--s1); } .rl .mono { width: 32px; flex: none; color: var(--dim); } .rl div { flex: 1; min-width: 0; } .rl b { display: block; font-weight: 500; font-size: 14px; } .rl div span { display: block; font-size: 12px; color: var(--mut); line-height: 1.35; }
.rl i { font-style: normal; width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 2px; font-size: 13px; transition: .15s; }
.rl:hover:not(:disabled) i, .rl.on i { background: var(--ink); color: var(--bg); border-color: var(--ink); } .rl:disabled { opacity: .35; cursor: not-allowed; }
.peek { border-top: 1px solid var(--line); padding: 10px 16px 14px; background: var(--s1); } .peek canvas { display: block; width: 100%; height: 118px; } .peek p { font-size: 12.5px; color: var(--mut); min-height: 38px; }
.lmid { padding: 30px 28px 48px; min-height: 100%; background-image: radial-gradient(var(--line2) 1px, transparent 1px); background-size: 18px 18px; }

/* the certificate */
.cert { position: relative; max-width: 640px; margin: 0 auto; background: var(--paper); color: var(--pink); border-radius: 2px; box-shadow: 0 40px 70px -40px #000, 0 0 0 1px rgba(0,0,0,.4); }
.cert .braid { color: rgba(26,29,22,.55); height: 18px; }
.cert-in { position: relative; padding: 18px 30px 22px; }
.c-top { display: flex; justify-content: space-between; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid rgba(26,29,22,.28); }
.c-id { display: flex; align-items: center; gap: 18px; margin-top: 20px; } .c-id > div { flex: 1; min-width: 0; }
.upl { position: relative; width: 78px; height: 78px; flex: none; cursor: pointer; border: 1px solid rgba(26,29,22,.4); overflow: hidden; } .upl img, .upl .em { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.upl em { position: absolute; inset: auto 0 0; background: rgba(26,29,22,.82); color: var(--paper); font: normal 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 2px 0; }
.cert input { background: none; border: 0; outline: 0; color: inherit; } .cert input::placeholder { color: rgba(26,29,22,.36); }
.c-name { width: 100%; font: 500 38px/1.1 var(--disp); letter-spacing: -.02em; border-bottom: 1px dashed rgba(26,29,22,.35) !important; padding: 0 0 2px; }
.c-tk { display: flex; gap: 2px; margin-top: 6px; font: 500 14px var(--mono); } .c-tk input { font: inherit; width: 100%; letter-spacing: .04em; }
.c-desc { width: 100%; margin-top: 14px; font-size: 14px; padding-bottom: 4px; border-bottom: 1px dashed rgba(26,29,22,.35) !important; }
.cert input:focus-visible { outline: 0; border-bottom-style: solid !important; }
.c-pre { margin-top: 20px; font: italic 400 15px var(--disp); color: rgba(26,29,22,.72); }
.clauses { margin-top: 8px; }
.clauses li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 11px 0; border-top: 1px solid rgba(26,29,22,.16); }
.clauses .sec { position: static; padding: 0; border: 0; font: 500 19px/1.2 var(--disp); } .clauses .sec::before, .clauses .sec::after { display: none; }
.clauses b { font-weight: 600; font-size: 14.5px; } .clauses p { font-size: 14px; line-height: 1.75; color: rgba(26,29,22,.82); }
.clauses li.empty { color: rgba(26,29,22,.42); } .clauses .dots { grid-column: 2 / -1; align-self: end; font-size: 12.5px; min-height: 22px; border-bottom: 1px dotted rgba(26,29,22,.4); }
.clauses li.fresh { animation: inked .9s var(--ease); } @keyframes inked { from { background: rgba(255,90,54,.3); transform: translateX(-6px); } }
.clauses li.off b, .clauses li.off p { text-decoration: line-through; opacity: .5; }
.pin { font: 700 13px var(--mono) !important; text-align: center; padding: 1px 0 0; margin: 0 2px; background: rgba(26,29,22,.08) !important; border-bottom: 1.5px solid var(--pink) !important; border-radius: 2px 2px 0 0; -moz-appearance: textfield; appearance: textfield; }
.pin::-webkit-outer-spin-button, .pin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pin:focus { background: rgba(255,90,54,.2) !important; border-bottom-color: #c23a12 !important; }
.x { width: 24px; height: 24px; font-size: 17px; line-height: 1; color: rgba(26,29,22,.45); } .x:hover { color: #c23a12; }
.st { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border: 1px solid rgba(26,29,22,.3); border-radius: 2px; white-space: nowrap; margin-top: 2px; } .st.hot { color: #b3320f; border-color: #b3320f; }
.c-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(26,29,22,.28); }
.c-foot span { display: block; font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .6; } .c-foot b { font-size: 13.5px; font-weight: 600; }
.cert .stamp { position: absolute; right: 26px; top: 58px; color: #d9401a; } .cert .stamp.draft { color: rgba(26,29,22,.26); }
.cert.slim { max-width: none; box-shadow: 0 0 0 1px rgba(0,0,0,.4); } .cert.slim .cert-in { padding: 14px 24px 8px; } .cert.slim .clauses { margin-top: 0; } .cert.slim .clauses li:first-child { border-top: 0; }

/* launch settings */
.set h4 { margin: 22px 0 8px; } .set h4:first-child { margin-top: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line2); border-radius: 3px; overflow: hidden; }
.seg button { text-align: left; padding: 10px 12px; transition: .15s; } .seg button + button { border-left: 1px solid var(--line2); }
.seg b { display: block; font-size: 13.5px; font-weight: 600; } .seg span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--mut); margin-top: 2px; }
.seg .on { background: var(--ink); color: var(--bg); } .seg .on span { color: rgba(10,15,12,.66); }
.stepper { display: grid; grid-template-columns: 42px 1fr 42px; border: 1px solid var(--line2); border-radius: 3px; }
.stepper button { height: 40px; font-size: 18px; color: var(--mut); transition: .15s; } .stepper button:hover { background: var(--s2); color: var(--ink); }
.stepper b { display: grid; place-items: center; font: 500 16px var(--mono); border-inline: 1px solid var(--line2); }
.split { display: flex; gap: 2px; height: 4px; margin: 10px 0 6px; } .split i { background: var(--ink); } .split i:nth-child(2) { background: var(--stamp); } .split i:nth-child(3) { background: var(--dim); }
.opts { display: flex; border: 1px solid var(--line2); border-radius: 3px; overflow: hidden; }
.opts button { flex: 1; padding: 8px 6px; font: 12px var(--mono); color: var(--mut); white-space: nowrap; transition: .15s; } .opts button + button { border-left: 1px solid var(--line2); }
.opts button:hover { color: var(--ink); background: var(--s2); } .opts .on, .opts .on:hover { background: var(--ink); color: var(--bg); }
.cost { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 22px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.cost dt { color: var(--mut); } .cost dd { font-family: var(--mono); text-align: right; } .cost .tot { font-weight: 500; font-size: 15px; color: var(--ink); }
.set .fine { margin-top: 10px; }

/* explore */
.explore { padding-bottom: 70px; } .bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 var(--px) 18px; } .explore .table { margin-inline: var(--px); }
.bar input { width: min(320px, 100%); background: none; border: 1px solid var(--line2); border-radius: 3px; padding: 8px 12px; outline: 0; } .bar input:focus { border-color: var(--ink); } .bar input::placeholder { color: var(--dim); }
.bar .opts { max-width: 100%; overflow-x: auto; } .bar .opts button { padding-inline: 14px; }

/* token page */
.thd { display: flex; align-items: center; gap: 20px; padding: 34px var(--px) 26px; } .thd > div { flex: 1; min-width: 0; }
.d3 { font: 500 clamp(32px, 4.2vw, 54px)/1 var(--disp); letter-spacing: -.02em; } .d3 span { font: 500 14px var(--mono); letter-spacing: .04em; color: var(--mut); margin-left: 14px; }
.thd p { color: var(--mut); margin: 6px 0 10px; } .ser { align-self: flex-start; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.tstats { display: grid; grid-template-columns: repeat(7, 1fr); border-block: 1px solid var(--line); }
.tstats div { padding: 12px 18px; border-right: 1px solid var(--line); } .tstats div:first-child { padding-left: var(--px); } .tstats div:last-child { border: 0; }
.tstats div > span { display: block; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .tstats b { font: 500 15px var(--mono); }
.tgrid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: start; }
.tmain { border-right: 1px solid var(--line); min-width: 0; } .box { padding: 22px var(--px); border-bottom: 1px solid var(--line); } .tside .box { padding: 22px; }
.box h3 { display: flex; align-items: center; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-bottom: 10px; }
.live { margin-left: auto; display: flex; align-items: center; gap: 7px; } .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: blink 1.6s infinite; } @keyframes blink { 50% { opacity: .25; } }
.ch-h { display: flex; align-items: baseline; gap: 12px; } .ch-h b { font: 500 30px var(--mono); letter-spacing: -.04em; }
.lgd { margin-left: auto; display: flex; align-items: center; gap: 7px; font: 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); } .lgd i { width: 1px; height: 10px; background: var(--stamp); }
.chart canvas { display: block; width: 100%; height: 330px; margin-top: 10px; cursor: crosshair; }
.feed { font: 12px var(--mono); overflow-x: auto; }
.frow { display: grid; grid-template-columns: 40px 62px 62px 76px 90px minmax(170px, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); white-space: nowrap; min-width: 560px; }
.frow.hd { border: 0; color: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .frow.buy .ty { color: var(--ok); } .frow.ref { color: var(--dim); } .frow.ref .ty, .frow.ref .why { color: var(--stamp); }
.frow.new { animation: rowIn .9s var(--ease); } .frow.new.ref { animation-name: rowRef; }
@keyframes rowIn { from { background: rgba(228,233,218,.2); } } @keyframes rowRef { from { background: rgba(255,90,54,.3); } }
.tside { position: sticky; top: var(--nav); } .ticket { position: relative; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line2); border-radius: 3px; overflow: hidden; } .seg2 button { padding: 9px; font-weight: 500; color: var(--mut); transition: .15s; } .seg2 button + button { border-left: 1px solid var(--line2); } .seg2 .on { background: var(--ink); color: var(--bg); }
.amt { display: block; margin-top: 18px; } .amt span { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .amt div { position: relative; }
.amt input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line2); outline: 0; font: 500 30px var(--mono); letter-spacing: -.03em; padding: 6px 76px 8px 0; -moz-appearance: textfield; appearance: textfield; } .amt input:focus { border-color: var(--ink); } .amt input::placeholder { color: var(--dim); }
.amt input::-webkit-outer-spin-button, .amt input::-webkit-inner-spin-button { -webkit-appearance: none; }
.amt em { position: absolute; right: 0; bottom: 14px; font: normal 500 12px var(--mono); color: var(--mut); } .amt small { display: block; margin-top: 6px; font-size: 12px; color: var(--dim); }
.ticket .opts { margin: 12px 0 16px; }
.outs { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 13.5px; } .outs dt { color: var(--mut); } .outs dd { font-family: var(--mono); }
.ticket h4 { margin: 20px 0 4px; }
.checks { margin-bottom: 16px; font-size: 13.5px; } .checks li { display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 6px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.checks .sec { position: static; padding: 0; border: 0; font: 500 15px var(--disp); color: var(--mut); } .checks .sec::before, .checks .sec::after { display: none; }
.checks b { font-weight: 500; } .checks i { font: normal 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.checks .ok i { color: var(--ok); } .checks .no b, .checks .no i { color: var(--stamp); } .checks em { grid-column: 2 / -1; font-style: normal; font-size: 12.5px; color: var(--stamp); } .checks .na b { color: var(--mut); } .checks .msg { display: block; color: var(--mut); }
#tstamp { position: absolute; left: 50%; top: 44%; margin: -28px 0 0 -92px; width: 184px; text-align: center; font-size: 27px; padding: 12px 0 10px; background: var(--bg); pointer-events: none; z-index: 2; --rot: -9deg; } #tstamp[hidden] { display: none; }
.info dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13.5px; } .info dt { color: var(--mut); } .info dd { text-align: right; font-family: var(--mono); }

/* docs */
.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); } .docs aside { position: sticky; top: var(--nav); align-self: start; display: grid; gap: 9px; padding: 56px var(--px); font-size: 14px; } .docs aside a { color: var(--mut); } .docs aside a:hover { color: var(--ink); } .docs aside .no { margin-bottom: 8px; }
.docs article { border-left: 1px solid var(--line); padding-bottom: 60px; } .docs article > section { padding: 28px var(--px); border-top: 1px solid var(--line); max-width: 800px; }
.docs h2 { font-size: 30px; margin-bottom: 12px; } .docs p, .docs li { color: #b7c0b6; font-size: 16px; margin-bottom: 10px; } .docs ul { list-style: disc; padding-left: 20px; } .docs b { color: var(--ink); font-weight: 600; }
.rtable { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin-top: 16px; } .rtable div { padding: 14px 16px; border-bottom: 1px solid var(--line); } .rtable div:nth-child(odd) { border-right: 1px solid var(--line); } .rtable b { display: block; margin: 4px 0 2px; } .rtable p { font-size: 13.5px; margin: 0; color: var(--mut); }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 36px)); }
.toast { padding: 12px 16px; background: var(--s2); border: 1px solid var(--line2); border-left: 3px solid var(--ink); border-radius: 2px; box-shadow: 0 18px 50px -12px #000; animation: toastIn .4s var(--ease); font-size: 14px; }
.toast.ok { border-left-color: var(--ok); } .toast.bad { border-left-color: var(--stamp); } .toast.out { opacity: 0; transform: translateY(8px); transition: .4s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }

.toast a { text-decoration: underline; }
/* wide screens: the layout runs edge to edge, so give everything more room */
@media (min-width: 1500px) {
  :root { --px: 56px; }
  body { font-size: 16px; }
  .hero { min-height: min(calc(100vh - var(--nav)), 900px); } .lede { font-size: 19px; max-width: 580px; } .d1 { font-size: clamp(44px, 5.6vw, 92px); }
  .sec { padding-block: 104px 112px; } .sh { grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, .9fr); margin-bottom: 52px; } .sh p { font-size: 17px; max-width: 520px; }
  .browser { grid-template-columns: 380px minmax(0, 1fr); } .rlist { max-height: 560px; } .rlist button { padding-block: 10px; } .spec { padding: 36px 44px 40px; } .spec canvas { height: 280px; }
  .duo figure, .flow li { padding: 34px 38px; } .duo svg { height: 240px; }
  .lgrid { grid-template-columns: 380px minmax(0, 1fr) 380px; } .set { padding: 28px; } .lmid { padding: 44px 40px 64px; } .cert { max-width: 760px; } .cert-in { padding: 24px 40px 28px; }
  .tgrid { grid-template-columns: minmax(0, 1fr) 440px; } .tside .box { padding: 28px; } .chart canvas { height: 420px; }
  .tr { padding: 15px 24px; } .ledger div { padding-block: 30px; } .ledger b { font-size: 42px; }
  .docs { grid-template-columns: 320px minmax(0, 1fr); } .docs article > section { max-width: 900px; }
}
@media (max-width: 1120px) {
  .lgrid { grid-template-columns: 280px minmax(0, 1fr); } .set { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); position: static; }
  .tstats { grid-template-columns: repeat(4, 1fr); } .tstats div { border-bottom: 1px solid var(--line); margin-bottom: -1px; }
  .tr { grid-template-columns: minmax(170px, 1.5fr) 110px 1fr .8fr minmax(170px, 1.3fr); } .c-h { display: none; } .spark { width: 110px; }
}
@media (max-width: 900px) {
  :root { --px: 20px; }
  .wrap { width: calc(100% - 24px); }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; } .hero-t { border-right: 0; padding-block: 36px 40px; } .kicker { margin-bottom: 30px; } .hero-c { min-height: 420px; border-top: 1px solid var(--line); }
  .sh { grid-template-columns: minmax(0, 1fr); gap: 12px; } .sh .no { padding: 0; } .sec { padding-block: 56px 60px; }
  .browser, .duo, .flow, .tgrid, .lgrid, .docs { grid-template-columns: minmax(0, 1fr); }
  .rlist { border-right: 0; border-bottom: 1px solid var(--line); max-height: 230px; } .duo figure + figure, .flow li + li { border-left: 0; border-top: 1px solid var(--line); } .flow li + li::before { left: 26px; top: -13px; transform: rotate(90deg); }
  .peek { display: none; } .lib, .tside { position: static; } .lib { border-right: 0; border-bottom: 1px solid var(--line); } .liblist { max-height: 260px; } .lmid { padding: 20px 12px 30px; }
  .tmain { border-right: 0; } .tside { order: -1; border-bottom: 1px solid var(--line); } .tgrid { display: flex; flex-direction: column; align-items: stretch; }
  .docs aside { display: none; } .docs article { border-left: 0; }
  .tr { grid-template-columns: minmax(0, 1.6fr) 1fr .8fr; } .c-sp, .c-r { display: none; }
  .quote { display: none; } .nav .btn { margin-left: auto; margin-right: 12px; }
}
@media (max-width: 620px) {
  .logo { padding: 0 14px; } .logo span { display: none; } .links a { padding: 0 12px; font-size: 14px; } .nav .btn.sm { padding: 0 10px; font-size: 12.5px; }
  .meta, .ledger { grid-template-columns: 1fr 1fr; } .ledger div:nth-child(2) { border-right: 0; } .ledger div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .ledger b { font-size: 28px; }
  .tstats { grid-template-columns: 1fr 1fr; } .tstats div, .tstats div:first-child { padding-left: var(--px); }
  .cert-in { padding-inline: 18px; } .c-name { font-size: 30px; } .c-foot { grid-template-columns: 1fr 1fr; } .cert .stamp { top: 50px; right: 14px; font-size: 11px; }
  .rtable { grid-template-columns: 1fr; } .rtable div:nth-child(odd) { border-right: 0; } .foot-in { grid-template-columns: 1fr; } .foot nav { justify-content: flex-start; flex-wrap: wrap; }
  .thd { align-items: flex-start; } .ser { display: none; } .spec { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .d1 i { transform: none; } }