:root {
--bg:#020202;
--line:#343737;
--white:#e8e8e6;
--red:#aa0000;
--red-dim:#890000;
--pending:#ff9300;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
* {
box-sizing:border-box}
html {
background:var(--bg);
scroll-behavior:smooth}
body {
margin:0;
color:var(--white);
font:14px var(--mono);
letter-spacing:.01em;
background:var(--bg);
min-height:100vh}
.noise {
display:none}
.page-shell {
max-width:1180px;
margin:0 auto;
padding:25px 36px 42px}
.masthead {
text-align:center;
padding:4px 0 23px}
.eyebrow {
margin:0 0 13px;
color:#686d6c;
font-size:10px;
letter-spacing:.18em}
.masthead-title {
display:block;
width:min(100%,645px);
height:auto;
object-fit:contain;
object-position:center;
margin:0 auto}
.masthead h1 span {
font-size:.64em;
margin-left:7px;
letter-spacing:-.08em}
.rule {
display:flex;
align-items:center;
justify-content:center;
gap:12px;
max-width:465px;
margin:22px auto 10px}
.rule i {
display:block;
height:1px;
flex:1;
background:var(--red-dim)}
.rule b {
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:50%;
background:var(--red);
color:#eee;
font:800 22px Georgia,serif}
.intro {
margin:0 auto;
color:#9a9d9c;
font-size:12px;
letter-spacing:.08em}
.address-card,.live-card,.ledger-card {
background:#020202
        ;
border:1px solid #3b3f3f;
border-radius:8px;
box-shadow:0 15px 50px #0008}
.address-card {
margin-bottom:20px;
padding:16px 19px}
.live-card {
margin-bottom:20px;
padding:12px 19px}
.card-topline,.ledger-footer {
display:flex;
align-items:center;
justify-content:space-between;
color:#787d7c;
font-size:10px;
letter-spacing:.14em}
.status {
color:#79ad62}
.status i {
display:inline-block;
width:6px;
height:6px;
margin-right:6px;
border-radius:50%;
background:#72b260;
box-shadow:0 0 8px #72b260}
.address-layout {
display:flex;
align-items:center;
gap:26px;
margin-top:13px}
.address-copy {
display:grid;
grid-template-columns:1fr auto;
flex:1;
gap:12px;
align-items:center}
.address-copy code {
min-width:0;
color:#ddd;
font-size:14px;
line-height:1.7;
overflow-wrap:anywhere}
.copy-button,.pagination button {
border:1px solid var(--red-dim);
background:#121313;
color:#d65a5a;
font-family:var(--mono);
cursor:pointer}
.copy-button {
border-radius:5px;
padding:12px 20px;
font-size:14px;
font-weight:600;
letter-spacing:.07em}
.copy-button:hover,.copy-button:focus-visible,.pagination button:hover,.pagination button:focus-visible {
background:var(--red);
color:#fff;
outline:none}
.copy-button kbd {
display:none}
.copy-feedback {
grid-column:1/-1;
height:14px;
margin:0;
color:#7fb56b;
font-size:11px}
.qr-wrap {
display:flex;
flex:none;
width:126px;
flex-direction:column;
gap:7px;
align-items:center;
color:#777;
font-size:8px;
letter-spacing:.1em}
.qr-wrap img {
width:116px;
height:116px;
padding:6px;
background:#eee;
image-rendering:pixelated}
.ticker {
margin-top:10px;
overflow:hidden;
border-top:1px solid #252929;
border-bottom:1px solid #252929;
padding:9px 0;
white-space:nowrap}
.ticker-track {
display:inline-flex;
min-width:100%;
animation:ticker-scroll 28s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track {
animation-play-state:paused}
.ticker-item {
display:inline-flex;
align-items:center;
gap:10px;
padding-right:34px;
color:#bfc3c1;
font-size:11px;
letter-spacing:.08em}
.ticker-item::after {
content:'·';
margin-left:20px;
color:#555}
.ticker-empty {
color:#777}
.ticker-empty::after {
content:''}
@keyframes ticker-scroll {
from {
transform:translateX(0)}
to {
transform:translateX(-50%)}
}
.ledger-card {
overflow:hidden}
.ledger-heading {
padding:15px 20px 12px;
border-bottom:1px solid var(--line);
text-align:center}
.ledger-heading p {
margin:0 0 3px;
color:#747a79;
font-size:10px;
letter-spacing:.17em}
.ledger-heading h2 {
margin:0 0 11px;
font-size:27px;
font-weight:500;
text-transform:uppercase;
letter-spacing:.14em}
.ledger-summary {
display:flex;
justify-content:center;
gap:35px;
color:#777;
font-size:10px;
letter-spacing:.08em}
.ledger-summary b {
color:#d65a5a;
font-weight:500}
.table-scroll {
overflow-x:auto}
table {
width:100%;
min-width:720px;
border-collapse:collapse;
table-layout:fixed}
th,td {
padding:7px 15px;
border-right:1px solid #343838;
border-bottom:1px solid #252929;
text-align:left;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
th {
color:#ddd;
font-size:11px;
font-weight:500;
text-transform:uppercase;
letter-spacing:.08em}
td {
color:#c2c5c3;
font-size:12px}
th:first-child,td:first-child {
width:70px;
text-align:center}
th:nth-child(2),td:nth-child(2) {
width:51%}
th:nth-child(3),td:nth-child(3) {
width:19%;
text-align:right}
th:last-child,td:last-child {
width:19%;
border-right:0;
text-align:right}
tbody tr:nth-child(odd) {
background:rgba(255,255,255,.035)}
tbody tr:hover {
background:rgba(137,0,0,.1)}
td:first-child {
color:#d8d9d6}
td:nth-child(3) {
color:#d65a5a;
font-weight:500}
.ledger-footer {
padding:13px 20px}
.ledger-footer b {
color:#c6cac8;
font-weight:400}
footer {
display:flex;
justify-content:space-between;
padding:24px 3px 0;
color:#5d6261;
font-size:10px;
letter-spacing:.1em}
footer p {
margin:0}
footer a {
color:#858a89;
text-decoration:none}
footer a:hover {
color:#d65a5a}
footer span {
padding:0 10px}
.status.demo {
color:var(--pending)}
.status.demo i {
background:var(--pending);
box-shadow:0 0 8px var(--pending)}
.status.online,.status.confirmed {
color:#79ad62}
.status.online i,.status.confirmed i {
background:#72b260;
box-shadow:0 0 8px #72b260,0 0 14px #72b26088}
.status.detected,.status.confirming {
color:var(--pending)}
.status.detected i,.status.confirming i {
background:var(--pending);
box-shadow:0 0 8px var(--pending),0 0 14px #ff930088}
.status.denied,.status.orphaned {
color:#ff6457}
.status.denied i,.status.orphaned i {
background:#ff3028;
box-shadow:0 0 8px #ff3028,0 0 14px #ff302888}
.pagination {
display:flex;
justify-content:center;
align-items:center;
gap:16px;
padding:14px 20px;
color:#777;
font-size:10px;
letter-spacing:.12em}
.pagination button {
padding:8px 14px;
font-size:10px;
font-weight:500}
.status.degraded {
color:#ff6457}
.status.unavailable {
color:#ff6457}
.status.unavailable i {
background:#ff3028;
box-shadow:0 0 8px #ff3028}
.status.degraded i {
background:#ff6457;
box-shadow:0 0 8px #ff6457}
@media(prefers-reduced-motion:reduce) {
.ticker-track {
animation:none}
}
@media(max-width:700px) {
.page-shell {
padding:20px 14px 30px}
.masthead {
padding-bottom:18px}
.masthead h1 {
font-size:clamp(63px,18vw,112px)}
.intro {
line-height:1.6}
.address-card {
padding:13px}
.live-card {
padding:11px 13px}
.address-layout {
align-items:flex-start;
gap:12px}
.address-copy {
display:flex;
flex-direction:column;
align-items:stretch}
.address-copy code {
font-size:12px}
.copy-button {
width:100%}
.copy-button kbd {
display:inline;
margin-left:10px;
color:inherit;
opacity:.65;
font-size:10px}
.qr-wrap {
width:92px}
.qr-wrap img {
width:86px;
height:86px;
padding:4px}
.qr-wrap span {
font-size:7px;
text-align:center}
.ledger-heading h2 {
font-size:20px;
letter-spacing:.09em}
.ledger-summary {
gap:16px;
flex-wrap:wrap;
font-size:9px}
.ledger-footer {
font-size:8px}
footer {
flex-direction:column;
gap:11px;
text-align:center}
}
:root {
--bg:#020202;
--line:#343737;
--white:#e8e8e6;
--red:#aa0000;
--red-dim:#890000;
--pending:#ff9300;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
* {
box-sizing:border-box}
html {
background:var(--bg);
scroll-behavior:smooth}
body {
margin:0;
color:var(--white);
font:14px var(--mono);
letter-spacing:.01em;
background:var(--bg);
min-height:100vh}
.ticker-item::after {
content:none}
.address-card,.live-card,.ledger-card {
box-shadow:none}
.masthead-title {
max-width:100%;
mix-blend-mode:screen}