@import url('/theme.css?v=20261008-3');
/* Espero live captions guide, 8 October 2026.
   Colour = role: coral is the organiser (the speaker's own voice, as the app's own-message coral),
   blue is the listener (translation blue). Numbers in the text and pins on the screenshots share one component. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/guide/font-1.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/assets/guide/font-2.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --ink: #181A22;
  --ink-2: #5E6271;
  --line: #DDE0E8;
  --divider: #E9EBF0;
  --paper: #FFFFFF;
  --canvas: var(--site-canvas);
  --link: #315FC7;
  --coral-id: var(--site-coral);
  --blue-id: #94B5FD;
  --info-bg: #EEF3FF;
  --info-icon: #315FC7;
  --warn-bg: #FFF5D8;
  --warn-ink: #7A5600;
  --warn-icon: #966A00;
  --display: "Plus Jakarta Sans", Inter, "Noto Sans", system-ui, sans-serif;
  --text: Inter, "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pin-col: 60px;
  --maxh: 640px;
  --gap: 30px;
}
.role-org, .pin-org { --role: var(--site-coral); --ring: #D87672; --role-on: #181A22; --rail: #F4C3BE; --soft: #FFE2DF; }
.role-lis, .pin-lis { --role: #315FC7; --ring: #315FC7; --role-on: #FFFFFF; --rail: #C8D7F7; --soft: #EEF3FF; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
b.ui { font-weight: 600; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- masthead */
.brandbar { height: 6px; background: linear-gradient(90deg, var(--coral-id) 0 50%, var(--blue-id) 50% 100%); }
.masthead { background: var(--paper); border-bottom: 1px solid var(--divider); }
.masthead-inner { max-width: 1064px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 16px; }
.logo { display: block; line-height: 0; }
.logo img { height: 30px; width: auto; }
.masthead-what { color: var(--ink-2); font-size: 14.5px; padding-left: 16px; border-left: 1px solid var(--line); }
.language { margin-left: auto; font-weight: 600; font-size: 14px; text-decoration: none; }
.language:hover { text-decoration: underline; }

/* ---------- page + intro */
.page { max-width: 1064px; margin: 0 auto; padding: 0 32px; }
.intro { padding-top: 60px; }
h1 { margin: 0; font: 800 56px/1.04 var(--display); letter-spacing: -0.005em; }
.lede { margin: 18px 0 0; max-width: 31em; font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.updated { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- role chooser = table of contents */
.roles { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; margin-top: 40px; }
.role-card { border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 24px; background: var(--paper); }
.role-card-head { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.role-card-head strong { display: block; font: 800 22px/1.2 var(--display); letter-spacing: -0.005em; }
.role-card-head small { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.role-card-head:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.role-icon { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--role); color: var(--role-on); }
.role-icon svg { width: 24px; height: 24px; stroke-width: 2; }
.toc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--divider); }
.role-lis .toc { grid-template-columns: 1fr; }
.toc-phase { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.toc a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.3; }
.toc a:hover { color: var(--link); text-decoration: underline; }

.pin { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; background: var(--role); color: var(--role-on); font: 700 12px/1 var(--text); font-variant-numeric: tabular-nums; }

.legend { display: flex; align-items: flex-start; gap: 14px; margin: 22px 0 0; max-width: 56em; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.legend-pins { display: flex; gap: 6px; padding-top: 1px; }
.legend-pins .pin { box-shadow: 0 0 0 2px #fff, 0 1px 4px 1px rgba(24, 26, 34, .25); }

/* ---------- role sections */
.role { margin-top: 104px; }
.role-head { display: flex; gap: 18px; align-items: flex-start; padding-top: 28px; border-top: 4px solid var(--role); }
.role-head .role-icon { width: 56px; height: 56px; }
.role-head .role-icon svg { width: 28px; height: 28px; }
.role-head h2 { margin: 2px 0 0; font: 800 40px/1.1 var(--display); letter-spacing: -0.005em; }
.role-head p { margin: 10px 0 0; max-width: 36em; color: var(--ink-2); }
.device-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); color: var(--ink); font: 600 13px/1.5 var(--text); white-space: nowrap; vertical-align: 1px; }
.device-tag svg { width: 15px; height: 15px; }

.phase { margin-top: 64px; }
.phase-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 30px; }
.phase-head h3 { margin: 0; font: 800 28px/1.15 var(--display); letter-spacing: -0.005em; }
.phase-head p { margin: 0; font-size: 15px; color: var(--ink-2); }
.phase-solo { margin-top: 48px; }

