/* ══════════════════════════════════════════════════════════════════════════
   UMBRA — REDESIGN CSS
   Append verbatim to the end of the existing inline <style> block.
   Every colour resolves from the existing custom properties. Two new
   shadow tokens are derived from --bg / --text via color-mix (no hex).
   All class names are new (u-*) — nothing existing is renamed.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --u-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --u-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --u-shadow: 0 24px 56px -20px color-mix(in srgb, var(--bg) 88%, transparent),
              0 0 0 1px var(--line2);
}
[data-theme="light"]{
  --u-shadow: 0 20px 46px -22px color-mix(in srgb, var(--text) 28%, transparent),
              0 0 0 1px var(--line2);
}

/* ── primitives ───────────────────────────────────────────────────────── */
.u-lab{
  font: 600 10px/1 var(--u-sans);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--dim);
}
.u-lab-b{ color:var(--mute) }
.u-mono{ font-family:var(--u-mono); letter-spacing:.02em }
.u-row{ display:flex; align-items:center; gap:10px; min-width:0 }
.u-col{ display:flex; flex-direction:column; min-width:0 }
.u-sp{ flex:1 1 auto; min-width:0 }
.u-hr{ height:1px; background:var(--line); border:0; margin:0 }
.u-trunc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.u-sect{ display:flex; flex-direction:column; gap:10px; padding:14px 0 }
.u-sect + .u-sect{ border-top:1px solid var(--line) }

/* numbers — 7dp legibility. never abbreviate away significance. */
.u-num{
  font-family:var(--u-sans); font-variant-numeric:tabular-nums;
  letter-spacing:-.005em; color:var(--text); white-space:nowrap;
}
.u-num sub{ font-size:.72em; color:var(--dim); vertical-align:-.18em; padding:0 .5px }
.u-num .u-tz{ color:var(--dim) }        /* insignificant trailing zeros */
.u-num .u-unit{ color:var(--mute); font-size:.82em; padding-left:.4em; letter-spacing:.06em }
.u-num-lg{ font-size:20px }
.u-num-xs{ font-size:11px }
.u-tiny{ color:var(--amber) }           /* value non-zero but below dp */

/* ── buttons ──────────────────────────────────────────────────────────── */
.u-btn{
  font: 600 11px/1 var(--u-sans); letter-spacing:0.06em; text-transform:uppercase;
  color:var(--mute); background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--rad); padding:8px 12px; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.u-btn:hover{ background:var(--hover); border-color:var(--line2); color:var(--text) }
.u-btn:focus-visible{ outline:none; border-color:var(--accentline); box-shadow:var(--glow) }
.u-btn-pri{
  color:var(--text); background:var(--accent); border-color:var(--accent);
  padding:12px 16px; letter-spacing:.14em;
}
.u-btn-pri:hover{ background:var(--accent); border-color:var(--accent); filter:brightness(1.08) }
.u-btn-pri[disabled]{ background:var(--bg3); border-color:var(--line); color:var(--dim); cursor:not-allowed; filter:none }
.u-btn-lg{ padding:14px 18px; font-size:12px }
.u-btn-xs{ padding:5px 8px; font-size:9.5px; letter-spacing:.1em }
.u-btn-gh{ background:transparent }
.u-btn-blk{ width:100% ; display:flex; align-items:center; justify-content:center; gap:10px }

/* ── inputs ───────────────────────────────────────────────────────────── */
.u-field{
  display:flex; align-items:center; gap:8px;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--rad);
  padding:0 10px 0 12px; min-height:42px;
}
.u-field:focus-within{ border-color:var(--accentline); box-shadow:var(--glow) }
.u-field input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none;
  color:var(--text); font-family:var(--u-sans); font-variant-numeric:tabular-nums;
  font-size:13px; padding:10px 0;
}
.u-field input::placeholder{ color:var(--dim) }
.u-field-aff{ font:600 10px/1 var(--u-sans); letter-spacing:0.06em; color:var(--dim); text-transform:uppercase }

