/* Speck's step help bubble (assets/speck/step-bubble.js) on the setup guide.
   Speck in the setup rail is a button with a small ? on his shoulder. The bubble
   floats out of him: to the left of the wide rail card, down from him in the
   masthead strip. It wears the rail card's anatomy (page tokens, mono kicker,
   hairline footer) and never widens the page. */

/* ---- Speck, the button ---- */
.spk-ask{position:relative;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;pointer-events:auto;border-radius:var(--r-2,3px);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* a wider touch target than his 32px strip slot */
.spk-ask::before{content:'';position:absolute;inset:-6px -4px}
.spk-ask:focus{outline:none}
.spk-ask:focus-visible{box-shadow:0 0 0 1px var(--lens),var(--glow-sm)}
.spk-ask .spk-hop{transition:transform .14s ease-out,filter .2s var(--ease,ease)}
.spk-ask:hover .spk-hop,.spk-rail.spk-b-on .spk-ask .spk-hop{filter:drop-shadow(0 0 6px var(--glow))}

/* the ? badge */
.spk-q{position:absolute;top:-1px;right:14%;z-index:1;display:grid;place-items:center;width:17px;height:17px;border:1px solid var(--lens);border-radius:50%;background:var(--bg);font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:1;color:var(--lens);box-shadow:var(--glow-sm);transition:transform .2s var(--ease,ease),background-color .2s var(--ease,ease),color .2s var(--ease,ease)}
.spk-strip .spk-q{top:-5px;right:-3px;width:15px;height:15px;font-size:9.5px}
.spk-ask:hover .spk-q,.spk-ask:focus-visible .spk-q,.spk-rail.spk-b-on .spk-q{background:var(--lens);color:var(--on-lens,#0b0d0a);transform:scale(1.1)}
.spk-q::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--lens);opacity:0;pointer-events:none}
/* Until he is first used, the ? pulses four times (about 10 s) on each visit,
   ending at rest; step-bubble.js then drops .spk-q-new and it stays a still badge. */
.spk-rail.spk-q-new .spk-q::after{animation:spk-q-ring 2.2s var(--ease,ease-out) .8s 4}
.spk-rail.spk-q-new .spk-q{animation:spk-q-bob 2.2s var(--ease,ease-out) .8s 4}
@keyframes spk-q-ring{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.2)}}
@keyframes spk-q-bob{0%,100%{transform:none}12%{transform:translateY(-2px) scale(1.08)}24%{transform:none}}

/* ---- the bubble ---- */
/* 420px beside the wide card, so its clip is about 386px wide; the strip sets its own width */
.spk-bubble{position:absolute;z-index:5;width:420px;max-width:calc(100vw - 32px);text-align:left;font-family:var(--sans);color:var(--ink)}
.spk-bubble[hidden]{display:none}
/* wide: out of his left side, level with him, the tail pointing back at him */
.spk-bubble{right:calc(100% + 16px);top:max(0px,calc(var(--spk-ty,46px) - 34px));transform-origin:calc(100% + 16px) 34px}
/* strip: down from him, clamped inside 16px gutters by step-bubble.js */
.spk-rail.spk-b-down .spk-bubble{right:auto;top:calc(100% + 12px);left:var(--spk-bx,16px);width:var(--spk-bw,340px);transform-origin:var(--spk-tx,40px) -12px}
.spk-strip .mast>.spk-rail{position:relative}

.spk-b-card{position:relative;display:flex;flex-direction:column;max-height:var(--spk-bmax,70vh);overflow:auto;overscroll-behavior:contain;border:1px solid rgba(77,213,138,.34);border-radius:var(--r-3,10px);background:var(--bg-2);box-shadow:var(--glow-md),0 22px 48px -12px rgba(0,0,0,.72)}
.spk-b-tail{position:absolute;z-index:1;width:12px;height:12px;background:var(--bg-2);border:1px solid rgba(77,213,138,.34);border-left:0;border-bottom:0;transform:rotate(45deg);right:-6px;top:28px}
.spk-rail.spk-b-down .spk-b-tail{right:auto;top:-6px;left:calc(var(--spk-tx,40px) - 6px);transform:rotate(-45deg)}

