/* Aethyr docs: Arcane Terminal, tuned for reading */
:root{
  --void:#070710; --void-2:#0b0b1a; --panel:rgba(20,22,46,.5);
  --cyan:#1ce6ff; --magenta:#ff2bd6; --violet:#9b6bff; --ember:#ff8a4c;
  --ink:#e8ecff; --ink-2:#c3c9ec; --ink-dim:#8b93c4; --line:rgba(130,150,230,.16);
  --f-display:'Chakra Petch',sans-serif; --f-arcane:'Cinzel',serif;
  --f-body:'Sora',sans-serif; --f-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --sb:280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{font-family:var(--f-body);background:var(--void);color:var(--ink-2);line-height:1.7;
  -webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
::selection{background:var(--magenta);color:#0a0a14}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(80% 60% at 100% 0,rgba(155,107,255,.12),transparent 60%),
   radial-gradient(70% 60% at 0 8%,rgba(28,230,255,.1),transparent 55%);}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* layout */
.wrap{position:relative;z-index:1;display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  border-right:1px solid var(--line);background:rgba(8,8,18,.7);backdrop-filter:blur(10px);
  padding:26px 22px 60px}
.side .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--f-arcane);
  font-weight:700;font-size:1.08rem;color:var(--ink);letter-spacing:.03em;margin-bottom:1.6rem}
.side .brand .sig{width:18px;height:18px;vertical-align:-3px;
  filter:drop-shadow(0 0 8px rgba(28,230,255,.6));animation:spin 9s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.side .home{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:1.6rem}
.side nav h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--violet);margin:1.5rem 0 .5rem}
.side nav a{display:block;color:var(--ink-dim);padding:.32rem 0 .32rem .8rem;font-size:.92rem;
  border-left:2px solid transparent;transition:color .2s,border-color .2s}
.side nav a:hover{color:var(--ink);text-decoration:none}
.side nav a.active{color:var(--cyan);border-left-color:var(--cyan)}

.main{min-width:0;padding:0 0 120px}
.topbar{position:sticky;top:0;z-index:5;display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:14px clamp(20px,4vw,56px);border-bottom:1px solid var(--line);
  background:rgba(7,7,16,.78);backdrop-filter:blur(12px)}
.topbar .crumbs{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;color:var(--ink-dim)}
.topbar .crumbs b{color:var(--cyan);font-weight:500}
.topbar .badge{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;color:#06060f;
  background:linear-gradient(100deg,var(--cyan),var(--magenta));padding:.25rem .6rem;border-radius:3px}

.doc{max-width:820px;padding:clamp(34px,5vw,64px) clamp(20px,4vw,56px)}
.doc .lead{font-size:1.15rem;color:var(--ink);font-weight:300;margin:.4rem 0 2rem;max-width:60ch}
.doc h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,4.5vw,3rem);
  line-height:1.05;color:var(--ink);letter-spacing:-.01em}
.doc h1 .arc{font-family:var(--f-arcane);
  background:linear-gradient(100deg,var(--cyan),var(--violet) 50%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.doc h2{font-family:var(--f-display);font-weight:600;font-size:1.7rem;color:var(--ink);
  margin:2.8rem 0 1rem;padding-top:1rem;border-top:1px solid var(--line)}
/* clear the sticky .topbar (~50px) when an in-page anchor lands on a heading */
.doc h2[id],.doc [id]{scroll-margin-top:78px}
.doc h3{font-family:var(--f-display);font-weight:600;font-size:1.2rem;color:var(--ink);margin:1.8rem 0 .6rem}
.doc p{margin:.8rem 0;max-width:66ch}
.doc ul,.doc ol{margin:.8rem 0 .8rem 1.3rem;max-width:64ch}
.doc li{margin:.4rem 0}
.doc strong{color:var(--ink)}
.doc code{font-family:var(--f-mono);font-size:.86em;color:var(--cyan);
  background:rgba(28,230,255,.08);padding:.08em .4em;border-radius:3px;border:1px solid rgba(28,230,255,.14)}
.doc pre{margin:1.1rem 0;background:rgba(6,6,14,.9);border:1px solid var(--line);border-radius:8px;
  overflow:auto;box-shadow:inset 0 0 50px rgba(28,230,255,.03)}
.doc pre code{display:block;padding:18px 20px;color:var(--ink-2);background:none;border:none;
  font-size:.84rem;line-height:1.75}
.doc pre .k{color:var(--magenta)}.doc pre .s{color:#9af0c0}.doc pre .c{color:var(--ink-dim)}
.doc pre .u{color:var(--cyan)}.doc pre .a{color:var(--violet)}

/* callouts */
.note{margin:1.3rem 0;padding:16px 18px 16px 46px;border:1px solid var(--line);border-radius:8px;
  position:relative;background:rgba(20,22,46,.4)}
.note::before{position:absolute;left:16px;top:15px;font-size:1.1rem}
.note.tip{border-color:rgba(28,230,255,.35)}.note.tip::before{content:"✦";color:var(--cyan)}
.note.warn{border-color:rgba(255,138,76,.4)}.note.warn::before{content:"⚠";color:var(--ember)}
.note.arc{border-color:rgba(155,107,255,.4)}.note.arc::before{content:"◈";color:var(--violet)}
.note p{margin:.3rem 0}.note strong{color:var(--ink)}

/* audience pills */
.aud{display:inline-flex;gap:.4rem;align-items:center;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:20px;padding:.2rem .7rem;margin:0 .35rem .35rem 0}
.aud.new{color:var(--cyan);border-color:rgba(28,230,255,.3)}
.aud.vet{color:var(--violet);border-color:rgba(155,107,255,.3)}

/* SKU badges */
.sku{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.12rem .45rem;border-radius:3px;vertical-align:middle;margin-left:.4rem}
.sku.fab{color:#06060f;background:linear-gradient(100deg,var(--cyan),var(--magenta))}

/* story cards (tutorials index) */
.stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:1.6rem 0}
.story{display:block;padding:22px;border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(160deg,rgba(20,22,46,.5),rgba(10,10,22,.35));transition:transform .3s var(--ease),border-color .3s}
.story:hover{transform:translateY(-5px);border-color:var(--cyan);text-decoration:none}
.story .g{font-size:1.8rem;filter:drop-shadow(0 0 12px rgba(155,107,255,.5))}
.story h3{font-family:var(--f-display);color:var(--ink);margin:.6rem 0 .3rem;font-size:1.15rem}
.story p{color:var(--ink-dim);font-size:.9rem;margin:0}
.story .via{display:block;margin-top:.7rem;font-family:var(--f-mono);font-size:.7rem;color:var(--cyan);letter-spacing:.08em}

/* dialogue blocks for tutorials */
.chat{margin:1.2rem 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(6,6,14,.7)}
.chat .turn{padding:14px 18px;border-bottom:1px solid var(--line);font-size:.95rem}
.chat .turn:last-child{border-bottom:none}
.chat .who{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.3rem}
.chat .you .who{color:var(--cyan)}.chat .ai .who{color:var(--violet)}
.chat .ai{background:rgba(155,107,255,.05)}
.chat .tools{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-dim)}
.chat .tools b{color:var(--ember);font-weight:500}

/* tool reference table */
.cat{margin:2rem 0 1rem}
.cat h2{display:flex;align-items:baseline;gap:.6rem}
.cat h2 .n{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-dim);font-weight:400}
.tools{width:100%;border-collapse:collapse;font-size:.9rem}
.tools td{padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.tools td:first-child{white-space:nowrap;width:1%}
.tools .t{font-family:var(--f-mono);font-size:.82rem;color:var(--cyan)}
.tools .d{color:var(--ink-dim)}

.pager{display:flex;justify-content:space-between;gap:14px;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.pager a{font-family:var(--f-display);font-size:.95rem}

@media(max-width:880px){
  :root{--sb:0}
  .wrap{grid-template-columns:1fr}
  .side{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}