/* search */
.u-search{ position:relative }
.u-search input{ padding-left:26px }
.u-search-i{
  position:absolute; left:11px; top:50%; width:9px; height:9px; margin-top:-6px;
  border:1.5px solid var(--dim); border-radius:50%; pointer-events:none;
}
.u-search-i::after{
  content:""; position:absolute; right:-4px; bottom:-3px; width:5px; height:1.5px;
  background:var(--dim); transform:rotate(45deg);
}

/* ── asset identity ───────────────────────────────────────────────────── */
.u-asset{ display:flex; align-items:center; gap:9px; min-width:0 }
.u-asset-txt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.u-asset-sym{ font-size:13px; font-weight:600; color:var(--text); line-height:1.1 }
.u-asset-iss{
  font: 400 10px/1.1 var(--u-sans); letter-spacing:.04em; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.u-asset-inline{ display:inline-flex; align-items:center; gap:6px; vertical-align:-3px }
.u-asset-inline .u-asset-sym{ font-size:12px }

/* fallback glyph — used only when AssetIcon is unavailable */
.u-glyph{
  border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font: 700 9px/1 var(--u-sans); color:var(--bg); background:var(--mute);
  border:1px solid var(--line2);
}

/* ── custom select ────────────────────────────────────────────────────── */
.u-sel{ position:relative; min-width:0 }
.u-sel-btn{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--rad);
  color:var(--text); padding:8px 10px 8px 12px; min-height:44px; cursor:pointer;
  transition:background .12s, border-color .12s;
}
.u-sel-btn:hover{ background:var(--hover); border-color:var(--line2) }
.u-sel-btn:focus-visible{ outline:none; border-color:var(--accentline); box-shadow:var(--glow) }
.u-sel-btn[aria-expanded="true"]{ border-color:var(--accentline); background:var(--bg3) }
.u-sel-btn[disabled]{ cursor:not-allowed; color:var(--dim) }
.u-sel-main{ flex:1 1 auto; min-width:0 }
.u-sel-ph{ color:var(--dim); font-size:13px }
.u-sel-side{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto }
.u-sel-side-v{ font:600 12px/1.1 var(--u-sans); font-variant-numeric:tabular-nums; color:var(--text) }
.u-sel-side-l{ font:400 9px/1.1 var(--u-sans); letter-spacing:0.06em; text-transform:uppercase; color:var(--dim) }
.u-car{
  flex:0 0 auto; width:0; height:0; margin-left:2px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--mute); transition:transform .14s;
}
.u-sel-btn[aria-expanded="true"] .u-car{ transform:rotate(180deg) }

.u-sel-pop{
  position:absolute; z-index:80; top:calc(100% + 5px); left:0; right:0;
  background:var(--bg3); border:1px solid var(--line2); border-radius:var(--rad);
  box-shadow:var(--u-shadow); padding:5px; max-height:298px; overflow:auto;
}
.u-sel-pop[data-up="1"]{ top:auto; bottom:calc(100% + 5px) }
.u-sel-grp{ padding:9px 9px 5px; }
.u-sel-opt{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:0; border-radius:calc(var(--rad) - 1px);
  padding:8px 9px; cursor:pointer; color:var(--text);
}
.u-sel-opt:hover, .u-sel-opt[data-cur="1"]{ background:var(--hover) }
.u-sel-opt[data-on="1"]{ background:var(--accentbg); box-shadow:inset 0 0 0 1px var(--accentline) }
.u-sel-opt[disabled]{ opacity:.45; cursor:not-allowed }
.u-sel-tick{ flex:0 0 auto; width:12px; text-align:center; color:var(--accent); font-size:11px; line-height:1 }
.u-sel-empty{ padding:14px 10px; text-align:center }

/* ── party id ─────────────────────────────────────────────────────────── */
.u-party{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--u-sans); font-size:12px; color:var(--mute); letter-spacing:.02em;
}
.u-party b{ color:var(--text); font-weight:600 }
.u-party-box{
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--rad);
  padding:10px 10px 10px 12px;
}
.u-party-full{
  font-family:var(--u-mono); font-size:10.5px; line-height:1.6; color:var(--mute);
  word-break:break-all; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--rad); padding:9px 11px; margin-top:8px;
}
.u-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto }
.u-dot-a{ background:var(--amber) } .u-dot-r{ background:var(--red) }
.u-dot-m{ background:var(--dim) }
.u-tag{
  font:600 9px/1 var(--u-sans); letter-spacing:0.06em; text-transform:uppercase;
  color:var(--mute); background:var(--bg2); border:1px solid var(--line);
  border-radius:3px; padding:4px 6px; white-space:nowrap;
}
.u-tag-a{ color:var(--accent); background:var(--accentbg); border-color:var(--accentline) }
.u-tag-w{ color:var(--amber); border-color:var(--line2) }

/* ── dealer directory ─────────────────────────────────────────────────── */
.u-dd{ display:flex; flex-direction:column; gap:0; min-width:0 }
.u-dd-trigger{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--rad);
  padding:9px 10px 9px 12px; min-height:44px; cursor:pointer; color:var(--text);
}
.u-dd-trigger:hover{ background:var(--hover); border-color:var(--line2) }
.u-dd-trigger[aria-expanded="true"]{ border-color:var(--accentline); background:var(--bg3) }
.u-dd-panel{
  position:absolute; z-index:80; top:calc(100% + 5px); left:0; right:0;
  background:var(--bg3); border:1px solid var(--line2); border-radius:var(--rad);
  box-shadow:var(--u-shadow); display:flex; flex-direction:column; overflow:hidden;
}
.u-dd-head{ padding:10px; display:flex; flex-direction:column; gap:9px; border-bottom:1px solid var(--line) }
.u-dd-bar{ display:flex; align-items:center; gap:8px; justify-content:space-between }
.u-dd-list{ overflow:auto; max-height:266px; padding:5px; flex:1 1 auto; min-height:56px }
.u-dd-foot{
  padding:9px 11px; border-top:1px solid var(--line); background:var(--bg2);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.u-dd-row{
  display:grid; grid-template-columns:16px 30px minmax(0,1fr) auto; gap:10px;
  align-items:center; width:100%; text-align:left; background:transparent; border:0;
  border-radius:calc(var(--rad) - 1px); padding:8px 9px; cursor:pointer; color:var(--text);
}
.u-dd-row:hover, .u-dd-row[data-cur="1"]{ background:var(--hover) }
.u-dd-row[data-on="1"]{ background:var(--accentbg); box-shadow:inset 0 0 0 1px var(--accentline) }
.u-dd-name{ font-size:13px; font-weight:600; color:var(--text); line-height:1.2; display:flex; align-items:center; gap:7px }
.u-dd-meta{ display:flex; align-items:center; gap:7px; margin-top:3px }
.u-dd-stats{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:0 0 auto }
.u-box{
  width:14px; height:14px; border-radius:3px; border:1px solid var(--line2);
  background:var(--bg); display:grid; place-items:center; flex:0 0 auto;
  color:var(--bg); font:700 9px/1 var(--u-sans);
}
.u-dd-row[data-on="1"] .u-box{ background:var(--accent); border-color:var(--accent); color:var(--bg) }
.u-av{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font:700 10px/1 var(--u-sans); letter-spacing:.04em;
  background:var(--bg2); color:var(--mute); border:1px solid var(--line2); flex:0 0 auto;
}
.u-dd-row[data-on="1"] .u-av{ color:var(--accent); border-color:var(--accentline) }
.u-chips{ display:flex; flex-wrap:wrap; gap:6px }
.u-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--accentbg); border:1px solid var(--accentline); border-radius:var(--rad);
  padding:5px 6px 5px 9px; font-size:11.5px; color:var(--text); max-width:200px;
}
.u-chip-x{
  background:transparent; border:0; color:var(--mute); cursor:pointer; padding:0 2px;
  font:600 12px/1 var(--u-sans);
}
.u-chip-x:hover{ color:var(--red) }
.u-chip-ph{
  border-style:dashed; border-color:var(--line2); background:transparent; color:var(--dim);
  padding:5px 9px;
}

/* ── funding ──────────────────────────────────────────────────────────── */
.u-fund{ display:flex; flex-direction:column }
.u-xfer{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--rad); padding:9px 10px;
}
.u-xfer + .u-xfer{ margin-top:6px }
.u-xfer[data-new="1"]{ border-color:var(--accentline); background:var(--accentbg) }
.u-empty{
  border:1px dashed var(--line2); border-radius:var(--rad); padding:14px;
  text-align:center; color:var(--dim);
}
.u-dest{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:var(--rad); padding:9px 10px 9px 12px;
  background:var(--bg2);
}
.u-dest[data-home="1"]{ border-color:var(--accentline); background:var(--accentbg) }
.u-slider{ display:flex; flex-direction:column; gap:7px }
.u-slider input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:18px;
  background:transparent; cursor:pointer; margin:0;
}
/* The slider sits in its own well. Two goes at this were wrong: first a 3px hairline
   that vanished against the page, then a track painted var(--bg) -- which is the page
   background, so it disappeared again. The well and the channel must both read as
   raised off the page, not carved out of it. */
.u-slider{
  background:var(--bg3); border:1px solid var(--line2); border-radius:6px;
  padding:9px 11px 7px;
}
.u-slider input[type=range]::-webkit-slider-runnable-track{
  height:7px; border-radius:4px; background:var(--line2);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.u-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg2); margin-top:-4px;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.u-slider input[type=range]::-moz-range-track{
  height:7px; border-radius:4px; background:var(--line2);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.u-slider input[type=range]::-moz-range-thumb{ box-shadow:0 1px 3px rgba(0,0,0,.45);
  width:13px; height:13px; border:2px solid var(--bg); border-radius:50%; background:var(--accent);
}
.u-slider input[type=range]:focus-visible{ outline:none }
.u-slider input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:var(--glow) }
.u-ticks{ display:flex; align-items:center; gap:6px }
.u-tick{
  flex:1 1 0; font:600 9px/1 var(--u-sans); letter-spacing:.1em; color:var(--dim);
  background:transparent; border:1px solid var(--line); border-radius:3px;
  padding:4px 0; cursor:pointer;
}
.u-tick:hover{ color:var(--text); border-color:var(--line2); background:var(--hover) }
.u-tick[data-on="1"]{ color:var(--accent); border-color:var(--accentline); background:var(--accentbg) }
.u-note{ font-size:11.5px; line-height:1.5; color:var(--mute) }
.u-note-w{ color:var(--amber) }

/* ── sign-in / landing ────────────────────────────────────────────────── */
.u-in{
  position:relative; min-height:100vh; overflow:hidden; background:var(--bg);
  display:flex; flex-direction:column;
}
/* An eclipse: dark planets back-lit by a violet star. Each disc is filled darker
   than the page, its top limb lit by an inset rim light, and an outer halo thrown
   upward; the atmosphere glow sits behind them. Pure CSS, no images. */
.u-in{
  background:
    radial-gradient(ellipse 55% 30% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--bg);
}
.u-in{ --mx:0; --my:0; animation:u-sky 14s ease-in-out infinite alternate }
@keyframes u-sky{ from{ background-size:100% 100%, auto } to{ background-size:125% 120%, auto } }

/* stars: two layers at different depths, twinkling out of step */
.u-in-sky{ position:absolute; inset:0; pointer-events:none; z-index:0 }
.u-in-stars{
  position:absolute; left:0; top:0; width:1px; height:1px; border-radius:50%;
  transform:translate3d(calc(var(--mx) * -6px), calc(var(--my) * -4px), 0);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
  animation:u-twinkle 5s ease-in-out infinite alternate;
}
.u-in-stars-2{ transform:translate3d(calc(var(--mx) * -12px), calc(var(--my) * -8px), 0); animation-duration:7s; animation-delay:-3s }
@keyframes u-twinkle{ from{ opacity:.35 } to{ opacity:1 } }

/* planets: each wrapper is a depth layer (parallax); the disc inside drifts */
.u-in-arcs{ position:absolute; inset:0; pointer-events:none; z-index:0; perspective:1400px }
.u-in-pl{ position:absolute; inset:0; transition:transform .9s cubic-bezier(.2,.7,.2,1) }
.u-in-pl-1{ z-index:2; transform:translate3d(calc(var(--mx) * -10px), calc(var(--my) * -6px), 0) }
.u-in-pl-2{ z-index:1; transform:translate3d(calc(var(--mx) * -26px), calc(var(--my) * -14px), 0) }
.u-in-pl-3{ z-index:1; transform:translate3d(calc(var(--mx) * -26px), calc(var(--my) * -14px), 0) }
.u-in-pl i{
  position:absolute; left:50%; border-radius:50%;
  /* a real eclipse is mostly darkness: a near-black body, a hair-thin lit limb, and
     a little scattered light just inside it. The light is strongest at the crown and
     fades down the sides because every light here is offset downward from the top. */
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--bg) 55%, #000) 0%, #000 85%);
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--accent2) 70%, transparent),
    inset 0 5px 14px -7px color-mix(in srgb, var(--accent) 50%, transparent),
    inset 0 34px 70px -46px color-mix(in srgb, var(--accent) 20%, transparent),
    0 -1px 8px -2px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* the faint corona breathes on its own layer, so only opacity animates (cheap) */
.u-in-pl i::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 -18px 80px -24px color-mix(in srgb, var(--accent) 22%, transparent);
  animation:u-breathe 7s ease-in-out infinite alternate;
}
@keyframes u-breathe{ from{ opacity:.5 } to{ opacity:.9 } }
@keyframes u-drift-a{ from{ translate:0 0 } to{ translate:-18px 22px } }
@keyframes u-drift-b{ from{ translate:0 0 } to{ translate:20px 16px } }
@keyframes u-drift-c{ from{ translate:0 0 } to{ translate:0 -10px } }
/* the two side planets sit behind and lower, so the big one overlaps them */
.u-in-pl-1 i{ width:1700px; height:1700px; top:-40px; transform:translateX(-50%); animation:u-drift-c 16s ease-in-out infinite alternate }
.u-in-pl-2 i{ width:1100px; height:1100px; top:150px; transform:translateX(-112%); opacity:.6; animation:u-drift-a 22s ease-in-out infinite alternate }
.u-in-pl-3 i{ width:1100px; height:1100px; top:150px; transform:translateX(12%); opacity:.6; animation:u-drift-b 26s ease-in-out infinite alternate }
.u-in-pl-2 i::after{ animation-delay:-2s }
.u-in-pl-3 i::after{ animation-delay:-4s }
.u-in-top, .u-in-main, .u-in-foot{ position:relative; z-index:1 }

