/* APS: Web3 / blockchain look - glass panels on a block grid, violet->cyan accents.
   Dark is the default; light follows the device or the toggle (html[data-theme]). */
:root{
  --bg:#03050D; --bg-2:#070B18; --panel:rgba(8,14,32,.66); --raise:rgba(12,20,44,.78);
  --line:rgba(0,229,255,.16); --line-soft:rgba(0,229,255,.08); --track:rgba(0,229,255,.10); --btn:rgba(0,229,255,.26);
  --fg:#E8FBFF; --muted:#8FA6C4; --dim:#6F86A6; --faint:#3D5070;
  --ok:#00FFA3; --warn:#FFC83D; --crit:#FF4D6D; --up:#E879F9;
  --accent:#A855F7; --accent-2:#00E5FF; --primary:#00E5FF; --on-accent:#FFFFFF;
  --grad:linear-gradient(120deg,#A855F7 0%,#2563EB 52%,#00E5FF 100%);
  --hover:rgba(0,229,255,.06); --sel-bg:rgba(0,229,255,.12); --overlay:rgba(1,3,10,.78);
  --glow:0 0 0 1px rgba(0,229,255,.55),0 0 22px -2px rgba(0,229,255,.45),0 0 44px -10px rgba(168,85,247,.6);
  --shadow:0 1px 0 rgba(0,229,255,.06) inset,0 0 40px -22px rgba(0,229,255,.28),0 24px 60px -34px rgba(0,0,0,.9);
  --chart-grid:rgba(0,229,255,.10); --chart-gap:rgba(0,229,255,.18); --chart-base:rgba(0,229,255,.34); --chart-dim:rgba(0,229,255,.26);
  --s3:#E879F9; --s4:rgba(0,229,255,.2);
  --grid-line:rgba(0,229,255,.085); --glow-a:rgba(168,85,247,.26); --glow-b:rgba(0,229,255,.16);
  --corner:rgba(0,229,255,.75); --scan:rgba(0,229,255,.018); --line-glow:drop-shadow(0 0 5px color-mix(in srgb,var(--primary) 70%,transparent));
  --title-glow:drop-shadow(0 0 16px rgba(0,229,255,.38)); --hero:'Orbitron','Space Grotesk',sans-serif; --num-glow:0 0 18px rgba(0,229,255,.35);
  --display:'Space Grotesk','Inter','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#F4F6FF; --bg-2:#FFFFFF; --panel:rgba(255,255,255,.72); --raise:rgba(255,255,255,.9);
    --line:rgba(79,70,229,.14); --line-soft:rgba(79,70,229,.08); --track:rgba(79,70,229,.10); --btn:rgba(79,70,229,.24);
    --fg:#0F1530; --muted:#535E89; --dim:#68729A; --faint:#A3ABC8;
    --ok:#059669; --warn:#B45309; --crit:#DC2626; --up:#0891B2;
    --accent:#7C3AED; --accent-2:#0891B2; --primary:#6D28D9;
    --grad:linear-gradient(135deg,#7C3AED 0%,#4F46E5 50%,#0891B2 100%);
    --hover:rgba(124,58,237,.06); --sel-bg:rgba(124,58,237,.10); --overlay:rgba(15,21,48,.35);
    --glow:0 0 0 1px rgba(124,58,237,.35),0 12px 36px -14px rgba(79,70,229,.45);
    --shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 40px -28px rgba(30,27,75,.35);
    --chart-grid:rgba(79,70,229,.09); --chart-gap:rgba(79,70,229,.2); --chart-base:rgba(79,70,229,.3); --chart-dim:rgba(79,70,229,.22);
    --s3:#94A3B8; --s4:rgba(79,70,229,.16);
    --grid-line:rgba(79,70,229,.09); --glow-a:rgba(124,58,237,.14); --glow-b:rgba(8,145,178,.10);
    --corner:transparent; --scan:transparent; --line-glow:none; --title-glow:none; --hero:var(--display); --num-glow:none;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F4F6FF; --bg-2:#FFFFFF; --panel:rgba(255,255,255,.72); --raise:rgba(255,255,255,.9);
  --line:rgba(79,70,229,.14); --line-soft:rgba(79,70,229,.08); --track:rgba(79,70,229,.10); --btn:rgba(79,70,229,.24);
  --fg:#0F1530; --muted:#535E89; --dim:#68729A; --faint:#A3ABC8;
  --ok:#059669; --warn:#B45309; --crit:#DC2626; --up:#0891B2;
  --accent:#7C3AED; --accent-2:#0891B2; --primary:#6D28D9;
  --grad:linear-gradient(135deg,#7C3AED 0%,#4F46E5 50%,#0891B2 100%);
  --hover:rgba(124,58,237,.06); --sel-bg:rgba(124,58,237,.10); --overlay:rgba(15,21,48,.35);
  --glow:0 0 0 1px rgba(124,58,237,.35),0 12px 36px -14px rgba(79,70,229,.45);
  --shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 40px -28px rgba(30,27,75,.35);
  --chart-grid:rgba(79,70,229,.09); --chart-gap:rgba(79,70,229,.2); --chart-base:rgba(79,70,229,.3); --chart-dim:rgba(79,70,229,.22);
  --s3:#94A3B8; --s4:rgba(79,70,229,.16);
  --grid-line:rgba(79,70,229,.09); --glow-a:rgba(124,58,237,.14); --glow-b:rgba(8,145,178,.10);
  --corner:transparent; --scan:transparent; --line-glow:none; --title-glow:none; --hero:var(--display); --num-glow:none;
  color-scheme:light;
}

*{box-sizing:border-box}
html{background:var(--bg)}
/* body stays transparent so the fixed grid behind it (z-index:-1) shows through */
html,body{margin:0;color:var(--fg);font-family:var(--body);font-size:14px;-webkit-font-smoothing:antialiased}
body{min-height:100vh;transition:background-color .3s ease,color .3s ease}
/* Block grid + soft glows behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 8% -8%,var(--glow-a),transparent 60%),
    radial-gradient(800px 520px at 100% 108%,var(--glow-b),transparent 60%),
    linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 40%,transparent 95%);mask-image:radial-gradient(ellipse at 50% 20%,#000 40%,transparent 95%)}
/* Scanlines (dark only: --scan is transparent in light) */
body::after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
a{color:var(--fg)} a:hover{color:var(--primary)}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--sel-bg)}
@keyframes rise{from{opacity:.001;transform:translateY(10px)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes pop{from{transform:translateX(-50%) scaleY(0)}}
@keyframes fadein{from{opacity:0}}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 70%,transparent)}80%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes shimmer{to{background-position:200% center}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.settled *:not(.livedot){animation:none!important}

.wrap{max-width:1440px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 56px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:20px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.eyebrow{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Top bar (sticky glass) */
.topbar{position:sticky;top:0;z-index:5;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:12px max(16px,env(safe-area-inset-left,0px));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg)}
.brand:hover{color:var(--fg)}
.brand svg{width:36px;height:36px;flex:none;filter:drop-shadow(0 4px 14px rgba(99,102,241,.45))}
.brand b{display:block;font-family:var(--hero);font-size:16px;font-weight:700;letter-spacing:.01em;line-height:1.1}
.brand small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:8px;font-size:13px}
.whoami{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.whoami b{color:var(--fg);font-weight:600}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--btn);background:var(--panel);color:var(--fg);cursor:pointer}
.icon-btn:hover{border-color:var(--accent);box-shadow:var(--glow)}
.icon-btn svg{width:18px;height:18px}
.theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:block} :root[data-theme="light"] .theme-toggle .moon{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .theme-toggle .sun{display:block}:root:not([data-theme="dark"]) .theme-toggle .moon{display:none}}

