/* GeniusHQ's setup page: its own stylesheet, the composed sibling of Agent Big Head's page. The page is a run of panels,
   each with a title bar and a numbered footer, laid on a canvas (see the palettes below), so it feels at home
   on a conference-room screen (Joshua, 2 Nov 2026). The form carries that; the type and colors stay IDuh Genius's:
   Newsreader and DM Sans, with pale gold chips. Chips are rounded rectangles, never pills, and pictures sit in square frames,
   so it reads as considered work software rather than a chat app (Joshua, 2 Nov 2026). No logos or interface imitation of anyone's product.
   Nothing moves on its own; the compass glow and a link's underline are the only transitions. */
@font-face{font-family:Newsreader;src:url('/agent-big-head/assets/newsreader.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url('/agent-big-head/assets/newsreader-italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/agent-big-head/assets/dm-sans.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}

/* One palette: Frost · Ice (Joshua's pick, 2 Nov 2026), Brilliantist blues with frosted-glass panels over fixed glows, in light
   and dark mode alike. Pale gold chips with dark text, edged in darker gold to keep 3:1 against the glass; gold is otherwise kept
   to small accents. Contrast is checked against the glass at its darkest (both blue glows at full strength under it): body text
   11:1, muted 5.7:1, gold and green text at least 5.2:1, chip edges 3.4:1. Where glass isn't available, panels fall back to --panel-solid. */
:root{
  --tile:#fdf3d4;
  --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;
  --canvas:#e9efff;--panel-solid:#f7f9ff;--panel-edge:rgba(255,255,255,.85);--panel-hi:rgba(255,255,255,.9);--panel-blur:blur(22px) saturate(150%);
  --canvas-art:radial-gradient(55% 50% at 10% 10%,rgba(47,125,255,.45) 0,transparent 60%),radial-gradient(45% 45% at 90% 88%,rgba(247,181,28,.45) 0,transparent 60%),radial-gradient(40% 40% at 85% 12%,rgba(56,200,255,.35) 0,transparent 60%),linear-gradient(160deg,#eef3ff,#d6e3ff 60%,#e9efff);
  --panel:rgba(255,255,255,.52);--panel-2:rgba(255,255,255,.45);
  --ink:#0f1d4d;--ink-2:#3e4d7a;--ink-3:#3e4d7a;--rule:rgba(15,29,77,.12);--rule-strong:#0f1d4d;--accent:#6b500f;--link-rule:#a8893a;--edge-top:rgba(15,29,77,.35);
  --head:#0f1d4d;--head-ink:#ffffff;--chip:#e8cf8a;--chip-ink:#14183a;--chip-edge:#8a6d22;--code:#f5f8ff;--code-ink:#0f1d4d;
  --ok:#285c39;--off:#9a3d2f;--warn:#9a6a1a;--shadow:0 10px 30px rgba(6,14,50,.12);--glow:#2f7dff;--glow-ring:#2f7dff33;
  --r-chip:6px;--r-tag:4px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{position:relative;margin:0;min-width:320px;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;font-synthesis:none;overflow-x:clip;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--link-rule);text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .15s}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,summary{font:inherit}
code{font-family:var(--mono);font-size:.86em}
p code,li code,dd code,td code,summary code{padding:.08em .32em;border-radius:3px;background:var(--code);color:var(--code-ink);white-space:nowrap}
strong{font-weight:650;color:var(--ink)}
.icon{display:block;flex:none}
.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}
/* The canvas art (Frost's glows) is fixed behind the page, so the glass always has something to blur. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--canvas-art)}
.skip-link{position:absolute;z-index:10;top:-100px;left:16px;padding:10px 16px;background:var(--ink);color:var(--canvas);font-weight:650;text-decoration:none}
.skip-link:focus{top:12px}
.shell{width:100%;max-width:1180px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}

/* Header and footer sit on the canvas. */
.site-header{border-bottom:1px solid var(--rule)}
.header-inner{min-height:68px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:34px;height:34px}
.brand-name{font-size:1.12rem;font-weight:600;letter-spacing:-.04em}
.brand-name strong{font-weight:800}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}
.site-nav a{padding-block:6px;color:var(--ink-2);font-size:.86rem;font-weight:500;text-decoration:none;border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--link-rule)}
.site-nav a[aria-current="page"]{padding:4px 12px;border:1px solid var(--chip-edge);border-radius:var(--r-chip);background:var(--chip);color:var(--chip-ink)}
.site-footer{margin-top:24px;border-top:1px solid var(--rule);color:var(--ink-2);font-size:.92rem}
.footer-grid{display:flex;flex-wrap:wrap;gap:36px 64px;padding-block:48px 36px}
.footer-identity{flex:2 1 280px;min-width:0}
.footer-identity p{max-width:340px;margin-top:16px}
.footer-links{flex:1 1 180px;display:flex;flex-direction:column;gap:10px;min-width:0}
.footer-links strong{color:var(--ink-3);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.footer-links a{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 32px;padding-block:20px 32px;border-top:1px solid var(--rule);font-size:.8rem;color:var(--ink-3)}
.footer-bottom small{font-size:inherit;max-width:780px;line-height:1.6}
.footer-bottom a{color:var(--ink);font-weight:600;text-decoration:none}

/* Panels: a white sheet on the canvas with a title bar, a body and a footer line with the page's name and the panel number. */
.hero{padding-block:36px 12px}
.deck{padding-block:12px}
.deck-stack{display:grid;gap:24px}
.deck-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px}
.slide{position:relative;display:flex;flex-direction:column;gap:22px;min-width:0;padding:30px 40px 18px;border-radius:8px}
.slide,.step{background:var(--panel);border:1px solid var(--panel-edge);box-shadow:inset 0 1px 0 var(--panel-hi),var(--shadow);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur)}
.slide::before{content:'';position:absolute;inset:-1px -1px auto;height:4px;border-radius:8px 8px 0 0;background:var(--edge-top)}
/* Solid panels where glass isn't supported or the person asks for less transparency. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.slide,.step{background:var(--panel-solid)}}
@media (prefers-reduced-transparency:reduce){.slide,.step{background:var(--panel-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
.slide-bar{padding-bottom:16px;border-bottom:1px solid var(--rule)}
.slide-kicker{display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px;color:var(--accent);font-size:.74rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase}
.slide-bar h2{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:450;line-height:1.15;letter-spacing:-.012em;text-wrap:balance}
.slide-bar h3{font-family:var(--serif);font-size:1.6rem;font-weight:450;line-height:1.2;text-wrap:balance}
.slide-foot{display:flex;justify-content:space-between;gap:16px;margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);color:var(--ink-3);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.slide-warn::before{background:var(--warn)}

/* Type inside panels */
.kicker{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:22px;color:var(--ink-3);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.kicker b{color:var(--ink);font-weight:700}
h1{max-width:15ch;font-family:var(--serif);font-size:clamp(2.5rem,5.4vw,4.2rem);font-weight:400;line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
h3{font-family:var(--serif);font-size:1.2rem;font-weight:500;line-height:1.3;text-wrap:balance}
.lede{max-width:70ch;color:var(--ink-2);font-size:1.04rem}
.prose{max-width:70ch;color:var(--ink-2)}
.prose>*+*{margin-top:14px}
.note{max-width:70ch;color:var(--ink-3);font-size:.92rem}
.statement{max-width:76ch;padding:16px 20px;border-left:3px solid var(--edge-top);background:var(--panel-2);color:var(--ink-2)}

/* Buttons and links */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid var(--chip-edge);border-radius:var(--r-chip);background:var(--chip);color:var(--chip-ink);font-size:.95rem;font-weight:600;text-decoration:none}
.button:hover{text-decoration:underline;text-decoration-color:currentColor}
.quiet-link{font-size:.95rem;font-weight:500}

/* The title panel: headline and GeniusHQ's introduction on the left, the compasses beside them. */
.title-slide{padding-top:44px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"head set" "copy set";column-gap:56px;align-items:start}
.hero-head{grid-area:head}
.hero-copy{grid-area:copy}
.hero-intro{max-width:56ch;margin-top:28px;color:var(--ink-2);font-size:1.1rem;line-height:1.62}
.voice{display:block;margin-bottom:6px;color:var(--accent);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;font-size:.84rem;font-weight:600}
.facts li{padding:4px 12px;border:1px solid var(--chip-edge);border-radius:var(--r-chip);background:var(--chip);color:var(--chip-ink)}
.facts a{color:inherit;text-decoration-color:currentColor}

/* The five compasses, arranged like Agent Big Head's hero art: World large in the middle where his picture sits, and the
   other four where his four orbs sit. No labels until a compass is hovered, focused or tapped: then it glows, and its name
   appears. They are the transparent artwork, so they sit on any panel. Nothing moves on its own. */
.compass-set{grid-area:set;align-self:center;min-width:0}
.hero-art{position:relative;width:100%;max-width:440px;margin-inline:auto;aspect-ratio:1/1.04;display:flex;align-items:center;justify-content:center}
.hero-art .orbit{position:absolute;inset:7%;border:1px dashed var(--link-rule);border-radius:50%}
.hero-art .orbit::after{content:'';position:absolute;inset:-9%;border:1px solid var(--rule);border-radius:50%}
.compass-orb{position:absolute;width:88px;height:88px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.compass-orb img{width:100%;height:100%;border-radius:50%;transition:box-shadow .25s ease}
.compass-world{position:relative;width:62%;height:auto;aspect-ratio:1}
.orb-a{top:7%;left:5%}
.orb-b{top:30%;right:-2%}
.orb-c{bottom:7%;left:11%}
.orb-d{top:3%;right:21%}
.orb-name{position:absolute;z-index:2;top:calc(100% + 6px);left:50%;padding:1px 8px;border-radius:3px;background:var(--panel-solid);font-family:var(--serif);font-size:1.12rem;line-height:1.3;white-space:nowrap;opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity .2s ease .15s,transform .2s ease .15s}
.compass-world .orb-name{font-size:1.4rem}
.orb-b .orb-name{left:auto;right:0;transform:translateY(4px)}
.compass-orb:hover img,.compass-orb:focus-visible img,.compass-orb.is-shown img{box-shadow:0 0 0 7px var(--glow-ring),0 0 36px 8px var(--glow)}
.compass-orb:hover .orb-name,.compass-orb:focus-visible .orb-name,.compass-orb.is-shown .orb-name{opacity:1;transform:translate(-50%,0)}
.orb-b:hover .orb-name,.orb-b:focus-visible .orb-name,.orb-b.is-shown .orb-name{transform:none}
.compass-orb:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.art-note{max-width:40ch;margin:14px auto 0;color:var(--ink-2);font-size:.95rem;text-align:center}
.art-note a{white-space:nowrap}

/* Agenda and key takeaways */
.agenda-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.agenda-list a{display:flex;gap:12px;padding-block:9px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink-2)}
.agenda-list a:hover{color:var(--ink)}
.agenda-list .n{flex:none;align-self:flex-start;min-width:2.4em;padding:1px 8px;border:1px solid var(--chip-edge);border-radius:var(--r-tag);background:var(--chip);color:var(--chip-ink);font-size:.8rem;font-variant-numeric:tabular-nums;font-weight:700;text-align:center}
.takeaway-list{display:grid;gap:12px}
.takeaway-list li{display:flex;gap:12px;color:var(--ink-2)}
.takeaway-list .icon{margin-top:4px;color:var(--ok)}

/* Tiles: the house pattern for grouped points inside a panel. */
.tiles{display:grid;gap:14px}
.tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tiles>li{display:grid;align-content:start;gap:8px;min-width:0;padding:18px 18px 20px;border:1px solid var(--rule);border-top:3px solid var(--edge-top);border-radius:4px;background:var(--panel-2)}
.tiles>li>p{color:var(--ink-2);font-size:.95rem}
.tiles>li>p.aside{margin-top:auto;color:var(--ink-3);font-size:.86rem}
.callouts>li{border-top-color:var(--accent)}
.slide-warn .tiles>li{border-top-color:var(--warn)}

/* GeniusHQ's own voice, set apart and attributed so its "we" is never mistaken for the company's. */
.from-hq{max-width:70ch;padding:14px 20px;border-left:3px solid var(--accent);background:var(--panel-2)}
.from-hq p{color:var(--ink);font-family:var(--serif);font-size:1.1rem;line-height:1.5}

/* Two agents side by side, then the comparison table. */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.choice{display:grid;align-content:start;gap:10px;padding:22px 24px;border:1px solid var(--rule);border-radius:4px;background:var(--panel-2);min-width:0}
.choice-here{border-color:var(--rule-strong)}
.choice-head{display:flex;align-items:center;gap:14px}
.choice-head img{flex:none;width:52px;height:52px;padding:4px;border:1px solid var(--rule);border-radius:var(--r-chip);background:var(--panel-solid);object-fit:contain}
.choice h3{font-size:1.5rem;font-weight:450}
.choice p{color:var(--ink-2)}
.compare-wrap{overflow-x:auto}
.compare{width:100%;min-width:520px;border-collapse:collapse;font-size:.96rem}
.compare th,.compare td{padding:12px 16px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.compare thead th{background:var(--head);color:var(--head-ink);border-bottom:0;font-family:var(--serif);font-size:1.15rem;font-weight:500}
.compare thead th a{color:inherit;text-decoration-color:currentColor}
.compare thead th:first-child{width:22%;border-radius:4px 0 0 0}
.compare thead th:last-child{border-radius:0 4px 0 0}
.compare tbody tr:nth-child(even){background:var(--panel-2)}
.compare tbody th{color:var(--ink-3);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding-top:15px}
.compare td{color:var(--ink-2)}
.compare td.us{color:var(--ink)}

/* How the parts fit: three boxes joined by arrows. */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.flow>li{position:relative;min-width:0;padding:18px 18px 20px;border:1px solid var(--rule);border-top:3px solid var(--edge-top);border-radius:4px;background:var(--panel-2)}
.flow>li+li::before{content:'→';position:absolute;top:50%;left:-30px;transform:translateY(-50%);color:var(--accent);font-size:1.4rem}
.flow .part{display:block;margin-bottom:6px;color:var(--accent);font-size:.72rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase}
.flow h3{margin-bottom:8px}
.flow p{color:var(--ink-2);font-size:.95rem}
.flow p+p{margin-top:10px}
.path-note{max-width:76ch;color:var(--ink-2)}

/* Setup: a chevron process diagram in three phases, then one panel per step. */
.chevrons{display:grid;gap:12px}
.phase-key{display:flex;flex-wrap:wrap;gap:6px 24px;color:var(--ink-2);font-size:.86rem}
.phase-key b{margin-right:6px;color:var(--ink);font-variant-numeric:tabular-nums}
.chevrons ol{display:flex}
.chevrons ol li{flex:1 1 0;min-width:0;margin-left:-6px}
.chevrons ol li:first-child{margin-left:0}
.chevrons ol li.phase-start:not(:first-child){margin-left:6px}
.chevrons ol a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:72px;padding:10px 18px 10px 24px;background:var(--chip);color:var(--chip-ink);text-decoration:none;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%)}
.chevrons ol li:first-child a{padding-left:16px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.chevrons ol a:hover{text-decoration:underline}
.chevrons ol a:focus-visible{outline-offset:-4px;outline-color:var(--chip-ink)}
.chevrons .n{font-family:var(--serif);font-size:1.3rem;line-height:1}
.chevrons .t{font-size:.8rem;font-weight:600;line-height:1.25}
.steps{display:grid;gap:24px}
.step{position:relative;display:flex;flex-direction:column;min-width:0;padding:30px 40px 18px;border-radius:8px}
.step::before{content:'';position:absolute;inset:-1px -1px auto;height:4px;border-radius:8px 8px 0 0;background:var(--edge-top)}
.step-body{display:grid;gap:16px;min-width:0}
.step-body>p{max-width:70ch;color:var(--ink-2)}
.step-body>p.note{color:var(--ink-3)}
.step .slide-foot{margin-top:22px}
.step-of{padding:0 9px;border:1px solid var(--chip-edge);border-radius:var(--r-tag);background:var(--chip);color:var(--chip-ink);letter-spacing:.08em}

/* Commands: copy.js adds the Copy button. */
.code{position:relative;min-width:0;max-width:820px;border:1px solid var(--rule);border-radius:4px;background:var(--code)}
.code-label{padding:9px 14px 0;color:var(--ink-3);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.code pre{margin:0;padding:8px 84px 14px 14px;overflow-x:auto;color:var(--code-ink);font-size:.95rem;line-height:1.55}
.code code{font-size:.88em;white-space:pre}
.code-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:820px}
.copy-button{position:absolute;top:8px;right:8px;min-height:32px;padding:0 14px;border:1px solid var(--chip-edge);border-radius:var(--r-chip);background:var(--chip);color:var(--chip-ink);font-size:.8rem;font-weight:600;cursor:pointer}
.copy-button:hover{text-decoration:underline}

/* What you should see, and what to do if you don't. */
.step-foot{display:grid;gap:10px;max-width:820px;padding:14px 16px;border-radius:4px;background:var(--panel-2)}
.see{display:flex;gap:10px;color:var(--ink-2);font-size:.96rem}
.see .icon{margin-top:4px;color:var(--ok)}
.see strong{margin-right:4px}
.ifnot summary{list-style:none;width:fit-content;padding-block:2px;color:var(--ink);font-size:.92rem;font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:var(--link-rule);text-underline-offset:.2em}
.ifnot summary::-webkit-details-marker{display:none}
.ifnot summary::after{content:' +';color:var(--accent)}
.ifnot[open] summary::after{content:' –'}
.ifnot p{margin-top:10px;padding-left:14px;border-left:1px solid var(--rule);color:var(--ink-2);font-size:.95rem}

/* Step 4's portal list and schematic. */
.portal-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;max-width:900px}
.mini{counter-reset:mini;display:grid;gap:12px}
.mini li{counter-increment:mini;position:relative;padding-left:32px;color:var(--ink-2)}
.mini li::before{content:counter(mini);position:absolute;left:0;top:0;color:var(--accent);font-family:var(--serif);font-size:1.1rem;font-variant-numeric:tabular-nums}
.schematic{min-width:0}
.screen{border:1px solid var(--rule);border-radius:4px;background:var(--panel-2);font-size:.86rem}
.screen-title{padding:10px 14px;border-bottom:1px solid var(--rule);color:var(--ink-3);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.screen .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.screen .row:last-child{border-bottom:0}
.badge{color:var(--accent);font-family:var(--serif);font-size:1rem}
.row-label{color:var(--ink);min-width:0}
.fake-button{padding:3px 10px;border:1px solid var(--rule);border-radius:3px;color:var(--ink-2);font-size:.8rem}
.switch{display:inline-flex;align-items:center;gap:6px;color:var(--off);font-size:.8rem;font-weight:600}
.switch i{width:26px;height:14px;border-radius:7px;border:1px solid currentColor;position:relative}
.switch i::after{content:'';position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:currentColor}
.switch.on{color:var(--ok)}
.switch.on i::after{left:14px}
.schematic figcaption{margin-top:8px;color:var(--ink-3);font-size:.82rem}

/* Step 5's compass downloads: the Day PNGs, the files for Discord. */
.compass-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:820px}
a.compass{display:grid;justify-items:center;gap:6px;padding:12px 6px;border:1px solid var(--rule);border-radius:4px;background:var(--panel-2);text-decoration:none}
a.compass:hover{border-color:var(--ink)}
.compass img{width:72px;height:72px;border-radius:50%;background:var(--tile)}
.compass-name{font-family:var(--serif);font-size:1.02rem;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.compass-dl{color:var(--ink-3);font-size:.78rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--link-rule);text-underline-offset:.2em}

