/* ============================================================================
   METATRIX · ATLAS + TOOLS  — shared theme for the Atlas hub and tool pages.
   Standalone (these pages are plain HTML served by the zero-dep node server).
   ========================================================================== */
:root{
  --a-bg:#07080c; --a-bg2:#0b0d13; --a-card:rgba(255,255,255,.025); --a-card2:rgba(255,255,255,.05);
  --a-ink:#f5f7fb; --a-dim:#9aa3b2; --a-faint:#5c6575; --a-line:rgba(255,255,255,.10); --a-line2:rgba(255,255,255,.2);
  --a-phos:#3eff8a; --a-glow:0 0 8px rgba(62,255,138,.55);
  --a-ice:#3fb6ff; --a-amber:#ffb84d; --a-blood:#ff4d4d; --a-violet:#a78bfa; --a-orange:#ff7a18;
  --a-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --a-body:system-ui,'Segoe UI',Roboto,sans-serif;
  --a-disp:'Iowan Old Style','Palatino Linotype',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 700px at 50% -10%,#11151f 0%,var(--a-bg) 60%);
  color:var(--a-ink);font-family:var(--a-body);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
.a-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- top bar -------------------------------------------------------------*/
.a-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 20px;border-bottom:1px solid var(--a-line);background:rgba(7,8,12,.72);backdrop-filter:blur(12px)}
.a-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:700 12px/1 var(--a-mono);
  letter-spacing:.28em;text-transform:uppercase;color:var(--a-ink)}
.a-brand .d{width:7px;height:7px;border-radius:50%;background:var(--a-phos);box-shadow:var(--a-glow)}
.a-crumb{font:600 10px/1 var(--a-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--a-faint)}
.a-top .grow{margin-left:auto}
.a-navlink{font:600 10px/1 var(--a-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--a-dim);
  text-decoration:none;padding:7px 11px;border:1px solid var(--a-line);border-radius:999px;transition:.15s}
.a-navlink:hover{color:var(--a-ink);border-color:var(--a-line2)}
.a-status{display:inline-flex;align-items:center;gap:7px;font:600 9px/1 var(--a-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--a-dim);padding:6px 11px;border:1px solid var(--a-line);border-radius:999px}
.a-status .dot{width:7px;height:7px;border-radius:50%;background:var(--a-faint)}
.a-status .dot.on{background:var(--a-phos);box-shadow:var(--a-glow);animation:aPulse 2.4s ease-in-out infinite}
.a-status .dot.off{background:var(--a-amber);box-shadow:0 0 8px rgba(255,184,77,.6)}
@keyframes aPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---- hero / page header --------------------------------------------------*/
.a-wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:34px 20px 90px}
.a-kicker{font:600 10px/1 var(--a-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--a-faint)}
.a-h1{font-family:var(--a-disp);font-style:italic;font-weight:400;font-size:clamp(38px,6vw,72px);line-height:.92;
  letter-spacing:-.02em;margin:14px 0 0;background:linear-gradient(180deg,#3FB6FF,#1B7FB8 40%,#B91C1C 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.a-lede{max-width:640px;margin:16px 0 0;color:var(--a-dim);font-size:16px;line-height:1.6}
.a-note{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--a-line);
  border-radius:10px;background:rgba(62,255,138,.04);font:500 12px/1.4 var(--a-body);color:var(--a-dim)}
.a-note b{color:var(--a-phos)}

/* ---- category filter chips ----------------------------------------------*/
.a-filters{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 6px}
.a-filter{font:600 11px/1 var(--a-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--a-dim);
  background:transparent;border:1px solid var(--a-line);border-radius:999px;padding:8px 13px;cursor:pointer;transition:.15s}
.a-filter:hover{color:var(--a-ink);border-color:var(--a-line2)}
.a-filter[aria-pressed="true"]{color:#06140b;background:var(--a-phos);border-color:var(--a-phos);box-shadow:var(--a-glow)}

/* ---- section heading -----------------------------------------------------*/
.a-sec{margin:40px 0 14px;display:flex;align-items:baseline;gap:12px}
.a-sec h2{font-family:var(--a-disp);font-style:italic;font-weight:400;font-size:clamp(24px,3.4vw,38px);margin:0;color:var(--a-ink)}
.a-sec .tag{font:600 9px/1 var(--a-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--a-faint)}
.a-sec .line{flex:1;height:1px;background:var(--a-line)}

/* ---- cards grid ----------------------------------------------------------*/
.a-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.a-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--a-line);
  border-radius:14px;background:var(--a-card);text-decoration:none;transition:.18s;min-height:150px;overflow:hidden}