.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:12px;animation:rise .6s ease-out both}
.top h1{margin:0;font-family:var(--hero);font-size:clamp(28px,4.6vw,48px);font-weight:700;line-height:1.08;letter-spacing:-.01em;filter:var(--title-glow)}
.top h1.sm{font-size:clamp(24px,3.4vw,34px)}
.sub{margin:10px 0 0;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);display:inline-block;box-shadow:0 0 10px var(--accent-2)}
.livedot.on{animation:ping 1.8s infinite}
.livedot.off{background:transparent;border:1px solid var(--crit);box-shadow:none}
.nav{display:flex;flex-wrap:wrap;gap:6px}
.nav.glass{padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav.glass .pill{border-color:transparent;min-height:38px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--btn);background:transparent;color:var(--fg);text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease}
.pill:hover{border-color:var(--accent);color:var(--fg);background:var(--hover)}
.pill[aria-current="page"],.pill[aria-pressed="true"]{background:var(--grad);color:var(--on-accent);border-color:transparent;box-shadow:var(--glow)}
.pill:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.pill .n{font-family:var(--mono);font-size:12px;opacity:.8}
.btn-primary{background:var(--grad);color:var(--on-accent);border-color:transparent;font-weight:600;box-shadow:var(--glow)}
.btn-primary:hover{color:var(--on-accent);filter:brightness(1.08)}
.feeds{display:flex;flex-wrap:wrap;gap:8px}
.feed{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:13px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.feed b{font-family:var(--mono);font-weight:600}
.feed.stale{border-style:dashed;color:var(--muted)}
.feed.stale .livedot{background:transparent;border:1px solid var(--muted);box-shadow:none}
.key{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted)}
.key span{display:flex;align-items:center;gap:8px}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block}

