/* TRUSTPAD (bonded) v2: a trust vault after hours. Black aubergine steel, one platinum medallion under a raking
   light, instruments in engraved plates. Red only where a bond was broken. */
:root {
  --vault: #0C0911;
  --plate: #131019;
  --plate-2: #1A1622;
  --well: #09070D;
  --hair: #262030;
  --hair-2: #3A3244;
  --plat: #D9D5E2;
  --plat-2: #B4AEC0;
  --pewter: #8D869A;
  --forfeit: #C4262E;
  --disp: "Gloock", "Bodoni 72", Didot, serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --text: "Hanken Grotesk", system-ui, sans-serif;
  --max: 1340px;
  --pad: clamp(16px, 3vw, 40px);
  --wave-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cg fill='none' stroke='%238D869A' stroke-width='.6' stroke-opacity='.7'%3E%3Cpath d='M0 4C3 0 9 0 12 4S21 8 24 4'/%3E%3Cpath d='M0 4C3 8 9 8 12 4S21 0 24 4'/%3E%3Cpath d='M0 1.2C4 3 8 3 12 1.2S20 -.6 24 1.2M0 6.8C4 5 8 5 12 6.8S20 8.6 24 6.8' stroke-opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wave-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cg fill='none' stroke='%238D869A' stroke-width='.6' stroke-opacity='.7'%3E%3Cpath d='M4 0C0 3 0 9 4 12S8 21 4 24'/%3E%3Cpath d='M4 0C8 3 8 9 4 12S0 21 4 24'/%3E%3Cpath d='M1.2 0C3 4 3 8 1.2 12S-.6 20 1.2 24M6.8 0C5 4 5 8 6.8 12S8.6 20 6.8 24' stroke-opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .83 0 0 0 0 .9 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } }
body { margin: 0; background: var(--vault); color: var(--plat); font: 400 16px/1.55 var(--text); overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; background: var(--grain); opacity: .05; pointer-events: none; z-index: 60; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--plat); outline-offset: 3px; }
.mono { font-family: var(--mono); }
.mute { color: var(--pewter); }
.red { color: var(--forfeit); }
.lab { font: 500 10.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }
.wrap { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
.skip { position: absolute; left: 8px; top: 8px; z-index: 99; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--plat); color: var(--vault); padding: 0; }
.skip:focus { width: auto; height: auto; clip-path: none; padding: 10px 14px; }
body[data-cluster="mainnet"] .net { display: none; }
.plate.ph { visibility: hidden; }
.linkish { background: none; border: 0; padding: 4px 0; color: var(--plat-2); font: inherit; font-size: 13px; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: #fff; text-decoration-color: currentColor; }

/* engraved display: the letters are cut with fine horizontal hatching, the way banknote titles are */
.engr { color: var(--plat); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .engr { color: transparent; background: repeating-linear-gradient(180deg, var(--plat) 0 1.15px, rgba(217, 213, 226, .22) 1.15px 2.5px); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .7px rgba(217, 213, 226, .92); }
}

/* ---------------------------------------------------------------- buttons: engraved plates */
.plate { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; background: #1C1725; color: var(--plat); border: 1px solid #4A4156; border-radius: 1px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(0, 0, 0, .55); font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, .8); cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.plate::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1px solid currentColor; opacity: .75; background: linear-gradient(currentColor, currentColor) 50% 1.5px / 1px 4px no-repeat; transition: transform .32s cubic-bezier(.3, 1.8, .45, 1); }
.plate:hover { background: #231D2E; border-color: #6B6177; color: #fff; }
.plate:hover::before { transform: rotate(60deg); }
.plate:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); }
.plate[disabled], .plate[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.plate.sm { min-height: 40px; padding: 0 14px 0 11px; font-size: 10.5px; gap: 8px; }
.plate.sm::before { width: 11px; height: 11px; }
.plate.pri { background: var(--plat); color: var(--vault); border-color: #F2EFF6; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 3px var(--plat), inset 0 0 0 4px rgba(12, 9, 17, .3), 0 1px 0 rgba(0, 0, 0, .6); }
.plate.pri:hover { background: #EEEBF3; color: #000; }
.plate.ghost { background: transparent; box-shadow: none; border-color: var(--hair-2); }
.plate.ghost:hover { background: #1C1725; }
.plate.red { background: var(--forfeit); border-color: #E0555C; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .4); }
.plate.red:hover { background: #D5313A; }
.plate.wide { width: 100%; min-height: 54px; font-size: 12.5px; }
.key { display: inline-grid; place-items: center; width: 40px; height: 40px; background: #1C1725; border: 1px solid #4A4156; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 2px 0 #07050A; color: var(--plat); font: 400 22px/1 var(--disp); cursor: pointer; transition: transform .08s, box-shadow .08s, background-color .15s; }
.key:hover { background: #251F30; }
.key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 #07050A; }

/* ---------------------------------------------------------------- header */
.bar { position: relative; z-index: 20; background: var(--vault); border-bottom: 1px solid var(--hair); }
@media (min-width: 900px) { .bar { position: sticky; top: 0; } }
.bar-row { display: flex; align-items: center; gap: 24px; min-height: 66px; }
.mark { margin: 0; font: 400 22px/1 var(--disp); letter-spacing: .2em; text-transform: uppercase; }
.mark a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.mark-seal { width: 30px; height: 30px; fill: none; stroke: var(--plat); stroke-width: 1.1; }
.mark-seal circle:nth-child(2) { stroke-dasharray: 1.2 1.6; stroke-width: 2.4; opacity: .65; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--plat-2); text-decoration: none; }
.nav a:hover { color: #fff; }
.acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.snd { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; background: none; border: 1px solid transparent; color: var(--pewter); font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.snd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.snd svg path:first-child { fill: currentColor; stroke: none; }
.snd .w1, .snd .w2 { opacity: 0; transition: opacity .2s; }
.snd[aria-pressed="true"] { color: var(--plat); border-color: var(--hair-2); }
.snd[aria-pressed="true"] .w1, .snd[aria-pressed="true"] .w2 { opacity: 1; }
.snd:hover { color: #fff; }
.net { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 8px; border: 1px dashed var(--hair-2); color: var(--pewter); }

.rd { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.rd-col { display: flex; flex-direction: column; transition: transform .9s cubic-bezier(.2, .9, .25, 1); }
.rd-col span { display: block; height: 1em; line-height: 1em; }
.rs { display: inline-block; line-height: 1em; vertical-align: top; }

/* ---------------------------------------------------------------- hero: the medallion and its certificate */
.stage::before { content: ""; position: absolute; inset: -6% 0; background: radial-gradient(closest-side, rgba(217, 213, 226, .11), rgba(217, 213, 226, .03) 60%, transparent); pointer-events: none; }
.stage::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 2%; height: 7%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); pointer-events: none; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; cursor: grab; z-index: 2; }
.stage canvas.grabbing { cursor: grabbing; }
.stage.live canvas { opacity: 1; }
.poster { position: absolute; inset: 9%; z-index: 1; transition: opacity .9s ease; }
.poster svg { width: 100%; height: 100%; display: block; }
.poster .ros-t { font-family: var(--disp); letter-spacing: .02em; }
.stage.live .poster { opacity: 0; }
.stamp { position: absolute; z-index: 4; left: 50%; top: 50%; margin: -38px 0 0 -150px; width: 300px; height: 76px; display: grid; place-items: center; border: 4px double var(--forfeit); color: var(--forfeit); font: 400 36px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: rotate(-11deg); pointer-events: none; background: rgba(12, 9, 17, .18); -webkit-mask-image: var(--grain), linear-gradient(#000, #000); -webkit-mask-composite: source-out; mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .75)); }
.stamp.on { opacity: 1; }
.stamp.sm { width: 170px; height: 44px; margin: -22px 0 0 -85px; font-size: 20px; border-width: 3px; }

.cert { position: relative; padding: clamp(20px, 2.4vw, 32px); background: var(--plate); border: 1px solid var(--hair-2); }
.cert::before { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid var(--hair); background: var(--wave-h) 0 0 / 24px 8px repeat-x, var(--wave-h) 0 100% / 24px 8px repeat-x, var(--wave-v) 0 0 / 8px 24px repeat-y, var(--wave-v) 100% 0 / 8px 24px repeat-y; }
.cert > * { position: relative; }
.cert-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eyebrow { font: 500 10.5px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--plat-2); }
.eyebrow .mute { margin-left: 10px; }
.steps { display: flex; gap: 8px; }
.steps[hidden] { display: none; }
.name { margin: 8px 0 6px; font: 400 clamp(36px, 4vw, 56px)/.98 var(--disp); letter-spacing: -.005em; overflow-wrap: anywhere; }
.sub { margin: 0; min-height: 1.9em; font-size: 13.5px; line-height: 1.9; color: var(--pewter); }
.sub i { font-style: normal; margin: 0 8px; color: var(--hair-2); }
.sub .tk { color: var(--plat); font-size: 13px; }
.sub a { color: var(--plat-2); }
.cond { min-height: 2.7em; margin: 10px 0 0; font: 400 clamp(17px, 1.45vw, 20px)/1.35 var(--disp); color: var(--plat-2); }
.cond b { font-weight: 400; color: var(--plat); }
.cond .plate { margin-top: 14px; }
.instruments { display: grid; grid-template-columns: 152px 152px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.inst { position: relative; margin: 0; }
.inst figcaption { text-align: center; }
.gauge { position: relative; width: 100%; }
.gauge-svg { width: 100%; display: block; overflow: visible; }
.g-track { fill: none; stroke: #0A080E; stroke-width: 11; }
.g-fill { fill: none; stroke-width: 11; }
.hatch { stroke: var(--plat); stroke-width: 1.3; }
.g-ticks .mj { stroke: var(--plat); stroke-width: 1.4; }
.g-ticks .mn { stroke: var(--pewter); stroke-width: .8; opacity: .8; }
.g-nums text { font: 500 8.5px/1 var(--mono); fill: var(--pewter); text-anchor: middle; dominant-baseline: middle; }
.n-blade { fill: var(--plat); }
.n-hub { fill: #1D1826; stroke: var(--plat); stroke-width: 1.2; }
.n-pin { fill: var(--plat); }
.inst .gauge + figcaption { position: relative; margin-top: -34px; display: flex; flex-direction: column; align-items: center; }
.inst figcaption b.engr { font: 400 40px/1 var(--disp); }
.inst figcaption span { font: 500 9px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }
.dial { position: relative; width: 100%; aspect-ratio: 1; user-select: none; -webkit-user-select: none; }
.dial-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.d-bezel { fill: #15111B; stroke: var(--hair-2); }
.d-knurl line { stroke: #4B4257; stroke-width: 1.4; }
.d-ring { fill: #0E0B13; stroke: var(--hair-2); }
.d-span { fill: none; stroke: var(--plat); stroke-width: 2.5; opacity: .85; }
.d-face .mj { stroke: var(--plat); stroke-width: 1.2; }
.d-face .mn { stroke: var(--pewter); stroke-width: .7; }
.d-face text { font: 500 8px/1 var(--mono); fill: var(--plat-2); text-anchor: middle; dominant-baseline: middle; }
.k0 { stop-color: #3D3548; }
.k1 { stop-color: #110E16; }
.d-knob { stroke: #4B4257; }
.d-grip line { stroke: rgba(217, 213, 226, .16); stroke-width: 1.2; }
.d-index { fill: var(--plat); }
.dial-read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dial-read b { font: 500 20px/1 var(--mono); color: var(--plat); font-variant-numeric: tabular-nums; }
.dial-read span { margin-top: 3px; font: 500 7.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pewter); }
.inst .dial + figcaption { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font: 400 11px/1.3 var(--mono); color: var(--plat-2); }
.inst .dial + figcaption .lab { font-size: 9px; }
.terms { margin: 0; display: grid; gap: 0; align-self: stretch; }
.terms div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.terms div:first-child { padding-top: 2px; }
.terms dt { grid-row: 1 / 3; align-self: center; width: 58px; font: 500 9.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }
.terms dd { margin: 0; font: 500 21px/1.1 var(--mono); color: var(--plat); font-variant-numeric: tabular-nums; text-align: right; }
.terms dd i { font-style: normal; font-size: 10px; margin-left: 5px; color: var(--pewter); letter-spacing: .1em; }
.terms dd.sm { font: 400 11px/1.3 var(--text); color: var(--pewter); }

/* the observation strip: each reading punched through the tape at its height; the dashed line is the floor */
.obs { margin-top: 16px; }
.obs-head { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.obs-head .mute { font: 400 11px/1.3 var(--mono); }
.punch { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 100px; margin: 8px 0 0; padding: 0; list-style: none; background: #0E0B13; border: 1px solid var(--hair); background-image: radial-gradient(circle, #000 1.3px, transparent 1.6px), radial-gradient(circle, #000 1.3px, transparent 1.6px); background-size: 12px 8px; background-position: 0 1px, 0 calc(100% - 1px); background-repeat: repeat-x; }
.punch .floor { position: absolute; left: 0; right: 0; top: calc(.55 * (100% - 44px) + 22px); border-top: 1px dashed rgba(217, 213, 226, .35); pointer-events: none; }
.obs-head .fl { display: inline-block; width: 18px; margin-right: 8px; vertical-align: middle; border-top: 1px dashed rgba(217, 213, 226, .5); }
.h { position: relative; height: 100%; border-left: 1px solid rgba(58, 50, 68, .45); }
.h:nth-child(2) { border-left: 0; }
.h-hole { position: absolute; left: 50%; top: calc(var(--y) * (100% - 44px) + 22px); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; }
.h::before { content: ""; position: absolute; left: 50%; top: calc(var(--y) * (100% - 44px) + 30px); bottom: 16px; border-left: 1px solid rgba(217, 213, 226, .14); }
.h-v { position: absolute; left: 0; right: 0; top: calc(var(--y) * (100% - 44px) + 2px); text-align: center; font: 500 11px/1 var(--mono); color: var(--plat); font-variant-numeric: tabular-nums; }
.h-t { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 400 8.5px/1 var(--mono); color: var(--pewter); letter-spacing: .04em; }
.h.up .h-hole { background: #030205; box-shadow: inset 0 2px 3px #000, 0 0 0 1.5px var(--plat), 0 1px 0 2px rgba(255, 255, 255, .08); }
.h.down .h-hole { border: 1.5px dashed var(--pewter); }
.h.down .h-v { color: var(--pewter); }
.h.none .h-hole { border: 1px dotted var(--hair-2); width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.h.none::before { display: none; }
.h.fresh .h-hole { animation: punch .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes punch { 0% { transform: scale(2.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); } }
.obs-now { display: grid; gap: 10px; margin-top: 12px; }
.obs-now .now { min-height: 3.2em; }
.obs-now .now { font-size: 13.5px; color: var(--plat-2); }
.obs-now .now b { font: 500 14px/1 var(--mono); color: var(--plat); }
.obs-now .now .mute { display: block; font: 400 11px/1.4 var(--mono); }
.obs-acts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px; }
.obs-acts .plate { white-space: normal; text-align: center; line-height: 1.2; }
.serial-l { min-height: 32px; }
.serial { display: grid; gap: 2px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hair); font: 400 11px/1.4 var(--mono); color: var(--pewter); }
.serial-l, .serial-r, .serial-l [data-f] { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; min-width: 0; }
.serial .lab { font-size: 9.5px; }
.serial-b { background: none; border: 0; padding: 6px 0; color: var(--plat-2); font: 400 11px/1 var(--mono); cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.serial-b .short { display: none; }
.serial-b:hover { color: #fff; }
.serial a, .serial .ca, .serial-b { display: inline-flex; align-items: center; min-height: 32px; color: var(--plat-2); padding: 0; }

.serial .verify { text-transform: uppercase; letter-spacing: .12em; font-size: 9.5px; }
.ca { background: none; border: 0; border-bottom: 1px dashed var(--pewter); font: 500 11px/1 var(--mono); cursor: pointer; }
.cert.is-empty .instruments, .cert.is-empty .obs { opacity: .35; }
.cert.is-broken .cond b, .cert.is-broken .eyebrow .mute { color: var(--forfeit); }

/* ---------------------------------------------------------------- how it works */

/* ---------------------------------------------------------------- sections */
.registry, .forfeits, .issue, .conditions { padding-top: clamp(56px, 7vw, 104px); }

/* the registry wall: a coin cabinet */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { --rx: 0deg; --ry: 0deg; --sx: 50%; --sy: 30%; position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; background: var(--plate); border: 1px solid var(--hair-2); color: var(--plat); cursor: pointer; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s cubic-bezier(.2, .8, .3, 1), border-color .2s; }
.card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--sx) var(--sy), rgba(217, 213, 226, .07), transparent 45%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.card:hover { border-color: #5E5469; }
.card:hover::after { opacity: 1; }
.card-medal { position: relative; display: grid; place-items: center; height: 214px; background: radial-gradient(closest-side, rgba(217, 213, 226, .09), transparent 75%), #0D0A12; border-bottom: 1px solid var(--hair); overflow: hidden; }
.card-medal img, .card-medal svg { width: 196px; height: 196px; display: block; }
.card-medal svg { width: 168px; height: 168px; }
.card-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 12px; }
.c-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.c-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-name { font: 400 24px/1.02 var(--disp); overflow-wrap: anywhere; }
.c-sub { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--plat-2); }
.c-pic { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(1.1); opacity: .9; }
.c-trust { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.c-trust b { font: 400 38px/.9 var(--disp); }
.c-trust i { font: 500 8.5px/1.4 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }
.c-terms { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font: 500 13px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.c-terms i { display: block; margin-bottom: 3px; font-style: normal; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }
.c-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--plat-2); }
.c-holes { display: inline-flex; gap: 5px; }
.c-holes i { width: 9px; height: 9px; border-radius: 50%; }
.c-holes i.up { background: #030205; box-shadow: inset 0 1px 1px #000, 0 0 0 1.2px var(--plat); }
.c-holes i.down { border: 1px dashed var(--pewter); }
.c-holes i.none { border: 1px dotted var(--hair-2); }
.c-ser { padding: 8px 0 0; border-top: 1px dashed var(--hair); font-size: 9.5px; letter-spacing: .08em; color: var(--pewter); }
.card .stamp { top: 107px; }
.card.is-broken .stamp { opacity: .95; }
.card.is-broken .c-trust b { opacity: .6; }
.card.is-kept .c-foot { color: var(--plat); }

/* ---------------------------------------------------------------- forfeits ledger */
.ledger { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-2); }
.ff { display: grid; grid-template-columns: 76px minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, 1.2fr) 250px; gap: 22px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.ff-medal { width: 76px; height: 76px; display: block; }
.ff-medal img, .ff-medal svg { width: 76px; height: 76px; display: block; }
.ff-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.ff-name { font: 400 24px/1.05 var(--disp); }
.ff-id .tk { font-size: 12px; color: var(--plat-2); }
.ff-why { flex-basis: 100%; font-size: 13px; color: var(--plat-2); }
.ff-why b { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--forfeit); margin-right: 6px; }
.ff-links { display: flex; gap: 14px; flex-basis: 100%; }
.ff-pool { display: flex; flex-direction: column; }
.ff-pool b { font: 400 34px/1 var(--disp); }
.ff-pool .u { font: 500 9.5px/1.3 var(--mono); letter-spacing: .16em; color: var(--pewter); }
.ff-drop { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--plat-2); }
.ff-drop .mute { font: 400 11px/1.3 var(--mono); }
.pbar { display: block; height: 5px; background: #0A080E; border: 1px solid var(--hair); }
.pbar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--plat) 0 2px, transparent 2px 4px); }
.ff-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.ff-note { margin: 0; font-size: 12.5px; color: var(--pewter); max-width: 28ch; }
.ff-note.ok { color: var(--plat); }

/* ---------------------------------------------------------------- issue: the press */
.press { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.blank { position: relative; display: grid; gap: 20px; padding: clamp(20px, 2.6vw, 34px); background: var(--plate); border: 1px solid var(--hair-2); }
.blank::before { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid var(--hair); background: var(--wave-h) 0 0 / 24px 8px repeat-x, var(--wave-h) 0 100% / 24px 8px repeat-x, var(--wave-v) 0 0 / 8px 24px repeat-y, var(--wave-v) 100% 0 / 8px 24px repeat-y; }
.blank > * { position: relative; }
.blank-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.bt-ser { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--plat-2); }
.bt-ser .linkish { font-size: 12px; }
.bl-id { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; }
.drop { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border: 1px dashed var(--hair-2); background: var(--well); text-align: center; cursor: pointer; font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--plat-2); overflow: hidden; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop em { display: block; margin-top: 6px; font-style: normal; font-size: 8.5px; letter-spacing: .06em; color: var(--pewter); text-transform: none; }
.drop:hover, .drop.over { border-color: var(--plat-2); }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bl-names { display: grid; gap: 12px; }
.fld { display: grid; gap: 7px; }
.fld > span:first-child { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }
.fld input, .mb-row input, .mb-row select { width: 100%; min-height: 48px; padding: 0 12px; background: var(--well); border: 1px solid var(--hair-2); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); color: var(--plat); font: 500 17px/1 var(--mono); border-radius: 0; outline: none; }
.fld input::placeholder { color: #4E4659; }
.fld input:focus, .mb-row input:focus, .mb-row select:focus { border-color: var(--plat-2); }
.unit-in { display: flex; align-items: stretch; }
.unit-in input { flex: 1; min-width: 0; }
.unit-in i { display: grid; place-items: center; min-width: 52px; padding: 0 10px; border: 1px solid var(--hair-2); border-left: 0; background: #16121C; font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: var(--pewter); }
.unit-in.pre i { order: -1; border-left: 1px solid var(--hair-2); border-right: 0; min-width: 40px; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hint { display: block; font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--pewter); }
.bl-bond { display: grid; gap: 10px; }
.slide { position: relative; padding: 4px 0 22px; }
.slide input[type=range] { --p: 50%; width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.slide input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(var(--plat), var(--plat)) 0 0 / var(--p) 100% no-repeat, #0A080E; border: 1px solid var(--hair-2); }
.slide input[type=range]::-moz-range-track { height: 4px; background: linear-gradient(var(--plat), var(--plat)) 0 0 / var(--p) 100% no-repeat, #0A080E; border: 1px solid var(--hair-2); }
.slide input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F4F1F8, #9E97AB); border: 1px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .7), inset 0 0 0 5px rgba(0, 0, 0, .06); }
.slide input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #D9D5E2; border: 1px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.detents { position: absolute; left: 11px; right: 11px; top: 26px; height: 16px; pointer-events: none; }
.detents i { position: absolute; top: 0; width: 1px; height: 6px; background: var(--pewter); }
.detents span { position: absolute; top: 8px; left: 0; transform: translateX(-50%); font: 500 9px/1 var(--mono); color: var(--pewter); }
.bl-lock { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; }
.dial.in { cursor: grab; touch-action: none; border-radius: 50%; }
.dial.in.turning { cursor: grabbing; }
.dial.in .dial-read b { font-size: 24px; }
.bl-lock-f { display: grid; gap: 10px; }
.bl-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bl-terms .hint { margin-top: 2px; }
.bill { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 6px; font: 400 13px/1.3 var(--mono); }
.bill div { display: flex; justify-content: space-between; gap: 12px; color: var(--plat-2); }
.bill dd { margin: 0; font-variant-numeric: tabular-nums; }
.bill .total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--hair-2); color: var(--plat); font-size: 15px; font-weight: 500; }
.form-msg { min-height: 1.4em; margin: -6px 0 0; font-size: 14px; color: var(--plat-2); }
.form-msg.err { color: #E98A8F; }
.form-msg.ok { color: var(--plat); }
.proof { position: sticky; top: 124px; display: grid; justify-items: center; gap: 4px; }
.stage.sm { width: min(100%, 440px); }
.specimen { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-24deg); font: 400 clamp(34px, 4.6vw, 58px)/1 var(--disp); letter-spacing: .2em; text-transform: uppercase; color: #D9D5E2; opacity: .42; mix-blend-mode: difference; pointer-events: none; }
.proof-read { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; align-items: center; width: min(100%, 440px); }
.proof-read .gauge { grid-row: 1 / 3; }
.proof-read p { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.proof-read p b { font: 400 54px/1 var(--disp); }
.proof-read p span { font: 500 9.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }
.proof-read .proof-note { display: block; font-size: 13px; color: var(--plat-2); }

/* ---------------------------------------------------------------- conditions */
.conditions .sec-t { margin-bottom: 22px; }
.clauses { counter-reset: c; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-2); }
.clauses li { counter-increment: c; position: relative; padding: 16px 0 16px 52px; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--plat-2); }
.clauses li::before { content: counter(c, upper-roman); position: absolute; left: 0; top: 14px; width: 40px; font: 400 22px/1 var(--disp); color: var(--pewter); }
.clauses b { font-weight: 600; color: var(--plat); }

/* ---------------------------------------------------------------- footer: the fine print band */
.fine { margin-top: clamp(64px, 8vw, 120px); border-top: 1px solid var(--hair-2); background: #0A080E; }
.micro { overflow: hidden; height: 18px; border-bottom: 1px solid var(--hair); white-space: nowrap; font: 500 7.5px/18px var(--mono); letter-spacing: .3em; color: #5E566A; }
.micro span::after { content: "PAYABLE TO THE HOLDERS IF THE DEVELOPER SELLS BEFORE MATURITY OR BELOW THE FLOOR \00B7 TRUSTPAD \00B7 PAYABLE TO THE HOLDERS IF THE DEVELOPER SELLS BEFORE MATURITY OR BELOW THE FLOOR \00B7 TRUSTPAD \00B7 PAYABLE TO THE HOLDERS IF THE DEVELOPER SELLS BEFORE MATURITY OR BELOW THE FLOOR \00B7 TRUSTPAD"; }
.fine-cols { display: grid; grid-template-columns: 1.2fr 1.2fr auto; gap: 28px; padding-top: 28px; padding-bottom: 24px; font-size: 13.5px; color: var(--plat-2); }
.fine-cols p { margin: 0; }
.fine-links { display: flex; flex-wrap: wrap; gap: 4px 18px; align-content: start; }
.fine-links a { display: inline-flex; align-items: center; min-height: 40px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--plat-2); }
.fine-links a:hover { color: #fff; }
.fine-last { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; padding-bottom: 20px; background: linear-gradient(var(--hair), var(--hair)) var(--pad) 0 / calc(100% - 2 * var(--pad)) 1px no-repeat; font-size: 12px; color: var(--pewter); }
.mark-sm { font: 400 15px/1 var(--disp); letter-spacing: .24em; text-transform: uppercase; color: var(--plat-2); }

/* ---------------------------------------------------------------- dialogs, drawer, toasts */
.dlg { border: 0; padding: 0; background: transparent; color: var(--plat); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; }
.dlg::backdrop, .drawer::backdrop { background: rgba(5, 3, 8, .78); }
.dlg-x { position: absolute; top: 10px; right: 10px; z-index: 6; width: 44px; height: 44px; display: grid; place-items: center; background: #1C1725; border: 1px solid #4A4156; color: var(--plat); font-size: 24px; line-height: 1; cursor: pointer; }
.dlg-x:hover { background: #2A2335; }
.cert-dlg { width: min(1180px, calc(100vw - 24px)); background: var(--vault); border: 1px solid var(--hair-2); }
.cd-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; }
.cd-medal { display: grid; place-items: center; }
.cd-medal .stage { width: min(100%, 500px); }
.cert-dlg .cert { border-color: var(--hair-2); }
.cert-dlg .name { font-size: clamp(34px, 3.6vw, 52px); }
.wpick { position: relative; width: min(440px, calc(100vw - 24px)); background: var(--plate); border: 1px solid var(--hair-2); padding: 28px 24px 22px; }
.wpick::before { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid var(--hair); background: var(--wave-h) 0 0 / 24px 8px repeat-x, var(--wave-h) 0 100% / 24px 8px repeat-x; }
.wpick > * { position: relative; }
.wpick h2 { margin: 0 0 18px; font: 400 32px/1 var(--disp); }
.wp-list { display: grid; gap: 8px; }
.wp-item { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; background: #1C1725; border: 1px solid #4A4156; color: var(--plat); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-align: left; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.wp-item:hover { background: #251F30; border-color: #6B6177; }
.wp-item img { width: 28px; height: 28px; }
.wp-dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid currentColor; background: radial-gradient(circle, currentColor 2px, transparent 2.5px) 0 0 / 7px 7px; }
.wp-get { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; }
.wp-get a { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; color: var(--plat-2); }
.wp-none, .wp-cur { color: var(--pewter); }
.wp-err { color: #E98A8F; font-size: 14px; }
.wp-off { margin-top: 14px; min-height: 44px; padding: 0 16px; border: 1px solid var(--hair-2); background: none; color: var(--plat); font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(480px, 100vw); max-width: 100vw; padding: 0; border: 0; border-left: 1px solid var(--hair-2); background: var(--plate); color: var(--plat); overflow: auto; }
.dr-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--plate); border-bottom: 1px solid var(--hair-2); }
.dr-head h2 { margin: 0; font: 400 30px/1 var(--disp); }
.dr-head .dlg-x { position: static; }
.dr-who { margin: 0; padding: 12px 20px; font-size: 13px; color: var(--plat-2); border-bottom: 1px solid var(--hair); }
.dr-list { padding: 0 20px 30px; }
.dr-empty { padding: 20px 0; color: var(--plat-2); }
.mb { padding: 20px 0; border-bottom: 1px solid var(--hair); }
.mb-head { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.mb-medal img, .mb-medal svg { width: 60px; height: 60px; display: block; }
.mb-name { font: 400 22px/1.1 var(--disp); font-weight: 400; }
.mb-head .tk { font-size: 12px; color: var(--plat-2); }
.mb-state { display: block; margin-top: 3px; font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pewter); }
.mb-state i { font-style: normal; color: var(--hair-2); }
.mb.is-broken .mb-state { color: var(--forfeit); }
.mb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 16px 0 0; }
.mb-facts dt { font: 500 9.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }
.mb-facts dd { margin: 3px 0 0; font: 500 15px/1.2 var(--mono); color: var(--plat); }
.mb-verdict { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--hair-2); font-size: 13.5px; color: var(--plat-2); }
.mb-verdict.breaks { border-color: rgba(196, 38, 46, .6); color: #F1C9CB; }
.mb-verdict.clean { border-color: var(--plat-2); color: var(--plat); }
.mb-acts { display: grid; gap: 12px; margin-top: 14px; }
.mb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.mb-row label { display: grid; gap: 6px; }
.mb-row label > span:first-child { font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }
.mb-row input, .mb-row select { min-height: 44px; font-size: 14px; }
.mb-row.fees { grid-template-columns: 1fr; font-size: 13px; color: var(--plat-2); }
.mb-row.fees b { font-family: var(--mono); color: var(--plat); font-weight: 500; }
.fee-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.breakbox { margin-top: 14px; padding: 14px; border: 1px solid var(--forfeit); background: rgba(196, 38, 46, .07); font-size: 14px; color: var(--plat-2); }
.breakbox p { margin: 0 0 10px; }
.bb-h { font: 400 22px/1.1 var(--disp) !important; color: #F2D0D2 !important; }
.bb-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; cursor: pointer; color: var(--plat); }
.bb-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--forfeit); cursor: pointer; flex: none; }
.bb-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; width: min(540px, calc(100vw - 32px)); }
.toast { padding: 12px 16px 12px 14px; background: #1C1725; color: var(--plat); border: 1px solid #4A4156; border-left: 3px solid var(--plat); font-size: 14.5px; line-height: 1.45; box-shadow: 0 18px 40px -18px #000; }
.toast.err { border-left-color: var(--forfeit); }
body.busy { cursor: progress; }
/* until the registry is read, only the hero is laid out: the sections below appear whole instead of pushing each other */
body.loading main > section:not(.hero), body.loading .fine { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .sub { min-height: 3.8em; }
  .serial-b .full { display: none; }
  .serial-b .short { display: inline; }
  .instruments { grid-template-columns: 1fr 1fr; justify-items: center; }
  .instruments .inst { width: min(100%, 168px); }
  .terms { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; width: 100%; justify-self: stretch; border-top: 1px solid var(--hair); }
  .terms div, .terms div:first-child { grid-template-columns: 1fr; grid-template-rows: auto; padding: 10px 0 8px; }
  .terms dt { grid-row: auto; width: auto; margin-bottom: 5px; }
  .terms dd { text-align: left; }
}
@media (max-width: 1180px) {
  .snd [data-sound-l] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .snd { width: 40px; justify-content: center; padding: 0; }
  .net { display: none; }
  .nav a { padding: 0 9px; }
  .ff { grid-template-columns: 64px minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.2fr); }
  .ff-medal, .ff-medal img, .ff-medal svg { width: 64px; height: 64px; }
  .ff-act { grid-column: 2 / -1; flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; }
}
@media (max-width: 980px) {
  .nav { display: none; }
  .cd-grid { grid-template-columns: minmax(0, 1fr); }
  .cd-medal .stage { width: min(100%, 380px); }
  .press { grid-template-columns: minmax(0, 1fr); }
  .proof { position: static; order: -1; }
  .fine-cols { grid-template-columns: 1fr 1fr; }
  .fine-links { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .bar-row { gap: 10px; min-height: 58px; }
  .mark { font-size: 18px; letter-spacing: .16em; }
  .mark-seal { width: 26px; height: 26px; }
  .snd [data-sound-l] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .snd { width: 40px; justify-content: center; padding: 0; }
  .net { display: none; }
  .acts { gap: 6px; }
  .instruments { grid-template-columns: 1fr 1fr; }
  .terms { grid-column: 1 / -1; column-gap: 10px; }
  .terms dd { font-size: 17px; }
  .terms dd i { margin-left: 3px; font-size: 9px; }
  .inst figcaption b.engr { font-size: 40px; }
  .ff { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 14px; }
  .ff-medal, .ff-medal img, .ff-medal svg { width: 56px; height: 56px; }
  .ff-pool, .ff-drop, .ff-act { grid-column: 2; }
  .ff-act { flex-wrap: wrap; }
  .bl-id { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .drop { width: 92px; height: 92px; }
  .bl-lock { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .bl-terms { grid-template-columns: 1fr; }
  .clauses { grid-template-columns: 1fr; }
  .fine-cols { grid-template-columns: 1fr; }
  .serial-b .full { display: none; }
  .serial-b .short { display: inline; }
  .stamp { width: 220px; height: 58px; margin: -29px 0 0 -110px; font-size: 26px; }
  .proof-read { grid-template-columns: 120px minmax(0, 1fr); }
  .proof-read p b { font-size: 44px; }
  .cd-grid { padding: 16px 12px; }
  .cert-dlg .cert { padding: 18px 14px; }
}
@media (max-width: 380px) {
  .plate { white-space: normal; text-align: center; line-height: 1.25; }
  .plate.sm { padding: 0 10px 0 9px; letter-spacing: .12em; }
  .plate.sm::before { display: none; }
  .mark { font-size: 16px; letter-spacing: .12em; }
  .mark-seal { display: none; }
  .bl-lock { grid-template-columns: 1fr; }
  .bl-lock .dial { width: 150px; justify-self: center; }
  .punch .h-v { font-size: 9.5px; }
}


/* ================================================================ v3: clarity + craft
   type scale 1.333 on 16: 12 / 16 / 21.3 / 28.4 / 37.9 / 50.5 / 67.3 ; easing and durations shared */
:root {
  --t0: 12px; --t1: 16px; --t2: 21.33px; --t3: 28.43px; --t4: 37.9px; --t5: 50.52px; --t6: 67.34px;
  --ease: cubic-bezier(.2, .8, .2, 1); --d1: .16s; --d2: .32s; --d3: .6s;
}
.mono, .stats, .terms dd, .rail, .c-terms, .ff-pool b, .bill { font-variant-numeric: tabular-nums; }

/* layered background: a fine engraving grid, light falling from the medal, grain on top (body::after) */
html { background: var(--vault); overflow-x: clip; }
body { overflow-x: clip; }
body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 68% 30%, rgba(217, 213, 226, .07), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, .55)),
    linear-gradient(rgba(217, 213, 226, .025) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(217, 213, 226, .025) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--vault); }

.subbar { display: none; }
.stage { position: relative; width: min(100%, 600px); aspect-ratio: 1; touch-action: pan-y; }

/* ---- hero: one focal object, one line, one action, three numbers */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; min-height: min(calc(100svh - 67px), 860px); padding-top: 12px; padding-bottom: 28px; }
.hero::before { content: ""; position: absolute; z-index: -1; right: 0; top: -6%; width: 62%; aspect-ratio: 1; background: repeating-radial-gradient(circle at 50% 50%, rgba(217, 213, 226, .05) 0 1px, transparent 1px 9px); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 66%); mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 66%); pointer-events: none; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.kicker { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--pewter); }
.kicker-k { color: var(--plat-2); }
.kicker-r { flex: 1; height: 8px; background: var(--wave-h) 0 0 / 24px 8px repeat-x; opacity: .7; }
.line { margin: 0; max-width: 13ch; font: 400 clamp(38px, 4.4vw, var(--t6))/1.02 var(--disp); letter-spacing: -.015em; color: var(--plat); text-wrap: balance; }
.line em { font-style: normal; color: transparent; background: repeating-linear-gradient(180deg, var(--plat) 0 1.3px, rgba(217, 213, 226, .2) 1.3px 3px); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .8px rgba(217, 213, 226, .92); }
.cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.plate.lg { min-height: 54px; padding: 0 26px 0 20px; font-size: 12.5px; }
.linkish.quiet { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 12px 0; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 4px 0 0; border-top: 1px solid var(--hair-2); width: 100%; max-width: 520px; }
.stats > div { position: relative; padding: 14px 18px 0 0; }
.stats > div + div { padding-left: 18px; border-left: 1px solid var(--hair); }
.stats dt { font: 500 9.5px/1.2 var(--mono); white-space: nowrap; letter-spacing: .18em; text-transform: uppercase; color: var(--pewter); }
.stats dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 8px 0 0; }
.stats dd b { font: 500 clamp(24px, 2.2vw, 32px)/1 var(--mono); color: var(--plat); letter-spacing: -.02em; white-space: nowrap; }
.stats dd i { font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: var(--pewter); }
.stats.facts dt { color: var(--plat-2); }
body.loading .stats dd b { color: transparent; background: repeating-linear-gradient(180deg, rgba(217, 213, 226, .18) 0 1px, transparent 1px 3px); min-width: 3ch; }
.token { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin: 0; font: 400 11px/1 var(--mono); color: var(--pewter); }
.token .lab { font-size: 9.5px; }
.token a, .token .ca { display: inline-flex; align-items: center; min-height: 32px; color: var(--plat-2); }
.hero-medal { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.demo-tag { position: absolute; z-index: 5; left: 50%; top: 2%; transform: translateX(-50%); padding: 7px 12px; border: 1px solid var(--hair-2); background: rgba(12, 9, 17, .8); font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-2); white-space: nowrap; }
.demo-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border: 1px solid var(--plat-2); border-radius: 50%; vertical-align: 1px; }
.stamp.kept { border-color: var(--plat); color: var(--plat); background: rgba(12, 9, 17, .35); }

/* the rail under the medal: lock dial, the six readings, status, trust */
.rail { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: min(100%, 560px); padding: 12px 0 0; border-top: 1px solid var(--hair); }
.rail-dial { width: 76px; }
.rail-dial .dial-read b { font-size: 13px; }
.rail-dial .dial-read span { font-size: 5.5px; letter-spacing: .1em; }
.rail-dial .d-face text { font-size: 10px; }
.rail-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; min-height: 36px; }
.rail-steps { display: flex; gap: 6px; margin-left: auto; }
.rail-steps .key { width: 36px; height: 36px; font-size: 20px; }
body.demo .rail-steps { display: none; }
.rail-name b { font: 400 var(--t2)/1.1 var(--disp); }
.rail-name .mono { font-size: 11px; color: var(--plat-2); }
.rail-holes { display: flex; gap: 8px; margin: 9px 0 7px; padding: 0; list-style: none; }
.rail-holes li { width: 12px; height: 12px; border-radius: 50%; border: 1px dotted var(--hair-2); }
.rail-holes li.up, .rail-holes li.fresh-up { border: 0; background: #030205; box-shadow: inset 0 1px 2px #000, 0 0 0 1.4px var(--plat); }
.rail-holes li.down, .rail-holes li.fresh-down { border: 1.2px dashed var(--pewter); }
.rail-holes li.fresh-up, .rail-holes li.fresh-down { animation: punch .55s var(--ease); }
.rail-status { margin: 0; min-height: 1.5em; font: 400 12px/1.5 var(--mono); color: var(--plat-2); }
.rail-trust { display: flex; flex-direction: column; align-items: center; }
.rail-trust b { font: 400 var(--t4)/.9 var(--disp); }
.rail-trust span { font: 500 8.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter); }


/* ---- how it works: three marks from the vault, one line each */
.how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.how li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px 24px 20px 0; }
.how li + li { padding-left: 24px; border-left: 1px solid var(--hair); }
.ic { width: 48px; height: 48px; fill: none; stroke: var(--plat-2); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.how b { display: block; font: 400 var(--t2)/1.1 var(--disp); color: var(--plat); }
.how span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--plat-2); }

/* ---- section heads: index key, label, rule, counter; then the engraved title */
.certsec, .registry, .forfeits, .issue, .conditions { padding-top: clamp(64px, 8vw, 120px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sh sh" "t tabs" "p tabs"; column-gap: 24px; align-items: end; margin-bottom: 26px; }
.sh { grid-area: sh; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--pewter); }
.sh-no { color: var(--plat); padding: 5px 7px; border: 1px solid var(--hair-2); }
.sh-lab, .sh-count { white-space: nowrap; }
.sh-lab { color: var(--plat-2); }
.sh-rule { flex: 1; height: 8px; background: var(--wave-h) 0 0 / 24px 8px repeat-x; opacity: .55; }
.sh-count { color: var(--plat-2); text-decoration: none; }
a.sh-count { display: inline-flex; align-items: center; min-height: 32px; }
a.sh-count:hover { color: #fff; }
.sec-t { grid-area: t; margin: 0; font: 400 clamp(40px, 5.2vw, var(--t6))/.95 var(--disp); letter-spacing: -.012em; color: transparent; background: repeating-linear-gradient(180deg, var(--plat) 0 1.3px, rgba(217, 213, 226, .16) 1.3px 3px); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .8px rgba(217, 213, 226, .9); }
.sec-p { grid-area: p; margin: 12px 0 0; max-width: 60ch; color: var(--plat-2); font-size: var(--t1); }
.certsec .sec-head { margin-bottom: 16px; }
.certsec .sh { margin: 0; }
.certsec[hidden] { display: none; }

/* the certificate section: two columns on wide screens */
@media (min-width: 1100px) {
  .certsec .cert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: 48px; align-content: start; }
  .certsec .cert > * { grid-column: 1; }
  .certsec .cert > .instruments { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ---- tabs with a sliding plate */
.tabs { grid-area: tabs; position: relative; display: flex; border: 1px solid var(--hair-2); }
.tabs[hidden] { display: none; }
.tab-ind { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--plat); transition: transform var(--d2) var(--ease), width var(--d2) var(--ease); pointer-events: none; }
.tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; background: none; border: 0; color: var(--pewter); font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color var(--d2) var(--ease); }
.tab span { color: var(--plat-2); transition: color var(--d2) var(--ease); }
.tab:hover { color: #fff; }
.tab[aria-pressed="true"], .tab[aria-pressed="true"] span { color: var(--vault); }

/* ---- invitations instead of empty lists */
.invite { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 0 44px; text-align: center; border-bottom: 1px solid var(--hair); list-style: none; }
.inv-t { margin: 0; max-width: 40ch; font: 400 var(--t3)/1.15 var(--disp); color: var(--plat); text-wrap: balance; }
.blanks { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); padding: 26px 0 8px; }
.blanks-in { display: flex; gap: 22px; width: max-content; animation: blanks 60s linear infinite; }
.blank-slot { flex: none; width: 150px; height: 150px; border-radius: 50%; border: 1px dashed var(--hair-2); background: radial-gradient(circle, transparent 38%, rgba(217, 213, 226, .03) 39% 62%, transparent 63%), repeating-radial-gradient(circle, rgba(217, 213, 226, .05) 0 1px, transparent 1px 7px); box-shadow: inset 0 0 0 10px rgba(12, 9, 17, .6), inset 0 0 0 11px var(--hair); }
@keyframes blanks { to { transform: translateX(-50%); } }
.ff-inv { padding-top: 34px; }
.inv-mark { width: 84px; height: 84px; border-radius: 50%; border: 1px dashed var(--hair-2); background: linear-gradient(118deg, transparent 47%, rgba(196, 38, 46, .55) 48% 49%, transparent 50%), linear-gradient(62deg, transparent 58%, rgba(196, 38, 46, .4) 59% 60%, transparent 61%), repeating-radial-gradient(circle, rgba(217, 213, 226, .06) 0 1px, transparent 1px 6px); }

/* ---- states: busy plates turn their dial, tooltips, toasts */
.plate[aria-busy="true"] { pointer-events: none; opacity: .85; }
.plate[aria-busy="true"]::before { animation: turn 1.2s steps(12) infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
[data-tip] { position: relative; }
@media (hover: hover) {
  [data-tip]::after { content: attr(data-tip); position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(240px, 44vw); padding: 8px 10px; background: #1C1725; border: 1px solid var(--hair-2); font: 400 12px/1.4 var(--text); letter-spacing: 0; text-transform: none; color: var(--plat); opacity: 0; transform: translateY(4px); transition: opacity var(--d1) var(--ease), transform var(--d1) var(--ease); pointer-events: none; }
  [data-tip]:hover::after { opacity: 1; transform: none; }
  .stats > div:last-child::after { left: auto; right: 0; }
}
.toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; animation: toast-in var(--d2) var(--ease); }
.toast-i { width: 18px; height: 18px; margin-top: 2px; border: 3px double var(--plat); transform: rotate(-11deg); }
.toast.err .toast-i { border-color: var(--forfeit); }
.toast-x { width: 32px; height: 32px; margin: -6px -8px 0 0; background: none; border: 0; color: var(--pewter); font-size: 20px; line-height: 1; cursor: pointer; }
.toast-x:hover { color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .rail { grid-template-columns: 66px minmax(0, 1fr) auto; }
  .rail-dial { width: 66px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 20px; padding-top: 18px; }
  .hero-copy { display: contents; }
  .kicker { order: 1; } .line { order: 2; } .hero-medal { order: 3; } .cta { order: 4; } .stats { order: 5; } .token { order: 6; }
  .hero-medal .stage { width: min(78vw, 400px); }

  .line { max-width: 16ch; }
  .stats { max-width: none; }
  .how ol { grid-template-columns: 1fr; }
  .how li, .how li + li { padding: 16px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .how li:first-child { border-top: 0; }
  .sec-head { grid-template-columns: 1fr; grid-template-areas: "sh" "t" "p" "tabs"; }
  .tabs { margin-top: 16px; justify-self: start; }
}
@media (max-width: 700px) {
  .subbar { display: block; }
  .m-mine { display: none; }
  .m-mine:not([hidden]) { display: inline-flex; width: 100%; margin-bottom: 10px; }
  .acts [data-mine] { display: none; }
  .line { font-size: clamp(34px, 10vw, 44px); }
  .stats dd b { font-size: 22px; }
  .stats > div { padding-right: 10px; }
  .stats > div + div { padding-left: 10px; }
  .rail { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; }
  .rail-dial { width: 58px; }
  .rail-trust b { font-size: var(--t3); }
  .blank-slot { width: 110px; height: 110px; }
  .sh-rule { display: none; }
  .sh-count { margin-left: auto; }
  .inv-t { font-size: var(--t2); }
  .demo-tag { top: 0; }
}
@media (min-width: 701px) { .m-mine { display: none !important; } }
@media (max-width: 380px) {
  .stats dt { font-size: 8.5px; letter-spacing: .12em; }
  .cta { gap: 12px; }
}