/* Safety: tools on and off as a two-column panel. */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tools>div{padding:18px 20px;border:1px solid var(--rule);border-radius:4px;background:var(--panel-2)}
.tools h3{padding-bottom:10px;border-bottom:1px solid var(--rule);font-size:1.15rem}
.tools .on h3{color:var(--ok)}
.tools .off h3{color:var(--off)}
.tools li{display:flex;align-items:center;gap:10px;padding-block:8px;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.tools li:last-child{border-bottom:0}
.tools .on .icon{color:var(--ok)}
.tools .off .icon{color:var(--off)}

/* Questions and answers */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding-block:16px;font-family:var(--serif);font-size:1.15rem;line-height:1.35;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'Q';color:var(--accent);font-family:var(--sans);font-size:.85rem;font-weight:700;line-height:1.6}
.faq summary::after{content:'+';color:var(--accent);font-family:var(--sans);font-weight:400}
.faq details[open] summary::after{content:'–'}
.faq details p{position:relative;max-width:70ch;margin-left:36px;padding-bottom:20px;color:var(--ink-2)}
.faq details p::before{content:'A';position:absolute;left:-36px;color:var(--ink-3);font-size:.85rem;font-weight:700}

/* Help */
.help-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.help-row .prose{flex:1 1 420px}

