/* Gnomic — a living forest under a gnome's hat.
   One stylesheet for every page: showcase, project, claim portal, Mycelium. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,600;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* forest */
  --moss:#3f6b25; --leaf:#9ad24a; --leaf-hi:#c8f28e; --bark:#2a1d12;
  --gold:#f0d27a; --gold-hi:#ffe9a8; --berry:#e07a63; --fog:#b7bfb2;
  /* ink: deliberately bright — the scene behind is pale and washes text out */
  --cream:#fbf8ee; --ink:#f4f7ee; --dim:#e2e8da; --faint:#c6cfbc;
  /* glass: dark enough that white text always wins */
  --glass:rgba(11,6,24,.88); --glass-soft:rgba(11,6,24,.74);
  --line:rgba(196,180,255,.22); --line-hi:rgba(232,200,90,.45);
  --shadow:0 22px 70px rgba(0,0,0,.55);
  --glow-leaf:0 0 24px rgba(154,210,74,.45);
  --glow-gold:0 0 26px rgba(240,210,122,.40);
  --font-display:"Cinzel Decorative",Georgia,serif;
  --font-head:"Cinzel",Georgia,serif;
  --font-story:"Cormorant Garamond",Georgia,serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  /* arcane: what the forest looks like once the spell is on it */
  --amethyst:#a06cff; --amethyst-hi:#cbaaff; --orchid:#e57bff; --aqua:#5fe3d2;
  --ember:#ffb05e; --rose:#ff86c2;
  --spell:linear-gradient(115deg,#6d3bff 0%,#b44dff 34%,#ff7ac6 62%,#ffd98a 100%);
  --spell-hi:linear-gradient(115deg,#8355ff 0%,#c766ff 34%,#ff92d2 62%,#ffe7ab 100%);
  --glow-arcane:0 0 26px rgba(168,108,255,.5);
  --glow-aqua:0 0 22px rgba(95,227,210,.45);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  color:var(--ink);background:#0b0718;
  font:16.5px/1.68 var(--font-body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
#forest{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
/* Vignette + ground shade: the scene is pale, the text must not fight it. */
#veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 95% at 50% 6%, rgba(8,4,20,0) 30%, rgba(9,5,22,.44) 72%, rgba(7,4,18,.80) 100%),
    linear-gradient(180deg, rgba(10,5,26,.55) 0%, rgba(8,4,20,0) 28%, rgba(8,4,20,0) 48%, rgba(6,3,16,.82) 100%);}
.wrap{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:22px 16px 90px}
.card,.stat,.way{text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* text that sits directly on the scene */
.on-scene,h1,.tagline,footer,.topnav a,.hero-sym{text-shadow:0 2px 14px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.8)}

/* ---------------------------------------------------------------- nav */
.topnav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.topnav a{color:var(--dim);text-decoration:none;padding:7px 14px;border-radius:99px;
  font:600 12.5px/1 var(--font-body);letter-spacing:1.5px;text-transform:uppercase;
  border:1px solid transparent;transition:.16s}
.topnav a:hover,.topnav a.active{color:var(--gold-hi);background:rgba(9,18,7,.6);border-color:var(--line-hi);box-shadow:var(--glow-gold)}
.hero-nav{justify-content:center;margin-bottom:22px}

/* ---------------------------------------------------------------- headers */
header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
header img{width:66px;height:66px;border-radius:50%;background:#000;
  box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 0 3px rgba(251,248,238,.4),0 0 40px rgba(240,210,122,.35)}
header h1,.page-head h1{font:600 34px/1 var(--font-head);margin:0;letter-spacing:1.5px;color:var(--cream)}
h1 small{display:block;font:600 12px/1 var(--font-body);letter-spacing:3px;text-transform:uppercase;color:var(--gold);opacity:.95;margin-top:9px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
header .topnav{margin-left:8px}
.wallet,.netbox{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.netbox{display:block;text-align:right}
.page-head{display:flex;align-items:center;gap:18px;margin-bottom:10px}
.page-head img{width:64px;height:64px;border-radius:50%;background:#000;box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 0 3px rgba(251,248,238,.35)}

/* ---------------------------------------------------------------- hero */
.hero{text-align:center;padding:18px 0 6px;position:relative}
.hero::before{content:"";position:absolute;left:50%;top:120px;transform:translateX(-50%);
  width:min(820px,98vw);height:340px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,10,3,.72),rgba(4,10,3,.35) 55%,rgba(4,10,3,0))}
.hero-logo{position:relative;width:176px;height:176px;border-radius:50%;background:#000;margin-bottom:20px;
  box-shadow:0 20px 70px rgba(0,0,0,.7),0 0 0 6px rgba(251,248,238,.32),0 0 120px rgba(160,108,255,.5);
  animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 20px 70px rgba(0,0,0,.7),0 0 0 6px rgba(251,248,238,.32),0 0 96px rgba(160,108,255,.42)}
  50%{box-shadow:0 20px 70px rgba(0,0,0,.7),0 0 0 6px rgba(255,233,168,.42),0 0 150px rgba(255,140,210,.5)}}
.hero-title{font:900 84px/1 var(--font-display);margin:0;letter-spacing:2px;color:#fff;
  text-shadow:0 4px 34px rgba(0,0,0,.85),0 0 60px rgba(240,210,122,.35),0 2px 4px rgba(0,0,0,.9)}
/* The name itself is enchanted: a slow band of moonlight, orchid and gold
   walking through the letters. A dark twin sits behind so it stays readable
   against the pale scene, since clipped text cannot carry a shadow. */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero-title{position:relative;color:transparent;text-shadow:none;
    background:linear-gradient(100deg,#fff 0%,#ffe7ab 22%,#ff9ad5 45%,#c9a6ff 68%,#fff 100%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    animation:titleshift 14s ease-in-out infinite;
    filter:drop-shadow(0 4px 30px rgba(0,0,0,.85)) drop-shadow(0 0 46px rgba(200,110,255,.45))}
  @keyframes titleshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  @media (prefers-reduced-motion:reduce){.hero-title{animation:none}}
}
.hero-sym{margin:14px 0 0;font:600 13.5px/1 var(--font-body);letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.hero-sym b{color:var(--gold-hi)}
.tagline{font:600 italic 21px/1.5 var(--font-story);color:#fff;margin:14px auto 0;max-width:660px}
.hero .tagline{font-size:23px}
.hero-cta{display:flex;gap:16px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.hero-stats{margin-top:28px}

/* ---------------------------------------------------------------- cards */
.card{position:relative;overflow:hidden;background:var(--glass);border:1px solid var(--line);
  border-radius:18px;padding:22px;margin-top:18px;
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)}
/* a thread of gold light along the top edge, drifting */
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,210,122,.65),transparent);
  background-size:200% 100%;animation:thread 9s linear infinite}
@keyframes thread{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card h2{font:600 21px/1.2 var(--font-head);margin:0 0 15px;color:var(--cream);letter-spacing:1px;
  display:flex;align-items:center;gap:11px;padding-bottom:11px;
  border-bottom:1px solid rgba(200,225,175,.14)}
.card h2 .rune{width:22px;height:22px;flex:none;filter:drop-shadow(0 0 8px rgba(240,210,122,.7))}
.card h3{font:600 14px/1 var(--font-head);letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:20px 0 10px}
.card p{color:var(--ink);line-height:1.68;margin:0 0 11px}
.card p b{color:var(--gold-hi)}

/* ---------------------------------------------------------------- rows, stats */
.row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px dashed rgba(200,225,175,.15);font-variant-numeric:tabular-nums}
.row:last-child{border-bottom:0}
.row .k{color:var(--dim)}
.row .v{text-align:right;word-break:break-all;color:var(--cream);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.stat{background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:13px;padding:13px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.stat .n{font:600 clamp(19px,4.4vw,27px)/1.15 var(--font-head);color:var(--cream);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
  text-shadow:0 0 22px rgba(168,108,255,.34)}
.stat .l{font:600 11.5px/1.2 var(--font-body);color:var(--dim);text-transform:uppercase;letter-spacing:1.5px;margin-top:7px}

/* ---------------------------------------------------------------- controls */
button,.btn{font:700 13.5px/1 var(--font-body);letter-spacing:1.4px;text-transform:uppercase;
  cursor:pointer;border-radius:12px;padding:12px 19px;transition:.16s;text-decoration:none;display:inline-block;
  position:relative;overflow:hidden;
  border:1px solid rgba(190,160,255,.30);background:rgba(58,32,102,.42);color:var(--cream)}
button:hover:not(:disabled),.btn:hover{background:rgba(74,42,128,.66);border-color:var(--amethyst);
  transform:translateY(-2px);box-shadow:var(--glow-arcane)}
button:disabled{opacity:.34;cursor:not-allowed}

/* The action buttons are lit from inside: a spell gradient, dark ink on top,
   and a slow band of light that walks across them. */
button.primary,.btn.primary{background:var(--spell);background-size:180% 100%;
  border-color:rgba(255,222,170,.75);color:#1a0730;text-shadow:none;
  box-shadow:0 6px 26px rgba(150,70,255,.45),0 0 22px rgba(255,140,210,.28),inset 0 1px 0 rgba(255,255,255,.45);
  animation:spellshift 11s ease-in-out infinite}
button.primary::after,.btn.primary::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);animation:sheen 6.5s ease-in-out infinite}
button.primary:hover:not(:disabled),.btn.primary:hover{background:var(--spell-hi);
  box-shadow:0 10px 34px rgba(176,90,255,.62),0 0 34px rgba(255,150,215,.4),inset 0 1px 0 rgba(255,255,255,.55)}
button.primary:disabled{animation:none;filter:saturate(.5)}
button.primary:disabled::after{display:none}
@keyframes spellshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes sheen{0%,72%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){
  button.primary,.btn.primary{animation:none}
  button.primary::after,.btn.primary::after{display:none}
}
button.danger{background:rgba(224,122,99,.18);border-color:rgba(224,122,99,.5);color:#ffd9cf}
button.danger:hover:not(:disabled){background:rgba(224,122,99,.36);border-color:#ef9d88;
  box-shadow:0 0 24px rgba(224,122,99,.4)}
.btn{padding:15px 32px;font-size:14px;letter-spacing:2.2px;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
input,textarea{font:400 14.5px/1.5 var(--font-body);background:rgba(0,0,0,.42);
  border:1px solid rgba(200,225,175,.24);color:var(--ink);border-radius:12px;padding:12px 14px;width:100%}
input::placeholder,textarea::placeholder{color:#8e9a86}
input:focus,textarea:focus{outline:none;border-color:var(--amethyst);box-shadow:0 0 0 3px rgba(160,108,255,.22),var(--glow-arcane)}
textarea{resize:vertical;margin-bottom:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px;align-items:center}
.form{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.grid2 label{display:flex;flex-direction:column;gap:5px;
  font:600 11.5px/1 var(--font-body);letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)}
.grid2 .span2{grid-column:1/-1}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.back{font:600 12px/1 var(--font-body);letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);text-decoration:none;display:inline-block;margin-bottom:10px}
.back:hover{color:var(--gold-hi)}

/* ---------------------------------------------------------------- pills, hints */
.pill{display:inline-block;padding:5px 13px;border-radius:99px;
  font:600 11.5px/1 var(--font-body);letter-spacing:1.3px;text-transform:uppercase;border:1px solid;backdrop-filter:blur(8px)}
.pill.ok{color:#c6fff3;border-color:rgba(95,227,210,.6);background:rgba(18,72,74,.5);box-shadow:var(--glow-aqua)}
.pill.no{color:#ffd0c4;border-color:rgba(224,122,99,.6);background:rgba(160,60,40,.42)}
.pill.wait{color:var(--gold-hi);border-color:rgba(240,210,122,.55);background:rgba(110,82,18,.5)}
.hint{color:var(--dim);font-size:14px;line-height:1.65;margin-top:11px}
.hint .mono{color:var(--gold)}
a{color:var(--amethyst-hi)}
a:hover{color:var(--gold-hi)}
/* .hidden must beat every later display rule (.ways grid, .nolist flex, …):
   same specificity, and source order would otherwise decide. */
.hidden{display:none!important}

/* ---------------------------------------------------------------- bars */
.bar{height:11px;background:rgba(0,0,0,.5);border-radius:99px;overflow:hidden;margin:13px 0 6px;border:1px solid var(--line)}
/* The fill is alive: the colours drift slowly along it, a glimmer crosses it
   every few seconds, and the glow breathes. Nothing moves fast enough to pull
   the eye off the text — it should read as enchanted, not as loading. */
.bar i{display:block;height:100%;position:relative;overflow:hidden;
  background:linear-gradient(90deg,#6d3bff,#c44dff 40%,#ffd98a 60%,#c44dff 80%,#6d3bff);
  background-size:260% 100%;
  box-shadow:0 0 18px rgba(176,90,255,.7);transition:width .6s ease;
  animation:bar-drift 9s linear infinite,bar-breathe 4.5s ease-in-out infinite}
.bar i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.6) 50%,transparent 66%);
  transform:translateX(-130%);animation:bar-glimmer 5.5s ease-in-out infinite}
@keyframes bar-drift{from{background-position:0 0}to{background-position:-260% 0}}
@keyframes bar-breathe{0%,100%{box-shadow:0 0 14px rgba(176,90,255,.55)}50%{box-shadow:0 0 26px rgba(199,102,255,.85)}}
@keyframes bar-glimmer{0%,62%{transform:translateX(-130%)}100%{transform:translateX(230%)}}
/* Movement makes some people ill: the blanket prefers-reduced-motion rule
   further down already stops every animation on the page, this one included. */
.split-bar{display:flex;height:18px;border-radius:99px;overflow:hidden;background:rgba(0,0,0,.5);border:1px solid var(--line)}
.split-bar i{display:block;height:100%;background:linear-gradient(90deg,#6d3bff,#b44dff)}
.split-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px;font-size:14.5px;color:var(--ink);line-height:1.6}
.split-legend b{color:var(--gold-hi)}

/* ---------------------------------------------------------------- the three ways */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px;margin-top:10px}
.way{position:relative;background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:15px;
  padding:16px;display:flex;flex-direction:column;gap:9px;transition:.18s}
.way:hover{border-color:rgba(240,210,122,.4);box-shadow:0 0 30px rgba(240,210,122,.14);transform:translateY(-2px)}
.way h3{font:600 18px/1.2 var(--font-head);margin:0;color:var(--cream);letter-spacing:.6px;text-transform:none}
.way p{margin:0;font-size:14.5px;color:var(--ink);flex:1;line-height:1.62}
.way button{width:100%}
.way .pill{align-self:flex-start;margin-top:4px}

/* ---------------------------------------------------------------- log, warn */
#log{max-height:230px;overflow:auto}
#log div{padding:6px 0;border-bottom:1px dashed rgba(200,225,175,.13);font-size:12.8px;color:var(--dim)}
#log .e{color:#ffb8a6}#log .s{color:var(--leaf-hi)}
.warn{margin-top:15px;padding:13px 15px;border-radius:13px;font-size:14.5px;line-height:1.62;
  border:1px solid rgba(240,210,122,.45);background:rgba(90,66,12,.45);color:var(--gold-hi);
  box-shadow:0 0 30px rgba(240,210,122,.12)}
.warn b{color:#fff3cf}
.warn i{color:var(--ink);font-style:normal;background:rgba(255,255,255,.1);padding:2px 7px;border-radius:5px}

/* ---------------------------------------------------------------- tables (Mycelium board) */
table{width:100%;border-collapse:collapse;margin-top:12px;font-variant-numeric:tabular-nums}
th{font:600 11.5px/1 var(--font-body);color:var(--dim);text-transform:uppercase;letter-spacing:1.4px;
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-top:1px dashed rgba(200,225,175,.13);color:var(--ink)}
tbody tr:hover td{background:rgba(154,210,74,.06)}
td a{color:var(--cream);text-decoration:none;font-weight:600}
td a:hover{color:var(--leaf-hi)}

/* ---------------------------------------------------------------- misc */
footer{margin-top:32px;text-align:center;font:600 italic 17px/1.6 var(--font-story);color:var(--cream);opacity:.92}
footer p{margin:0}

/* Elsewhere: the code and the feed, in the corner where a stranger looks for
   them first. The navigation stays centred on its own axis and the two marks
   are pinned to the right of it, so neither pushes the other off centre.
   Icons only — at this size a word would shout louder than the nav itself. */
.topbar{position:relative;display:flex;justify-content:center;align-items:center;min-height:36px}
.social{display:flex;gap:8px;position:absolute;right:0;top:50%;transform:translateY(-50%)}
.social a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;text-decoration:none;
  color:var(--cream);background:rgba(0,0,0,.42);border:1px solid rgba(205,168,92,.34);
  box-shadow:0 2px 14px rgba(0,0,0,.5);transition:.16s}
.social a:hover{color:var(--gold-hi);border-color:var(--line-hi);
  background:rgba(9,18,7,.6);box-shadow:var(--glow-gold);transform:translateY(-2px)}
.social svg{width:17px;height:17px;fill:currentColor;flex:none}
/* narrow: the nav wraps, so the marks stop floating over it and take a line */
@media (max-width:640px){
  .topbar{flex-direction:column;gap:10px}
  .social{position:static;transform:none;justify-content:center}
}
.view{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:720px){
  .hero-title{font-size:52px}.hero-logo{width:124px;height:124px}
  .grid2{grid-template-columns:1fr}
  header h1,.page-head h1{font-size:26px}
  .wrap{padding-top:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- the ledger */
.status-line{display:flex;align-items:center;gap:12px;margin-bottom:17px;flex-wrap:wrap}
.runes{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.rune-stone{position:relative;overflow:hidden;text-align:center;padding:17px 13px 15px;
  background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rune-stone::after{content:"";position:absolute;inset:auto -20% -55% -20%;height:90%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(154,210,74,.20),transparent)}
.rune-stone.ash::after{background:radial-gradient(closest-side,rgba(224,122,99,.22),transparent)}
.rune-ico{width:27px;height:27px;margin-bottom:9px;filter:drop-shadow(0 0 10px rgba(240,210,122,.55))}
/* A supply with six decimals is a long number in a narrow stone. It shrinks
   to fit rather than being cut off or rounded away: the ledger's whole point
   is that the figure is the one on the chain, to the last digit. */
.rune-stone .n{font:600 clamp(17px,2.1vw,27px)/1.15 var(--font-head);color:var(--cream);
  font-variant-numeric:tabular-nums;word-break:break-word;
  text-shadow:0 0 24px rgba(154,210,74,.32)}
.rune-stone.ash .n{text-shadow:0 0 24px rgba(224,122,99,.38)}
.rune-stone .l{font:600 11.5px/1.35 var(--font-body);letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);margin-top:8px}
.rune-stone .sub{font-size:13px;color:var(--dim);margin-top:6px;line-height:1.45}
.vaultbar{display:flex;height:22px;border-radius:99px;overflow:hidden;background:rgba(0,0,0,.55);border:1px solid var(--line)}
.vaultbar i{display:block;height:100%;position:relative;overflow:hidden;transition:width .7s ease}
/* What has left the chest drifts and breathes like the other bars; what is
   still in it keeps its stripes still — coins do not move — and instead
   catches the light every few seconds, which is what gold in the dark does. */
#v_out{background:linear-gradient(90deg,#6d3bff,#c44dff 45%,#ffd98a 62%,#c44dff 80%,#6d3bff);
  background-size:260% 100%;box-shadow:0 0 20px rgba(176,90,255,.55);
  animation:bar-drift 11s linear infinite,bar-breathe 5s ease-in-out infinite}
#v_out::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  transform:translateX(-130%);animation:bar-glimmer 6s ease-in-out infinite}
#v_left{background:repeating-linear-gradient(115deg,rgba(240,210,122,.5) 0 9px,rgba(240,210,122,.28) 9px 18px)}
#v_left::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 36%,rgba(255,243,196,.55) 50%,transparent 64%);
  transform:translateX(-140%);animation:vault-gleam 7.5s ease-in-out infinite .9s}
@keyframes vault-gleam{0%,58%{transform:translateX(-140%)}100%{transform:translateX(240%)}}
.vaultlegend{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:12px;font-size:14px;color:var(--ink)}
.vaultlegend b{color:var(--cream);font-variant-numeric:tabular-nums}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:-1px}
.dot.out{background:#c44dff;box-shadow:0 0 10px rgba(176,90,255,.8)}
.dot.left{background:rgba(240,210,122,.65)}
details.runes-detail{margin-top:18px;border-top:1px solid rgba(200,225,175,.14);padding-top:13px}
details.runes-detail summary{cursor:pointer;list-style:none;
  font:600 11.5px/1 var(--font-body);letter-spacing:1.8px;text-transform:uppercase;color:var(--dim)}
details.runes-detail summary::-webkit-details-marker{display:none}
details.runes-detail summary::before{content:"✧  ";color:var(--gold)}
details.runes-detail summary:hover{color:var(--gold-hi)}
details.runes-detail[open] summary{margin-bottom:8px;color:var(--gold)}

/* ---------------------------------------------------------------- the entitlement */
.entitled{position:relative;overflow:hidden;margin-top:18px;padding:22px 20px;text-align:center;
  border-radius:16px;border:1px solid rgba(240,210,122,.34);
  background:linear-gradient(180deg,rgba(78,38,124,.42),rgba(12,7,26,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 44px rgba(176,90,255,.16)}
.entitled::after{content:"";position:absolute;inset:auto -30% -70% -30%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(226,140,255,.22),transparent)}
.entitled-l{font:600 12px/1 var(--font-body);letter-spacing:2.2px;text-transform:uppercase;color:var(--gold)}
.entitled-n{font:600 46px/1.05 var(--font-head);color:#fff;margin-top:12px;font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px rgba(240,210,122,.45),0 2px 4px rgba(0,0,0,.6)}
.entitled-sym{font-size:19px;color:var(--gold);letter-spacing:1px}
.entitled-sub{font:500 12.5px/1.5 var(--font-body);color:var(--dim);margin-top:10px}
.entitled.empty{border-color:rgba(200,225,175,.16);background:rgba(0,0,0,.3);box-shadow:none}
.entitled.empty::after{display:none}
.entitled.empty .entitled-l{color:var(--faint)}
.entitled.empty .entitled-n{color:var(--faint);text-shadow:none}
.entitled.empty .entitled-sym{color:var(--faint)}
.nolist{display:flex;gap:13px;align-items:flex-start;margin-top:14px;padding:15px 17px;
  border-radius:13px;border:1px dashed rgba(200,225,175,.22);background:rgba(0,0,0,.26)}
.nolist svg{width:26px;height:26px;flex:none;margin-top:1px;opacity:.7}
.nolist p{margin:0;font-size:13px;color:var(--dim);line-height:1.6}
@media (max-width:640px){.entitled-n{font-size:34px}}

/* ----------------------------------------------------------------- toasts */
/* What just happened, said out loud. The old notice was one dim line in a
   corner and only errors ever reached it; this carries a name for the event
   and a line about it, because "done" on its own is not an answer to "what
   did I just do". */
#toasts{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;
  gap:10px;max-width:min(430px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;
  padding:14px 14px 14px 15px;border-radius:15px;
  background:rgba(14,8,30,.95);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 18px 50px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1)}
.toast .tico{width:19px;height:19px;flex:none;margin-top:1px}
.toast .tbody{flex:1;min-width:0}
.toast b{display:block;font:700 13px/1.35 var(--font-body);letter-spacing:.2px;color:var(--cream)}
.toast span{display:block;margin-top:4px;font:400 13px/1.55 var(--font-body);color:var(--dim);
  overflow-wrap:anywhere}
.toast .tx{flex:none;margin:-4px -4px 0 0;padding:4px 7px;min-width:0;
  background:none;border:0;box-shadow:none;color:var(--faint);
  font:400 17px/1 var(--font-body);letter-spacing:0;text-transform:none;cursor:pointer}
.toast .tx:hover{background:none;border:0;box-shadow:none;color:var(--cream);transform:none}
.toast.out{opacity:0;transform:translateY(10px) scale(.98);transition:.32s ease}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.toast.t-info .tico{color:var(--amethyst-hi)}
.toast.t-ok{border-color:rgba(95,227,210,.5)}
.toast.t-ok .tico{color:var(--aqua)}
.toast.t-ok b{color:#d6fff8}
.toast.t-warn{border-color:rgba(240,210,122,.5)}
.toast.t-warn .tico{color:var(--gold)}
.toast.t-warn b{color:var(--gold-hi)}
.toast.t-err{border-color:rgba(224,122,99,.6)}
.toast.t-err .tico{color:var(--berry)}
.toast.t-err b{color:#ffcdbf}
.toast.t-work .tico{color:var(--amethyst-hi);animation:tspin 1s linear infinite;transform-origin:50% 50%}
@keyframes tspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .toast{animation:none}
  .toast.t-work .tico{animation:none}
}
@media (max-width:640px){#toasts{right:16px;left:16px;bottom:16px;max-width:none}}

/* The old selector survives so anything that missed the rename is not bare. */
#notices{position:fixed;right:20px;bottom:20px;z-index:59;display:flex;flex-direction:column;gap:10px;
  max-width:min(430px,92vw);pointer-events:none}
.notice{pointer-events:auto;padding:13px 15px;border-radius:14px;font-size:13px;line-height:1.5;
  background:rgba(14,8,30,.95);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 18px 50px rgba(0,0,0,.66)}
.notice.s{border-color:rgba(95,227,210,.5);color:#d6fff8}
.notice.e{border-color:rgba(224,122,99,.6);color:#ffcdbf}
.notice.out{opacity:0;transform:translateY(8px);transition:.4s}

/* ---------------------------------------------------------------- add token */
.addtoken{margin-top:16px;padding:15px 17px;border-radius:13px;
  border:1px dashed rgba(240,210,122,.35);background:rgba(90,70,14,.16)}
.addtoken-h{display:flex;align-items:center;gap:9px;
  font:600 10.5px/1 var(--font-body);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.addtoken-h svg{width:17px;height:17px;flex:none}
.addtoken p{margin:10px 0 0;font-size:12.6px;line-height:1.6;color:var(--dim)}
.addtoken p b{color:var(--cream)}
.copyrow{display:flex;gap:9px;align-items:stretch;margin-top:11px}
.copyrow code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;padding:10px 12px;
  background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:10px;color:var(--leaf-hi)}
.copyrow button{padding:10px 16px;flex:none}
/* headline moods: a settled grant is a closed book, a resting one is waiting */
.entitled.settled{border-color:rgba(200,225,175,.22);background:linear-gradient(180deg,rgba(40,50,30,.35),rgba(9,18,7,.5))}
.entitled.settled .entitled-l,.entitled.settled .entitled-sym{color:var(--dim)}
.entitled.settled .entitled-n{text-shadow:0 0 30px rgba(200,225,175,.2)}
.entitled.settled::after{background:radial-gradient(closest-side,rgba(200,225,175,.12),transparent)}
.entitled.resting .entitled-n{color:var(--dim);text-shadow:none}

/* The Grove: search and the door to the launch form. */
.grovebar{display:flex;gap:10px;align-items:center;margin:14px 0 4px}
.grovebar input{flex:1;min-width:0}
.grovebar button{white-space:nowrap}
.gate{margin:12px 0 4px;padding:15px 18px;border:1px solid rgba(205,168,92,.34);
  border-radius:12px;background:linear-gradient(180deg,rgba(24,12,44,.9),rgba(11,6,24,.9));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gate h3{margin:0 0 6px}
.gate p{margin:7px 0;color:var(--ink);font-size:15px;line-height:1.6}
.gate p b{color:var(--gold)}
.gate.short{border-color:rgba(200,96,72,.5)}
tr.gone{display:none}

/* ---------------------------------------------------------------- the split ring */
.actions.center{justify-content:center}
.splitchart{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:26px;align-items:center;margin-top:6px}
.donut{width:100%;height:auto;max-width:260px;justify-self:center}
.ring-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:20}
.arc{fill:none;stroke-width:20;stroke-linecap:butt}
/* The bead of light that runs the rim: eleven seconds to go round once, slow
   enough to read as a glimmer and not as something loading. */
.donut-spark{fill:none;stroke:#ffe9a8;stroke-width:20;stroke-linecap:round;opacity:.9;
  transform-box:view-box;transform-origin:110px 110px;
  animation:donut-spark 11s linear infinite}
@keyframes donut-spark{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
/* And the whole ring breathes, faintly. */
.donut{animation:donut-breathe 7s ease-in-out infinite}
@keyframes donut-breathe{0%,100%{filter:none}50%{filter:drop-shadow(0 0 15px rgba(196,77,255,.38))}}
.donut-n{fill:var(--cream);font:600 27px/1 var(--font-head);text-anchor:middle;font-variant-numeric:tabular-nums}
.donut-l{fill:var(--dim);font:600 11px/1 var(--font-body);text-anchor:middle;letter-spacing:1.6px;text-transform:uppercase}
.split-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.split-list li{position:relative;padding-left:16px;border-left:3px solid var(--line)}
.split-list b{font:600 22px/1 var(--font-head);color:var(--cream);margin-right:9px}
.split-list .sl-t{font:600 10.5px/1 var(--font-body);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.split-list p{margin:8px 0 0;font-size:14.5px;line-height:1.62;color:var(--ink)}
.sl-air{border-left-color:#c44dff}
.sl-eco{border-left-color:#5fe3d2}
.sl-eco .sl-t{color:#9ff0e4}
.sl-dev{border-left-color:#ffb05e}
.sl-dev .sl-t{color:#ffcf9c}
@media (max-width:720px){.splitchart{grid-template-columns:1fr}}

/* Mycelium: the threads drawn behind the words. */
.myco-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.26;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 40%,#000 15%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 78% 40%,#000 15%,transparent 72%)}
.myco>*:not(.myco-art){position:relative}

/* ---------------------------------------------------------------- the sigil */
.sigil{position:absolute;left:50%;top:-24px;transform:translateX(-50%);
  width:min(560px,92vw);height:min(560px,92vw);pointer-events:none;z-index:-1;opacity:.72;
  filter:drop-shadow(0 0 18px rgba(176,90,255,.45))}
.sg-out{transform-origin:200px 200px;animation:spin 96s linear infinite}
.sg-mid{transform-origin:200px 200px;animation:spin 64s linear infinite reverse}
.sg-in{transform-origin:200px 200px;animation:spin 180s linear infinite;opacity:.55}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sg-out,.sg-mid,.sg-in{animation:none}}

/* ---------------------------------------------------------------- portals */
.portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:20px}
.portal{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;
  text-decoration:none;color:var(--ink);padding:20px 18px;border-radius:17px;
  border:1px solid var(--line);background:var(--glass-soft);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:var(--shadow);transition:.2s}
.portal::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(176,90,255,.22),transparent);opacity:0;transition:.25s}
.portal:hover{transform:translateY(-3px);border-color:rgba(190,150,255,.5);
  box-shadow:var(--shadow),0 0 38px rgba(176,90,255,.28)}
.portal:hover::before{opacity:1}
.portal svg{width:30px;height:30px;fill:none;stroke:#c9a6ff;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(176,90,255,.6))}
.portal h3{margin:0;font:600 18px/1.2 var(--font-head);color:var(--cream);letter-spacing:.5px}
.portal p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink);flex:1}
/* the doors read like the cards do: centred, with the icon over the name */
.portal{align-items:center;text-align:center}
.portal-go{font:700 12px/1 var(--font-body);letter-spacing:1.8px;text-transform:uppercase;color:var(--gold)}
.portal:hover .portal-go{color:var(--gold-hi)}
.gate.testnet{display:flex;flex-direction:column;align-items:center;gap:10px;margin:16px 0 0;text-align:center}
.gate.testnet p{margin:0;max-width:720px;font-size:15px;line-height:1.6;color:var(--ink)}
@media (max-width:560px){
  .grovebar{flex-direction:column;align-items:stretch}
  .grovebar button{width:100%}
  .hero-title{font-size:52px}
  .sigil{top:10px;opacity:.55}
}

/* One site, one way in: the same four links, in the same place, on every page.
   The launchpad's own views hang below as a second row. */
.sitenav{justify-content:center;margin-bottom:20px}
.subnav{margin:-6px 0 18px;align-items:center;gap:6px}
.subnav .navspacer{flex:1}
.subnav button{padding:8px 15px;font-size:11.5px}
.page-head .netbox{margin-left:auto}
@media (max-width:560px){
  .subnav{flex-wrap:wrap}
  .subnav .navspacer{display:none}
}
/* The one line that says how the three sections fit together: it has to be
   read, not skimmed past, so it gets the size of a subtitle. */
.lead{margin:6px auto 18px;max-width:760px;color:var(--cream);
  font:400 18.5px/1.6 var(--font-body);text-align:center;
  text-shadow:0 2px 14px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.9)}
.lead b{color:var(--gold-hi);font-weight:600}
@media (max-width:560px){.lead{font-size:16px}}
select{font:400 14.5px/1.5 var(--font-body);background:rgba(0,0,0,.42);
  border:1px solid rgba(190,160,255,.28);color:var(--ink);border-radius:12px;padding:12px 14px;width:100%}
select:focus{outline:none;border-color:var(--amethyst);box-shadow:0 0 0 3px rgba(160,108,255,.22)}
select option{background:#150c26;color:var(--ink)}
.pick{display:flex;flex-direction:column;gap:5px;margin:10px 0;
  font:600 11.5px/1 var(--font-body);letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)}

/* Quello che non c'e' ancora si vede, si legge e si puo' aprire per capire
   cos'e' — ma non finge di essere pronto. */
.soon{opacity:.62;filter:saturate(.55)}
.topnav a.soon::after{content:"soon";margin-left:7px;font-size:8.5px;letter-spacing:1px;
  color:var(--gold);opacity:.85;vertical-align:super}
.portal.soon:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)}
.portal.soon:hover::before{opacity:0}
.btn.soon{background:rgba(58,32,102,.42);border-color:rgba(190,160,255,.30);animation:none}
.btn.soon::after{display:none}
.btn.soon:hover{transform:none;box-shadow:none;background:rgba(58,32,102,.42)}

/* ---------------------------------------------------------------- centred
   The pages read like a poster, not a document: a heading and the lines that
   explain it sit in the middle of their card, where the eye already is.
   What stays left is everything that is DATA rather than prose — tables, the
   ledger rows, anything you read by running down a column — because numbers
   you have to compare have to line up on an edge. */
.card h2{justify-content:center;text-align:center}
.card h3{text-align:center}
.card p,.card .hint,.hint,.lead,.nolist p,.way{text-align:center}
.nolist{align-items:center;justify-content:center}
.way{align-items:center}
.way .pill{align-self:center}
.form{justify-items:center}
/* the exceptions: data keeps its left edge, and the network line its right */
th,td,.row .k{text-align:left}
.row .v{text-align:right}
.netbox,.netbox .hint{text-align:right}
.status-line{justify-content:center}
.stat{text-align:center}
/* the split legend hangs off a coloured rule on its left: centring the text
   would tear it away from the very line that names it */
.split-list,.split-list li,.split-list p{text-align:left}

/* ---------------------------------------------------------------- asking
   The page asks its own questions (see ui.js). The panel is the card, one
   step closer: same glass, same gold thread, over a veil that takes the
   forest out of focus so the question is the only thing left to answer. */
.ask{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.ask[hidden]{display:none}
body.ask-open{overflow:hidden}
.ask-veil{position:absolute;inset:0;background:rgba(6,3,16,.72);
  backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9);
  opacity:0;transition:opacity .18s ease}
.ask.in .ask-veil{opacity:1}
.ask-box{position:relative;width:min(460px,100%);max-height:86vh;overflow:auto;
  background:var(--glass);border:1px solid var(--line-hi);border-radius:18px;
  padding:26px 24px 22px;text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 60px rgba(150,70,255,.22),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  opacity:0;transform:translateY(10px) scale(.98);transition:opacity .2s ease,transform .2s ease}
.ask.in .ask-box{opacity:1;transform:none}
/* a ring of light above the question, the same sigil the home page turns */
.ask-sigil{width:38px;height:38px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,233,168,.9),rgba(196,77,255,.5) 55%,transparent 72%);
  box-shadow:0 0 30px rgba(196,77,255,.5)}
.ask-box.danger{border-color:rgba(224,122,99,.55);
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 60px rgba(224,122,99,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.ask-box.danger .ask-sigil{background:radial-gradient(circle at 50% 50%,rgba(255,206,160,.95),rgba(224,122,99,.55) 55%,transparent 72%);
  box-shadow:0 0 30px rgba(224,122,99,.55)}
.ask-box h3{margin:0 0 12px;font:600 21px/1.25 var(--font-head);color:var(--cream);letter-spacing:.8px}
.ask-body p{margin:0 0 10px;color:var(--ink);font-size:15px;line-height:1.62}
.ask-body p:last-child{margin-bottom:0}
.ask-body b{color:var(--gold-hi)}
.ask-field{display:block;margin:16px 0 0;text-align:left}
/* `display:block` above beats the browser's own rule for [hidden], so a
   question with nothing to type would still show an empty box. Same trap the
   .hidden class was written to avoid, one element further down. */
.ask-field[hidden]{display:none}
.ask-field span{display:block;margin-bottom:7px;font:600 11px/1 var(--font-body);
  letter-spacing:2px;text-transform:uppercase;color:var(--gold);text-align:center}
.ask-field input{width:100%}
.ask-field input.wrong{border-color:rgba(224,122,99,.8);animation:asknope .3s ease}
@keyframes asknope{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ask-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.ask-actions button{min-width:130px}
@media (prefers-reduced-motion:reduce){
  .ask-veil,.ask-box{transition:none}
  .ask-field input.wrong{animation:none}
}

/* ---------------------------------------------------------------- the wizard
   Launching a token is a handful of decisions, some of them permanent. One
   long form makes them all look equally light; one question per screen gives
   each the room to say what it will do. */
.wiz-mode{display:inline-flex;gap:4px;margin:0 auto 10px;padding:4px;border-radius:99px;
  background:rgba(0,0,0,.34);border:1px solid var(--line)}
.wiz-mode{display:flex;width:max-content}
.wiz-mode button{padding:9px 22px;border-radius:99px;border:1px solid transparent;
  background:transparent;color:var(--dim);box-shadow:none}
.wiz-mode button:hover:not(.on){color:var(--cream);background:rgba(255,255,255,.05);transform:none;box-shadow:none}
.wiz-mode button.on{background:var(--spell);background-size:180% 100%;color:#1a0730;
  border-color:rgba(255,222,170,.7);box-shadow:0 4px 18px rgba(150,70,255,.4)}

/* the path so far: a dot per question, the one you are on lit */
.wiz-steps{display:flex;justify-content:center;align-items:center;gap:0;
  list-style:none;margin:16px 0 22px;padding:0}
.wiz-steps li{display:flex;align-items:center}
.wiz-steps li::after{content:"";width:26px;height:1px;background:rgba(255,255,255,.14)}
.wiz-steps li:last-child::after{display:none}
/* each dot is a way back to that question, so it is a button and behaves like
   one: green when the answer would pass, red while it is still missing. */
.wiz-steps button{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:99px;
  border:1px solid transparent;background:transparent;box-shadow:none;
  color:var(--faint);font:600 10.5px/1 var(--font-body);letter-spacing:1.5px;text-transform:uppercase}
.wiz-steps button::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;transition:.2s}
.wiz-steps button:hover{color:var(--cream);background:rgba(255,255,255,.06);transform:none;box-shadow:none}
.wiz-steps li.ok button::before{background:var(--leaf);box-shadow:0 0 12px rgba(154,210,74,.6)}
.wiz-steps li.todo button::before{background:var(--berry);box-shadow:0 0 12px rgba(224,122,99,.5)}
.wiz-steps li.on button{color:var(--cream);background:rgba(255,255,255,.07);border-color:var(--line)}
.wiz-steps li.on button::before{transform:scale(1.25)}
@media (max-width:640px){.wiz-steps button span{display:none}.wiz-steps li::after{width:14px}.wiz-steps button{padding:6px}}

/* The title of a question, in the same voice as the rest of the wood, and set
   so it never breaks into a lonely last word: text-wrap:balance evens the
   lines out for us, and the older browsers that ignore it simply get the
   ordinary wrap. */
.wiz-step h3{margin:0 0 12px;font:600 23px/1.28 var(--font-head);color:var(--cream);
  letter-spacing:.7px;text-transform:none;text-wrap:balance}
/* The lines under it: one measure for every screen, so moving between steps
   does not move the text around. A measure of about 56 characters is where
   reading is easiest; `pretty` keeps a single word off the last line. */
.wiz-step > p{max-width:56ch;margin:0 auto 11px;text-wrap:pretty}
.wiz-step > p.lede{font:600 italic 19px/1.55 var(--font-story);color:#fff;max-width:46ch;text-wrap:balance}
.wiz-step > p:last-of-type{margin-bottom:0}
.wiz-step > .hint{max-width:56ch;margin-left:auto;margin-right:auto}
.wiz-step .grid2{margin-top:16px}
.wiz-nav{display:flex;justify-content:center;gap:10px;margin-top:22px}
.wiz-nav button{min-width:140px}

/* the three destinations read like the three paths on the claim page */
.wiz-ways{margin-top:16px}
.wiz-ways .way{cursor:pointer;transition:.16s}
.wiz-ways .way input{position:absolute;opacity:0;pointer-events:none}
.wiz-ways .way:has(input:checked){border-color:var(--line-hi);
  box-shadow:0 0 26px rgba(240,210,122,.18),inset 0 1px 0 rgba(255,255,255,.06)}
.wiz-ways .way h3{margin:0;font-size:16px}
#dest-addr-row{display:block;margin-top:16px;max-width:520px;margin-left:auto;margin-right:auto}

/* The review, and what it costs.
   Facts, not a ledger: each one is its own block, the figure first because
   that is what is being asked about, its name underneath in small letters.
   They read down the middle of the card like everything else, instead of
   throwing the eye from one edge to the other on every line. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;margin:18px 0 0;background:var(--line);border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.fact{background:rgba(9,5,22,.72);padding:16px 12px;text-align:center}
.fact .fv{font:600 21px/1.2 var(--font-head);color:var(--cream);
  font-variant-numeric:tabular-nums;word-break:break-word}
.fact .fv small{font-size:13px;color:var(--faint);font-family:var(--font-body);letter-spacing:.5px}
.fact .fv .mono{font-size:19px;color:var(--gold-hi)}
.fact .fl{margin-top:7px;font:600 10.5px/1.35 var(--font-body);letter-spacing:1.4px;
  text-transform:uppercase;color:var(--dim)}
.fact.warn .fv{color:var(--berry)}
/* the sentence that ties the numbers together, and is the only prose here */
.wiz-after{max-width:560px;margin:16px auto 0;text-align:center;
  font:600 italic 17px/1.5 var(--font-story);color:var(--cream)}
.wiz-after.short{color:var(--berry)}
@media (max-width:520px){.facts{grid-template-columns:1fr 1fr}}
.wiz-sub{margin:26px 0 0;font:600 13px/1 var(--font-head);letter-spacing:2.4px;
  text-transform:uppercase;color:var(--gold);text-align:center}

/* ---------------------------------------------------------------- the chest
   The bar says how much is left; the chest says the same thing in a glance.
   It is a drawing, so it never carries a number of its own — it takes them
   from the same reading the bar does. */
.chestbox{display:flex;align-items:center;gap:22px;margin-top:14px}
.chest{width:132px;height:113px;flex:none;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6))}
#chest-lid{transform-origin:70px 62px;transition:transform 1s cubic-bezier(.2,.8,.3,1)}
#chest-glow,#chest-coins{transition:opacity 1s ease}
.chestside{flex:1;min-width:0}
.chestside .vaultlegend{justify-content:center}
@media (max-width:560px){
  .chestbox{flex-direction:column;gap:14px}
  .chest{width:104px;height:89px}
}

/* Runes and roots: the workings, for whoever wants them. Prose here reads
   left, because it is a paragraph rather than a caption. */
.runes-detail p{text-align:left;max-width:640px;margin:0 auto 12px;font-size:14.5px;line-height:1.7;color:var(--ink)}
.runes-detail p b{color:var(--gold-hi)}
.runes-detail a{color:var(--leaf-hi)}
.runes-detail .row:first-of-type{margin-top:18px}

/* ==========================================================================
   v2 — the UX layer.
   Everything below was added for the second version of the site. It changes
   how the page behaves and how it is read; it does not change what the place
   looks like. Same palette, same fonts, same glass, same forest.
   ========================================================================== */

/* -------------------------------------------------------------- v2 tokens */
:root{
  /* One spacing scale, so vertical rhythm stops being a pile of magic numbers. */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  /* The static border was loud enough to compete with the content it framed. */
  --line:rgba(196,180,255,.13);
  --line-hi:rgba(232,200,90,.42);
  /* Status colours, so a state is never carried by hue alone. */
  --ok:#5fe3d2; --warn:#f0d27a; --bad:#e07a63;
}

/* The scene is beautiful and it was winning. It recedes a little so the text
   in front of it stops fighting for contrast. */
#veil{background:
  radial-gradient(130% 95% at 50% 6%, rgba(8,4,20,0) 12%, rgba(9,5,22,.56) 52%, rgba(7,4,18,.92) 100%),
  linear-gradient(180deg, rgba(10,5,26,.62) 0%, rgba(8,4,20,0) 26%, rgba(8,4,20,0) 46%, rgba(6,3,16,.88) 100%)}

/* ---------------------------------------------------------------- rhythm */
.card{padding:var(--s4);margin-top:var(--s4);
  backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15)}
.card h2{font-size:27px;margin-bottom:var(--s3);padding-bottom:13px}
/* Headings stay centred — that ceremony is the house style. Prose does not:
   a centred paragraph gives the eye a different starting point on every line,
   and these paragraphs are the ones carrying the facts. The BLOCK stays
   centred, so the page keeps its symmetry; only the text inside is ragged. */
.card p,.card .lede,.lead,.rescue p,.verdict-sub{
  text-align:left;max-width:68ch;margin-left:auto;margin-right:auto}
.card .hint,.hint.center,.actions .hint{text-align:center}
.cmp th,.cmp td,.opt p,.opt .give,.route p,.proof .pv{text-align:left}
.page-head{margin-bottom:var(--s4)}
header h1,.page-head h1{font-size:40px}
.grid{gap:var(--s2)}
.row{padding:11px 0;font-variant-numeric:tabular-nums}

/* Cinzel is a title face. At 11px, in caps, it turns to mush — so the small
   labels move to the UI font and keep the letterspacing that made them feel
   carved in the first place. */
.card h3,.stat .l,.rune-stone .l,.entitled-l,.split-list .sl-t{
  font-family:var(--font-body);font-weight:700}
.card h3{font-size:12.5px;letter-spacing:2.2px}

/* Numbers line up everywhere, not only in the stat cards. */
.mono,.pill,.v,.hint,button,.vaultlegend,.cmp td,.cmp th{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- affordance */
/* A disabled control used to keep its gradient, its border and its glow, and
   only lost a third of its opacity: it still read as the thing to press. Now
   it reads as what it is, and it says why in .why beside it. */
button:disabled,.btn:disabled,button.primary:disabled{
  opacity:1;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);
  color:var(--faint);box-shadow:none;animation:none;filter:none;cursor:not-allowed}
button.primary:disabled::after,.btn:disabled::after{display:none}
.why{display:block;margin-top:9px;font:500 13px/1.55 var(--font-body);color:var(--gold);
  text-align:center}
.why:empty{display:none}

/* The sheen on a primary button ran forever, out of sync with every other
   primary button on the page. It now happens when you point at it. */
button.primary::after,.btn.primary::after{animation:none;opacity:0;transition:opacity .2s}
button.primary:hover:not(:disabled)::after,.btn.primary:hover::after{
  opacity:1;animation:sheen 1.4s ease-in-out}

/* Keyboard users had nothing at all. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--amethyst-hi);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------------- nav */
.topnav a{padding:8px 13px}
.nav-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;
  font:700 9px/1.5 var(--font-body);letter-spacing:1.2px;text-transform:uppercase;
  border:1px solid transparent;vertical-align:1px}
.nav-tag.live{color:#c6fff3;border-color:rgba(95,227,210,.55);background:rgba(18,72,74,.55)}
.nav-tag.test{color:var(--gold-hi);border-color:rgba(240,210,122,.5);background:rgba(110,82,18,.45)}

/* ------------------------------------------------- environment / status strip */
/* Which chain am I on, is my wallet here, can I pay for gas. Three questions
   that decide whether anything on the page can happen, answered in one line
   at the top instead of scattered over four widgets. */
.envstrip{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s2);padding:12px 18px;border-radius:14px;
  background:rgba(11,6,24,.76);border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.envstrip.testnet{border-color:rgba(240,210,122,.4);background:rgba(44,30,6,.55)}
.envstrip .env-k{font:700 10.5px/1 var(--font-body);letter-spacing:1.6px;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:5px}
.envstrip .env-v{font:600 14px/1.2 var(--font-body);color:var(--cream)}
.envstrip .env-v.mono{font-size:13px}
.envstrip .env-cell{min-width:0}
.envstrip .env-cell+.env-cell{padding-left:var(--s2);border-left:1px solid var(--line)}
.envstrip .env-act{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.envstrip button{padding:11px 18px}
.dotstate{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;
  vertical-align:1px;background:var(--faint)}
/* The modifiers are prefixed: plain `.warn` and `.ok` are already taken by the
   warning box and the pill, and an unprefixed one inherits their padding. */
.dotstate.s-ok{background:var(--ok);box-shadow:0 0 10px rgba(95,227,210,.8)}
.dotstate.s-warn{background:var(--warn);box-shadow:0 0 10px rgba(240,210,122,.7)}
.dotstate.s-bad{background:var(--bad);box-shadow:0 0 10px rgba(224,122,99,.7)}

/* ------------------------------------------------------------- step rail */
/* An irreversible decision needs to feel like a route with a beginning and an
   end, not like a wall of buttons that happen to be on the same page. */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s3);padding:0;list-style:none;
  counter-reset:step}
.steps li{flex:1 1 130px;position:relative;padding:11px 14px 11px 40px;border-radius:12px;
  background:rgba(0,0,0,.3);border:1px solid var(--line);
  font:700 11px/1.3 var(--font-body);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--faint);transition:.25s}
.steps li::before{counter-increment:step;content:counter(step);
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font:700 11px/1 var(--font-body);letter-spacing:0;
  background:rgba(255,255,255,.07);color:var(--faint)}
.steps li.on{color:var(--gold-hi);border-color:var(--line-hi);
  background:rgba(48,28,96,.5);box-shadow:var(--glow-gold)}
.steps li.on::before{background:var(--spell);color:#1a0b2e}
.steps li.done{color:var(--aqua);border-color:rgba(95,227,210,.35)}
.steps li.done::before{content:"✓";background:rgba(95,227,210,.22);color:var(--aqua)}

/* ------------------------------------------------------ eligibility result */
/* One card that answers "have I got anything" before anything else is shown. */
.verdict{margin-top:var(--s3);padding:var(--s3);border-radius:16px;text-align:center;
  border:1px solid var(--line);background:rgba(0,0,0,.34);position:relative;overflow:hidden}
.verdict.yes{border-color:rgba(168,108,255,.45);
  background:linear-gradient(180deg,rgba(58,28,110,.5),rgba(12,6,26,.6));
  box-shadow:var(--glow-arcane)}
.verdict.no{border-color:rgba(200,225,175,.17)}
.verdict.done{border-color:rgba(95,227,210,.4);background:rgba(10,36,38,.42)}
.verdict-k{font:700 11.5px/1 var(--font-body);letter-spacing:2.2px;text-transform:uppercase;color:var(--gold)}
.verdict-n{font:600 clamp(30px,9.5vw,52px)/1.08 var(--font-head);color:#fff;margin:14px 0 4px;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
  text-shadow:0 0 40px rgba(168,108,255,.45)}
.verdict-n small{font-size:20px;color:var(--gold);letter-spacing:1px;margin-left:6px}
.verdict-sub{font:500 14px/1.6 var(--font-body);color:var(--dim);max-width:52ch;margin:10px auto 0}
.verdict.no .verdict-n{font-size:30px;color:var(--faint);text-shadow:none}
.verdict .actions{justify-content:center}
@media (max-width:640px){
  /* The unit gets its own line rather than being cut off by the card. */
  .verdict-n small{display:block;margin:7px 0 0;font-size:15px;letter-spacing:2px}
}

/* --------------------------------------------------------- comparison table */
/* The three options are not three paragraphs. They are the same five questions
   answered three different ways, which is a table, and a table is the only
   shape that lets you read across instead of remembering. */
.cmp{width:100%;border-collapse:collapse;margin-top:var(--s2);font-size:14.5px}
.cmp th,.cmp td{padding:12px 13px;text-align:left;
  border-bottom:1px solid rgba(200,225,175,.12);vertical-align:top}
.cmp thead th{font:700 11px/1.3 var(--font-body);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);border-bottom-color:rgba(240,210,122,.3)}
.cmp tbody th{font:500 14px/1.5 var(--font-body);color:var(--dim);white-space:nowrap}
.cmp td{color:var(--cream)}
.cmp td b{color:var(--gold-hi);font-weight:600}
.cmp .col-best{background:rgba(58,28,110,.3)}
.cmp thead .col-best{color:var(--amethyst-hi)}
.cmp .neg{color:#ffb8a6}
.cmp-note{margin-top:11px;font-size:13.5px;color:var(--dim)}
/* On a phone a five-column table is a horizontal scroll nobody performs. It
   becomes three stacked blocks, each one a full answer. */
.cmp-cards{display:none}
@media (max-width:760px){
  .cmp-wrap{display:none}
  .cmp-cards{display:grid;gap:12px;margin-top:var(--s2)}
  .cmp-card{padding:16px;border-radius:14px;background:rgba(0,0,0,.34);border:1px solid var(--line)}
  .cmp-card.best{border-color:rgba(168,108,255,.4);background:rgba(40,20,80,.4)}
  .cmp-card h4{margin:0 0 10px;font:600 17px/1.2 var(--font-head);color:var(--cream)}
  .cmp-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:14px}
  .cmp-card dt{color:var(--dim)}
  .cmp-card dd{margin:0;color:var(--cream);text-align:right;font-variant-numeric:tabular-nums}
}

/* ----------------------------------------------------------- option cards */
/* Each option carries its own number, its own consequence and its own button.
   The button says which option it is, so no button on this page ever says
   only "Claim". */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:var(--s3)}