/* ---------- units: steps + their pictures. The rail joins the step numbers. */
.unit { position: relative; padding-bottom: 64px; }
.phase-steps > .unit:last-child { padding-bottom: 0; }
.unit::before { content: ""; position: absolute; left: 19px; top: 24px; bottom: -24px; width: 2px; background: var(--rail); border-radius: 2px; }
.phase-steps > .unit:last-child::before { display: none; }
.unit-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; align-items: start; }
.unit-aside .unit-media { padding-top: 4px; }
.unit-row .unit-media { margin: 26px 0 0 var(--pin-col); }

.step + .step { margin-top: 44px; }
.step-title { position: relative; margin: 0; padding-left: var(--pin-col); min-height: 40px; display: flex; align-items: center; font: 700 23px/1.25 var(--display); letter-spacing: -0.005em; }
.spin { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--role); color: var(--role-on); font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px var(--paper); z-index: 1; }
.step-body { padding-left: var(--pin-col); }
.step-body p { margin: 10px 0 0; max-width: 66ch; }

/* marker reference inside running text */
.ref { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .38em; margin: 0 .08em; border-radius: 999px; background: var(--role); color: var(--role-on); font: 700 .72em/1 var(--text); vertical-align: .14em; cursor: default; }

/* notes */
.note { display: flex; gap: 12px; align-items: flex-start; max-width: 36.5em; margin-top: 16px; padding: 13px 16px; border-radius: 12px; font-size: 15.5px; line-height: 1.55; }
.note svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; }
.note p { margin: 0; max-width: none; }
.note b { font-weight: 650; }
.note-info { background: var(--info-bg); }
.note-info svg { color: var(--info-icon); }
.note-warn { background: var(--warn-bg); }
.note-warn svg { color: var(--warn-icon); }
.note-warn > p > b:first-child { color: var(--warn-ink); }
.devices { display: grid; gap: 8px; max-width: 36.5em; margin-top: 16px; }
.device { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: baseline; margin: 0; font-size: 15.5px; line-height: 1.5; }
.device .device-tag { justify-self: start; }

.trouble { margin: 60px 0 0 var(--pin-col); max-width: 38em; padding: 18px 22px 20px; border-radius: 14px; background: var(--warn-bg); }
.trouble-head { display: flex; align-items: center; gap: 10px; color: var(--warn-ink); }
.trouble-head svg { width: 22px; height: 22px; color: var(--warn-icon); }
.trouble-head h4 { margin: 0; font: 700 19px/1.3 var(--display); color: var(--ink); }
.trouble ul { margin: 10px 0 0; padding-left: 20px; font-size: 15.5px; line-height: 1.55; }
.trouble li + li { margin-top: 4px; }
.trouble li::marker { color: var(--warn-icon); }
.trouble .ref { --role: var(--site-coral); --role-on: #181A22; }

/* ---------- screenshots */
.shot { margin: 0; min-width: 0; }
.frame { position: relative; display: block; aspect-ratio: var(--r); color: inherit; text-decoration: none; }
.clip { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(24, 26, 34, .06), 0 12px 30px -16px rgba(24, 26, 34, .32); }
.clip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(24, 26, 34, .13); pointer-events: none; }
.clip img { position: absolute; left: 0; width: 100%; max-width: none; display: block; }
.shot figcaption { margin-top: 9px; font-size: 14px; line-height: 1.4; color: var(--ink-2); overflow-wrap: break-word; }
.frame:hover .clip::after { box-shadow: inset 0 0 0 1px rgba(49, 95, 199, .45); }

