/* Darknode Web - base dark theme. Starter styles; expand in the build. */
:root{
  --bg:#070a12; --bg2:#0a0e1a; --card:#0e1424; --card2:#131c2f; --line:#1e2a44;
  --line-2:#2b3b5c; --txt:#e6eefc; --txt-2:#aebfdd; --mut:#6f88ab; --placeholder:#57678c;
  --acc:#00d4ff; --acc-2:#7c5cff; --ok:#2ee6a6; --bad:#ff5c6c; --warn:#f5b041; --radius:8px;
  --topbar-h:57px; /* real sticky-topbar height (11px pad + 34px .icon-btn + 11px + 1px border); sidebar offsets by this */
  --acc-soft:color-mix(in srgb,var(--acc) 15%,transparent);
  --acc-line:color-mix(in srgb,var(--acc) 40%,var(--line));
  --grad-acc:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 45%,var(--acc-2)));
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 26px -10px rgba(0,0,0,.6);
  --font-display:'Sora',ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  --bg:#eef1f7; --bg2:#ffffff; --card:#ffffff; --card2:#f2f5fb; --line:#dbe2ee;
  --line-2:#c6d1e4; --txt:#111826; --txt-2:#3d4a63; --mut:#5b6b86; --placeholder:#8493ac;
  --sh-1:0 1px 2px rgba(20,30,60,.08); --sh-2:0 10px 30px -12px rgba(20,30,60,.2);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#topbar{display:flex;align-items:center;justify-content:space-between;
  padding:11px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(12px)}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em;color:var(--txt);text-decoration:none;font-size:1.05rem}
.brand:hover{color:var(--acc)}
.brand-mark{width:24px;height:24px;border-radius:6px;box-shadow:0 0 0 1px var(--line),0 4px 14px -5px color-mix(in srgb,var(--acc) 70%,transparent)}
.banner{margin:10px 18px;padding:10px 14px;border:1px solid var(--warn);
  border-radius:var(--radius);background:rgba(245,158,11,.08);font-size:.85rem}
#view{padding:18px;max-width:1100px;margin:0 auto}
.loading,.muted{color:var(--mut)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.btn{background:var(--acc);color:#04121a;border:none;border-radius:6px;
  padding:.5rem .9rem;font-weight:700;cursor:pointer;font-family:inherit}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn.danger{background:var(--bad);color:#fff}
/* inline text-link rendered from a <button> (keeps semantics, drops button chrome) */
.linklike{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--acc);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--acc) 45%,transparent);transition:color .15s}
.linklike:hover{color:var(--acc-2);text-decoration-color:currentColor}
.linklike:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:3px}
/* row of download buttons in the CLI cards */
.dlcli-btns{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 4px}
.dlcli-btns .btn{display:inline-flex;align-items:center;text-decoration:none}
input,textarea{background:var(--card2);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;padding:.5rem .7rem;font-family:inherit;width:100%}
code,pre{font-family:ui-monospace,Menlo,Consolas,monospace}
/* ===== landing ===== */
body.landing #view{max-width:none;padding:0;margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.hero{padding:84px 0 66px;text-align:center;border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 520px at 80% -12%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 60%),
             radial-gradient(900px 520px at -6% -5%,rgba(0,212,255,.08),transparent 55%)}
.eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.24em;color:var(--acc);margin-bottom:14px}
.hero-h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.06;margin:0 auto 16px;max-width:16ch;font-weight:800;letter-spacing:-.02em}
.hero-sub{color:var(--mut);font-size:1.05rem;line-height:1.6;max-width:600px;margin:0 auto 26px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn.lg{padding:.72rem 1.4rem;font-size:.95rem;border-radius:10px}
.hero-note{color:var(--mut);font-size:.8rem;margin-top:18px}
.section{padding:64px 0}
.section.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-title{font-size:clamp(1.4rem,3vw,2rem);text-align:center;margin:0 0 36px;font-weight:800;letter-spacing:-.01em}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.feat-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}
.feat-card h3{margin:0 0 8px;font-size:1.02rem}
.feat-card p{margin:0;color:var(--mut);font-size:.86rem;line-height:1.55}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.step{display:flex;gap:14px;align-items:flex-start}
.step-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--acc);color:#04121a;font-weight:800;display:flex;align-items:center;justify-content:center}
.step h3{margin:0 0 4px;font-size:1rem}
.step p{margin:0;color:var(--mut);font-size:.85rem;line-height:1.5}
.cta-band{padding:56px 0;border-top:1px solid var(--line);
  background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 18%,var(--bg)),var(--bg))}
.cta-band-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-band h2{margin:0 0 4px;font-size:1.5rem}
.dlapp-sub{text-align:center;max-width:560px;margin:-24px auto 30px}
/* When the subtitle follows a section heading (not a page title), the -24px pull would overlap it. */
.dlcli-h + .dlapp-sub{margin-top:8px}
.ed-cmd{max-width:100%}
/* Web AI page: friendly "connect a model / get the app" panel that fills the empty chat area */
.ai-offline{margin:auto;max-width:560px;text-align:center;padding:22px 20px}
.ai-offline-h{font-size:1.05rem;font-weight:600;margin-bottom:10px}
.ai-offline-b{color:var(--mut);font-size:.86rem;line-height:1.6;text-align:left}
.ai-offline-b code{background:var(--card2,#101827);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:.8rem;color:var(--acc);word-break:break-all}
.ai-offline-cta{margin-top:16px}
.dlapp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:720px;margin:0 auto}
.dlapp-item{display:flex;flex-direction:column;gap:10px}
.dlapp-cmd{display:flex;flex-direction:column;gap:4px}
.dlapp-cmd-l{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dlapp-cmd code{display:block;background:var(--card2,#101827);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:var(--acc);word-break:break-all}
.dlapp-note{color:var(--mut);font-size:.74rem;margin:0;line-height:1.5}
.dlapp-note code{background:none;border:none;padding:0;color:var(--txt);font-size:.74rem}
/* Downloads — latest build per platform */
.dl-builds{display:flex;flex-direction:column;gap:16px}
.dl-bgroup{display:flex;flex-direction:column;gap:8px}
.dl-bh{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.dl-btnrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.dl-osbtn{display:flex;flex-direction:column;gap:3px;background:var(--card2,#101827);border:1px solid var(--line);border-radius:10px;padding:11px 13px;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.dl-osbtn:hover{border-color:var(--acc-line);transform:translateY(-2px);box-shadow:0 10px 24px -18px var(--acc)}
.dl-osbtn .dl-os{font-weight:700;color:var(--txt,#e8eefb);font-size:.9rem}
.dl-osbtn .dl-fmt{font-size:.72rem;color:var(--mut);font-variant-numeric:tabular-nums}
/* Darknode OS edition picker (netinstall / slim / full) */
.os-editions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.os-editions{grid-template-columns:1fr}}
.os-ed{display:flex;flex-direction:column;gap:7px;background:var(--card2,#101827);border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0}
.os-ed-full{border-color:var(--acc-line);box-shadow:inset 0 0 0 1px var(--acc-soft)}
.os-ed-h{display:flex;align-items:center;gap:8px}
.os-ed-h b{font-size:.95rem;letter-spacing:.02em;color:var(--txt,#e8eefb)}
.os-ed-sz{margin-left:auto;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--mut);font-variant-numeric:tabular-nums}
.os-ed-tag{font-size:.56rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);background:var(--acc);border-radius:999px;padding:2px 7px}
.os-ed-d{font-size:.76rem;line-height:1.5;margin:0;flex:1}
.os-ed .dlapp-cmd code{font-size:.68rem;padding:7px 8px;white-space:pre;overflow-x:auto;word-break:normal}
.dlapp-card{display:block;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 16px;text-decoration:none;color:var(--txt)}
.dlapp-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.dlapp-os{font-weight:800;font-size:1.05rem}
.dlapp-fmt{color:var(--mut);font-size:.78rem;margin-top:4px}
.site-foot{border-top:1px solid var(--line);padding:26px 0}
.foot-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-links{margin-left:auto;display:flex;gap:18px}
.foot-links a{color:var(--mut);text-decoration:none;font-size:.82rem;cursor:pointer}
.foot-links a:hover{color:var(--acc)}
.nav-link{color:var(--txt);cursor:pointer;font-size:.85rem;margin-right:14px;text-decoration:none}
.nav-link:hover{color:var(--acc)}
.auth-back{display:inline-block;margin-bottom:10px;color:var(--mut);cursor:pointer;font-size:.8rem;text-decoration:none}
.auth-back:hover{color:var(--acc)}
/* auth */
body:not(.landing):not(.app)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;opacity:.12;
  -webkit-mask:radial-gradient(600px 460px at 50% 2%,#000,transparent 72%);mask:radial-gradient(600px 460px at 50% 2%,#000,transparent 72%)}
.auth-card{max-width:412px;margin:7vh auto;box-shadow:var(--sh-2);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,var(--acc) 3%),var(--card))}
.auth-logo{margin-bottom:14px}
.auth-logo img{width:52px;height:52px;border-radius:13px;box-shadow:0 0 0 1px var(--line),0 10px 26px -6px color-mix(in srgb,var(--acc) 60%,transparent)}
.auth-card h1{margin:0 0 4px;letter-spacing:-.02em}
.auth-card .btn{width:100%;margin-top:10px}
.btn.google{background:#fff;color:#1a1a1a}
.btn.github{background:#24292e;color:#fff;border:1px solid #3a4048}
.or{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:.75rem;margin:14px 0}
.or span{flex:1;height:1px;background:var(--line)}
#pwform{display:flex;flex-direction:column;gap:10px}
.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.auth-links a{color:var(--acc);cursor:pointer;font-size:.8rem;text-decoration:none}
.auth-err{color:var(--bad);font-size:.82rem;margin-top:12px;min-height:1em}
.auth-ok{color:var(--ok);font-size:.82rem;margin-top:12px;min-height:1em}
.owner-badge{background:var(--acc);color:#04121a;font-size:.6rem;font-weight:800;padding:1px 6px;border-radius:4px;letter-spacing:.06em}
.admin-card{border:1px solid var(--acc);border-radius:var(--radius);padding:12px;margin:12px 0;background:rgba(0,212,255,.06)}
/* ===== tools catalog ===== */
.btn.sm{padding:.3rem .6rem;font-size:.75rem;border-radius:6px}
.tk-search{width:100%;margin-bottom:14px}
.tk-cat{margin-bottom:18px}
.tk-cat-h{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.tk-cat-n{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0 7px;font-size:.6rem;color:var(--mut)}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.tk-card{position:relative;text-align:left;display:flex;flex-direction:column;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 12px 13px;cursor:pointer;color:var(--txt);font-family:inherit}
.tk-card:hover{border-color:var(--acc);transform:translateY(-1px)}
.tk-card-name{font-weight:700;font-size:.86rem}
.tk-card-desc{color:var(--mut);font-size:.72rem;line-height:1.4}
.tk-badge{position:absolute;top:9px;right:9px;font-size:.52rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:4px}
.tk-card.browser .tk-badge{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.tk-card.local .tk-badge{background:color-mix(in srgb,var(--mut) 22%,transparent);color:var(--mut)}
.tk-modal{position:fixed;inset:0;z-index:50;background:rgba(4,8,15,.72);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px}
.tk-modal[hidden]{display:none}
.tk-modal-box{width:min(560px,96vw);max-height:82vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.tk-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800;position:sticky;top:0;background:var(--card)}
.tk-modal-body{padding:16px}
.tk-in{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;resize:vertical}
.tk-btns{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tk-out{white-space:pre-wrap;word-break:break-word;background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:10px;font-size:.78rem;color:var(--acc);min-height:2.4em;margin:0}
.tk-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;font-size:.8rem;color:var(--mut)}
.tk-f{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:.45rem .6rem;font-family:inherit;flex:1;min-width:0}
/* accordion rows */
.tk-item{border:1px solid var(--line);border-radius:9px;margin-bottom:7px;overflow:hidden;background:var(--card)}
.tk-head{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:none;color:var(--txt);padding:11px 13px;cursor:pointer;font-family:inherit;text-align:left}
.tk-head:hover{background:var(--card2)}
.tk-tri{flex:none;width:0;height:0;border-left:6px solid var(--mut);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.tk-item.open .tk-tri{transform:rotate(90deg)}
.tk-name{font-weight:700;font-size:.88rem;flex:none;padding-right:64px}
.tk-desc{color:var(--mut);font-size:.76rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-badge{flex:none;font-size:.52rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:4px}
.tk-badge.browser{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.tk-badge.local{background:color-mix(in srgb,var(--mut) 22%,transparent);color:var(--mut)}
.tk-panel{padding:12px 13px 13px;border-top:1px solid var(--line)}
.tk-panel[hidden]{display:none}
.cmd-block{white-space:pre-wrap;word-break:break-word;display:block;line-height:1.5}
/* topbar profile + "..." menu */
#user-slot{display:flex;align-items:center;gap:8px}
.tb-item{position:relative}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--txt);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:1.1rem;line-height:1;font-family:inherit}
.icon-btn:hover{border-color:var(--acc);color:var(--acc)}
.profile-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);border-radius:20px;padding:3px 12px 3px 3px;cursor:pointer;color:var(--txt);font-family:inherit}
.profile-btn:hover{border-color:var(--acc)}
.p-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;flex:none}
.p-initials{background:var(--acc);color:#04121a;font-weight:800;font-size:.8rem}
.p-email{font-size:.8rem;color:var(--mut);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;max-width:290px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 44px rgba(0,0,0,.5);padding:6px;z-index:60}
.menu[hidden]{display:none}
.menu-hd{padding:8px 10px;font-size:.78rem;color:var(--mut);border-bottom:1px solid var(--line);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis}
.menu-item{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--txt);padding:8px 10px;border-radius:7px;cursor:pointer;font-family:inherit;font-size:.85rem}
.menu-item:hover{background:var(--card2)}
.menu-item.col{display:flex;flex-direction:column;gap:2px}
.menu-item.col strong{font-size:.84rem}
.menu-sub{font-size:.72rem;color:var(--mut);white-space:normal}
.set-block .set-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:4px}
.menu-prof{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu-div{height:1px;background:var(--line);margin:5px 4px}
/* ===== app console shell ===== */
body.app #view{max-width:none;padding:0;margin:0}
.app-shell{display:flex;min-height:calc(100vh - var(--topbar-h));width:100%}
.sidebar{width:220px;flex:none;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h))}
.side-brand{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);padding:0 8px 16px;font-size:.9rem}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-item{text-align:left;background:transparent;border:none;color:var(--mut);padding:9px 12px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.9rem}
.side-item:hover{background:var(--card2);color:var(--txt)}
.side-item.active{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);font-weight:600}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 8px 0;border-top:1px solid var(--line)}
.side-user{min-width:0}
.su-name{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-mail{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-main{flex:1;min-width:0;padding:30px 40px}
.pg-h1{font-size:1.9rem;margin:0 0 6px;letter-spacing:-.02em}
.pg-h2{font-size:1.2rem;margin:26px 0 12px}
.pg-sub{margin:0 0 22px;font-size:.95rem}
.dash-hero{padding:26px 28px;border:1px solid var(--line);border-radius:14px;margin-bottom:20px;background:radial-gradient(600px 220px at 90% -30%,color-mix(in srgb,var(--acc) 18%,transparent),transparent)}
.dash-hero .eyebrow{margin-bottom:8px}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.stat{flex:1;min-width:130px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.stat-n{font-size:1.7rem;font-weight:800;color:var(--acc)}
.stat-l{color:var(--mut);font-size:.8rem}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.qa{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;cursor:pointer;color:var(--txt);font-family:inherit;transition:border-color .15s,transform .15s}
.qa:hover{border-color:var(--acc);transform:translateY(-2px)}
.qa-title{font-weight:700;font-size:1rem;margin-bottom:5px}
.qa-desc{color:var(--mut);font-size:.8rem;line-height:1.5}
.set-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px;max-width:620px}
.set-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);margin-bottom:12px}
.set-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:.86rem}
.set-row:last-child{border-bottom:none}
.set-btns{display:flex;gap:8px;flex-wrap:wrap}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem}
.swatches{display:flex;gap:8px}
.swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.swatch:hover{border-color:var(--txt)}
@media(max-width:720px){
  .app-shell{flex-direction:column;min-height:0}
  .sidebar{width:auto;position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:none;border-bottom:1px solid var(--line);padding:10px}
  .side-brand,.side-foot{display:none}
  .side-nav{flex-direction:row;flex-wrap:wrap}
  .app-main{padding:20px}
}
/* command palette */
.cmdk{position:fixed;inset:0;z-index:70;background:rgba(4,8,15,.55);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;backdrop-filter:blur(2px)}
.cmdk-box{width:min(600px,94vw);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden}
.cmdk-input{width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;color:var(--txt);font-family:inherit;font-size:1rem;padding:16px 18px;outline:none}
.cmdk-list{max-height:52vh;overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:baseline;gap:12px;padding:9px 12px;border-radius:8px;cursor:pointer}
.cmdk-item.sel{background:color-mix(in srgb,var(--acc) 16%,var(--card2))}
.cmdk-name{font-size:.9rem;font-weight:600;flex:none}
.cmdk-desc{font-size:.76rem;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-empty{padding:20px;text-align:center;color:var(--mut)}
.cmdk-btn{display:inline-flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;color:var(--mut);cursor:pointer;font-family:inherit;font-size:.8rem}
.cmdk-btn:hover{border-color:var(--acc)}
.cmdk-btn kbd{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:.68rem;font-family:ui-monospace,monospace}
@media(max-width:560px){.cmdk-btn span{display:none}}
/* segmented toggle */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:transparent;border:none;color:var(--mut);padding:.35rem .8rem;cursor:pointer;font-family:inherit;font-size:.8rem}
.seg button.on{background:var(--acc);color:#04121a;font-weight:700}
/* downloads */
.dl-group{margin-bottom:16px}
.dl-group-title{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:6px 0}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.dl-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;text-decoration:none;color:var(--txt)}
a.dl-card:hover{border-color:var(--acc)}
.dl-name{font-weight:700;font-size:.88rem}
.dl-desc{color:var(--mut);font-size:.74rem;margin-top:3px}
.dl-cmd-row{display:flex;align-items:stretch;gap:6px;margin-top:6px}
.dl-cmd{flex:1;min-width:0;background:var(--card2);border:1px solid var(--line);border-radius:5px;padding:4px 6px;font-size:.72rem;color:var(--acc);overflow-x:auto;white-space:nowrap}
.dl-copy{flex:none;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--mut);cursor:pointer;font-size:.66rem;padding:0 8px;font-family:inherit}
.dl-copy:hover{border-color:var(--acc);color:var(--acc)}
.dl-mark{margin-top:8px;background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:5px;padding:.25rem .6rem;cursor:pointer;font-size:.68rem;font-family:inherit}
.dl-mark:hover{border-color:var(--acc);color:var(--acc)}
.dl-card.installed{opacity:.6}
.dl-check{background:var(--ok);color:#04121a;font-size:.56rem;font-weight:800;padding:1px 5px;border-radius:4px}
@keyframes dlflash{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 3px var(--acc)}}
.dl-card.flash{animation:dlflash 1.1s ease}
/* OS tabs */
.os-tabs{display:flex;gap:4px;margin-bottom:12px}
.os-tab{background:var(--card2);border:1px solid var(--line);color:var(--mut);border-radius:6px;padding:.3rem .75rem;cursor:pointer;font-family:inherit;font-size:.78rem}
.os-tab.active{background:var(--acc);color:#04121a;border-color:var(--acc);font-weight:700}
/* tool chips */
.tool-chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:20px;padding:.35rem .8rem;margin:0 6px 6px 0;cursor:pointer;font-family:inherit;font-size:.82rem}
.tool-chip:hover{border-color:var(--acc)}
.tool-dot{width:8px;height:8px;border-radius:50%;background:var(--mut);flex:none}
.tool-chip.installed .tool-dot{background:var(--ok)}
.tool-chip.installed{opacity:.8}
.tool-state{font-size:.58rem;color:var(--mut);border:1px solid var(--line);border-radius:10px;padding:0 6px}
/* walkthrough */
.tour-overlay{position:fixed;inset:0;z-index:9999}
.tour-hole{position:absolute;border-radius:9px;box-shadow:0 0 0 9999px rgba(4,8,15,.78);pointer-events:none;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease}
.tour-callout{position:absolute;width:300px;max-width:92vw;background:var(--card);border:1px solid var(--acc);border-radius:10px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);pointer-events:auto}
.tour-step{font-size:.6rem;color:var(--mut);letter-spacing:.12em}
.tour-title{font-weight:800;margin:4px 0;font-size:1.02rem}
.tour-text{color:var(--mut);font-size:.83rem;line-height:1.5}
.tour-actions{display:flex;align-items:center;gap:8px;margin-top:13px}
.tour-actions .btn{padding:.4rem .85rem}
.tour-skip{background:none;border:none;color:var(--mut);cursor:pointer;font-size:.72rem;text-decoration:underline;font-family:inherit;padding:0}

/* ============================================================
   Console polish + cybersecurity widgets
   ============================================================ */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:var(--line);border:3px solid transparent;background-clip:padding-box;border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:var(--line-2);background-clip:padding-box}
::selection{background:color-mix(in srgb,var(--acc) 32%,transparent)}
.btn{background:var(--grad-acc);box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.2);transition:filter .15s,transform .06s;display:inline-flex;align-items:center;gap:7px}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{border-color:var(--acc-line);background:var(--acc-soft);filter:none}
.chip{display:inline-flex;align-items:center;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:20px;padding:2px 8px;white-space:nowrap}
.sev{display:inline-flex;font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.sev.critical{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}
.sev.high{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.sev.medium{background:color-mix(in srgb,var(--acc) 20%,transparent);color:var(--acc)}
.sev.low{background:color-mix(in srgb,var(--mut) 24%,transparent);color:var(--mut)}
.link-btn{background:none;border:none;color:var(--acc);cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:600;padding:0}
.link-btn:hover{text-decoration:underline}

/* sidebar groups + polish */
.side-group{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);padding:14px 12px 5px}
.side-group:first-child{padding-top:2px}
.side-item{position:relative;transition:background .15s,color .15s;font-weight:500}
.side-item.active{background:var(--acc-soft)}
.side-item.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--grad-acc)}
@media(max-width:720px){.side-group{display:none}}

