:root {
  color-scheme: light;
  --paper:#f7f6ef; --ink:#182e29; --muted:#53645a; --forest:#163b33; --gold:#f4c480;
  --line:#d3d7c9; --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --sans:"DM Sans","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-family:var(--sans); color:var(--ink); background:var(--paper);
}
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:20px}
body {margin:0; min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased}
main {flex:1}
a {color:inherit; text-decoration:none}
button,input {font:inherit}
button {cursor:pointer; color:inherit}
button:disabled {cursor:wait; opacity:.65}
button:focus-visible,a:focus-visible,input:focus-visible {outline:3px solid #ba711e; outline-offset:4px}
main:focus {outline:none}
[hidden],.sprite {display:none!important}
.wrap {width:min(1232px,calc(100% - 88px)); margin-inline:auto}
.skip {position:absolute; left:12px; top:-70px; background:white; padding:12px; z-index:8}
.skip:focus {top:6px}
.icon {width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round}
.topbar {border-bottom:1px solid var(--line)}
.navinner,nav,.brand,.navbtn,.primary,.subtle,.client-action,.footer,.kicker,.eyebrow,.section-top,.totals,.copy-row {display:flex; align-items:center}
.navinner {justify-content:space-between; min-height:78px}
.brand {gap:6px; font-family:"DM Sans",Arial,sans-serif; font-weight:750; font-size:31px; line-height:1; letter-spacing:-2px}
.brand svg {width:38px; height:38px; color:#245646}
nav {gap:28px}
.navbtn,.subtle {justify-content:center; gap:8px; padding:10px 16px; background:transparent; border:1px solid #acb5a3; border-radius:5px; font-size:14px; font-weight:600; min-height:40px}
.navbtn .icon {width:15px; height:15px}
.navtext {font-size:14px; color:#43564c}
.navtext:hover,.footer a:hover,.logout:hover {text-decoration:underline; text-underline-offset:4px}
.navbtn:hover,.subtle:hover {background:#e9ece0; border-color:#637b6c}
h1,h2,p,figure {margin:0}
.hero,.login-visual,.overview {position:relative; isolation:isolate; overflow:hidden; background:#15382f; color:#f5f4df}
.hero {margin-top:29px; display:grid; grid-template-columns:48% 52%; min-height:433px; border-radius:14px}
.hero:before,.login-visual:before,.overview:before {content:""; z-index:-1; position:absolute; inset:0;
  background-image:linear-gradient(90deg,transparent 95%,#adccb00b 95%),linear-gradient(0deg,transparent 95%,#adccb00b 95%);
  background-size:26px 26px; mask-image:linear-gradient(100deg,transparent 18%,black)}
.hero:after,.login-visual:after,.overview:after {content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(ellipse at 74% 58%,#305447 0,transparent 58%),linear-gradient(120deg,#102e27,#17372d 75%,#1a3c32)}
.hero-copy {padding:48px 0 48px clamp(32px,4vw,63px); align-self:center; z-index:1}
.eyebrow,.kicker,.mono,figcaption,.table-heading {font:600 11px/1.3 var(--mono); letter-spacing:.11em}
.eyebrow {gap:10px; color:#dbd9b6}
.signal {width:20px; height:10px; display:inline-block; background:repeating-linear-gradient(110deg,transparent 0 3px,#eac58c 3px 5px,transparent 5px 6px)}
.hero h1,.login-visual h1 {font-size:clamp(46px,5vw,76px); line-height:1.07; font-weight:650; letter-spacing:-.055em; margin:24px 0 20px}
.hero h1 span,.login-visual h1 span {color:#b8ceaf}
.hero-copy p {font-size:15px; line-height:1.8; color:#d5e1ce}
.primary {justify-content:space-between; gap:24px; width:100%; min-height:47px; padding:12px 17px; background:var(--forest); color:white; border:0; border-radius:5px; font-size:15px; font-weight:650; transition:background .2s}
.primary:hover {background:#245548}
.hero-cta {width:max-content; gap:28px; margin-top:28px; background:var(--gold); color:#25362b}
.hero-cta:hover {background:#ffd8a4}
.primary .icon,.navbtn .icon,.client-action .icon {transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.primary:is(:hover,:focus-visible) .icon,.client:is(:hover,:focus-visible) .client-action .icon {transform:translateX(4px)}
.navbtn:is(:hover,:focus-visible) .icon {transform:translate(2px,-2px)}
.atlasbox {display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; padding:14px clamp(15px,2.8vw,40px) 16px 0}
.atlas {display:block; width:min(100%,535px); height:auto; overflow:visible}
.atlas text {font-family:var(--sans); font-weight:600}
.beam {stroke-dasharray:5 95; animation:beam 6s linear 2}
@keyframes beam {0% {stroke-dashoffset:102;opacity:.1} 10%,88% {opacity:1} 100% {stroke-dashoffset:0;opacity:0}}
.atlasbox figcaption {display:flex; align-items:center; gap:8px; color:#c1cbb8; letter-spacing:.05em; font-size:10px}
figcaption span {width:14px; height:1px; background:#e4b97c}
figcaption i,.footer i {font-style:normal; opacity:.5}
.platforms,.nodes {margin-block:44px 0}
.section-top {justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:17px}
.kicker {color:#5b6f5e; font-size:10.5px; letter-spacing:.145em}
.section-top h2,.login-panel h2,#modal-title {font-size:clamp(25px,2.2vw,34px); line-height:1.22; letter-spacing:-.045em; margin:6px 0 0; font-weight:650}
.section-top p,.muted,.manual p,.empty {font-size:14px; color:var(--muted); line-height:1.65}
.client-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.client {appearance:none; border:1px solid var(--line); background:#fcfcf6; display:flex; align-items:center; gap:20px; padding:22px 25px; text-align:left; border-radius:9px; color:var(--ink); min-width:0; transition:transform .22s,border-color .22s,background .22s}
.client:hover,.client:focus-visible {background:#fffef8; border-color:#8f9d88; transform:translateY(-2px)}
.client-icon {width:58px; height:58px; border-radius:12px; display:grid; place-items:center; flex:none}
.client-icon.clash {color:#37695a; background:#e4eddf; border:1px solid #d2dfcf}
.client-icon.stash {color:#825c2d; background:#f2e6d2; border:1px solid #e8d8bc}
.client-icon .icon {width:28px;height:28px; stroke-width:1.4}
.client-body {display:grid; flex:1; min-width:0; grid-template-columns:auto 1fr; align-items:center; gap:5px 8px}
.client-body .mono {color:#5b6e60; font-size:10px}
.client-body strong {grid-column:1; font-family:"DM Sans",var(--sans); font-size:clamp(19px,1.7vw,24px); line-height:1.15; letter-spacing:-.045em; font-weight:650}
.client-action {grid-area:1/2/3/3; justify-self:end; gap:8px; white-space:nowrap; font-size:13px; color:#465b4b}
.footer {margin-top:48px; padding:20px 0 24px; border-top:1px solid var(--line); justify-content:space-between; font-size:12px; color:var(--muted)}
.footer i {margin:0 5px}
.boot,.error-page {padding:54px 0}
.error-page h1 {font-size:32px; margin:0 0 12px}
.error-page .primary {width:auto; margin-top:22px}
.login-layout {margin:40px auto; display:grid; grid-template-columns:1fr 1fr; max-width:960px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fffefa}
.login-visual {display:flex; flex-direction:column; padding:40px 38px 0}
.login-visual h1 {font-size:46px; margin:20px 0 0}
.login-visual .atlas {width:100%; margin:auto; max-height:300px}
.login-panel {padding:clamp(26px,5vw,68px) clamp(25px,4vw,55px); align-self:center}
.login-panel .muted {margin:10px 0 23px}
form {display:grid; gap:15px}
label {display:grid; gap:6px; font-size:14px; font-weight:600}
input {min-width:0; width:100%; min-height:44px; background:#fffef9; color:var(--ink); border:1px solid #b9c1b4; border-radius:5px; padding:10px 12px; font-size:16px}
input::placeholder {color:#6a786b; font-size:13px}
.form-feedback,.copy-result {color:#8a4527; font-size:13px; line-height:1.5}
.form-feedback:empty,.copy-result:empty {display:none}
.overview {margin-top:29px; padding:34px 40px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:22px}
.overview h1 {font-size:clamp(33px,4vw,54px); letter-spacing:-.06em; line-height:1.15; margin:16px 0 8px}
#identity {color:#d9e4d2; overflow-wrap:anywhere}
.totals {gap:27px; flex-wrap:wrap; margin:0 2vw}
.totals div {display:grid; gap:5px; padding-left:20px; border-left:1px solid #86a28a66}
.totals strong {font:500 clamp(24px,3vw,43px)/1.1 var(--mono); color:#edce97; letter-spacing:-.07em}
.totals span {font-size:13px; color:#d1decb}
.node-table {border-top:1px solid var(--line)}
.node-row {display:grid; grid-template-columns:minmax(0,1fr) minmax(60px,16%) minmax(76px,18%); column-gap:12px; align-items:center; min-height:49px; border-bottom:1px solid var(--line); padding:8px 12px; font-size:14px}
.node-row span {overflow-wrap:anywhere}
.node-row span:last-child {font-family:var(--mono); font-size:12px}
.table-heading {color:var(--muted); min-height:36px; font-size:11px; letter-spacing:.03em; background:#eeefe6}
.empty {padding:20px}
dialog {padding:0; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:#fffef7; width:min(448px,calc(100% - 26px)); max-height:calc(100dvh - 32px); overscroll-behavior:contain}
dialog::backdrop {background:#102d28a8}
dialog[open] {animation:sheet-in .26s cubic-bezier(.22,.84,.25,1)}
body:has(dialog[open]) {overflow:hidden}
.dialog-content {position:relative; padding:27px}
.dismiss {position:absolute; top:15px; right:15px; width:36px; height:36px; display:grid; place-items:center; background:transparent; border:1px solid var(--line); border-radius:50%}
.dismiss:hover {background:#efefe5}
#modal-title {padding-right:30px}
.dialog-content .muted,.account-name {margin:9px 0 14px}
.qr-holder {display:grid; place-items:center; margin:8px auto 15px; min-height:150px; text-align:center}
.qr {width:min(192px,100%); height:auto; aspect-ratio:1; image-rendering:pixelated; border:1px solid var(--line); border-radius:6px; background:white}
.qr-error {font-size:13px; color:var(--muted)}
.manual {margin-top:17px; padding-top:15px; border-top:1px solid var(--line)}
.manual p {font-size:13px; margin:5px 0 9px}
.copy-row {gap:7px}
.copy-row input {font-family:var(--mono); flex:1; font-size:13px}
.subtle {flex:none; min-height:44px}
.privacy {border-top:1px solid var(--line); color:#645b43; font-size:12px; padding-top:11px; margin-top:14px}
.account-name {color:var(--muted)}
.logout {display:block; border:0; background:transparent; color:#80503a; font-size:14px; margin:17px auto 0; padding:6px 12px}
@keyframes sheet-in {from {opacity:.35; transform:translateY(12px)} to {opacity:1;transform:none}}
@keyframes arrive {from {opacity:.01;transform:translateY(9px)} to {opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference) {
  .hero-copy>* {animation:arrive .38s backwards cubic-bezier(.22,.84,.25,1)}
  .hero-copy h1 {animation-delay:.04s}.hero-copy p {animation-delay:.08s}.hero-copy a {animation-delay:.12s}
}
@media(max-width:960px) {
  .wrap {width:calc(100% - 48px)}
  .hero-copy {padding-left:32px}.hero {min-height:370px}.atlasbox {padding-right:12px}
  .client {padding:17px;gap:14px}.client-body {grid-template-columns:1fr}.client-action {grid-area:auto;justify-self:start;margin-top:3px}
  .client-icon {width:53px;height:53px}
}
@media(max-width:680px) {
  .wrap {width:calc(100% - 32px)}.navinner {min-height:62px}.brand {font-size:26px}.brand svg {width:32px;height:32px}nav {gap:13px}.navtext {font-size:12px}.navbtn {padding:7px 10px;min-height:35px;font-size:13px}
  .hero {margin-top:15px;grid-template-columns:1fr;min-height:0;border-radius:10px}
  .hero-copy {padding:31px 24px 0}.hero h1 {font-size:48px; margin:16px 0 12px}.hero-copy p {font-size:14px;line-height:1.65}.wide-only {display:none}
  .hero-cta {margin-top:16px; min-height:42px; padding:9px 14px}
  .atlasbox {padding:0 8px 18px}.atlasbox .atlas {width:min(100%,350px);margin-top:1px}.atlasbox .atlas text {font-size:16px}.atlasbox figcaption {font-size:9px}
  .platforms,.nodes {margin-top:29px}.section-top {display:block;margin-bottom:13px}.section-top p {font-size:13px;margin-top:7px}
  .client-grid {grid-template-columns:1fr;gap:9px}.client {padding:15px 14px}.client-body {grid-template-columns:auto 1fr}.client-action {grid-area:1/2/3/3;justify-self:end;margin-top:0}
  .footer {margin-top:30px;font-size:11px}
  .login-layout {display:block;max-width:450px;margin:24px auto}.login-visual {padding:25px;min-height:114px}
  .login-visual h1 {font-size:28px;margin:10px 0 0}.login-visual h1 br {display:none}.login-visual .atlas {display:none}.login-panel {padding:24px}
  .overview {margin-top:16px;display:block;padding:24px}.totals {margin:18px 0 0;gap:18px}.totals div {padding-left:10px}
  .node-row {padding:8px 4px;grid-template-columns:minmax(0,1fr) minmax(45px,17%) minmax(55px,20%);gap:7px;font-size:12px}
  .node-row span:last-child {font-size:11px}.dialog-content {padding:23px 20px}
}
@media(max-width:360px) { .client-action {font-size:12px;gap:4px}.client-icon {width:43px;height:43px}.client {gap:10px}.navtext {display:none} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after {scroll-behavior:auto!important; animation:none!important;transition:none!important}.beam {display:none} }