/* AI Porn Shorts. Scoped under .sh-root, loaded only on /ai-porn-shorts/.
   Same metrics as the other tool pages (ai-girlfriend.css): 1180px column, glass head, uppercase
   centred h2 at 26/21px, 60/44px between sections, --rad 14px, --pad 18/15px, --gap 14/12px.
   Page accent is electric blue, screen light: pink is the girlfriend page, green image to prompt,
   violet the library, orange the articles, and yellow is the site's "try this tool" colour.
   The feed wears each brand's colour through --c. */
.sh-root{
  --acc:#4d8dff;--accrgb:77,141,255;--acctx:#8db8ff;--acchi:#9cc4ff;--accink:#071226;
  --surf:rgba(255,255,255,.035);--surfbrd:rgba(255,255,255,.1);
  --muted:#a7a2a0;--ink:#f3efec;--hairline:rgba(255,255,255,.09);
  --c:#f76d84;--pad:18px;--rad:14px;--gap:14px;
  --phoneW:400px;--phoneH:min(calc(var(--phoneW) * 16 / 9),82vh);
  position:relative;max-width:1180px;margin:0 auto;padding:0 20px 70px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
.sh-root *{box-sizing:border-box}
.sh-root:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 50% 4%,rgba(77,141,255,.09),rgba(77,141,255,0) 72%),
    radial-gradient(30% 26% at 88% 30%,rgba(247,109,132,.06),rgba(247,109,132,0) 74%),
    radial-gradient(34% 26% at 10% 62%,rgba(77,141,255,.05),rgba(77,141,255,0) 76%)}
.sh-root > *{position:relative;z-index:1}
.sh-root a{color:inherit}
.sh-root :focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.sh-preview{margin:0 auto 14px;width:max-content;max-width:100%;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#d9d4cf;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.28);
  padding:7px 14px;border-radius:999px;text-align:center}

/* ---- head: the same glass box as .gf-head ---- */
.sh-head{background:rgba(var(--glass-rgb),.3);-webkit-backdrop-filter:blur(25px) saturate(200%);backdrop-filter:blur(25px) saturate(200%);
  border-radius:var(--rad);padding:2rem var(--box-padding-desktop,2.5rem);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:1.5rem;text-align:center}
.sh-eyebrow{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acctx);font-weight:700}
.sh-root h1{font-size:44px;line-height:1.04;margin:14px 0 12px;text-transform:uppercase;font-weight:800;text-wrap:balance}
.sh-root h1 .g{color:var(--acctx)}
.sh-lead{color:var(--muted);max-width:56ch;margin:0 auto;font-size:15px;line-height:1.6}
.sh-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0}
.sh-pills span{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--acctx);
  background:rgba(var(--accrgb),.12);border:1px solid rgba(var(--accrgb),.42);padding:7px 14px;border-radius:999px}