.opt{display:flex;flex-direction:column;gap:11px;padding:20px;border-radius:16px;
  background:rgba(0,0,0,.34);border:1px solid var(--line);transition:.2s}
.opt.best{border-color:rgba(168,108,255,.45);background:linear-gradient(180deg,rgba(48,24,96,.42),rgba(0,0,0,.34))}
.opt:hover{border-color:var(--line-hi)}
.opt h3{margin:0;font:600 19px/1.25 var(--font-head);color:var(--cream);
  letter-spacing:.4px;text-transform:none}
.opt .tag{align-self:flex-start;font:700 9.5px/1 var(--font-body);letter-spacing:1.6px;
  text-transform:uppercase;padding:5px 10px;border-radius:99px;
  color:var(--amethyst-hi);border:1px solid rgba(168,108,255,.45);background:rgba(58,28,110,.45)}
.opt .lit{font:500 12.5px/1.4 var(--font-body);color:var(--gold);letter-spacing:.4px}
.opt .num{font:600 30px/1.15 var(--font-head);color:#fff;font-variant-numeric:tabular-nums;
  word-break:break-word}
/* The note under the figure is a sentence, not a second headline: it was
   inheriting the card's caps and gold and reading like one. */
.opt .num small{display:block;margin-top:6px;
  font:500 13px/1.5 var(--font-body);color:var(--dim);letter-spacing:0;text-transform:none}
