/* =====================================================================
   LEVEL UP — shared stylesheet
   Every page loads this. Colours are declared once as tokens; the two
   themes swap the token values and nothing else. If you add a colour
   anywhere below, add it to BOTH theme blocks or it will break in one.
   ===================================================================== */

:root{
  /* brand constants — identical in both themes */
  --amber:#F59E0B;
  --emerald:#1A3C34;

  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---------------------------------------------------------------------
   DARK — the terminal. This is the default if anything fails.
   --------------------------------------------------------------------- */
[data-theme="dark"]{
  --field:#111827;
  --inset:#0B111F;
  --ink:#F3F4F6;
  --ink-strong:#FFFFFF;
  --mute:#8A94A6;
  --accent:#2FA37F;          /* emerald lifted for legibility on dark */
  --accent-ink:#05201A;
  --amber-ink:#1B1204;
  --amber-text:#F59E0B;
  --line:rgba(243,244,246,.10);
  --gridline:rgba(243,244,246,.055);
  --raise:rgba(243,244,246,.03);
  --ghost:rgba(47,163,127,.16);
  --amber-wash:rgba(245,158,11,.06);
  --alert-bg:rgba(122,46,46,.16);
  --alert-ink:#FFD9D9;
  --alert-btn:#7A2E2E;
  color-scheme:dark;
}

/* ---------------------------------------------------------------------
   LIGHT — the printed page. Not a washed-out dark mode: this is the
   book's side of the brand, so it reads as paper and ink.
   --------------------------------------------------------------------- */
[data-theme="light"]{
  --field:#F3F4F6;
  --inset:#FFFFFF;
  --ink:#111827;
  --ink-strong:#000000;
  --mute:#5B6472;
  --accent:#1A3C34;          /* full emerald is dark enough on paper */
  --accent-ink:#FFFFFF;
  --amber-ink:#1B1204;
  --amber-text:#8A5A00;      /* amber fails contrast as text on light */
  --line:rgba(17,24,39,.14);
  --gridline:rgba(17,24,39,.05);
  --raise:rgba(17,24,39,.025);
  --ghost:rgba(26,60,52,.14);
  --amber-wash:rgba(245,158,11,.10);
  --alert-bg:rgba(154,52,52,.10);
  --alert-ink:#7A2020;
  --alert-btn:#9A3434;
  color-scheme:light;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--field);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .18s ease,color .18s ease;
}

/* ---------- grid backdrop ---------- */
.grid-bg{
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 120% 78% at 50% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 120% 78% at 50% 0%, #000 0%, transparent 72%);
  pointer-events:none;
  z-index:0;
}

.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 24px 96px;}

/* ---------- theme switch ---------- */
.topbar{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding:20px 0 0;
}
.langer{display:none;}
.themer,.langer{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:var(--raise);
}
.themer button,.langer button{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  padding:7px 12px;
  transition:background-color .15s ease,color .15s ease;
}
.themer button:hover,.langer button:hover{color:var(--ink-strong);}
.themer button:focus-visible,.langer button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.themer button[aria-pressed="true"],.langer button[aria-pressed="true"]{
  background:var(--accent);
  color:var(--accent-ink);
}

/* ---------- masthead ---------- */
.masthead{
  position:relative;
  padding:34px 0 40px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.ghost{
  position:absolute;
  right:-8px;top:0;
  font-size:180px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px var(--ghost);
  pointer-events:none;
  user-select:none;
}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 14px;
}
.masthead h1{
  position:relative;
  margin:0 0 18px;
  font-size:clamp(30px,6.5vw,46px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink-strong);
}
.spec{
  position:relative;
  display:inline-block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:999px;
  padding:6px 14px;
}
.standfirst{
  position:relative;
  margin:26px 0 0;
  max-width:52ch;
  color:var(--mute);
}
.standfirst strong{color:var(--ink);font-weight:600;}

/* ---------- section furniture ---------- */
.step{padding:52px 0 0;}
.step-label{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 18px;
}
.step-label b{color:var(--amber-text);font-weight:600;}
.step h2{
  margin:0 0 10px;
  font-size:23px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink-strong);
}
.step p{margin:0 0 16px;max-width:60ch;}
.step p:last-child{margin-bottom:0;}

/* ---------- message card ---------- */
.card{
  margin:22px 0 0;
  background:var(--inset);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.card-amber{border-top:2px solid var(--amber);}
.card-emerald{border-top:2px solid var(--accent);}

.card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:13px 18px;
  background:var(--raise);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--mute);
}
.card-head .to{letter-spacing:.14em;text-transform:uppercase;font-size:11px;}
.card-head .chan{color:var(--ink-strong);}

.msg{
  margin:0;
  padding:22px 18px;
  font-family:var(--mono);
  font-size:15px;
  line-height:1.75;
  color:var(--ink-strong);
  white-space:pre-wrap;
  word-break:break-word;
  user-select:text;
}
.msg-head{padding-bottom:6px;}

