/* THE GUIDES, in the website's own light look (6 Oct 2026).
   The colours, the two typefaces, the pill header, the flat buttons and the footer are
   the ones the home page settled on, copied rather than linked, because the home page
   keeps its styles inside itself. One file for every guide, so a guide is only words. */
:root{
  color-scheme:light;
  --bg:#F7F5FF; --bg-2:#EFEBFF; --bg-3:#EFEBFB;
  --card:#FFFFFF; --card-2:#F4F1FF;
  --line:rgba(28,18,72,.09); --line-hi:rgba(28,18,72,.17);
  --ink:#140F2E; --dim:#565077; --faint:#8E89AA;
  --acc:#6D28D9; --btn:#5B21B6; --btn-hi:#6D28D9;
  --ok:#059669;
  --max:1180px; --gut:clamp(18px,4.5vw,44px);
  --sans:'Plus Jakarta Sans','Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --display:'Clash Display','Plus Jakarta Sans','Segoe UI',Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
body::before{
  content:"";position:absolute;left:0;right:0;top:0;height:900px;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 60% at 50% 0%,rgba(139,92,246,.16),transparent 70%),
    radial-gradient(30% 40% at 92% 20%,rgba(232,121,249,.08),transparent 70%);
}
main,header,footer{position:relative;z-index:2}
::selection{background:#8B5CF6;color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mascot{width:32px;height:32px;object-fit:contain;flex-shrink:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;word-spacing:.06em}

/* ---------- header ---------- */
#hdr{position:fixed;top:14px;left:0;right:0;z-index:60;padding:0 var(--gut);pointer-events:none}
.nav{
  pointer-events:auto;position:relative;max-width:1100px;margin:0 auto;
  display:flex;align-items:center;gap:14px;padding:8px 8px 8px 16px;border-radius:999px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line);box-shadow:0 12px 34px -18px rgba(40,24,110,.35),inset 0 1px 0 rgba(255,255,255,.85);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.01em}
.brand .mascot{width:30px;height:30px}
.nav-links{display:flex;gap:2px;margin:0 auto}
.nav-links a{padding:9px 15px;border-radius:999px;font-size:14px;font-weight:500;color:var(--dim);transition:color .25s,background .25s}
.nav-links a:hover,.nav-links a.here{color:var(--ink);background:rgba(28,18,72,.05)}
@media (max-width:820px){
  .nav-links{display:none}
  .nav .btn{margin-left:auto}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:999px;border:0;cursor:pointer;
  font:700 15.5px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s;
}
.btn-primary{color:#fff;background:var(--btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -14px rgba(40,20,120,.7)}
.btn-primary:hover{background:var(--btn-hi);transform:translateY(-2px)}
.btn-ghost{color:var(--ink);background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--line-hi),0 8px 24px -16px rgba(40,24,110,.35)}
.btn-ghost:hover{background:#fff;transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:14px}

/* ---------- one guide ---------- */
.post{max-width:780px;margin:0 auto;padding:150px var(--gut) 30px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--faint)}
.crumbs a{color:var(--dim)}
.crumbs a:hover{color:var(--acc)}
.kicker{display:inline-flex;margin-top:28px;font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.post h1{margin-top:14px;font-size:clamp(36px,5.4vw,56px);line-height:1.06;letter-spacing:-.025em}
.lede{margin-top:20px;font-size:19.5px;line-height:1.6;color:var(--dim)}
.meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px;padding-bottom:30px;border-bottom:1px solid var(--line);font-size:14px;color:var(--faint)}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}