.opt p{margin:0;flex:1;font-size:14px;line-height:1.6;color:var(--ink)}
.opt .give{font-size:13.5px;line-height:1.6;color:#ffc4b5}
.opt button{width:100%;margin-top:2px}

/* ---------------------------------------------------------- vesting panel */
.vest{margin-top:var(--s3)}
.vest .grid{margin-bottom:var(--s2)}
.timeline{position:relative;height:5px;border-radius:99px;background:rgba(0,0,0,.5);
  margin:var(--s3) 0 var(--s1);border:1px solid var(--line)}
.timeline i{position:absolute;inset:0 auto 0 0;border-radius:99px;
  background:linear-gradient(90deg,#6d3bff,#c44dff 55%,#ffd98a);transition:width .7s ease}
.timeline b{position:absolute;top:-5px;width:15px;height:15px;border-radius:50%;
  background:#fff;box-shadow:0 0 16px rgba(255,217,138,.9);transform:translateX(-50%);transition:left .7s ease}
.timeline-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--faint)}

/* -------------------------------------------------------------- receipt */
.receipt{margin-top:var(--s3);padding:var(--s3);border-radius:16px;
  border:1px solid rgba(95,227,210,.35);background:rgba(10,36,38,.38)}
.receipt h3{margin-top:0;color:var(--aqua)}
.receipt .rrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px dashed rgba(200,225,175,.14);font-variant-numeric:tabular-nums}
.receipt .rrow:last-child{border-bottom:0}
.receipt .rrow span:first-child{color:var(--dim)}
.receipt .rrow b{color:var(--cream);font-weight:600}

/* --------------------------------------------------------- rescue / empty */
/* A dead end is still a page. It says what is missing, what it is for, and
   the one thing that can be done from here instead. */
.rescue{display:flex;gap:14px;align-items:flex-start;margin-top:var(--s2);
  padding:16px 18px;border-radius:14px;
  border:1px solid rgba(240,210,122,.3);background:rgba(44,30,6,.4)}
.rescue.bad{border-color:rgba(224,122,99,.4);background:rgba(58,20,12,.4)}
.rescue svg{width:22px;height:22px;flex:none;margin-top:2px;opacity:.85}
.rescue p{margin:0;font-size:14px;line-height:1.62;color:var(--ink)}
.rescue p+p{margin-top:8px}
.rescue b{color:var(--gold-hi)}
.rescue .actions{margin-top:11px}
.empty{text-align:center;padding:var(--s5) var(--s3);color:var(--dim)}
.empty h3{color:var(--cream);margin:0 0 8px;font-size:17px;text-transform:none;letter-spacing:.4px}
.empty p{margin:0 auto;max-width:44ch;font-size:14px}

/* ---------------------------------------------------------- proof strip */
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:var(--s2)}
.proof{padding:14px 16px;border-radius:13px;background:rgba(0,0,0,.34);border:1px solid var(--line)}
.proof .pk{font:700 10.5px/1 var(--font-body);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.proof .pv{font-size:13px;color:var(--cream);line-height:1.5}
.proof .pv.mono{font-size:12.5px;color:var(--gold-hi);word-break:break-all}
.copybtn{margin-top:9px;padding:7px 12px;font-size:10.5px;letter-spacing:1.2px}

/* ------------------------------------------------------------ route cards */
/* The home page used to offer four doors, three of which did not open. Now it
   offers three that do, each one labelled with the chain it lives on. */
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:var(--s2);margin-top:var(--s4)}
.route{display:flex;flex-direction:column;gap:11px;padding:var(--s3);border-radius:18px;
  text-decoration:none;background:rgba(0,0,0,.36);border:1px solid var(--line);transition:.2s;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.route:hover{border-color:var(--line-hi);transform:translateY(-3px);box-shadow:var(--glow-gold)}
.route svg{width:26px;height:26px;fill:none;stroke:var(--amethyst-hi);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(168,108,255,.6))}
.route h3{margin:0;font:600 20px/1.2 var(--font-head);color:var(--cream);letter-spacing:.4px;text-transform:none}
.route p{margin:0;flex:1;font-size:14.5px;line-height:1.62;color:var(--ink)}
.route .go{font:700 11.5px/1 var(--font-body);letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-hi)}
.route .pill{align-self:flex-start}