.composer{
  display:block;
  width:100%;
  min-height:190px;
  resize:vertical;
  margin:0;
  padding:4px 18px 20px;
  border:0;
  background:transparent;
  color:var(--ink-strong);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.75;
}
.composer::placeholder{color:var(--mute);opacity:.8;}
.composer:focus{outline:0;}
.composer:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

.meter{
  padding:12px 18px 14px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:13px;
  color:var(--mute);
}
.meter-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 12px;
}
.meter .n{font-size:16px;font-weight:600;color:var(--amber-text);}
.meter .note{font-size:12px;}
.meter.is-ready .n,
.meter.is-ready .verdict{color:var(--accent);}
.meter-rule{
  margin:9px 0 0;
  padding-top:9px;
  border-top:1px dashed var(--line);
  font-size:12.5px;
  line-height:1.55;
  color:var(--mute);
}
.meter-rule b{color:var(--ink-strong);font-weight:600;}

/* Master Plan 4.2 — explanation of the English message, non-EN only */
.gloss{
  margin:0;
  padding:11px 18px;
  border-top:1px dashed var(--line);
  background:var(--raise);
  font-size:13px;
  color:var(--mute);
}

.card-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-top:1px solid var(--line);
}

.btn{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:12px 20px;
  border:0;
  border-radius:7px;
  cursor:pointer;
  background:var(--amber);
  color:var(--amber-ink);
  transition:transform .12s ease,filter .12s ease;
}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px;}
.btn-emerald{background:var(--accent);color:var(--accent-ink);}
.btn.is-done{background:var(--emerald);color:#2FA37F;}
.btn.is-failed{background:var(--alert-btn);color:#FFD9D9;}

.hint{font-size:13.5px;color:var(--mute);margin:0;}
.alert{
  display:none;
  margin:0;
  padding:14px 18px;
  border-top:1px solid var(--line);
  background:var(--alert-bg);
  color:var(--alert-ink);
  font-size:14px;
}
.alert.show{display:block;}

/* ---------- rule list ---------- */
.rules{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  border-top:1px solid var(--line);
}
.rules li{
  padding:15px 0 15px 28px;
  border-bottom:1px solid var(--line);
  position:relative;
  max-width:62ch;
}
.rules li::before{
  content:"";
  position:absolute;
  left:2px;top:24px;
  width:7px;height:7px;
  border-radius:2px;
  background:var(--accent);
}
.rules b{color:var(--ink-strong);font-weight:600;}

.keyline{
  margin:24px 0 0;
  padding:16px 18px;
  border-left:2px solid var(--amber);
  background:var(--amber-wash);
  font-size:15px;
  color:var(--ink);
}
.keyline b{color:var(--ink-strong);}

code{
  font-family:var(--mono);
  font-size:.92em;
  background:var(--raise);
  border:1px solid var(--line);
  padding:1px 6px;
  border-radius:4px;
  color:var(--ink-strong);
}

a.link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);}
a.link:hover{color:var(--ink-strong);border-bottom-color:var(--ink-strong);}
a.link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- footer ---------- */
.foot{
  margin:64px 0 0;
  padding:30px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  align-items:center;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--mute);
}
.foot .sep{color:var(--line);}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

