/* guide.css — the reading page with the home page's logic: sky, window, furniture. */

/* ═══ the top bar turns into the Quickstart navigator on a guide ═══ */
.fbar{gap:6px;padding-right:8px}
.fb-modes{display:flex;align-items:center;min-width:0}
.fb-nav{display:flex;align-items:center;gap:20px;margin:0 8px;max-width:640px;overflow:hidden;white-space:nowrap;
  transition:max-width .38s cubic-bezier(.4,0,.2,1),opacity .22s,margin .38s cubic-bezier(.4,0,.2,1)}
.fb-nav--qs{gap:2px;margin:0 6px 0 4px}
html.qs-mode .fb-nav--site,html:not(.qs-mode) .fb-nav--qs{max-width:0;opacity:0;margin:0;pointer-events:none}
.fb-brand{text-decoration:none}
.fb-qs{display:inline-flex;align-items:center;padding:0 14px 0 2px;margin-right:6px;border-right:1px solid rgba(15,23,42,.14);
  font:700 15px/1 "Outfit",sans-serif;letter-spacing:-.01em;color:rgba(15,23,42,.55);text-decoration:none}
.fb-qs::before{content:"/";margin-right:10px;font:400 16px/1 "Inter",sans-serif;color:rgba(15,23,42,.28)}
.fb-tab{padding:9px 12px;border-radius:999px;font:500 14px/1 "Inter",sans-serif;color:rgba(15,23,42,.72);text-decoration:none;transition:background .15s,color .15s}
.fb-tab:hover{background:rgba(15,23,42,.06);color:#0F172A}
.fb-tab.on{background:rgba(21,163,74,.14);color:#0B6B33;font-weight:600}
.fb-flip{height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.7);
  font:500 13.5px/1 "Inter",sans-serif;color:#0F172A;cursor:pointer;display:inline-grid;grid-template-areas:"x";align-items:center;justify-items:center}
.fb-flip:hover{background:#fff}
.fb-flip>span{grid-area:x;transition:opacity .18s}
html.qs-mode .fb-flip__guides,html:not(.qs-mode) .fb-flip__menu{opacity:0}
@media(max-width:1000px){.fb-nav--qs{display:none}.fb-flip{display:none}html.qs-mode .fb-nav--site{max-width:640px;opacity:1;margin:0 8px;pointer-events:auto}}
/* ═══════════════════════════════════════════════════════════════
   The reading page, with the home page's logic.
   Sky wallpaper in the same frame → title over the sky → the
   window rises over it → sky dissolves into the grey ground →
   footer brings the hills back.  Lifted rules are marked.
   ═══════════════════════════════════════════════════════════════ */
body{position:relative;padding-top:0;overflow-x:hidden}

/* the wallpaper frame: lifted from the home page (walls) */
.walls{position:absolute;top:16px;left:16px;right:16px;z-index:0;aspect-ratio:1672/1626;border-radius:26px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 460px),rgba(0,0,0,.92) calc(100% - 380px),rgba(0,0,0,.72) calc(100% - 300px),rgba(0,0,0,.45) calc(100% - 220px),rgba(0,0,0,.2) calc(100% - 140px),rgba(0,0,0,.06) calc(100% - 70px),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 460px),rgba(0,0,0,.92) calc(100% - 380px),rgba(0,0,0,.72) calc(100% - 300px),rgba(0,0,0,.45) calc(100% - 220px),rgba(0,0,0,.2) calc(100% - 140px),rgba(0,0,0,.06) calc(100% - 70px),rgba(0,0,0,0) 100%)}
.walls img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* title over the sky: lifted from the home hero (skyhero) */
.sky{position:relative;z-index:2;text-align:center;padding:176px 200px 0}
.sky .eye{margin:0 0 18px;font:600 12px/1 "Inter",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(15,23,42,.62)}
.sky .eye a{color:inherit;text-decoration:none}
.sky .eye i{font-style:normal;margin:0 10px;color:rgba(15,23,42,.35)}
.sky h1{font-family:"Outfit","Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;font-size:66px;line-height:.98;letter-spacing:-.035em;max-width:16ch;margin:0 auto 20px;text-wrap:balance;color:#0F172A;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.sky h1 em{font-style:normal;color:#15A34A;background:rgba(22,163,74,.16);border-radius:.2em;padding:.02em .12em;margin:0 -.02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sky .lead{margin:0 auto;max-width:52ch;font:400 20px/1.5 "Inter",sans-serif;color:rgba(15,23,42,.8);text-shadow:0 1px 0 rgba(255,255,255,.4)}
.sky .fine{margin:22px 0 0;font:500 14px/1 "Inter",sans-serif;color:rgba(15,23,42,.62);display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.sky .fine span{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);border-radius:999px;padding:8px 14px;backdrop-filter:blur(10px)}

/* the window rises over the picture: lifted from the home (win) */
.win{position:relative;z-index:3;width:min(1240px,calc(100% - 200px));margin:44px auto 0;border-radius:40px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);
  box-shadow:0 30px 80px rgba(15,23,42,.20),0 2px 6px rgba(15,23,42,.06);transform-origin:50% 0;will-change:transform}