/* ---- sections: one rhythm for all of them ---- */
.sh-sec{margin-top:60px}
.sh-h2{text-align:center;font-size:26px;font-weight:800;text-transform:uppercase;margin:0 0 6px;text-wrap:balance}
.sh-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 auto 26px;max-width:52ch;line-height:1.55}
.sh-k{margin:0 0 10px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ---- the stage ---- */
.sh-stage{display:grid;grid-template-columns:minmax(0,1fr) var(--phoneW) minmax(0,1fr);grid-template-areas:"now phone rail";
  gap:28px;align-items:center;scroll-margin-top:90px}
.sh-phone{grid-area:phone;position:relative}
.sh-now{grid-area:now}
.sh-rail{grid-area:rail}
.sh-now,.sh-rail{height:calc(var(--phoneH) - 64px);display:flex;flex-direction:column;min-height:0;
  border-radius:var(--rad);background:var(--surf);border:1px solid var(--surfbrd)}
.sh-now{padding:22px;overflow-y:auto;scrollbar-width:thin}
.sh-now-title{margin:0 0 8px;font-size:24px;line-height:1.15;font-weight:800}
.sh-now-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sh-now-tags span{font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--muted)}
.sh-now-desc{margin:0 0 16px;font-size:14.5px;line-height:1.65;color:var(--ink)}
.sh-now-facts{margin:0 0 14px;border-top:1px solid var(--hairline)}
.sh-now-facts div{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--hairline)}
.sh-now-facts dt{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:2px}
.sh-now-facts dd{margin:0;font-size:13.5px;line-height:1.45;font-variant-numeric:tabular-nums}
.sh-now-ep{margin:0 0 12px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sh-now .sh-btn{margin-top:auto}

.sh-rail{padding:16px 10px 10px 14px}
.sh-rail-list{flex:1;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.sh-item{display:flex;gap:11px;align-items:center;width:100%;text-align:left;padding:7px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;background:none;color:inherit;font:inherit;margin-bottom:3px}
.sh-item:hover{background:rgba(255,255,255,.05)}
.sh-item.act{background:rgba(var(--glass-rgb),.8);border-color:color-mix(in srgb,var(--c,#f76d84) 55%,transparent)}
.sh-item img{width:40px;height:54px;object-fit:cover;border-radius:7px;background:#222;flex:none}
.sh-item b{display:block;font-size:13.5px;line-height:1.25}
.sh-item small{font-size:11.5px;color:var(--muted)}

/* the phone */
.sh-feed{--lit:#f76d84;height:var(--phoneH);overflow-y:scroll;scroll-snap-type:y mandatory;border-radius:28px;background:#000;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -30px rgba(0,0,0,.9);scrollbar-width:none;position:relative;outline:none;
  transition:border-color .35s ease,box-shadow .35s ease}
.sh-feed::-webkit-scrollbar{display:none}
.sh-feed:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.sh-feed.is-lit{border-color:color-mix(in srgb,var(--lit) 75%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--lit) 35%,transparent),0 0 70px -10px color-mix(in srgb,var(--lit) 75%,transparent),0 30px 70px -30px rgba(0,0,0,.9)}

.sh-short{--c:#f76d84;position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000}
.sh-short video,.sh-short .sh-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.sh-short .sh-still{opacity:0;transform:scale(1.04);filter:blur(4px) brightness(.62);transition:opacity .45s ease,transform .6s ease}
.sh-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 22%,transparent 56%,rgba(0,0,0,.85))}
.sh-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.35) 45%,rgba(0,0,0,.8))}
.sh-short.is-ended .sh-still{opacity:1;transform:none}
.sh-short.is-ended .sh-glow{opacity:1}
.sh-short.is-ended .sh-hud-bot,.sh-short.is-ended .sh-hint{opacity:0;pointer-events:none}

.sh-hud-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:flex-end;align-items:center;z-index:3}
.sh-snd{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.45);color:#fff;
  display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:0}
