/* Shared appendix stylesheet — matches main deck */
:root{
  --bg:#0A1628; --bg-2:#091324; --panel:#0F1E37; --panel-2:#0B1729;
  --ink:#EAF2FF; --ink-2:#9FB3D1; --ink-3:#64809F;
  --line:#1E3558; --line-2:#294B7A;
  --cyan:#4FC6E8; --cyan-2:#5796CC; --cyan-soft:rgba(79,198,232,0.14);
  --danger:#FF8A8A; --ok:#6FE3B6; --accent:#A88BFF;
  --maxw:1180px;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:var(--cyan);text-decoration:none;} a:hover{text-decoration:underline;}
code,pre,.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
b{font-weight:700; color:var(--ink);}
em{color:var(--accent); font-style:normal;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
section{position:relative; padding:100px 0; border-bottom:1px solid var(--line);}
section:last-child{border-bottom:none;}

nav.topnav{position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px); background:rgba(10,22,40,0.82);
  border-bottom:1px solid var(--line);}
nav .inner{max-width:var(--maxw); margin:0 auto; padding:14px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;}
nav .logo{display:flex; align-items:center; gap:12px;}
nav .logo img{height:22px; display:block;}
nav .logo .crumb{font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-3); padding-left:12px; border-left:1px solid var(--line-2);}
nav .links{display:flex; gap:22px; font-size:13px; color:var(--ink-2);
  letter-spacing:0.08em; text-transform:uppercase;}
nav .links a{color:var(--ink-2);} nav .links a:hover{color:var(--cyan); text-decoration:none;}
nav .links a.active{color:var(--cyan);}
nav .cta{font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--cyan); color:var(--cyan);
  border-radius:999px; font-weight:700;}
nav .cta:hover{background:var(--cyan-soft); text-decoration:none;}
@media (max-width:860px){ nav .links{display:none;} }

.eyebrow{font-size:13px; letter-spacing:0.24em; text-transform:uppercase; color:var(--cyan);
  font-weight:700; display:inline-flex; align-items:center; gap:12px;}
.eyebrow .bar{width:32px; height:2px; background:var(--cyan);}
h1,h2,h3{letter-spacing:-0.02em; margin:0; font-weight:800; line-height:1.08; color:var(--ink);}
h1{font-size:clamp(36px,5.5vw,68px);}
h2{font-size:clamp(28px,3.8vw,44px);}
h3{font-size:20px; font-weight:700; letter-spacing:-0.01em;}
.lede{font-size:clamp(17px,1.3vw,20px); color:var(--ink-2); max-width:760px; line-height:1.55;}
.hl{background:linear-gradient(180deg,#8DDCF4 0%, #4FC6E8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.num{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink-3);
  letter-spacing:0.14em; display:flex; align-items:center; gap:10px;}
.num::before{content:""; width:14px; height:1px; background:var(--ink-3);}

.section-head{display:flex; flex-direction:column; gap:16px; margin-bottom:48px; max-width:900px;}
.panel{background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line); border-radius:18px; padding:28px;}

.hero{padding:120px 0 80px;
  background:radial-gradient(1100px 500px at 80% 0%, rgba(79,198,232,0.12), transparent 60%);}
.hero .crumbs{color:var(--ink-3); font-size:12px; letter-spacing:0.2em;
  text-transform:uppercase; display:flex; gap:10px; align-items:center; margin-bottom:16px;}
.hero .crumbs a{color:var(--ink-2);} .hero .crumbs a:hover{color:var(--cyan);}
.hero .crumbs .sep{color:var(--line-2);}
.hero .use{margin-top:24px; display:inline-flex; gap:10px; align-items:center;
  font-size:13px; color:var(--ink-2);
  background:rgba(168,139,255,0.1); border:1px solid rgba(168,139,255,0.3);
  padding:8px 14px; border-radius:999px;}
.hero .use b{color:var(--accent); letter-spacing:0.14em; text-transform:uppercase; font-size:11px;}

.cardgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.cardgrid .c{padding:24px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);}
.cardgrid .c .k{font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cyan); font-weight:700;}
.cardgrid .c h4{margin:10px 0 8px; font-size:17px; font-weight:700;}
.cardgrid .c p{margin:0; color:var(--ink-2); font-size:14px;}
@media (max-width:860px){ .cardgrid{grid-template-columns:1fr;} }

.backbar{padding:40px 0; border-top:1px solid var(--line); background:var(--bg-2);}
.backbar .inner{max-width:var(--maxw); margin:0 auto; padding:0 40px;
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.backbar a{font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-2); display:inline-flex; gap:8px; align-items:center;}
.backbar a:hover{color:var(--cyan); text-decoration:none;}
.backbar .apps{display:flex; gap:16px; flex-wrap:wrap;}

footer{border-top:1px solid var(--line); padding:36px 0 32px; background:var(--bg-2);}
footer .inner{max-width:var(--maxw); margin:0 auto; padding:0 40px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  color:var(--ink-3); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;}
footer img{height:22px;}