/* ==========================================================
   DarkWiz Lab — shared page shell
   Tokens are identical to index.html and the Math Learning App
   so the whole estate reads as one product.
   ========================================================== */
:root, [data-theme="dark"]{
  --bg:#0B0E1F; --bg-2:#070915;
  --panel:#141A33; --panel-2:#1B2242;
  --line:rgba(140,160,255,.14); --line-hi:rgba(140,160,255,.30);
  --violet:#7B5CFF; --cyan:#22D3EE; --magenta:#FF5CA8; --lime:#7CFFB2; --amber:#FFC65C;
  --ink:#EEF1FF; --muted:#8E97C4; --muted-2:#7C86B8;
  --grad:linear-gradient(135deg,#7B5CFF 0%,#22D3EE 100%);
  --grid:rgba(123,92,255,.06);
  --glow-a:rgba(123,92,255,.30); --glow-b:rgba(34,211,238,.16);
  --sunken:rgba(7,9,21,.5); --field:rgba(255,255,255,.05); --track:rgba(255,255,255,.09);
  --card-shadow:none; --hair:rgba(140,160,255,.10);
}
[data-theme="light"]{
  --bg:#F3F6FB; --bg-2:#E8EDF7; --panel:#FFFFFF; --panel-2:#FFFFFF;
  --line:rgba(23,34,59,.12); --line-hi:rgba(83,48,220,.30);
  --violet:#5330DC; --cyan:#0B7C93; --magenta:#C71B69; --lime:#0F8B52; --amber:#A96C08;
  --ink:#17223B; --muted:#5A6780; --muted-2:#5F6884;
  --grad:linear-gradient(135deg,#5330DC 0%,#0FA3C0 100%);
  --grid:rgba(47,75,208,.06);
  --glow-a:rgba(83,48,220,.12); --glow-b:rgba(15,163,192,.12);
  --sunken:#F6F8FD; --field:#F6F8FD; --track:rgba(23,34,59,.10);
  --card-shadow:0 6px 26px rgba(23,34,59,.07); --hair:rgba(23,34,59,.08);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/56px 56px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 78%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px 420px at 12% -6%,var(--glow-a),transparent 70%),
    radial-gradient(560px 380px at 92% 4%,var(--glow-b),transparent 70%);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}

.wrap{width:min(760px,100% - 40px); margin-inline:auto}
.wrap-wide{width:min(1180px,100% - 40px); margin-inline:auto}

h1,h2,h3{font-family:'Space Grotesk',sans-serif; line-height:1.09; letter-spacing:-.025em;
  font-weight:700; overflow-wrap:break-word}
h1{font-size:clamp(32px,5.4vw,52px)}
h3{font-size:18px; letter-spacing:-.01em}
.grad-txt{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{color:var(--muted); font-size:clamp(15px,1.5vw,17.5px); line-height:1.7; max-width:62ch}
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:22px; height:2px; border-radius:2px; background:var(--grad); flex:none}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 76%,transparent);
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.site-head.stuck{border-bottom-color:var(--line)}
.head-row{display:flex; align-items:center; gap:14px; height:66px}
.mark{display:flex; align-items:center; gap:11px; margin-right:auto}
.mark-badge{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;flex:none}
.mark-badge svg{width:19px;height:19px;display:block}
.mark-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17.5px;
  letter-spacing:-.02em;white-space:nowrap}
.mark-name span{color:var(--muted);font-weight:500}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  display:grid;place-items:center;font-size:15px;transition:.18s;flex:none}
.icon-btn:hover{border-color:var(--line-hi);background:var(--field)}
.back-link{font-size:14px;color:var(--muted);padding:8px 12px;border-radius:9px;transition:.18s}
.back-link:hover{color:var(--ink);background:var(--field)}

/* ---------- page shell ---------- */
.page{padding:clamp(34px,5vw,58px) 0 clamp(50px,7vw,84px)}
.page-head{display:flex;flex-direction:column;gap:16px;margin-bottom:30px}

/* ---------- cards ---------- */
.card{
  border:1px solid var(--line); border-radius:18px; background:var(--panel);
  padding:22px 22px 24px; margin-bottom:16px; box-shadow:var(--card-shadow);
}
.card-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.card-dot{width:9px;height:9px;border-radius:50%;background:var(--grad);flex:none}
.card p{color:var(--muted);font-size:15px;line-height:1.7}
.card p + p{margin-top:11px}
.note{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted-2);
  line-height:1.72; margin-top:12px;
}
.note b{color:var(--ink);font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;border-radius:12px;font-weight:600;font-size:14.5px;
  border:1px solid transparent;transition:transform .16s,border-color .18s,box-shadow .22s;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -12px var(--violet)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-hi);background:var(--field)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--cyan)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* ---------- fact list ---------- */
.facts{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.fact{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.fact i{font-style:normal;color:var(--lime);flex:none;font-size:13px;line-height:1.7}
.fact b{color:var(--ink);font-weight:600}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:36px 0 44px}
.foot-grid{display:flex;flex-wrap:wrap;gap:26px 40px;align-items:flex-start}
.foot-blurb{color:var(--muted);font-size:13.5px;max-width:38ch;margin-top:12px;line-height:1.7}
.foot-links{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.foot-links b{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);font-weight:500;margin-bottom:3px}
.foot-links a{color:var(--muted);transition:.16s}
.foot-links a:hover{color:var(--cyan)}
.foot-bar{margin-top:32px;padding-top:20px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2)}

@media (min-width:940px){
  .foot-grid{flex-wrap:nowrap;gap:60px}
  .foot-brand{flex:1}
}
@media (max-width:480px){
  .wrap,.wrap-wide{width:calc(100% - 32px)}
  .mark-name{font-size:15.5px}
  .btn-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}