.win__bar{position:relative;height:56px;display:flex;align-items:center;justify-content:center}
.win__title{font:500 13.5px/1 "Inter",sans-serif;color:rgba(15,23,42,.55)}
.vlights{display:flex;position:absolute;left:24px;top:24px;gap:9px}
.vlights i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 .5px rgba(0,0,0,.12) inset}
.vlights i:nth-child(1){background:#FF5F57}.vlights i:nth-child(2){background:#FEBC2E}.vlights i:nth-child(3){background:#28C840}
/* the tab row is the guide set: lifted from the home (ptabs) */
.ptabs{position:relative;display:flex;align-items:center;gap:4px;padding:5px;border-radius:12px;background:rgba(15,23,42,.05)}
.ptabs__label{display:inline-flex;align-items:center;gap:8px;padding:0 14px 0 12px;margin-right:2px;border-right:1px solid rgba(15,23,42,.12);
  font:700 13px/1 "Outfit",sans-serif;letter-spacing:.02em;color:#0F172A;text-decoration:none;white-space:nowrap}
.ptabs__label::before{content:"";width:8px;height:8px;border-radius:50%;background:#15A34A;box-shadow:0 0 0 3px rgba(21,163,74,.18)}
.ptabs__label::after{content:"guides";font:500 12px/1 "Inter",sans-serif;color:#64748B;margin-left:-2px}
.pt{position:relative;z-index:2;display:inline-flex;align-items:center;padding:9px 16px;border-radius:8px;font:500 14px/1.2 "Inter",sans-serif;color:#64748B;white-space:nowrap;text-decoration:none;transition:color .25s}
.pt.on,.pt:hover{color:#0F172A}
.pslide{position:absolute;top:5px;height:calc(100% - 10px);border-radius:8px;background:#fff;border:1px solid rgba(255,255,255,.6);box-shadow:0 1px 4px rgba(40,80,160,.12);transition:left .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1);z-index:1;pointer-events:none}
.win__in{padding:24px 64px 64px}

/* the document: 660 for words, the full window for objects */
.col{width:100%;margin:0 auto}
.col p{margin:16px 0 0;font:400 18px/1.6 "Inter",sans-serif;color:#38495C}
.col p strong,.col li strong{font-weight:600;color:#14212E}
.col a{color:#253E87;text-decoration:underline;text-decoration-color:#B9C8EA;text-underline-offset:3px}
.col h2{margin:64px 0 12px;font:600 34px/1.14 "Outfit",sans-serif;letter-spacing:-.03em;color:#14212E;scroll-margin-top:120px}
.col h2+p{margin-top:0}
.col ul{margin:16px 0 0;padding-left:22px}
.col ul li{margin-top:8px;font:400 18px/1.6 "Inter",sans-serif;color:#38495C}

.toc{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.toc a{font:500 14px/1 "Inter",sans-serif;color:#3A4657;text-decoration:none;background:#F1F4F9;border:1px solid #E4E9F1;border-radius:999px;padding:9px 14px;transition:background .15s,border-color .15s}
.toc a:hover{background:#E2EAFD;border-color:#CFDBF6;color:#253E87}

/* the two kinds, as the two panels from the home deck */
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:34px 0 0}
.kind{position:relative;overflow:hidden;border-radius:30px;padding:30px 30px 26px;color:#14212E;
  box-shadow:0 10px 26px rgba(40,44,60,.10),0 1px 2px rgba(40,44,60,.06)}
.kind--ask{background-image:linear-gradient(148deg,#C6DFD0 0%,#C6DFD0 34%,#B4D5C1 100%)}
.kind--work{background-image:linear-gradient(148deg,#C3B6EC 0%,#C3B6EC 34%,#AFA0E2 100%)}
.kind h3{margin:0;font:700 26px/1.1 "Outfit",sans-serif;letter-spacing:-.03em}
.kind h3 span{color:#3B4FA0}
.kind--ask h3 span{color:#2E6B5E}
.kind>p{margin:8px 0 0;font:400 16px/1.5 "Inter",sans-serif;color:rgba(20,33,46,.82);min-height:48px}
.kind .mini{margin:18px 0 0;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:16px 14px 10px}
.kind .mini svg{display:block;width:100%;height:auto}
.kind .cap{margin:12px 0 0;font:500 13px/1.4 "Inter",sans-serif;color:rgba(20,33,46,.62)}

/* steps, in the column */
.steps{margin:22px 0 0;padding:0;list-style:none;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-left:46px;margin-top:18px}
.steps li::before{content:counter(step);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:#E2EAFD;color:#253E87;display:grid;place-items:center;font:600 14px/1 "Inter",sans-serif}
.steps b{display:block;font:600 18px/1.5 "Inter",sans-serif;color:#14212E}
.steps span{display:block;margin-top:2px;font:400 18px/1.6 "Inter",sans-serif;color:#38495C}

/* a screenshot on the bloom ground: lifted from the memory stepper (sd__stage) */
.stage{position:relative;isolation:isolate;overflow:hidden;margin:34px 0 0;padding:34px 56px 0;
  --glow:195,156,230;--base:#FAF5FF;border:1px solid rgba(37,52,76,.09);border-radius:28px;
  background:radial-gradient(ellipse at 23% 24%,rgba(181,145,229,.23),transparent 76%),radial-gradient(ellipse at 85% 60%,rgba(244,160,192,.24),transparent 75%),linear-gradient(145deg,#fff,#FBF6FC);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px rgba(32,44,62,.08)}
.stage--blue{--glow:117,179,251;--base:#F2F7FF;background:radial-gradient(ellipse at 52% 36%,rgba(var(--glow),.3),transparent 82%),linear-gradient(150deg,#fff,var(--base))}
.stage>img{display:block;width:100%;border-radius:16px 16px 0 0;border:1px solid rgba(20,33,46,.10);border-bottom:0;box-shadow:0 18px 40px rgba(15,23,42,.16)}
.stage .lights{display:flex;gap:8px;position:absolute;left:24px;top:14px}
.stage .lights i{width:10px;height:10px;border-radius:50%;background:rgba(20,33,46,.18)}
.stagecap.col{margin:12px auto 0;font:400 14.5px/1.5 "Inter",sans-serif;color:#6B7A8C}
.stagecap b{font-weight:600;color:#38495C}

/* the question list and the note */
.qa{margin:24px 0 0;display:grid;grid-template-columns:30% 1fr;gap:0 32px}
.qa dt{padding:16px 0;border-top:1px solid #E4E9F1;font:600 18px/1.45 "Inter",sans-serif;color:#14212E}
.qa dd{margin:0;padding:16px 0;border-top:1px solid #E4E9F1;font:400 18px/1.6 "Inter",sans-serif;color:#38495C}
.tile{position:relative;isolation:isolate;overflow:hidden;margin:26px 0 0;padding:20px 22px;border-radius:20px;
  --glow:117,179,251;--base:#F2F7FF;border:1px solid rgba(37,52,76,.09);
  background:radial-gradient(ellipse at 52% 36%,rgba(var(--glow),.3),transparent 82%),linear-gradient(150deg,#fff,var(--base));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px rgba(32,44,62,.08);font:400 16px/1.55 "Inter",sans-serif;color:#4D5C70}
.tile b{font-weight:600;color:#182B42}

/* the page ends with two bloom tiles, like the community cards */
.ends{width:100%;margin:64px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.end{--glow:117,179,251;--base:#F2F7FF;position:relative;isolation:isolate;overflow:hidden;display:block;padding:22px 22px 24px;border-radius:24px;
  border:1px solid rgba(37,52,76,.09);background:radial-gradient(ellipse at 52% 36%,rgba(var(--glow),.3),transparent 82%),linear-gradient(150deg,#fff,var(--base));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px rgba(32,44,62,.08);text-decoration:none;color:#202C3E;transition:transform .2s,box-shadow .2s}
.end:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 36px rgba(32,44,62,.12)}
.end--green{--glow:137,199,171;--base:#F2FAF6}
.end i{display:block;font:600 11px/1 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7C8899;font-style:normal;margin-bottom:10px}
.end b{display:block;font:700 22px/1.15 "Outfit",sans-serif;letter-spacing:-.025em;color:#14212E}
.end span{display:block;margin-top:6px;font:400 15px/1.45 "Inter",sans-serif;color:#4D5C70}

@media(max-width:1100px){.win{width:calc(100% - 48px)}.win__in{padding:20px 32px 48px}.sky{padding:150px 40px 0}.sky h1{font-size:48px}}
@media(max-width:820px){.kinds,.ends{grid-template-columns:1fr}.qa{grid-template-columns:1fr}.qa dd{border-top:0;padding-top:0}.ptabs{display:none}.stage{padding:24px 16px 0}.sky{padding:130px 20px 0}.sky h1{font-size:36px}.win{width:calc(100% - 24px);border-radius:28px}}

/* an index is a list, not a card wall */
.links{margin:24px 0 0;display:grid;gap:2px}
.links a{display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:baseline;padding:14px 14px 14px 12px;margin:0 -12px;border-radius:12px;text-decoration:none;transition:background .14s}
.links a:hover{background:#F2F6FC}
.links b{font:600 17px/1.4 "Inter",sans-serif;color:#253E87;grid-column:2}
.links i{grid-row:1 / span 2;font-style:normal;font:500 12px/1.6 "JetBrains Mono",monospace;color:#A6B1C0;padding-top:2px}
.links span{grid-column:2;font:400 15.5px/1.5 "Inter",sans-serif;color:#5A6B80;margin-top:2px}
.col code{font:400 .88em/1.4 "JetBrains Mono",ui-monospace,monospace;background:#EFF3F9;border:1px solid #E1E6EE;border-radius:5px;padding:1px 5px;color:#2B3A4B}

/* ═══ the big-numbers rail, on the background to the right of the window.
   Sizes, weights, colours and behaviour lifted from lorah.ai/quickstart. ═══ */
.guide{position:relative;z-index:3;width:min(1358px,calc(100% - 48px));margin:44px auto 0;display:grid;grid-template-columns:190px minmax(0,1140px);gap:28px;align-items:start}
.guide .win{width:100%;margin:0}
/* the rail rides the wallpaper, so it wears the nav pill's frosted glass */
.rail{position:sticky;top:40px;align-self:start;height:max-content;padding:10px 18px 10px 20px;border-radius:24px;
  background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.rail-step{display:flex;align-items:center;gap:14px;padding:14px 0;min-height:62px;cursor:pointer;text-decoration:none;transition:opacity .2s ease}
.rail-num{font:800 28px/1 "Outfit","Plus Jakarta Sans",sans-serif;color:#C3CBD6;letter-spacing:-.03em;transition:color .25s ease,transform .25s ease;flex-shrink:0;width:38px;font-variant-numeric:tabular-nums}
.rail-label{font:600 14px/1.3 "Inter",sans-serif;color:#94A3B8;transition:color .2s ease}
.rail-step:hover .rail-num{color:#1D4ED8}
.rail-step:hover .rail-label{color:#475569}
.rail-step.passed .rail-num,.rail-step.passed .rail-label{color:#475569}
.rail-step.active .rail-num{color:#2563EB;transform:scale(1.05);transform-origin:left center}
.rail-step.active .rail-label{color:#0F172A;font-weight:700}
.toc{display:none}
@media(max-width:1100px){.guide{grid-template-columns:1fr;width:calc(100% - 48px)}.rail{display:none}.toc{display:flex}}
@media(max-width:820px){.guide{width:calc(100% - 24px)}}

/* ═══ a quiet page: grey cards, colour only where it means something ═══ */
.win--quiet .tile{--glow:168,182,205;--base:#F4F6F9;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 18px rgba(32,44,62,.06)}
.win--quiet .toolgrp{background:#F5F7FA;border:1px solid rgba(20,33,46,.08);box-shadow:none}
.win--quiet .toolgrp--w{background:#EEF3FF}
.win--quiet .toolgrp .t{background:#fff;border-color:rgba(20,33,46,.08)}
.win--quiet .kind{background:#F5F7FA;border:1px solid rgba(20,33,46,.08);box-shadow:none}
.win--quiet .kind h3 span{color:#4466B0}
.win--quiet .kind>p{color:#4A5B6E}
.win--quiet .kind .form{background:#fff;border-color:rgba(20,33,46,.08)}
.win--quiet .kind .fld i{border-color:rgba(20,33,46,.14)}
.win--quiet .stage--mock{--glow:168,182,205;--base:#F4F6F9;background:radial-gradient(ellipse at 52% 36%,rgba(var(--glow),.22),transparent 82%),linear-gradient(150deg,#fff,var(--base))}
.win--quiet .end{--glow:168,182,205;--base:#F4F6F9}
.win--quiet .end--green{--glow:117,179,251;--base:#F2F7FF}

/* ═══════════════════════════════════════════════════════════════
   One hue per guide. Everything on the page that is not the app
   itself takes it, at three strengths: full for the title highlight
   and the active tab, a soft bloom for panels, a faint one for tiles.
   ═══════════════════════════════════════════════════════════════ */
[data-hue="green"]{--hg:120,196,160;--hb:#F0F9F4;--hd:#DAF0E3;--hs:#15A34A;--hi:#0B6B33;--hsr:21,163,74}
[data-hue="blue"]{--hg:117,179,251;--hb:#F2F7FF;--hd:#DCE9FF;--hs:#2563EB;--hi:#1D4ED8;--hsr:37,99,235}
[data-hue="lilac"]{--hg:195,156,230;--hb:#FAF5FF;--hd:#EADFF9;--hs:#7C5CD6;--hi:#5B3FB8;--hsr:124,92,214}
[data-hue="peach"]{--hg:255,151,103;--hb:#FFF9F5;--hd:#FDE6D9;--hs:#E0663A;--hi:#B4592B;--hsr:224,102,58}
[data-hue="sand"]{--hg:235,196,133;--hb:#FFFAF2;--hd:#F7E9CF;--hs:#C9922A;--hi:#8A5A12;--hsr:201,146,42}
[data-hue="slate"]{--hg:168,182,205;--hb:#F2F4F7;--hd:#E1E6EE;--hs:#4A6FA5;--hi:#3A4C66;--hsr:74,111,165}

/* the sky and the bar */
[data-hue] .sky h1 em{color:var(--hs)}
[data-hue] .sky h1 em{background:rgba(var(--hsr),.16)}
[data-hue] .fb-tab.on{background:rgba(var(--hsr),.13);color:var(--hi)}
[data-hue] .rail-step.active .rail-num{color:var(--hs)}
.fb-tab--green{--dot:#15A34A}.fb-tab--blue{--dot:#2563EB}.fb-tab--lilac{--dot:#7C5CD6}.fb-tab--peach{--dot:#E0663A}.fb-tab--sand{--dot:#C9922A}.fb-tab--slate{--dot:#4A6FA5}

/* panels: a soft bloom of the hue, two depths so a pair can differ */
[data-hue] .kind{color:#14212E;border:1px solid rgba(37,52,76,.09);
  background:radial-gradient(ellipse at 52% 36%,rgba(var(--hg),.42),transparent 80%),linear-gradient(150deg,#fff,var(--hd));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px rgba(32,44,62,.08)}
[data-hue] .kind+.kind,[data-hue] .kind:nth-child(2){background:radial-gradient(ellipse at 48% 90%,rgba(var(--hg),.22),transparent 70%),linear-gradient(150deg,#fff,var(--hb))}
[data-hue] .kind:nth-child(3){background:radial-gradient(ellipse at 30% 30%,rgba(var(--hg),.30),transparent 76%),linear-gradient(150deg,#fff,var(--hd))}
[data-hue] .kind h3 span{color:var(--hi)}
[data-hue] .kind .mini{background:rgba(255,255,255,.72)}

/* tiles, stages, end cards: the faint bloom */
[data-hue] .tile,[data-hue] .stage,[data-hue] .end,[data-hue] .stage--blue{--glow:var(--hg);--base:var(--hb);
  background:radial-gradient(ellipse at 52% 36%,rgba(var(--hg),.26),transparent 82%),linear-gradient(150deg,#fff,var(--hb))}
[data-hue] .end--green,[data-hue] .end--sand,[data-hue] .tile--green,[data-hue] .tile--lilac,[data-hue] .tile--blue,[data-hue] .tile--sand,[data-hue] .tile--grey{--glow:var(--hg);--base:var(--hb);
  background:radial-gradient(ellipse at 52% 36%,rgba(var(--hg),.26),transparent 82%),linear-gradient(150deg,#fff,var(--hb))}
[data-hue] .end:first-child{background:radial-gradient(ellipse at 52% 36%,rgba(var(--hg),.40),transparent 80%),linear-gradient(150deg,#fff,var(--hd))}
[data-hue] .stage--vid{background:radial-gradient(ellipse at 52% 36%,rgba(var(--hg),.26),transparent 82%),linear-gradient(150deg,#fff,var(--hb))}
[data-hue] .toolgrp{background:radial-gradient(ellipse at 52% 36%,rgba(var(--hg),.30),transparent 80%),linear-gradient(150deg,#fff,var(--hd));border:1px solid rgba(37,52,76,.09)}
[data-hue] .steps li::before{background:rgba(var(--hsr),.12);color:var(--hi)}
[data-hue] .col a{color:var(--hi);text-decoration-color:rgba(var(--hsr),.35)}
[data-hue] .win--quiet .tile,[data-hue] .win--quiet .stage--mock{background:radial-gradient(ellipse at 52% 36%,rgba(var(--hg),.22),transparent 82%),linear-gradient(150deg,#fff,var(--hb))}
/* the memory scenes from the home stepper take the page hue too */
[data-hue] .sd__stage,[data-hue] .sd__stage[data-scene="1"],[data-hue] .sd__stage[data-scene="2"],[data-hue] .sd__stage[data-scene="3"]{--glow:var(--hg);--base:var(--hb);
  background:radial-gradient(ellipse at 52% 36%,rgba(var(--hg),.28),transparent 82%),linear-gradient(150deg,#fff,var(--hb))}

/* ═══ phones: nothing may force the window wider than the screen ═══ */
.guide,.win,.win__in,.win__in>*,.col,.stage,.mockwrap,.mk-set__main,.mk-modal2__body,.tile,.kind{min-width:0}
@media(max-width:1100px){.guide{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){
  .win__in{padding:16px 14px 36px}
  .stage--mock,.stage--vid{padding:16px 12px}
  .mk-bar{flex-wrap:wrap;row-gap:8px}
  .mk-send{margin-left:auto}
  .mk-you{max-width:92%}.mk-row,.mk-turn{max-width:100%}
  .mk-picker__menu{width:100%}
  .mockwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:28px}
  .mockwrap>section{min-width:760px}   /* the home panels keep their shape and scroll sideways */
  .mk-plan table{font-size:13px}
  .mk-set__main{padding:16px}
  .mk-set__code{font-size:11px}
  .sky h1{font-size:38px}
  .sky .lead{font-size:17px}
}
@media(max-width:600px){
  .fb-nav--site{display:none}              /* the phone bar: mark, Download */
  .fbar{padding:8px 8px 8px 16px;gap:10px}
  .fb-flip{display:none}
}

.kinds[id]{scroll-margin-top:120px}