.spk-b-body{padding:14px 16px 12px}
.spk-b-kick{display:flex;align-items:center;gap:8px;margin:0 30px 6px 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lens-dim,var(--lens))}
.spk-b-tag{flex:none;padding:2px 6px 1px;border:1px solid var(--rule-2);border-radius:var(--r-pill,999px);font-size:8.5px;letter-spacing:.12em;color:var(--muted)}
.spk-b-tag:empty{display:none}
.spk-b-tag.is-now{border-color:var(--lens);color:var(--lens);box-shadow:var(--glow-sm)}
.spk-b-tag.is-done{border-color:transparent;background:var(--lens);color:var(--on-lens,#0b0d0a)}
.spk-b-title{margin:0 0 12px;font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.05;letter-spacing:-.005em;color:var(--ink)}
.spk-b-title:focus{outline:none}
.spk-b-title:focus-visible{outline:1px solid var(--lens);outline-offset:3px;border-radius:var(--r-2,3px)}

/* clip: poster first, looping and muted; the line drawing stands in without one */
.spk-b-media{position:relative;margin:0 0 12px;border:1px solid var(--rule);border-radius:var(--r-2,3px);background:var(--bg);overflow:hidden}
/* the clip's own frame (manifest `aspect`); tall clips (a QR, a first launch) are
   capped so the whole card stays on screen, letterboxed on the page background */
.spk-b-media.is-clip{aspect-ratio:16/9;max-height:min(40vh,300px);margin-inline:auto}
.spk-b-media video,.spk-b-media .spk-still{display:block;width:100%;height:100%;object-fit:contain;background:var(--bg)}
/* the clip is a button: click or tap it for full size; the corner chip says so */
.spk-b-zoom{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.spk-b-zoom:focus{outline:none}
.spk-b-zoom:focus-visible{box-shadow:inset 0 0 0 1px var(--lens)}
.spk-b-zoom-i{position:absolute;right:6px;bottom:6px;display:inline-flex;align-items:center;height:24px;padding:0 6px;border:1px solid rgba(77,213,138,.55);border-radius:var(--r-pill,999px);background:color-mix(in oklab,var(--bg) 84%,transparent);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lens);box-shadow:0 2px 8px rgba(0,0,0,.45);transition:background-color .16s var(--ease,ease),color .16s var(--ease,ease)}
.spk-b-zoom-i svg{flex:none;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.spk-b-zoom-i span{max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;transition:max-width .2s var(--ease,ease),margin-left .2s var(--ease,ease)}
.spk-b-zoom:hover .spk-b-zoom-i,.spk-b-zoom:focus-visible .spk-b-zoom-i{background:var(--lens);color:var(--on-lens,#0b0d0a)}
.spk-b-zoom:hover .spk-b-zoom-i span,.spk-b-zoom:focus-visible .spk-b-zoom-i span{max-width:80px;margin-left:6px}
/* touch has no hover: the label always shows */
@media (hover:none){.spk-b-zoom-i span{max-width:80px;margin-left:6px}}
.spk-b-media.is-art{display:grid;place-items:center;height:76px;background:repeating-linear-gradient(0deg,rgba(77,213,138,.035) 0 2px,transparent 2px 4px),var(--bg)}
.spk-b-media.is-art svg{width:96px;height:56px;fill:none;stroke:var(--lens);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.72;filter:drop-shadow(0 0 3px var(--glow))}
.spk-b-media.is-art circle{fill:var(--lens);stroke:none}
.spk-art-blink{animation:spk-blink 1.1s steps(1) infinite}
@keyframes spk-blink{50%{opacity:0}}
.spk-b-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:1px solid var(--lens);border-radius:var(--r-pill,999px);background:color-mix(in oklab,var(--bg) 82%,transparent);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lens);cursor:pointer}
.spk-b-play:hover,.spk-b-play:focus-visible{background:var(--lens);color:var(--on-lens,#0b0d0a);outline:none}
.spk-b-play[hidden]{display:none}

/* Do this / You should see */
.spk-b-lines{display:grid;gap:10px;margin:0}
.spk-b-lines>div{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:8px}
.spk-b-lines>div[hidden]{display:none}
.spk-b-lines>div::before{content:'';grid-row:1/3;width:14px;height:14px;margin-top:1px;border:1px solid var(--rule-2);border-radius:var(--r-2,3px);background:center/10px no-repeat}
.spk-b-lines .spk-b-do::before{border-color:var(--lens);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 2l4 3-4 3' fill='none' stroke='%234dd58a' stroke-width='1.4'/%3E%3C/svg%3E")}
.spk-b-lines .spk-b-see::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5q4-4.5 8 0q-4 4.5-8 0z' fill='none' stroke='%23cfe8d4' stroke-width='1'/%3E%3Ccircle cx='5' cy='5' r='1.3' fill='%23cfe8d4'/%3E%3C/svg%3E")}
.spk-b-lines dt{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:16px}
.spk-b-lines dd{margin:1px 0 0;font-size:14px;line-height:1.42;font-weight:400;color:var(--ink)}
.spk-b-see dd{color:var(--ink-2)}
.spk-b-lines code,.spk-lb-see code{font-family:var(--mono);font-size:12px;padding:0 3px;border-radius:var(--r-2,3px);background:rgba(77,213,138,.08);color:var(--ink-2);overflow-wrap:break-word;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* footer rail: peek at the neighbouring steps */
.spk-b-foot{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;border-top:1px solid var(--rule);background:var(--bg)}
.spk-b-foot[hidden]{display:none}
.spk-b-prev,.spk-b-next{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--rule-2);border-radius:var(--r-2,3px);font-family:var(--mono);font-size:15px;line-height:1;color:var(--lens);cursor:pointer;transition:border-color .16s var(--ease,ease),color .16s var(--ease,ease)}
.spk-b-prev:hover,.spk-b-next:hover,.spk-b-prev:focus-visible,.spk-b-next:focus-visible{border-color:var(--lens);outline:none;box-shadow:var(--glow-sm)}
.spk-b-prev:disabled,.spk-b-next:disabled{color:var(--muted);opacity:.4;cursor:default;box-shadow:none;border-color:var(--rule-2)}
.spk-b-dots{flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;margin:0;padding:0;list-style:none}
.spk-b-dots li{width:6px;height:6px;border:1px solid var(--rule-2);border-radius:var(--r-2,2px);transition:background-color .2s var(--ease,ease),border-color .2s var(--ease,ease),transform .2s var(--ease,ease)}
.spk-b-dots li.opt{border-style:dashed}
.spk-b-dots li.done{background:var(--lens);border-color:var(--lens)}
.spk-b-dots li.now{border-color:var(--lens);box-shadow:var(--glow-sm)}
.spk-b-dots li.at{transform:scale(1.5)}
.spk-b-now{flex:none;padding:0 4px;min-height:30px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.spk-b-now:hover,.spk-b-now:focus-visible{color:var(--lens);outline:none}
.spk-b-now[hidden]{display:none}
.spk-b-now:not([hidden])+.spk-b-next{margin-left:0}
.spk-b-foot:has(.spk-b-now:not([hidden])) .spk-b-dots{display:none}
.spk-b-foot:has(.spk-b-now:not([hidden])) .spk-b-now{flex:1}
.spk-b-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-2,3px);font-size:18px;line-height:1;color:var(--muted);cursor:pointer;transition:color .16s var(--ease,ease)}
.spk-b-x:hover,.spk-b-x:focus-visible{color:var(--lens);outline:none;box-shadow:inset 0 0 0 1px var(--lens)}

/* ---- motion: a springy pop out of him, a quick tuck back ---- */
.spk-bubble.is-open{animation:spk-pop .42s cubic-bezier(.2,.9,.3,1.25) both}
.spk-bubble.is-closing{animation:spk-tuck .17s ease-in both}
.spk-bubble.is-open .spk-b-tail{animation:spk-fade .2s ease-out both}
@keyframes spk-pop{0%{opacity:0;transform:scale(.3) translateX(10px)}45%{opacity:1}100%{opacity:1;transform:none}}
.spk-rail.spk-b-down .spk-bubble.is-open{animation-name:spk-pop-down}
@keyframes spk-pop-down{0%{opacity:0;transform:scale(.3) translateY(-10px)}45%{opacity:1}100%{opacity:1;transform:none}}
@keyframes spk-tuck{to{opacity:0;transform:scale(.86)}}
@keyframes spk-fade{from{opacity:0}}
/* the card's lines rise in one after another as it lands */
.spk-bubble.is-open .spk-b-media,.spk-bubble.is-open .spk-b-lines>div{animation:spk-rise .34s var(--ease,ease-out) both}
.spk-bubble.is-open .spk-b-media{animation-delay:.08s}
.spk-bubble.is-open .spk-b-do{animation-delay:.14s}
.spk-bubble.is-open .spk-b-see{animation-delay:.2s}
@keyframes spk-rise{from{opacity:0;transform:translateY(6px)}}
/* content slides in the direction you peeked */
.spk-b-body.swap-r{animation:spk-swap-r .26s var(--ease,ease-out)}
.spk-b-body.swap-l{animation:spk-swap-l .26s var(--ease,ease-out)}
@keyframes spk-swap-r{from{opacity:0;transform:translateX(14px)}}
@keyframes spk-swap-l{from{opacity:0;transform:translateX(-14px)}}

/* ---- first-visit tip: he says how, once ---- */
.spk-tip{position:absolute;z-index:4;display:flex;align-items:center;gap:4px;padding:5px 4px 5px 12px;max-width:calc(100vw - 32px);border:1px solid var(--lens);border-radius:var(--r-pill,999px);background:var(--bg-2);box-shadow:var(--glow-sm),0 10px 26px -10px rgba(0,0,0,.7);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s var(--ease,ease),transform .32s cubic-bezier(.2,.9,.3,1.3)}
.spk-tip::after{content:'';position:absolute;width:8px;height:8px;background:var(--bg-2);border:1px solid var(--lens);border-left:0;border-bottom:0}
.spk-tip-x{pointer-events:auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:14px;line-height:1;color:var(--muted);cursor:pointer}
.spk-tip-x:hover,.spk-tip-x:focus-visible{color:var(--lens);outline:none;box-shadow:inset 0 0 0 1px var(--lens)}
/* wide: to his left, pointing at him */
.spk-tip{right:calc(100% + 12px);top:calc(var(--spk-ty,46px) - 17px);transform:translateX(8px) scale(.9);transform-origin:right center}
.spk-tip::after{right:-5px;top:calc(50% - 4px);transform:rotate(45deg)}
/* strip: under him, pointing up */
.spk-rail.spk-b-down .spk-tip{right:auto;top:calc(100% + 10px);left:max(0px,calc(var(--spk-ax,60px) - 30px));transform:translateY(-6px) scale(.9);transform-origin:30px top}
.spk-rail.spk-b-down .spk-tip::after{right:auto;top:-5px;left:26px;transform:rotate(-45deg)}
.spk-rail .spk-tip.is-in{opacity:1;transform:none}

/* ---- full size: the clip at its own size (up to 1.5x) over a dark scrim ----
   step-bubble.js sets the figure's width: within 92vw x 82vh, above the caption. */
.spk-lb{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:64px 16px 24px;overflow:hidden;background:rgba(4,6,4,.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:zoom-out;font-family:var(--sans);color:var(--ink);text-align:left}
.spk-lb[hidden]{display:none}
.spk-lb-fig{margin:0;display:flex;flex-direction:column;gap:12px;max-width:92vw;cursor:default}
.spk-lb-media{position:relative;width:100%;aspect-ratio:16/9;border:1px solid rgba(77,213,138,.34);border-radius:var(--r-3,10px);background:var(--bg);overflow:hidden;box-shadow:var(--glow-md),0 30px 80px -20px rgba(0,0,0,.85)}
.spk-lb-media video,.spk-lb-media .spk-still{display:block;width:100%;height:100%;object-fit:contain;background:var(--bg)}
.spk-lb-cap{min-width:0}
.spk-lb-title{margin:0 0 4px;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.1;color:var(--ink)}
.spk-lb-see{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:var(--ink-2)}
.spk-lb-see[hidden]{display:none}
.spk-lb-k{margin-right:8px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.spk-lb-x{position:fixed;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule-2);border-radius:50%;background:var(--bg-2);font-size:22px;line-height:1;color:var(--ink);cursor:pointer;transition:border-color .16s var(--ease,ease),color .16s var(--ease,ease)}
.spk-lb-x:hover,.spk-lb-x:focus-visible{border-color:var(--lens);color:var(--lens);outline:none;box-shadow:var(--glow-sm)}
.spk-lb.is-in{animation:spk-lb-in .22s ease-out}
.spk-lb.is-in .spk-lb-cap,.spk-lb.is-in .spk-lb-x{animation:spk-rise .3s .14s var(--ease,ease-out) both}
@keyframes spk-lb-in{from{background-color:rgba(4,6,4,0)}}

@media (prefers-reduced-motion:reduce){
  .spk-lb.is-in,.spk-lb.is-in .spk-lb-cap,.spk-lb.is-in .spk-lb-x{animation:none}
  .spk-b-zoom-i,.spk-b-zoom-i span{transition:none}
  .spk-rail .spk-bubble.is-open,.spk-rail.spk-b-down .spk-bubble.is-open,.spk-bubble.is-closing,.spk-bubble.is-open .spk-b-tail,.spk-b-body.swap-r,.spk-b-body.swap-l{animation:none}
  .spk-bubble.is-open .spk-b-media,.spk-bubble.is-open .spk-b-lines>div{animation:none}
  .spk-rail.spk-q-new .spk-q,.spk-rail.spk-q-new .spk-q::after,.spk-art-blink{animation:none}
  .spk-tip,.spk-q,.spk-ask .spk-hop{transition:none}
}