/* ============================================================
   The Watcher - design system
   Hero follows the reference spec exactly (1 --u = 1 reference px).
   Every other page uses the same language at 1:1 pixel scale.
   ============================================================ */
:root{
  --u:1px; --r-btn:10px;
  /* reference design system (HSL values) */
  --background:0 0% 0%; --foreground:0 0% 100%; --card-h:0 0% 5%; --secondary:0 0% 12%; --muted:0 0% 15%;
  --muted-foreground:0 0% 65%; --accent:170 15% 45%; --border:0 0% 20%; --input:0 0% 18%; --ring:0 0% 40%; --hero-subtitle:210 17% 95%;
  --sans:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --bg:#000; --panel:hsl(var(--card-h)); --panel-2:hsl(var(--secondary)); --panel-3:hsl(var(--muted));
  --line:hsl(var(--border) / .45); --line-2:hsl(var(--border));
  --ink:#fff; --ink-2:hsl(var(--muted-foreground)); --ink-3:hsl(0 0% 48%); --ink-4:hsl(0 0% 28%);
  --mint:hsl(170 20% 64%); --mint-bg:hsl(var(--accent) / .16); --violet:#fff; --lilac:hsl(0 0% 86%); --lilac-bg:rgba(255,255,255,.06);
  --leak:hsl(0 26% 70%); --leak-bg:hsl(0 26% 70% / .1);
  --zec:var(--lilac); --zec-2:#fff; --safe:var(--mint); --safe-bg:var(--mint-bg);
  --r:16px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#000;color:#fff;font-family:var(--sans);font-size:15px;line-height:1.55;font-optical-sizing:none;font-feature-settings:"kern" 1,"calt" 1;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;overflow-x:hidden}
body.lock{overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea{font:inherit;color:inherit}
a{color:var(--lilac)}
code{font:.88em var(--mono)}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px;border-radius:4px}
input:focus-visible,textarea:focus-visible{outline:none}
/* side margins: half of the previous layout (was 1180px max + 32px padding; 16px on phones) */
:root{--gx:8px}
@media(min-width:760px){:root{--gx:max(16px, calc((100vw - 1180px) / 4 + 16px))}}
.wrap{max-width:none;margin:0 auto;padding:0 var(--gx)}

/* ============================== shared buttons ============================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;text-decoration:none;white-space:nowrap;line-height:1;border:0;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
  height:38px;padding:0 16px;font-size:13.3px;font-weight:480;letter-spacing:-.34px;
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.98)}
.btn:hover{background:rgba(255,255,255,.10)}
.btn.primary,.btn.solid{background:#fff;color:#000;box-shadow:none;font-weight:550;letter-spacing:-.35px}
.btn.primary:hover,.btn.solid:hover{background:#e9e9ea}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.btn.ghost:hover{background:rgba(255,255,255,.10)}
.btn.big{height:44px;padding:0 20px;font-size:14.5px}
.btn.mini{height:30px;padding:0 12px;font-size:12.5px}
.btn:disabled{opacity:.38;cursor:default}
.btn:disabled:hover{background:transparent}
.btn.primary:disabled:hover{background:#fff}
.link{background:none;border:0;padding:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-4);font-size:14px}

/* ============================== cards & panels ============================== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.hint{padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.hint.warnh{border-color:hsl(0 26% 70% / .3);color:#ffd2ce}
.hint.okh{border-color:hsl(170 20% 64% / .3);color:var(--mint)}
.err{color:var(--leak);font-size:13px;margin-top:8px}
.okmsg{color:var(--mint);font-size:13px;margin-top:8px}
.leakc{color:var(--leak)} .coldc{color:var(--mint)}
.field{display:flex;gap:8px;margin-top:8px}
.field input{flex:1;min-width:0;height:40px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:10px;padding:0 12px;font:13px var(--mono);outline:none;transition:border-color .18s}
.field input:focus{border-color:rgba(255,255,255,.6)}
.field .btn{height:40px}
footer{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 44px;color:var(--ink-3);font-size:13px}
footer p{margin:4px 0}
.section-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px 16px;margin:56px 0 16px}
.section-h h2{margin:0;font-size:28px;font-weight:545;font-variation-settings:'opsz' 28;letter-spacing:-.02em}
.section-h p{margin:0;color:var(--ink-3);font-size:14px;max-width:460px}

/* ============================== explore page ============================== */
.paths{display:grid;gap:14px;position:relative;z-index:2}
@media(min-width:900px){.paths{grid-template-columns:repeat(3,1fr)}}
.path{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line-2);background:#050506;text-align:left;padding:0;display:flex;flex-direction:column;color:#fff;transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .2s}
.path:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.35)}
.path .pic{position:relative;height:190px;overflow:hidden}
.path .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 45%,#050506 100%);z-index:2}
.path .pic svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.path .body{padding:16px 18px 18px;display:grid;gap:8px}
.path .tagline{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.path h3{margin:0;font-size:21px;font-weight:545;font-variation-settings:'opsz' 24;letter-spacing:-.015em}
.path p{margin:0;color:var(--ink-2);font-size:14px}
.path .go{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:#fff}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:6px;box-shadow:0 0 8px var(--mint);vertical-align:1px}
.live-dot.off{background:var(--leak);box-shadow:0 0 8px var(--leak)}
.feed{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.feed-head{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.feed-head h3{margin:0;font-size:14.5px;font-weight:550;display:flex;gap:10px;align-items:center}
.live{font:600 10px var(--mono);letter-spacing:.1em;color:var(--leak);border:1px solid hsl(0 26% 70% / .6);border-radius:4px;padding:2px 6px}
.feed-stats{display:flex;gap:18px;font:500 12.5px var(--mono);color:var(--ink-2);flex-wrap:wrap}
.feed-stats b{font-weight:600}
.feed-stats .r b{color:var(--leak)} .feed-stats .s b{color:var(--mint)}
.tx{display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line);font:12.5px var(--mono)}
.tx:last-child{border-bottom:0}
button.tx{width:100%;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;color:inherit;cursor:pointer;transition:background .15s}
button.tx:hover{background:rgba(255,255,255,.04)}
.tx .h{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .what{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tx.blank .what{color:transparent;background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 7px,rgba(255,255,255,.03) 7px 14px);border-radius:5px;max-width:420px;user-select:none}
.badge{font:600 10px var(--mono);letter-spacing:.08em;padding:3px 7px;border-radius:5px;text-transform:uppercase;white-space:nowrap}
.badge.read{color:var(--leak);background:var(--leak-bg)}
.badge.blank{color:var(--mint);background:var(--mint-bg)}
.badge.part{color:var(--lilac);background:var(--lilac-bg)}
.feed-foot{padding:11px 18px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line)}
@media(max-width:640px){.tx{grid-template-columns:1fr auto}.tx .h{display:none}}
.how{display:grid;gap:14px}
@media(min-width:860px){.how{grid-template-columns:repeat(3,1fr)}}
.how .card{padding:20px}
.how .n{font:500 11px var(--mono);color:var(--lilac);letter-spacing:.12em}
.how h4{margin:8px 0 6px;font-size:18px;font-weight:545;letter-spacing:-.01em}
.how p{margin:0;color:var(--ink-2);font-size:14px}

/* ============================== steps (testnet + real run) ============================== */
.real{padding-bottom:40px}
.rsteps{display:grid;gap:10px;position:relative;z-index:2;max-width:880px;margin:0 auto}
.rstep{padding:0;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:rgba(10,10,12,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rstep.open{border-color:rgba(255,255,255,.22)}
.rstep .rh{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;padding:15px 18px;background:none;border:0;width:100%;text-align:left}
.rstep .rn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font:600 12px var(--mono);color:var(--ink-2)}
.rstep.done .rn{background:var(--mint);border-color:var(--mint);color:#000}
.rstep.open .rn{background:#fff;color:#000;border-color:#fff}
.rstep .rt{font-weight:550;font-size:16px;letter-spacing:-.01em}
.rstep .rt small{display:block;font-weight:400;color:var(--ink-3);font-size:12.5px;margin-top:2px;letter-spacing:0}
.rstep .rclock{font:500 13px var(--mono);color:var(--ink-3)}
.rstep.done .rclock{color:var(--mint)}
.rbody{padding:0 18px 20px 72px;display:grid;gap:12px}
@media(max-width:640px){.rbody{padding:0 16px 18px}}
.rbody p{margin:0;color:var(--ink-2);font-size:14.5px}
.rbody ol,.rbody ul{margin:0;padding-left:20px;color:var(--ink-2);font-size:14.5px}
.rbody li{margin:5px 0}
.rbody li b,.rbody p b{color:#fff;font-weight:550}
.choices{display:grid;gap:10px}
@media(min-width:760px){.choices{grid-template-columns:1fr 1fr}}
.choice{padding:14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.choice>b{display:block;margin-bottom:4px;font-weight:550}
.choice p{font-size:13.5px}
.verify{display:grid;gap:10px}
.pfield2 label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:-2px}
.addrline{font:12px var(--mono);color:var(--ink-2);word-break:break-all;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:6px;display:flex;gap:10px;align-items:center;justify-content:space-between;max-width:720px}
.addrline .lab{font:600 10px var(--mono);color:var(--ink-3);display:block;margin-bottom:3px;letter-spacing:.1em}
.live-check{display:grid;gap:6px;padding:14px 16px;border-radius:12px;border:1px dashed var(--line-2);background:rgba(255,255,255,.02);font-size:14px}
.live-check>b{font-weight:550}
.live-check.ok{border-style:solid;border-color:hsl(170 20% 64% / .4);background:var(--mint-bg)}
.live-check.ok>b{color:var(--mint)}
.live-check code{font:12px var(--mono)}
.memo-quote{font-family:var(--mono);color:#fff;background:rgba(255,255,255,.07);padding:2px 8px;border-radius:6px}
.result{border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.4);overflow:hidden}
.result .rtop{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.result .rgrid{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;padding:12px 14px;font:12px var(--mono)}
.result .rgrid .k{color:var(--ink-3)}
.result .rgrid .x{color:transparent;background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 7px,rgba(255,255,255,.03) 7px 14px);border-radius:4px;user-select:none}
.result .say{padding:12px 14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.result.ok .rtop b{color:var(--mint)} .result.warn .rtop b{color:var(--lilac)} .result.bad .rtop b{color:var(--leak)}
.filecard{display:grid;gap:12px;margin-top:6px}
@media(min-width:860px){.filecard.two{grid-template-columns:1fr 1fr}}
.fc{border:1px solid hsl(0 26% 70% / .3);border-radius:14px;background:rgba(0,0,0,.4);padding-bottom:12px}
.fc.cold{border-color:hsl(170 20% 64% / .35)}
.fc>.dim{padding:0 14px}
.fch{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px 0}
.fc .pgrid{padding:12px 14px 4px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.real .cta-row,.real .list{max-width:880px;margin-left:auto;margin-right:auto}
.help{padding:18px 20px;margin:14px auto 0;max-width:880px}
.help h3{margin:0 0 4px;font-size:16px;font-weight:550}
.help details{border-bottom:1px solid var(--line);padding:12px 0}
.help details:last-child{border-bottom:0}
.help summary{cursor:pointer;font-weight:500;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.help summary::after{content:"+";color:var(--ink-3);font-family:var(--mono)}
.help details[open] summary::after{content:"–"}
.help p{margin:8px 0 0;color:var(--ink-2);font-size:14px}

/* ============================== investigation + practice layout ============================== */
.train{display:grid;gap:16px;padding-bottom:40px;position:relative;z-index:2}
@media(min-width:1100px){.train{grid-template-columns:290px 380px 1fr;align-items:start}.train.inv{grid-template-columns:290px minmax(0,1fr) 340px}}
@media(min-width:760px) and (max-width:1099px){.train{grid-template-columns:1fr 1fr}.train .watcher{grid-column:1/-1}.train.inv{grid-template-columns:1fr}}
.rail{display:grid;gap:12px}
@media(min-width:1100px){.rail,.watcher{position:sticky;top:88px}}
.mission{padding:18px;background:rgba(10,10,12,.82)}
.mission .step{font:500 11px var(--mono);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between}
.mission h2{margin:10px 0 6px;font-size:22px;line-height:1.15;letter-spacing:-.018em;font-weight:545;font-variation-settings:'opsz' 24}
.mission .brief{margin:0;color:var(--ink-2);font-size:14px}
.timer{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px;font-family:var(--mono)}
.timer .t{font-size:30px;font-weight:500;letter-spacing:-.02em}
.timer .par{font-size:11.5px;color:var(--ink-3)}
.timer.over .t{color:var(--leak)}
.parbar{height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.parbar i{display:block;height:100%;background:#fff;transition:width 1s linear}
.timer.over + .parbar i{background:var(--leak)}
.dots{display:flex;gap:5px;margin-top:6px}
.dots i{flex:1;height:3px;border-radius:3px;background:var(--line)}
.dots i.done{background:var(--mint)} .dots i.now{background:#fff}
.objs{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.objs li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:14px;color:var(--ink-2);align-items:start}
.objs li .box{width:17px;height:17px;border:1px solid var(--ink-4);border-radius:5px;margin-top:2px;display:grid;place-items:center}
.objs li.done{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4)}
.objs li.done .box{background:var(--mint);border-color:var(--mint)}
.objs li.done .box::after{content:"";width:5px;height:9px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.objs li.now{color:#fff}
.mission .hint{margin-top:14px}
.next{margin-top:14px;width:100%}
.lesson{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--mint-bg);font-size:13.5px;color:var(--ink-2);border:1px solid hsl(170 20% 64% / .25)}
.lesson b{color:var(--mint)}
.evidence{min-width:0}
.ev{padding:20px;background:rgba(10,10,12,.82)}
.evh{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.txcard{border:1px solid var(--line-2);border-radius:14px;background:rgba(0,0,0,.5);overflow:hidden}
.txh{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-size:12px}
.txh a{margin-left:auto;text-decoration:none}
.iogrid{display:grid;grid-template-columns:1fr 28px 1fr;gap:10px;padding:14px}
@media(max-width:640px){.iogrid{grid-template-columns:1fr}.ioarrow{transform:rotate(90deg);justify-self:center}}
.iolab{font:600 10px var(--mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase;margin-bottom:8px}
.ioarrow{display:grid;place-items:center;color:var(--ink-4);font-size:18px}
.io{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--line);margin-bottom:6px;font-size:13px}
.io .ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--leak)}
.io .val{font:500 13px var(--mono);white-space:nowrap}
.io .val::after{content:" ZEC";color:var(--ink-3)}
.io .still{font:500 11px var(--mono);color:var(--ink-3);width:100%}
.btn.follow{height:28px;padding:0 10px;font-size:12px;color:var(--leak);box-shadow:inset 0 0 0 1px hsl(0 26% 70% / .55);background:var(--leak-bg)}
.io.frost{border-style:dashed;background:var(--mint-bg);border-color:hsl(170 20% 64% / .35);display:grid;gap:8px}
.io.more{justify-content:center;color:var(--ink-3);font:500 12px var(--mono);background:none;border-style:dashed}
.frost-bar{display:block;height:12px;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 8px,rgba(255,255,255,.04) 8px 16px)}
.lab2{color:var(--mint);font-size:12.5px}
.io-note{padding:0 14px 14px;font-size:13px;color:var(--mint)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:14px}
.pgrid>div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:4px;min-width:0}
.pgrid .wide{grid-column:1/-1}
.pgrid .k{font:600 10px var(--mono);letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.pgrid .v{font:500 14px var(--mono);word-break:break-word}
.q{margin-top:16px;padding:14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.q.solved{border-color:hsl(170 20% 64% / .35)}
.qp{font-weight:550;margin-bottom:10px;font-size:15px}
.qopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.qopts button{border:1px solid var(--line-2);background:rgba(0,0,0,.35);border-radius:10px;padding:11px 12px;font-size:13.5px;text-align:left;transition:border-color .15s,background .15s}
.qopts button.mono{font:12.5px var(--mono)}
.qopts button:hover:not(:disabled){border-color:rgba(255,255,255,.5)}
.qopts button.wrong{border-color:var(--leak);color:var(--leak);animation:shake .3s;text-decoration:line-through}
.qopts button.right{border-color:var(--mint);background:var(--mint-bg);color:var(--mint)}
.qopts button:disabled{cursor:default}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.hop{margin-bottom:6px}
.hoparrow{font:500 12px var(--mono);color:var(--leak);padding:8px 0 8px 14px}
.wallmsg{margin-top:14px;padding:16px;border-radius:12px;border:1px dashed hsl(170 20% 64% / .4);background:var(--mint-bg);color:var(--ink-2)}
.wallmsg b{color:var(--mint)}
.ev .tx{border:1px solid var(--line);border-radius:10px;margin-top:6px}
.loadcard{margin:40px auto;max-width:520px;padding:36px;text-align:center;display:grid;gap:14px;justify-items:center;position:relative;z-index:2}
.loadcard h2{margin:0;font-weight:545}
.spinner{width:44px;height:44px;border-radius:50%;border:2px solid var(--line-2);border-top-color:#fff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.watcher{padding:0;overflow:hidden;background:rgba(10,10,12,.85)}
.wtop{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;background:linear-gradient(180deg,hsl(0 26% 70% / .07),transparent)}
.wtop h3{margin:0;font-size:14.5px;font-weight:550;display:flex;align-items:center;gap:10px}
.wtop .sub{font:500 10.5px var(--mono);color:var(--ink-3);letter-spacing:.06em}
.eye{width:20px;height:20px;border-radius:50%;border:1.3px solid #fff;display:inline-grid;place-items:center;flex:none}
.eye::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--leak);box-shadow:0 0 10px var(--leak)}
.exposure{padding:16px 18px;border-bottom:1px solid var(--line)}
.exposure .row{display:flex;justify-content:space-between;align-items:baseline}
.exposure .pct{font:500 32px var(--mono);letter-spacing:-.03em;transition:color .3s}
.exposure .lab,.statsrow .lab,.trail .lab,.log .lab,.stat .lab{font:600 10px var(--mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.meter{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--lilac),var(--leak));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.dossier{padding:4px 18px 10px;border-bottom:1px solid var(--line)}
.drow{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.drow:last-child{border-bottom:0}
.drow .k{color:var(--ink-3);font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.drow .v{font-family:var(--mono);font-size:12.5px;word-break:break-word}
.drow .v.none{color:var(--ink-4)} .drow .v.leak{color:var(--leak)} .drow .v.cold{color:var(--mint)}
.drow.flash{animation:flash 1.4s ease}
@keyframes flash{0%{background:hsl(0 26% 70% / .22)}100%{background:transparent}}
.trail{padding:14px 18px;border-bottom:1px solid var(--line)}
.trail .lab{margin-bottom:10px}
.chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.node{font:500 11px var(--mono);padding:6px 9px;border-radius:8px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);white-space:nowrap}
.node.leak{border-color:hsl(0 26% 70% / .5);color:var(--leak);background:var(--leak-bg)}
.node.frost{border-style:dashed;color:var(--ink-3);background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px)}
.node.pool{border-color:hsl(170 20% 64% / .45);color:var(--mint);background:var(--mint-bg)}
.arr{color:var(--ink-4);font-size:12px}
.log{padding:12px 18px 16px;max-height:320px;overflow-y:auto}
.log .lab{margin-bottom:6px}
.entry{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line)}
.entry .ts{font:11px var(--mono);color:var(--ink-4);padding-top:2px}
.entry .msg{color:var(--ink-2)}
.entry .msg code{font:11.5px var(--mono);color:#fff}
.entry.leak .msg b{color:var(--leak)} .entry.blank .msg b{color:var(--mint)} .entry.info .msg b{color:#fff}
.entry.new .msg{animation:typein .9s steps(36,end) both}
@keyframes typein{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.empty-log{color:var(--ink-4);font-size:13px;padding:6px 0}
.statsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 18px;border-bottom:1px solid var(--line)}
.statsrow>div{display:grid;gap:4px}
.statsrow .pct{font:500 21px var(--mono);letter-spacing:-.02em}
.world{padding:16px;background:rgba(10,10,12,.82)}
.world .wh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.world .wh b{font-size:14px;font-weight:550}
.tagsim{font:600 9.5px var(--mono);letter-spacing:.1em;color:var(--ink-3);border:1px solid var(--line-2);padding:2px 6px;border-radius:4px}

/* ============================== practice phone ============================== */
.phone-col{display:grid;justify-items:center;gap:10px}
.phone{width:min(360px,100%);height:720px;border-radius:48px;background:#050506;padding:10px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.7),0 0 140px rgba(255,255,255,.14);position:relative}
.phone .screen{position:relative;height:100%;border-radius:39px;overflow:hidden;background:radial-gradient(120% 60% at 50% 0%,#111 0%,#0a0a0d 60%);display:flex;flex-direction:column}
.status{display:flex;justify-content:space-between;align-items:center;padding:14px 26px 6px;font-weight:600;font-size:13px;flex:none}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:100px;height:28px;border-radius:20px;background:#000;z-index:5}
.apphead{display:flex;justify-content:space-between;align-items:center;padding:10px 20px 6px;flex:none}
.apphead b{font-size:15px;font-weight:550;letter-spacing:-.01em}
.appbody{flex:1;overflow-y:auto;padding:8px 20px 20px;display:flex;flex-direction:column}
.appbody::-webkit-scrollbar{display:none}
.center{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;text-align:center}
.pbtn{width:100%;border-radius:12px;height:46px;border:0;background:#fff;color:#000;font-weight:550;font-size:15px;letter-spacing:-.2px}
.pbtn.sec{background:rgba(255,255,255,.08);color:#fff}
.pbtn.danger{background:transparent;border:1px dashed hsl(0 26% 70% / .5);color:var(--leak);font-weight:500}
.pbtn:disabled{opacity:.4}
.plogo{width:64px;height:64px;border-radius:18px;background:linear-gradient(140deg,var(--mint),var(--violet));display:grid;place-items:center;margin:0 auto;color:#000;font:700 28px var(--sans)}
.seed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}
.seed span{font:11.5px var(--mono);background:rgba(255,255,255,.06);border-radius:8px;padding:7px 6px;display:flex;gap:5px}
.seed span i{font-style:normal;color:var(--ink-3);min-width:14px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.opts button{border:1px solid var(--line-2);background:rgba(255,255,255,.05);border-radius:12px;padding:12px;font:13px var(--mono)}
.opts button.wrong{border-color:var(--leak);animation:shake .3s}
.bal{padding:20px 0 6px;text-align:center}
.bal .lab{font:600 10px var(--mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.bal .v{font-size:40px;font-weight:300;letter-spacing:-.04em;line-height:1.1;margin-top:4px}
.bal .v small{font-size:16px;color:var(--ink-2);font-weight:400}
.tbal{display:flex;justify-content:space-between;align-items:center;font-size:13px;background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px;margin-top:10px}
.tbal b{font-family:var(--mono);font-weight:500}
.appbody .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.appbody .actions button{border:0;border-radius:12px;background:rgba(255,255,255,.09);padding:14px 8px;font-weight:550;font-size:14px}
.banner{margin-top:12px;border-radius:14px;padding:12px 14px;background:var(--lilac-bg);border:1px solid rgba(255,255,255,.35);display:grid;gap:8px;text-align:left;font-size:13.5px}
.banner .pbtn{height:38px}
.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.acts{margin-top:18px}
.acts h5{margin:0 0 6px;font:600 10px var(--mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.act{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;align-items:center;text-align:left}
.act small{display:block;color:var(--ink-3);font-size:12px}
.act .amt{font-family:var(--mono);font-size:13px;white-space:nowrap}
.act.memo{cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;color:inherit}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.06);border-radius:12px;padding:3px;margin-bottom:14px}
.tabs button{border:0;background:none;padding:9px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.tabs button.on{background:rgba(255,255,255,.12);color:#fff}
.qr{width:170px;height:170px;margin:4px auto 12px;border-radius:14px;background:#f2f2f2;padding:10px;display:grid;grid-template-columns:repeat(21,1fr)}
.qr i{background:#0a0a0d} .qr i.o{background:transparent}
.addrbox{font:11px var(--mono);word-break:break-all;background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px;text-align:left;color:var(--ink-2)}
.pfield{text-align:left;margin-bottom:12px}
.pfield label{display:block;font:600 10px var(--mono);letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;margin-bottom:6px}
.pfield .row{display:flex;gap:6px}
.pfield input,.pfield textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:13.5px;outline:none;resize:none}
.pfield input.mono{font:12px var(--mono)}
.pfield input:focus,.pfield textarea:focus{border-color:rgba(255,255,255,.5)}
.pill-btn{border:0;background:rgba(255,255,255,.1);border-radius:10px;padding:0 12px;font-size:12.5px;font-weight:550}
.atype{margin-top:6px;font-size:12px}
.atype.good{color:var(--mint)} .atype.meh{color:var(--lilac)} .atype.bad{color:var(--leak)}
.proving{display:grid;gap:14px;justify-items:center;text-align:center}
.bigcount{font:500 42px var(--mono);letter-spacing:-.03em}
.syncbar{width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.syncbar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--lilac));transition:width .2s linear}
.memo-card{background:rgba(255,255,255,.06);border-radius:16px;padding:16px;text-align:left}
.memo-card .m{font-size:18px;margin-top:8px}
.back{background:none;border:0;color:var(--ink-2);font-size:14px;padding:0;text-align:left;margin-bottom:6px}
.phone-toast{position:absolute;left:16px;right:16px;bottom:18px;background:#fff;color:#000;border-radius:12px;padding:12px 14px;font-size:13px;font-weight:500;z-index:6;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:up .25s ease}
@keyframes up{from{transform:translateY(12px);opacity:0}}
.simnote{font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}

/* ============================== debrief + proof ============================== */
.debrief{padding-bottom:30px;position:relative;z-index:2}
.stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:0 0 14px}
.stat{padding:18px;background:rgba(10,10,12,.8)}
.stat .v{font:500 28px var(--mono);letter-spacing:-.03em;margin-top:6px}
.stat .v.good{color:var(--mint)} .stat .v.bad{color:var(--leak)}
.cols{display:grid;gap:14px}
@media(min-width:860px){.cols{grid-template-columns:1fr 1fr}}
.list{padding:20px}
.list h3{margin:0 0 10px;font-size:16.5px;font-weight:550}
.list ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:14px}
.list li{margin:6px 0}
.list li b{color:#fff;font-weight:550}
.debrief .cta-row{justify-content:center;margin-top:24px}
.proof{padding-bottom:40px;position:relative;z-index:2;text-align:center}
.proof canvas{width:100%;max-width:900px;height:auto;border-radius:16px;border:1px solid var(--line-2);display:block;margin:18px auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.proof .field{max-width:420px;margin:0 auto}
.proof .cta-row{justify-content:center}

/* ============================== misc ============================== */
.modal{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;cursor:default}
.modal-in{width:min(760px,100%);max-height:90vh;overflow:auto;background:rgba(14,14,16,.96);border:1px solid var(--line-2);border-radius:18px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-in .wh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.boot{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.96);display:grid;place-items:center;transition:opacity .5s}
.boot.off{opacity:0}
.boot-in{font:500 clamp(13px,1.8vw,17px)/2 var(--mono);color:var(--ink-2);padding:24px}
.boot .bl{opacity:0;animation:bootline .3s ease forwards}
.boot .bl b{color:#fff;font-weight:600}
.boot .bl.red{color:var(--leak);letter-spacing:.12em}
@keyframes bootline{to{opacity:1}}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#fff;color:#000;padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:70;max-width:calc(100% - 32px)}
#toast.on{opacity:1;transform:translateX(-50%)}
.mexp{display:none}
@media(max-width:1099px){
  .mexp{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:25;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(14,14,16,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .mexp .eye{width:18px;height:18px}
  .mexp .mtxt{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mexp b{font:600 14px var(--mono)}
  .train{padding-bottom:80px}
}

/* ============================== landing: scrolling sections ============================== */
.lp-body{position:relative;z-index:2}
.lp-sec{padding:120px 0 0}
@media(max-width:700px){.lp-sec{padding-top:84px}}
.lp-head{text-align:center;max-width:740px;margin:0 auto 40px}
.lp-head h2{font-size:clamp(30px,3.8vw,48px);font-weight:545;font-variation-settings:'opsz' 32;letter-spacing:-.022em;line-height:1.06;margin:16px 0 12px}
.lp-head p{margin:0;color:rgba(255,255,255,.55);font-size:16.5px;line-height:1.6;font-variation-settings:'opsz' 20}
.lp-live{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto}
@media(max-width:700px){.lp-live{grid-template-columns:1fr}}
.lp-live .tile{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:20px 22px;display:grid;gap:4px;text-align:left}
.lp-live .lab,.feat .lab{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lp-live b{font:500 52px/1.05 var(--mono);letter-spacing:-.04em}
.lp-live .dim{font-size:13px}
.lp-note{text-align:center;color:var(--ink-3);font-size:13px;margin:14px 0 0}
.lp-compare{display:grid;gap:14px;max-width:900px;margin:28px auto 0}
@media(min-width:760px){.lp-compare{grid-template-columns:1fr 1fr}}
.cmp{border:1px solid var(--line-2);border-radius:16px;background:rgba(10,10,12,.8);overflow:hidden}
.cmp-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmp-h .link{font-size:12px;text-decoration:none;color:var(--ink-3)}
.cmp-b{padding:10px 16px 14px;display:grid;gap:2px;min-height:170px}
.cmp-row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.cmp-row:last-child{border-bottom:0}
.cmp-row span{color:var(--ink-3);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cmp-row b{font:500 13px var(--mono)}
.xbar{display:block;height:13px;border-radius:4px;background:repeating-linear-gradient(90deg,hsl(170 20% 64% / .22) 0 8px,hsl(170 20% 64% / .06) 8px 16px)}
.steps6{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.steps6{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.steps6{grid-template-columns:repeat(3,1fr)}}
.s6{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:20px 22px;transition:border-color .2s}
.s6:hover{border-color:rgba(255,255,255,.25)}
.s6-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.s6-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,hsl(170 20% 64% / .16),rgba(255,255,255,.16));border:1px solid rgba(255,255,255,.12)}
.s6-ic svg{width:21px;height:21px}
.s6 h3{margin:0 0 6px;font-size:18px;font-weight:545;letter-spacing:-.012em}
.s6 p{margin:0;color:var(--ink-2);font-size:14px}
.lp-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px;font-size:13px}
.feat{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.feat{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.feat{grid-template-columns:repeat(4,1fr)}}
.ft{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:20px;display:grid;gap:6px;align-content:start}
.ft b{font-size:19px;font-weight:545;letter-spacing:-.01em}
.ft p{margin:4px 0 0;color:var(--ink-2);font-size:13.5px}
.faq{max-width:780px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 4px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font:400 20px/1 var(--sans);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:10px 0 0;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:680px}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}
}


/* ============================== Mindloop-style language ============================== */
body{font-family:var(--sans);font-variation-settings:normal}
em,.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
::selection{background:#fff;color:#000}
a:focus-visible,button:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px}

/* liquid glass */
.liquid-glass,.btn:not(.primary):not(.solid):not(.follow),.glass-ic,.nav-sheet,.hero-form,.kicker{
  background:rgba(255,255,255,.01);background-blend-mode:luminosity;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.1);position:relative;overflow:hidden}
.liquid-glass::before,.btn:not(.primary):not(.solid):not(.follow)::before,.glass-ic::before,.nav-sheet::before,.hero-form::before,.kicker::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 80%,rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* buttons */
.btn{height:44px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:-.1px;box-shadow:none;transition:transform .18s ease,background-color .18s ease,opacity .18s}
.btn:not(.primary):not(.solid):not(.follow){box-shadow:inset 0 1px 1px rgba(255,255,255,.1);color:#fff}
.btn:not(.primary):not(.solid):not(.follow):hover{background:rgba(255,255,255,.06)}
.btn.primary,.btn.solid{background:#fff;color:#000}
.btn.primary:hover,.btn.solid:hover{background:#fff;transform:scale(1.03)}
.btn.primary:active,.btn.solid:active{transform:scale(.98)}
.btn.big{height:50px;padding:0 30px;font-size:14.5px}
.btn.mini{height:32px;padding:0 14px;font-size:12.5px}
.btn.lg{border-radius:10px}
.btn.follow{border-radius:999px}

/* kicker / label */
.kicker{height:28px;padding:0 12px;border-radius:999px;font-size:12px;color:hsl(var(--muted-foreground));gap:8px;background:rgba(255,255,255,.01)}
.kicker .chip{display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:999px;background:#fff;color:#000;font-size:10.5px;font-weight:600;width:auto}
.label{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:hsl(var(--muted-foreground))}

/* ============================== navbar (fixed, transparent) ============================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;padding:16px max(16px, calc(var(--gx) / 1)) ;transition:background-color .3s,backdrop-filter .3s}
@media(min-width:760px){.nav{padding:16px max(16px, calc(var(--gx) - 8px))}}
.nav.scrolled{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:16px;letter-spacing:-.2px;white-space:nowrap;background:none;border:0;padding:0;cursor:pointer}
.rings{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.6);display:grid;place-items:center;flex:none}
.rings i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:block}
.rings.lg{width:40px;height:40px}.rings.lg i{width:20px;height:20px}
.nav-links{display:flex;align-items:center;gap:12px;font-size:14px}
.nav-links a{color:hsl(var(--muted-foreground));text-decoration:none;transition:color .2s;cursor:pointer;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:#fff}
.nav-links .sep{color:hsl(var(--muted-foreground));opacity:.6;font-size:10px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.glass-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;flex:none;text-decoration:none}
.glass-ic svg{width:17px;height:17px}
.glass-ic:hover{background:rgba(255,255,255,.06)}
.nav .menu-btn{display:none}
.nav-sheet{display:none;position:absolute;top:calc(100% + 4px);right:max(16px, calc(var(--gx) - 8px));min-width:220px;padding:10px;border-radius:16px;background:rgba(10,10,10,.85)}
.nav[data-open="true"] .nav-sheet{display:grid;gap:2px}
.nav-sheet a{padding:10px 12px;border-radius:10px;color:hsl(var(--muted-foreground));text-decoration:none;font-size:14.5px;cursor:pointer}
.nav-sheet a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-sheet .btn{margin-top:6px;width:100%}
.clock{font:500 11.5px var(--mono);color:hsl(var(--muted-foreground));display:none;gap:7px;align-items:center;white-space:nowrap}
.clock.on{display:flex}
.clock b{color:#fff;font-weight:600}
@media(max-width:980px){.nav-links{display:none}.nav .menu-btn{display:grid}.clock.on{display:none}}
@media(max-width:420px){.nav .hide-sm{display:none}}

/* ============================== landing ============================== */
.lp{overflow-x:clip}
.hero-sec{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center}
.hero-sec video,.cta-sec video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-sec video{object-position:center 30%}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:256px;background:linear-gradient(to top,#000,transparent);z-index:1}
.hero-in{position:relative;z-index:10;text-align:center;padding:112px var(--gx) 0;display:flex;flex-direction:column;align-items:center}
@media(min-width:760px){.hero-in{padding-top:128px}}
.avatars{display:flex;align-items:center;gap:12px;font-size:14px;color:hsl(var(--muted-foreground));margin-bottom:28px}
.avatars .stack{display:flex}
.avatars .stack span{width:32px;height:32px;border-radius:50%;border:2px solid #000;display:grid;place-items:center;margin-left:-8px;background:#151515;color:#fff}
.avatars .stack span:first-child{margin-left:0}
.avatars .stack svg{width:15px;height:15px}
.avatars b{color:#fff;font-weight:500}
.hero-in h1{margin:0;font-size:48px;line-height:1.02;font-weight:500;letter-spacing:-2px}
@media(min-width:768px){.hero-in h1{font-size:72px}}
@media(min-width:1024px){.hero-in h1{font-size:96px}}
.hero-in h1 em{font-weight:400;letter-spacing:-1px}
.hero-in .sub{margin:22px 0 0;max-width:620px;font-size:18px;line-height:1.6;color:hsl(var(--hero-subtitle))}
.hero-form{margin-top:34px;width:100%;max-width:512px;border-radius:999px;padding:8px;display:flex;gap:8px}
.hero-form input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;padding:0 16px;font:14px var(--mono)}
.hero-form input::placeholder{color:hsl(var(--muted-foreground));font-family:var(--sans)}
.hero-form .btn{height:46px;padding:0 28px;font-size:13px;letter-spacing:.6px;font-weight:600;text-transform:uppercase}
.hero-note{margin-top:14px;font-size:13px;color:hsl(var(--muted-foreground))}
.hero-note button{background:none;border:0;padding:0;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35);cursor:pointer;font-size:13px}

.big-h{font-size:48px;line-height:1.02;font-weight:500;letter-spacing:-2px;margin:0}
@media(min-width:768px){.big-h{font-size:72px}}
@media(min-width:1024px){.big-h{font-size:96px}}
.mid-h{font-size:36px;line-height:1.06;font-weight:500;letter-spacing:-1.2px;margin:14px 0 0}
@media(min-width:768px){.mid-h{font-size:60px}}
.sec-sub{color:hsl(var(--muted-foreground));font-size:18px;line-height:1.6;max-width:672px;margin:22px auto 0}
.records{padding-top:208px;padding-bottom:36px;text-align:center}
@media(max-width:767px){.records{padding-top:150px}}
.rec-grid{display:grid;gap:48px;margin:96px 0 80px}
@media(min-width:768px){.rec-grid{grid-template-columns:repeat(3,1fr);gap:32px}}
.rec-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.rec-card .ic{width:200px;height:200px;margin-bottom:22px}
.rec-card h3{margin:0 0 6px;font-size:16px;font-weight:600}
.rec-card p{margin:0;color:hsl(var(--muted-foreground));font-size:14px;max-width:300px;line-height:1.6}
.rec-card .n{font:500 34px var(--mono);letter-spacing:-1px;margin-bottom:6px}
.tagline{color:hsl(var(--muted-foreground));font-size:14px;text-align:center;margin:0}
.mission-sec{padding:0 0 128px;text-align:center}
@media(min-width:768px){.mission-sec{padding-bottom:176px}}
.mission-vis{width:min(800px,100%);aspect-ratio:1;margin:0 auto;position:relative;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.mission-vis svg{width:100%;height:100%;display:block}
.mission-vis image{transform-box:view-box;transform-origin:770px 735px;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12)}}
.wr{font-weight:500;margin:0 auto;max-width:1100px}
.wr.p1{font-size:24px;letter-spacing:-1px;line-height:1.25}
.wr.p2{font-size:20px;margin-top:40px;line-height:1.35;letter-spacing:-.5px}
@media(min-width:768px){.wr.p1{font-size:36px}.wr.p2{font-size:24px}}
@media(min-width:1024px){.wr.p1{font-size:48px}.wr.p2{font-size:30px}}
.wr .w{color:hsl(var(--hero-subtitle));opacity:.15;transition:opacity .15s linear}
.wr .w.hl{color:#fff}
.sec-b{border-top:1px solid hsl(var(--border) / .3);padding:128px 0}
@media(min-width:768px){.sec-b{padding:176px 0}}
.sec-b .head{text-align:center;margin-bottom:56px}
.sol-media{border-radius:16px;overflow:hidden;aspect-ratio:3/1;background:#050505;margin-bottom:56px}
@media(max-width:767px){.sol-media{aspect-ratio:2/1}}
.sol-media svg{width:100%;height:100%;display:block}
.feat4{display:grid;gap:32px}
@media(min-width:768px){.feat4{grid-template-columns:repeat(4,1fr)}}
.feat4 h3{margin:0 0 8px;font-size:16px;font-weight:600}
.feat4 p{margin:0;color:hsl(var(--muted-foreground));font-size:14px;line-height:1.6}
.feat4 .live{display:inline-block;margin-top:10px;font:500 12px var(--mono);color:#fff;border:0;padding:0;letter-spacing:0}
.cta-sec{position:relative;overflow:hidden;border-top:1px solid hsl(var(--border) / .3);padding:128px 0;text-align:center}
@media(min-width:768px){.cta-sec{padding:176px 0}}
.cta-sec .ov{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1}
.cta-sec .cta-in{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center}
.cta-sec h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:48px;line-height:1.05;margin:26px 0 0}
@media(min-width:768px){.cta-sec h2{font-size:72px}}
.cta-sec p{color:hsl(var(--muted-foreground));font-size:18px;margin:18px 0 34px;max-width:560px}
.cta-sec .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta-sec .btn{border-radius:10px;height:52px;padding:0 32px}
.site-foot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;padding:48px var(--gx);color:hsl(var(--muted-foreground));font-size:14px}
.site-foot nav{display:flex;gap:20px}
.site-foot a{color:hsl(var(--muted-foreground));text-decoration:none;cursor:pointer}
.site-foot a:hover{color:#fff}
.lp .steps6,.lp .paths,.lp .faq{margin-top:8px}
.lp .s6,.lp .ft{background:hsl(var(--card-h))}

/* ============================== inner page header ============================== */
.phead{padding:128px 0 0;text-align:center;position:relative;z-index:2}
.phead.compact{padding-top:104px}
.phead h1{margin:14px auto 0;max-width:1000px;font-size:40px;line-height:1.04;font-weight:500;letter-spacing:-1.6px}
@media(min-width:768px){.phead h1{font-size:60px}}
@media(min-width:1024px){.phead h1{font-size:72px;letter-spacing:-2px}}
.phead.compact h1{font-size:34px;letter-spacing:-1.2px}
@media(min-width:768px){.phead.compact h1{font-size:44px}}
.phead .sub{color:hsl(var(--muted-foreground));font-size:17px;line-height:1.6;max-width:640px;margin:18px auto 0}
.phead .hint{max-width:640px;margin:22px auto 0;text-align:left}
.phead .cta-row{justify-content:center;margin-top:26px}
.pmedia{border-radius:16px;overflow:hidden;aspect-ratio:3/1;margin:48px 0 0;background:#050505}
@media(max-width:767px){.pmedia{aspect-ratio:2/1}}
.pmedia svg{width:100%;height:100%;display:block}
.page-body{padding-top:40px}
.phead.compact + .page-body{padding-top:28px}

/* panels on inner pages: card colour + subtle border, monochrome */
.card,.rstep,.train .mission,.ev,.world,.watcher,.stat,.lp-live .tile,.cmp,.s6,.ft,.feed,.path{background:hsl(var(--card-h));border-color:hsl(var(--border) / .5)}
.rstep{-webkit-backdrop-filter:none;backdrop-filter:none}
.rstep.open{border-color:hsl(var(--border))}
.rstep.open .rn{background:#fff;color:#000}
.path .pic::after{background:linear-gradient(to bottom,rgba(0,0,0,0) 45%,hsl(var(--card-h)) 100%)}
.wtop{background:none}
.eye{border-color:rgba(255,255,255,.6)}
.eye::after{background:#fff;box-shadow:none;width:6px;height:6px}
.rec{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6)}
.live{color:#fff;border-color:rgba(255,255,255,.4)}
.parbar i{background:#fff}
.meter i{background:linear-gradient(90deg,hsl(0 0% 60%),var(--leak))}
.plogo{background:#fff;color:#000}
.syncbar i{background:#fff}
.hint.okh{border-color:hsl(var(--accent) / .5)}
.how .n{color:hsl(var(--muted-foreground))}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translate3d(0,20px,0);transition:opacity .6s ease-out,transform .6s ease-out}
  .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){ .mission-vis image{animation:none} .wr .w{opacity:1} }

.spin-slow{transform-box:view-box;transform-origin:100px 100px;animation:orbit 40s linear infinite}
.phead + main,.phead + .boot + main{padding-top:44px}
.phead.compact + main{padding-top:26px}
.lp-note{margin-top:0}
.feed{border:1px solid hsl(var(--border) / .5)}

/* animated overlays drawn over the artwork (restored) */
.fx-shield .ring{fill:none;stroke:#fff;transform-box:fill-box;transform-origin:center;animation:shieldp 3.6s ease-out infinite;opacity:0}
.fx-shield .ring:nth-of-type(2){animation-delay:1.2s}.fx-shield .ring:nth-of-type(3){animation-delay:2.4s}
@keyframes shieldp{0%{transform:scale(.6);opacity:0}25%{opacity:.6}100%{transform:scale(1.5);opacity:0}}
.fx-scan .beam{transform-box:view-box;animation:sweep 4.5s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
.fx-scan .ping{transform-box:fill-box;transform-origin:center;animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.fx-orbit .o{transform-box:view-box;animation:orbit 9s linear infinite}
.fx-orbit .o.b{animation-duration:14s;animation-direction:reverse}
@keyframes orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.fx-shield .ring{opacity:.3}}
.nav .launch{height:40px;padding:0 20px;font-size:13.5px}
.app-tag{margin-left:8px;height:20px;padding:0 8px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:inline-grid;place-items:center;color:#000;background:#fff}
@media(max-width:420px){.nav .launch{display:none}}
.path .body{text-align:left}
.nav:not(.app) .nav-links{margin-left:auto}
.nav:not(.app) .nav-right{margin-left:0;gap:0}
@media(max-width:980px){.nav:not(.app) .nav-right{margin-left:auto}}

/* hero still image with a slow camera drift */
.hero-sec .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0;transform-origin:50% 66%;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1%)}}
@media (prefers-reduced-motion: reduce){.hero-sec .hero-img{animation:none}}
@media(max-width:640px){
  .hero-sec .hero-img{top:22%;height:100%}
  .avatars{flex-direction:column;gap:8px;text-align:center}
}

/* mission centrepiece: the split coin, floating */
.mission-vis{-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
.mission-vis img{width:100%;height:100%;object-fit:cover;display:block;animation:bob 7s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-1.2%) rotate(-.6deg)}to{transform:translateY(1.2%) rotate(.6deg)}}
@media (prefers-reduced-motion: reduce){.mission-vis img{animation:none}}

/* solution band: real image, soft top/bottom fade hides the beam's hard edge */
.sol-media img{width:100%;height:100%;object-fit:cover;object-position:center 50%;display:block;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 80%,transparent 100%)}
.sol-media{background:#000}
.sol-media img{filter:contrast(1.18) brightness(.9);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 36%,#000 76%,transparent 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 36%,#000 76%,transparent 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}
@media(max-width:767px){.sol-media{aspect-ratio:2.6/1}.sol-media img{transform:scale(1.35)}}

.path .pic{background:#000}
.path .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.path:hover .pic img{transform:scale(1.04)}
.path .tagline{text-align:left;margin:0}

.pmedia{background:#000}
.pmedia img{width:100%;height:100%;object-fit:cover;object-position:center 50%;display:block;filter:contrast(1.12) brightness(.95);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 82%,transparent 100%),linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 82%,transparent 100%),linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);mask-composite:intersect}
@media(max-width:767px){.pmedia img{transform:scale(1.2)}}
@media(max-width:767px){.pmedia{aspect-ratio:2.5/1}.pmedia img{transform:none}}

/* closing section: frosted veil, drifting slowly */
.cta-sec .cta-img{position:absolute;inset:-4% -6%;width:112%;height:108%;object-fit:cover;object-position:center 50%;z-index:0;animation:veil 30s ease-in-out infinite alternate}
@keyframes veil{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
@media (prefers-reduced-motion: reduce){.cta-sec .cta-img{animation:none}}
.cta-sec .row{width:100%}
.rings{position:relative}
.rings i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* record trio: rendered cubes inside a slowly turning ring */
.rec-vis{position:relative;width:240px;height:240px;margin-bottom:22px}
.rec-vis img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:cover;border-radius:50%;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.rec-card:hover .rec-vis img{transform:scale(1.05)}
.rec-ring{position:absolute;inset:0;width:100%;height:100%}

/* Veir logo (black background dropped with a screen blend) */
.logo-img{height:36px;width:auto;display:block;mix-blend-mode:screen}
@media(max-width:640px){.logo-img{height:30px}}
.foot-brand{display:inline-flex;align-items:center;gap:12px}
.foot-brand img{height:30px;width:auto;mix-blend-mode:screen;display:block}
.cta-mark{width:64px;height:64px;mix-blend-mode:screen}

/* live status pills (faucet, chain) */
.live-pill{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:7px 14px 7px 12px;border-radius:999px;background:hsl(var(--accent) / .16);box-shadow:inset 0 0 0 1px hsl(170 20% 64% / .38);color:var(--mint);font:500 12.5px var(--mono);letter-spacing:.01em}
.live-pill .pdot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none;animation:pdot 1.8s ease-out infinite}
@keyframes pdot{0%{box-shadow:0 0 0 0 hsl(170 20% 64% / .7)}70%{box-shadow:0 0 0 8px hsl(170 20% 64% / 0)}100%{box-shadow:0 0 0 0 hsl(170 20% 64% / 0)}}
.live-pill.wait{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);color:hsl(var(--muted-foreground))}
.live-pill.wait .pdot{background:hsl(var(--muted-foreground));animation:none;opacity:.6}
.live-pill.off{background:hsl(0 26% 70% / .12);box-shadow:inset 0 0 0 1px hsl(0 26% 70% / .4);color:var(--leak)}
.live-pill.off .pdot{background:var(--leak);animation:none}
@media (prefers-reduced-motion: reduce){.live-pill .pdot{animation:none}}
.live-pill{color:hsl(168 38% 74%);background:hsl(168 30% 45% / .18);box-shadow:inset 0 0 0 1px hsl(168 38% 70% / .45)}
.live-pill .pdot{background:hsl(168 45% 70%)}
/* FAQ groups */
.faq{border-top:0}
.faq-group{margin-top:34px}
.faq-group:first-child{margin-top:0}
.faq-h{margin:0 0 6px;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:hsl(var(--muted-foreground));padding-bottom:12px;border-bottom:1px solid var(--line)}
.faq details[open] summary{color:#fff}
.faq summary{color:rgba(255,255,255,.88);transition:color .15s}
.faq summary:hover{color:#fff}
/* app nav: tabs sit on the right */
.nav.app .nav-links{margin-left:auto}
.nav.app .nav-right{margin-left:0}
@media(max-width:980px){.nav.app .nav-right{margin-left:auto}}
/* app footer with the sound toggle */
.app-foot{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin-top:72px;padding-top:28px;padding-bottom:40px;border-top:1px solid var(--line);color:hsl(var(--muted-foreground));font-size:13px}
.app-foot .foot-brand span{max-width:520px;line-height:1.5}
.app-foot-r{display:flex;align-items:center;gap:18px}
.app-foot-r a{color:hsl(var(--muted-foreground));text-decoration:none;cursor:pointer}
.app-foot-r a:hover{color:#fff}
.snd-toggle{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;font-size:13px;cursor:pointer}
.snd-toggle:hover{background:rgba(255,255,255,.08)}
.snd-toggle svg{width:15px;height:15px}
.snd-toggle[aria-pressed="false"]{color:hsl(var(--muted-foreground))}
@media(max-width:1099px){.train + .app-foot{padding-bottom:96px}}

/* ============================================================
   Professional data layer: Inter for words, mono for raw data only
   ============================================================ */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:hsl(var(--muted-foreground));font-weight:500;font-family:var(--sans)}

/* section header inside the app (matches the landing) */
.sec-head{text-align:center;margin:72px auto 28px;max-width:720px}
.sec-head .mid-h{font-size:34px;margin-top:12px}
@media(min-width:768px){.sec-head .mid-h{font-size:46px}}
.sec-head .sec-sub{font-size:16px;margin-top:14px}

/* badges: calm sentence-case pills */
.badge{font:500 11.5px var(--sans);letter-spacing:0;text-transform:none;padding:4px 10px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.badge.read{color:hsl(0 30% 76%);background:hsl(0 26% 70% / .12);box-shadow:inset 0 0 0 1px hsl(0 26% 70% / .28)}
.badge.part{color:hsl(0 0% 82%);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.badge.blank{color:hsl(168 38% 74%);background:hsl(168 30% 45% / .16);box-shadow:inset 0 0 0 1px hsl(168 38% 70% / .35)}

/* ---------- live feed ---------- */
.feed{border-radius:18px;border:1px solid hsl(var(--border) / .45);background:linear-gradient(180deg,hsl(0 0% 6%),hsl(0 0% 4%));overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.feed-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid hsl(var(--border) / .4)}
.feed-title{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.feed-title .live-pill{margin:0}
.feed-range{font-size:13.5px;color:hsl(var(--muted-foreground))}
.feed-stats{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--sans)}
.stat-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;font-size:12.5px;color:hsl(var(--muted-foreground));background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.stat-pill b{font:600 14px var(--mono);font-variant-numeric:tabular-nums;color:#fff}
.stat-pill.read b{color:hsl(0 30% 76%)} .stat-pill.blank b{color:hsl(168 38% 74%)}
.feed-cols,.frow{display:grid;grid-template-columns:200px minmax(0,1fr) 140px 150px;gap:18px;align-items:center;padding:0 22px}
.feed-cols{height:36px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:hsl(0 0% 42%);border-bottom:1px solid hsl(var(--border) / .35);background:rgba(255,255,255,.015)}
.feed-cols .num,.fcell.num{text-align:right;justify-items:end}
.frow{width:100%;min-height:64px;padding-top:12px;padding-bottom:12px;background:none;border:0;border-bottom:1px solid hsl(var(--border) / .3);color:inherit;text-align:left;cursor:pointer;position:relative;transition:background .15s}
.frow:last-child{border-bottom:0}
.frow:hover{background:rgba(255,255,255,.035)}
.frow::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:transparent;transition:background .15s}
.frow.read:hover::before{background:hsl(0 26% 70% / .7)}
.frow.blank:hover::before{background:hsl(168 38% 70% / .8)}
.frow.part:hover::before{background:rgba(255,255,255,.5)}
.fcell{display:grid;gap:3px;min-width:0;font-size:14px;color:#fff}
.fcell small{font-size:12px;color:hsl(0 0% 50%);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcell.id{grid-template-columns:8px 1fr;column-gap:12px;align-items:center}
.fcell.id .mono{font-size:13px;color:#fff}
.fcell.id small{grid-column:2}
.kdot{width:8px;height:8px;border-radius:50%;grid-row:1/3;align-self:center}
.frow.read .kdot{background:hsl(0 30% 72%)} .frow.part .kdot{background:hsl(0 0% 70%)} .frow.blank .kdot{background:hsl(168 40% 68%);box-shadow:0 0 10px hsl(168 40% 68% / .6)}
.fcell.what>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcell.num .mono{font-size:14.5px;font-weight:500}
.hidden-val{font-size:13px;color:hsl(168 38% 74% / .7);font-style:italic;font-family:var(--serif);font-size:15px}
.redact{display:flex;gap:6px;height:10px;align-items:center}
.redact i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,hsl(168 30% 55% / .35),hsl(168 30% 55% / .12));flex:none}
.redact i:nth-child(1){width:76px}.redact i:nth-child(2){width:96px}.redact i:nth-child(3){width:48px}.redact i:nth-child(4){width:60px}
.feed-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:13px 22px;font-size:12.5px;color:hsl(0 0% 50%);border-top:1px solid hsl(var(--border) / .35);background:rgba(255,255,255,.015)}
.key{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 6px 0 14px;vertical-align:0}
.key.k-read{background:hsl(0 30% 72%)} .key.k-part{background:hsl(0 0% 70%)} .key.k-blank{background:hsl(168 40% 68%)}
@media(max-width:900px){
  .feed-cols{display:none}
  .frow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id vis" "what num";row-gap:10px}
  .fcell.id{grid-area:id}.fcell.vis{grid-area:vis;justify-self:end}.fcell.what{grid-area:what}.fcell.num{grid-area:num}
  .redact i:nth-child(3),.redact i:nth-child(4){display:none}
}

/* ---------- labels across the app: Inter, not mono ---------- */
.iolab,.evh,.exposure .lab,.statsrow .lab,.trail .lab,.log .lab,.stat .lab,.pgrid .k,.drow .k,.mission .step,.result .rgrid .k,.addrline .lab,.bal .lab,.acts h5,.pfield label,.wtop .sub,.tagsim,.simnote,.rec-card .tagline,.path .tagline{font-family:var(--sans);font-weight:500;letter-spacing:.09em;font-size:11px;text-transform:uppercase;color:hsl(0 0% 48%)}
.drow .k{font-size:11px;padding-top:3px}
.txmeta{font-size:12.5px;color:hsl(var(--muted-foreground))}
.txmeta .mono{font-size:12px;color:hsl(0 0% 72%)}
.txlink{margin-left:auto;text-decoration:none;font-size:12.5px;color:hsl(var(--muted-foreground))}
.txlink:hover{color:#fff}
.txlink .mono{font-size:12px}
.txh{padding:13px 16px;gap:10px 16px}
.txcard{border-radius:16px;background:linear-gradient(180deg,hsl(0 0% 5%),hsl(0 0% 3%));border-color:hsl(var(--border) / .45)}
.io{background:rgba(255,255,255,.03);border-color:hsl(var(--border) / .35);border-radius:12px;padding:10px 12px}
.io .ad{color:hsl(0 30% 76%);font-size:12.5px}
.io .val{font-size:13.5px}
.io .val::after{font-family:var(--sans);font-size:11px;letter-spacing:.04em;margin-left:2px}
.io .still{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none}
.io.more{font-family:var(--sans);font-size:12.5px}
.lab2{font-family:var(--sans);font-size:12.5px}
.io-note{font-size:13px}
.pgrid .v{font-size:14.5px}
.modal-t{display:block;font-size:17px;font-weight:550;margin-top:4px}
.modal-in{border-radius:20px;padding:20px 22px}
.modal-in .wh{align-items:flex-start;margin-bottom:16px}

/* ---------- step cards ---------- */
.rstep{border-radius:16px;background:linear-gradient(180deg,hsl(0 0% 5.5%),hsl(0 0% 4%));border-color:hsl(var(--border) / .4);transition:border-color .2s,transform .2s}
.rstep:not(.open):hover{border-color:hsl(var(--border) / .8)}
.rstep.open{box-shadow:0 30px 80px rgba(0,0,0,.45)}
.rstep .rh{padding:18px 22px}
.rstep .rn{width:32px;height:32px;font-family:var(--sans);font-size:13px;font-weight:600}
.rstep .rt{font-size:16.5px}
.rstep .rt small{font-size:13px;margin-top:3px}
.rstep .rclock{font-size:13px;color:hsl(0 0% 45%)}
.rstep.open .rclock{color:#fff}
.rbody{padding:4px 22px 24px 76px;gap:14px}
@media(max-width:640px){.rbody{padding:0 18px 20px}}
.rbody p,.rbody li{font-size:15px;line-height:1.6}
.choice{border-radius:14px;padding:16px}
.choice>b{font-size:15px}
.live-check{border-radius:14px;padding:16px 18px}
.live-check>b{font-size:15px}
.result{border-radius:14px;background:linear-gradient(180deg,hsl(0 0% 4%),hsl(0 0% 2.5%))}
.result .rtop{padding:13px 16px;font-size:14.5px}
.result .rgrid{padding:14px 16px;gap:8px 14px;font-size:13px}
.result .rgrid>span:not(.k){color:#fff}
.addrline{border-radius:12px;padding:11px 13px;font-size:12.5px}
.hint{border-radius:12px;font-size:14px;line-height:1.55}

/* ---------- mission / watcher / case notes ---------- */
.mission,.ev,.watcher,.world{border-radius:16px;background:linear-gradient(180deg,hsl(0 0% 5.5%),hsl(0 0% 4%))}
.mission h2{font-size:21px}
.timer .t{font-size:32px}
.timer .par{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:hsl(0 0% 45%)}
.objs li{font-size:14.5px}
.wtop{padding:16px 20px}
.wtop h3{font-size:15px}
.exposure .pct{font-size:34px}
.statsrow .pct{font-size:22px}
.drow{font-size:13.5px;padding:10px 0}
.drow .v{font-size:12.5px}
.entry{grid-template-columns:44px 1fr;font-size:13.5px;line-height:1.5}
.entry .ts{font-size:11px}
.node{font-size:11.5px;border-radius:999px;padding:6px 11px}
.q{border-radius:14px;padding:16px}
.qp{font-size:15.5px}
.qopts button{border-radius:12px;padding:12px 14px;font-size:14px}
.ev .tx{border-radius:12px}

/* phone sim: keep its own compact labels */
.simnote{font-size:10px}
.fcell.vis{justify-items:start}
.fcell.vis .badge{width:max-content}
@media(max-width:900px){.fcell.vis{justify-items:end}}
.drow{grid-template-columns:132px 1fr}
/* new log entries fade up instead of a stepped clip reveal */
.entry.new .msg{animation:none;clip-path:none}
.entry.new{animation:entry-in .55s cubic-bezier(.22,1,.36,1) both}
@keyframes entry-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.tagsim{text-transform:none;letter-spacing:0;font-size:11px;padding:3px 8px;border-radius:999px}
.addrline{line-height:1.5}
/* themed confirm dialog */
.confirm-host{opacity:0;transition:opacity .18s ease}
.confirm-host.on{opacity:1}
.confirm-host.off{opacity:0}
.confirm{width:min(440px,100%);padding:24px 24px 20px;transform:translateY(8px) scale(.98);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.confirm-host.on .confirm{transform:none}
.confirm h3{margin:10px 0 8px;font-size:20px;font-weight:550;letter-spacing:-.01em}
.confirm p{margin:0;color:hsl(var(--muted-foreground));font-size:14.5px;line-height:1.55}
.confirm-row{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.btn.danger{background:hsl(0 30% 76%);color:#000}
.btn.danger:hover{background:hsl(0 30% 82%)}
/* hero note: readable over the bright sphere */
.hero-note{display:inline-block;text-align:center;margin-top:16px;padding:9px 16px;border-radius:999px;background:rgba(0,0,0,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(255,255,255,.82);font-size:13.5px}
.hero-note button{color:#fff;font-weight:500;font-size:13.5px;text-decoration-color:rgba(255,255,255,.55)}
.hero-note button:hover{text-decoration-color:#fff}
/* small screens: CTA buttons wrap and never exceed the viewport */
@media(max-width:640px){
  .cta-row{width:100%}
  .cta-row .btn,.cta-row .btn.big{white-space:normal;text-align:center;height:auto;min-height:48px;padding:12px 18px;line-height:1.3;max-width:100%}
  .cta-row .btn.big.primary{width:100%}
  .real .cta-row .dim{width:100%}
}
/* first-run tour */
.tour-host{align-items:center}
.tour{width:min(560px,100%);padding:0;overflow:hidden;border-radius:22px}
.tour-pic{height:200px;background:#000;position:relative}
.tour-pic img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
.tour-body{padding:6px 26px 24px}
.tour h3{margin:10px 0 10px;font-size:26px;font-weight:550;letter-spacing:-.015em;line-height:1.15}
.tour p{margin:0;color:hsl(var(--muted-foreground));font-size:15px;line-height:1.6}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;flex-wrap:wrap}
.tour-dots{display:flex;gap:6px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s,width .2s}
.tour-dots i.done{background:rgba(255,255,255,.45)}
.tour-dots i.on{background:#fff;width:18px;border-radius:3px}
.tour-btns{display:flex;gap:10px;margin-left:auto}
.nav.touring{z-index:60}
.nav.touring .nav-links a{color:hsl(0 0% 45%)}
.nav.touring .nav-links a[data-tour]{color:#fff;text-decoration:underline;text-underline-offset:8px;text-decoration-color:#fff;text-decoration-thickness:2px}
.link-btn{background:none;border:0;padding:0;color:hsl(var(--muted-foreground));font-size:13px;cursor:pointer}
.link-btn:hover{color:#fff}
@media(max-width:640px){.tour-pic{height:150px}.tour-body{padding:4px 18px 18px}.tour h3{font-size:22px}}
/* hero: actions + the path strip (replaces the address form) */
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.hero-path{margin-top:26px;display:inline-flex;flex-direction:column;align-items:center;gap:12px;padding:14px 22px 16px;border-radius:20px;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.hp-title{font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.hp-title em{font-size:15px;letter-spacing:0;text-transform:none;color:#fff}
.hp{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0}
.hp li{display:grid;justify-items:center;gap:2px;padding:0 18px;text-align:center}
.hp li b{font-size:14px;font-weight:550;color:#fff}
.hp li small{font-size:11.5px;color:hsl(var(--muted-foreground));white-space:nowrap}
.hp-n{font:500 10.5px var(--mono);letter-spacing:.14em;color:hsl(0 0% 55%)}
.hp .hp-line{padding:0;width:44px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.45),rgba(255,255,255,.08))}
@media(max-width:640px){
  .hero-cta .btn{width:100%}
  .hero-path{padding:12px 14px 14px;max-width:100%}
  .hp li{padding:0 8px}
  .hp li small{white-space:normal;font-size:11px;max-width:92px}
  .hp .hp-line{width:14px}
}
@media(max-width:640px){
  .hero-path{align-items:stretch;width:100%}
  .hp{flex-direction:column;align-items:stretch;gap:10px}
  .hp li{grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;justify-items:start;text-align:left;padding:0}
  .hp li .hp-n{grid-row:1/3;align-self:center}
  .hp li small{max-width:none;white-space:normal}
  .hp .hp-line{display:none}
}
/* inline icons replacing text glyphs and emoji */
.ic{width:1em;height:1em;vertical-align:-.15em;display:inline-block;stroke-width:1.8}
.ic-ext{width:.9em;height:.9em;opacity:.8}
.rstep .rn .ic{width:15px;height:15px;vertical-align:-3px;stroke-width:2.4}
.live-check>b .ic,.result .rtop b .ic{vertical-align:-.12em;margin-right:2px}
.pbtn .ic{width:1.05em;height:1.05em;margin-right:4px}