/* Product frame and explanatory narrative move independently. No wheel
   interception, no playback controls: the page's own scroll is the clock.
   The chat frame reproduces Operator's Thinking Partner panel: same navy
   header, segmented mode track, message grammar, inline widgets and composer
   (context chip, mode badge, active model), in both of its themes. */
.os-walkthrough{position:relative;display:grid;align-items:start;gap:clamp(32px,4vw,72px);isolation:isolate}
.os-walkthrough--chat{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.os-walkthrough--phone{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.os-visual{position:sticky;top:28px;min-width:0;align-self:start}
.os-story{min-width:0;padding-bottom:28vh}
.os-story-stage{display:contents}
.os-step{min-height:64vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;padding:64px 0;opacity:.42;transition:opacity .25s;color:#a7bdcd}
.os-step.is-active{opacity:1}
.os-step:first-child{padding-top:32px}
.os-step-number{font:11px/1.4 'JetBrains Mono',monospace;letter-spacing:.14em;color:#a1bbc9;margin-bottom:18px}
.os-step h3{font:500 clamp(22px,2.2vw,33px)/1.22 'Space Grotesk','IBM Plex Sans Arabic',sans-serif;color:#edf3f7;margin:0 0 18px;letter-spacing:-.035em}
.os-step>p{font-size:15px;line-height:1.75;margin:0 0 20px;max-width:44ch}
.os-jump{color:#bdccda;border:1px solid #304352;background:transparent;font-size:12px;padding:9px 14px;border-radius:7px;transition:border-color .15s,color .15s}
.os-jump:hover{border-color:#cc9f65;color:#f0e3d2}
.os-scroll-hint{margin:12px 0 0;text-align:center;font:9px/1.4 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#6f8ea2}

/* ============================ panel ============================ */
/* Type is the films': Space Grotesk for names, Inter for prose, JetBrains
   Mono for meta, Instrument Serif for the figures. */
.os-chat{
  --os-sans:Inter,'IBM Plex Sans Arabic',system-ui,sans-serif;
  --os-display:'Space Grotesk','IBM Plex Sans Arabic',sans-serif;
  --os-mono:'JetBrains Mono',ui-monospace,monospace;
  --os-figure:'Instrument Serif',Georgia,serif;
  --os-ink:#ececf1;--os-ink-2:rgba(255,255,255,.62);--os-ink-3:rgba(255,255,255,.44);
  --os-line:rgba(255,255,255,.07);--os-line-2:rgba(255,255,255,.11);
  --os-surface:rgba(255,255,255,.04);--os-surface-2:rgba(255,255,255,.07);
  --os-user-bg:rgba(108,138,216,.08);--os-user-line:rgba(108,138,216,.18);
  --os-accent:#d98e3e;--os-accent-soft:#e6a868;--os-pos:#65b28a;--os-neg:#e07c66;
  --os-tag-bg:rgba(217,142,62,.16);--os-tag-ink:#e6a868;
  --os-asg-bg:rgba(95,182,201,.12);--os-asg-ink:#a7e3ee;--os-asg-line:rgba(95,182,201,.28);
  --os-head:#172245;--os-track:rgba(0,0,0,.32);--os-modes-bg:rgba(0,0,0,.16);
  --os-rail:rgba(255,255,255,.09);
  /* The branded evaluation card, exactly as the films and the panel carry it. */
  --os-card:radial-gradient(140% 90% at 100% 0%,rgba(217,142,62,.10),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%),#0f1124;
  --os-card-line:rgba(255,255,255,.08);
  --os-card-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -20px rgba(0,0,0,.75);
  --os-card-ink:#ececf1;--os-card-ink-2:rgba(255,255,255,.62);--os-card-ink-3:rgba(255,255,255,.45);
  --os-card-line-2:rgba(255,255,255,.08);--os-card-cell:rgba(15,17,36,.85);--os-card-title:#fff;
  position:relative;display:flex;flex-direction:column;width:100%;
  height:min(716px,calc(100svh - 90px));min-height:400px;overflow:hidden;
  background:radial-gradient(120% 60% at 0% 0%,rgba(217,142,62,.05),transparent 60%),radial-gradient(80% 50% at 100% 100%,rgba(255,255,255,.02),transparent 70%),linear-gradient(180deg,#1e1e22 0%,#141416 100%);
  color:var(--os-ink);border-radius:16px;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 70px rgba(0,0,0,.45);font:12.5px/1.5 var(--os-sans);
  container-type:inline-size;container-name:os-chat;
}
.os-chat[data-theme=day]{
  --os-ink:#1c1d24;--os-ink-2:rgba(28,29,36,.72);--os-ink-3:rgba(28,29,36,.55);
  --os-line:rgba(28,29,36,.09);--os-line-2:rgba(28,29,36,.14);
  --os-surface:#fff;--os-surface-2:rgba(28,29,36,.05);
  --os-user-bg:rgba(108,138,216,.10);--os-user-line:rgba(108,138,216,.28);
  --os-tag-bg:rgba(217,142,62,.16);--os-tag-ink:#8a4a1f;
  --os-asg-bg:rgba(45,122,128,.10);--os-asg-ink:#1f6b73;--os-asg-line:rgba(45,122,128,.28);
  --os-head:#191a2d;--os-track:rgba(28,29,36,.05);--os-modes-bg:#f6f5f1;
  --os-rail:rgba(28,29,36,.10);
  --os-card:radial-gradient(140% 90% at 100% 0%,rgba(217,142,62,.10),transparent 55%),linear-gradient(180deg,#fff 0%,#fbf7f0 100%);
  --os-card-line:rgba(28,29,36,.08);
  --os-card-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 24px -16px rgba(28,29,36,.18);
  --os-card-ink:#1c1d24;--os-card-ink-2:rgba(28,29,36,.72);--os-card-ink-3:rgba(28,29,36,.55);
  --os-card-line-2:rgba(28,29,36,.08);--os-card-cell:#fff;--os-card-title:#1c1d24;
  background:#f6f5f1;border-color:#e2e0d8;box-shadow:0 24px 60px rgba(20,26,40,.28)
}
.os-chat button{font-family:inherit;cursor:pointer}
.os-chat button:focus-visible,.os-jump:focus-visible{outline:2px solid var(--os-accent);outline-offset:2px}

/* ---- header ---- */
.os-header{flex:0 0 auto;display:flex;align-items:center;gap:3px;padding:10px 10px 9px;background:var(--os-head);position:relative;min-height:54px}
.os-header::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(52,143,162,.3),transparent)}
.os-brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.os-mark{position:relative;width:30px;height:30px;flex-shrink:0;display:grid;place-items:center}
.os-mark img{width:30px;height:30px;border-radius:50%;display:block;position:relative;z-index:2;animation:osGlyph 2.4s ease-in-out infinite}
.os-mark-pulse{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(52,143,162,.55);animation:osPulse 2.4s ease-out infinite}
.os-mark-pulse.delay{animation-delay:1.2s}
@keyframes osPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}
@keyframes osGlyph{0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px rgba(52,143,162,.4))}50%{transform:scale(1.06);filter:drop-shadow(0 0 10px rgba(52,143,162,.7))}}
.os-title{font:600 14.5px/1.15 var(--os-display);color:#fff;letter-spacing:-.015em;min-width:0;overflow-wrap:anywhere}
.os-iconbtn{width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:rgba(255,255,255,.55);display:grid;place-items:center;flex-shrink:0;padding:0}
.os-iconbtn svg{width:15px;height:15px}
.os-iconbtn.is-control{transition:background .15s,color .15s}
.os-iconbtn.is-control:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---- mode toggle ---- */
.os-modes{display:flex;padding:8px 10px;background:var(--os-modes-bg);border-bottom:1px solid var(--os-line);flex:0 0 auto}
.os-modes-track{display:flex;gap:2px;background:var(--os-track);padding:3px;border-radius:8px;border:1px solid var(--os-line-2);flex:1}
.os-mode{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border-radius:6px;font:500 11.5px/1.2 var(--os-sans);color:var(--os-ink-3);transition:background .18s,color .18s,box-shadow .18s}
.os-mode.is-active{color:#191a2d;background:linear-gradient(180deg,#e9a155 0%,#d98e3e 100%);font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 1px 6px rgba(217,142,62,.4)}
.os-chat[data-theme=day] .os-mode.is-active{background:rgba(217,142,62,.1);color:#d98e3e;box-shadow:inset 0 0 0 1px #d98e3e,0 1px 4px rgba(217,142,62,.18)}

/* ---- thread ---- */
.os-thread{position:relative;flex:1;min-height:0;overflow:hidden;padding:13px 12px 14px;overflow-anchor:none;scroll-behavior:auto}
.os-turn{display:block;margin-bottom:16px}
.os-turn:last-child{margin-bottom:0}
.os-msg{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
.os-msg:last-child{margin-bottom:0}
.os-role{font:600 9.5px/1.2 var(--os-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--os-ink-3);display:flex;align-items:center;gap:6px}
.os-role-mark{width:17px;height:17px;border-radius:5px;display:grid;place-items:center;flex-shrink:0;background:rgba(108,138,216,.18);color:#9bb1e0;border:1px solid rgba(108,138,216,.3)}
.os-role-mark.is-assistant{background:linear-gradient(135deg,#e9a155,#d98e3e);color:#191a2d;border:0;box-shadow:0 1px 4px rgba(217,142,62,.35)}
.os-chat[data-theme=day] .os-role-mark{background:rgba(108,138,216,.16);color:#2457a8}
.os-chat[data-theme=day] .os-role-mark.is-assistant{background:linear-gradient(135deg,#e9a155,#d98e3e);color:#191a2d}
.os-user{color:var(--os-ink);background:var(--os-user-bg);border:1px solid var(--os-user-line);border-radius:9px;padding:8px 10px;font-weight:500;line-height:1.5}
.os-answer{display:flex;flex-direction:column;gap:8px;min-width:0}
.os-unit{margin:0;transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.os-unit[data-in=false]{opacity:0;transform:translateY(6px);pointer-events:none}
.os-unit[data-in=false]:empty,.os-unit--text:empty,.os-unit--item[data-in=false]{margin:0}
.os-unit--text,.os-unit--item{line-height:1.55;color:var(--os-ink-2);overflow-wrap:anywhere}
.os-unit--item{display:block;padding-left:12px;position:relative}
.os-unit--item::before{content:'';position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:var(--os-accent);opacity:.75}
.os-unit--item b{color:var(--os-ink);font-weight:600}
.os-unit--item span{color:var(--os-ink-2)}
.os-unit--item b:not(:empty)+span:not(:empty)::before{content:' '}
.os-unit.is-typing::after{content:'';display:inline-block;width:2px;height:.9em;margin-left:3px;background:var(--os-accent);vertical-align:-2px;animation:osCaret 1s steps(2,start) infinite}
@keyframes osCaret{50%{opacity:0}}
.os-tail{transition:opacity .3s}
.os-tail[data-in=false]{opacity:0}
.os-cites{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.os-cite{display:inline-flex;align-items:center;gap:5px;font:10px/1.4 var(--os-sans);padding:2px 7px 2px 3px;border-radius:11px;background:var(--os-surface-2);border:1px solid var(--os-line-2);color:var(--os-ink-3)}
.os-cite b{font:600 8.5px/1.5 var(--os-mono);padding:1px 4px;border-radius:3px;letter-spacing:.04em;background:var(--os-tag-bg);color:var(--os-tag-ink)}
.os-cite[data-src=asgnet] b{background:rgba(108,138,216,.18);color:#9bb1e0}
.os-chat[data-theme=day] .os-cite[data-src=asgnet] b{background:rgba(36,87,168,.14);color:#2457a8}

/* ---- streaming indicator ---- */
.os-streaming{display:flex;align-items:center;gap:9px;padding:2px 0}
.os-streaming[hidden]{display:none}
.os-streaming-dots{display:inline-flex;gap:4px;width:22px;flex-shrink:0}
.os-streaming-dots i{width:5px;height:5px;border-radius:50%;background:var(--os-ink-3);animation:osThink 1.2s ease-in-out infinite}
.os-streaming-dots i:nth-child(2){animation-delay:.15s}
.os-streaming-dots i:nth-child(3){animation-delay:.3s}
@keyframes osThink{0%,60%,100%{opacity:.25;transform:scale(.8)}30%{opacity:1;transform:scale(1.1)}}
.os-streaming-bar{flex:0 1 110px;height:2px;border-radius:1px;background:var(--os-rail);overflow:hidden;position:relative}
.os-streaming-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(217,142,62,0) 20%,rgba(217,142,62,.6) 50%,rgba(217,142,62,0) 80%,transparent);background-size:220% 100%;background-repeat:no-repeat;animation:osScan 1.8s ease-in-out infinite}
/* Panned by background-position, not by a transform: a transformed child of an
   overflow:hidden box counts as horizontal scrollable overflow. */
@keyframes osScan{0%{background-position:-110% 0}100%{background-position:210% 0}}
.os-streaming-label{font-size:11px;color:var(--os-ink-3);line-height:1.35}
.os-pulse{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;animation:osBlink 1.4s ease-in-out infinite}
@keyframes osBlink{0%,100%{opacity:1}50%{opacity:.28}}

/* ---- welcome ---- */
.os-welcome{max-width:430px;margin:auto 0;padding:4px 2px;display:flex;flex-direction:column;gap:10px}
.os-welcome-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#e9a155,#d98e3e);color:#191a2d}
.os-welcome p{margin:0;color:var(--os-ink-2);line-height:1.6}
.os-welcome-scope{font:9px/1.5 var(--os-mono);color:var(--os-ink-3);letter-spacing:.05em}

/* ============================ inline widgets ============================ */
.os-widget{background:var(--os-surface);border:1px solid var(--os-line-2);border-radius:11px;padding:11px 12px 12px;min-width:0}
.os-chat[data-theme=day] .os-widget{box-shadow:0 1px 2px rgba(28,29,36,.05)}
.os-widget-head{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:8px}
.os-widget-title{font:600 10.5px/1.35 var(--os-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--os-ink-3)}
.os-widget-tag{font:600 8.5px/1.5 var(--os-mono);padding:2px 5px;border-radius:3px;letter-spacing:.04em;text-transform:uppercase;background:var(--os-tag-bg);color:var(--os-tag-ink);white-space:nowrap}
.os-widget-tag.is-asg{background:var(--os-asg-bg);color:var(--os-asg-ink);border:1px solid var(--os-asg-line);text-transform:none;letter-spacing:.02em}
.os-widget-scope,.os-widget-note{font:9px/1.5 var(--os-mono);color:var(--os-ink-3);margin:0}
.os-widget-note{margin-top:8px}
.os-kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--os-line-2);border:1px solid var(--os-line-2);border-radius:9px;overflow:hidden;margin:10px 0 0}
.os-kpi{background:var(--os-surface);padding:8px 10px 9px;min-width:0}
.os-chat[data-theme=day] .os-kpi{background:#fff}
.os-kpi-label{display:block;font:500 8.5px/1.25 var(--os-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--os-ink-3);margin-bottom:4px}
.os-kpi-value{display:block;font:400 18px/1.05 var(--os-figure);color:var(--os-ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.os-kpi-value.is-positive{color:var(--os-pos)}
.os-kpi-value.is-negative{color:var(--os-neg)}
.os-kpi small{display:block;margin-top:4px;font:8.5px/1.35 var(--os-mono);color:var(--os-ink-3)}
.os-bars{margin-top:10px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.os-bar{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:8px;font-size:10.5px;color:var(--os-ink-2)}
.os-bar strong{font:400 14px/1.15 var(--os-figure);color:var(--os-ink);white-space:nowrap}
.os-bar i{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:var(--os-rail)}
.os-bar i::before{content:'';display:block;width:var(--value);height:100%;border-radius:3px;background:#5f8fa1;transition:width .5s cubic-bezier(.16,1,.3,1)}
.os-bar.is-accent i::before{background:var(--os-accent)}
.os-mix{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.os-mix li{position:relative;display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding-bottom:7px;font-size:11px;color:var(--os-ink-2)}
.os-mix b{font:500 10px/1.35 var(--os-mono);color:var(--os-ink)}
.os-mix i{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--os-rail)}
.os-mix i::before{content:'';display:block;width:var(--value);height:100%;border-radius:2px;background:var(--os-accent);opacity:.8;transition:width .5s cubic-bezier(.16,1,.3,1)}
.os-moves{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.os-move{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--os-line);min-width:0}
.os-move:first-child{border-top:0;padding-top:2px}
.os-move-number{flex-shrink:0;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font:600 9.5px/1 var(--os-mono);color:var(--os-accent);background:var(--os-tag-bg);margin-top:1px}
.os-move h5{margin:0 0 4px;font:600 12px/1.35 var(--os-display);letter-spacing:-.01em;color:var(--os-ink);display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.os-move h5 em{font:600 8px/1.5 var(--os-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--os-ink-3);border:1px solid var(--os-line-2);border-radius:4px;padding:1px 5px}
.os-move p{margin:0;font-size:11px;line-height:1.55;color:var(--os-ink-2)}
.os-move-counter{margin-top:6px!important;padding-left:9px;border-left:2px solid var(--os-line-2);color:var(--os-ink-3)!important}
.os-move-counter b{color:var(--os-ink-2);font-weight:600}

/* ================= ASGnet evaluation card (the product's) ================= */
.os-asg-card{position:relative;overflow:hidden;min-width:0;background:var(--os-card);border:1px solid var(--os-card-line);border-radius:14px;padding:13px 13px 11px;box-shadow:var(--os-card-shadow);color:var(--os-card-ink)}
.os-asg-card::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,142,62,.55),transparent)}
.os-asg-head{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
.os-asg-pill{display:inline-flex;align-items:center;gap:6px;font:600 9.5px/1 var(--os-mono);letter-spacing:.04em;text-transform:uppercase;padding:5px 9px 5px 8px;border-radius:999px;background:var(--os-asg-bg);color:var(--os-asg-ink);border:1px solid var(--os-asg-line)}
.os-asg-pill i{width:6px;height:6px;border-radius:50%;background:#e6a868;box-shadow:0 0 0 3px rgba(230,168,104,.18)}
.os-asg-pill[data-state=running] i{animation:osBlink 1.4s ease-in-out infinite}
.os-asg-pill[data-state=ready] i{background:#5fd0a7;box-shadow:0 0 0 3px rgba(95,208,167,.18)}
.os-asg-lockup{display:flex;align-items:center;gap:7px;flex:none}
.os-asg-lockup img{height:15px;width:auto;display:block}
.os-widget-head .os-asg-lockup img{height:14px;opacity:.9}
.os-asg-lockup span{font:500 8.5px/1 var(--os-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--os-card-ink-3);white-space:nowrap}
.os-asg-title{font:400 16px/1.25 var(--os-figure);color:var(--os-card-title);margin:10px 0 0;letter-spacing:-.005em}
.os-asg-ctx{font:400 9.5px/1.4 var(--os-mono);color:var(--os-card-ink-3);margin:4px 0 0}
.os-asg-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;font:400 9.5px/1.35 var(--os-mono);color:var(--os-card-ink-3)}
.os-asg-clock{flex:none;font-variant-numeric:tabular-nums}
.os-asg-actions{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid var(--os-card-line-2)}
.os-asg-actions .os-cites{margin:0}
.os-asg-card .os-cite{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:var(--os-card-ink-2)}
.os-chat[data-theme=day] .os-asg-card .os-cite{background:#fff;border-color:rgba(28,29,36,.10);color:rgba(28,29,36,.70)}
.os-next-hint{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--os-sans);color:var(--os-accent-soft);background:rgba(255,255,255,.04);border:1px solid rgba(217,142,62,.32);border-radius:8px;padding:7px 11px}
.os-chat[data-theme=day] .os-next-hint{color:#b8722e;background:rgba(217,142,62,.06)}
.os-lanes{list-style:none;margin:11px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.os-lane{min-width:0;border:1px solid var(--os-card-line-2);border-radius:9px;padding:7px 9px 8px;background:rgba(255,255,255,.03);transition:border-color .3s}
.os-chat[data-theme=day] .os-lane{background:rgba(28,29,36,.02)}
.os-lane[data-state=complete]{border-color:rgba(95,208,167,.28)}
.os-lane-head{display:flex;align-items:center;gap:7px;min-width:0}
.os-lane-id{flex-shrink:0;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font:600 9.5px/1 var(--os-mono);background:var(--os-asg-bg);color:var(--os-asg-ink);border:1px solid var(--os-asg-line)}
.os-lane-name{flex:1;min-width:0;font:500 11px/1.3 var(--os-sans);color:var(--os-card-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-lane-stage{display:flex;align-items:center;gap:7px;margin-top:5px;font:500 10px/1.3 var(--os-sans);color:var(--os-card-ink-2);padding-left:25px}
.os-lane-stage .os-stage-mark{width:12px;height:12px;flex:none;display:grid;place-items:center;color:#5fd0a7}
.os-lane-stage .os-stage-mark i{width:6px;height:6px;border-radius:50%;background:#e6a868;box-shadow:0 0 0 3px rgba(230,168,104,.16);animation:osBlink 1.4s ease-in-out infinite}
.os-lane[data-state=complete] .os-lane-stage{color:var(--os-card-ink-3)}
.os-lane-rail{list-style:none;display:flex;gap:4px;margin:6px 0 0 25px;padding:0;min-width:0}
.os-lane-rail li{flex:1;min-width:0}
.os-lane-rail i{display:block;height:3px;border-radius:3px;background:var(--os-rail);transition:background .3s}
.os-lane-rail li[data-state=active] i{background:#e6a868}
.os-lane-rail li[data-state=complete] i{background:#5fd0a7}
.os-asg-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--os-card-line-2);border:1px solid var(--os-card-line-2);border-radius:11px;overflow:hidden;margin:11px 0 0}
.os-asg-metric{background:var(--os-card-cell);padding:9px 11px 10px;min-width:0}
.os-asg-metric>span{display:block;font:500 8.5px/1.2 var(--os-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--os-card-ink-3);margin-bottom:5px}
.os-asg-metric>strong{display:block;font:400 18px/1.05 var(--os-figure);color:var(--os-card-title);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.os-asg-metric>strong.is-positive{color:#65b28a}
.os-rank-head,.os-rank-row{display:grid;grid-template-columns:minmax(70px,1.5fr) minmax(50px,1fr) minmax(44px,.9fr) minmax(54px,1fr) minmax(48px,.9fr);gap:8px;align-items:baseline}
.os-rank-head{margin:11px 0 2px;font:8px/1.35 var(--os-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--os-card-ink-3)}
.os-rank-head span:not(:first-child),.os-rank-row span:not(:first-child){text-align:end}
.os-rank{list-style:none;margin:0;padding:0}
.os-rank-row{position:relative;padding:8px 0 9px;border-top:1px solid var(--os-card-line-2);font:10.5px/1.35 var(--os-mono);color:var(--os-card-ink-2);transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.os-rank-row[data-in=false]{opacity:0;transform:translateY(5px)}
.os-rank-id{display:flex;align-items:baseline;gap:6px;font:600 11.5px/1.3 var(--os-mono);color:var(--os-card-title);flex-wrap:wrap}
.os-rank-id b{font:600 7.5px/1.5 var(--os-sans);letter-spacing:.06em;text-transform:uppercase;color:#5fd0a7;background:rgba(95,208,167,.12);border:1px solid rgba(95,208,167,.3);border-radius:100px;padding:1px 6px}
.os-chat[data-theme=day] .os-rank-id b{color:#1f7a5c;background:rgba(45,122,92,.1);border-color:rgba(45,122,92,.28)}
.os-rank-value{font:400 14px/1.15 var(--os-figure);color:var(--os-card-title);white-space:nowrap}
.os-rank-delta{font:500 10.5px/1.35 var(--os-mono);color:#65b28a;white-space:nowrap}
.os-rank-row i{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
.os-rank-row i::before{content:'';display:block;width:var(--value);height:100%;border-radius:2px;background:var(--os-accent);opacity:.45}
.os-rank-row.is-best{background:linear-gradient(90deg,rgba(95,208,167,.1),transparent 72%);border-radius:8px;padding-inline:7px;margin-inline:-7px}
.os-rank-row.is-best i::before{background:#5fd0a7;opacity:.8}

/* ============================ plan & build ============================ */
.os-plan-drafting,.os-build-progress,.os-plan-review{padding:2px 2px 6px}
.os-plan-drafting h4,.os-build-progress h4,.os-plan-title h4{font:600 17px/1.2 var(--os-display);margin:10px 0 3px;letter-spacing:-.02em;color:var(--os-ink)}
.os-asg-badge{display:inline-flex;align-items:center;gap:6px;color:var(--os-asg-ink);background:var(--os-asg-bg);border:1px solid var(--os-asg-line);border-radius:100px;padding:4px 9px;font:600 9px/1.3 var(--os-mono);letter-spacing:.05em;text-transform:uppercase}
.os-draft{list-style:none;margin:13px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.os-draft li{display:flex;gap:9px;align-items:flex-start;font:11px/1.5 var(--os-sans);color:var(--os-ink-3);transition:color .3s}
.os-draft li i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--os-line-2);display:grid;place-items:center;flex-shrink:0;color:transparent;transition:background .3s,border-color .3s,color .3s}
.os-draft li[data-state=active]{color:var(--os-ink)}
.os-draft li[data-state=active] i{border-color:var(--os-accent);background:rgba(217,142,62,.18);color:var(--os-accent);animation:osBlink 1.4s ease-in-out infinite}
.os-draft li[data-state=complete]{color:var(--os-ink-2)}
.os-draft li[data-state=complete] i{background:#5fd0a7;border-color:#5fd0a7;color:#0f1a14}
.os-apply-track{height:5px;background:var(--os-rail);border-radius:10px;overflow:hidden;margin:16px 0 4px}
.os-apply-track>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e9a155,#d98e3e)}
.os-created{display:flex;flex-direction:column;align-items:stretch}
.os-created-note{margin:11px 0 0;font:11px/1.55 var(--os-sans);color:var(--os-card-ink-2)}
.os-plan-title{margin-bottom:3px}
.os-plan-actions{margin-top:6px}
.os-plan-action{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--os-line);min-width:0}
.os-action-number{font:500 9.5px/18px var(--os-mono);width:19px;height:19px;border:1px solid var(--os-line-2);border-radius:50%;text-align:center;flex-shrink:0;color:var(--os-ink-3)}
.os-plan-action h5{font:600 12px/1.35 var(--os-display);letter-spacing:-.01em;margin:0 0 4px;color:var(--os-ink)}
.os-plan-action p{font-size:10.5px;color:var(--os-ink-2);line-height:1.55;margin:0 0 7px}
.os-action-state{display:inline-flex;align-items:center;gap:5px;font:600 8.5px/1.3 var(--os-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--os-pos);background:rgba(101,178,138,.11);border:1px solid rgba(101,178,138,.28);border-radius:100px;padding:3px 8px}
.os-assumptions{font:10px/1.6 var(--os-sans);margin:12px 0;color:var(--os-ink-3)}
.os-assumptions summary{cursor:pointer;color:var(--os-ink-2)}
.os-assumptions p{margin:7px 0 0}
.os-plan-result{border-top:1px solid var(--os-line);padding:11px 0 4px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10.5px;color:var(--os-ink-2)}
.os-plan-result strong{color:var(--os-pos);font:400 20px/1.1 var(--os-figure);white-space:nowrap}

/* ============================ composer ============================ */
.os-composer{flex:0 0 auto;padding:9px 10px 11px;border-top:1px solid var(--os-line);background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.26) 100%);position:relative}
.os-chat[data-theme=day] .os-composer{background:linear-gradient(180deg,rgba(28,29,36,.02),rgba(28,29,36,.05))}
.os-composer::before{content:'';position:absolute;left:12px;right:12px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,142,62,.2),transparent)}
.os-input-wrap{background:var(--os-surface-2);border:1px solid var(--os-line-2);border-radius:11px;padding:9px 11px 8px;transition:border-color .18s,box-shadow .18s,background .18s}
.os-chat[data-theme=day] .os-input-wrap{background:#fff;border-color:rgba(28,29,36,.14);box-shadow:0 1px 2px rgba(28,29,36,.03)}
.os-input-wrap.is-typing{border-color:rgba(217,142,62,.55);box-shadow:0 0 0 3px rgba(217,142,62,.1)}
.os-input{margin:0;min-height:19px;font-size:12.5px;line-height:1.45;color:var(--os-ink);overflow-wrap:anywhere}
.os-input[data-placeholder=true]{color:var(--os-ink-3)}
.os-caret{display:inline-block;width:2px;height:.9em;margin-left:2px;background:var(--os-accent);vertical-align:-2px;animation:osCaret 1s steps(2,start) infinite}
.os-input-foot{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:nowrap}
.os-input-foot>*{min-width:0;max-width:100%}
.os-menu-btn,.os-mic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--os-ink-3);background:var(--os-surface-2);border:1px solid var(--os-line);flex-shrink:0}
.os-chat[data-theme=day] .os-menu-btn,.os-chat[data-theme=day] .os-mic{background:rgba(28,29,36,.04)}
.os-pill{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:0 9px;border-radius:999px;font:600 10px/1 var(--os-sans);letter-spacing:.01em;white-space:nowrap;overflow:hidden;flex-shrink:0;background:var(--os-surface-2);border:1px solid var(--os-line-2);color:var(--os-ink-2)}
.os-pill i{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.os-pill i.is-green{background:var(--os-pos)}
.os-pill i.is-gold{background:var(--os-accent)}
.os-pill i.is-teal{background:#5fb6c9}
/* The ASGnet badge carries the evaluation card's own tint, so the row reads
   as the product's: context, mode, model, and the model the org can run. */
.os-asgnet-pill{background:rgba(95,182,201,.12);border-color:rgba(95,182,201,.28);color:#a7e3ee}
.os-chat[data-theme=day] .os-asgnet-pill{background:rgba(95,182,201,.14);border-color:rgba(72,150,168,.35);color:#1f6f82}
.os-baseline-pill{font-family:var(--os-mono);font-size:9px;letter-spacing:.04em}
.os-model-pill{font-variant-numeric:tabular-nums;margin-inline-start:2px}
.os-foot-actions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex:0 0 auto}
.os-send{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;background:var(--os-surface-2);color:var(--os-ink-3);box-shadow:inset 0 0 0 1px var(--os-line-2);transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.os-send.is-sending{background:linear-gradient(180deg,#e9a155 0%,#d98e3e 100%);color:#191a2d;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 3px 10px rgba(217,142,62,.4);transform:translateY(-1px)}

/* ============================ narration comparison ============================ */
.os-comparison{width:100%;padding:18px 0;margin:0 0 20px;border-top:1px solid #324658}
.os-comparison-caption{font:10px/1.6 'JetBrains Mono',ui-monospace,monospace;margin:0 0 18px;color:#8ba8bb}
.os-comparison>div{position:relative;display:flex;justify-content:space-between;gap:12px;padding:12px 0 17px;font-size:11px}
.os-comparison strong{color:#ecf2f5;font:400 20px/1.1 'Instrument Serif',Georgia,serif;white-space:nowrap}
.os-comparison i{position:absolute;inset:auto 0 0;height:3px;background:#293b4a;border-radius:3px}
.os-comparison i::before{content:'';display:block;width:var(--value);height:100%;background:#557f91;border-radius:3px}
.os-comparison>div:last-of-type i::before{background:#dca15a}
.os-comparison>small{display:block;font-size:9px;margin-top:13px;color:#7996a9}
.os-phone-visual{display:flex;justify-content:center}
.os-phone-visual>[data-os-phone]{width:100%;max-width:380px}
.os-walkthrough--phone .os-story{padding-bottom:35vh}
.os-walkthrough--phone .os-step{min-height:78vh}

/* ============================ narrow frames ============================ */
/* The panel is a container: the ranking re-lays itself as per-row blocks
   rather than asking a reader to swipe a table sideways. */
@container os-chat (max-width:560px){.os-baseline-pill,.os-mode-pill{display:none}}
@container os-chat (max-width: 430px){
  .os-rank-head{display:none}
  .os-rank-row{grid-template-columns:1fr auto;gap:4px 10px;padding:11px 0 12px}
  .os-rank-row span:not(:first-child){text-align:end}
  .os-rank-id{grid-column:1;grid-row:1}
  .os-rank-value{grid-column:2;grid-row:1}
  .os-rank-delta{grid-column:2;grid-row:2}
  .os-rank-row span:nth-child(4){grid-column:1;grid-row:2;text-align:start;font:9px/1.5 var(--os-mono);color:var(--os-card-ink-3)}
  .os-rank-row span:nth-child(5){display:none}
  .os-kpis{grid-template-columns:1fr}
  /* A narrow frame sheds the chrome the reader does not need before it
     squeezes the title that names the surface. */
  .os-iconbtn.is-optional{display:none}
  /* The lane name wraps rather than being trimmed to an ellipsis a reader
     cannot expand, and its stage keeps the lane's left edge. */
  .os-lane-name{white-space:normal;overflow:visible;line-height:1.4}
  .os-lane-stage,.os-lane-rail{padding-left:0;margin-left:0}
  .os-asg-metrics{grid-template-columns:1fr}
  .os-asg-lockup img{height:13px}
  .os-asg-lockup span{display:none}
}

@media(min-width:761px) and (max-width:1080px){
  .os-walkthrough{gap:28px}.os-walkthrough--chat{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .os-header{padding:9px 9px;gap:1px}.os-title{font-size:13.5px}
  .os-thread{padding:12px 11px}.os-step>p{font-size:14px}
}
@media(max-width:760px){
  .ex-scenario-section.ex-section,.ex-phone-section.ex-section{padding-inline:16px}
  .os-walkthrough{display:block}
  /* Stacked on a phone, the narration passes beneath the product frame: the
     sticky backdrop lets it disappear cleanly instead of splitting a
     sentence around the device. */
  .os-visual{top:0;z-index:2;padding-top:10px;margin-bottom:8px;background:linear-gradient(#090f19 0,#090f19 92%,transparent)}
  /* The frame takes the screen MINUS the band one narration passage needs, so a
     tall phone gets a tall panel instead of a 470px one with 200px of nothing
     under it. Below the frame the passage is all there is — a heading and a
     paragraph, no button — so the band is the words and nothing else, and the
     frame keeps roughly three quarters of the screen. The band is measured from
     the longest passage in any language with the real webfonts loaded
     (OPERATOR_FONTS_DIR): 227px of Indonesian at 390 wide, plus a margin
     WebKit's metrics cannot eat. */
  .os-walkthrough--chat{--os-band:264px;--os-frame-h:clamp(280px,calc(100svh - var(--os-band)),720px);--os-frame-block:calc(var(--os-frame-h) + 18px)}
  /* min-height:0 so --os-frame-h is the single truth: the narration band is
     positioned from it, and a stale 400px floor would slide the passage up
     under the frame. */
  .os-chat{height:var(--os-frame-h);min-height:0;border-radius:12px;font-size:11.5px;box-shadow:0 12px 28px rgba(0,0,0,.35)}
  .os-header{min-height:46px;padding:7px 7px 7px 9px;gap:0}.os-mark,.os-mark img{width:26px;height:26px}.os-title{font-size:12px}
  .os-iconbtn{width:24px;height:24px}.os-iconbtn svg{width:14px;height:14px}
  .os-modes{padding:6px 8px}.os-mode{padding:5px;font-size:10px}
  .os-thread{padding:11px 11px 12px}.os-role{font-size:9px}.os-user{padding:7px 9px}
  .os-turn{margin-bottom:13px}.os-msg{margin-bottom:9px}
  .os-widget,.os-asg-card{padding:10px 11px 11px;border-radius:10px}
  .os-asg-title{font-size:15px}.os-kpi-value,.os-asg-metric>strong{font-size:17px}
  .os-move h5,.os-plan-action h5{font-size:11.5px}.os-move p{font-size:10.5px}
  .os-composer{padding:7px 9px 9px}.os-input{font-size:11.5px}.os-input-foot{gap:5px;margin-top:7px}
  .os-pill{font-size:9.5px;padding:0 8px;min-height:21px}
  .os-menu-btn,.os-mic{width:24px;height:24px}.os-send{width:27px;height:27px}
  .os-scroll-hint{display:none}
  .os-story{position:relative;padding-bottom:40vh}
  .os-step{min-height:83vh;padding:26px 8px 30px;justify-content:flex-end;opacity:.4;scroll-margin-top:52svh}
  .os-step:first-child{padding-top:26px}.os-step.is-active{opacity:1}
  .os-step-number{font-size:9px;margin-bottom:12px}.os-step h3{font-size:23px;margin-bottom:12px;max-width:480px}
  .os-step>p{font-size:13px;line-height:1.7;margin-bottom:14px}.os-jump{padding:6px 10px;font-size:10px}
  .os-walkthrough--phone{display:flex;flex-direction:column}.os-phone-visual{order:0;width:100%;top:0;padding-top:8px}
  .os-walkthrough--phone>.os-story{order:1;width:100%;padding-bottom:40vh}.os-walkthrough--phone .os-step{min-height:92vh}
  /* The device is the subject of this section, so it takes the screen MINUS the
     band one narration passage needs, the same rule the chat frame follows.
     209px is the longest passage in any of the seven languages at 390 wide.
     --os-phone-frame-h is the single truth, as --os-frame-h is for the chat:
     the device's width is that height in the phone's own 440/956 proportion,
     and the narration pins in what the frame leaves (8px of padding above the
     device plus the 8px margin below it). */
  .os-walkthrough--phone{--os-phone-band:235px;--os-phone-frame-h:min(calc((100vw - 44px) * 2.17273),calc(100svh - var(--os-phone-band)));--os-phone-frame-block:calc(var(--os-phone-frame-h) + 16px)}
  .os-phone-visual>[data-os-phone]{max-width:340px}
  .os-phone-visual [data-phone-scroll-driven=true] .ex-phone{width:calc(var(--os-phone-frame-h) * .460251)!important;min-width:0!important;border-radius:30px!important}
  .os-phone-visual .ex-phone-screen{font-size:8px}
  .os-comparison{padding:10px 0;margin-bottom:12px}.os-comparison>div{padding:7px 0 12px}
  .os-comparison-caption{font-size:8px;margin-bottom:8px}.os-comparison>small{font-size:8px}
}
@media(max-width:360px){.os-title{font-size:11.5px}.os-chat{min-height:280px}}
@media(max-height:550px) and (min-width:761px){
  .os-visual{top:10px}.os-chat{height:calc(100svh - 60px);min-height:250px}
  .os-header{min-height:46px;padding:7px 9px}.os-mark,.os-mark img{width:26px;height:26px}
  .os-composer{padding:7px 9px}.os-scroll-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  .os-step,.os-unit,.os-rank-row,.os-send,.os-lane,.os-draft li i{transition:none}
  .os-caret,.os-unit.is-typing::after{display:none}
  .os-mark img,.os-mark-pulse,.os-streaming-dots i,.os-streaming-bar::after,.os-pulse,.os-draft li[data-state=active] i,.os-asg-pill i,.os-lane-stage .os-stage-mark i{animation:none}
}
/* Anchor each explanation to the corresponding authored scroll beat. */
.os-walkthrough{--os-scroll-span:620svh;min-height:calc(100svh + var(--os-scroll-span))}
.os-walkthrough--phone{--os-scroll-span:400svh}
.os-story,.os-walkthrough--phone .os-story{position:relative;height:calc(100svh + var(--os-scroll-span));padding:0}
.os-step,.os-step:first-child,.os-walkthrough--phone .os-step{position:absolute;top:calc(45svh + var(--os-anchor) * var(--os-scroll-span));left:0;right:0;min-height:0;padding:32px 0;transform:translateY(-50%)}
@media(max-width:760px){
 .os-walkthrough,.os-walkthrough--phone{--os-scroll-span:780svh;display:block;height:calc(100svh + var(--os-scroll-span))}
 .os-walkthrough--phone{--os-scroll-span:740svh}
 .os-story,.os-walkthrough--phone>.os-story{position:absolute;inset:0;height:100%;padding:0;pointer-events:none}
 .os-step,.os-step:first-child,.os-walkthrough--phone .os-step{top:calc(76svh + var(--os-anchor) * var(--os-scroll-span));min-height:0;padding:16px 8px;pointer-events:auto}
 .os-phone-visual{display:flex}
 /* Stacked under the frame there is room for exactly one passage, so the
 narration holds its place below the panel and cross-fades as the story
    moves, instead of drifting through an empty column. The device section
    reads the same way, in the band its own frame leaves. */
 .os-walkthrough--chat .os-story-stage,.os-walkthrough--phone .os-story-stage{display:block;position:sticky;top:0;height:100svh}
 .os-walkthrough--chat .os-step,.os-walkthrough--chat .os-step:first-child{position:absolute;top:var(--os-frame-block);bottom:0;left:0;right:0;transform:none;opacity:0;padding:10px 8px 0;justify-content:center;transition:opacity .3s ease}
 .os-walkthrough--phone .os-step,.os-walkthrough--phone .os-step:first-child{position:absolute;top:var(--os-phone-frame-block);bottom:0;left:0;right:0;transform:none;opacity:0;padding:10px 8px 0;justify-content:center;transition:opacity .3s ease}
 .os-walkthrough--chat .os-step.is-active,.os-walkthrough--phone .os-step.is-active{opacity:1}
 /* Stacked in one band, a passage faded to nothing is not there: it never
    takes the tap meant for the passage being read. */
 .os-walkthrough--chat .os-step:not(.is-active),.os-walkthrough--phone .os-step:not(.is-active){pointer-events:none}
 .os-walkthrough--chat .os-step h3,.os-walkthrough--phone .os-step h3{font-size:20px;margin-bottom:8px;line-height:1.15}
 .os-walkthrough--phone .os-step>p{font-size:13px;line-height:1.65;margin-bottom:12px}
 .os-walkthrough--chat .os-step-number,.os-walkthrough--phone .os-step-number{margin-bottom:8px}
 /* Beside the frame the button realigns the page with the beat a passage
    explains. Stacked beneath it the chat's passage is always the beat already
    on screen, so the button would scroll a reader to where they are; the band
    it costs belongs to the panel instead, and the paragraph is the last thing
    in the passage. */
 .os-walkthrough--chat .os-step>p{font-size:13px;line-height:1.65;margin-bottom:0}
 .os-walkthrough--chat .os-step .os-jump{display:none}
 .os-walkthrough--chat .os-comparison{display:none}
}
/* A portrait phone must fit vertically as well as horizontally in landscape. */
@media(min-width:761px) and (max-height:700px){
 #operator-explore .os-phone-visual [data-phone-scroll-driven=true] .ex-phone{width:calc((100svh - 90px) * .460251);min-width:0;--phone-frame-padding:4px}
 .os-phone-visual{top:10px}
 .os-phone-visual>[data-os-phone]{max-width:330px}
}
/* Below ~380px the same sentence wraps further, so the passage takes the
   compact type rather than the frame taking the loss. Even in it the words run
   one line longer than at 390, which the band gives back rather than the
   passage losing its last line: 228px of Indonesian at 320. */
@media(max-width:379px){
 .os-walkthrough--chat{--os-band:272px}
 .os-walkthrough--phone{--os-phone-band:236px}
 .os-walkthrough--chat .os-step h3,.os-walkthrough--phone .os-step h3{font-size:19px;margin-bottom:8px}
 .os-walkthrough--phone .os-step>p{font-size:12px;line-height:1.6;margin-bottom:12px}
 .os-walkthrough--chat .os-step>p{font-size:12px;line-height:1.6;margin-bottom:0}
}
@media(max-width:379px) and (max-height:600px){
 .os-walkthrough--chat .os-step h3,.os-walkthrough--phone .os-step h3{font-size:18px;margin-bottom:6px}
 .os-walkthrough--phone .os-step>p{font-size:11.5px;line-height:1.5;margin-bottom:10px}
 .os-walkthrough--chat .os-step>p{font-size:11.5px;line-height:1.5;margin-bottom:0}
 .os-walkthrough--chat .os-step-number,.os-walkthrough--phone .os-step-number{margin-bottom:6px}
}
@media(min-width:600px) and (max-height:550px){
 .os-walkthrough,.os-walkthrough--phone{--os-scroll-span:700svh;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;height:auto}
 .os-story,.os-walkthrough--phone>.os-story,.os-walkthrough--chat>.os-story{position:relative;inset:auto;height:calc(100svh + var(--os-scroll-span));pointer-events:auto;margin-top:0;top:auto}
 .os-step,.os-step:first-child,.os-walkthrough--phone .os-step{position:absolute;top:calc(45svh + var(--os-anchor) * var(--os-scroll-span));bottom:auto;transform:translateY(-50%);opacity:.42;padding:10px 0;min-height:0}
 /* A 390px-tall column holds one passage, so both sections pin and cross-fade
    here too. */
 .os-walkthrough--chat .os-story-stage,.os-walkthrough--phone .os-story-stage{display:block;position:sticky;top:0;height:100svh}
 .os-walkthrough--chat .os-step,.os-walkthrough--chat .os-step:first-child,.os-walkthrough--phone .os-step,.os-walkthrough--phone .os-step:first-child{position:absolute;top:50%;bottom:auto;left:0;right:0;transform:translateY(-50%);opacity:0;transition:opacity .3s ease;padding:10px 0;min-height:0}
 .os-walkthrough--chat .os-step.is-active,.os-walkthrough--phone .os-step.is-active{opacity:1}
 /* Stacked in one band, a passage faded to nothing is not there: it never
    takes the tap meant for the passage being read. */
 .os-walkthrough--chat .os-step:not(.is-active),.os-walkthrough--phone .os-step:not(.is-active){pointer-events:none}
 /* A 375px-tall column holds one passage, so the passage has to fit it. */
 .os-step h3,.os-walkthrough--chat .os-step h3,.os-walkthrough--phone .os-step h3{font-size:19px;margin-bottom:8px;line-height:1.2}
 .os-step>p,.os-walkthrough--chat .os-step>p,.os-walkthrough--phone .os-step>p{font-size:11.5px;line-height:1.55;margin-bottom:10px}
 .os-step-number,.os-walkthrough--chat .os-step-number,.os-walkthrough--phone .os-step-number{font-size:8.5px;margin-bottom:7px}.os-jump{padding:5px 9px;font-size:9.5px}
 .os-walkthrough--chat .os-comparison{display:none}
 .os-walkthrough--phone>.os-story{order:0}.os-walkthrough--phone>.os-phone-visual{order:1}
 .os-visual{top:10px}.os-chat{height:calc(100svh - 62px);min-height:250px}
 .os-header{min-height:48px;padding:8px}.os-mark,.os-mark img{width:26px;height:26px}
 #operator-explore .os-phone-visual [data-phone-scroll-driven=true] .ex-phone{width:calc((100svh - 80px) * .460251)!important;min-width:0!important;--phone-frame-padding:4px;border-radius:13.6% / 6.3%!important}
 .os-phone-visual>[data-os-phone]{max-width:100%}
 .os-title{font-size:12px}.os-composer{padding:7px 8px}.os-scroll-hint{display:none}
}

/* ============================ touch ============================ */
/* Sizing here follows the PRIMARY pointer, not the viewport: a touchscreen
   laptop gets the finger-sized areas too, and a mouse keeps the compact chrome. */
@media(pointer:coarse){
  .os-iconbtn{width:30px;height:30px}
  .os-iconbtn.is-control{position:relative}
  .os-iconbtn.is-control::after{content:'';position:absolute;inset:-7px}
  .os-assumptions summary{min-height:32px;display:flex;align-items:center;gap:6px}
  .os-jump{min-height:36px}
}