/* Agent Big Head's Discord setup page: a public exception with its own stylesheet so the
   company's Astro bundles stay behind the password. Genius theme, as on the contact page
   (Solar Safari night sky, paper objects, the Solar Compass), with the hyp.yoga pages' layout
   language: a color identity per section, ringed icons, cards and panels, and a lively backdrop.
   All decoration is static. There is no looping motion and no entrance animation; the only
   motion is the small lift on hover (Joshua's rule from the hyp.yoga redesign). */
@font-face{font-family:Newsreader;src:url('./newsreader.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url('./newsreader-italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('./dm-sans.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}

:root{
  --sky:#10132b;--ivory:#fffaf4;--paper:#fffdf7;--ink:#17184b;--ink-soft:#48496c;--line:#dcdbdf;
  --text:#f8f5ee;--text-muted:#e0e0e7;--eyebrow:#e9dcc1;--eyebrow-rule:#e7bd82;--link-rule:#d6a981;
  --rule:#fff6dd31;
  --serif:Newsreader,Georgia,'Times New Roman',serif;--sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --grain: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .45 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background:var(--sky);color-scheme:dark;
}
/* One accent per section. --accent is bright (rings, glows, edges), --accent-ink is dark enough for text on paper. */
.t-violet{--accent:#b9a8ff;--accent-ink:#4a3d99;--accent-edge:#8a78e0;--accent-soft:#efeaff;--accent-glow:#b9a8ff66;--accent-wash:#b9a8ff26}
.t-coral{--accent:#ff806f;--accent-ink:#a63f31;--accent-edge:#e0604f;--accent-soft:#ffe9e4;--accent-glow:#ff806f55;--accent-wash:#ff806f22}
.t-sage{--accent:#91b895;--accent-ink:#2f6a3b;--accent-edge:#6c9b72;--accent-soft:#e6f3e6;--accent-glow:#91b89555;--accent-wash:#91b89524}
.t-gold{--accent:#e7bd82;--accent-ink:#7a5a12;--accent-edge:#c99a4e;--accent-soft:#fbf1dc;--accent-glow:#e7bd8255;--accent-wash:#e7bd8226}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{
  margin:0;min-width:320px;color:var(--text);font-family:var(--sans);font-size:16px;font-synthesis:none;
  background-color:var(--sky);overflow-x:clip;
  background-image:radial-gradient(ellipse at 4% 10%,#91b89518,transparent 46%),radial-gradient(ellipse at 88% 30%,#b9a8ff1c,transparent 43%),radial-gradient(ellipse at 100% 92%,#ff806f10,transparent 37%);
  background-attachment:fixed;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background-image:radial-gradient(1.4px 1.4px at 6% 12%,#e6e0ff 60%,transparent 100%),radial-gradient(1px 1px at 18% 64%,#e6e0ffaa 60%,transparent 100%),radial-gradient(1.6px 1.6px at 31% 28%,#e6ca88 60%,transparent 100%),radial-gradient(1px 1px at 44% 82%,#e6e0ff99 60%,transparent 100%),radial-gradient(1.4px 1.4px at 57% 9%,#e6e0ffcc 60%,transparent 100%),radial-gradient(1px 1px at 66% 46%,#e6e0ff88 60%,transparent 100%),radial-gradient(1px 1px at 89% 19%,#e6e0ffaa 60%,transparent 100%),radial-gradient(1.4px 1.4px at 95% 55%,#e6e0ff99 60%,transparent 100%);
  background-size:720px 640px;
}
header,main,footer{position:relative;z-index:1}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin-top:0}
p{line-height:1.6}
button,summary{font:inherit}
code{font-family:var(--mono);font-size:.9em}
p code,li code,dd code,summary code{white-space:nowrap}
.icon{display:block;flex:none}
.shell{width:min(100% - 64px,1320px);margin-inline:auto;position:relative;z-index:1}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;z-index:10;top:-100px;left:20px;padding:12px 18px;background:var(--ivory);color:var(--ink);border-radius:8px;font-weight:800}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ivory);outline-offset:3px}

/* Header and footer */
.site-header{background:#10172dc9;border-bottom:1px solid #fff7e638}
.header-inner{min-height:78px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ivory);text-decoration:none}
.brand img{width:40px;height:40px}
.brand-name{font-size:1.27rem;font-weight:700;letter-spacing:-.055em}
.brand-name strong{font-weight:850}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 30px}
.site-nav a{padding-block:6px;color:var(--ivory);font-size:.84rem;font-weight:700;text-decoration:none;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:#fff7e6}
.site-nav a[aria-current="page"]{border-bottom-color:var(--link-rule)}
.site-footer{margin-top:0;background:#0b1025f2;border-top:1px solid #fff7e63d;color:#fdfafa}
.footer-grid{display:flex;flex-wrap:wrap;gap:40px 60px;padding-block:64px 44px}
.footer-identity{flex:2 1 300px;min-width:0}
.footer-identity p{max-width:360px;margin:18px 0 0;color:#d8d5e9;font-size:.95rem}
.footer-links{flex:1 1 200px;display:flex;flex-direction:column;gap:12px}
.footer-links strong{color:#d0c7ec;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.footer-links a{color:#fdfafa;font-size:.92rem;text-decoration:none;overflow-wrap:anywhere}
.footer-links a:hover{text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:22px 30px;border-top:1px solid #ffffff35;color:#d8d5e9;font-size:.8rem}
.footer-bottom small{font-size:inherit;max-width:760px}
.footer-bottom a{color:#fdfafa;font-weight:800;text-decoration:none}

/* Type */
.eyebrow{margin:0 0 26px;color:var(--eyebrow);font-size:.72rem;font-weight:800;letter-spacing:.16em;line-height:1.4;text-transform:uppercase}
.eyebrow-line{display:inline-block;width:24px;height:3px;margin-right:12px;vertical-align:middle;background:var(--eyebrow-rule)}
.eyebrow-num{margin-right:10px;color:var(--accent)}
h1,h2{font-family:var(--serif);font-weight:550;letter-spacing:-.045em}
h1 em,h2 em{font-weight:400;font-style:italic}
h1{margin:0 0 30px;color:var(--ivory);font-size:clamp(3rem,6.2vw,6rem);line-height:.98;text-wrap:balance}
h2{margin-bottom:34px;color:var(--ivory);font-size:clamp(2.4rem,3.6vw,3.5rem);line-height:1.06;text-wrap:balance}
h3{margin-bottom:10px;color:var(--ivory);font-size:1.3rem;font-weight:750;letter-spacing:-.02em;line-height:1.25}

/* Sections: a tinted wash per accent, a dot-chart texture, and room for the backdrop */
.section,.band,.hero{position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.section{padding-block:96px}
.band{padding-block:96px 104px;background:radial-gradient(ellipse at 12% 0%,var(--accent-wash),transparent 56%),radial-gradient(ellipse at 96% 100%,#ffffff0a,transparent 50%),#10182c80;border-block:1px solid var(--rule)}
.section::before,.band::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#ffffff26 1px,transparent 1.3px);background-size:28px 28px;opacity:.38;-webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);mask-image:linear-gradient(180deg,#000,transparent 72%)}
.section{background:radial-gradient(ellipse at 88% 0%,var(--accent-wash),transparent 52%)}

/* Backdrop objects: planets, rings, constellations, sparkles. Static, decorative, never in the way. */
.deco{position:absolute;z-index:0;pointer-events:none}
.ring{border:1px solid #ffffff1c;border-radius:50%}
.ring-xl{width:860px;height:860px;right:-300px;top:-190px}
.ring-lg{width:620px;height:620px;left:-250px;bottom:-230px}
.ring-md{width:520px;height:520px;left:-180px;top:-120px}
.planet,.moon{border-radius:50%}
.planet-coral{width:120px;height:120px;background:radial-gradient(circle at 32% 30%,#ffd9bf,#ff9a86 38%,#d45a6d 72%,#7a2f5c);box-shadow:0 0 70px #ff806f33}
.planet-gold{width:104px;height:104px;background:radial-gradient(circle at 32% 30%,#fff1d0,#e7bd82 42%,#b98745 76%,#6a4a22);box-shadow:0 0 70px #e7bd8233}
.planet-gold::after{content:'';position:absolute;left:-52%;right:-52%;top:38%;height:26%;border:5px solid #e7bd82aa;border-radius:50%;transform:rotate(-16deg)}
.planet-sm{width:76px;height:76px}
.moon{width:44px;height:44px;background:radial-gradient(circle at 30% 30%,#eaf7e8,#91b895 58%,#4d7d5c);box-shadow:0 0 40px #91b89533}
.spark{width:16px;height:16px;background:#fff6dd;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:.9}
.spark-sm{width:10px;height:10px;opacity:.7}
.streak{width:150px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff6dd99 70%,#fff6ddee);transform:rotate(-26deg)}
.streak::after{content:'';position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff6dd;box-shadow:0 0 10px 2px #fff6dd88}
.constellation{top:34px;right:5%;opacity:.9}
.constellation-r{top:60px;right:9%;transform:scaleX(-1)}
.moon-lg{width:150px;height:150px;box-shadow:0 0 90px #91b89530}

/* Rings, tags, cards */
.ring-icon{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--accent-ink);background:radial-gradient(circle at 35% 30%,#fff,var(--accent-soft));border:1px solid var(--accent);box-shadow:0 0 0 6px var(--accent-wash),0 6px 18px -6px var(--accent-glow)}
.tag{display:inline-block;margin-top:12px;padding:3px 10px;border:1px solid var(--accent-edge);border-radius:100px;background:var(--accent-soft);color:var(--accent-ink);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.card,.node,.panel,.aside{background-color:var(--paper);background-image:var(--grain);background-blend-mode:multiply;color:var(--ink);border:1px solid #ece9df;border-radius:20px;box-shadow:0 6px 0 var(--accent-edge,#314055),0 22px 40px -22px #000b}
.card h3,.node h3,.panel h3{color:var(--ink)}
.card p,.node p,.panel p{color:var(--ink-soft);font-size:.96rem}
.card a,.node a,.panel a{color:var(--ink);text-decoration-color:var(--accent-edge);text-underline-offset:3px}
.card code,.node code,.panel code{padding:1px 6px;background:var(--accent-soft);border-radius:5px;color:var(--ink)}
.card strong{color:var(--ink)}
.card .code-label,.card .screen-title{color:#d9d2f4}
.card .see{color:var(--ink)}
.card .schematic figcaption{color:var(--ink-soft)}

/* Buttons and links */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;min-height:52px;padding:15px 20px;border:1px solid var(--ink);border-radius:11px;background:var(--paper);color:var(--ink);font-size:.85rem;font-weight:750;text-decoration:none;cursor:pointer;box-shadow:0 6px 0 #8c7eab;transition:transform .2s ease,box-shadow .2s ease}
.button:hover{transform:translateY(-3px);box-shadow:0 9px 0 #8c7eab}
.button:active{transform:translateY(4px);box-shadow:0 2px 0 #8c7eab}
.text-link{display:inline-flex;padding-bottom:4px;color:var(--ivory);font-size:.88rem;font-weight:800;text-decoration:none;border-bottom:2px solid var(--link-rule)}
.text-link:hover{border-bottom-color:#fff7e6}

/* Hero */
.hero{padding-block:76px 84px;background:radial-gradient(ellipse at 76% 30%,#b9a8ff2e,transparent 52%),radial-gradient(ellipse at 18% 88%,#ff806f1a,transparent 46%)}
.hero-inner{display:flex;flex-wrap:wrap;align-items:center;gap:40px 4vw}
.hero-copy{flex:1 1 520px;min-width:0}
.hero-intro{max-width:620px;margin:0 0 36px;color:var(--text-muted);font-size:clamp(1.07rem,1.5vw,1.3rem);line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-bottom:34px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pills li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #fff6dd40;border-radius:100px;background:#ffffff0f;color:var(--ivory);font-size:.82rem;font-weight:700}
.pills .icon{color:var(--eyebrow-rule)}
.hero-art{flex:0 1 430px;min-width:0;position:relative;aspect-ratio:1/1.04;display:flex;align-items:center;justify-content:center}
.hero-art .orbit{position:absolute;inset:7%;border:1px dashed #e7bd8277;border-radius:50%}
.hero-art .orbit::after{content:'';position:absolute;inset:-9%;border:1px solid #ffffff14;border-radius:50%}
.hero-art img{position:relative;width:58%;filter:drop-shadow(0 18px 24px #050b1c80)}
.orb{position:absolute;width:68px;height:68px;display:grid;place-items:center;border-radius:50%;color:var(--accent-ink);background:radial-gradient(circle at 35% 30%,#fff,var(--accent-soft));border:1px solid var(--accent);box-shadow:0 0 0 9px var(--accent-wash),0 12px 28px -8px var(--accent-glow)}
.orb-a{top:8%;left:6%}
.orb-b{top:30%;right:-1%}
.orb-c{bottom:8%;left:12%}
.orb-d{top:4%;right:22%;width:56px;height:56px}

/* 02 How he fits together */
.map{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1.25fr) 36px minmax(0,1fr);grid-template-areas:"discord w1 computer w2 model" ". . ghost . .";gap:22px 8px;align-items:start;margin-bottom:44px}
.map > .node:nth-of-type(1){grid-area:discord}
.map > .wire:nth-of-type(1){grid-area:w1}
.map > .node-main{grid-area:computer}
.map > .wire:nth-of-type(2){grid-area:w2}
.map > .node-col{grid-area:model}
.map > .node-ghost{grid-area:ghost}
.node{position:relative;padding:22px 22px 24px}
.node .ring-icon{margin-bottom:14px}
.node h3{margin-bottom:6px;font-size:1.18rem}
.node p{margin:0}
.node-col{display:flex;flex-direction:column;gap:18px}
.node-small{padding:16px 18px;box-shadow:0 4px 0 var(--accent-edge),0 18px 30px -20px #000b}
.node-small .ring-icon{width:36px;height:36px;margin-bottom:10px;box-shadow:0 0 0 5px var(--accent-wash)}
.stack{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.stack li{padding:10px 12px;border:1px solid var(--accent);border-radius:12px;background:var(--accent-soft)}
.stack strong{display:block;color:var(--ink);font-size:.95rem}
.stack span{color:var(--ink-soft);font-size:.84rem}
.wire{display:grid;place-items:center;align-self:start;margin-top:52px;color:var(--eyebrow-rule)}
.node-ghost{background:#ffffff0c;background-image:none;border:1.5px dashed #e9dcc199;box-shadow:none;color:var(--text-muted)}
.node-ghost h3{color:var(--ivory)}
.node-ghost p{color:var(--text-muted)}
.node-ghost .ring-icon{--accent:#e9dcc1;--accent-ink:#e9dcc1;--accent-wash:#ffffff10;--accent-glow:transparent;background:#ffffff10;border-style:dashed}
.trio{display:flex;flex-wrap:wrap;gap:22px 40px;margin:0;padding:0;list-style:none}
.trio li{flex:1 1 280px;min-width:0;display:flex;gap:16px;padding-top:22px;border-top:1px solid var(--rule)}
.trio strong{display:block;margin-bottom:6px;color:var(--ivory);font-size:1.08rem;font-weight:750}
.trio p{margin:0;color:var(--text-muted);font-size:.96rem}


.brand-mark{display:inline-block;flex:none;border-radius:22%;vertical-align:middle}
.ring-icon.brand{background:none;border:0;border-radius:24%;overflow:hidden;box-shadow:0 8px 18px -8px #0009}
.ring-icon.brand .brand-mark{width:100%;height:100%;border-radius:0}
.providers{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.providers li{display:inline-flex;align-items:center;gap:14px;padding:12px 18px 10px 14px;border:1px dashed var(--accent-edge);border-radius:14px;background:var(--accent-soft)}
.providers .from{color:var(--ink-soft);font-size:.8rem;line-height:1.3}
/* Name stickers: our own drawn badges that name a service in this page's type. Never a copy or a riff on its logo. */
.name-sticker{position:relative;display:inline-block;padding:.3em .85em .34em;border:2px solid var(--ink);border-radius:9px;background:var(--accent);color:var(--ink);font-family:var(--sans);font-size:1.05rem;font-weight:850;letter-spacing:-.015em;line-height:1.1;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2.4deg)}
.name-sticker.tilt-r{transform:rotate(1.9deg)}
.name-sticker::before{content:'';position:absolute;top:-8px;left:12px;width:26px;height:11px;background:#fff8e2c4;border:1px solid #17184b26;transform:rotate(-7deg)}
.name-sticker.tilt-r::before{left:auto;right:12px;transform:rotate(6deg)}
.stack a.ext{display:inline-block;margin-top:6px;color:var(--ink);font-size:.84rem;font-weight:700;text-decoration-color:var(--accent-edge);text-underline-offset:3px}
.stack li > span{display:block}
.hermes-item{background:#fff}
.hermes-banner{display:block;width:100%;max-width:300px;height:auto;margin:0 0 8px;border-radius:8px}

/* 03 What you'll need */
.needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px 22px;margin:0 0 44px;padding:0;list-style:none}
.card{padding:24px 24px 26px}
.card .ring-icon{margin-bottom:16px}
.card h3{margin-bottom:8px;font-size:1.18rem}
.card > p{margin:0}

/* Big Head's asides: his voice, small and rare */
.aside{display:flex;align-items:center;gap:16px;max-width:720px;margin:0;padding:14px 22px 14px 14px;border-radius:16px;box-shadow:0 5px 0 var(--accent-edge,#314055),0 18px 30px -20px #000b}
.aside img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}
.aside p{margin:0;color:var(--ink);font-size:.98rem;line-height:1.5}
.aside-light{margin-top:48px}

/* 04 Set him up */
.setup-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;margin-bottom:44px}
.setup-head > div{flex:1 1 520px;min-width:0}
.lede{max-width:760px;margin:0;color:var(--text-muted);font-size:1.05rem}
.lede code,.note code{padding:1px 6px;background:#ffffff1c;border-radius:5px}
.art-tile{flex:0 0 250px;margin:0;padding:10px;border-radius:26px;background-color:var(--paper);background-image:var(--grain);background-blend-mode:multiply;border:1px solid #ece9df;box-shadow:0 7px 0 var(--accent-edge),0 26px 46px -22px #000c;transform:rotate(2deg)}
.art-tile img{width:100%;border-radius:18px}
.art-tile-sm{flex-basis:210px;transform:rotate(-2deg)}
/* The seven steps: one horizontal rail. It scrolls sideways and snaps to each step; rail.js adds the arrow chips. */
.rail-wrap{position:relative}
.rail{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:8px 4px 48px;margin-inline:-4px;scrollbar-width:thin;scrollbar-color:var(--accent,#e7bd82) #ffffff14}
.rail:focus-visible{outline:3px solid var(--ivory);outline-offset:2px;border-radius:12px}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:#e7bd8299;border-radius:8px}
.rail::-webkit-scrollbar-track{background:#ffffff14;border-radius:8px}
.steps{display:flex;flex-direction:row;align-items:stretch;gap:26px;width:max-content;margin:0;padding:0;list-style:none}
.step{flex:0 0 min(780px,86vw);display:flex;flex-direction:column;padding:26px 28px 24px;scroll-snap-align:start;scroll-margin-inline:4px}
.step-foot{margin-top:auto;padding-top:6px}
.step-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.step-head h3{flex:1 1 auto;margin:0;font-size:1.4rem}
.step-number{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--ink);font-family:var(--serif);font-size:1.45rem;font-weight:650;box-shadow:0 0 0 6px var(--accent-wash)}
.step > p{margin:0 0 16px;color:var(--ink-soft)}
.step > .note{font-size:.9rem}
.step > .note code{font-size:.9em}
.code-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.code-pair .code{margin-bottom:0}
.step .code-pair{margin-bottom:16px}

/* Navigator: Start, Previous, the seven numbered chips grouped by phase, Next, Finish */
.navigator{position:sticky;top:10px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 22px;padding:10px 12px;background:#10132bea;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #fff6dd40;border-radius:22px;box-shadow:0 18px 36px -18px #000c}
.nav-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid #fff6dd55;border-radius:100px;background:#ffffff12;color:var(--ivory);font:inherit;font-size:.82rem;font-weight:750;line-height:1;text-decoration:none;cursor:pointer}
.nav-chip:hover{background:#ffffff24}
.nav-chip:disabled{opacity:.4;cursor:default}
.nav-chip:disabled:hover{background:#ffffff12}
.nav-arrow{padding-inline:11px}
.nav-chip .icon{color:var(--eyebrow-rule)}
.nav-phases{display:flex;flex-wrap:wrap;flex:1 1 auto;gap:8px 12px;min-width:0}
.nav-phase{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border:1px solid var(--accent);border-radius:100px;background:var(--accent-wash)}
.nav-phase-label{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav-phase ol{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.nav-phase a{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:3px 12px 3px 4px;border:1px solid transparent;border-radius:100px;color:var(--ivory);font-size:.8rem;font-weight:700;text-decoration:none}
.nav-phase a:hover{background:#ffffff1c}
.nav-phase .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--ink);font-size:.78rem;font-weight:850}
.nav-phase a[aria-current="step"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.nav-phase a[aria-current="step"] .n{background:var(--ink);color:var(--accent)}
.nav-status{flex:1 1 100%;margin:0;color:var(--text-muted);font-size:.82rem;line-height:1.4}
.nav-progress{flex:1 1 100%;height:3px;border-radius:3px;background:#ffffff1f;overflow:hidden}
.nav-progress i{display:block;width:14.3%;height:100%;background:var(--eyebrow-rule)}

/* Copy blocks: an ink console on the paper card */
.code{position:relative;margin:0 0 16px;padding:12px 16px 14px;background:var(--ink);color:var(--ivory);border:1px solid #2c2d6e;border-radius:12px;box-shadow:inset 0 3px 0 var(--accent)}
.code-label{margin:0 0 16px;padding-right:84px;color:#d9d2f4;font-size:.72rem;font-weight:800;letter-spacing:.08em;line-height:1.4;text-transform:uppercase}
.code pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:.9rem;line-height:1.6}
.code pre code,.card .code code{padding:0;background:none;color:var(--ivory);font-size:inherit;white-space:inherit;overflow-wrap:anywhere}
.copy-button{position:absolute;top:8px;right:8px;min-height:34px;padding:6px 14px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--ink);font-size:.78rem;font-weight:800;cursor:pointer}
.copy-button:hover{filter:brightness(1.08)}
.copy-button:focus-visible{outline:3px solid var(--ivory);outline-offset:3px}

/* What you should see, and what to do if you don't */
.see{display:flex;align-items:flex-start;gap:12px;margin:18px 0 0;padding:12px 16px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink);font-size:.96rem;line-height:1.55}
.see .icon{margin-top:2px;color:var(--accent-ink)}
.see strong{display:block;color:var(--accent-ink);font-size:.7rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.ifnot{margin-top:12px;border-radius:12px;border:1px solid #e3e0ea}
.ifnot summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;color:var(--ink);font-size:.86rem;font-weight:800;cursor:pointer;list-style:none;border-radius:12px}
.ifnot summary::-webkit-details-marker{display:none}
.ifnot summary::after{content:'+';color:var(--accent-ink);font-size:1.3rem;line-height:1}
.ifnot[open] summary::after{content:'–'}
.ifnot summary:focus-visible{outline-color:var(--ink)}
.ifnot > p{margin:0;padding:0 16px 14px;color:var(--ink-soft);font-size:.96rem}
.card .ifnot code{background:var(--accent-soft)}
.portal-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px 30px;align-items:start;margin-bottom:6px}
.mini{margin:0;padding-left:22px;color:var(--ink-soft)}
.mini li{padding-left:6px;margin-bottom:12px;line-height:1.6;font-size:.96rem}
.step .mini a{color:var(--ink)}
.schematic{margin:0}
.screen{padding:16px 16px 6px;background:#1d1f4d;border:1px solid #34367d;border-radius:14px;color:#f1eeff;box-shadow:inset 0 3px 0 var(--accent)}
.screen-title{margin:0 0 10px;color:#d9d2f4;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #ffffff1c;font-size:.88rem}
.badge{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--ink);font-size:.72rem;font-weight:850}
.row-label{flex:1 1 auto;min-width:0;font-weight:700}
.fake-button{padding:5px 12px;border-radius:7px;background:#ffffff1c;border:1px solid #ffffff40;font-size:.78rem;font-weight:750}
.switch{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 4px;border-radius:100px;background:#ffffff16;border:1px solid #ffffff3a;font-size:.74rem;font-weight:800}
.switch i{display:block;width:18px;height:18px;border-radius:50%;background:#8b8ca8}
.switch.on{background:#2f6a3b;border-color:#91b895;flex-direction:row-reverse;padding:3px 4px 3px 10px}
.switch.on i{background:#eaf7e8}
.schematic figcaption{margin-top:10px;color:var(--ink-soft);font-size:.78rem;line-height:1.5}

/* 05 Keep him safe */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;margin-bottom:34px}
.panel{padding:24px 26px 26px}
.panel-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.panel-head h3{margin:0}
.panel > p{margin:0 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink);font-size:.88rem;font-weight:700}
.chips .icon{color:var(--accent-ink)}
.chips-off li{background:repeating-linear-gradient(135deg,#fff 0 6px,var(--accent-soft) 6px 12px);border-style:dashed;color:var(--ink-soft)}
.safe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:0 0 34px;padding:0;list-style:none}
.panel-warn{padding:26px 28px 14px;box-shadow:0 6px 0 var(--accent-edge),0 0 0 3px #ff806f55,0 26px 46px -22px #000c}
.warn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 32px;margin:0;padding:0;list-style:none}
.warn-grid li{display:flex;gap:14px;padding:14px 0 16px;border-top:1px solid #ece9df}
.warn-grid .ring-icon{width:36px;height:36px;box-shadow:0 0 0 5px var(--accent-wash)}
.warn-grid strong{display:block;margin-bottom:4px;color:var(--ink)}
.warn-grid p{margin:0;font-size:.96rem}

/* 06 What's ours and what isn't */
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px 22px;margin:0 0 34px;padding:0;list-style:none}
.panel-plain{display:flex;gap:20px;align-items:flex-start}
.plain{margin:0;color:var(--ink);font-size:1.02rem}
.plain strong{color:var(--ink)}

/* 07 Questions */
.faq{display:grid;gap:14px;max-width:900px}
.faq details{border-radius:16px;background-color:var(--paper);background-image:var(--grain);background-blend-mode:multiply;border:1px solid #ece9df;box-shadow:0 4px 0 var(--accent-edge),0 18px 30px -20px #000b;color:var(--ink)}
.faq summary{display:flex;align-items:center;gap:14px;padding:14px 20px 14px 14px;color:var(--ink);font-size:1.02rem;font-weight:750;cursor:pointer;list-style:none;border-radius:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;color:var(--accent-ink);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq summary:focus-visible{outline-color:var(--ink)}
.faq .ring-icon{width:36px;height:36px;box-shadow:0 0 0 5px var(--accent-wash)}
.faq details p{margin:0;padding:0 24px 20px 66px;max-width:760px;color:var(--ink-soft);font-size:.98rem}
.faq code{padding:1px 6px;background:var(--accent-soft);border-radius:5px;color:var(--ink)}
.faq a{color:var(--ink);text-decoration-color:var(--accent-edge);text-underline-offset:3px}

/* 08 Help */
.help{padding-block:72px 80px}
.help-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px}
.help-inner > div{flex:1 1 460px;min-width:0}
.help h2{margin-bottom:16px}
.help p:not(.eyebrow){max-width:640px;margin:0;color:var(--text-muted)}
.help code{padding:1px 6px;background:#ffffff1c;border-radius:5px}
.help a:not(.button){color:var(--ivory);text-decoration-color:var(--link-rule);text-underline-offset:3px}

@media (max-width:1560px){
  .nav-text{display:none}
}
@media (max-width:1100px){
  .safe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map{grid-template-columns:minmax(0,1fr);grid-template-areas:"discord" "w1" "computer" "w2" "model" "ghost";gap:12px;max-width:560px}
  .map .wire{transform:rotate(90deg);margin-top:0}
  .hero-art{flex-basis:100%;max-width:430px;margin-inline:auto}
}
@media (max-width:860px){
  .portal-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .safe-grid,.warn-grid{grid-template-columns:minmax(0,1fr)}
  .nav-phase-label,.nav-word{display:none}
  .navigator [data-go="first"]{order:1}
  .navigator [data-go="prev"]{order:2}
  .nav-status{order:3;flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:.76rem}
  .navigator [data-go="next"]{order:4}
  .navigator [data-go="last"]{order:5}
  .nav-phases{order:6;flex:1 1 100%;justify-content:center}
  .nav-progress{order:7}
  .nav-chip{min-height:38px;padding:8px 11px}
  .nav-phase{padding:3px}
  .navigator{top:6px;padding:8px;gap:8px}
  .nav-phase a{padding:3px 5px 3px 3px}
  .step{flex-basis:88vw}
  .spark,.streak,.constellation{display:none}
  .hero .planet,.hero .moon{display:none}
  .card:not(.step),.node{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 16px 18px}
  .card:not(.step) > .ring-icon,.node > .ring-icon{grid-row:1 / span 4;margin:0}
  .card:not(.step) > h3,.node > h3{margin-bottom:4px;font-size:1.1rem}
  .card:not(.step) > p,.node > p{grid-column:2}
  .node > .tag{grid-column:2;justify-self:start;margin-top:8px}
  .node .stack{grid-column:1 / -1}
  .node .providers{grid-column:1 / -1}
  .node-small .ring-icon{width:36px;height:36px}
  .node-col{gap:12px}
  .needs,.parts,.safe-grid{gap:16px}
  .art-tile{flex-basis:auto;max-width:150px;margin:6px 0 0 4px;padding:7px;border-radius:20px}
  .setup-head{gap:18px;margin-bottom:28px}
  .setup-head > div{flex-basis:100%}
  .art-tile-sm{max-width:130px}
  .shell{width:calc(100% - 36px)}
  .header-inner{padding-block:12px}
  .site-nav{width:100%;gap:6px 20px}
  .hero{padding-block:48px 56px}
  .section{padding-block:64px}
  .band{padding-block:64px 72px}
  .help{padding-block:56px 64px}
  .ring-xl{width:620px;height:620px;right:-330px;top:-120px}
  .step{padding:20px 18px 18px}
  .step-head{gap:12px}
  .step-head h3{font-size:1.2rem}
  .step-head .ring-icon{display:none}
  .code{padding:12px 14px}
  .code-label{padding-right:78px}
  .panel,.card{padding:20px 18px 22px}
  .panel-plain{flex-direction:column}
  .aside{align-items:flex-start;padding:14px 16px 14px 14px}
  .faq details p{padding:0 18px 18px 18px}
  .orb{width:56px;height:56px}
  .orb-d{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button{transition:none}
}
@media (forced-colors:active){
  body::before,.deco{display:none}
  .code,.aside,.card,.panel,.node,.see{border:1px solid CanvasText}
  .step-number,.phase .n,.badge{border:1px solid CanvasText}
}

/* Links to the pack, and the profile-picture picker */
.pills a{color:inherit;text-decoration:underline;text-decoration-color:var(--eyebrow-rule);text-underline-offset:3px}
.site-nav .pack-link{white-space:nowrap}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;margin:0 0 18px;padding:0;list-style:none}
.panel a.avatar{display:grid;justify-items:center;gap:8px;padding:16px 10px 14px;border:1px solid var(--accent);border-radius:16px;background:var(--accent-soft);color:var(--ink);text-decoration:none;transition:transform .2s}
.avatar img{width:96px;height:96px;border-radius:50%;border:3px solid var(--paper);box-shadow:0 0 0 2px var(--accent-edge),0 10px 16px -10px #0009}
.avatar-name{color:var(--ink);font-size:.92rem;font-weight:800;text-align:center}
.avatar-dl{color:var(--accent-ink);font-size:.8rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.panel a.avatar:hover{transform:translateY(-3px)}
.panel a.avatar:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.avatars .note{margin:0;color:var(--ink-soft);font-size:.86rem}
.avatar-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:6px 0 12px;padding-top:16px;border-top:1px dashed var(--accent-edge)}
.avatar-group p{margin:0;color:var(--ink-soft);font-size:.92rem}
.avatar-group .avatar-group-title{color:var(--ink);font-size:1rem;font-weight:800}
.hero-actions .pack-link{display:inline-flex;align-items:baseline;gap:.35em}
.big-head-stories{display:flex;flex-wrap:wrap;gap:0 28px;padding-block:12px;border-bottom:1px solid #ffffff30}
.big-head-stories a{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ivory);font-size:.88rem;font-weight:600;text-underline-offset:4px;text-decoration-color:#b9a8ff}
.big-head-stories a:hover{color:#e7bd82}