.prose{margin-top:8px}
.prose h2{margin-top:56px;font-size:clamp(26px,3.2vw,32px);line-height:1.15;letter-spacing:-.02em}
.prose h3{margin-top:34px;font-size:20px;line-height:1.3}
.prose p{margin-top:16px}
.prose a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul,.prose ol{margin-top:16px;padding-left:24px}
.prose li{margin-top:8px;padding-left:4px}
.prose li::marker{color:var(--acc)}
.prose strong{font-weight:700}
.prose kbd,.prose code{
  font-family:var(--mono);font-size:.84em;padding:2px 7px;border-radius:7px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line-hi);white-space:nowrap
}
.path{font-weight:600;color:var(--ink);background:rgba(124,58,237,.08);padding:1px 6px;border-radius:7px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* numbered steps */
.prose ol.steps{list-style:none;padding:0;counter-reset:s}
.prose ol.steps > li{counter-increment:s;position:relative;padding:0 0 0 48px;margin-top:18px}
.prose ol.steps > li::before{
  content:counter(s);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font:700 13.5px/1 var(--sans);color:var(--acc);
  background:#fff;box-shadow:inset 0 0 0 1px rgba(124,58,237,.3)
}

/* a quiet aside */
.note{margin-top:26px;padding:16px 20px;border-radius:16px;background:var(--card-2);border:1px solid rgba(124,58,237,.16);font-size:15.5px;color:var(--dim)}
.note b{color:var(--ink)}

/* a request to Key and what came back, drawn the way the home page draws it */
.ask{margin-top:26px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(28,18,72,.04),0 30px 70px -48px rgba(40,24,110,.5);overflow:hidden}
.ask-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:15px}
.ask-top .mascot{width:24px;height:24px}
.ask-top .tag{margin-left:auto;font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);padding:6px 10px;border-radius:999px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2)}
.ask-body{padding:18px 16px 18px}
.prose .ask p{margin-top:0}
.ask .me{margin-left:auto;max-width:86%;width:fit-content;padding:11px 16px;border-radius:16px 16px 4px 16px;background:var(--btn);color:#fff;font-size:15px;line-height:1.5;box-shadow:0 8px 18px -12px rgba(40,20,120,.7)}
.ask .log{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--dim)}
.ask .log span{display:block}
.ask .log span::before{content:"\2713";color:var(--ok);margin-right:8px}
.ask .key{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:15px;line-height:1.55}
.ask .key .mascot{width:26px;height:26px;margin-top:1px}
.ask .chip{display:inline-flex;margin-top:12px;margin-left:36px;padding:6px 11px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ok);background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.2)}

/* the end of a guide */
.cta{margin:64px 0 0;padding:34px 32px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px -48px rgba(40,24,110,.5);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.cta .mascot{width:64px;height:64px;filter:drop-shadow(0 12px 22px rgba(109,62,240,.3))}
.cta h2{font-size:28px;line-height:1.15}
.cta p{margin-top:8px;color:var(--dim);font-size:15.5px}
.cta .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.cta small{display:block;margin-top:12px;font-size:13px;color:var(--faint)}
@media (max-width:560px){.cta{grid-template-columns:1fr;padding:28px 22px}}

.more{max-width:780px;margin:0 auto;padding:56px var(--gut) 100px}
.more h2{font-size:22px}

/* ---------- the list of guides ---------- */
.list-head{max-width:var(--max);margin:0 auto;padding:160px var(--gut) 0}
.list-head h1{font-size:clamp(44px,6.4vw,76px);line-height:1;letter-spacing:-.03em}
.list-head .lede{max-width:600px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.page-cards{max-width:var(--max);margin:0 auto;padding:30px var(--gut) 110px}
.card{display:flex;flex-direction:column;padding:26px 26px 22px;border-radius:22px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.75));border:1px solid var(--line);box-shadow:0 1px 2px rgba(28,18,72,.04),0 18px 40px -28px rgba(40,24,110,.35);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(28,18,72,.04),0 26px 50px -28px rgba(40,24,110,.5)}
.card .k{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.card h3{margin-top:10px;font-size:22px;line-height:1.25}
.card p{margin-top:10px;font-size:15px;color:var(--dim);line-height:1.6}
.card .go{margin-top:auto;padding-top:18px;font-size:14px;font-weight:600;color:var(--acc)}
.more .cards .card h3{font-size:19px}
@media (max-width:760px){.cards{grid-template-columns:1fr}}

/* ---------- footer, as on the home page ---------- */
footer{background:var(--bg-3);border-top:1px solid var(--line);overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:70px 0 44px}
.foot-brand p{color:var(--dim);font-size:15px;margin-top:14px;max-width:320px}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--dim)}
.foot-col h4{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.foot-col a:hover{color:var(--ink)}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--faint)}
.wordmark{font-family:var(--display);font-size:clamp(120px,30vw,420px);font-weight:600;letter-spacing:-.04em;line-height:.74;text-align:center;margin-top:10px;user-select:none;
  color:transparent;background:linear-gradient(180deg,rgba(109,62,240,.16),rgba(109,62,240,0) 85%);-webkit-background-clip:text;background-clip:text}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
@media (max-width:520px){body{font-size:16px}.foot-grid{grid-template-columns:1fr;gap:30px}.foot-brand{grid-column:auto}}