/* highlight ring = the exact UI element; pin = its step number, on the ring's top-left corner */
.hl { position: absolute; z-index: 1; border: 2.5px solid var(--ring); border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .95); pointer-events: none; transition: border-width .15s, background-color .15s; }
.mk { position: absolute; z-index: 2; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--role); color: var(--role-on); font: 700 13.5px/1 var(--text); letter-spacing: -.01em; box-shadow: 0 0 0 2.5px #fff, 0 2px 7px 1px rgba(24, 26, 34, .38); transition: scale .15s; }
/* the pin never covers the element it names: it sits just outside the ring */
.mk.a-l { transform: translate(calc(-100% - 5px), -50%); }
.mk.a-tl { transform: translate(-80%, -80%); }
.is-screen .clip { box-shadow: 0 0 0 2.5px var(--ring), 0 0 0 4.5px rgba(255, 255, 255, .95), 0 12px 30px -16px rgba(24, 26, 34, .32); }
.mk-screen { left: 0; top: 0; transform: translate(-40%, -40%); }
.hl.is-hot { border-width: 4px; background: color-mix(in srgb, var(--ring) 12%, transparent); }
.mk.is-hot { scale: 1.18; }
@media (prefers-reduced-motion: reduce) { .hl, .mk { transition: none; } }

/* rows: every picture in a row gets the same height, the row fills the width, capped at --maxh tall */
.shots-row { display: flex; gap: var(--gap); align-items: flex-start; max-width: calc(var(--sum) * var(--maxh) + (var(--n) - 1) * var(--gap)); }
.shots-row + .shots-row { margin-top: 22px; }
.shots-row .shot { flex: var(--r) 1 0; }
.shot-aside { width: 300px; }

/* ---------- footer */
.foot { margin-top: 96px; padding: 24px 0 64px; border-top: 1px solid var(--divider); color: var(--ink-2); font-size: 15px; }
.foot p { margin: 0; max-width: 46em; }

/* ---------- tablets */
@media screen and (max-width: 980px) {
  .unit-aside { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 32px; }
  .shot-aside { width: 260px; }
  .roles { grid-template-columns: 1fr; }
}