/* Narrow screens */
@media (max-width:1000px){
  .tiles-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chevrons ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:8px}
  .chevrons ol li,.chevrons ol li.phase-start:not(:first-child){margin-left:0}
  .chevrons ol a,.chevrons ol li:first-child a{padding-left:16px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "set" "copy"}
  .compass-set{margin-top:24px}
  .hero-art{max-width:400px}
  .deck-row{grid-template-columns:minmax(0,1fr)}
  .tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:minmax(0,1fr);gap:28px}
  .flow>li+li::before{content:'↓';top:-26px;left:50%;transform:translateX(-50%)}
  .portal-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .shell{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .hero{padding-block:16px 8px}
  .deck{padding-block:8px}
  .deck-stack,.steps{gap:16px}
  .slide,.step{padding:24px 18px 14px;gap:18px}
  .title-slide{padding-top:28px}
  .kicker{margin-bottom:16px}
  h1{font-size:2.3rem}
  .compass-orb:not(.compass-world){width:64px;height:64px}
  /* Lighter blur on phones keeps scrolling smooth. */
  .slide,.step{--panel-blur:blur(12px)}
  .orb-name{font-size:1rem}
  .site-nav{gap:2px 18px}
  .header-inner{min-height:0}
  .agenda-list{grid-template-columns:minmax(0,1fr)}
  .tiles-2,.tiles-3,.tiles-4,.tiles-5{grid-template-columns:minmax(0,1fr)}
  .pair{grid-template-columns:minmax(0,1fr)}
  .tools{grid-template-columns:minmax(0,1fr)}
  .code-pair{grid-template-columns:minmax(0,1fr)}
  .compass-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chevrons ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare{min-width:0}
  .compare thead tr,.compare tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare thead th:first-child{display:none}
  .compare thead th:nth-child(2){border-radius:4px 0 0 0}
  .compare tbody th{grid-column:1/-1;padding:12px 12px 0;border-bottom:0}
  .compare th,.compare td{padding-inline:12px}
  .compare thead th{font-size:1.05rem}
  p code,li code,dd code,td code,summary code{white-space:normal;overflow-wrap:anywhere}
  .faq details p{margin-left:0}
  .faq details p::before{display:none}
  .facts li+li::before{margin-inline:10px}
}
@media (max-width:420px){
  .compass-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){a,.compass-orb img,.orb-name{transition:none}}