/* Cards & panels: frosted glass with a gradient hairline */
.card,.panel{position:relative;border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);box-shadow:var(--shadow);min-width:0}
.card::before,.panel::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:var(--grad);opacity:.55;border-radius:1px}
/* HUD corner brackets (dark only) */
.card::after,.panel::after{content:"";position:absolute;inset:6px;pointer-events:none;border-radius:inherit;opacity:.8;
  background:linear-gradient(var(--corner),var(--corner)) 0 0/12px 1px,linear-gradient(var(--corner),var(--corner)) 0 0/1px 12px,
    linear-gradient(var(--corner),var(--corner)) 100% 100%/12px 1px,linear-gradient(var(--corner),var(--corner)) 100% 100%/1px 12px;background-repeat:no-repeat}
.card{border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px;animation:rise .7s ease-out both;transition:border-color .25s ease,box-shadow .25s ease}
.card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.panel{border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:18px;animation:rise .8s .2s ease-out both}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.panel h2{margin:0;font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em}
.panel-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.big,.mid{text-shadow:var(--num-glow)}
.big{font-family:var(--display);font-size:52px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big small{font-size:22px;font-weight:500}
.mid{font-family:var(--display);font-size:40px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--btn);border-radius:16px}
.err{color:var(--crit)}

/* Range bars (avg tick on low-high span) */
.range{position:relative;height:10px;border-radius:5px;background:var(--track)}
.range.sm{height:6px;border-radius:3px}
.seg{position:absolute;top:0;bottom:0;border-radius:inherit;transform-origin:left;animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
.tick{position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:2px;transform:translateX(-50%);animation:pop .45s ease-out both}
.range.sm .tick{top:-3px;bottom:-3px;width:2px}
.lohi{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--muted)}
.lohi b{font-weight:600}
.bar{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;transform-origin:left;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}

/* Tables */
.scroll{overflow-x:auto}
.table{display:flex;flex-direction:column}
.row{display:grid;gap:16px;align-items:center;padding:12px;border-bottom:1px solid var(--line-soft);transition:background .2s ease}
.row:not(.head):hover{background:var(--hover)}
.row.head{padding:0 12px 12px;border-bottom:1px solid var(--btn);font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.row.click{cursor:pointer;border-radius:12px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.name{font-size:14px;font-weight:600}
.name span{font-weight:400;color:var(--muted)}
.olt{font-family:var(--mono);font-size:11px;color:var(--dim);overflow-wrap:anywhere}
.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:76px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent}
.badge.crit{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.badge.warn{border:1px dashed var(--warn);color:var(--warn)}
.badge.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.badge.off{border-color:var(--btn);color:var(--muted)}
.search{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--btn);background:var(--raise);color:var(--fg);font-size:14px;width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.search:focus{border-color:var(--accent);box-shadow:var(--glow);outline:none}
.search::placeholder{color:var(--dim)}
.drawer{position:fixed;inset:0;background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:flex-end;z-index:10;animation:fadein .2s both}
.drawer[hidden]{display:none}
.drawer-body{width:min(520px,100%);height:100%;overflow-y:auto;background:var(--bg-2);border-left:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:-30px 0 60px -30px rgba(0,0,0,.5)}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 12px;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-family:var(--mono);overflow-wrap:anywhere}
.foot{font-size:12px;color:var(--dim)}

/* Chart style switcher */
.chart-tabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--raise)}
.chart-tab{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;transition:background .2s ease,color .2s ease}
.chart-tab:hover{color:var(--fg);background:var(--hover)}
.chart-tab[aria-pressed="true"]{background:var(--sel-bg);color:var(--primary);box-shadow:inset 0 0 0 1px var(--btn)}
.chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.chart .glow,svg .glow{filter:var(--line-glow)}
.chart-cross{position:absolute;top:5%;bottom:7.500%;width:1px;background:var(--primary);opacity:.65;pointer-events:none}
.chart-tip{position:absolute;top:6%;z-index:3;min-width:150px;padding:8px 12px;border-radius:10px;border:1px solid var(--btn);background:var(--bg-2);box-shadow:var(--glow);font-family:var(--mono);font-size:12px;pointer-events:none}
.chart-tip b{display:block;margin-bottom:4px;color:var(--muted);font-weight:500}
.chart-tip span{display:flex;justify-content:space-between;gap:14px}
.radar,.radial{display:block;margin:0 auto;width:min(100%,520px);height:auto;overflow:visible}
.radial{width:min(100%,320px)}
.radar-t{font-family:var(--mono);font-size:9px;fill:var(--dim)}
.radar-l{font-family:var(--mono);font-size:11px;fill:var(--muted)}

