/* Guides: long-form articles (generated by tools/build_guide.py). Loaded AFTER styles.css, so the
   fonts, brand tokens, .btn and the footer come from there. The article look is the PDF's own
   (docs/studio/*-playbook.html): night panels, element accent per chapter, code on near-black.
   Print sizes were pt; here 1pt -> 0.1rem, which reads the PDF's 11pt body at ~17.6px. */

:root{--panel:#0d1330;--panel-2:#111a3f;--line:#24305e;--mono:Consolas,"Cascadia Mono","Courier New",monospace;--col:880px}

/* ---------- top bar (in flow here, not over a hero) ---------- */
.gtop{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px var(--gutter);border-bottom:2px solid #141a38}
.gtop nav{display:flex;gap:18px;font:500 .95rem var(--pixel)}
.gtop nav a{text-decoration:none;color:var(--moon-dim)}
.gtop nav a:hover{color:var(--moon)}

/* ---------- article column ---------- */
.guide{padding:0 var(--gutter)}
.guide article{max-width:var(--col);margin:0 auto}
.crumbs{max-width:var(--col);margin:22px auto 0;font:500 .9rem var(--pixel);color:var(--moon-dim)}
.crumbs a{color:var(--moon-dim);text-decoration:none}
.crumbs a:hover{color:var(--ember-hi)}

.sheet{position:relative;padding:clamp(28px,5vw,48px) 0;border-bottom:1px solid #141a38;font-size:1.1rem;line-height:1.55}
.sheet:last-of-type{border-bottom:0}
.c-ember{--c:var(--ember)} .c-ice{--c:var(--ice)} .c-violet{--c:var(--violet)} .c-blood{--c:var(--blood)}
.c-plague{--c:var(--plague)} .c-moon{--c:var(--moon)} .c-hi{--c:var(--ember-hi)}

.guide h1,.guide h2{font-family:var(--pixel);font-weight:700;color:#fff;margin:0;text-wrap:balance}
.guide h2{font-size:clamp(1.7rem,4.2vw,2.2rem);line-height:1.08;letter-spacing:-.01em}
.guide h2 .accent{color:var(--c)}
.guide h3{font:700 1.3rem/1.2 var(--body);margin:18px 0 6px;color:var(--c,#fff)}
.guide p{margin:8px 0}
.guide b{color:#fff;font-weight:700}
.lede{font-size:1.25rem;color:var(--moon);margin:10px 0 16px}
.small{font-size:.95rem;color:var(--muted)}
.guide code{font:400 .9em var(--mono);background:#141c44;color:var(--ember-hi);padding:1px 5px;border-radius:3px}
.guide a{color:var(--ember-hi)}
.guide a.btn{color:var(--ink)}

.chapter{display:flex;align-items:center;gap:14px;margin-bottom:8px;scroll-margin-top:20px}
.badge{flex:none;font:800 1.9rem/1 var(--body);color:#160902;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--c);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),0 calc(100% - 3px),0 3px,6px 3px);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.28)}
.kicker{font:700 .85rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--c);margin-bottom:6px}

.panel{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:4px;padding:12px 16px;margin:12px 0;
  box-shadow:0 0 0 1px #000,0 10px 30px -18px rgba(0,0,0,.9)}
.panel h4{margin:0 0 6px;font:700 .85rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase}
.bad h4{color:var(--blood)} .good h4{color:var(--plague)} .how h4{color:var(--ice)} .warn h4{color:var(--ember-hi)}
.bad{border-top:3px solid var(--blood)} .good{border-top:3px solid var(--plague)} .how{border-top:3px solid var(--ice)} .warn{border-top:3px solid var(--ember)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.grid2>.panel,.grid2>.code{margin:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid2,.grid3{margin:12px 0}

ul.d{margin:6px 0 10px;padding:0;list-style:none}
ul.d li{position:relative;padding-left:18px;margin:5px 0}
ul.d li::before{content:"";position:absolute;left:1px;top:.6em;width:7px;height:7px;background:var(--c,var(--ember));box-shadow:0 0 6px var(--c,var(--ember))}

.code{margin:12px 0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#070b1d;min-width:0}
.code .tab{font:700 .78rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;background:#0f1638;color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.code .tab .t-bad{color:var(--blood)} .code .tab .t-good{color:var(--plague)} .code .tab .t-how{color:var(--ice)}
.code pre{margin:0;padding:12px 14px;font:400 .86rem/1.5 var(--mono);color:#dfe5ff;overflow-x:auto;tab-size:4}
.k{color:#ff9d5c} .s{color:#9be35a} .cm{color:#5f6b9c} .f{color:#5fd4ff} .n{color:#ffd27a}

.tablewrap{overflow-x:auto;margin:12px 0}
.guide table{width:100%;border-collapse:collapse;font-size:1rem}
.guide th,.guide td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.guide th{font:700 .8rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ember-hi);background:#0e1536}
.guide td a{color:#fff;text-decoration:none;border-bottom:1px dotted var(--moon-dim)}
.guide td a:hover{color:var(--ember-hi)}
.rule{font:700 1.25rem/1.35 var(--body);color:#fff;border-left:4px solid var(--c,var(--ember));padding:10px 16px;margin:18px 0;background:linear-gradient(90deg,rgba(255,138,42,.12),transparent)}

.guide figure{margin:14px 0}
.guide figcaption{font-size:.95rem;color:var(--muted);text-align:center;margin-top:6px}
/* diagrams only: the buttons carry small icon svgs that must keep styles.css's 1.15em */
.sheet figure svg,.cover > svg{display:block;width:100%;height:auto}
.guide svg text{font-family:"Alegreya Sans",sans-serif}
.guide svg .px{font-family:"Alegreya Sans",sans-serif;font-weight:700;letter-spacing:.08em}

/* ---------- cover ---------- */
.cover{padding-top:clamp(28px,6vw,64px)}
.cover .over{font:700 .9rem/1 var(--body);letter-spacing:.26em;color:var(--ember-hi);text-transform:uppercase}
.cover h1{font-size:clamp(2.6rem,8vw,4.6rem);line-height:.98;margin:14px 0 16px;text-shadow:0 0 30px rgba(255,138,42,.35)}
.cover h1 .e{color:var(--ember)}
.cover .sub{font-size:1.3rem;color:var(--moon);max-width:40ch;line-height:1.45}
.meta{font:500 .95rem var(--pixel);color:var(--moon-dim);margin:14px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.chip{font:700 .85rem/1 var(--body);padding:7px 10px;color:#fff;background:#0f1638;border:1px solid var(--line);letter-spacing:.04em}
.chip i{display:inline-block;width:7px;height:7px;margin-right:6px;background:var(--c);box-shadow:0 0 6px var(--c)}
.stat{background:#0d1330;border:1px solid var(--line);padding:12px 14px;border-radius:4px}
.stat b{display:block;font:700 1.7rem/1.1 var(--pixel);color:var(--c,var(--ember-hi))}
.stat span{font-size:.95rem;color:var(--muted)}

/* ---------- download + support ---------- */
.get{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:24px 0 6px}
.get .btn{font-size:1.1rem;padding:.95rem 1.35rem 1rem}
.get .alt{font:500 1rem var(--pixel);color:var(--moon-dim)}
.get .alt a{color:var(--moon-dim)}
.get .alt a:hover{color:var(--ember-hi)}
.support{max-width:var(--col);margin:clamp(32px,6vw,64px) auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;background:#0b1026;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.support img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;min-height:220px}
.support div{padding:clamp(20px,4vw,34px)}
.support h2{font:700 clamp(1.4rem,3.4vw,1.8rem)/1.1 var(--pixel);color:#fff;margin:0 0 10px}
.support p{margin:0 0 18px;color:var(--moon)}
.support .fine{margin:14px 0 0;font-size:.95rem;color:var(--moon-dim)}

/* the thank-you dialog: opens after the download starts, never instead of it */
.thanks{width:min(560px,calc(100vw - 32px));max-width:none;padding:0;border:1px solid var(--line);border-radius:4px;background:#0b1026;color:var(--text);box-shadow:0 30px 80px -20px #000}
.thanks::backdrop{background:rgba(3,5,12,.78)}
/* styles.css styles every <dialog> as the screenshot lightbox (black frame, 86vh image, a floating
   close button); the thank-you dialog undoes those three. */
.thanks img{width:100%;max-height:none;aspect-ratio:2.1/1;object-fit:cover;object-position:68% 50%}
.thanks button.later{position:static;border:0;background:none}
.thanks .body{padding:22px 24px 24px}
.thanks h2{font:700 1.6rem/1.1 var(--pixel);color:#fff;margin:0 0 10px}
.thanks p{margin:0 0 16px;color:var(--moon)}
.thanks .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.thanks .later{font:500 1rem var(--pixel);color:var(--moon-dim);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline}
.thanks .later:hover{color:var(--moon)}
.thanks .btn{font-size:1.1rem;padding:.95rem 1.35rem 1rem}

@media (max-width:720px){
  .grid2,.grid3,.support{grid-template-columns:1fr}
  .support img{min-height:160px;max-height:220px}
  .chapter{align-items:flex-start}
  .badge{width:44px;height:44px;font-size:1.5rem}
  .code pre{font-size:.8rem}
}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}

/* ---------- phone dock: PDF + Wishlist, shown by guide.js once the cover is gone ---------- */
.dock{display:none}
@media (max-width:720px){
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(8,12,30,.94);border-top:1px solid var(--line);
    backdrop-filter:blur(6px);transform:translateY(110%);transition:transform .25s ease}
  .dock.on{transform:none}
  .dock .dock-wish{display:none}
  .dock.wish .dock-wish{display:inline-block}
  .dock-dl{display:inline-flex;align-items:center;gap:8px;font:600 1rem var(--pixel);color:var(--moon);text-decoration:none}
  .dock-dl svg{width:1.1em;height:1.1em}
  .dock .btn{font-size:1rem;padding:.75rem 1.1rem .8rem}
  footer{padding-bottom:96px}
}
@media (prefers-reduced-motion: reduce){.dock{transition:none}}

/* ---------- who made this: a line under the cover meta, a card halfway through ---------- */
.made{margin:8px 0 0;font-size:1.05rem;color:var(--moon-dim)}
.made a{color:var(--ember-hi)}
.midcard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);margin:8px 0 clamp(20px,4vw,36px);background:#0b1026;
  border:1px solid var(--line);border-left:4px solid var(--ember);border-radius:4px;overflow:hidden}
.midcard img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;min-height:170px}
.midcard div{padding:18px 22px}
.midcard .kick{margin:0 0 6px;font:700 .85rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ember-hi)}
.midcard p{margin:0 0 14px;color:var(--moon)}
.midcard .btn{font-size:1.05rem;padding:.85rem 1.2rem .9rem}
@media (max-width:720px){.midcard{grid-template-columns:1fr}.midcard img{max-height:150px;min-height:0}}


/* ---------- web hero: full width, text left, a real screenshot + measured numbers right ---------- */
.ghero{margin:0 calc(-1 * var(--gutter));padding:clamp(18px,3vw,30px) var(--gutter) clamp(28px,4vw,44px);border-bottom:1px solid #141a38;
  background:radial-gradient(900px 520px at 78% 40%,rgba(255,138,42,.14),transparent 65%),
             radial-gradient(800px 600px at 0% 100%,rgba(166,107,255,.12),transparent 60%),linear-gradient(180deg,#0b1026,#060914 75%)}
.ghero-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center}
.ghero .crumbs{margin:0 0 clamp(18px,3vw,30px)}
.ghero .over{font:700 .9rem/1 var(--body);letter-spacing:.26em;color:var(--ember-hi);text-transform:uppercase}
.ghero h1{font-size:clamp(2.5rem,5vw,4.3rem);line-height:.98;margin:14px 0 18px;text-shadow:0 0 30px rgba(255,138,42,.35)}
.ghero h1 .e{color:var(--ember)}
.ghero .hook{font:600 clamp(1.25rem,2.1vw,1.55rem)/1.3 var(--pixel);color:#fff;margin:0 0 14px;max-width:none;text-wrap:pretty;text-shadow:none}
.ghero .hook b{color:var(--blood);font-weight:700}
.ghero .sub{font-size:1.15rem;color:var(--moon);margin:0 0 12px;max-width:46ch}
.ghero .stackline{display:block;margin:0 0 14px;padding:9px 13px;background:#0e1a12;border:1px solid #2c5a2a;border-left:4px solid var(--plague);
  border-radius:4px;color:var(--moon);font-size:1rem;max-width:46ch}
.ghero .stackline b{color:var(--plague)}
.ghero .meta{font:400 1rem/1.5 var(--body);color:var(--moon-dim);margin:0}
.ghero .meta a{color:var(--ember-hi)}
.ghero .get{margin-top:18px}
.ghero-art{margin:0}
.ghero-art img,.ghero-art video{display:block;width:100%;height:auto;background:#060914;border:1px solid var(--line);border-radius:4px;box-shadow:0 30px 70px -30px #000,0 0 0 1px #000}
.ghero-art figcaption{font-size:.9rem;color:var(--muted);margin:8px 0 12px;text-align:left}
.board-h{margin:0 0 8px;font:700 .8rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--plague)}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.board .cell{background:#0d1330;border:1px solid var(--line);border-top:3px solid var(--plague);border-radius:4px;padding:10px 11px}
.board .cell b{display:block;font:700 clamp(1rem,1.35vw,1.2rem)/1.15 var(--pixel);color:var(--plague)}
.board .cell span{display:block;margin-top:5px;font-size:.85rem;line-height:1.3;color:var(--muted)}
.board .cell.was{border-top-color:var(--blood)}
.board .cell.was b{color:var(--blood)}
.ghero .chips{max-width:var(--max);margin:clamp(20px,3vw,30px) auto 0}
@media (max-width:980px){
  .ghero-in{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:520px){.board{grid-template-columns:1fr}.board .cell{display:flex;align-items:baseline;gap:10px}.board .cell span{margin:0}}

/* peaks: counts, not wins. Neutral (moon/ice), never the green of the before/after board */
.peaks-h{margin:14px 0 6px;font:700 .8rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--moon-dim)}
.peaks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.peaks li{padding:8px 10px;border:1px dashed #2c3a78;border-radius:4px;font-size:.85rem;line-height:1.3;color:var(--muted)}
.peaks b{display:block;font:700 1.15rem/1.1 var(--pixel);color:var(--ice);margin-bottom:3px}
@media (max-width:520px){.peaks{grid-template-columns:1fr}}