@media (max-width:600px){
  .ghost{font-size:120px;}
  .btn{width:100%;}
  .grid-bg{background-size:48px 48px;}
  .themer button,.langer button{padding:7px 10px;letter-spacing:.10em;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}

/* ---------- rules page: tables, stat pairs, stamp ---------- */
.stamp{
  display:inline-block;
  margin:22px 0 0;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 13px;
}

.tbl{
  width:100%;
  margin:22px 0 0;
  border-collapse:collapse;
  font-size:15px;
}
.tbl th,
.tbl td{
  text-align:left;
  padding:13px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.tbl thead th{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
  border-bottom:1px solid var(--line);
}
.tbl tbody th{
  font-weight:600;
  color:var(--ink-strong);
  white-space:nowrap;
}
.tbl td.num{
  font-family:var(--mono);
  color:var(--ink-strong);
  white-space:nowrap;
}
.tbl tr:last-child th,
.tbl tr:last-child td{border-bottom:0;}

.tally{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
.tally li{
  flex:1 1 150px;
  padding:15px 16px;
  background:var(--inset);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:9px;
}
.tally .v{
  display:block;
  font-family:var(--mono);
  font-size:22px;
  font-weight:700;
  color:var(--ink-strong);
  line-height:1.2;
}
.tally .k{
  display:block;
  margin-top:4px;
  font-size:12.5px;
  color:var(--mute);
}
.tally li.amber{border-left-color:var(--amber);}

.cmds{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  border-top:1px solid var(--line);
}
.cmds li{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  max-width:62ch;
}
.cmds code{margin-right:8px;}

@media (max-width:600px){
  .tbl{font-size:14px;}
  .tbl th,.tbl td{padding:11px 8px;}
}

/* ---------- /network: primary call to action, numbered steps ---------- */
.cta-wrap{margin:30px 0 0;}
.cta{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:260px;
  font-family:var(--mono);
  font-size:14px;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  padding:16px 30px;
  border:0;
  border-radius:9px;
  background:var(--accent);
  color:var(--accent-ink);
  transition:transform .12s ease,filter .12s ease;
}
.cta-main{display:block;}
.cta-sub{
  display:block;
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  opacity:.72;
}
.cta:hover{filter:brightness(1.08);}
.cta:active{transform:translateY(1px);}
.cta:focus-visible{outline:2px solid var(--ink-strong);outline-offset:4px;}
.cta-note{
  margin:14px 0 0;
  max-width:46ch;
  font-size:13.5px;
  color:var(--mute);
}

.steps-num{
  list-style:none;
  counter-reset:s;
  margin:22px 0 0;
  padding:0;
  border-top:1px solid var(--line);
}
.steps-num li{
  counter-increment:s;
  position:relative;
  padding:16px 0 16px 46px;
  border-bottom:1px solid var(--line);
  max-width:60ch;
}
.steps-num li::before{
  content:counter(s);
  position:absolute;
  left:0;top:16px;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:50%;
}
.steps-num b{color:var(--ink-strong);font-weight:600;}

@media (max-width:600px){
  .cta{width:100%;min-width:0;}
}

/* ---------- /vault: status banner, wallet cards, tick table ---------- */
.status{
  margin:26px 0 0;
  padding:20px 22px;
  background:var(--inset);
  border:1px solid var(--line);
  border-left:2px solid var(--amber);
  border-radius:10px;
}
.status-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber-text);
  margin:0 0 8px;
}
.status h2{margin:0 0 8px;font-size:21px;font-weight:600;color:var(--ink-strong);}
.status p{margin:0;max-width:58ch;color:var(--mute);}

.wallets{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}
.wallets li{
  flex:1 1 260px;
  padding:20px;
  background:var(--inset);
  border:1px solid var(--line);
  border-top:2px solid var(--accent);
  border-radius:10px;
}
.wallets h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:600;
  color:var(--ink-strong);
}
.wallets p{margin:0 0 14px;font-size:14px;color:var(--mute);}
.wallets .links{display:flex;flex-wrap:wrap;gap:8px;}
.wallets .links a{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--accent);
  transition:background-color .15s ease,color .15s ease;
}
.wallets .links a:hover{background:var(--accent);color:var(--accent-ink);}
.wallets .links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.tick{color:var(--accent);font-weight:700;}
.cross{color:var(--mute);}

.notify{display:none;}
.notify.on{display:block;}
.notify-box{
  margin:24px 0 0;
  padding:20px 22px;
  background:var(--inset);
  border:1px solid var(--line);
  border-radius:10px;
}
.notify-box h3{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--ink-strong);}
.notify-box p{margin:0 0 14px;font-size:14px;color:var(--mute);}
.notify-row{display:flex;flex-wrap:wrap;gap:10px;}
.notify-row input{
  flex:1 1 220px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--field);
  color:var(--ink-strong);
  font-family:var(--sans);
  font-size:15px;
}
.notify-row input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

@media (max-width:600px){
  .wallets li{flex:1 1 100%;}
}

/* ---------- destination list: 404 and root ---------- */
.dest{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  border-top:1px solid var(--line);
}
.dest li{border-bottom:1px solid var(--line);}
.dest a{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 16px;
  padding:17px 4px;
  text-decoration:none;
  color:var(--ink);
  transition:background-color .12s ease;
}
.dest a:hover{background:var(--raise);}
.dest a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.dest .u{
  flex:0 0 auto;
  min-width:190px;
  font-family:var(--mono);
  font-size:14px;
  color:var(--accent);
}
.dest .d{flex:1 1 240px;font-size:14.5px;color:var(--mute);}
.dest a:hover .d{color:var(--ink);}

.rootmark{
  margin:0 0 18px;
  font-size:clamp(26px,5.5vw,38px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--mute);
}

/* ---------- root page hero ---------- */
.mark{
  display:block;
  width:52px;height:52px;
  margin:0 0 26px;
}

.hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:center;
  padding:26px 0 56px;
  border-bottom:1px solid var(--line);
}
.hero-copy{min-width:0;}
.hero h1{
  margin:0 0 12px;
  font-size:clamp(44px,8.5vw,78px);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--ink-strong);
}
.hero .sub{
  margin:0 0 26px;
  font-size:clamp(18px,3.2vw,25px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--accent);
}
.hero .lede{
  margin:0;
  max-width:44ch;
  font-size:16.5px;
  line-height:1.62;
  color:var(--mute);
}
.hero .lede strong{color:var(--ink);font-weight:600;}

.hero-art{
  position:relative;
  display:flex;
  justify-content:center;
}
.hero-art img{
  display:block;
  width:100%;
  max-width:300px;
  height:auto;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.42));
}
[data-theme="light"] .hero-art img{
  filter:drop-shadow(0 20px 38px rgba(17,24,39,.24));
}

@media (max-width:760px){
  .hero{
    grid-template-columns:1fr;
    gap:34px;
    padding-bottom:40px;
  }
  .hero-art{order:2;}
  .hero-art img{max-width:210px;}
}