/* dashboard hero + stats */
.dash-hero{background:
  radial-gradient(680px 240px at 88% -40%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 60%),
  linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,var(--acc) 3%),var(--card));box-shadow:var(--sh-1)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.stat{position:relative;overflow:hidden;box-shadow:var(--sh-1)}
.stat::after{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--grad-acc)}
.stat-n{font-size:1.75rem;letter-spacing:-.02em}
.stat-s{color:var(--mut);font-size:.68rem;margin-top:2px}
.qa{position:relative;overflow:hidden;box-shadow:var(--sh-1)}
.qa::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;transition:opacity .18s;
  background:var(--grad-acc);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.qa:hover{box-shadow:var(--sh-2)} .qa:hover::before{opacity:1}

/* two-column home layout */
.home-cols{display:grid;grid-template-columns:1fr 340px;gap:18px;margin-top:24px;align-items:start}
.hc-main,.hc-side{display:flex;flex-direction:column;gap:18px;min-width:0}
@media(max-width:1000px){.home-cols{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--sh-1)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}

/* threat feed */
.feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:13px;margin-bottom:8px}
.feed-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:15px;text-decoration:none;color:var(--txt);box-shadow:var(--sh-1);transition:border-color .16s,transform .16s}
.feed-card:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.feed-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.feed-id{font-size:.74rem;color:var(--mut)}
.feed-name{font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.feed-desc{color:var(--txt-2);font-size:.82rem;line-height:1.5}
.feed-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.72rem;margin-top:auto}
.feed-list{display:flex;flex-direction:column;gap:2px}
.feed-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px;text-decoration:none;color:var(--txt);transition:background .14s}
.feed-row:hover{background:var(--card2)}
.fr-id{font-size:.74rem;color:var(--mut);flex:none}
.fr-name{font-weight:600;font-size:.86rem;flex:none}
.fr-tag{font-size:.74rem;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.fr-tag{display:none}}

/* ports table */
.ports-card{padding:0;overflow:hidden;max-width:none}
.ports{width:100%;border-collapse:collapse;font-size:.82rem}
.ports th{text-align:left;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);padding:11px 16px;border-bottom:1px solid var(--line)}
.ports td{padding:9px 16px;border-bottom:1px solid var(--line)}
.ports tr:last-child td{border-bottom:none}
.ports tbody tr:hover{background:var(--card2)}

/* cheat sheets */
.cs-filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.cs-filter .chip{cursor:pointer;color:var(--mut);background:transparent;border-color:var(--line)}
.cs-filter .chip.on{color:var(--acc);background:var(--acc-soft);border-color:var(--acc-line)}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:14px}
.cs-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px;box-shadow:var(--sh-1)}
.cs-card.compact{padding:13px}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cs-head h3{margin:0;font-size:.98rem}
.cs-line{margin-bottom:9px}
.cs-line:last-child{margin-bottom:0}
.cs-label{font-size:.72rem;color:var(--mut);margin-bottom:3px}
.cs-cmd{display:flex;align-items:stretch;gap:6px}
.cs-cmd code{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:7px 9px;
  font-size:.76rem;color:var(--acc);overflow-x:auto;white-space:pre;line-height:1.5}
.cs-copy{flex:none;background:transparent;border:1px solid var(--line);border-radius:7px;color:var(--mut);cursor:pointer;font-size:.66rem;padding:0 9px;font-family:inherit}
.cs-copy:hover{border-color:var(--acc-line);color:var(--acc)}

/* resources */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px}
.res-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:15px;text-decoration:none;color:var(--txt);box-shadow:var(--sh-1);transition:border-color .16s,transform .16s}
.res-card:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.res-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.res-name{font-weight:700;font-size:.98rem}
.res-desc{color:var(--txt-2);font-size:.82rem;line-height:1.5;flex:1}
.res-link{font-size:.72rem;color:var(--acc);font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-chips{display:flex;flex-wrap:wrap;gap:8px}
.res-chip{display:inline-flex;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:7px 11px;
  text-decoration:none;color:var(--txt);font-size:.8rem;font-weight:500;transition:.15s}
.res-chip:hover{border-color:var(--acc-line);color:var(--acc)}

/* security posture */
.posture .pct{font-weight:800;color:var(--acc)}
.progress{height:8px;border-radius:8px;background:var(--card2);overflow:hidden;margin-bottom:14px}
.progress-bar{height:100%;background:var(--grad-acc);border-radius:8px;transition:width .3s ease}
.pos-list{display:flex;flex-direction:column;gap:4px}
.pos-item{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:9px;cursor:pointer;transition:background .14s}
.pos-item:hover{background:var(--card2)}
.pos-item input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--acc);cursor:pointer}
.pos-text{display:flex;flex-direction:column;gap:1px}
.pos-text strong{font-size:.84rem;font-weight:600}
.pos-text .muted{font-size:.74rem;line-height:1.4}