/* ------------------------------------------------------------- utilities */
.center{text-align:center}
.lede{font:500 17px/1.65 var(--font-body);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skeleton{color:transparent!important;border-radius:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.13),rgba(255,255,255,.05));
  background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Nothing on this page appears out of nowhere. */
.reveal{animation:reveal .35s ease both}
@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ mobile */
@media (max-width:760px){
  .wrap{padding:16px 16px 70px}
  /* Fingers are not cursors. The nav pills were 30px tall and the copy
     buttons 26px: both hittable with a mouse, both a poke-and-hope on a
     phone. Nothing moves on the desktop layout. */
  .topnav a{padding:11px 14px}
  .social a{width:38px;height:38px}
  .copybtn{padding:11px 16px;font-size:11px}
  .row{padding:13px 0}
  .card{padding:20px;margin-top:var(--s2);border-radius:16px}
  .card h2{font-size:21px;margin-bottom:var(--s2)}
  header h1,.page-head h1{font-size:28px}
  /* Two columns beat one tall column of four, and beat four squeezed into a row. */
  .grid,.runes{grid-template-columns:1fr 1fr}
  .opts{grid-template-columns:1fr}
  .routes{grid-template-columns:1fr}
  /* The bar wrapped into a shape where nothing lined up with anything. */
  .topbar{flex-direction:column;gap:12px}
  .social{position:static;transform:none;justify-content:center}
  .topnav.sitenav{justify-content:center}
  .page-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:var(--s3)}
  .page-head img{width:52px;height:52px}
  .netbox{margin-left:0;text-align:left;width:100%}
  .envstrip{flex-direction:column;align-items:stretch;gap:12px;padding:14px}
  .envstrip .env-cell+.env-cell{padding-left:0;border-left:0;padding-top:12px;
    border-top:1px solid var(--line)}
  .envstrip .env-act{margin-left:0}
  .envstrip .env-act button{width:100%}
  .steps{gap:5px}
  .steps li{flex:1 1 100%;padding:9px 12px 9px 38px;font-size:10.5px}
  .form{grid-template-columns:1fr}
  .form button{width:100%}
  .hero-title{font-size:clamp(46px,15vw,64px)}
  .hero .tagline{font-size:18px}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%}
  .grid2{grid-template-columns:1fr}
  .proofs{grid-template-columns:1fr}
}

