:root{
  --ink:#1a1a1a;
  --ink-soft:#444;
  --mute:#9a9a9a;
  --paper:#fff;
  --line:rgba(0,0,0,.08);
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{
  min-height:100%;
  font-family:var(--sans);
  color:var(--ink);
  background:#050403;
}
.page-doc{height:100%}
a{color:inherit}
button{font:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:1.5px solid rgba(255,255,255,.55);outline-offset:3px}

/* —— background —— */
.bg-video{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.bg-shade{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 45%, transparent 30%, rgba(0,0,0,.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 18%, transparent 78%, rgba(0,0,0,.4) 100%),
    rgba(0,0,0,.2);
}

/* —— top chrome (home) —— */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:40;
  padding:16px 20px 0;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.chrome *{pointer-events:auto}
.chrome-bubble{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  max-width:min(92vw, 420px);
  padding:10px 18px 11px;
  border-radius:22px;
  text-align:center;
  color:#fff;
  background:transparent;
  border:1px solid transparent;
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  box-shadow:none;
  transition:
    background .35s ease,
    border-color .35s ease,
    backdrop-filter .35s ease,
    -webkit-backdrop-filter .35s ease,
    box-shadow .35s ease;
}
.chrome.is-solid .chrome-bubble{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 28px rgba(0,0,0,.18);
}
.chrome-title{
  font-size:13px;font-weight:400;letter-spacing:.01em;
  line-height:1.4;
}
.chrome-title a{text-decoration:none;color:inherit}
.chrome-title .sep{opacity:.45;margin:0 .35em}
.chrome-title time{font-variant-numeric:tabular-nums}
.chrome-links{
  margin-top:5px;
  display:flex;justify-content:center;gap:6px;
  font-size:12px;font-weight:400;
}
.chrome-links a{
  color:rgba(255,255,255,.88);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.chrome-links a:hover{color:#fff}
.chrome-links .dot{opacity:.4;text-decoration:none}

/* —— home —— */
.page-home{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.page-home.is-reading,
.page-home.is-booting{
  overflow:hidden;
}
.page-home .chrome{
  transition:opacity .35s ease, visibility .35s ease;
}
.page-home .chrome-bubble{
  transition:
    background .35s ease, border-color .35s ease,
    backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease,
    box-shadow .35s ease;
}
.page-home.is-reading .chrome,
.page-home.is-booting .chrome{
  opacity:0;visibility:hidden;pointer-events:none;
}
.page-home.is-reading .bg-shade{opacity:0}
.page-home.is-reading .home-scroll,
.page-home.is-booting .home-scroll{
  pointer-events:none;
}

.home-scroll{
  position:relative;z-index:10;
}

/* desktop — full first viewport */
.desk{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:88px 20px 100px;
}
.home-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}
.scroll-cue{
  margin-top:4px;
  font-size:11px;font-weight:300;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  text-decoration:none;
  transition:color .25s ease;
}
.scroll-cue:hover{color:rgba(255,255,255,.9)}

/* glass panels — same material language as desk-pill */
.home-panels{
  position:relative;
  z-index:10;
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  padding:8px 0 max(96px, calc(64px + env(safe-area-inset-bottom)));
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
}
.home-foot{
  margin-top:8px;
  padding:8px 4px 0;
  text-align:center;
}
.home-foot p{
  margin:0;
  font-size:11px;
  font-weight:300;
  line-height:1.55;
  letter-spacing:.02em;
  color:rgba(255,255,255,.42);
  max-width:42em;
  margin-inline:auto;
}
.panel-row{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
  align-items:stretch;
  width:100%;
}
.panel-row .glass{
  max-width:none;
  height:100%;
  display:flex;
  flex-direction:column;
}
.panel-row .glass-cta{margin-top:auto;padding-top:28px}
.glass{
  width:100%;
  max-width:640px;
  scroll-margin-top:88px;
  padding:32px clamp(20px,3vw,36px) 28px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(26px) saturate(1.45);
  -webkit-backdrop-filter:blur(26px) saturate(1.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 18px 52px rgba(0,0,0,.24);
  color:rgba(255,255,255,.92);
  align-self:center;
}
.home-panels > .glass{align-self:center}
.glass.glass-wide{
  max-width:1100px;
  align-self:stretch;
  width:100%;
}
.glass-wide .glass-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 48px;
}
.glass-wide .glass-specs .row{
  border-top:1px solid rgba(255,255,255,.1);
}
.glass-wide .glass-specs .row:nth-child(1),
.glass-wide .glass-specs .row:nth-child(2){
  border-top:none;
  padding-top:0;
}
.glass-wide .glass-specs .row:nth-last-child(-n+2){
  border-bottom:1px solid rgba(255,255,255,.1);
}
.glass-kicker{
  font-size:11px;font-weight:400;
  color:rgba(255,255,255,.42);
  margin:0 0 20px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.glass-prose{
  font-size:15px;line-height:1.75;font-weight:300;
  color:#fff;
}
.panel-row .glass-prose{font-size:14.5px;line-height:1.7}
.panel-row .glass-steps{gap:20px}
.panel-row .glass-steps .step p{font-size:13.5px;line-height:1.65}
.glass-prose p{margin:0 0 1.15em}
.glass-prose p:last-child{margin-bottom:0}
.glass-prose strong{color:#fff;font-weight:500}
.glass-prose .mark{color:#fff;font-weight:400}
.glass-emblem{
  display:block;
  width:100px;
  height:auto;
  margin:48px 0 0;
  margin-right:auto;
  align-self:flex-start;
  opacity:.9;
}
.panel-row .glass-emblem{
  width:112px;
  margin-top:auto;
  padding-top:40px;
}
.glass-lead{
  font-size:14px;line-height:1.6;font-weight:300;
  color:#fff;
  margin:-8px 0 0;max-width:36em;
}
.glass-vault-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.glass-vault-head .glass-kicker{margin-bottom:8px}
.live-ind{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:2px;
  font-size:11px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  user-select:none;
  pointer-events:none;
}
.live-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  box-shadow:0 0 0 0 rgba(255,255,255,.2);
}
.live-ind[data-state="live"]{color:rgba(185,230,190,.95)}
.live-ind[data-state="live"] .live-dot{
  background:#8fd49a;
  box-shadow:0 0 0 0 rgba(143,212,154,.55);
  animation:livePulse 2.2s ease-out infinite;
}
.live-ind[data-state="closed"]{color:rgba(255,220,160,.85)}
.live-ind[data-state="closed"] .live-dot{background:#e0c48a}
.live-ind[data-state="offline"]{color:rgba(255,255,255,.4)}
.live-ind[data-state="offline"] .live-dot{background:rgba(255,255,255,.28)}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(143,212,154,.45)}
  70%{box-shadow:0 0 0 8px rgba(143,212,154,0)}
  100%{box-shadow:0 0 0 0 rgba(143,212,154,0)}
}
@media (prefers-reduced-motion:reduce){
  .live-ind[data-state="live"] .live-dot{animation:none}
  .art-card{transition:none}
}
.glass-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:0 0 22px;padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.glass .glass-stats .stat .l{
  font-size:10px;color:rgba(255,255,255,.45);
  margin-bottom:6px;font-weight:300;
  letter-spacing:.06em;text-transform:uppercase;
}
.glass .glass-stats .stat .v{
  font-size:16px;font-weight:400;
  font-variant-numeric:tabular-nums;color:#fff;
}
.glass-steps{display:flex;flex-direction:column;gap:26px}
.glass-steps .step{display:grid;grid-template-columns:28px 1fr;gap:14px}
.glass-steps .step .n{font-size:13px;color:rgba(255,255,255,.5);padding-top:2px;font-weight:300}
.glass-steps .step h3{font-size:15px;font-weight:500;margin-bottom:8px;color:#fff}
.glass-steps .step p{
  font-size:14px;line-height:1.7;
  color:#fff;font-weight:300;
}
.glass-cta{margin-top:28px}
.glass-specs{display:flex;flex-direction:column}
.glass-specs .row{
  display:grid;grid-template-columns:100px 1fr;gap:20px;
  padding:14px 0;border-top:1px solid rgba(255,255,255,.1);
}
.glass-specs .row:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.glass-specs .l{
  font-size:11px;color:rgba(255,255,255,.45);font-weight:300;padding-top:1px;
  letter-spacing:.04em;
}
.glass-specs .v{
  font-size:14px;line-height:1.55;
  color:#fff;font-weight:300;
}
.glass-contract-pill{
  margin-top:24px;
}
.glass-mech{
  margin-top:20px;font-size:13px;line-height:1.7;
  color:#fff;font-weight:300;
}
.glass-note{
  margin-top:10px;font-size:11px;
  color:rgba(255,255,255,.45);font-weight:300;
}
/* vault/table ink overrides — must beat global .stat / td rules */
.glass .tablewrap table{color:#fff}
.glass .tablewrap th{color:rgba(255,255,255,.45)}
.glass .tablewrap td,
.glass .tablewrap td.ticker,
.glass .tablewrap td.price{
  border-top-color:rgba(255,255,255,.1);
  color:#fff;
}
.glass .tablewrap td.ticker,
.glass .tablewrap td.price{font-weight:500}
.glass .tablewrap td.mute{color:rgba(255,255,255,.45)}
.glass .tablewrap .up{color:#8fd49a}
.glass .tablewrap .down{color:#e0a39a}
.glass .glass-lead,
.glass .glass-mech,
.glass .glass-note{color:#fff}
.glass .glass-note{color:rgba(255,255,255,.5)}

@media(max-width:900px){
  .panel-row{
    grid-template-columns:1fr;
  }
  .panel-row .glass-emblem,
  .panel-row .glass-cta{
    margin-top:36px;
    padding-top:0;
  }
}

@media(max-width:720px){
  .home-panels{width:calc(100% - 24px);gap:12px}
  .glass{padding:28px 20px 24px;border-radius:24px}
  .glass-prose{font-size:14.5px;line-height:1.75}
  .panel-row .glass-prose{font-size:14.5px}
  .glass-stats{grid-template-columns:repeat(2,1fr);row-gap:16px}
  .glass-specs .row,
  .glass-wide .glass-specs{grid-template-columns:1fr;gap:0}
  .glass-wide .glass-specs .row:nth-child(1){border-top:none;padding-top:0}
  .glass-wide .glass-specs .row:nth-child(2){border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
  .glass-wide .glass-specs .row:nth-last-child(-n+2){border-bottom:none}
  .glass-wide .glass-specs .row:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
  .glass-specs .row{grid-template-columns:1fr;gap:4px}
  .glass-vault-head{flex-direction:column;gap:12px;align-items:flex-start}
}

.view.takeover{
  position:fixed;inset:0;
  display:flex;align-items:stretch;justify-content:center;
  padding:0;
  z-index:60;
  background:var(--paper);
  transform:translateY(110%);
  opacity:1;
  visibility:hidden;
  pointer-events:none;
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    visibility .5s ease;
}
.view.takeover.is-active{
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
}
.view.takeover .sheet{
  height:100%;
  overflow:auto;
}

td.mute,.mute{color:#bbb}
.app-vault-link{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.6;color:#888;font-weight:300;
}
.app-vault-link a,
.app-vault-link button{
  color:#555;text-decoration:underline;text-underline-offset:3px;
  background:none;border:none;padding:0;cursor:pointer;font:inherit;
}
.app-vault-link a:hover,
.app-vault-link button:hover{color:var(--ink)}
.desktop{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(32px,4.5vw,56px);
  flex-wrap:wrap;
  max-width:960px;
}
.icon{
  width:clamp(173px,17.3vw,214px);
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  font:inherit;
}
.icon .glyph{
  width:100%;aspect-ratio:1;margin:0 auto 12px;
  display:grid;place-items:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.45));
}
.icon .glyph img{
  width:100%;height:100%;object-fit:contain;
  transform:scale(1.12);
}
.icon:hover .glyph,
.icon:focus-visible .glyph{
  transform:translateY(-6px) scale(1.03);
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.55));
}
.icon .label{
  font-size:15px;font-weight:400;
  letter-spacing:.02em;
  text-shadow:0 1px 8px rgba(0,0,0,.75);
  white-space:nowrap;
}

.desk-pill{
  display:inline-flex;align-items:center;gap:10px;
  height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 28px rgba(0,0,0,.18);
  color:rgba(255,255,255,.9);
  font-size:12px;font-weight:300;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.desk-pill:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.28);
  color:#fff;
}
.desk-pill .tag{
  color:rgba(255,255,255,.45);
  text-transform:uppercase;
  font-size:10px;letter-spacing:.12em;font-weight:400;
}
.desk-pill .addr{
  font-variant-numeric:tabular-nums;
  max-width:200px;
  overflow:hidden;text-overflow:ellipsis;
}
.desk-pill .action{
  color:rgba(255,255,255,.55);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:15px;height:15px;
  flex-shrink:0;
}
.desk-pill .action .copy-ico{display:block}
.desk-pill.is-copied .action{color:#fff}
.desk-pill.contract{padding:0 14px 0 16px}

.desk-wallet-wrap{
  position:fixed;
  left:50%;
  bottom:max(28px, calc(16px + env(safe-area-inset-bottom)));
  transform:translateX(-50%);
  z-index:20;
}
.desk-wallet{
  padding:0 18px;
  font-weight:400;
  text-decoration:none;
  position:relative;
}
.desk-wallet.is-on{color:rgba(255,255,255,.92);padding:0 16px 0 12px}
.desk-wallet-profile{
  flex-shrink:0;
  opacity:.85;
  display:block;
}
.desk-wallet-addr{letter-spacing:.02em}
.desk-wallet-menu{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);
  min-width:180px;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 12px 32px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.desk-wallet-menu[hidden]{display:none}
.desk-wallet-item{
  display:flex;align-items:center;gap:10px;
  width:100%;
  padding:10px 12px;
  border:none;border-radius:10px;
  background:transparent;
  color:rgba(255,255,255,.9);
  font:inherit;font-size:12px;font-weight:300;
  letter-spacing:.02em;
  cursor:pointer;
  text-align:left;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.desk-wallet-item svg{flex-shrink:0;opacity:.75}
.desk-wallet-item:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.desk-wallet-item:hover svg{opacity:1}
.desk-wallet-item.is-copied span{color:#fff}
.page-home.is-reading .desk-wallet-wrap,
.page-home.is-booting .desk-wallet-wrap{
  opacity:0;visibility:hidden;pointer-events:none;
}
.page-home .desk-wallet-wrap{
  transition:opacity .35s ease, visibility .35s ease;
}
.page-home .desk-wallet-wrap.is-away{
  opacity:0;visibility:hidden;pointer-events:none;
}

/* —— boot terminal —— */
#boot{
  position:fixed;inset:0;z-index:100;
  display:none;
  padding:max(8vh, calc(24px + env(safe-area-inset-top))) clamp(20px,8vw,8vw) 8vh;
  background:#050302;
  color:#79e678;
  font-family:var(--sans);
  opacity:1;
  transition:opacity .85s ease;
}
#boot.on{display:block}
#boot.fade-out{
  opacity:0;
  pointer-events:none;
}
#boot.fade-out .cursor{opacity:0;animation:none}
#boot.fade-out .skip{opacity:0}
#boot pre{
  font-size:clamp(12px,1.6vw,15px);
  line-height:2;
  color:#79e678;
  text-shadow:0 0 8px rgba(121,230,120,.45);
  white-space:pre-wrap;
  word-break:break-word;
  font-weight:400;
  transition:opacity .5s ease;
}
#boot.fade-out pre{opacity:0}
#boot .cursor{
  display:inline-block;
  width:.55em;height:1.05em;
  margin-left:2px;
  background:#79e678;
  vertical-align:text-bottom;
  animation:bootBlink 1s steps(1) infinite;
  box-shadow:0 0 10px rgba(121,230,120,.7);
}
@keyframes bootBlink{50%{opacity:0}}
#boot .skip{
  position:absolute;
  bottom:max(24px, env(safe-area-inset-bottom));
  right:28px;
  font-size:10px;letter-spacing:.18em;
  color:#3f9450;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);
  transition:opacity .35s ease;
}
#boot .skip:hover{color:#79e678}
#boot::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 45%, transparent 50%, rgba(0,0,0,.55) 100%);
}

/* —— document pages (full takeover) —— */
.page-doc{
  background:var(--paper);
  color:var(--ink);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.page-doc :focus-visible{outline-color:rgba(26,26,26,.35)}

.sheet{
  position:relative;
  width:100%;
  min-height:100%;
  padding:
    max(28px, calc(20px + env(safe-area-inset-top)))
    clamp(22px, 8vw, 96px)
    max(48px, calc(32px + env(safe-area-inset-bottom)));
}
.sheet-inner{
  width:100%;
  max-width:560px;
  margin:0 auto;
}
.sheet-inner.wide{max-width:880px}

.close{
  position:fixed;
  top:max(14px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  z-index:70;
  width:44px;height:44px;
  display:grid;place-items:center;
  border:none;background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  color:#888;border-radius:50%;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  text-decoration:none;
}
.close:hover{color:var(--ink);background:#fff}
.close svg{display:block}

.sheet-title{
  font-size:13px;font-weight:400;color:#b0b0b0;
  margin:0 48px 28px 0;letter-spacing:.01em;
}

.prose{
  font-size:15px;line-height:1.8;font-weight:300;color:#333;
}
.prose p{margin:0 0 1.2em}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:500}
.prose .mark{color:var(--ink);font-weight:400}

.emblem{
  width:96px;height:auto;margin:40px auto 0;
}

.links-row{
  display:flex;justify-content:center;gap:20px;
  margin-top:28px;font-size:13px;
}
.links-row a,.links-row button{
  background:none;border:none;cursor:pointer;padding:0;
  color:#888;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.links-row a:hover,.links-row button:hover{color:var(--ink)}

/* art fan / rolodex (desktop) → grid (mobile) */
.art-sheet{max-width:980px}
.art-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:8px;
}
.art-head .sheet-title{margin:0}
.art-meta{
  font-size:12px;font-weight:300;letter-spacing:.12em;
  color:#bbb;font-variant-numeric:tabular-nums;
}
.art-meta .sep{margin:0 .35em;opacity:.45}

.art-fan{
  position:relative;
  display:flex;align-items:center;gap:8px;
  margin:72px 0 0;
}
.art-stage{
  position:relative;
  flex:1;
  height:min(48vh, 400px);
  perspective:1600px;
  perspective-origin:50% 50%;
  user-select:none;
  overflow:hidden;
}
.art-track{
  position:absolute;inset:0;
  transform-style:preserve-3d;
}

.art-card{
  position:absolute;
  top:50%;left:50%;
  width:max-content;
  max-width:min(58%, 520px);
  height:auto;
  max-height:min(48vh, 400px);
  margin:0;
  border-radius:16px;
  overflow:visible;
  background:transparent;
  transform:translate(-50%, -50%);
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    opacity .45s ease;
  will-change:transform, opacity;
}
.art-card.is-video{max-width:min(68%, 560px)}
.art-card img,
.art-card video{
  display:block;
  width:auto;
  height:auto;
  max-width:min(58vw, 520px);
  max-height:min(48vh, 400px);
  object-fit:contain;
  pointer-events:none;
  border-radius:14px;
  background:transparent;
  box-shadow:0 22px 56px rgba(0,0,0,.2);
}
.art-card.is-video img,
.art-card.is-video video{max-width:min(68vw, 560px)}
.art-card.is-active img,
.art-card.is-active video{
  box-shadow:0 28px 72px rgba(0,0,0,.28);
}

.art-nav{
  position:relative;
  z-index:30;
  flex-shrink:0;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.1);
  background:#fff;
  color:#444;
  display:grid;place-items:center;
  cursor:pointer;
  box-shadow:
    0 10px 28px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
}
.art-nav:hover{
  color:var(--ink);
  background:#fff;
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.art-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  color:#bdbdbd;
}
.art-keys{
  display:inline-flex;gap:6px;
}
.art-keys kbd{
  display:inline-grid;place-items:center;
  min-width:28px;height:26px;
  padding:0 7px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.1);
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  color:#888;
  font-family:var(--sans);
  font-size:13px;font-weight:400;
  line-height:1;
}

@media (max-width:720px){
  .art-meta,.art-nav,.art-hint{display:none}
  .art-fan{display:block}
  .art-stage{
    height:auto;
    perspective:none;
    cursor:default;
  }
  .art-track{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    transform-style:flat;
  }
  .art-card{
    position:relative;
    top:auto;left:auto;
    width:100%;
    max-width:none;
    max-height:none;
    border-radius:8px;
    transform:none !important;
    opacity:1 !important;
    transition:none;
  }
  .art-card.is-video{max-width:none}
  .art-card img,
  .art-card video{
    width:100%;
    height:auto;
    max-width:none;
    max-height:none;
    border-radius:8px;
    box-shadow:none;
  }
}

.sticker-block{
  margin-top:32px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:24px;
}
.sticker-block img{
  width:88px;height:88px;object-fit:contain;flex-shrink:0;
  background:transparent;
}
.sticker-block .meta{flex:1;min-width:0}
.sticker-block .meta p{
  font-size:14px;line-height:1.6;color:#555;font-weight:300;margin:0 0 8px;
}
.sticker-block .meta a{
  font-size:13px;color:#888;text-decoration:underline;text-underline-offset:3px;
}
.sticker-block .meta a:hover{color:var(--ink)}
@media(max-width:520px){
  .sticker-block{flex-direction:column;align-items:flex-start}
}

.specs-block{margin-top:36px;padding-top:8px}
.specs-block .sheet-title{margin-bottom:8px}

.section-break{
  margin:36px 0 28px;padding-top:28px;
  border-top:1px solid var(--line);
}
.section-break .sheet-title{margin-bottom:20px}

.steps{display:flex;flex-direction:column;gap:28px;margin-top:4px}
.step{display:grid;grid-template-columns:28px 1fr;gap:16px}
.step .n{font-size:13px;color:#bbb;padding-top:2px;font-weight:300}
.step h3{
  font-size:15px;font-weight:500;margin-bottom:8px;color:var(--ink);
}
.step p{font-size:14px;line-height:1.7;color:#555;font-weight:300}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:0 0 28px;padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr);row-gap:18px}}
.stat .l{font-size:11px;color:var(--mute);margin-bottom:6px;font-weight:300}
.stat .v{font-size:17px;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;font-size:11px;font-weight:400;
  color:var(--mute);padding:0 12px 12px 0;
}
td{
  padding:12px 12px 12px 0;
  border-top:1px solid var(--line);
  white-space:nowrap;color:#555;font-weight:300;
}
td.ticker{font-weight:500;color:var(--ink)}
td.price{color:var(--ink);font-weight:400}
.up{color:#3d7a4a}.down{color:#a84538}
.mech{
  margin-top:24px;font-size:13px;line-height:1.7;color:#555;font-weight:300;
}

/* homepage vault glass — beat sheet/doc ink above */
#vault.glass .glass-stats .stat .l{color:rgba(255,255,255,.45)}
#vault.glass .glass-stats .stat .v{color:#fff}
#vault.glass .glass-lead,
#vault.glass .glass-mech{color:#fff}
#vault.glass .glass-note{color:rgba(255,255,255,.5)}
#vault.glass .tablewrap th{color:rgba(255,255,255,.45)}
#vault.glass .tablewrap td,
#vault.glass .tablewrap td.ticker,
#vault.glass .tablewrap td.price{color:#fff}
#vault.glass .tablewrap td.mute{color:rgba(255,255,255,.45)}
#vault.glass .tablewrap .up{color:#8fd49a}
#vault.glass .tablewrap .down{color:#e0a39a}
.mech strong{color:var(--ink);font-weight:500}
.simnote{margin-top:10px;font-size:11px;color:#bbb;font-weight:300}

.stake-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;margin:0 0 28px;padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
@media(max-width:520px){.stake-stats{grid-template-columns:repeat(2,1fr);row-gap:16px}}
.stake-stats .l{font-size:11px;color:var(--mute);margin-bottom:6px;font-weight:300}
.stake-stats .v{font-size:15px;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}

.modes{display:flex;gap:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.modes button{
  padding:0 0 12px;border:none;background:none;cursor:pointer;
  color:#bbb;font-size:13px;font-weight:400;
  border-bottom:1px solid transparent;margin-bottom:-1px;
}
.modes button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.balrow{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--mute);margin-bottom:10px;font-weight:300;
}
.balrow button{
  background:none;border:none;color:#888;cursor:pointer;
  font-size:12px;text-decoration:underline;text-underline-offset:3px;
}
.amt{
  display:flex;align-items:center;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.amt:focus-within{border-bottom-color:#ccc}
.amt input{
  flex:1;border:none;background:none;padding:12px 0;
  font-size:22px;font-weight:300;color:var(--ink);min-width:0;
  font-variant-numeric:tabular-nums;
}
.amt input:focus{outline:none}
.amt .tick{padding:0 0 0 12px;font-size:12px;color:var(--mute)}
.stakebtn{
  width:100%;padding:14px;border:none;border-radius:10px;cursor:pointer;
  background:var(--ink);color:#fff;
  font-size:13px;font-weight:400;
}
.stakebtn:hover{opacity:.88}
.stakeline{margin-top:14px;font-size:12px;color:#bbb;text-align:center;min-height:16px;font-weight:300}
.stakeline-disconnect{
  padding:0;border:none;background:none;cursor:pointer;
  font:inherit;font-size:11px;color:#888;
}
.stakeline-disconnect:hover{color:var(--ink)}

.speclist{display:flex;flex-direction:column}
.speclist .row{
  display:grid;grid-template-columns:120px 1fr;gap:20px;
  padding:16px 0;border-top:1px solid var(--line);
}
.speclist .row:last-child{border-bottom:1px solid var(--line)}
.speclist .l{font-size:12px;color:var(--mute);font-weight:300;padding-top:1px}
.speclist .v{font-size:14px;line-height:1.55;color:var(--ink);font-weight:300}
@media(max-width:480px){
  .speclist .row{grid-template-columns:1fr;gap:4px}
}

.contract{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  font-size:11px;color:#bbb;font-weight:300;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.contract button{
  border:none;background:none;padding:0;cursor:pointer;
  font-size:11px;color:#888;text-decoration:underline;text-underline-offset:3px;
}
.contract button:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .icon .glyph{transition:none}
  .bg-video{display:none}
  .page-home{background:#1a1712}
  .view.takeover{
    transform:none;
    transition:opacity .25s ease, visibility .25s ease;
    opacity:0;
  }
  .view.takeover.is-active{opacity:1}
  #boot .cursor{animation:none}
  #boot{transition:none}
}

/* —— mobile —— */
@media (max-width:720px){
  .chrome{
    padding:max(12px, env(safe-area-inset-top)) 12px 0;
  }
  .chrome-bubble{
    max-width:min(94vw, 360px);
    padding:9px 14px 10px;
    border-radius:18px;
  }
  .chrome-title{
    font-size:12px;
    display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;
  }
  .chrome-title .sep{display:none}
  .chrome-title time{
    display:block;width:100%;
    font-size:11px;opacity:.7;margin-top:2px;
  }
  .chrome-links{font-size:11px;margin-top:8px}

  .desk{
    padding:max(72px, calc(56px + env(safe-area-inset-top))) 14px max(100px, calc(88px + env(safe-area-inset-bottom)));
  }
  .view.takeover{padding:0}
  .desktop{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px 8px;
    align-items:end;
    width:100%;
    max-width:100%;
    padding:0 4px;
  }
  .icon{width:auto;min-width:0;max-width:none}
  .icon .glyph{margin-bottom:10px}
  .icon .glyph img{transform:scale(1.08)}
  .icon .label{font-size:13px}
  .icon:hover .glyph,
  .icon:focus-visible .glyph{transform:none}

  .home-stack{gap:22px;width:100%}
  .desk-pill{height:44px;font-size:12px}
  .desk-pill.contract{
    max-width:min(100%, 340px);
    padding:0 12px 0 14px;
  }
  .desk-pill .addr{max-width:140px}
  .desk-wallet-wrap{
    bottom:max(20px, calc(12px + env(safe-area-inset-bottom)));
  }
  .desk-wallet{padding:0 16px}

  .sheet{
    padding:
      max(24px, calc(16px + env(safe-area-inset-top)))
      20px
      max(40px, calc(24px + env(safe-area-inset-bottom)));
  }
  .sheet-title{margin:0 44px 22px 0;font-size:12px}
  .prose{font-size:14.5px;line-height:1.75}
  .emblem{width:84px;margin-top:28px}

  .stats,
  .stake-stats{grid-template-columns:repeat(2,1fr);gap:16px 12px;row-gap:16px}
  .speclist .row{
    grid-template-columns:1fr;
    gap:4px;padding:14px 0;
  }
  .sticker-block{gap:16px;margin-top:24px;padding-top:22px}
  .sticker-block img{width:72px;height:72px}
  .tablewrap{-webkit-overflow-scrolling:touch}
  table{font-size:12px}
  th,td{padding-right:10px}
  .modes{gap:16px}
  .amt input{font-size:20px;padding:14px 0}
  .stakebtn{min-height:48px;border-radius:12px;font-size:14px}
}

@media (max-width:380px){
  .desktop{gap:10px 6px}
  .desk-pill .addr{max-width:110px}
}

@media (max-height:700px) and (max-width:720px){
  .desktop{gap:10px 6px}
  .icon .label{font-size:12.5px}
}