.a-card:hover{transform:translateY(-3px);border-color:var(--a-line2);background:var(--a-card2);
  box-shadow:0 16px 50px rgba(0,0,0,.4)}
.a-card .top{display:flex;align-items:center;gap:9px}
.a-card .ic{font-size:20px;line-height:1;filter:saturate(1.1)}
.a-card h3{margin:0;font:700 15px/1.2 var(--a-body);color:var(--a-ink);letter-spacing:-.01em}
.a-card .what{font-size:12.5px;line-height:1.5;color:var(--a-dim);margin:0}
.a-card .use{font-size:11.5px;line-height:1.45;color:var(--a-faint);margin:0}
.a-card .foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:8px}
.a-badge{font:700 8.5px/1 var(--a-mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:6px;border:1px solid}
.a-badge.live{color:#06140b;background:var(--a-phos);border-color:var(--a-phos)}
.a-badge.embed{color:var(--a-ice);border-color:rgba(63,182,255,.4);background:rgba(63,182,255,.06)}
.a-badge.ext{color:var(--a-amber);border-color:rgba(255,184,77,.4);background:rgba(255,184,77,.06)}
.a-card .arrow{margin-left:auto;font:700 10px/1 var(--a-mono);letter-spacing:.12em;color:var(--a-faint);transition:.18s}
.a-card:hover .arrow{color:var(--a-phos);transform:translateX(2px)}
.a-card .accent{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--a-phos));opacity:.7}
.a-card.hidden{display:none}

/* ---- tool page layout ----------------------------------------------------*/
.tool{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.tool.split{grid-template-columns:380px minmax(0,1fr)}}
.panel{border:1px solid var(--a-line);border-radius:14px;background:var(--a-card);overflow:hidden}
.panel-h{padding:11px 15px;border-bottom:1px solid var(--a-line);font:600 10px/1 var(--a-mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--a-dim);display:flex;align-items:center;gap:9px}
.panel-b{padding:16px}
label.fld{display:block;margin:0 0 13px}
label.fld>span{display:block;font:600 9.5px/1 var(--a-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--a-faint);margin-bottom:6px}
.inp,select.inp,textarea.inp{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--a-line2);border-radius:10px;
  color:var(--a-ink);font:400 14px/1.5 var(--a-body);padding:10px 12px;outline:none;transition:.15s}
.inp:focus,textarea.inp:focus,select.inp:focus{border-color:var(--a-phos);box-shadow:0 0 0 3px rgba(62,255,138,.15)}
textarea.inp{resize:vertical;min-height:90px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>label.fld{flex:1;min-width:120px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font:700 11px/1 var(--a-mono);letter-spacing:.16em;text-transform:uppercase;padding:12px 18px;border-radius:11px;
  background:var(--a-phos);color:#06140b;transition:.15s}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--a-line2);color:var(--a-dim)}
.btn.ghost:hover{color:var(--a-ink);border-color:var(--a-phos)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font:600 11px/1.3 var(--a-body);color:var(--a-dim);border:1px solid var(--a-line);border-radius:999px;
  background:transparent;padding:7px 11px;cursor:pointer;text-align:left;transition:.15s}
.chip:hover{color:var(--a-ink);border-color:var(--a-phos);background:rgba(62,255,138,.05)}

/* result rendering */
.out{font-size:14.5px;line-height:1.65;color:var(--a-ink)}
.out p{margin:0 0 .6em}.out strong{color:#fff}
.out h3{font-family:var(--a-disp);font-style:italic;font-weight:400;font-size:24px;margin:.2em 0 .4em;color:var(--a-ink)}
.out ul,.out ol{margin:.3em 0 .7em;padding-left:1.3em}.out li{margin:.2em 0}
.out code{background:rgba(255,255,255,.08);padding:.1em .35em;border-radius:4px;font:.9em var(--a-mono)}
.muted{color:var(--a-faint);font-size:12.5px}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.b{font:700 9px/1 var(--a-mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:7px;border:1px solid var(--a-line2);color:var(--a-dim)}
.b.g{color:var(--a-phos);border-color:rgba(62,255,138,.4);background:rgba(62,255,138,.06)}
.b.a{color:var(--a-amber);border-color:rgba(255,184,77,.4);background:rgba(255,184,77,.06)}
.b.i{color:var(--a-ice);border-color:rgba(63,182,255,.4);background:rgba(63,182,255,.06)}
.card2{border:1px solid var(--a-line);border-radius:12px;background:var(--a-bg2);padding:14px;margin:0 0 11px}
.card2 .n{font:700 11px/1 var(--a-mono);color:var(--a-phos);margin-right:8px}
.disclaimer{margin-top:16px;padding:11px 14px;border:1px solid rgba(255,184,77,.3);border-radius:10px;
  background:rgba(255,184,77,.05);font-size:12px;line-height:1.55;color:var(--a-amber)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(62,255,138,.25);border-top-color:var(--a-phos);
  border-radius:50%;animation:aSpin .7s linear infinite;vertical-align:-2px}
@keyframes aSpin{to{transform:rotate(360deg)}}
.empty{color:var(--a-faint);font-size:13px;line-height:1.6;text-align:center;padding:30px 14px}

/* code/preview (forge) */
.codepre{margin:0;padding:13px;overflow:auto;max-height:360px;background:#05070b;border-radius:10px;
  font:12.5px/1.55 var(--a-mono);color:#dfe7ef;white-space:pre;border:1px solid var(--a-line)}
.frame{width:100%;height:420px;border:1px solid var(--a-line);border-radius:10px;background:#fff;display:block}
.tabs{display:flex;gap:6px;margin:0 0 12px}
.tab{font:700 10px/1 var(--a-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--a-dim);
  background:transparent;border:1px solid var(--a-line);border-radius:8px;padding:8px 12px;cursor:pointer}
.tab[aria-selected="true"]{color:#06140b;background:var(--a-ice);border-color:var(--a-ice)}

/* graph (learn map) */
.graphwrap{position:relative;width:100%;height:560px;border:1px solid var(--a-line);border-radius:12px;
  background:radial-gradient(700px 400px at 50% 0%,#0e131c,var(--a-bg2));overflow:hidden}
.graphwrap svg{width:100%;height:100%;display:block}
.gnode{cursor:pointer}
.gnode rect{transition:.15s}
.gnode:hover rect{stroke:var(--a-phos)}

footer.a-foot{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:26px 20px 50px;
  border-top:1px solid var(--a-line);color:var(--a-faint);font:400 11px/1.7 var(--a-mono)}
footer.a-foot a{color:var(--a-dim);text-decoration:none;border-bottom:1px dotted var(--a-line2)}
footer.a-foot a:hover{color:var(--a-ink)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:90;opacity:0;
  background:rgba(8,9,13,.95);border:1px solid var(--a-line2);border-radius:10px;padding:10px 16px;
  font:600 12px var(--a-body);color:var(--a-ink);box-shadow:0 12px 40px rgba(0,0,0,.5);transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}