/* the connect card tilts a little toward the pointer: a hint of depth, not a toy */
.u-in-main .u-connect{
  transform:perspective(1100px) rotateX(calc(var(--my) * -2.5deg)) rotateY(calc(var(--mx) * 3deg));
  transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s;
  box-shadow:var(--u-shadow), 0 30px 80px -40px color-mix(in srgb, var(--accent) 45%, transparent);
}
.u-in-mark{ position:relative; animation:u-spin 14s linear infinite }
.u-in-mark::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:3px solid transparent; border-top-color:var(--accent2);
  filter:drop-shadow(0 0 6px var(--accent));
}
@keyframes u-spin{ to{ rotate:360deg } }
.u-in-h span{
  background:linear-gradient(100deg, var(--accent) 0%, var(--accent2) 30%, #fff 45%, var(--accent2) 60%, var(--accent) 100%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:u-shimmer 7s ease-in-out infinite;
}
@keyframes u-shimmer{ 0%,100%{ background-position:100% 0 } 50%{ background-position:0 0 } }

/* phones: smaller bodies, so the lit limb still crosses the screen as an arc */
@media (max-width:640px){
  .u-in-pl-1 i{ width:900px; height:900px; top:70px }
  .u-in-pl-2 i, .u-in-pl-3 i{ width:520px; height:520px; top:210px }
  .u-in-pl-2 i{ transform:translateX(-105%) }
  .u-in-pl-3 i{ transform:translateX(5%) }
}

@media (prefers-reduced-motion: reduce){
  .u-in, .u-in-stars, .u-in-pl i, .u-in-pl i::after, .u-in-mark, .u-in-h span{ animation:none }
  .u-in-pl, .u-in-stars, .u-in-main .u-connect{ transition:none; transform:none }
}

.u-in-top{ display:flex; align-items:center; justify-content:space-between; padding:22px 32px }
.u-in-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit }
.u-in-word{
  font-size:16px; font-weight:600; letter-spacing:.34em; color:var(--text);
  text-transform:uppercase; line-height:1;
}
.u-in-ring{ width:24px; height:24px; border-radius:50%; border:2px solid var(--accent); flex:0 0 auto }

.u-in-main{
  flex:1; width:100%; max-width:560px; margin:0 auto; padding:28px 16px 40px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;
}
.u-in-mark{
  width:46px; height:46px; border-radius:50%; border:3px solid var(--accent);
  box-shadow:0 0 28px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.u-in-eyebrow{ letter-spacing:.28em }
.u-in-h{
  font-size:clamp(30px, 5.4vw, 46px); line-height:1.08; font-weight:700; color:var(--text);
  letter-spacing:-.02em; margin:0; text-wrap:balance;
}
.u-in-h span{ color:color-mix(in srgb, var(--accent) 55%, var(--text)) }
.u-in-p{ font-size:14px; line-height:1.65; color:var(--mute); max-width:48ch; margin:0; text-wrap:pretty }
.u-in-main .u-connect{ width:100%; text-align:left; margin-top:8px }
.u-in-main .u-demo{ width:100%; text-align:left }
.u-in-legend{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:6px }
.u-in-assets{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px }
.u-in-assets .u-asset{ text-align:left }
.u-in-links{ display:flex; align-items:center; gap:16px; font-size:13px }
.u-in-links a, .u-in-foot a{ color:var(--accent); text-decoration:none }
.u-in-links a:hover, .u-in-foot a:hover{ text-decoration:underline }
.u-in-links span{ width:1px; height:14px; background:var(--line2) }
.u-in-foot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:16px 32px 20px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--mute);
}
@media (max-width:640px){
  .u-in-top{ padding:16px }
  .u-in-word{ display:none }
  .u-facts{ grid-template-columns:1fr }
  .u-in-foot{ padding:14px 16px 64px; justify-content:center }
}

.u-connect{
  background:var(--bg3); border:1px solid var(--accentline); border-radius:var(--rad);
  box-shadow:var(--u-shadow); padding:26px 26px 22px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:18px;
}
.u-connect::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:var(--accent); opacity:.75;
}
.u-connect-h{ font-size:26px; font-weight:700; color:var(--text); margin:0; letter-spacing:-.01em }
.u-connect-p{ font-size:13px; line-height:1.6; color:var(--mute); margin:0; max-width:52ch }
.u-connect-p b{ color:var(--text); font-weight:600 }
.u-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line) }
.u-fact{ background:var(--bg3); padding:11px 12px; display:flex; flex-direction:column; gap:5px }
.u-fact-v{ font-size:12px; color:var(--text); font-weight:600 }