/* ---------- phones */
@media screen and (max-width: 720px) {
  body { font-size: 16.5px; }
  :root { --pin-col: 0px; }
  .masthead-inner { padding: 12px 16px; gap: 12px; }
  .logo img { height: 26px; }
  .masthead-what { font-size: 13px; padding-left: 12px; }
  .page { padding: 0 16px; }
  .intro { padding-top: 36px; }
  h1 { font-size: 36px; line-height: 1.08; }
  .lede { font-size: 18px; }
  .roles { margin-top: 28px; gap: 14px; }
  .role-card { padding: 18px 16px 18px; }
  .role-card-head strong { font-size: 20px; }
  .toc { grid-template-columns: 1fr; gap: 16px; }
  .legend { font-size: 14px; }
  .role { margin-top: 72px; }
  .role-head { gap: 14px; padding-top: 22px; }
  .role-head .role-icon { width: 44px; height: 44px; }
  .role-head .role-icon svg { width: 22px; height: 22px; }
  .role-head h2 { font-size: 30px; }
  .role-head p { font-size: 16px; }
  .phase { margin-top: 48px; }
  .phase-head { margin-bottom: 22px; }
  .phase-head h3 { font-size: 24px; }
  .unit { padding-bottom: 52px; }
  .unit::before { display: none; }
  .unit-aside { display: block; }
  .unit-aside .unit-media { padding-top: 20px; padding-left: 24px; }
  .shot-aside { width: 80%; max-width: 330px; }
  .shot-aside.is-land { width: 88%; }
  .step + .step { margin-top: 36px; }
  .step-title { padding-left: 46px; min-height: 34px; font-size: 21px; }
  .spin { width: 34px; height: 34px; font-size: 15px; box-shadow: none; }
  .step-body p { margin-top: 8px; }
  .note { font-size: 15px; padding: 12px 14px; }
  .device { grid-template-columns: 1fr; gap: 4px; font-size: 15px; }
  .trouble { margin-left: 0; padding: 16px 16px 18px; }
  .unit-row .unit-media { margin: 20px 0 0; }
  /* swipe strip: about 80 % of the column per picture, the next one peeks in */
  .shots-row { max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 36px; gap: 26px;
    margin: 0 -16px; padding: 14px 16px 10px 36px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .shots-row + .shots-row { margin-top: 8px; }
  .shots-row .shot { flex: 0 0 80%; scroll-snap-align: start; }
  .shots-row .shot.is-land { flex-basis: 88%; }
  .mk { min-width: 26px; height: 26px; font-size: 13px; }
  .foot { margin-top: 72px; }
}
.screen-only { }

/* Short start above the full, printable reference. */
.quick-start{margin:30px 0 42px;border:1px solid #e4dbd7;border-radius:24px;background:#fff9f5;padding:30px}.quick-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;color:#315fc7}.quick-start h2{font-size:clamp(24px,3vw,38px);line-height:1.15;letter-spacing:-.03em;margin:14px 0 24px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none;padding:0;margin:0;counter-reset:quick}.quick-grid li{counter-increment:quick}.quick-grid li:before{content:'0' counter(quick);display:block;color:#315fc7;font-weight:800;margin-bottom:14px}.quick-grid b{font-size:18px}.quick-grid p{font-size:14px;line-height:1.7;color:#626573;margin:10px 0}.quick-grid a{font-size:13px;font-weight:700;color:#315fc7}.quick-video{margin-top:28px;border-top:1px solid #e4dbd7;padding-top:22px}.quick-video summary{cursor:pointer;font-size:15px;font-weight:750;color:#181a22}.quick-video video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#181a22;margin-top:20px}.quick-video p{font-size:12px;color:#626573;margin-top:12px}.intro{max-width:850px}.intro h1{letter-spacing:-.045em}.role-card{border-radius:20px}.web .brandbar{background:linear-gradient(90deg,#ff8c87 0%,#ff8c87 50%,#94b5fd 50%,#94b5fd 100%)}
@media(max-width:700px){.quick-start{padding:22px}.quick-grid{grid-template-columns:1fr;gap:22px}.quick-grid li{border-bottom:1px solid #e4dbd7;padding-bottom:20px}.quick-grid li:last-child{border-bottom:0;padding-bottom:0}}@media print{.quick-video{display:none}.quick-start{break-inside:avoid}.quick-grid{grid-template-columns:repeat(3,1fr)}}

/* Choose a role, then follow one instruction at a time. Full references remain printable. */
.guide-walkthrough[hidden]{display:none}.guide-ready .roles{display:none}
.guide-walkthrough{margin:28px 0 24px;padding:26px;border:1px solid var(--line);border-radius:22px;background:#fbfcff;scroll-margin-top:18px}
.guide-role-picker{display:flex;gap:10px}.guide-role-picker button{flex:1;text-align:left;background:white;border:1px solid var(--line);border-radius:13px;padding:16px 20px;font:700 17px/1.5 var(--text);color:var(--ink);cursor:pointer}.guide-role-picker button span{display:block;font-size:10px;letter-spacing:.13em;margin-bottom:5px;color:var(--ink-2)}
.guide-role-picker [aria-pressed=true]{background:#ffe2df;border-color:#f29d97;box-shadow:inset 0 0 0 1px #f29d97}.guide-role-picker [data-guide-role=listener][aria-pressed=true]{background:#eaf0ff;border-color:#94b5fd;box-shadow:inset 0 0 0 1px #94b5fd}
.guide-role-intro{font-size:15px;color:var(--ink-2);margin:18px 0 26px}.guide-layout{display:grid;grid-template-columns:162px minmax(220px,1fr) 248px;gap:26px;align-items:start}
.guide-step-nav{display:grid;gap:6px}.guide-step-nav button{display:flex;align-items:center;gap:9px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);text-align:left;padding:11px 9px;font:600 12px/1.45 var(--text);cursor:pointer}.guide-step-nav button span{flex:none;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e9edf5;font-size:11px}.guide-step-nav [aria-current=step]{background:#ffe2df;color:var(--ink)}.guide-step-nav [aria-current=step] span{background:#ff8c87}.guide-walkthrough[data-role=listener] .guide-step-nav [aria-current=step]{background:#eaf0ff}.guide-walkthrough[data-role=listener] .guide-step-nav [aria-current=step] span{background:#315fc7;color:white}
.guide-progress{color:var(--link);font:700 12px/1.4 var(--text);margin:8px 0 13px}.guide-step-title{font:800 30px/1.15 var(--display);margin:0 0 20px;letter-spacing:-.025em}.guide-step-text{font-size:16px;line-height:1.75}.guide-step-note{border-left:3px solid #ff8c87;padding:10px 0 10px 15px;margin:22px 0;color:var(--ink-2);font-size:14px;line-height:1.65}.guide-walkthrough[data-role=listener] .guide-step-note{border-color:#315fc7}
.guide-step-actions{display:flex;gap:8px;flex-wrap:wrap}.guide-step-actions button{font:700 13px/1.5 var(--text);padding:12px 15px;border:1px solid var(--line);border-radius:11px;background:white;color:var(--ink);cursor:pointer;min-height:44px}.guide-step-actions .guide-next{background:#ff8c87;border-color:#ff8c87}.guide-walkthrough[data-role=listener] .guide-next{background:#315fc7;border-color:#315fc7;color:white}.guide-back:disabled{opacity:.45;cursor:default}
.guide-video-link{display:inline-block;margin-top:22px;font-size:13px;font-weight:700}.guide-step-image{margin:0;text-align:center}.guide-step-image>a:first-child{display:block;max-width:248px;margin:auto;border:5px solid #20242f;border-radius:24px;overflow:hidden;background:white;box-shadow:0 10px 26px #181a2212}.guide-step-image img{display:block;width:100%;height:auto}.guide-step-image figcaption{font-size:11px;color:var(--ink-2);margin:12px 0 5px;line-height:1.5}.guide-step-image>a:last-child{font-size:11px}
.guide-extra{border-top:1px solid var(--line);margin-top:25px;padding-top:18px;display:flex;gap:18px;flex-wrap:wrap;font-size:13px}.guide-extra span{color:var(--ink-2)}.guide-extra a{font-weight:600;text-decoration:none}.guide-video{margin:22px 0;padding:20px 24px;background:#fff9f5;border:1px solid #eddcda;border-radius:16px}.guide-video summary{font:700 16px/1.5 var(--text);cursor:pointer}.guide-video video{display:block;width:100%;height:auto;margin-top:20px;border-radius:12px}.guide-video p{font-size:13px;color:var(--ink-2)}.guide-reference{margin:18px 0;border:1px solid var(--line);border-radius:14px;padding:20px}.guide-reference[hidden]{display:none}.guide-reference>summary{cursor:pointer;font-weight:700}.guide-reference .role{margin-top:28px}.guide-walkthrough button:focus-visible{outline:3px solid #315fc7;outline-offset:3px}
@media(max-width:980px){.guide-layout{grid-template-columns:minmax(220px,1fr) 248px}.guide-step-nav{grid-column:1/-1;display:flex;flex-wrap:wrap}.guide-step-nav button{padding:9px}.guide-step-title{font-size:30px}}
@media(max-width:640px){.guide-walkthrough{padding:18px;margin-top:24px}.guide-role-picker{gap:8px}.guide-role-picker button{font-size:14px;padding:13px 12px}.guide-role-intro{font-size:14px}.guide-layout{grid-template-columns:1fr;gap:22px}.guide-step-nav{gap:4px}.guide-step-nav button{font-size:11px;padding:7px}.guide-step-nav button span{width:21px;height:21px}.guide-step-title{font-size:28px}.guide-step-text{font-size:15px}.guide-step-image{max-width:270px;justify-self:center}.guide-extra{gap:14px}.guide-video{padding:18px}.guide-reference{padding:16px}.guide-reference .unit{display:block}.guide-reference .unit-media{margin-top:20px}}
@media print{.guide-walkthrough,.guide-video,.guide-reference>summary{display:none!important}.guide-reference,.guide-reference[hidden],.guide-reference>*:not(summary),.legend[hidden]{display:block!important}.guide-reference{border:0;padding:0;margin:0}.guide-ready .roles{display:grid}.guide-reference .role{margin-top:20px}}
.guide-ready .legend[hidden]{display:none}
@media print{.guide-ready .legend[hidden]{display:flex!important}}
/* Role-specific actions and annotated authentic screens. */
.guide-before{border:1px solid #e4e7ef;background:#fff;border-radius:12px;padding:16px;margin:0 0 22px;font-size:13px;line-height:1.6}.guide-before p{margin:6px 0 8px;color:var(--ink-2)}.guide-before a{font-weight:700}.guide-before[hidden],.guide-finish[hidden],.guide-video[hidden]{display:none}
.guide-instructions{margin:0;padding-left:25px}.guide-instructions li{padding:0 0 12px 4px}.guide-instructions li::marker{font-size:13px;font-weight:800;color:var(--link)}.guide-instructions button{font:inherit;line-height:1.65;text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;padding:8px 10px;color:var(--ink);cursor:pointer}.guide-instructions button[aria-pressed=true]{background:#fff;border-color:#f4b6b1;box-shadow:inset 3px 0 #ff8c87}
.guide-step-image .shot{width:100%}.guide-step-image .clip img{height:auto}.guide-step-image .shot figcaption{font-size:12px;margin:14px 0 10px}.guide-step-image>a:last-child{display:inline-block;margin-top:6px}.guide-step-image .hl{border-color:var(--ring)}
.guide-finish{margin:24px 0;padding:20px;border-radius:14px;background:#fff;border:1px solid #e0e4ed}.guide-finish h3{font:750 18px/1.4 var(--text);margin:0 0 10px}.guide-finish p{font-size:14px;line-height:1.65;color:var(--ink-2);margin:8px 0}.guide-open-app{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:12px 16px;background:#ff8c87;color:#181a22;border-radius:11px;font-size:14px;font-weight:750;text-decoration:none;margin-top:8px}.guide-step-actions .guide-restart,.guide-walkthrough[data-role=listener] .guide-restart{background:transparent;border-color:var(--line);color:var(--ink-2)}
@media(max-width:640px){.guide-step-image{max-width:310px;width:100%}.guide-before{padding:14px}.guide-instructions button{padding:8px}.guide-finish{padding:16px}}
/* Enlarging reuses the editable source, so every language stays sharp. */
.guide-enlarge{border:0;background:transparent;color:var(--link);font:700 12px/1.5 var(--text);padding:10px;cursor:pointer;text-decoration:underline}.guide-zoom{width:min(90vw,680px);max-height:90vh;border:1px solid var(--line);border-radius:20px;padding:24px;overflow:auto;background:white;color:var(--ink)}.guide-zoom::backdrop{background:#181a2299}.guide-zoom-close{display:block;margin:0 0 20px auto;border:1px solid var(--line);border-radius:9px;padding:10px 16px;background:white;font:700 15px/1.5 var(--text);cursor:pointer}

/* Keep product paths near the guide without mixing them with its step controls. */
.guide-product-nav{max-width:1064px;margin:auto;padding:0 32px 16px;display:flex;flex-wrap:wrap;gap:12px 26px}.guide-product-nav a{font-size:13px;font-weight:600;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}.guide-product-nav a:hover{text-decoration:underline}
@media(max-width:620px){.guide-product-nav{padding-inline:20px;gap:6px 18px}.guide-product-nav a{font-size:12px}}
@media(max-width:380px){.masthead-what{display:none}.masthead-inner{padding-inline:20px}.logo{flex-shrink:0}h1{font-size:30px;overflow-wrap:anywhere}}