/* Heat grid */
.heat{display:grid;gap:3px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--dim)}
.heat .c{height:26px;border-radius:5px;border:1px solid var(--line-soft);transition:transform .15s ease}
.heat .c:hover{transform:scale(1.25);border-color:var(--primary)}
.heat .c.none{background:repeating-linear-gradient(45deg,var(--chart-gap) 0 1px,transparent 1px 5px)}
.heat .h{text-align:center}
.ramp{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.ramp i{width:90px;height:8px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 8%,transparent),var(--primary))}

/* Block chain: one linked block per site */
.chain{display:flex;flex-direction:column;gap:10px}
.chain-row{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) 64px;gap:14px;align-items:center}
.blocks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.blk{position:relative;width:24px;height:24px;border-radius:6px;border:1px solid;transform:rotate(0);animation:rise .4s ease-out both}
.blk::after{content:"";position:absolute;inset:6px;border-radius:2px;background:currentColor;opacity:.75}
.blk+.blk::before{content:"";position:absolute;left:-11px;top:50%;width:10px;height:2px;margin-top:-1px;background:var(--btn)}
.blk.up{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent);box-shadow:0 0 10px -3px var(--ok)}
.blk.down{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 65%,transparent);background:color-mix(in srgb,var(--crit) 14%,transparent);box-shadow:0 0 10px -2px var(--crit)}

/* Columns */
.cols{position:relative;display:flex;align-items:flex-end;gap:10px;height:260px;padding:0 4px;border-bottom:1px solid var(--chart-base)}
.cols .mark{position:absolute;left:0;right:0;border-top:1px dashed var(--ok);opacity:.6}
.cols .mark span{position:absolute;right:0;top:-16px;font-family:var(--mono);font-size:10px;color:var(--ok)}
.col{flex:1;min-width:0;display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%}
.col i{display:block;flex:1;max-width:30px;border-radius:5px 5px 0 0;transform-origin:bottom;animation:growY .7s cubic-bezier(.2,.8,.2,1) both}
.col-labels{display:flex;gap:10px;padding:0 4px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.col-labels span{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Range: worst hour -> best hour, dot on the average */
.rng-row{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) 64px;gap:14px;align-items:center;min-height:34px}
.rng-track{position:relative;height:6px;border-radius:3px;background:var(--track)}
.rng-track i{position:absolute;top:0;bottom:0;border-radius:3px}
.rng-track b{position:absolute;top:50%;width:13px;height:13px;margin:-6.500px 0 0 -6.500px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 10px currentColor}
@media (max-width:760px){.chain-row,.rng-row{grid-template-columns:minmax(0,1fr) 56px}.chain-row .blocks,.rng-row .rng-track{grid-column:1/-1;grid-row:2}}

@media (max-width:760px){
  .whoami span.role{display:none}
  /* Phones: the bar scrolls away and the menu is one swipeable row. */
  .topbar{position:static}
  .topbar .brand{flex:1 1 auto}
  .topbar .nav.glass{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:18px}
  .topbar .nav.glass::-webkit-scrollbar{display:none}
  .topbar .nav.glass .pill{flex:none}
}