:root { color-scheme: dark; font-family: "Space Mono", monospace; background: #080808; color: #f4f2ed; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #080808; background-image: radial-gradient(rgba(255,255,255,.12) .65px, transparent .7px); background-size: 7px 7px; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.shell { width: min(1240px, calc(100% - 36px)); margin: 0 auto; padding: 25px 0 34px; }
.topbar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #363636; font-size: 10px; letter-spacing: .08em; }
.wordmark { text-decoration: none; color: #f4f2ed; font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: -.04em; font-size: 15px; }.wordmark span { color: #ff5538; }
.topbar__status { margin-left: auto; color: #999; }.topbar__status i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #5fd47a; box-shadow: 0 0 10px #5fd47a; }
.sound-toggle, .protocol-button { border: 1px solid #444; background: #101010; min-height: 30px; padding: 0 9px; cursor: pointer; font-size: 9px; letter-spacing: .08em; transition: background .2s, color .2s, scale .2s; }.sound-toggle:active, .protocol-button:active, .node:active { scale: .96; }.sound-toggle:hover, .protocol-button:hover { background: #f4f2ed; color: #101010; }.sound-toggle__off { display: none; }.sound-toggle[aria-pressed="false"] .sound-toggle__on { display: none; }.sound-toggle[aria-pressed="false"] .sound-toggle__off { display: inline; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 35px; padding: 70px 16px 48px; }.eyebrow, .panel__label { margin: 0 0 10px; color: #8b8b8b; font-size: 9px; letter-spacing: .13em; }.hero h1 { margin: 0; font-family: "Doto", "Space Mono", monospace; font-size: clamp(43px, 7.3vw, 93px); font-weight: 700; line-height: .82; letter-spacing: -.09em; text-wrap: balance; }.hero h1 span { color: #a7a7a7; }.hero__copy { width: min(340px, 100%); margin: 0 0 2px; color: #aaa; font-family: "Space Grotesk", sans-serif; font-size: 15px; line-height: 1.36; text-wrap: pretty; }
.overview-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 8px; }.panel { position: relative; overflow: hidden; min-height: 170px; padding: 18px; border: 1px solid #282828; border-radius: 16px; background: #111; box-shadow: 0 12px 28px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.025); transition: border-color .2s ease-out; }.panel:hover { border-color: #444; }.panel::before { content: ""; pointer-events: none; position: absolute; top: -32%; bottom: -32%; left: -130px; z-index: 2; width: 90px; opacity: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.04) 35%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 65%, transparent); transform: skewX(-14deg); }.panel:hover::before { animation: shimmer 1.05s cubic-bezier(.2,0,0,1) forwards; }.panel::after { content: ""; pointer-events: none; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(#767676 .5px, transparent .6px); background-size: 5px 5px; mask-image: linear-gradient(125deg,#000,transparent 80%); }.panel > * { position: relative; z-index: 1; }.panel__label { display: flex; justify-content: space-between; }.panel__label span, .counter { color: #777; font-size: 8px; }.signal-readout, .storage-value, .cost-value, .budget-value { display: flex; align-items: baseline; gap: 7px; }.signal-readout b, .storage-value b, .cost-value b, .budget-value b { font-family: "Doto", monospace; font-size: 56px; line-height: .9; letter-spacing: -.08em; }.signal-readout small, .storage-value small, .cost-value small, .budget-value small { color: #aaa; font-size: 10px; }.panel p { margin: 11px 0 0; color: #888; font-size: 9px; letter-spacing: .08em; }.signal-bars, .storage-strip { display: flex; align-items: end; gap: 3px; height: 24px; margin-top: 14px; }.signal-bars i { width: 5px; background: #69d27d; height: var(--h, 65%); }.signal-bars i:nth-child(2n) { height: 38%; }.signal-bars i:nth-child(3n) { height: 87%; }.signal-bars i:last-child { background: #ff5538; height: 100%; }
.budget-value b { font-size: 42px; color: #ff684a; }.budget-track { height: 10px; margin-top: 18px; background: #292929; border: 1px solid #353535; }.budget-track i { display: block; width: 1%; min-width: 4px; height: 100%; background: #ff5538; }.budget-meta, .micro-stat { display: flex; justify-content: space-between; margin-top: 10px; color: #888; font-size: 8px; }.storage-value b { font-size: 44px; }.storage-strip { gap: 2px; }.storage-strip i { width: 100%; height: 100%; background: #4b4b4b; }.storage-strip i:nth-child(-n+10) { background: #f1f1ed; }.storage-strip i:nth-child(n+11) { background: #ff684a; }.cost-value b { font-size: 42px; }
.content-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 8px; margin-top: 8px; }.content-grid--lower { grid-template-columns: 1.18fr 1fr; }.node-panel, .storage-panel, .domain-panel, .protocol-panel { min-height: 300px; }.panel__heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid #303030; }.panel__heading .eyebrow { margin-bottom: 5px; }.panel__heading h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 17px; letter-spacing: -.04em; }.counter { white-space: nowrap; margin-top: 4px; }.node-list { margin-top: 5px; }.node { width: 100%; display: grid; grid-template-columns: 11px 1.1fr 2fr auto; align-items: center; gap: 9px; padding: 14px 3px; border: 0; border-bottom: 1px solid #2c2c2c; background: transparent; text-align: left; cursor: pointer; transition: background .2s, padding .2s; }.node:hover { background: rgba(255,255,255,.04); padding-inline: 8px; }.node__marker { width: 7px; height: 7px; border-radius: 50%; background: #5fd47a; box-shadow: 0 0 8px rgba(95,212,122,.7); }.node__marker--orange { background: #ff684a; box-shadow: 0 0 8px rgba(255,104,74,.7); }.node__name { font-size: 11px; color: #eee; }.node__meta, .node__state { color: #858585; font-size: 8px; letter-spacing: .05em; }.node__state { color: #67cd7b; }.panel__note { min-height: 21px; color: #a6a6a6 !important; }
.bucket-plot { margin-top: 19px; }.bucket { display: grid; grid-template-columns: 105px 65px 1fr; gap: 8px; align-items: center; margin-bottom: 15px; font-size: 10px; }.bucket b { font-weight: 400; color: #aaa; font-variant-numeric: tabular-nums; }.bucket i { height: 15px; background: #343434; position: relative; }.bucket i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #e7e7e3; }.bucket--primary i::before { background: #ff684a; }.bucket--empty { opacity: .45; }.legend { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 24px; color: #8b8b8b; font-size: 8px; }.legend i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; background: #e7e7e3; }.legend .legend__orange { background: #ff684a; }
.domain-table { margin-top: 4px; font-size: 10px; }.domain-table > div { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; align-items: center; min-height: 29px; border-bottom: 1px solid #292929; }.domain-table__head { min-height: 25px !important; color: #727272; font-size: 8px; letter-spacing: .1em; }.domain-table b { font-weight: 400; }.domain-table span, .domain-table time { color: #929292; font-size: 9px; }.protocol-list { padding: 1px 0 0; margin: 3px 0 13px; list-style: none; }.protocol-list li { display: grid; grid-template-columns: 28px 1fr; gap: 11px; padding: 11px 0; border-bottom: 1px solid #292929; }.protocol-list li > span { color: #ff684a; font-size: 9px; }.protocol-list p { margin: 0; color: #a7a7a7; font-family: "Space Grotesk", sans-serif; font-size: 13px; line-height: 1.25; letter-spacing: 0; }.protocol-list b { color: #f1f1ed; font-weight: 500; }.protocol-list strong { color: #ff795f; font-weight: 500; }.protocol-button { width: 100%; height: 35px; display: flex; align-items: center; justify-content: space-between; }.protocol-button span { font-size: 13px; }.footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 8px; padding: 14px 4px 0; color: #707070; border-top: 1px solid #333; font-size: 8px; letter-spacing: .07em; }.footer__source { display: inline-flex; align-items: center; min-height: 40px; margin-block: -14px; padding-inline: 4px; color: inherit; text-decoration: none; transition: color .2s ease-out; }.footer__source:hover { color: #f4f2ed; }.footer__source:focus-visible { color: #f4f2ed; outline: 1px solid #ff684a; outline-offset: 3px; }
.reveal { animation: reveal .55s both cubic-bezier(.2,0,0,1); }.hero { animation-delay: .06s; }.overview-grid { animation-delay: .12s; }.content-grid { animation-delay: .18s; }.content-grid--lower { animation-delay: .24s; }.footer { animation-delay: .3s; }@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }@keyframes shimmer { 0% { left: -130px; opacity: 1; } 100% { left: 110%; opacity: 0; } }
.panel.nullframe-enter { animation: nullframe-card-enter .58s cubic-bezier(.34,1.56,.64,1) var(--card-delay) both; }.signal-bars i { transform-origin: bottom; }.signal-bars.ambient-active i { animation: telemetry .3s cubic-bezier(.34,1.56,.64,1) both; }.signal-bars.ambient-active i:nth-child(2n) { animation-delay: 90ms; }.signal-bars.ambient-active i:nth-child(3n) { animation-delay: 170ms; }.signal-bars.ambient-active i:nth-child(4n) { animation-delay: 250ms; }.signal-bars.ambient-active i:nth-child(5n) { animation-delay: 330ms; }.storage-strip i { transform-origin: left; }.storage-strip.ambient-active i { animation: segment-in .3s cubic-bezier(.34,1.56,.64,1) both; }.storage-strip.ambient-active i:nth-child(2n) { animation-delay: 60ms; }.storage-strip.ambient-active i:nth-child(3n) { animation-delay: 120ms; }.storage-strip.ambient-active i:nth-child(4n) { animation-delay: 180ms; }.storage-strip.ambient-active i:nth-child(5n) { animation-delay: 240ms; }.node__marker.ambient-active { animation: marker-pulse 2.4s ease-in-out infinite; }.panel__note.detail-swap { animation: detail-swap .24s cubic-bezier(.22,1,.36,1) both; }@keyframes nullframe-card-enter { from { opacity: 0; transform: translateY(22px) scale(.93); } to { opacity: 1; transform: translateY(0) scale(1); } }@keyframes telemetry { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: scaleY(1); } }@keyframes segment-in { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: scaleX(1); } }@keyframes detail-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }@keyframes marker-pulse { 50% { opacity: .4; transform: scale(.72); } }
@media (max-width: 880px) { .overview-grid { grid-template-columns: 1fr 1fr; }.content-grid, .content-grid--lower { grid-template-columns: 1fr; }.hero { padding-inline: 0; }.node { grid-template-columns: 11px 1fr auto; }.node__meta { display: none; } }
@media (max-width: 560px) { .shell { width: min(100% - 22px, 1240px); padding-top: 12px; }.topbar__status { display: none; }.hero { display: block; padding: 52px 0 32px; }.hero__copy { margin-top: 25px; }.overview-grid { grid-template-columns: 1fr; }.panel { border-radius: 13px; }.content-grid { margin-top: 7px; }.footer { display: block; line-height: 1.8; }.footer span { display: block; }.domain-table > div { grid-template-columns: 1.35fr 1fr .8fr; gap: 6px; }.bucket { grid-template-columns: 95px 60px 1fr; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }