/* Alpha-system Wiki — shared design system
   Ambient dark theme, gold accent (matches AlphaStudio brand) */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#050505; --bg-alt:#0a0a0a; --panel:#101010; --panel-2:#151515; --border:rgba(255,255,255,0.09);
  --text:#f3f2ee; --text-dim:#aeb0b8; --text-faint:#6d6f78;
  --gold1:#FF9400; --gold2:#FFBE00; --accent:#C8A96E; --glow:#FFD666;
  --gold1-rgb:255,148,0; --gold2-rgb:255,190,0; --glow-rgb:255,214,102;
  --border-gold:rgba(var(--gold1-rgb),0.30);
  --surface:rgba(255,255,255,0.035); --surface-2:rgba(255,255,255,0.065);
  --red:#FF5B5B; --green:#3ddc84; --blue:#5b9dff;
  --code-bg:#0c0c0c;
  --radius:14px; --radius-sm:9px;
  --topbar-h:60px;
  --maxw:920px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); position:relative; overflow-x:hidden;
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold2); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(var(--gold1-rgb),.28); color:#fff}
code,.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:.9em}
code{background:var(--code-bg); border:1px solid var(--border); border-radius:5px; padding:.15em .45em; color:var(--gold2)}
pre{
  background:var(--code-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 16px; overflow-x:auto; position:relative; margin:14px 0;
}
pre code{background:none; border:none; padding:0; color:var(--text); font-size:13px; line-height:1.6}
.copy-btn{
  position:absolute; top:8px; right:8px; font-size:11px; padding:4px 9px; border-radius:6px;
  background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim); cursor:pointer;
  font-family:inherit; transition:.25s var(--ease);
}
.copy-btn:hover{color:var(--gold2); border-color:var(--gold1); box-shadow:0 0 16px -4px rgba(var(--gold1-rgb),.5)}
.copy-btn.copied{color:var(--green); border-color:var(--green)}

/* ---------- Ambient background (fixed, decorative, non-interactive) ---------- */
.ambient{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.ambient .blob{position:absolute; border-radius:50%; filter:blur(110px)}
.ambient .b1{width:640px; height:640px; top:-260px; right:-120px; opacity:.5;
  background:radial-gradient(circle,rgba(var(--gold1-rgb),.32),transparent 70%); animation:float1 22s var(--ease) infinite alternate}
.ambient .b2{width:520px; height:520px; top:32%; left:-200px; opacity:.36;
  background:radial-gradient(circle,rgba(var(--gold2-rgb),.24),transparent 70%); animation:float2 26s var(--ease) infinite alternate}
.ambient .b3{width:760px; height:760px; bottom:-360px; left:38%; opacity:.28;
  background:radial-gradient(circle,rgba(var(--glow-rgb),.16),transparent 70%); animation:float3 30s var(--ease) infinite alternate}
@keyframes float1{to{transform:translate(-65px,55px) scale(1.08)}}
@keyframes float2{to{transform:translate(65px,80px) scale(1.06)}}
@keyframes float3{to{transform:translate(55px,-45px) scale(1.1)}}
#particles{position:fixed; inset:0; z-index:0; pointer-events:none}
#cursorGlow{position:fixed; width:520px; height:520px; z-index:0; pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%); transition:opacity .4s;
  background:radial-gradient(circle,rgba(255,158,20,.10),transparent 65%); mix-blend-mode:screen}
.grain{position:fixed; inset:0; z-index:1; 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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.ambient .blob{animation:none}}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--topbar-h);
  display:flex; align-items:center; gap:22px; padding:0 20px;
  background:rgba(5,5,5,0.66); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--border); transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.topbar .brand{display:flex; align-items:center; gap:9px; white-space:nowrap}
.topbar .brand .mark{height:26px; width:auto; filter:drop-shadow(0 0 10px rgba(var(--gold1-rgb),.45))}
.topbar .brand .ver{font-size:10.5px; color:var(--text-faint); border:1px solid var(--border); border-radius:20px; padding:2px 8px}
.topnav{display:flex; gap:2px; flex:1; overflow-x:auto}
.topnav a{
  font-size:13px; font-weight:600; color:var(--text-dim); padding:8px 12px; border-radius:8px; white-space:nowrap;
  transition:.2s var(--ease);
}
.topnav a:hover{color:var(--text); background:var(--surface); text-decoration:none}
.topnav a.current{color:var(--gold2); background:rgba(var(--gold1-rgb),.10); box-shadow:inset 0 0 0 1px var(--border-gold)}

.searchwrap{position:relative; width:230px; flex:0 0 auto}
#gsearch{
  width:100%; padding:8px 12px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:13px; outline:none; transition:.2s var(--ease);
}
#gsearch:focus{border-color:var(--gold1); background:var(--surface-2); box-shadow:0 0 0 3px rgba(var(--gold1-rgb),.12)}
.results{
  position:absolute; top:calc(100% + 8px); right:0; width:340px; max-height:420px; overflow-y:auto;
  background:rgba(12,12,12,.92); backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 20px 50px -16px rgba(0,0,0,.7); display:none; padding:6px;
}
.results.open{display:block}
.results a{display:block; padding:9px 11px; border-radius:8px; color:var(--text); font-size:13px}
.results a:hover{background:var(--surface); text-decoration:none}
.results a .rtitle{color:var(--gold2); font-weight:600; display:block}
.results a .rpage{color:var(--text-faint); font-size:11px}
.results .empty{padding:14px; color:var(--text-faint); font-size:13px; text-align:center}

/* ---------- Layout ---------- */
.shell{display:flex; max-width:1320px; margin:0 auto; position:relative; z-index:2}
.pagesidebar{
  width:230px; flex:0 0 230px; padding:28px 14px 60px;
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow-y:auto;
}
.pagesidebar .label{font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-faint); padding:0 10px 8px}
.pagesidebar a{
  display:block; padding:6px 10px; border-radius:8px; color:var(--text-dim); font-size:13px; margin-bottom:1px;
  transition:.2s var(--ease); border-left:2px solid transparent;
}
.pagesidebar a:hover{background:var(--surface); color:var(--text); text-decoration:none}
.pagesidebar a.active{color:var(--gold2); background:rgba(var(--gold1-rgb),.08); border-left-color:var(--gold1)}
.pagesidebar a.sub{padding-left:20px; font-size:12.5px}

main{flex:1; min-width:0; padding:36px 44px 100px; max-width:var(--maxw); animation:pageIn .55s var(--ease) both}
@keyframes pageIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){main{animation:none}}
@media (max-width: 980px){
  .shell{flex-direction:column}
  .pagesidebar{width:100%; flex:none; position:relative; height:auto; border-bottom:1px solid var(--border); padding:16px}
  main{padding:24px 18px 60px; max-width:100%}
  .searchwrap{width:150px}
  .topnav{display:none}
}

h1{font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; letter-spacing:-.01em; margin:4px 0 8px; color:#fff}
h2{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; margin:46px 0 4px; padding-top:10px; border-top:1px solid var(--border);
  color:#fff; scroll-margin-top:calc(var(--topbar-h) + 14px);
}
h2:first-of-type{border-top:none; margin-top:24px}
h3{font-family:'Space Grotesk',sans-serif; font-size:15px; margin:26px 0 10px; color:var(--gold2); letter-spacing:.2px; scroll-margin-top:calc(var(--topbar-h) + 14px)}
h4{font-size:13.5px; margin:16px 0 8px; color:var(--text)}
p{color:var(--text-dim)}
.lead{color:var(--text); font-size:15.5px}
.subtitle{color:var(--text-dim); font-size:15px; margin-bottom:18px}

/* ---------- Components ---------- */
.hero{
  position:relative; border:1px solid var(--border-gold); border-radius:var(--radius); padding:26px 28px; margin:18px 0 30px;
  background:radial-gradient(ellipse 90% 100% at 0% 0%,rgba(var(--gold1-rgb),.14),transparent 60%),linear-gradient(160deg,var(--panel),var(--bg-alt));
  overflow:hidden;
}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.badge{font-size:11.5px; padding:4px 10px; border-radius:20px; border:1px solid var(--border-gold); background:rgba(var(--gold1-rgb),.07); color:var(--text-dim)}
.badge b{color:var(--gold2)}

.hero-mark{height:clamp(42px,6vw,68px); width:auto; margin-bottom:16px; filter:drop-shadow(0 0 22px rgba(var(--gold1-rgb),.45)); animation:markbob 7s ease-in-out infinite}
@keyframes markbob{50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.hero-mark{animation:none}}

.cardgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:20px 0}
@media (max-width:700px){.cardgrid{grid-template-columns:1fr}}
.feature-card{
  position:relative; border:1px solid var(--border); background:linear-gradient(170deg,var(--surface),rgba(255,255,255,.008));
  border-radius:var(--radius); padding:18px 20px; overflow:hidden; transition:.4s var(--ease);
}
.feature-card::before{content:''; position:absolute; inset:0; border-radius:var(--radius); padding:1px;
  background:linear-gradient(155deg,rgba(var(--gold1-rgb),.5),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:.4s var(--ease); pointer-events:none}
.feature-card:hover{transform:translateY(-5px); border-color:transparent; background:linear-gradient(170deg,var(--surface-2),rgba(var(--gold1-rgb),.05))}
.feature-card:hover::before{opacity:1}
.feature-card .icon{font-size:20px; margin-bottom:8px; display:block; filter:drop-shadow(0 0 8px rgba(var(--gold1-rgb),.4))}
.feature-card h4{margin:0 0 6px; color:#fff; font-size:14.5px}
.feature-card p{margin:0; font-size:13px; color:var(--text-dim)}
.feature-card a.more{font-size:12px; display:inline-block; margin-top:8px; color:var(--gold2)}

.card{border:1px solid var(--border); background:linear-gradient(170deg,var(--surface),rgba(255,255,255,.006)); border-radius:var(--radius); padding:16px 18px; margin:14px 0; transition:.3s var(--ease)}
.card:hover{border-color:var(--border-gold)}
.card h4{margin:0 0 8px; font-size:13.5px; color:var(--gold2)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:800px){.grid3{grid-template-columns:1fr}}

.note{border-left:3px solid var(--gold1); background:rgba(var(--gold1-rgb),0.06); border-radius:0 8px 8px 0; padding:10px 14px; margin:14px 0; font-size:13.5px; color:var(--text-dim)}
.note b{color:var(--text)}
.note.warn{border-left-color:var(--red); background:rgba(255,91,91,0.06)}
.note.info{border-left-color:var(--blue); background:rgba(91,157,255,0.06)}

table{width:100%; border-collapse:collapse; margin:10px 0 6px; font-size:13.5px}
thead th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint); padding:8px 10px; border-bottom:1px solid var(--border)}
tbody td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text-dim)}
tbody tr:hover{background:rgba(var(--gold1-rgb),0.04)}
tbody tr.hide{display:none}
td.cmd{color:var(--text); white-space:nowrap}
td.cmd code{color:var(--gold2); border-color:transparent; background:transparent; padding:0; font-weight:600}
td.perm code{color:var(--accent)}
.alias{color:var(--text-faint); font-size:12px}

ul.plain{margin:6px 0; padding-left:20px; color:var(--text-dim)}
ul.plain li{margin:5px 0}
ul.plain code{color:var(--gold2)}
ol.steps{margin:10px 0; padding-left:22px; color:var(--text-dim)}
ol.steps li{margin:8px 0}

.filetree{font-family:"SFMono-Regular",Consolas,monospace; font-size:13px; background:var(--code-bg); border:1px solid var(--border); border-radius:10px; padding:16px 18px; color:var(--text-dim); line-height:1.85; overflow-x:auto}
.filetree .dir{color:var(--gold2)}
.filetree .comment{color:var(--text-faint)}

.pill{font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; background:rgba(var(--gold1-rgb),.09); color:var(--gold2); border:1px solid var(--border-gold); margin-left:8px; vertical-align:middle}
.kbd{font-family:monospace; font-size:11px; border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; padding:1px 6px; background:var(--panel-2); color:var(--text-dim)}

details.faq{border:1px solid var(--border); background:linear-gradient(170deg,var(--surface),rgba(255,255,255,.006)); border-radius:var(--radius-sm); margin:10px 0; padding:0; transition:.3s var(--ease)}
details.faq:hover{border-color:var(--border-gold)}
details.faq summary{
  cursor:pointer; padding:13px 16px; font-weight:600; color:var(--text); font-size:14px; list-style:none;
  display:flex; align-items:center; justify-content:space-between;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--gold2); font-size:18px; font-weight:400}
details.faq[open] summary::after{content:"–"}
details.faq .faqbody{padding:0 16px 16px; color:var(--text-dim); font-size:13.5px}

.pagenav{display:flex; justify-content:space-between; margin-top:56px; padding-top:20px; border-top:1px solid var(--border); gap:14px}
.pagenav a{border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; flex:1; color:var(--text); transition:.25s var(--ease); background:var(--surface)}
.pagenav a:hover{border-color:var(--gold1); background:var(--surface-2); text-decoration:none; transform:translateY(-2px)}
.pagenav .dir{font-size:11px; color:var(--text-faint); display:block; margin-bottom:2px}
.pagenav .next{text-align:right}

footer{position:relative; z-index:2; margin-top:60px; padding:22px 0; border-top:1px solid var(--border); color:var(--text-faint); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px}