/* ==========================================================================
   The control room. An unlisted, read-only dashboard: same palette, but no
   forest behind it — a page you read numbers off should hold still.
   ========================================================================== */
body.admin{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(58,28,110,.55), rgba(11,6,24,0) 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(18,72,74,.28), rgba(11,6,24,0) 60%),
    #0b0718;
  background-attachment:fixed}
body.admin .card,body.admin .stat,body.admin .way{text-shadow:none}
.wrap.wide{max-width:1240px}

.stat .sub{font:500 12px/1.45 var(--font-body);color:var(--faint);margin-top:6px}

/* ------------------------------------------------------------- what is up */
/* Sta in fondo alla pagina e non deve reclamare niente: una riga di segnali,
   non quattro schede. Quando una sorgente cade lo dice il pannello che
   dipende da lei, con parole sue; qui basta poterlo verificare. */
.quiet{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line)}
.health{display:flex;flex-wrap:wrap;gap:8px 22px}
.hcell{display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--faint)}
.hcell b{font:700 10.5px/1 var(--font-body);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--dim)}
.hcell span{color:var(--faint)}
.qnote{margin:var(--s2) 0 0;max-width:72ch;font:400 12.5px/1.6 var(--font-body);color:var(--faint)}
.qnote b{color:var(--dim);font-weight:600}
@media (max-width:760px){.health{gap:8px 14px}}