.sh-snd svg{width:18px;height:18px}
.sh-snd .on{display:none}.sh-feed.has-sound .sh-snd .on{display:block}.sh-feed.has-sound .sh-snd .off{display:none}
.sh-hud-bot{position:absolute;left:16px;right:16px;bottom:30px;z-index:3;transition:opacity .25s ease}
.sh-hud-bot b{display:block;margin:0 0 6px;font-size:21px;line-height:1.15;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.sh-meta{font-size:12.5px;color:rgba(255,255,255,.85);display:flex;gap:8px 10px;flex-wrap:wrap;align-items:center}
/* the two free episodes as one segmented control: a single dark glass track, the episode playing is
   the white segment, the other waits dimmed; a tap swaps them. Neutral on purpose: the only colour
   near the bottom of the player is the brand's, on the way out. Values are written out because in
   full screen the feed lives outside .sh-root and its variables. */
.sh-eps{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sh-ep{position:relative;height:28px;padding:0 12px;border:0;border-radius:7px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;line-height:1;
  color:rgba(255,255,255,.66);background:transparent;transition:background .2s ease,color .2s ease}
.sh-ep:before{content:"";position:absolute;inset:-8px -1px} /* 44px tall to a thumb */
.sh-ep:hover{color:#fff}
.sh-ep.on{cursor:default;color:#151515;background:#f2f2f2}
.sh-meta-t{text-shadow:0 1px 6px rgba(0,0,0,.6)}
.sh-bar{height:3px;background:rgba(255,255,255,.22);border-radius:3px;margin-top:12px;overflow:hidden}
.sh-bar i{display:block;height:100%;width:0;background:var(--c)}
.sh-tap{position:absolute;inset:64px 0 120px;z-index:2;cursor:pointer;background:none;border:0;padding:0}
/* buffering: a ring in the brand colour, only after .3s so a quick start never flashes it */
.sh-wait{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:3;border-radius:50%;pointer-events:none;
  border:3px solid rgba(255,255,255,.22);border-top-color:var(--c);opacity:0;transition:opacity .2s ease;
  animation:shSpin .8s linear infinite;animation-play-state:paused}
.sh-short.is-wait .sh-wait{opacity:1;transition-delay:.3s;animation-play-state:running}
.sh-short.is-ended .sh-wait{display:none}
.sh-hint{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.5);z-index:3;transition:opacity .25s ease}

/* end of episode 2: the same language as the strip it replaces. A dark, flat sheet (docked to the
   bottom in full screen, like the strip), neutral type, and one solid button in the brand colour,
   the only colour on screen. The poster behind is darkened, not tinted. White on the button at 5:1. */
.sh-card{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;padding:18px 16px 12px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);background:rgba(12,11,13,.94);box-shadow:0 20px 50px -18px rgba(0,0,0,.9);
  transform:translateY(14px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.sh-card.on{opacity:1;transform:none;pointer-events:auto;background:rgba(12,11,13,.9);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.sh-card .sh-k{color:rgba(255,255,255,.55);margin-bottom:8px}
.sh-card h3{margin:0 0 6px;font-size:20px;line-height:1.2;font-weight:800}
.sh-card-p{margin:0 0 14px;font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.5}
/* the episodes as notches: watched in white, the next one in the brand colour, the rest waiting */
.sh-prog{margin:12px 0 16px}
.sh-prog-bar{display:flex;gap:3px}
.sh-prog-bar i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.sh-prog-bar i.f{background:#fff}
.sh-prog-bar i.n{background:var(--c)}
.sh-prog-t{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 0;font-size:12px;color:rgba(255,255,255,.6)}
.sh-prog-t b{color:#fff;font-weight:700}
.sh-cta{display:flex;align-items:center;gap:12px;min-height:54px;padding:9px 16px;border-radius:10px;text-decoration:none;
  color:#fff;background:color-mix(in srgb,var(--c) 72%,#000);transition:filter .2s ease}
.sh-cta:hover{filter:brightness(1.12)}
.sh-cta-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sh-cta-c b{font-size:15.5px;line-height:1.2;font-weight:800}
.sh-cta-c span{font-size:12px;color:rgba(255,255,255,.8);line-height:1.3}
.sh-cta-a{flex:none;font-size:18px;font-weight:700;line-height:1}
.sh-card-hint{margin:10px 0 0;text-align:center;font-size:11.5px;color:rgba(255,255,255,.45)}

/* episode 1 rolls into episode 2 on its own: a short label says so */
.sh-toast{position:absolute;top:66px;left:50%;z-index:4;transform:translate(-50%,-6px);opacity:0;pointer-events:none;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:999px;color:#fff;
  background:color-mix(in srgb,var(--c) 70%,rgba(0,0,0,.4));transition:opacity .3s ease,transform .3s ease}
.sh-toast.on{opacity:1;transform:translate(-50%,0)}

/* mobile only: the play pill on the card, and the back button in full screen */
.sh-full,.sh-close{display:none}

/* full screen feed (mobile). The feed is moved into this layer so nothing on the page can sit above it. */
#sh-imm{position:fixed;inset:0;z-index:2147483000;background:#000;display:none}
#sh-imm.on{display:block}
#sh-imm .sh-feed{height:100vh;height:100dvh;width:100%;border:0;border-radius:0;box-shadow:none;overscroll-behavior:contain}
#sh-imm .sh-feed.is-lit{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--lit) 70%,transparent)}
#sh-imm .sh-hud-top{top:calc(14px + env(safe-area-inset-top));left:96px}
#sh-imm .sh-close{display:flex;position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;z-index:10;align-items:center;gap:4px;
  height:40px;padding:0 14px 0 8px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.5);color:#fff;
  font:700 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}
#sh-imm .sh-close svg{width:20px;height:20px}
#sh-imm .sh-card{left:0;right:0;bottom:0;border-radius:18px 18px 0 0;border-width:1px 0 0;padding:20px 16px calc(12px + env(safe-area-inset-bottom))}
#sh-imm .sh-hud-bot{bottom:calc(82px + env(safe-area-inset-bottom))}
/* one line, not two: in full screen the progress runs edge to edge at the height of the strip's top
   and becomes its edge when the strip slides up */
#sh-imm .sh-bar{position:absolute;left:-16px;right:-16px;top:calc(100% + 16px);height:2px;margin:0;border-radius:0;background:rgba(255,255,255,.18)}
#sh-imm .sh-bar i{border-radius:0 2px 2px 0}
html.sh-lock,html.sh-lock body{overflow:hidden;overscroll-behavior:none}
/* the shortcut for the impatient: full screen only, after the hook, gone when the end card arrives */
.sh-skip{display:none}
/* a dark strip docked to the bottom edge, in the style of Reels: on the left where it leads (episodes
   3 to N, on Candy AI), on the right one small solid button in the brand colour, the only colour down
   here. The whole strip is the link. It slides up after the hook; the safe area sits inside it. */
#sh-imm .sh-skip{display:flex;align-items:center;gap:12px;position:absolute;left:0;right:0;bottom:0;z-index:4;box-sizing:border-box;
  height:calc(64px + env(safe-area-inset-bottom));padding:0 12px env(safe-area-inset-bottom) 16px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;text-decoration:none;white-space:nowrap;
  background:rgba(12,11,13,.92);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
#sh-imm .sh-skip-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#sh-imm .sh-skip-t b{font-size:14px;font-weight:700;line-height:1.15}
#sh-imm .sh-skip-t small{font-size:12px;line-height:1.2;color:rgba(255,255,255,.66)}
#sh-imm .sh-skip-t b,#sh-imm .sh-skip-t small{overflow:hidden;text-overflow:ellipsis} /* a 320px phone never pushes the button off */
#sh-imm .sh-skip-b{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:9px;
  font-size:14px;font-weight:700;color:#fff;background:color-mix(in srgb,var(--c) 72%,#000);transition:filter .2s ease}
#sh-imm .sh-skip.on{opacity:1;transform:none;pointer-events:auto}
#sh-imm .sh-skip:hover .sh-skip-b{filter:brightness(1.12)}
#sh-imm .sh-short.is-ended .sh-skip{opacity:0;pointer-events:none}
#sh-imm .sh-short.has-skip .sh-hint{opacity:0}
#sh-imm .sh-hint{bottom:calc(24px + env(safe-area-inset-bottom))}

/* the brand button, same recipe as .art-btn in the articles */
.sh-btn{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 20px;border-radius:18px;text-decoration:none;color:#fff;
  border:1px solid color-mix(in srgb,var(--c) 72%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--c) 15%,transparent) 0%,color-mix(in srgb,var(--c) 30%,transparent) 58%,color-mix(in srgb,var(--c) 52%,transparent) 100%),rgba(var(--glass-rgb),.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 32px -14px color-mix(in srgb,var(--c) 95%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.sh-btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 18px 38px -14px color-mix(in srgb,var(--c) 100%,transparent)}
.sh-btn-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sh-btn-c b{font-size:16px;line-height:1.2;font-weight:800}
.sh-btn-c span{font-size:12.5px;color:rgba(255,255,255,.75);line-height:1.3}
.sh-btn-a{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:17px;
  border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.2)}

/* the site's pill button (same metrics as .gf-cta) */
.sh-more,.sg-copy{display:inline-block;font:inherit;font-size:11px;font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  padding:10px 22px;border-radius:10px;border:1px solid var(--surfbrd);background:var(--surf);color:var(--ink)}
.sh-more:hover,.sg-copy:hover{border-color:rgba(var(--accrgb),.5);color:var(--acctx)}
.sg-copy{padding:8px 12px;flex:none}
.sh-shot-actions .sg-copy{padding:10px 22px}
.sg-copy.ok{border-color:rgba(52,211,153,.6);color:#6ee7b7}

/* chips, shared by the generator and the series filter */
.sg-chip{font:inherit;font-size:.82rem;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:1px;padding:.7rem 1.1rem;border-radius:12px;cursor:pointer;color:var(--ink);white-space:nowrap;
  border:1px solid var(--surfbrd);background:rgba(255,255,255,.03);transition:border-color .15s ease,background .15s ease}
.sg-chip:hover{border-color:rgba(var(--accrgb),.45)}
.sg-chip.on{border-color:rgba(var(--accrgb),.75);background:rgba(var(--accrgb),.16);color:var(--acctx)}

/* ---- generator ---- */
.sg-panel{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--gap);align-items:start}
.sg-controls,.sg-out{min-width:0}
.sg-controls{padding:var(--pad);border-radius:var(--rad);background:var(--surf);border:1px solid var(--surfbrd);position:sticky;top:90px}
.sg-row{margin-bottom:16px}
.sg-label{margin:0 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sg-chips{display:flex;flex-wrap:wrap;gap:7px}
.sg-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--hairline)}
.sg-seg .sg-chip{border-radius:9px;border-color:transparent;background:transparent;padding:.7rem .5rem;text-align:center}
.sg-seg .sg-chip.on{background:rgba(var(--accrgb),.18);border-color:rgba(var(--accrgb),.6)}
.sg-go{width:100%;margin-top:4px;font:inherit;font-size:14px;font-weight:800;line-height:1;letter-spacing:.05em;text-transform:uppercase;padding:15px 18px;border-radius:12px;border:0;cursor:pointer;
  color:var(--accink);background:linear-gradient(135deg,var(--acchi),var(--acc));box-shadow:0 10px 26px -10px rgba(var(--accrgb),.8)}
.sg-go:hover{filter:brightness(1.06)}
.sg-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}

.sg-out{min-width:0;display:grid;gap:10px}
.sg-head{padding:var(--pad) 20px;border-radius:var(--rad);background:rgba(var(--accrgb),.06);border:1px solid rgba(var(--accrgb),.24)}
.sg-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sg-k{margin:0 0 6px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--acctx)}
.sg-title{margin:0 0 8px;font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.sg-log{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--ink)}
.sg-her{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.sg-her b{color:var(--ink)}
.sg-her span{color:var(--acctx)}
.sg-ep{border-radius:var(--rad);background:var(--surf);border:1px solid var(--surfbrd)}
.sg-ep[open]{border-color:rgba(var(--accrgb),.3)}
.sg-ep summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px}
.sg-ep summary::-webkit-details-marker{display:none}
.sg-ep summary:after{content:"+";margin-left:auto;font-size:20px;line-height:1;color:var(--acctx);font-weight:600}
.sg-ep[open] summary:after{content:"\2212"}
.sg-ep-n{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.1em;padding:5px 8px;border-radius:7px;background:rgba(var(--accrgb),.14);color:var(--acctx)}
.sg-ep-t{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.sg-ep-body{padding:0 18px 16px}
.sg-beat{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--ink);display:grid;grid-template-columns:96px 1fr;gap:10px}
.sg-beat span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:3px}
.sg-box{margin-top:10px;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid var(--hairline)}
.sg-box-k{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sg-box-k span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sg-box p{margin:0;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e9e2dc;overflow-wrap:anywhere}
.sg-box-m p{color:var(--muted)}


/* keep going: each card wears the colour of the page it opens (girlfriend pink, generator neutral glass, articles orange) */
.sh-next{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.sh-next-card{--sc:255,255,255;--sctx:#e6e1dc;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:var(--rad);
  padding:24px 22px;text-decoration:none;color:var(--ink);background:var(--surf);border:1px solid var(--surfbrd);transition:transform .2s ease,border-color .2s ease}
.sh-next-card:hover{transform:translateY(-3px);border-color:rgba(var(--sc),.5)}
.sh-next-card .ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;margin-bottom:12px;
  background:rgba(var(--sc),.14);color:var(--sctx)}
.sh-next-card .ic svg{width:22px;height:22px;display:block}
.sh-next-card h3{margin:0 0 6px;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.sh-next-card p{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.55}
.sh-next-cta{margin-top:auto;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 22px;border-radius:10px;
  border:1px solid rgba(var(--sc),.45);background:rgba(var(--sc),.12);color:var(--sctx)}
.sh-next-card.is-gf{--sc:255,90,158;--sctx:#ff9cc4}
.sh-next-card.is-gen{--sc:255,255,255;--sctx:#e6e1dc}
.sh-next-card.is-i2p{--sc:18,160,107;--sctx:#4fdd9c}

/* related reads: same block as .gf-reads */
.sh-reads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.sh-read{border-radius:var(--rad);overflow:hidden;background:var(--surf);border:1px solid var(--surfbrd);transition:transform .2s ease,border-color .2s ease}
.sh-read:hover{border-color:rgba(var(--accrgb),.6);transform:translateY(-2px)}
.sh-read-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink)}
.sh-read-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sh-read-body{padding:var(--pad);display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;flex:1}
.sh-read-h{margin:0;font-size:14.5px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(14.5px * 1.35 * 2)}
.sh-read .sh-next-cta{margin-top:auto;--sc:255,255,255;--sctx:#e6e1dc}

/* "Best for this short": the same lead button as "Copy & try on <Brand>" on the prompt generator (brand-push.css) */
.sg-best{padding:var(--pad) 20px;border-radius:var(--rad);background:rgba(255,255,255,.04);border:1px solid var(--surfbrd);text-align:center}
.sg-best-head{margin:0 0 10px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sg-best-lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1px 9px;width:fit-content;min-width:200px;max-width:100%;margin:0 auto;
  padding:.7rem 1.5rem;border-radius:12px;text-decoration:none;color:#fff;
  border:1px solid color-mix(in srgb,var(--brand-ink,#fff) 64%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-ink,#fff) 42%,transparent) 0%,color-mix(in srgb,var(--brand-ink,#fff) 19%,transparent) 100%),rgba(var(--glass-rgb),.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 26px -10px color-mix(in srgb,var(--brand-ink,#fff) 90%,transparent);transition:transform .2s ease,background .2s ease}
.sg-best-lead:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand-ink,#fff) 88%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-ink,#fff) 56%,transparent) 0%,color-mix(in srgb,var(--brand-ink,#fff) 28%,transparent) 100%),rgba(var(--glass-rgb),.5)}
.sg-best-cta{flex:0 0 100%;text-align:center;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.sg-best-cta.ok{color:#6ee7b7}
.sg-best-name{font-size:1.06rem;font-weight:700}
.sg-best-arr{font-size:1.05rem}
.sg-best-alt{margin:12px 0 0;font-size:13px;color:var(--muted)}
.sg-best-alt a{font-weight:700;text-decoration:none;color:color-mix(in srgb,var(--brand-ink,#fff) 75%,#fff)}
.sg-best-alt a:hover{color:var(--brand-ink,#fff);text-decoration:underline;text-underline-offset:3px}

/* ---- the catalog ---- */
.sh-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 20px}
.sh-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.sh-tile{position:relative;border:1px solid var(--surfbrd);border-radius:var(--rad);overflow:hidden;background:#000;aspect-ratio:9/16;
  transition:transform .2s ease,border-color .2s ease}
.sh-tile[hidden]{display:none}
.sh-tile:hover{transform:translateY(-3px);border-color:rgba(247,109,132,.6)}
.sh-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-tile:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 42%,rgba(0,0,0,.9))}
.sh-tile-free{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 8px;border-radius:7px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sh-tile-body{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sh-tile-name{margin:0;font-size:14px;line-height:1.25;font-weight:800;pointer-events:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-tile-play{font:inherit;font-size:11px;font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#fff;cursor:pointer;
  padding:9px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12)}
.sh-tile-play:before{content:"";position:absolute;inset:-800px -12px -12px;z-index:-1}
.sh-tile:hover .sh-tile-play{background:rgba(247,109,132,.45);border-color:rgba(247,109,132,.8)}
.sh-more-wrap{text-align:center;margin:22px 0 0}

/* ---- steal the shot: prompt cards in the house format ---- */
.sh-steal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.sh-shot{display:flex;flex-direction:column;padding:var(--pad) 20px;border-radius:var(--rad);background:var(--surf);border:1px solid var(--surfbrd)}
.sh-shot h3{margin:0 0 6px;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.sh-shot-seen{margin:0 0 14px;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sh-shot-seen b{color:var(--ink);font-weight:600}
.sh-shot-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.sh-shot-watch{font:inherit;font-size:11px;font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase;padding:10px 22px;border-radius:10px;cursor:pointer;
  color:var(--acctx);background:rgba(var(--accrgb),.12);border:1px solid rgba(var(--accrgb),.45)}
.sh-shot-watch:hover{background:rgba(var(--accrgb),.2)}
.sh-shot h4{margin:0 0 6px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sh-shot-p{margin:0;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid var(--hairline);
  font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e9e2dc;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* the first lines are enough to judge a prompt; the rest opens on request, and Copy always takes all of it */
.sh-shot.open .sh-shot-p{display:block;-webkit-line-clamp:unset}
.sh-shot-more{align-self:flex-start;margin:6px 0 12px;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:12px;font-weight:700;
  color:var(--acctx);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--accrgb),.45)}
.sh-shot-why{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.sh-shot-why:before{content:"Why it works: ";font-weight:700;color:var(--ink)}


/* ---- platforms ---- */
.sh-plat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sh-pc{display:flex;flex-direction:column;border-radius:var(--rad);overflow:hidden;background:var(--surf);
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);box-shadow:0 24px 60px -34px color-mix(in srgb,var(--c) 70%,transparent)}
.sh-pc-img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
.sh-pc-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.sh-pc h3{margin:0;font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.sh-pc-tag{margin:4px 0 12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 75%,#fff)}
.sh-pc-p{margin:0 0 16px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.sh-facts{margin:0 0 20px;border-top:1px solid var(--hairline)}
.sh-facts div{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.sh-facts dt{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:2px}
.sh-facts dd{margin:0;font-size:13.5px;line-height:1.5}
.sh-pc .sh-btn{margin-top:auto}
.sh-pc-reads{margin:12px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
.sh-pc-read{font-size:13px;color:var(--muted);text-underline-offset:3px}
.sh-pc-read:hover{color:var(--ink)}

/* ---- prose: always inside a full-width box, same as .gf-desc and the closing box of every tool page ---- */
.sh-prose{border-radius:16px;padding:28px 30px;background:var(--surf);border:1px solid var(--surfbrd)}
.sh-prose .sh-h2{font-size:20px;margin:0 0 14px}
.sh-answer{margin:0 auto 18px;max-width:66ch;text-align:center;font-size:16px;line-height:1.7;color:var(--ink);
  padding-bottom:18px;border-bottom:1px solid var(--hairline)}
.sh-prose h3{margin:26px 0 8px;text-align:center;font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.sh-prose p:not(.sh-answer){margin:0 auto 13px;max-width:70ch;text-align:center;font-size:14.5px;line-height:1.75;color:var(--muted)}
.sh-prose p:last-child{margin-bottom:0}
.sh-prose strong{color:var(--ink)}
.sh-prose a,.sh-desc a{color:var(--acctx);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--accrgb),.45)}

/* the words: same box as .gf-desc */
.sh-desc{border-radius:16px;padding:28px 30px;background:var(--surf);border:1px solid var(--surfbrd)}
.sh-desc .sh-h2{font-size:20px;margin-bottom:14px}
.sh-desc p{font-size:14.5px;line-height:1.75;color:var(--muted);margin:0 auto 13px;text-align:center;max-width:70ch}
.sh-desc strong{color:var(--ink)}
.sh-desc .sh-note{font-size:12.5px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);max-width:62ch;margin-bottom:0}

/* ---- tablet: phone and rail side by side, the details under them ---- */
@media (max-width:1060px){
  .sh-stage{grid-template-columns:var(--phoneW) minmax(0,1fr);grid-template-areas:"phone rail" "now now";justify-content:center}
  .sh-now{height:auto;overflow:visible}
  .sh-now .sh-btn{margin-top:6px}
  .sg-panel{grid-template-columns:minmax(0,1fr)}
  .sg-controls{position:static}
  .sh-grid{grid-template-columns:repeat(4,1fr)}
  .sh-steal-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- mobile: one card for the player, a full screen feed on tap ---- */
@media (max-width:760px){
  .sh-root{--pad:15px;--gap:12px;padding:0 14px 54px}
  .sh-head{padding:1.25rem 1rem;margin-bottom:1rem}
  .sh-root h1{font-size:31px}
  .sh-lead{font-size:14px}
  .sh-pills{gap:6px;margin-top:14px}
  .sh-pills span{font-size:10px;letter-spacing:.06em;padding:6px 10px}
  .sh-sec{margin-top:44px}
  .sh-h2{font-size:21px}
  .sh-sub{font-size:13px;margin-bottom:20px}

  /* the player card: video on top, details underneath, one border around both */
  .sh-stage{display:block;border-radius:var(--rad);background:var(--surf);border:1px solid var(--surfbrd);overflow:hidden}
  .sh-rail{display:none}
  .sh-phone .sh-feed{height:min(66svh,calc((100vw - 30px) * 1.3));border:0;border-radius:0;box-shadow:none;overflow:hidden;scroll-snap-type:none}
  .sh-phone .sh-feed.is-lit{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--lit) 70%,transparent)}
  .sh-phone .sh-feed .sh-hud-bot b,.sh-phone .sh-feed .sh-hint,.sh-phone .sh-feed .sh-snd{display:none}
  .sh-phone .sh-feed .sh-hud-bot{bottom:16px}
  .sh-full{display:grid;place-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
    width:84px;height:84px;padding:0;border-radius:50%;cursor:pointer;border:1px solid rgba(var(--accrgb),.7);
    background:rgba(var(--accrgb),.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 36px -10px rgba(var(--accrgb),.8)}
  .sh-full:after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid rgba(var(--accrgb),.6);animation:shPulse 2.4s ease-out infinite;pointer-events:none}
  .sh-full-i{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--accink);
    background:linear-gradient(135deg,var(--acchi),var(--acc));box-shadow:0 6px 18px -6px rgba(var(--accrgb),.9)}
  .sh-full-i svg{display:block;width:24px;height:24px}
  .sh-phone .sh-feed.is-lit ~ .sh-full{display:none}
  .sh-phone .sh-feed .sh-wait{display:none}
  .sh-now{height:auto;overflow:visible;border:0;border-radius:0;background:none;padding:var(--pad)}
  .sh-now-title{font-size:21px}
  .sh-now-desc{font-size:14px}
  .sh-now-facts div{grid-template-columns:88px 1fr}
  .sh-now .sh-btn{margin-top:4px}
  .sh-btn,.sh-root .sh-btn:focus-visible{border-radius:16px} /* the focus rule sits at the end of the file */
  .sh-btn{padding:12px 12px 12px 16px}
  .sh-root .sh-phone .sh-feed:focus-visible{border-radius:0}
  .sh-btn-a{width:38px;height:38px}

  /* generator: setups in one swipeable row, the rest as segmented controls */
  .sg-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 2px}
  .sg-chips::-webkit-scrollbar{display:none}
  .sg-row{margin-bottom:14px}
  .sg-chip{font-size:.71rem;letter-spacing:.6px;padding:.6rem .9rem}
  .sg-seg .sg-chip{padding:.65rem .3rem}
  .sg-head{padding:var(--pad)}
  .sg-title{font-size:20px}
  .sg-log{font-size:14px}
  .sg-ep summary{padding:13px 15px}
  .sg-ep-t{font-size:13.5px}
  .sg-ep-body{padding:0 15px 15px}
  .sg-beat{grid-template-columns:1fr;gap:2px}
  .sh-next{grid-template-columns:1fr}
  .sh-reads-grid{grid-template-columns:1fr}
  .sh-next-card{padding:20px var(--pad)}

  .sh-filter{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -14px 16px;padding:0 14px 2px}
  .sh-filter::-webkit-scrollbar{display:none}
  .sh-grid{grid-template-columns:repeat(2,1fr)}
  .sh-tile-name{font-size:13px}
  /* one card at a time, swiped sideways: the section is one card tall instead of six */
  .sh-steal-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--gap);margin:0 -14px;padding:0 14px 6px;scrollbar-width:none}
  .sh-steal-grid::-webkit-scrollbar{display:none}
  .sh-shot{flex:0 0 86%;scroll-snap-align:start;padding:var(--pad)}
  .sh-shot-p{-webkit-line-clamp:3}

  .sh-plat-grid{grid-template-columns:1fr;gap:var(--gap)}
  .sh-pc-body{padding:var(--pad)}
  .sh-pc h3{font-size:19px}
  .sh-desc,.sh-prose{padding:22px 18px}
  .sh-prose .sh-h2{font-size:18px}
  .sh-answer{font-size:15px}
  .sh-prose p:not(.sh-answer){font-size:14px}
  .sh-desc .sh-h2{font-size:18px}
  .sh-desc p{font-size:14px}
}
@keyframes shPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
@keyframes shSpin{to{transform:rotate(360deg)}}
/* base.css squares every focused control (border-radius:4px on button/a:focus-visible, which beats a
   single class). Here each control keeps its own shape, and the focus ring follows it. */
.sh-full:focus-visible,.sh-snd:focus-visible{border-radius:50%}
.sh-more:focus-visible,.sg-copy:focus-visible,.sh-tile-play:focus-visible,.sh-shot-watch:focus-visible{border-radius:10px}
.sh-item:focus-visible,.sg-chip:focus-visible,.sg-go:focus-visible{border-radius:12px}
.sh-ep:focus-visible{border-radius:7px}
.sg-seg .sg-chip:focus-visible{border-radius:9px}
.sh-btn:focus-visible{border-radius:18px}
.sh-cta:focus-visible{border-radius:10px}
.sh-next-card:focus-visible{border-radius:var(--rad)}
.sh-root .sh-feed:focus-visible{border-radius:28px}
@media (prefers-reduced-motion:reduce){
  .sh-full:after,.sh-wait{animation:none}
  .sh-card,.sh-still,.sh-glow,.sh-feed,.sh-btn,.sh-cta,.sh-toast,.sh-tile,.sh-next-card,.sh-read,.sg-chip{transition:none}
}

/* KEEP GOING: every tool page shows the other three tools and the library (live 2026-10-07) */
.sh-next.has-lib { grid-template-columns: repeat(4, 1fr); }
.sh-next-card.is-lib { --sc: 139, 92, 246; --sctx: #a78bfa; }
@media (max-width: 1060px) { .sh-next.has-lib { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .sh-next.has-lib { grid-template-columns: 1fr; } }

/* Where to watch: long texts on desktop, short ones on mobile where the two cards sit side by side
   (owner's pick of two mockups, 2026-10-07). The long paragraph stays in the page, hidden on mobile. */
.sh-s{display:none}
.sh-btn-c b em{font-style:normal}
@media (max-width:760px){
  .sh-plat .sh-l{display:none}
  .sh-plat .sh-s{display:inline}
  .sh-plat .sh-plat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .sh-plat .sh-pc-body{padding:13px 11px 10px}
  .sh-plat .sh-pc h3{font-size:16px}
  .sh-plat .sh-pc h3:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:7px;vertical-align:2px}
  .sh-plat .sh-pc-tag{margin:3px 0 8px;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none}
  .sh-plat .sh-pc-p{display:none}
  .sh-plat .sh-facts{margin:0 0 12px}
  .sh-plat .sh-facts div{grid-template-columns:1fr;gap:3px;padding:8px 0}
  .sh-plat .sh-facts dt{font-size:10.5px}
  .sh-plat .sh-facts dd{font-size:12.5px;line-height:1.35}
  .sh-plat .sh-btn{justify-content:center;min-height:42px;padding:0 10px;border-radius:11px;border-color:transparent;
    background:color-mix(in srgb,var(--c) 72%,#000);box-shadow:none}
  .sh-plat .sh-btn-c{flex:none;align-items:center}
  .sh-plat .sh-btn-c b{font-size:14px}
  .sh-plat .sh-btn-c b:after{content:" \2192"}
  .sh-plat .sh-btn-c > span,.sh-plat .sh-btn-a{display:none}
  .sh-plat .sh-pc-reads{margin-top:8px;min-height:20px}
  /* Steal the shot: a swiped card stops with the page's 14px gutter instead of flush on the edge */
  .sh-steal-grid{scroll-padding-inline:14px}
  .sh-steal-grid::after{content:"";flex:0 0 1px}
}
.sh-pc-reads{min-height:20px}

/* Desktop: pick a series on the left, watch in the middle, unlock on the right (owner, 2026-10-07) */
@media (min-width:1061px){.sh-stage{grid-template-areas:"rail phone now"}}
/* The "are they free" answer, in its own box under the two platform cards */
.sh-free-note{margin-top:var(--gap)}
.sh-free-note h3{margin-top:0}