.u-demo{
  border:1px solid var(--line); border-radius:var(--rad); background:var(--bg);
  padding:12px 13px; display:flex; flex-direction:column; gap:10px;
}
.u-demo-row{ display:flex; flex-wrap:wrap; gap:7px }
.u-demo-b{
  display:flex; align-items:center; gap:8px; background:var(--bg2);
  border:1px solid var(--line); border-radius:var(--rad); padding:7px 11px;
  cursor:pointer; color:var(--mute); font-size:12px;
}
.u-demo-b:hover{ border-color:var(--line2); background:var(--hover); color:var(--text) }
.u-demo-b b{ color:var(--text); font-weight:600 }

/* ── deposit / withdraw switch ────────────────────────────────────────── */
.u-seg{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:3px;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--rad) }
.u-seg-b{ font: 600 10.5px/1 var(--u-sans); letter-spacing:0.07em; text-transform:uppercase;
  color:var(--mute); background:transparent; border:0; border-radius:var(--rad);
  padding:9px 10px; cursor:pointer; transition:background .12s, color .12s }
.u-seg-b:hover{ color:var(--text) }
.u-seg-b[data-on="1"]{ background:var(--accentbg); color:var(--text); box-shadow:inset 0 0 0 1px var(--accentline) }
.u-seg-b:focus-visible{ outline:none; box-shadow:var(--glow) }

/* ── sign-in: fit ONE screen ─────────────────────────────────────────────
   The page is exactly the viewport tall and every gap scales with its height,
   so a laptop never scrolls. The main planet is sized from the viewport too, so
   its lit limb always sits inside the frame instead of running off the page. */
.u-in{ height:100vh; height:100dvh; min-height:560px }
.u-in-top{ padding:clamp(12px, 2.2vh, 22px) 32px }
.u-in-main{ padding:0 16px clamp(8px, 2vh, 24px); gap:clamp(8px, 1.6vh, 16px); justify-content:center }
.u-in-mark{ width:clamp(30px, 4.6vh, 44px); height:clamp(30px, 4.6vh, 44px) }
.u-in-h{ font-size:clamp(26px, min(5vw, 5.4vh), 46px) }
.u-in-p{ font-size:clamp(12.5px, 1.7vh, 14px) }
.u-in-main .u-connect{ margin-top:clamp(2px, .8vh, 8px); padding:clamp(16px, 2.6vh, 26px) 24px clamp(14px, 2.2vh, 22px); gap:clamp(10px, 1.8vh, 18px) }
.u-in-main .u-connect-h{ font-size:clamp(20px, 3vh, 26px) }
.u-in-legend{ gap:8px; margin-top:0 }
.u-in-foot{ padding:clamp(10px, 1.6vh, 16px) 32px }
.u-in-off{ font-variant-numeric:tabular-nums; opacity:.8 }
.u-in-pl-1 i{ width:max(1100px, 125vw); height:max(1100px, 125vw); top:clamp(10px, 4vh, 40px) }
.u-in-pl-2 i, .u-in-pl-3 i{ width:max(760px, 75vw); height:max(760px, 75vw); top:clamp(110px, 22vh, 200px) }
@media (max-height:700px){ .u-in-p{ display:none } }
@media (max-width:640px){
  .u-in{ height:auto; min-height:100dvh }
  .u-in-pl-1 i{ width:900px; height:900px; top:70px }
  .u-in-pl-2 i, .u-in-pl-3 i{ width:520px; height:520px; top:210px }
  .u-in-foot{ padding:14px 16px 20px }
}

/* the connect card as smoked glass over the eclipse, as in the reference */
.u-in-main .u-connect{
  background:color-mix(in srgb, var(--bg2) 45%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  border-color:color-mix(in srgb, var(--accent) 32%, transparent);
}
.u-in-main .u-facts{ background:color-mix(in srgb, var(--line) 70%, transparent) }
.u-in-main .u-fact{ background:color-mix(in srgb, var(--bg) 55%, transparent) }
@media (max-width:640px){ .u-in-main .u-facts{ grid-template-columns:1fr } }