/* interactive utilities */
.util-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:14px}
.util-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:8px}
.util-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.util-head h3{margin:0;font-size:.96rem}
.util-card .in{font-size:.82rem}
.util-card textarea.in{resize:vertical}
.util-row{display:flex;gap:8px;align-items:center}
.util-row .in{flex:1;min-width:0}
.util-btns{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.util-chk{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;color:var(--mut)}
.util-chk input{width:15px;height:15px;accent-color:var(--acc)}
.util-kv{display:flex;align-items:center;gap:10px;font-size:.78rem;padding:4px 0;border-top:1px solid var(--line)}
.util-kv:first-of-type{border-top:none}
.util-kv span{color:var(--mut);flex:none;width:66px}
.util-val{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;color:var(--acc);font-size:.74rem}
.util-card .out{font-size:.75rem;margin:0;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:9px 10px;color:var(--mut);max-height:260px;overflow:auto;white-space:pre}
/* Wide monospace output (hexdumps, JWT bodies) scrolls INSIDE its card instead of
   stretching the grid column or forcing the page to scroll sideways. */
.util-card pre.out{overflow-x:auto}

/* announcement banner */
.banner{border-radius:10px}
.banner.banner-info{border-color:var(--acc-line);background:var(--acc-soft)}

/* ============================================================
   Admin console
   ============================================================ */
.adm-cols{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start;margin-top:18px}
.adm-main,.adm-side{display:flex;flex-direction:column;gap:18px;min-width:0}
@media(max-width:1000px){.adm-cols{grid-template-columns:1fr}}
.btn.sm{display:inline-flex;align-items:center;gap:6px}
.btn.danger.sm{background:transparent;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.danger.sm:hover{background:color-mix(in srgb,var(--bad) 14%,transparent)}
.user-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:11px 8px;border-bottom:1px solid var(--line)}
.user-row:last-child{border-bottom:none}
.ur-main{min-width:0}
.ur-name{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ur-mail{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur-seen{font-size:.72rem}
.ur-actions{display:flex;gap:7px;flex:none}
.wl-list{display:flex;flex-direction:column;gap:6px}
.wl-item{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.wl-item .mono{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-x{background:none;border:none;color:var(--mut);cursor:pointer;font-size:1.1rem;line-height:1;flex:none}
.wl-x:hover{color:var(--bad)}
.adm-msg{font-size:.78rem;margin:8px 0 0;min-height:1em}
.adm-msg.ok{color:var(--ok)} .adm-msg.err,.adm-err{color:var(--bad);font-size:.82rem}
.tk-in{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;resize:vertical}

/* ============================================================
   Landing 2.0 — cyber aesthetic
   ============================================================ */
.grad-text{background:linear-gradient(100deg,var(--acc),var(--acc-2) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{display:inline-flex;align-items:center;gap:8px}
.eyebrow.center{display:flex;justify-content:center}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.4s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* hero */
.hero{position:relative;overflow:hidden;padding:70px 0 0;border-bottom:1px solid var(--line);
  background:radial-gradient(1000px 520px at 78% -10%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 60%),
             radial-gradient(760px 480px at 0% 8%,color-mix(in srgb,var(--acc-2) 14%,transparent),transparent 55%)}
.hero-grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:.35;
  -webkit-mask:radial-gradient(900px 520px at 60% 0%,#000,transparent 75%);mask:radial-gradient(900px 520px at 60% 0%,#000,transparent 75%)}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-bottom:34px}
.hero-copy{min-width:0}
.hero-h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.05;margin:14px 0 16px;max-width:15ch;font-weight:850;letter-spacing:-.03em}
.hero-sub{max-width:560px}
.hero-cta .btn.lg{border-radius:11px}
.btn.glow{box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent),0 10px 40px -8px color-mix(in srgb,var(--acc) 70%,transparent)}
.btn.glow:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent),0 14px 50px -8px color-mix(in srgb,var(--acc) 85%,transparent)}
.hero-metrics{display:grid;grid-template-columns:repeat(2,max-content);gap:14px 0;margin-top:30px}
.hm-n{font-size:1.7rem;font-weight:850;letter-spacing:-.02em;background:linear-gradient(120deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-l{font-size:.74rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em}

/* hero terminal mockup */
.hero-visual{position:relative;z-index:1}
.term-window{background:linear-gradient(180deg,#0b1120,#070b14);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--acc) 12%,transparent);transform:perspective(1400px) rotateY(-6deg) rotateX(2deg)}
.tw-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)}
.tw-dot{width:11px;height:11px;border-radius:50%}
.tw-dot.r{background:#ff5f57}.tw-dot.y{background:#febc2e}.tw-dot.g{background:#28c840}
.tw-title{margin-left:8px;font-size:.72rem;color:var(--mut);font-family:ui-monospace,monospace}
.tw-body{margin:0;padding:16px 18px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.7;color:#cfe0f5;white-space:pre-wrap;word-break:break-word}
.c-pl{color:var(--acc);font-weight:700}.c-path{color:var(--acc-2)}.c-ok{color:var(--ok);font-weight:700}.c-acc{color:var(--acc);font-weight:700}.c-mut{color:var(--mut)}
.tw-cursor{color:var(--acc);animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
@media(max-width:860px){.hero-inner{grid-template-columns:1fr}.hero-visual{display:none}}

/* marquee */
.marquee-wrap{position:relative;z-index:1;display:flex;align-items:center;gap:16px;padding:16px 0 22px;border-top:1px solid var(--line);max-width:1080px;margin:0 auto;overflow:hidden}
.marquee-label{flex:none;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);padding-left:22px}
.marquee{display:flex;gap:10px;flex-wrap:wrap}
.mchip{font-family:ui-monospace,monospace;font-size:.76rem;color:var(--txt-2);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:5px 12px}

/* feature cards with icons */
.feat-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.feat-card{position:relative;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s;box-shadow:var(--sh-1)}
.feat-card:hover{transform:translateY(-3px);border-color:var(--acc-line);box-shadow:var(--sh-2)}
.feat-ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:11px;margin-bottom:14px;
  color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line)}
.feat-card h3{font-size:1.04rem}
.sec-title{margin-top:10px}
.eyebrow.center{margin-bottom:6px}

/* modules grid */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.mod-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--sh-1);transition:border-color .16s,transform .16s}
.mod-card:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.mod-ico{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line)}
.mod-t{font-weight:700;font-size:.98rem;margin-bottom:3px}
.mod-d{color:var(--mut);font-size:.82rem;line-height:1.5}

/* steps + cta */
.step-n{background:var(--grad-acc);box-shadow:0 6px 18px -6px color-mix(in srgb,var(--acc) 80%,transparent)}
.cta-band{position:relative;overflow:hidden}
.cta-glow{position:absolute;inset:0;background:radial-gradient(600px 300px at 20% 50%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 60%);pointer-events:none}
.cta-band-inner{position:relative;z-index:1}
.cta-band h2{font-size:1.6rem;letter-spacing:-.01em}
/* github section */
.gh-profile{display:flex;gap:16px;align-items:center;max-width:none}
.gh-avatar{width:72px;height:72px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--line)}
.gh-name{font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.gh-stats{display:flex;gap:18px;margin-top:8px;font-size:.82rem;color:var(--mut)}
.gh-stats strong{color:var(--txt)}
.dlcli{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.dlcli-h{text-align:center;font-size:1.15rem;margin:0 0 10px}
.dlcli .dlapp-sub{margin-top:0}

/* console page headings pop */
.pg-h1{background:linear-gradient(120deg,var(--txt),color-mix(in srgb,var(--txt) 60%,var(--acc)));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
body.app .app-main{position:relative}
body.app .app-main::before{content:"";position:fixed;inset:0 0 0 220px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;opacity:.15;-webkit-mask:radial-gradient(700px 400px at 70% 0%,#000,transparent 70%);mask:radial-gradient(700px 400px at 70% 0%,#000,transparent 70%)}
.foot-owner a{color:var(--acc);text-decoration:none}
.foot-owner a:hover{text-decoration:underline}
/* landing demos */
.c-bad{color:var(--bad);font-weight:700}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:20px;max-width:920px;margin:8px auto 0}
.demo-term{transform:none;transition:transform .2s ease,box-shadow .2s ease}
.demo-term:hover{transform:translateY(-4px);box-shadow:0 34px 74px -26px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--acc) 22%,transparent)}
.demo-term .tw-body{font-size:.78rem;min-height:158px;line-height:1.7}
/* sidebar: scroll long nav, keep footer pinned */
.side-nav{flex:1;overflow-y:auto;min-height:0}
.side-nav::-webkit-scrollbar{width:8px}
.side-nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.side-item{font-size:.86rem;padding:8px 12px}
/* hero terminal line-by-line reveal */
.tw-line{display:block;opacity:0;transform:translateY(2px);animation:tline .3s ease forwards}
@keyframes tline{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tw-line{opacity:1;transform:none;animation:none}}

/* --- AI prompt presets + markdown code blocks --- */
.ai-presets{display:flex;flex-wrap:wrap;gap:6px;margin:8px auto 0}
.msg.ai .code-block{position:relative;margin:8px 0;padding:10px 12px;background:#0b0f16;border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.msg.ai .code-block code{font-family:var(--mono,ui-monospace,monospace);font-size:.82rem;white-space:pre;color:#d6e2f0}
.msg.ai .cb-copy{position:absolute;top:6px;right:6px;padding:2px 8px;font-size:.68rem;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--mut);border-radius:6px;cursor:pointer}
.msg.ai .cb-copy:hover{color:var(--fg);border-color:var(--acc)}
.msg.ai code{font-family:var(--mono,ui-monospace,monospace);font-size:.84rem;background:rgba(127,127,127,.16);padding:1px 5px;border-radius:4px}
.msg.ai .code-block code{background:none;padding:0}
/* standalone code blocks (Nexus, Docs, Get-the-app…) — copy button pinned top-right,
   not rendered inline where it overlapped the first line of code. */
.code-block{position:relative;margin:10px 0;padding:12px 14px;background:#0b0f16;border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.code-block code{font-family:var(--mono,ui-monospace,monospace);font-size:.82rem;white-space:pre;color:#d6e2f0;display:block}
.code-block .cb-copy{position:absolute;top:8px;right:8px;padding:2px 9px;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);background:color-mix(in srgb,var(--card2,#101827) 92%,transparent);color:var(--mut);border-radius:6px;cursor:pointer;font-family:inherit;z-index:2}
.code-block .cb-copy:hover{color:var(--acc);border-color:var(--acc)}

/* --- References section --- */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
.ref-row{display:flex;align-items:center;gap:10px;padding:6px 2px;border-top:1px solid var(--line);font-size:.85rem}
.ref-row:first-of-type{border-top:none}
.ref-code{display:inline-block;min-width:44px;text-align:center;font-family:var(--mono,ui-monospace,monospace);font-size:.8rem;font-weight:600;padding:2px 8px;border-radius:6px;background:rgba(127,127,127,.14);color:var(--fg)}
.ref-code.ok{background:color-mix(in srgb,#28c76f 22%,transparent);color:#7ff0b0}
.ref-code.warn{background:color-mix(in srgb,#ffb020 22%,transparent);color:#ffd27f}
.ref-code.bad{background:color-mix(in srgb,#ff5470 22%,transparent);color:#ff9db0}

/* landing footer contact line */
.foot-contact{text-align:center;padding:16px 0 4px;margin-top:14px;border-top:1px solid var(--line);font-size:.85rem;color:var(--mut)}
.foot-contact a{color:var(--acc);text-decoration:none}
.foot-contact a:hover{text-decoration:underline}

/* regex tester (references page) */
.rx-use{padding:2px 8px;font-size:.68rem;border:1px solid var(--line);background:transparent;color:var(--mut);border-radius:6px;cursor:pointer}
.rx-use:hover{color:var(--acc);border-color:var(--acc)}
#rxout mark{background:color-mix(in srgb,var(--acc) 32%,transparent);color:var(--fg,#fff);border-radius:3px;padding:0 1px}

/* Arsenal / Training external-tool directories */
.arse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.arse-card{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--acc) 3%,transparent);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,background .15s}
.arse-card:hover{border-color:var(--acc);transform:translateY(-2px);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.arse-card .an{font-weight:600}
.arse-card .ax{color:var(--acc);font-size:.8rem}
.arse-card .ad{font-size:.78rem;color:var(--mut);margin-top:4px;line-height:1.4}
.arse-card .au{font-size:.7rem;color:var(--acc);margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono,ui-monospace,monospace)}

/* richer console backdrop — subtle depth so pages don't feel empty */
.app-main{position:relative}
.app-main::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(620px 340px at 94% -4%, color-mix(in srgb,var(--acc) 8%,transparent), transparent 62%),
    radial-gradient(520px 300px at 0% 8%, color-mix(in srgb,var(--acc-2,#7c5cff) 5%,transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb,var(--acc) 2%,transparent), transparent 220px)}
.app-main > *{position:relative;z-index:1}

/* Google Hacking DB */
.ghdb-bar{display:flex;align-items:center;gap:12px;margin:0 0 16px;max-width:720px;flex-wrap:wrap}
.ghdb-bar .tk-f{flex:1;min-width:200px}
.gh-cat .pg-h2{margin:20px 0 8px}
.gh-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.gh-row:first-of-type{border-top:none}
.gh-desc{flex:0 0 200px;font-size:.86rem;font-weight:500}
.gh-q{flex:1;min-width:200px;font-family:var(--mono,ui-monospace,monospace);font-size:.8rem;color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent);border:1px solid var(--line);padding:.4rem .65rem;border-radius:7px;overflow-x:auto;white-space:nowrap}
.gh-actions{display:flex;gap:6px;flex:none}

/* Boot screen — BlackArch-style terminal splash */
#bootscreen{position:fixed;inset:0;z-index:99999;background:radial-gradient(1200px 600px at 50% 20%,#0a0f1c,#05070d 70%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--mono,ui-monospace,"JetBrains Mono",monospace);
  animation:bootOut .55s ease 2.5s forwards}
@keyframes bootOut{to{opacity:0;visibility:hidden;pointer-events:none}}
/* warp the boot CONTENT (clipped by #bootscreen overflow:hidden) rather than the
   full-viewport overlay itself, so the exit zoom can't flash a page scrollbar */
@keyframes bootZoom{to{transform:scale(1.55);filter:blur(7px)}}
.boot-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--acc,#00d4ff) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--acc,#00d4ff) 12%,transparent) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask-image:radial-gradient(60% 50% at 50% 45%,#000,transparent 80%);mask-image:radial-gradient(60% 50% at 50% 45%,#000,transparent 80%)}
.boot-inner{position:relative;text-align:center}
.boot-logo{font-size:clamp(2.2rem,7vw,4rem);font-weight:800;letter-spacing:.06em;
  background:linear-gradient(135deg,var(--acc,#00d4ff),var(--acc-2,#7c5cff));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px color-mix(in srgb,var(--acc,#00d4ff) 55%,transparent));animation:bootPulse 2.4s ease-in-out infinite}
@keyframes bootPulse{50%{filter:drop-shadow(0 0 40px color-mix(in srgb,var(--acc,#00d4ff) 80%,transparent))}}
.boot-tag{color:var(--mut,#6f88ab);font-size:.72rem;letter-spacing:.35em;margin:8px 0 26px}
.boot-lines{display:inline-block;text-align:left;font-size:.86rem;color:var(--txt-2,#aebfdd);line-height:1.8;min-width:min(430px,80vw)}
.boot-lines>div{opacity:0;animation:bootLine .35s ease forwards;animation-delay:var(--d)}
@keyframes bootLine{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.boot-lines .bok{color:var(--ok,#2ee6a6);font-weight:700}
.boot-go{color:var(--acc,#00d4ff);margin-top:6px}
.boot-cur{animation:bootBlink 1s steps(2) infinite}
@keyframes bootBlink{50%{opacity:0}}

/* CRT scanlines over the boot splash */
#bootscreen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.4;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.22) 2px 3px)}
.boot-inner{z-index:6}

/* ============================================================
   Feature-plan polish pass (v2) — cards, severity, utils, private cloud
   ============================================================ */
/* card hover glow */
.util-card,.feat-card,.arse-card{transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.util-card:hover,.feat-card:hover{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc-soft),0 8px 30px -12px var(--acc-soft);transform:translateY(-2px)}

/* consistent severity chips */
.sev{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:20px}
.sev.critical{color:#fff;background:var(--bad)}
.sev.high{color:var(--bad);background:color-mix(in srgb,var(--bad) 18%,transparent)}
.sev.medium{color:var(--warn);background:color-mix(in srgb,var(--warn) 18%,transparent)}
.sev.low{color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,transparent)}

/* password strength meter */
.pw-meter{height:8px;border-radius:6px;background:color-mix(in srgb,var(--mut) 25%,transparent);overflow:hidden;margin-top:8px}
.pw-meter span{display:block;height:100%;width:0;border-radius:6px;transition:width .2s ease,background .2s ease;background:var(--bad)}
.pw-meter span[data-lvl="fair"]{background:var(--warn)}
.pw-meter span[data-lvl="strong"]{background:var(--acc)}
.pw-meter span[data-lvl="very-strong"]{background:var(--ok)}

/* Private Cloud Generator */
.pc-wrap{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:16px;align-items:start}
.pc-svcs{display:flex;flex-direction:column;gap:8px}
.pc-svc{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius,10px);cursor:pointer;transition:border-color .14s ease,background .14s ease}
.pc-svc:hover{border-color:var(--acc-line,var(--acc))}
.pc-svc input{margin-top:3px;accent-color:var(--acc)}
.pc-svc span{display:flex;flex-direction:column;min-width:0}
.pc-svc small{color:var(--mut);font-size:.74rem}
.pc-f{display:flex;flex-direction:column;gap:4px;margin-top:9px;font-size:.78rem;color:var(--mut)}
.pc-tabs{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.pc-code{font-family:var(--mono,ui-monospace,monospace);font-size:.8rem;white-space:pre}
@media(max-width:820px){.pc-wrap{grid-template-columns:1fr}}

/* home: target bar + IP + daily picks (P3/P4) */
.target-bar{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius,10px);background:color-mix(in srgb,var(--acc) 4%,var(--card));flex-wrap:wrap}
.target-bar .tb-label{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--acc)}
.target-bar .tk-f{flex:1;min-width:200px}
.ip-widget{display:flex;flex-direction:column;gap:6px;font-size:.85rem}
.ip-row{display:flex;justify-content:space-between;gap:10px}
.ip-row code{color:var(--acc)}
.daily-item{padding:8px 0;border-top:1px solid var(--line)}
.daily-item:first-child{border-top:none}
.di-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:4px}
.di-code{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:.78rem;color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent);border:1px solid var(--line);border-radius:6px;padding:5px 8px;margin-bottom:5px;overflow-x:auto;white-space:nowrap}

/* saved workspace (P5) */
.tk-star{margin-left:8px;font-size:1rem;line-height:1;color:var(--mut);cursor:pointer;flex:none;transition:color .14s ease,transform .14s ease}
.tk-star:hover{transform:scale(1.2)}
.tk-star.on{color:var(--warn)}
.saved-list{display:flex;flex-direction:column;gap:2px}
.saved-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.saved-row:first-child{border-top:none}
.saved-go{flex:1;text-align:left;background:none;border:none;color:var(--fg,inherit);font:inherit;cursor:pointer;padding:0}
.saved-go:hover{color:var(--acc)}
.saved-x{background:none;border:none;color:var(--mut);font-size:1.1rem;cursor:pointer;line-height:1}
.saved-x:hover{color:var(--bad)}

/* AI prompt library chips (P6) */
.chip-user{padding-right:6px}
.chip-x{margin-left:6px;opacity:.6;cursor:pointer}
.chip-x:hover{opacity:1;color:var(--bad)}
.chip-add{border-style:dashed;opacity:.85}
.chip-add:hover{opacity:1;border-color:var(--acc);color:var(--acc)}

/* opt-in CRT scanline overlay (Settings toggle) */
html.crt body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.35;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.18) 2px 3px)}

/* command palette — redesign extras (badges, groups, footer) */
.cmdk-badge{flex:none;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:5px;min-width:34px;text-align:center;color:var(--mut);background:color-mix(in srgb,var(--mut) 18%,transparent)}
.cmdk-badge.section{color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent)}
.cmdk-badge.tool{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.cmdk-badge.link{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.cmdk-group{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);padding:8px 12px 4px}
.cmdk-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line);font-size:.72rem;color:var(--mut)}
.cmdk-foot kbd{background:var(--card2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-right:3px;font-family:inherit}

/* Boot screen — cooler v3 (glitch logo, sweep, flicker, progress) */
.boot-inner{position:relative;animation:bootFlick .8s steps(2,end) 1,bootZoom .55s ease 2.5s forwards}
@keyframes bootFlick{0%{opacity:.15}12%{opacity:.85}22%{opacity:.3}34%{opacity:1}42%{opacity:.6}100%{opacity:1}}
.boot-logo{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;background:none;-webkit-background-clip:border-box;background-clip:border-box}
.glitch::before{color:#38f2ff;-webkit-text-fill-color:#38f2ff;animation:glA 1.35s steps(2,end) infinite}
.glitch::after{color:#ff3bd0;-webkit-text-fill-color:#ff3bd0;animation:glB 1.35s steps(2,end) infinite}
@keyframes glA{0%,88%,100%{clip-path:inset(0 0 101% 0);transform:none}90%{clip-path:inset(12% 0 55% 0);transform:translate(-3px,-1px)}94%{clip-path:inset(45% 0 28% 0);transform:translate(3px,1px)}97%{clip-path:inset(70% 0 8% 0);transform:translate(-2px,0)}}
@keyframes glB{0%,86%,100%{clip-path:inset(101% 0 0 0);transform:none}91%{clip-path:inset(58% 0 18% 0);transform:translate(3px,1px)}95%{clip-path:inset(22% 0 52% 0);transform:translate(-3px,-1px)}}
.boot-sweep{position:absolute;left:0;right:0;top:-140px;height:140px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc,#00d4ff) 20%,transparent) 60%,color-mix(in srgb,var(--acc,#00d4ff) 45%,transparent),transparent);
  animation:bootSweep 2.5s ease-in-out infinite}
@keyframes bootSweep{0%{top:-140px;opacity:0}12%{opacity:1}100%{top:100%;opacity:.2}}
.boot-bar{width:min(420px,80vw);height:3px;margin:24px auto 0;background:color-mix(in srgb,var(--acc,#00d4ff) 15%,transparent);border-radius:3px;overflow:hidden}
.boot-bar>span{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--acc,#00d4ff),var(--acc-2,#7c5cff));box-shadow:0 0 12px var(--acc,#00d4ff);animation:bootFill 2.3s cubic-bezier(.4,.8,.3,1) forwards}
@keyframes bootFill{0%{width:0}100%{width:100%}}

/* downloads dropdown detail */
.dl-pick{display:flex;gap:12px;align-items:flex-end}
.dl-detail{margin-top:14px}
.dl-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.dl-meta>div{display:flex;flex-direction:column;gap:2px}
.dl-k{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}

/* downloads: edition cards + tabs */
.dl-tabs{display:flex;gap:8px;margin:0 0 16px}
.ed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.ed-card{border:1px solid var(--line);border-radius:var(--radius,10px);padding:14px 16px;background:var(--card);transition:border-color .15s ease,box-shadow .15s ease;min-width:0}
.ed-card:hover{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc-soft)}
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ed-head h3{margin:0;font-size:1.05rem}
.ed-steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:.83rem;color:var(--mut)}
.ed-steps code{display:block;margin-top:3px;font-family:var(--mono,ui-monospace,monospace);font-size:.76rem;color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent);border:1px solid var(--line);border-radius:6px;padding:5px 8px;overflow-x:auto;white-space:pre;cursor:pointer}

/* AI image attach: thumbnails + inline message images */
.ai-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.ai-thumb{position:relative;display:inline-block}
.ai-thumb img{height:52px;width:auto;border-radius:6px;border:1px solid var(--line)}
.ai-thumb button{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;background:var(--bad);color:#fff;cursor:pointer;font-size:.7rem;line-height:1}
.msg-img{display:block;max-width:260px;max-height:200px;border-radius:8px;border:1px solid var(--line);margin-bottom:6px}

/* breadcrumb navigation */
.crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 14px;font-size:.82rem;min-height:20px}
.crumb{background:none;border:none;color:var(--mut);cursor:pointer;font:inherit;padding:2px 4px;border-radius:5px}
.crumb:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.crumb.cur{color:var(--fg,inherit);font-weight:600;cursor:default}
.crumb-sep{color:var(--mut);opacity:.6}
/* save-frame toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);z-index:200;background:var(--card);border:1px solid var(--acc);color:var(--fg,inherit);padding:10px 16px;border-radius:10px;font-size:.85rem;box-shadow:0 12px 40px -12px rgba(0,0,0,.5);opacity:0;transition:opacity .25s ease,transform .25s ease;max-width:90vw}
.toast.in{opacity:1;transform:translate(-50%,0)}

/* downloads sub-headings */
.pg-h3{font-size:1rem;font-weight:600;color:var(--fg,inherit)}

/* boot matrix rain canvas */
.boot-rain{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55}

/* landing edition command chips */
.ed-cmd{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:.76rem;color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent);border:1px solid var(--line);border-radius:6px;padding:6px 9px;overflow-x:auto;white-space:pre;cursor:pointer}
.ed-cmd:hover{border-color:var(--acc)}

/* boot v4 — power rings, % counter, stronger logo entrance */
.boot-ring{position:absolute;top:34%;left:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border:2px solid color-mix(in srgb,var(--acc,#00d4ff) 55%,transparent);border-radius:50%;opacity:0;z-index:0;
  box-shadow:0 0 26px color-mix(in srgb,var(--acc,#00d4ff) 45%,transparent),inset 0 0 26px color-mix(in srgb,var(--acc,#00d4ff) 22%,transparent);
  animation:bootRing 2s ease-out infinite}
.boot-ring.r2{animation-delay:.66s;border-color:color-mix(in srgb,var(--acc-2,#7c5cff) 55%,transparent);box-shadow:0 0 26px color-mix(in srgb,var(--acc-2,#7c5cff) 45%,transparent),inset 0 0 26px color-mix(in srgb,var(--acc-2,#7c5cff) 22%,transparent)}
@keyframes bootRing{0%{transform:scale(.3);opacity:.8}100%{transform:scale(3.2);opacity:0}}
.boot-logo{animation:bootPulse 2.4s ease-in-out infinite, bootLogoIn .9s cubic-bezier(.2,.9,.2,1) 1}
@keyframes bootLogoIn{0%{opacity:0;transform:scale(.82);letter-spacing:.4em;filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
.boot-barwrap{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:22px}
.boot-bar{margin:0}
.boot-pct{font-family:ui-monospace,monospace;font-size:.8rem;color:var(--acc,#00d4ff);min-width:42px;text-align:left;font-weight:600}

/* boot vignette for depth */
#bootscreen::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 40%,transparent 42%,rgba(0,0,0,.6) 100%)}

/* light polish pass (web) — kept simpler than the desktop app */
.btn{transition:filter .15s ease,box-shadow .15s ease,transform .06s ease}
.btn:hover{filter:brightness(1.06)}

.side-item.active{box-shadow:inset 2px 0 0 var(--acc)}
.card,.util-card,.cs-card{transition:border-color .15s ease,box-shadow .15s ease}
.pg-h1{letter-spacing:-.02em}

/* ============================================================
   CSS PLAN — Phase 6 (website polish, lighter than the app)
   ============================================================ */
/* subtle staggered reveal on content grids */
.util-grid > *,.cs-grid > *,.arse-grid > *,.feat-grid > *,.ed-grid > *{animation:webIn .3s ease both}
.util-grid > *:nth-child(2),.cs-grid > *:nth-child(2),.arse-grid > *:nth-child(2),.feat-grid > *:nth-child(2){animation-delay:.03s}
.util-grid > *:nth-child(3),.cs-grid > *:nth-child(3),.arse-grid > *:nth-child(3),.feat-grid > *:nth-child(3){animation-delay:.06s}
.util-grid > *:nth-child(4),.cs-grid > *:nth-child(4),.arse-grid > *:nth-child(4),.feat-grid > *:nth-child(4){animation-delay:.09s}
.util-grid > *:nth-child(n+5),.cs-grid > *:nth-child(n+5),.arse-grid > *:nth-child(n+5),.feat-grid > *:nth-child(n+5){animation-delay:.12s}
@keyframes webIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.util-grid > *,.cs-grid > *,.arse-grid > *,.feat-grid > *,.ed-grid > *{animation:none}}
/* consistent card hover + focus polish */
.util-card:hover,.cs-card:hover,.arse-card:hover,.ed-card:hover{border-color:var(--acc)}
.tk-f:focus,.tk-in:focus,.tk-search:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.pg-h2{letter-spacing:-.01em}

/* Feedback / bug-report modal + admin rows */
.fb-modal{position:fixed;inset:0;z-index:9999;background:rgba(3,6,12,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.fb-box{width:min(520px,94vw);background:var(--card,#0f1420);border:1px solid var(--line,#26304a);border-radius:14px;padding:18px;box-shadow:0 24px 60px -20px #000}
.fb-h{font-weight:700;font-size:1.05rem;margin-bottom:12px}
.fb-types{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.fb-type{border:1px solid var(--line,#26304a);background:transparent;color:var(--txt-2,#aeb9d0);border-radius:20px;padding:5px 12px;cursor:pointer;font:inherit;font-size:.85rem}
.fb-type.on{border-color:var(--acc);color:var(--txt);background:color-mix(in srgb,var(--acc) 16%,transparent)}
.fb-foot{display:flex;align-items:center;gap:8px;margin-top:12px}
.fb-status{font-size:.82rem;color:var(--txt-2,#aeb9d0)}
.fb-row{border:1px solid var(--line,#26304a);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.fb-row-h{display:flex;align-items:center;gap:8px;font-size:.8rem;margin-bottom:6px}
.fb-tag{font-weight:600}
.fb-msg{white-space:pre-wrap;font-size:.88rem;color:var(--txt,#e6ecf7)}

/* Nexus comparison table */
.cmp-table{width:100%;border-collapse:collapse;margin:8px 0 6px;font-size:.86rem;min-width:520px}
.cmp-table th,.cmp-table td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line,#26304a);vertical-align:top}
.cmp-table thead th{color:var(--txt,#e6ecf7);font-weight:700;border-bottom:2px solid var(--acc)}
.cmp-table td:first-child{color:var(--txt-2,#aeb9d0)}
.cmp-table td.yes{color:var(--ok,#2ee6a6);font-weight:600}
.cmp-table tbody tr:hover{background:color-mix(in srgb,var(--acc) 7%,transparent)}

/* ===== Nexus showcase page ===== */
.nx-hero{position:relative;overflow:hidden;border:1px solid var(--acc-line);border-radius:16px;padding:30px 26px;margin:0 0 22px;
  background:
    radial-gradient(720px 320px at 78% -30%,color-mix(in srgb,var(--acc-2) 26%,transparent),transparent 62%),
    radial-gradient(680px 340px at 12% 120%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 60%),
    linear-gradient(160deg,var(--card2),var(--card))}
.nx-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 0 1px,transparent 2px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--acc) 5%,transparent) 0 1px,transparent 1px 42px);opacity:.35;pointer-events:none;-webkit-mask:linear-gradient(180deg,#000,transparent 70%);mask:linear-gradient(180deg,#000,transparent 70%)}
.nx-badge{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);border:1px solid var(--acc-line);border-radius:999px;padding:5px 12px;background:var(--acc-soft)}
.nx-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.nx-title{font-size:clamp(2.4rem,6vw,3.6rem);font-weight:850;line-height:1.02;letter-spacing:-.03em;margin:16px 0 8px;
  background:linear-gradient(120deg,#fff,color-mix(in srgb,var(--acc) 85%,#fff) 45%,var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nx-sub{color:var(--txt-2,#aeb9d0);font-size:1.02rem;max-width:60ch;margin:0 0 18px}
.nx-cta{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1}

/* terminal mockup */
.nx-term{margin:20px 0 4px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#05070d;box-shadow:0 24px 60px -30px color-mix(in srgb,var(--acc) 60%,#000)}
.nx-term-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:linear-gradient(var(--card2),var(--card));border-bottom:1px solid var(--line)}
.nx-dot{width:11px;height:11px;border-radius:50%;background:#3a4560}
.nx-dot.r{background:#ff5f57}.nx-dot.y{background:#febc2e}.nx-dot.g{background:#28c840}
.nx-term-t{margin-left:8px;font-size:.74rem;color:var(--txt-3,#8794b3);font-family:ui-monospace,Menlo,Consolas,monospace}
.nx-term-body{padding:14px 16px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.55;overflow-x:auto}
.nx-term-body .l{white-space:pre;color:#c6d0e6}
.nx-logo{background:linear-gradient(120deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.nx-c{color:var(--acc)}.nx-m{color:var(--acc-2)}.nx-g{color:#6b7a99}.nx-ok{color:var(--ok)}.nx-y{color:var(--warn)}.nx-b{color:#4aa3ff}.nx-w{color:#e8edf7}
.nx-prompt{color:var(--acc-2);font-weight:700}
.nx-rule{color:#233049}

/* feature grid */
.nx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:14px 0}
.nx-feat{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 16px 15px;transition:border-color .15s,transform .15s}
.nx-feat:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.nx-feat::before{content:"";position:absolute;left:16px;right:16px;top:0;height:2px;border-radius:2px;background:var(--grad-acc);opacity:.85}
.nx-feat h4{margin:6px 0 5px;font-size:.98rem;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-right:84px}
.nx-feat h4 code{font-size:.8rem;background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc);border-radius:6px;padding:1px 7px}
.nx-feat p{margin:0;color:var(--txt-2,#aeb9d0);font-size:.85rem;line-height:1.5}
.nx-tag{position:absolute;top:12px;right:12px;font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-2);border:1px solid color-mix(in srgb,var(--acc-2) 45%,var(--line));border-radius:999px;padding:2px 7px}

/* command chips */
.nx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.nx-chip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:var(--txt);background:var(--card2);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.nx-chip b{color:var(--acc);font-weight:600}
.nx-h2{font-size:1.35rem;margin:30px 0 4px;letter-spacing:-.01em}
.nx-lead{color:var(--txt-2,#aeb9d0);margin:0 0 14px;font-size:.92rem}

/* ===== Documentation hub ===== */
.doc-wrap{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:start}
.doc-toc{position:sticky;top:76px;align-self:start;border-right:1px solid var(--line);padding-right:14px}
.doc-toc-h{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.doc-toc-l{display:block;padding:5px 10px;margin:1px 0;border-radius:7px;color:var(--txt-2,#aeb9d0);font-size:.86rem;text-decoration:none;border-left:2px solid transparent}
.doc-toc-l:hover{color:var(--txt);background:var(--acc-soft);border-left-color:var(--acc)}
.doc-body{min-width:0}
.doc-sec{scroll-margin-top:74px;padding:8px 0 20px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.doc-sec:last-child{border-bottom:none}
.pg-h3{font-size:.98rem;margin:18px 0 8px;color:var(--txt)}
.doc-table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:.86rem}
.doc-table td{padding:7px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);vertical-align:top}
.doc-table td:first-child{white-space:nowrap;width:1%}
.doc-table code{background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc);border-radius:6px;padding:1px 7px;font-size:.82rem;white-space:nowrap}
.doc-table tr:hover td{background:color-mix(in srgb,var(--acc) 5%,transparent)}
.doc-ol,.doc-ul{color:var(--txt-2,#aeb9d0);font-size:.9rem;line-height:1.65;padding-left:22px;margin:8px 0}
.doc-ol li,.doc-ul li{margin:6px 0}
.doc-ol code,.doc-ul code,.doc-faq code{background:var(--card2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.82rem;color:var(--acc)}
.doc-legal{font-size:.85rem;line-height:1.6}
.doc-faq details{border:1px solid var(--line);border-radius:9px;padding:10px 14px;margin:8px 0;background:var(--card)}
.doc-faq summary{cursor:pointer;font-weight:600;font-size:.92rem}
.doc-faq details[open] summary{margin-bottom:6px;color:var(--acc)}
.doc-faq p{margin:4px 0 0}
.doc-changelog{margin:6px 0}
.doc-cl{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.doc-cl-v{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;color:var(--acc);font-size:.85rem}
.doc-cl p{margin:0;font-size:.86rem}
@media(max-width:820px){.doc-wrap{grid-template-columns:1fr}.doc-toc{position:static;border-right:none;border-bottom:1px solid var(--line);padding:0 0 12px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:4px}.doc-toc-l{border-left:none}}

/* ===== app footer ===== */
.app-foot{margin:40px -4px 0;padding:20px 4px 8px;border-top:1px solid var(--line)}
.app-foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.app-foot-brand{font-weight:800;letter-spacing:.02em;background:var(--grad-acc);-webkit-background-clip:text;background-clip:text;color:transparent}
.app-foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-left:auto}
.app-foot-links a{color:var(--txt-2,#aeb9d0);font-size:.84rem;cursor:pointer;text-decoration:none}
.app-foot-links a:hover{color:var(--acc)}
.app-foot-fine{margin-top:10px;font-size:.76rem;color:var(--txt-3,#8794b3)}

.app-foot-ver{font-size:.7rem;color:var(--txt-3,#8794b3);border:1px solid var(--line);border-radius:999px;padding:1px 8px}

/* Nexus CLI pairing-code row (Settings) */
.nexus-code-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:100%}
.nexus-code-row input{flex:1;min-width:140px;max-width:340px;padding:.4rem .6rem;border:1px solid var(--line,#2a3350);border-radius:8px;background:var(--card2);color:var(--txt);font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.nexus-code-row .btn{padding:.35rem .7rem;font-size:.78rem}

/* ================= polish layer — advanced micro-interactions ================= */
/* :where() keeps specificity 0 so existing rules always win; this only ADDS
   transitions, focus rings, press feedback and tinted chrome. */
:where(.btn,.side-item,.icon-btn,.nav-link,.foot-links a,.auth-links a,.tk-card,.dlapp-card,.card,.set-card,.swatch,.seg button,input,select,textarea){
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .18s ease,transform .12s cubic-bezier(.2,.7,.3,1);
}
:where(.btn):hover{filter:brightness(1.06)}
:where(.btn,.side-item,.icon-btn,.swatch):active{transform:translateY(1px)}
:where(.card,.set-card):hover{box-shadow:0 12px 34px -20px color-mix(in srgb,var(--acc) 60%,transparent)}
/* accessible keyboard focus ring — visible only for keyboard users */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid color-mix(in srgb,var(--acc) 70%,transparent);outline-offset:2px;
}
:where(button,a):focus:not(:focus-visible){outline:none}
/* accent-tinted selection + scrollbars */
::selection{background:color-mix(in srgb,var(--acc) 32%,transparent);color:var(--txt)}
:where(html){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--acc) 45%,var(--line)) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--acc) 40%,var(--line));border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--acc) 62%,var(--line));background-clip:content-box}
/* subtle content entrance on each section render */
@keyframes sxFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
:where(.pg-h1,.card,.set-card){animation:sxFadeUp .22s cubic-bezier(.2,.7,.3,1) both}
/* respect users who ask for less motion */
@media (prefers-reduced-motion:reduce){
  :where(*){animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  :where(.btn,.side-item,.icon-btn,.swatch):active{transform:none}
}

/* =================================================================
   VISUAL REFRESH — type scale + premium landing motion
   Additive, last-in-file layer. Zero-specificity :where() and equal-
   specificity overrides only; builds on the token system + polish layer
   above. All motion is transform/opacity and guarded for reduced-motion.
   ================================================================= */
:root{
  /* font families as tokens (mirror the stacks already used in the file) */
  --ff-sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-mono:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  /* modular type scale (~1.22 ratio) */
  --fs-2xs:.68rem; --fs-xs:.75rem; --fs-sm:.84rem; --fs-base:.94rem;
  --fs-md:1.06rem; --fs-lg:1.25rem; --fs-xl:1.55rem; --fs-2xl:1.95rem;
  --fs-3xl:clamp(1.5rem,3vw,2.4rem); --fs-hero:clamp(2.15rem,4.7vw,3.6rem);
  /* line-heights */
  --lh-tight:1.06; --lh-snug:1.25; --lh-normal:1.55; --lh-relaxed:1.7;
  /* weights */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:850;
  /* tracking */
  --tracking-heading:-.03em; --tracking-tight:-.02em; --tracking-normal:0;
  --tracking-label:.12em; --tracking-eyebrow:.22em;
  /* comfortable reading measure */
  --measure:62ch;
}
/* Global text rendering — no layout impact, sharper glyphs + real ligatures. */
body{
  font-family:var(--ff-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
/* Tabular, lining figures wherever numbers should align (metrics, code, mono). */
:where(.hm-n,.mono,code,pre,.tw-body,.step-n,.app-foot-ver){font-variant-numeric:tabular-nums lining-nums}

/* --- Heading hierarchy --------------------------------------------------- */
.hero-h1{font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--tracking-heading);font-weight:var(--fw-black);text-wrap:balance}
.sec-title{font-size:var(--fs-3xl);line-height:var(--lh-snug);letter-spacing:var(--tracking-tight);text-wrap:balance}
.pg-h1{line-height:var(--lh-snug);letter-spacing:var(--tracking-tight);text-wrap:balance}
.cta-band h2,.dlcli-h{text-wrap:balance;letter-spacing:var(--tracking-tight)}
.feat-card h3,.mod-t,.step h3{letter-spacing:var(--tracking-tight)}
/* Eyebrows: one consistent, refined label treatment. */
.eyebrow{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}
/* Body copy: relaxed leading + a pretty, orphan-free wrap. */
.hero-sub{font-size:var(--fs-md);line-height:var(--lh-relaxed);text-wrap:pretty}
.dlapp-sub,.feat-card p,.mod-d,.step p{text-wrap:pretty}
:where(.dlapp-sub){line-height:var(--lh-relaxed)}

/* --- Anchor offset so the sticky topbar never covers a jumped-to section -- */
:where(.hero,.section,.cta-band,[id]){scroll-margin-top:84px}

/* --- Hero entrance (on load; staggered; transform/opacity only) ----------- */
@keyframes sxHeroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
body.landing .hero-copy > .eyebrow{animation:sxHeroUp .6s cubic-bezier(.2,.7,.3,1) both}
body.landing .hero-h1{animation:sxHeroUp .6s .07s cubic-bezier(.2,.7,.3,1) both}
body.landing .hero-sub{animation:sxHeroUp .6s .14s cubic-bezier(.2,.7,.3,1) both}
body.landing .hero-cta{animation:sxHeroUp .6s .21s cubic-bezier(.2,.7,.3,1) both}
body.landing .hero-metrics{animation:sxHeroUp .6s .28s cubic-bezier(.2,.7,.3,1) both}
body.landing .hero-visual{animation:sxHeroUp .7s .34s cubic-bezier(.2,.7,.3,1) both}
body.landing .marquee-wrap{animation:sxHeroUp .7s .42s cubic-bezier(.2,.7,.3,1) both}
/* Gentle idle float on the hero terminal — keeps its perspective transform. */
@keyframes sxTermFloat{
  0%,100%{transform:perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(0)}
  50%{transform:perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(-8px)}
}
.hero .term-window{animation:sxTermFloat 7s ease-in-out .9s infinite;will-change:transform}
.hero .term-window:hover{animation-play-state:paused}

/* --- Scroll reveal (class added by landing.js only when motion is allowed) - */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
/* Stagger children inside the landing grids for a cascading reveal. */
.feat-grid .reveal:nth-child(2),.mod-grid .reveal:nth-child(2),.demo-grid .reveal:nth-child(2),.steps .reveal:nth-child(2),.dlapp-grid .reveal:nth-child(2),.ed-grid .reveal:nth-child(2){transition-delay:.07s}
.feat-grid .reveal:nth-child(3),.mod-grid .reveal:nth-child(3),.demo-grid .reveal:nth-child(3),.steps .reveal:nth-child(3),.dlapp-grid .reveal:nth-child(3),.ed-grid .reveal:nth-child(3){transition-delay:.14s}
.feat-grid .reveal:nth-child(4),.mod-grid .reveal:nth-child(4),.demo-grid .reveal:nth-child(4){transition-delay:.21s}
.feat-grid .reveal:nth-child(n+5),.mod-grid .reveal:nth-child(n+5){transition-delay:.28s}

/* --- Micro-interactions --------------------------------------------------- */
/* Icon tiles lift + tint with their card. */
.feat-ico,.mod-ico{transition:transform .18s cubic-bezier(.2,.7,.3,1),background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.feat-card:hover .feat-ico,.mod-card:hover .mod-ico{transform:translateY(-2px) scale(1.06);
  box-shadow:0 8px 22px -10px color-mix(in srgb,var(--acc) 80%,transparent)}
/* Primary CTAs float on hover. */
:where(.hero-cta .btn,.cta-band .btn):hover{transform:translateY(-2px)}
/* "Ships with" chips respond to hover. */
.mchip{transition:transform .16s cubic-bezier(.2,.7,.3,1),border-color .16s ease,color .16s ease}
.mchip:hover{transform:translateY(-2px);border-color:var(--acc-line);color:var(--txt)}
/* Animated underline for text nav links (absolute, so no layout shift). */
.nav-link,.foot-links a{position:relative}
.nav-link::after,.foot-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.nav-link:hover::after,.foot-links a:hover::after{transform:scaleX(1)}
/* Metric group: quiet separators for a more composed hero. */
.hero-metrics .hm{padding-right:34px}
.hero-metrics .hm:nth-child(odd){border-right:1px solid var(--line)}
.hero-metrics{gap:14px 0}

/* --- Reduced-motion: land everything in its final, calm state ------------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero .term-window{animation:none}
  body.landing .hero-copy > .eyebrow,body.landing .hero-h1,body.landing .hero-sub,
  body.landing .hero-cta,body.landing .hero-metrics,body.landing .hero-visual,
  body.landing .marquee-wrap{animation:none}
}

/* ================= print styles — clean reports / PDFs ================= */
/* Only applies when printing, so on-screen rendering is untouched. Drops the
   chrome (sidebar, footer, buttons), expands the content, and forces high-ink
   light output so a generated report prints/PDFs legibly. */
@media print {
  :root { --bg:#fff; --card:#fff; --txt:#111; --mut:#444; --line:#c9c9c9; }
  html, body, .app-shell, .app-main { background:#fff !important; color:#111 !important; }
  .sidebar, .side-nav, .app-foot, .topbar, .icon-btn, .profile-btn, .btn, button, .seg, .swatches { display:none !important; }
  .app-shell { display:block !important; }
  .app-main { display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; }
  .card, .set-card, .tk-card, .doc-d, .cve-item, .item, table, pre { break-inside:avoid; page-break-inside:avoid; background:#fff !important; border-color:#c9c9c9 !important; box-shadow:none !important; }
  a { color:#111 !important; text-decoration:underline; }
  h1, h2, h3, .pg-h1, .sec-title { color:#000 !important; }
  * { text-shadow:none !important; box-shadow:none !important; animation:none !important; }
  @page { margin:1.5cm; }
}

/* ============ high-contrast mode (prefers-contrast: more) ============ */
/* Activated by the OS "increase contrast" setting. Strengthens borders, secondary
   text, links, and focus rings for readability. Additive; no effect otherwise. */
@media (prefers-contrast: more) {
  :root { --mut: var(--txt); --line: color-mix(in srgb, var(--txt) 55%, transparent); }
  :where(.card, .set-card, .tk-card, .doc-d, .item, .cve-item, input, select, textarea, .btn.ghost) { border-width:2px !important; }
  :where(a) { text-decoration:underline; }
  :where(.muted) { color:var(--txt) !important; }
  :where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible { outline:3px solid var(--acc) !important; outline-offset:2px !important; }
}

/* ============ consistent disabled states ============ */
/* Disabled controls should clearly read as disabled everywhere: faded, a
   not-allowed cursor, and no hover lift. Additive; native :disabled already
   blocks interaction so the cursor still shows. */
:where(button, .btn, input, select, textarea, [role="button"]):disabled,
:where([aria-disabled="true"]) {
  opacity:.55 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
}
:where(button, .btn, [role="button"]):disabled:hover,
:where([aria-disabled="true"]):hover {
  transform:none !important;
  filter:none !important;
}

/* ============ skeleton loading placeholder ============ */
/* Add class="skeleton" to any element to show a shimmering placeholder while its
   content loads. New class — no effect on existing markup. Reduced-motion guarded. */
:where(.skeleton) {
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--txt) 8%, transparent) 25%,
    color-mix(in srgb, var(--txt) 18%, transparent) 37%,
    color-mix(in srgb, var(--txt) 8%, transparent) 63%);
  background-size:400% 100%;
  border-radius:6px;
  color:transparent !important;
  user-select:none;
  animation:skeleton-shimmer 1.4s ease infinite;
}
:where(.skeleton) * { visibility:hidden; }
@keyframes skeleton-shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce) { :where(.skeleton) { animation:none; } }

/* accent-tinted text caret in inputs (::selection is already accent-tinted above) */
:where(input, textarea, [contenteditable]) { caret-color:var(--acc); }

/* ===== professional polish pass (2026-08-18) — typography, rhythm, interaction ===== */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.hero-h1,.sec-title,.feat-card h3,.mod-t,.brand,.ed-head h3,.dlcli-h,.hm-n{
  font-family:var(--font-display);letter-spacing:-.02em}
code,pre,.mono,.tw-body,.ed-cmd,.term-window .tw-body,.dlapp-cmd code{font-family:var(--font-mono)}
.hero-h1{letter-spacing:-.032em;line-height:1.03}
.hero-sub{font-size:1.12rem;line-height:1.62;color:var(--txt-2)}
.eyebrow{font-size:.7rem;letter-spacing:.2em}
.sec-title{letter-spacing:-.02em;line-height:1.15}
.section{padding:78px 0}
/* buttons — smoother, more premium motion */
.btn{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .16s,background .2s,border-color .2s}
.btn.lg{padding:.8rem 1.5rem;border-radius:12px}
.btn.lg.glow:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 42%,transparent),0 16px 50px -10px color-mix(in srgb,var(--acc) 78%,transparent)}
.btn.ghost:hover{border-color:var(--acc-line);color:var(--txt);background:color-mix(in srgb,var(--acc) 8%,transparent)}
/* cards — subtle lift + accent edge on hover */
.feat-card,.mod-card,.ed-card{transition:border-color .18s,transform .18s,box-shadow .18s}
.feat-card:hover,.mod-card:hover,.ed-card:hover{transform:translateY(-3px);border-color:var(--acc-line);
  box-shadow:0 18px 46px -22px color-mix(in srgb,var(--acc) 45%,#000)}
.feat-ico{transition:transform .18s}
.feat-card:hover .feat-ico{transform:scale(1.07)}
/* hero metrics — confident, tabular */
.hero-metrics{gap:30px}
.hm-n{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* a hero trust line under the CTAs */
.hero-trust{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:20px;
  color:var(--mut);font-size:.82rem}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust .tk{color:var(--ok)}

/* ===== gamer sign-in transition — "ACCESS GRANTED" neon portal (auth.js playAccessGranted) ===== */
#xfer{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 50%,#0a0f22,#05070d 72%);
  font-family:var(--mono,ui-monospace,"JetBrains Mono",monospace);animation:xferOut .5s ease 1.2s forwards}
@keyframes xferOut{to{opacity:0;visibility:hidden}}
#xfer .xgrid{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(color-mix(in srgb,var(--acc,#00d4ff) 16%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--acc,#00d4ff) 16%,transparent) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 76%);
  mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 76%);animation:xferGrid 1.2s ease forwards}
@keyframes xferGrid{from{transform:scale(1.5);opacity:.1}to{transform:scale(1);opacity:.4}}
#xfer .xring{position:absolute;width:44px;height:44px;border-radius:50%;border:2px solid var(--acc,#00d4ff);
  box-shadow:0 0 34px var(--acc,#00d4ff),inset 0 0 22px var(--acc,#00d4ff);animation:xferRing 1.15s cubic-bezier(.2,.7,.2,1) forwards}
#xfer .xring.b{border-color:var(--acc-2,#7c5cff);box-shadow:0 0 34px var(--acc-2,#7c5cff),inset 0 0 22px var(--acc-2,#7c5cff);animation-delay:.14s}
@keyframes xferRing{0%{transform:scale(.2);opacity:1}100%{transform:scale(28);opacity:0}}
#xfer .xmsg{position:relative;text-align:center;animation:xferPop .5s cubic-bezier(.2,1.5,.4,1) .16s both}
@keyframes xferPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
#xfer .xgranted{font-size:clamp(1.9rem,6.5vw,3.6rem);font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff,var(--ok,#2ee6a6));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px color-mix(in srgb,var(--ok,#2ee6a6) 72%,transparent))}
#xfer .xwho{margin-top:12px;color:var(--acc,#00d4ff);font-size:.78rem;letter-spacing:.32em;text-transform:uppercase}
#xfer .xflash{position:absolute;inset:0;background:#eafff8;opacity:0;pointer-events:none;animation:xferFlash 1.3s ease forwards}
@keyframes xferFlash{0%,70%{opacity:0}78%{opacity:.8}100%{opacity:0}}
#xfer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;z-index:5;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.25) 2px 3px)}
@media (prefers-reduced-motion:reduce){#xfer{animation:xferOut .25s ease .35s forwards}#xfer *{animation-duration:.01s!important}}

/* visual-audit fix: accent-colored code/command text is ~1.7:1 on light backgrounds — darken it in light theme only */
:root[data-theme="light"] .dlapp-cmd code,
:root[data-theme="light"] .cs-cmd code,
:root[data-theme="light"] .gh-q,
:root[data-theme="light"] .di-code,
:root[data-theme="light"] .ed-cmd,
:root[data-theme="light"] .ai-offline-b code,
:root[data-theme="light"] .dl-cmd,
:root[data-theme="light"] .res-link{color:#0575a6}

/* ---- Learn Hub ---- */

.lh{max-width:1100px;margin:0 auto}
.lh-stats{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
.lh-st{background:var(--card,#161b22);border-radius:8px;padding:12px 16px;flex:1;min-width:140px}
.lh-st h3{margin:0;font-size:.76rem;color:var(--mut,#8b949e);text-transform:uppercase;letter-spacing:.5px}
.lh-st .v{font-size:1.4rem;font-weight:700;margin:4px 0}
.lh-bar{height:6px;background:var(--line,#30363d);border-radius:3px;margin:6px 0;overflow:hidden}
.lh-bar div{height:100%;background:var(--accent,#58a6ff);border-radius:3px;transition:width .3s}
.lh-inp{width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--line,#30363d);background:var(--card,#161b22);color:inherit;font-size:.9rem;margin:12px 0}
.lh-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.lh-ch{padding:5px 12px;border-radius:16px;border:1px solid var(--line,#30363d);background:transparent;color:var(--mut,#8b949e);cursor:pointer;font-size:.78rem;transition:all .15s}
.lh-ch:hover,.lh-ch.on{background:var(--accent,#58a6ff);color:#fff;border-color:var(--accent,#58a6ff)}
.lh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:16px 0}
.lh-c{background:var(--card,#161b22);border:1px solid var(--line,#30363d);border-radius:8px;padding:14px;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.lh-c::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent,#58a6ff),#3fb950);opacity:0;transition:opacity .2s}
.lh-c:hover{transform:translateY(-3px);border-color:var(--accent,#58a6ff);box-shadow:0 4px 20px rgba(88,166,255,.15)}
.lh-c:hover::before{opacity:1}
.lh-c.done{border-color:#3fb95060}
.lh-c.done::before{opacity:1;background:linear-gradient(90deg,#3fb950,#3fb95060)}
.lh-c h4{margin:4px 0;font-size:.88rem}
.lh-c .cat{font-size:.68rem;color:var(--mut,#8b949e)}
.lh-c .intro{font-size:.78rem;color:var(--mut,#8b949e);margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lh-c .ft{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.lh-df{font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:10px}
.lh-xp{font-size:.72rem;color:var(--mut,#8b949e)}
.lh-ck{position:absolute;top:10px;right:10px;font-size:1.1rem}
.lh-cb{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.78rem}
.lh-cb .nm{width:140px;color:var(--mut,#8b949e)}
.lh-cb .br{flex:1;height:4px;background:var(--line,#30363d);border-radius:2px;overflow:hidden}
.lh-cb .br div{height:100%;background:var(--accent,#58a6ff);border-radius:2px}
.lh-cb .pc{width:40px;text-align:right;color:var(--mut,#8b949e);font-size:.72rem}
.lh-cnt{font-size:.78rem;color:var(--mut,#8b949e);margin:8px 0}
.lh-tp{max-width:800px;margin:0 auto}
.lh-bk{background:none;border:none;color:var(--accent,#58a6ff);cursor:pointer;font-size:.85rem;padding:8px 0}

.lh-sec.tip{border-left:3px solid #3fb950}.lh-sec.warning{border-left:3px solid #f85149}.lh-sec.task{border-left:3px solid var(--accent,#58a6ff)}
.lh-code{background:#0d1117;padding:12px;border-radius:6px;overflow-x:auto;font-family:'Courier New',monospace;font-size:.82rem;position:relative;white-space:pre-wrap;word-break:break-all;border:1px solid #21262d;line-height:1.6}
.lh-code::before{content:'terminal';position:absolute;top:0;left:0;right:0;padding:4px 12px;font-size:.65rem;color:#8b949e;background:#161b22;border-bottom:1px solid #21262d;border-radius:6px 6px 0 0;letter-spacing:.5px;text-transform:uppercase}
.lh-code code{display:block;padding-top:22px;color:#e6edf3}
.lh-cp{position:absolute;top:6px;right:6px;background:var(--line,#30363d);border:none;color:var(--mut,#8b949e);padding:3px 8px;border-radius:4px;cursor:pointer;font-size:.7rem}
.lh-qo{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.lh-qo button{padding:10px 14px;border:1px solid var(--line,#30363d);border-radius:6px;cursor:pointer;background:var(--card,#161b22);text-align:left;color:inherit;font-size:.84rem;transition:all .15s}
.lh-qo button:hover:not(.ok):not(.no){border-color:var(--accent,#58a6ff)}
.lh-qo .ok{background:#3fb95020;border-color:#3fb950;color:#3fb950;font-weight:600}
.lh-qo .ok::after{content:' -- Correct!';font-size:.75rem}
.lh-qo .no{background:#f8514920;border-color:#f85149;color:#f85149;text-decoration:line-through;opacity:.6}
.lh-done{width:100%;padding:14px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--accent,#58a6ff),#3fb950);color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;margin:16px 0;letter-spacing:.3px;transition:transform .15s,box-shadow .15s}
.lh-done:hover{transform:scale(1.02);box-shadow:0 4px 20px rgba(63,185,80,.3)}
.lh-done:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.lh-wild{margin:12px 0;padding:12px 16px;background:linear-gradient(135deg,#f8514910,#d2992210);border:1px solid #f8514940;border-radius:8px;font-size:.82rem}
.lh-wild::before{content:'IN THE WILD: ';font-weight:700;color:#f85149;text-transform:uppercase;letter-spacing:.5px}
.lh-sec.task{background:linear-gradient(135deg,var(--card,#161b22),#0d1117);border-left:3px solid var(--accent,#58a6ff)}
.lh-sec.tip{background:linear-gradient(135deg,var(--card,#161b22),#0d1117);border-left:3px solid #3fb950}
.lh-sec.tip::before{content:'PRO TIP: ';font-weight:700;color:#3fb950;font-size:.82rem;letter-spacing:.5px}
.lh-sec.warning{background:linear-gradient(135deg,var(--card,#161b22),#1a0505);border-left:3px solid #f85149}
.lh-sec.warning::before{content:'WARNING: ';font-weight:700;color:#f85149;font-size:.82rem;letter-spacing:.5px}
@keyframes lhp{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes lhx{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
.lhp{animation:lhp .4s ease}
.lh-sec{animation:lhx .3s ease forwards}
.lh-sec:nth-child(2){animation-delay:.05s}
.lh-sec:nth-child(3){animation-delay:.1s}
.lh-sec:nth-child(4){animation-delay:.15s}
.lh-sec:nth-child(5){animation-delay:.2s}


/* Learn Hub educational improvements */
.lh-sec p{font-size:.9rem;line-height:1.8}
.lh-code code{line-height:1.7;letter-spacing:.3px}
.lh-qo button{transition:all .2s;font-size:.88rem;line-height:1.5}
.lh-qo button:hover:not(.ok):not(.no){background:var(--accent,#58a6ff)10;transform:translateX(4px)}
.lh-done:active{transform:scale(.98)}
.lh-c h4{line-height:1.4}
.lh-c .intro{line-height:1.5}
.lh-tp h1{line-height:1.3}

/* Learn Hub quiz select-then-submit */
.lh-qsel.sel{border-color:var(--accent,#58a6ff);background:var(--accent,#58a6ff)10;font-weight:600}
.lh-qsub{width:100%;padding:10px;margin-top:8px;border:none;border-radius:6px;background:var(--accent,#58a6ff);color:#fff;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s}
.lh-qsub:disabled{background:var(--line,#30363d);color:var(--mut,#8b949e);cursor:not-allowed}
.lh-qsub:hover:not(:disabled){opacity:.9}
.lh-qsub-ok{background:#3fb950!important;color:#fff!important}
.lh-qsub-no{background:#f85149!important;color:#fff!important}

/* Learn Hub — TryHackMe-style enhancements */

/* XP pulse animation when earned */
@keyframes xp-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); color: #3fb950; }
  100% { transform: scale(1); }
}
.xp-earned { animation: xp-pulse 0.6s ease; }

/* Streak fire animation */
@keyframes streak-glow {
  0%, 100% { text-shadow: 0 0 5px #f85149; }
  50% { text-shadow: 0 0 15px #f85149, 0 0 25px #d29922; }
}
.streak-active { animation: streak-glow 1.5s infinite; }

/* Topic card entrance animation */
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.lh-c { animation: card-in 0.3s ease forwards; }
.lh-c:nth-child(2) { animation-delay: 0.03s; }
.lh-c:nth-child(3) { animation-delay: 0.06s; }
.lh-c:nth-child(4) { animation-delay: 0.09s; }
.lh-c:nth-child(5) { animation-delay: 0.12s; }
.lh-c:nth-child(6) { animation-delay: 0.15s; }

/* Rank badge styling */
.lh-rank {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.lh-rank-noob { background: #30363d; color: #8b949e; }
.lh-rank-scriptkiddie { background: #3fb95020; color: #3fb950; border: 1px solid #3fb95040; }
.lh-rank-hacker { background: #58a6ff20; color: #58a6ff; border: 1px solid #58a6ff40; }
.lh-rank-elite { background: #d2992220; color: #d29922; border: 1px solid #d2992240; }
.lh-rank-l33t { background: #f8514920; color: #f85149; border: 1px solid #f8514940; }
.lh-rank-shadow { background: #bc4dff20; color: #bc4dff; border: 1px solid #bc4dff40; }
.lh-rank-ghost { background: #ff4d4d20; color: #ff4d4d; border: 1px solid #ff4d4d40; text-shadow: 0 0 8px #ff4d4d60; }

/* Progress ring */
.lh-ring {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: conic-gradient(var(--accent,#58a6ff) var(--pct,0%), var(--line,#30363d) 0%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.lh-ring::after {
  content: '';
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--card,#161b22);
  position: absolute;
}
.lh-ring span {
  position: relative; z-index: 1;
  font-size: .7rem; font-weight: 700;
}

/* Learning paths */
.lh-path {
  background: linear-gradient(135deg, var(--card,#161b22), #0d1117);
  border: 1px solid var(--line,#30363d);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.lh-path:hover {
  transform: translateY(-2px);
  border-color: var(--accent,#58a6ff);
}
.lh-path-progress {
  height: 4px;
  background: var(--line,#30363d);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.lh-path-progress div {
  height: 100%;
  background: var(--accent,#58a6ff);
  border-radius: 2px;
  transition: width 0.3s;
}

/* Completed topic celebration */
@keyframes confetti {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(-40px) rotate(360deg); opacity: 0; }
}

/* Quiz correct answer celebration */
.lh-qsub-ok {
  background: #3fb950 !important;
  position: relative;
  overflow: hidden;
}
.lh-qsub-ok::after {
  content: '+ correct';
  position: absolute;
  right: 12px;
  font-size: .7rem;
  opacity: .8;
}

/* Difficulty badge with glow for expert/master */
.lh-df[style*="bc4dff"] { text-shadow: 0 0 6px #bc4dff40; }
.lh-df[style*="ff4d4d"] { text-shadow: 0 0 6px #ff4d4d40; }

/* ================================================================
   GLOBAL POLISH — transitions, focus, depth
   ================================================================ */

/* Smooth transitions on all interactive elements */
a, button, input, select, textarea, .card, .panel, .chip, .btn,
.side-item, .mode-card, .arse-card, .res-card, .cs-card, .gh-row,
.user-row, .wl-item, .pos-item, .lh-c, .lh-ch, .lh-path {
  transition: all 0.2s ease;
}

/* Universal focus ring — visible but elegant */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, .btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 15%, transparent);
}

/* Subtle depth on cards */
.card, .panel {
  box-shadow: var(--sh-1);
  transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card:hover, .panel:hover {
  box-shadow: var(--sh-2);
}

/* ================================================================
   NAVIGATION — sidebar polish
   ================================================================ */

.side-item {
  position: relative;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.side-item:hover {
  background: color-mix(in srgb, var(--acc) 8%, transparent);
  border-left-color: color-mix(in srgb, var(--acc) 40%, transparent);
}
.side-item.active {
  border-left-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc);
  font-weight: 600;
}

/* ================================================================
   BUTTONS — gradients, glows, states
   ================================================================ */

.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Primary button glow */
.btn:not(.ghost):not(.danger):hover:not(:disabled) {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--acc) 35%, transparent);
}

/* Danger button red glow */
.btn.danger:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(255, 92, 108, 0.3);
  background: #e04050;
}

/* Ghost button border animation */
.btn.ghost {
  position: relative;
}
.btn.ghost:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 8%, transparent);
}

/* ================================================================
   CARDS & PANELS — depth and polish
   ================================================================ */

.card, .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

/* Mode selection cards */
.mode-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mode-card:hover {
  transform: translateY(-3px);
  border-color: var(--acc);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px color-mix(in srgb, var(--acc) 25%, transparent);
}

/* ================================================================
   CODE BLOCKS — terminal style
   ================================================================ */

.code-block, pre.code-block {
  background: #0a0e18;
  border: 1px solid var(--line);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.code-block code {
  display: block;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: #c9d1d9;
  overflow-x: auto;
}

/* Copy button in code blocks */
.cb-copy {
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  opacity: 0.6;
}
.code-block:hover .cb-copy, pre:hover .cb-copy {
  opacity: 1;
}
.cb-copy:hover {
  background: var(--acc) !important;
  color: #000 !important;
}

/* ================================================================
   FORMS — input polish
   ================================================================ */

input, textarea, select, .tk-f, .tk-in, .tk-search {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.15s ease;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg2);
}
input:hover, textarea:hover, select:hover,
.tk-f:hover, .tk-in:hover, .tk-search:hover {
  border-color: var(--line-2);
}
input:focus, textarea:focus, select:focus,
.tk-f:focus, .tk-in:focus, .tk-search:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 12%, transparent);
  outline: none;
}
::placeholder {
  color: var(--placeholder);
  opacity: 0.8;
}

/* ================================================================
   TYPOGRAPHY — hierarchy and readability
   ================================================================ */

.pg-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 4px;
}
.pg-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.pg-sub {
  color: var(--mut);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0 0 16px;
}
.muted {
  color: var(--mut);
}
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ================================================================
   ANIMATIONS — entrances, transitions
   ================================================================ */

/* Page content fade-in */
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
#view > * {
  animation: page-in 0.3s ease forwards;
}

/* Notification slide-in */
@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* Panel expand */
@keyframes panel-expand {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 2000px; }
}

/* Pulse for notifications */
@keyframes gentle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Skeleton loading placeholder */
@keyframes skeleton-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}

/* ================================================================
   CHIPS & BADGES — consistent styling
   ================================================================ */

.chip {
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.chip:hover {
  transform: translateY(-1px);
}
.chip.on {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acc) 30%, transparent);
}

.sev {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 4px;
}

.owner-badge {
  background: var(--acc);
  color: var(--bg);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ================================================================
   STAT CARDS — dashboard metrics
   ================================================================ */

.stat {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.stat-n {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ================================================================
   SCROLLBARS — subtle dark theme
   ================================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--line-2);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* ================================================================
   TOPBAR — glass effect refinement
   ================================================================ */

#topbar {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ================================================================
   RESPONSIVE — mobile polish
   ================================================================ */

@media (max-width: 768px) {
  .pg-h1 { font-size: 1.25rem; }
  #view { padding: 12px; }
  .stat-row { gap: 8px; }
  .stat { min-width: 0; flex: 1; padding: 10px; }
  .stat-n { font-size: 1.2rem; }
  .adm-cols, .home-cols { flex-direction: column; }
  .adm-side, .hc-side { width: 100%; }
  .btn { min-height: 44px; } /* touch-friendly */
  input, textarea, select { min-height: 42px; font-size: 16px; } /* prevent zoom on iOS */
  .lh-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .pg-h1 { font-size: 1.1rem; }
  .brand { font-size: 0.9rem; }
  .chip { font-size: 0.7rem; padding: 4px 8px; }
  .lh-stats { flex-direction: column; }
}

/* ================================================================
   SELECTION — branded highlight
   ================================================================ */

::selection {
  background: color-mix(in srgb, var(--acc) 35%, transparent);
  color: var(--txt);
}

/* ================================================================
   LOADING STATES — spinners and placeholders
   ================================================================ */

.loading-dots::after {
  content: '';
  animation: dots 1.5s infinite;
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* ================================================================
   TABLE POLISH
   ================================================================ */

table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  border-bottom: 2px solid var(--line);
}
td {
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  font-size: 0.85rem;
}
tr:hover td {
  background: color-mix(in srgb, var(--acc) 4%, transparent);
}

/* ================================================================
   TOAST NOTIFICATION — refined
   ================================================================ */

.toast-info, .toast-success, .toast-error {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

/* ================================================================
   API DASHBOARD
   ================================================================ */

.api-key-section .panel { max-width: 640px; }
.api-key-row { display: flex; gap: 8px; align-items: center; }
.api-key-input {
  flex: 1; background: var(--bg2, #111); border: 1px solid var(--brd, #333);
  color: var(--fg, #eee); padding: 10px 14px; border-radius: 6px; font-size: .88rem;
  letter-spacing: .5px;
}
.api-meter {
  height: 6px; background: var(--bg2, #111); border-radius: 3px; margin-top: 6px; overflow: hidden;
}
.api-meter > div {
  height: 100%; background: var(--acc, #0ff); border-radius: 3px; transition: width .4s ease;
}
.api-endpoint {
  border: 1px solid var(--brd, #333); border-radius: 8px; margin-bottom: 10px;
  overflow: hidden; transition: border-color .2s;
}
.api-endpoint:hover { border-color: var(--acc, #0ff); }
.api-ep-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
  background: var(--bg2, #111);
}
.api-method {
  font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0;
}
.api-method-post { background: rgba(0,200,150,.15); color: #0c8; }
.api-method-get  { background: rgba(100,180,255,.15); color: #6bf; }
.api-path { font-size: .85rem; color: var(--fg, #eee); }
.api-ep-desc { font-size: .8rem; margin-left: auto; }
.api-ep-toggle { font-size: 1.1rem; color: var(--dim, #888); font-weight: 700; margin-left: 8px; }
.api-ep-body { padding: 16px; border-top: 1px solid var(--brd, #333); }
.api-ep-section { margin-bottom: 14px; }
.api-ep-section:last-child { margin-bottom: 0; }
.api-ep-label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--dim, #888); margin-bottom: 6px; }
.api-code-block {
  position: relative; background: var(--bg2, #0a0a0a); border: 1px solid var(--brd, #333);
  border-radius: 6px; overflow: hidden;
}
.api-code-block pre {
  margin: 0; padding: 14px 16px; overflow-x: auto; font-size: .82rem; line-height: 1.6;
}
.api-code-block code { color: var(--fg, #eee); }
.api-code-header {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  padding: 6px 16px; color: var(--dim, #888); border-bottom: 1px solid var(--brd, #333);
}
.api-code-copy {
  position: absolute; top: 6px; right: 8px; font-size: .72rem; padding: 3px 10px;
  border-radius: 4px; background: var(--bg2, #111); color: var(--dim, #888);
  border: 1px solid var(--brd, #333); cursor: pointer; transition: color .2s, border-color .2s;
}
.api-code-copy:hover { color: var(--acc, #0ff); border-color: var(--acc, #0ff); }
.api-code-tabs { display: flex; gap: 0; margin-bottom: -1px; }
.api-tab {
  padding: 8px 18px; font-size: .82rem; background: transparent; color: var(--dim, #888);
  border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0;
  cursor: pointer; transition: color .2s, background .2s;
}
.api-tab.on { background: var(--bg2, #0a0a0a); color: var(--fg, #eee); border-color: var(--brd, #333); }
.api-tab:hover { color: var(--fg, #eee); }
.api-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.api-tier {
  border: 1px solid var(--brd, #333); border-radius: 10px; padding: 24px 20px;
  text-align: center; transition: border-color .3s, transform .2s;
}
.api-tier:hover { border-color: var(--acc, #0ff); transform: translateY(-2px); }
.api-tier-highlight { border-color: var(--acc, #0ff); box-shadow: 0 0 20px rgba(0,255,255,.06); }
.api-tier h3 { margin: 0 0 8px; font-size: 1.1rem; }
.api-tier-price { font-size: 1.6rem; font-weight: 700; color: var(--acc, #0ff); margin-bottom: 4px; }
.api-tier-calls { font-size: .82rem; color: var(--dim, #888); margin-bottom: 14px; }
.api-tier ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.api-tier li { font-size: .82rem; padding: 4px 0; color: var(--fg, #eee); }
.api-tier li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acc, #0ff); margin-right: 8px; vertical-align: middle; }


/* ---- Pricing Section ---- */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:960px;margin:32px auto 0;padding:0 16px}
.price-card{background:var(--card,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:16px;padding:32px 28px;position:relative;transition:transform .2s,border-color .3s}
.price-card:hover{transform:translateY(-4px);border-color:var(--acc,#00d4ff)}
.price-card.featured{border-color:var(--acc,#00d4ff);background:linear-gradient(160deg,rgba(0,212,255,.06),rgba(124,92,255,.04))}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--acc,#00d4ff);color:#000;font-size:.72rem;font-weight:700;padding:3px 14px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase}
.price-tier{font-size:1.3rem;font-weight:700;margin-bottom:4px}
.price-amount{font-size:2.8rem;font-weight:800;letter-spacing:-.02em;margin:8px 0}
.price-amount .price-period{font-size:.85rem;font-weight:400;color:var(--muted,#8892b0);margin-left:2px}
.price-desc{color:var(--muted,#8892b0);font-size:.85rem;margin:8px 0 20px}
.price-features{list-style:none;padding:0;margin:0 0 24px}
.price-features li{padding:6px 0;font-size:.85rem;color:var(--txt-2,#b4bcd0);border-bottom:1px solid var(--border,rgba(255,255,255,.06))}
.price-features li::before{content:"✓ ";color:var(--acc,#00d4ff);font-weight:700}
.price-features li:last-child{border-bottom:none}

/* ---- Product Cards ---- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:860px;margin:0 auto}
.product-card{background:var(--card,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:16px;padding:28px 24px;text-align:center;transition:transform .2s,border-color .3s}
.product-card:hover{transform:translateY(-4px);border-color:var(--acc,#00d4ff)}
.product-ico{margin:0 auto 16px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:color-mix(in srgb,var(--acc,#00d4ff) 12%,transparent)}
.product-ico .ico{width:24px;height:24px;stroke:var(--acc,#00d4ff)}
.product-card h3{font-size:1.15rem;margin:0 0 8px}
.product-card p{color:var(--muted,#8892b0);font-size:.85rem;margin:0 0 16px;line-height:1.5}
.product-link{color:var(--acc,#00d4ff);font-size:.85rem;font-weight:600;text-decoration:none}
.product-link:hover{text-decoration:underline}

/* ===== Premium .ai polish ===== */

/* Hero — bigger, more breathing room, subtle gradient glow */
.hero{padding:100px 0 80px;position:relative;overflow:hidden}
.hero-grid-bg{position:absolute;inset:0;opacity:.3;
  background-image:linear-gradient(color-mix(in srgb,var(--acc) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--acc) 8%,transparent) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 40%,#000 20%,transparent 70%);
  mask-image:radial-gradient(ellipse 70% 50% at 50% 40%,#000 20%,transparent 70%)}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;text-align:left}
@media(max-width:768px){.hero-inner{grid-template-columns:1fr;text-align:center}}
.hero-h1{max-width:none;font-family:var(--font-display)}
.grad-text{background:var(--grad-acc);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Hero trust badges */
.hero-trust{display:flex;gap:20px;font-size:.82rem;color:var(--mut);margin-top:20px;flex-wrap:wrap}
@media(max-width:768px){.hero-trust{justify-content:center}}
.tk{color:var(--ok);font-weight:700;margin-right:4px}

/* Terminal window in hero — glow effect */
.hero-visual .term-window{box-shadow:0 0 60px -15px color-mix(in srgb,var(--acc) 30%,transparent),var(--sh-2)}

/* Feature cards — hover glow */
.feat-ico{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:color-mix(in srgb,var(--acc) 10%,transparent);margin-bottom:14px}
.feat-ico .ico{width:20px;height:20px;stroke:var(--acc);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feat-card{transition:transform .2s ease,border-color .25s,box-shadow .25s}
.feat-card:hover{transform:translateY(-3px);border-color:var(--acc-line);box-shadow:0 8px 30px -12px color-mix(in srgb,var(--acc) 20%,transparent)}

/* Section subtitles */
.sec-sub{text-align:center;color:var(--mut);line-height:1.6;font-size:.95rem}

/* Steps — connect with a line */
.steps{position:relative}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}

/* CTA band — stronger glow */
.cta-band{position:relative;overflow:hidden}
.cta-glow{position:absolute;top:-50%;left:30%;width:40%;height:200%;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%);pointer-events:none}

/* Glow button */
.btn.glow{position:relative;overflow:hidden;
  box-shadow:0 0 20px -5px color-mix(in srgb,var(--acc) 50%,transparent)}
.btn.glow:hover{box-shadow:0 0 30px -5px color-mix(in srgb,var(--acc) 70%,transparent)}

/* Scroll reveal animations */
.sec-title,.feat-card,.product-card,.step,.cta-band-inner{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.sec-title.revealed,.feat-card.revealed,.product-card.revealed,.step.revealed,.cta-band-inner.revealed{opacity:1;transform:translateY(0)}

/* Footer — cleaner */
.site-foot{padding:40px 0 32px;border-top:1px solid var(--line)}
.foot-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-inner .brand{font-weight:800;font-size:1rem}
.foot-links{margin-left:auto;display:flex;gap:18px}
.foot-links a{color:var(--mut);font-size:.82rem;text-decoration:none;cursor:pointer}
.foot-links a:hover{color:var(--acc)}

/* Product cards — match feat cards but bigger */
.product-card{transition:transform .2s ease,border-color .25s,box-shadow .25s}
.product-card:hover{box-shadow:0 8px 30px -12px color-mix(in srgb,var(--acc) 20%,transparent)}

/* Term window polish */
.term-window{background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tw-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,var(--card))}
.tw-dot{width:11px;height:11px;border-radius:50%}
.tw-dot.r{background:#ff5f56}.tw-dot.y{background:#ffbd2e}.tw-dot.g{background:#27c93f}
.tw-title{font-size:.72rem;color:var(--mut);margin-left:4px;font-family:var(--font-mono)}
.tw-body{margin:0;padding:14px 16px;font-family:var(--font-mono);font-size:.82rem;line-height:1.7;overflow-x:auto}
.tw-line{display:block;opacity:0;animation:lineIn .3s ease forwards}
@keyframes lineIn{to{opacity:1}}
.tw-cursor{animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.c-pl{color:var(--ok)}.c-path{color:var(--acc)}.c-mut{color:var(--mut)}.c-ok{color:var(--ok)}.c-acc{color:var(--acc)}.c-bad{color:var(--bad)}

/* Mobile responsive */
@media(max-width:600px){
  .hero{padding:60px 0 50px}
  .hero-h1{font-size:1.8rem}
  .feat-grid,.product-grid,.steps{grid-template-columns:1fr}
  .cta-band-inner{flex-direction:column;text-align:center}
}

/* ===== Anthropic-grade landing redesign ===== */

/* Hero — mesh gradient background */
.hero{padding:120px 0 80px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-mesh{position:absolute;inset:0;
  background:radial-gradient(800px 400px at 20% 20%,color-mix(in srgb,var(--acc) 14%,transparent),transparent),
             radial-gradient(600px 600px at 80% 60%,color-mix(in srgb,var(--acc-2) 10%,transparent),transparent),
             radial-gradient(400px 400px at 50% 0%,color-mix(in srgb,var(--acc) 8%,transparent),transparent)}
.hero-grain{position:absolute;inset:0;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:256px}
.hero-inner{text-align:center;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:100px;
  border:1px solid var(--line);font-size:.76rem;font-weight:600;color:var(--txt-2);margin-bottom:28px;
  background:color-mix(in srgb,var(--card) 60%,transparent);backdrop-filter:blur(8px)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:dotPulse 2s ease infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero-h1{font-family:var(--font-display);font-size:clamp(2.4rem,5.5vw,4rem);font-weight:800;
  line-height:1.08;letter-spacing:-.03em;margin:0 0 20px}
.hero-rotate-wrap{display:inline-block;position:relative}
.hero-rotate{display:inline-block;transition:opacity .25s,transform .25s;color:var(--acc)}
.hero-sub{color:var(--mut);font-size:1.1rem;line-height:1.65;max-width:560px;margin:0 auto 32px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-cta .ghost{display:inline-flex;align-items:center}

/* Hero stats */
.hero-trust{display:flex;align-items:center;justify-content:center;gap:0;margin-top:48px;
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{text-align:center;padding:0 32px}
.trust-sep{width:1px;height:36px;background:var(--line)}
.trust-n{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--txt);letter-spacing:-.02em}
.trust-l{display:block;font-size:.72rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
@media(max-width:600px){.trust-item{padding:0 16px}.trust-n{font-size:1.3rem}}

/* Section labels (like Anthropic's eyebrow text) */
.sec-label{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc);text-align:center;margin-bottom:10px}
.sec-sub{text-align:center;color:var(--mut);font-size:.95rem;max-width:520px;margin:0 auto 40px;line-height:1.6}

/* Bento grid (like Linear/Vercel) */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bento-lg{grid-column:1/-1}
.bento-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;
  transition:border-color .3s,transform .2s,box-shadow .3s}
.bento-card:hover{border-color:var(--acc-line);transform:translateY(-2px);
  box-shadow:0 12px 40px -16px color-mix(in srgb,var(--acc) 18%,transparent)}
.bento-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--acc) 10%,transparent);margin-bottom:16px}
.bento-icon svg{width:22px;height:22px;color:var(--acc)}
.bento-card h3{font-size:1.2rem;margin:0 0 8px;font-weight:700}
.bento-card p{color:var(--mut);font-size:.88rem;line-height:1.6;margin:0 0 16px}
.bento-tag{display:inline-block;font-size:.7rem;font-weight:600;color:var(--acc);padding:4px 12px;
  border-radius:100px;border:1px solid color-mix(in srgb,var(--acc) 25%,transparent);
  background:color-mix(in srgb,var(--acc) 6%,transparent)}
@media(max-width:600px){.bento{grid-template-columns:1fr}}

/* Feature rows (alternating text + visual) */
.feature-rows{display:flex;flex-direction:column;gap:72px}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feature-row.reverse{direction:rtl}.feature-row.reverse>*{direction:ltr}
.feature-text h3{font-size:1.35rem;font-weight:700;margin:0 0 12px;font-family:var(--font-display)}
.feature-text p{color:var(--mut);font-size:.92rem;line-height:1.65;margin:0}
.feature-visual{position:relative}
.feature-visual .term-window{box-shadow:0 0 60px -15px color-mix(in srgb,var(--acc) 25%,transparent),var(--sh-2)}
@media(max-width:768px){.feature-row,.feature-row.reverse{grid-template-columns:1fr;direction:ltr}.feature-row.reverse>*{direction:ltr}}

/* Lab cards */
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lab-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  display:flex;align-items:center;gap:10px;font-size:.85rem;font-family:var(--font-mono)}
.lab-status{width:8px;height:8px;border-radius:50%}
.lab-status.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.lab-status.off{background:var(--line)}
.lab-port{margin-left:auto;color:var(--mut);font-size:.75rem}

/* Nexus stats grid */
.nexus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:24px}
.nx-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center;
  transition:border-color .3s,transform .2s}
.nx-card:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.nx-n{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--acc)}
.nx-l{font-size:.72rem;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.nx-details{margin-top:16px}
.nx-details summary{cursor:pointer;color:var(--acc);font-size:.85rem;font-weight:600;text-align:center;padding:12px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);list-style:none}
.nx-details summary::-webkit-details-marker{display:none}
.nx-details[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}
.nx-modules{border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;padding:20px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;background:var(--card)}
.nx-group h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);margin:0 0 8px}
.nx-group span{display:block;font-size:.82rem;color:var(--txt-2);padding:3px 0}

/* Timeline get-started */
.timeline{max-width:480px;margin:0 auto;position:relative;padding-left:40px}
.timeline::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl-step{position:relative;padding-bottom:32px}
.tl-step:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-40px;width:30px;height:30px;border-radius:50%;
  background:var(--acc);color:#04121a;font-weight:800;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;z-index:1}
.tl-content h3{margin:0 0 4px;font-size:1rem;font-weight:700}
.tl-content p{margin:0;color:var(--mut);font-size:.88rem;line-height:1.5}

/* GitHub cards */
.gh-cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.gh-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;
  text-decoration:none;min-width:220px;text-align:left;transition:border-color .3s,transform .2s}
.gh-card:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.gh-name{display:block;font-weight:700;font-size:.95rem;color:var(--txt);margin-bottom:4px;font-family:var(--font-mono)}
.gh-desc{display:block;font-size:.78rem;color:var(--mut)}

/* Final CTA */
.cta-final{padding:80px 0;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta-mesh{position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 50%,color-mix(in srgb,var(--acc) 12%,transparent),transparent)}
.cta-final h2{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;margin:0 0 8px}
.cta-sub{color:var(--mut);font-size:1rem;margin:0}

/* Footer — 4-column like Anthropic */
.foot{padding:48px 0 24px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
@media(max-width:768px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex;flex-direction:column;gap:6px}
.brand-name{font-weight:800;font-size:1.1rem;font-family:var(--font-display)}
.foot-tagline{color:var(--mut);font-size:.82rem}
.foot-col h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--mut);margin:0 0 12px}
.foot-col a{display:block;color:var(--txt-2);font-size:.85rem;text-decoration:none;padding:3px 0}
.foot-col a:hover{color:var(--acc)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap;gap:8px}
.foot-copy,.foot-note{font-size:.72rem;color:var(--mut)}

/* Scroll reveal */
.sec-title,.bento-card,.feature-row,.tl-step,.nx-card,.gh-card,.cta-final{
  opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.revealed{opacity:1;transform:translateY(0)}