/* --------------------------------------------- where every token stands */
/* One bar for the whole airdrop. The parts are what the contract reports,
   not a reconstruction, so they are allowed to be read as exact. */
.moneybar{display:flex;height:26px;border-radius:99px;overflow:hidden;
  background:rgba(0,0,0,.5);border:1px solid var(--line);margin:4px 0 14px}
.moneybar i{display:block;height:100%;transition:width .6s ease}
.m-paid{background:linear-gradient(90deg,#6d3bff,#c44dff)}
.m-owed{background:linear-gradient(90deg,#c44dff,#ff8ecb)}
.m-left{background:repeating-linear-gradient(115deg,rgba(240,210,122,.55) 0 8px,rgba(240,210,122,.3) 8px 16px)}
.m-burn{background:linear-gradient(90deg,#e07a63,#8a3423)}
.m-fund{background:linear-gradient(90deg,#5fe3d2,#2a8f86)}
.moneylegend{display:flex;flex-wrap:wrap;gap:9px 26px;font-size:14px;color:var(--ink)}
.moneylegend span{display:flex;align-items:center;gap:8px}
.moneylegend i{width:11px;height:11px;border-radius:3px;flex:none}
.moneylegend b{color:var(--cream);font-variant-numeric:tabular-nums}
.moneylegend em{font-style:normal;color:var(--faint);font-size:12.5px}

/* ------------------------------------------------------------------ tables */
.tablewrap{overflow-x:auto;margin-top:12px;
  /* a scrollable table should look scrollable at the edge it scrolls from */
  background:linear-gradient(90deg,rgba(11,6,24,.9),transparent 24px),
             linear-gradient(-90deg,rgba(11,6,24,.9),transparent 24px);
  background-attachment:local,local}
table.adm{width:100%;border-collapse:collapse;font-size:13.5px;
  font-variant-numeric:tabular-nums;min-width:640px}
table.adm th{position:sticky;top:0;z-index:1;text-align:left;white-space:nowrap;
  padding:10px 12px;background:rgba(18,10,38,.96);
  font:700 10.5px/1.3 var(--font-body);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(240,210,122,.28)}
table.adm td{padding:10px 12px;border-bottom:1px solid rgba(200,225,175,.09);color:var(--cream);vertical-align:top}
table.adm tbody tr:hover td{background:rgba(255,255,255,.035)}
table.adm .num{text-align:right}
/* A relative time carries the exact one in its title: say so, quietly. */
table.adm td.ago{white-space:nowrap}
table.adm td.ago[title]{cursor:help;text-decoration:underline dotted rgba(255,255,255,.22);
  text-underline-offset:3px}
table.adm .dim,.dim{color:var(--faint)}
/* The share sits under the figure it is a share of, quiet enough to be read
   second and close enough to be read at all. */
/* "213.446348 / 2,110.448109": what moved, over what is owed. The second
   number is the context, so it is quieter and on its own line. */
table.adm .of{display:block;margin-top:2px;font-style:normal;
  font-size:11.5px;color:var(--faint);letter-spacing:.3px}
.tag em{font-style:normal;opacity:.8;margin-left:3px}
.tag[title]{cursor:help}

/* --------------------------------------------------------------- pagine */
/* Dieci righe per volta: la lista cresce a ogni claim e una tabella che si
   allunga da sola diventa una pagina che non finisce mai. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.pager button{padding:10px 16px;font-size:11px;letter-spacing:1.2px}
.prange{text-align:center;font:600 12.5px/1.35 var(--font-body);color:var(--dim);
  font-variant-numeric:tabular-nums}
.prange i{display:block;margin-top:3px;font-style:normal;font-size:11px;
  font-weight:400;color:var(--faint)}
@media (max-width:760px){
  .pager{gap:10px}
  .pager button{flex:1;padding:12px 10px}
}

.tag{display:inline-block;padding:4px 9px;border-radius:99px;
  font:700 10px/1.3 var(--font-body);letter-spacing:1.2px;text-transform:uppercase;
  border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.t-claim{color:var(--amethyst-hi);border-color:rgba(168,108,255,.45);background:rgba(58,28,110,.45)}
.t-claiminstant{color:#ffd0c4;border-color:rgba(224,122,99,.5);background:rgba(90,34,22,.45)}
.t-forfeit{color:#ffb8a6;border-color:rgba(224,122,99,.6);background:rgba(120,40,26,.45)}
.t-withdraw{color:#c6fff3;border-color:rgba(95,227,210,.5);background:rgba(18,72,74,.45)}
.t-off{color:var(--faint)}

/* --------------------------------------------------------------- the days */
.days{width:100%;height:120px;margin-top:6px;display:block;
  border-bottom:1px solid rgba(255,255,255,.14)}
.days .bar{fill:var(--amethyst);opacity:.9}
.days .bar:hover{fill:var(--gold-hi)}
.days .bar.none{fill:rgba(255,255,255,.1)}
.dayaxis{display:flex;justify-content:space-between;margin-top:7px;
  font:400 11.5px var(--font-body);color:var(--faint)}
.dayaxis span:nth-child(2){color:var(--dim)}
/* Fewer than a handful of days: a list says it better than two lonely bars. */
.daylist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.dayrow{display:grid;grid-template-columns:96px 1fr 46px;align-items:center;gap:12px;
  font-size:13.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.dayrow i{display:block;height:12px;border-radius:99px;min-width:3px;
  background:linear-gradient(90deg,#6d3bff,#c44dff)}
.dayrow b{color:var(--cream);text-align:right}

/* A line that wants to be read rather than skimmed past. */
.hint.warnline{color:var(--gold-hi);border-left:2px solid var(--line-hi);padding-left:12px}

@media (max-width:900px){
  /* A six-column table inside a phone is a sideways scroll nobody performs.
     Each row becomes a small card and every value carries its own column
     heading, which is what the heading row was for in the first place. */
  .tablewrap{overflow:visible;background:none}
  table.adm{min-width:0;display:block}
  table.adm thead{display:none}
  table.adm tbody,table.adm tr,table.adm td{display:block}
  table.adm tr{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;
    padding:6px 14px;background:rgba(0,0,0,.34)}
  table.adm tbody tr:hover td{background:none}
  table.adm td{display:flex;gap:14px;align-items:baseline;justify-content:space-between;
    padding:8px 0;text-align:right;border-bottom:1px solid rgba(200,225,175,.08)}
  table.adm tr td:last-child{border-bottom:0}
  table.adm td::before{content:attr(data-label);flex:none;text-align:left;
    font:700 10px/1.5 var(--font-body);letter-spacing:1.3px;text-transform:uppercase;
    color:var(--faint)}
  table.adm td[colspan]{justify-content:center}
  table.adm td[colspan]::before{content:none}
  table.adm td.num{text-align:right}
}
@media (max-width:760px){
  .moneylegend{gap:7px 16px;font-size:13px}
  .moneylegend span{flex:1 0 100%}
  .moneybar{height:20px}
  .wrap.wide{padding-left:14px;padding-right:14px}
  /* The header stops being a row: title, then the two controls side by side
     across the full width, then the line that says when it last read. */
  body.admin .page-head{flex-direction:column;align-items:stretch;gap:14px}
  body.admin .page-head img{width:44px;height:44px}
  body.admin .netbox{margin-left:0;width:100%;text-align:left}
  body.admin .netbox .actions{justify-content:stretch!important}
  body.admin .netbox .actions button{flex:1}
  body.admin #lastread{margin-top:9px}
  .dayrow{grid-template-columns:74px 1fr 38px;gap:9px;font-size:12.5px}
}