main { width:calc(100% - 32px); margin-top:8px; }
.topbar { min-height:48px; padding:4px 16px; }
.brand-mark { width:32px; height:32px; }
.head { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:40px; }
.head h1 { margin:0; font-size:var(--cp-text-base); }
.head .lede { margin:0; font-size:var(--cp-text-xs); }
#solution-picker { display:flex; align-items:center; gap:8px; width:440px; max-width:50%; }
#solution-picker label { margin:0; font-size:var(--cp-text-xs); white-space:nowrap; }
#solution-picker select { padding:4px 8px; font-size:var(--cp-text-xs); }
.stage { margin:6px 0 24px; }
.computer { min-width:0; margin:0; }
.desktop-stage #pc { height:calc(100dvh - 294px); min-height:300px; flex:none; border-radius:var(--cp-radius-sm); box-shadow:var(--cp-shadow); }
#practice-computer.desktop-stage[data-consent-space] #pc { height:var(--practice-desktop-height); min-height:0; flex:none; }
.desktop-stage .coach { margin-top:4px; grid-template-columns:minmax(0,1fr) 390px; padding:8px 12px; gap:4px 16px; border-radius:var(--cp-radius-sm); }
.desktop-stage .all-steps { grid-column:2; grid-row:1 / span 6; margin:0; padding:0; border:0; min-width:0; }
.desktop-stage #practice-caption { grid-column:1; min-width:0; color:var(--cp-text-muted); font-size:var(--cp-text-xs); line-height:var(--cp-leading-snug); }
.desktop-stage #practice-caption.caption-repeated { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.desktop-stage[data-journey="local"] .all-steps { max-height:138px; overflow:auto; }
.desktop-stage[data-journey="local"] .win { max-height:calc(100% - 56px); }
.desktop-stage[data-journey="local"] #step-help { grid-column:1; position:relative; font-size:var(--cp-text-xs); }
.desktop-stage #step-help ul { margin:var(--cp-space-2) 0; padding-left:var(--cp-space-5); }
.desktop-stage #step-help[open] { background:var(--cp-surface); border:1px solid var(--cp-border); padding:var(--cp-space-2); }
.desktop-stage #step-help a { color:var(--cp-link); }
.practice-notes { display:flex; gap:var(--cp-space-5); font-size:var(--cp-text-xs); }
.practice-notes a { color:var(--cp-link); }
.desktop-stage #pc :is(button, input, [contenteditable], [role="button"]):focus-visible {
  outline:2px solid var(--cp-focus); outline-offset:2px; box-shadow:0 0 0 4px var(--cp-focus-halo);
}
.practice-page .page { gap:var(--cp-space-2); max-width:none; width:100%; padding:12px 16px; }
@media (min-width:901px) {
  body.practice-page { display:flex; flex-direction:column; height:100dvh; }
  .practice-page #aibast-clarity-consent { position:static !important; flex:none; }
  .practice-page .page .stage { flex:1; min-height:0; display:flex; }
  .practice-page .page { height:100dvh; min-height:0; flex:1; }
  .desktop-stage[data-journey="local"] { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
  .desktop-stage[data-journey="local"] #pc { flex:1; height:auto; min-height:260px; }
  .desktop-stage[data-journey="local"] .coach { flex:none; }
  .practice-page .journey-link { margin:0; }
  .desktop-stage[data-journey="local"] #start .rec-sec,
  .desktop-stage[data-journey="local"] #recs { display:none; }
  .desktop-stage[data-journey="local"] #start { padding-top:var(--cp-space-3); }
  .desktop-stage[data-journey="local"] #start .sec { margin:var(--cp-space-2) 0; }
  .desktop-stage[data-journey="local"] .pin { height:64px; }
}
.page:has(.desktop-stage) { max-width:none; width:100%; padding:12px 16px; }
.page .stage { margin:0; }
.journey-link { color:var(--cp-text-muted); font-size:var(--cp-text-xs); }
.journey-link a { color:var(--cp-link); }
.desktop-stage .type-helper.restore-helper, .desktop-stage .type-helper.paste-helper, .desktop-stage .type-helper.news-helper { display:inline-block; }
.desktop-stage .bs { background:var(--cp-bg); color:var(--cp-text); }
.desktop-stage .bs .hd { padding:8px 12px; gap:6px; flex-wrap:wrap; border-color:var(--cp-border); background:var(--cp-surface); }
.desktop-stage .bs .hd strong { margin-right:auto; }
.desktop-stage .bs select { max-width:110px; background:var(--cp-surface); color:var(--cp-text); border:1px solid var(--cp-border); font:inherit; }
.desktop-stage .bs button { background:var(--cp-surface); color:var(--cp-text); border:1px solid var(--cp-border); padding:5px 8px; font-size:12px; }
.desktop-stage .bs .m { background:var(--cp-surface); border:1px solid var(--cp-border); max-width:90%; }
.desktop-stage .bs .m.me { background:var(--cp-accent-soft); color:var(--cp-text); }
.desktop-stage .bs form { padding:8px 12px; border-color:var(--cp-border); }
.desktop-stage .bs form input { background:var(--cp-surface); color:var(--cp-text); border-color:var(--cp-border); }
.bs .sample-label { padding:4px 12px; font-size:11px; color:var(--cp-text-muted); background:var(--cp-surface-soft); }
.bs-starters, .bs-toolbar { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; padding:4px 10px; }
.bs-thought { font-size:12px; color:var(--cp-text-muted); margin:4px 0; }
.bs-finish { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 12px; padding:4px 8px; background:var(--cp-surface); border:1px solid var(--cp-border-strong); border-radius:var(--cp-radius-sm); }
.bs-finish p { margin:0; font-size:13px; }
.bs-finish button { flex:none; }
.desktop-stage #stage-keep-going:focus { outline:2px solid var(--cp-focus); outline-offset:2px; box-shadow:0 0 0 4px var(--cp-focus-halo); }
.desktop-stage .win:has(.bs-finish) { top:8px !important; height:calc(100% - 64px) !important; }
.desktop-stage .win:has(.bs-finish), .bs:has(.bs-finish), .bs:has(.bs-finish) * { transition:none !important; }
.bs:has(.bs-finish) :is(.hd, .log, form) { padding:4px 12px; }
.bs:has(.bs-finish) :is(.bs-starters, .bs-toolbar) { padding:2px 10px; }
.bs:has(.bs-finish) .log .m { padding:4px 8px; margin-bottom:4px; line-height:1.35; }
.bs:has(.bs-finish) .bs-thought { margin:0; font-size:11px; }
.bs-panel { position:absolute; right:8px; top:80px; width:min(440px, calc(100% - 16px)); max-height:calc(100% - 100px); overflow:auto; padding:16px; background:var(--cp-surface); border:1px solid var(--cp-border); border-radius:var(--cp-radius); box-shadow:var(--cp-shadow); z-index:2; }
.bs-panel[hidden] { display:none; }
.bs-panel input { display:block; width:100%; margin:12px 0; }
#download-agent { padding:12px; border:1px solid var(--cp-border); background:var(--cp-surface); cursor:grab; overflow-wrap:anywhere; touch-action:none; }
.file-drag-preview { position:fixed; z-index:var(--cp-z-toast); pointer-events:none; padding:var(--cp-space-2); border:1px solid var(--cp-focus); border-radius:var(--cp-radius-sm); background:var(--cp-surface); color:var(--cp-text); box-shadow:var(--cp-shadow); transform:translate(var(--cp-space-2), var(--cp-space-2)); }
.desktop-stage .downloads { z-index:1000 !important; min-width:0; min-height:150px; }
.desktop-stage .downloads .body { padding:12px; }
.file-explorer .body { overflow:auto; padding:var(--cp-space-3); }
.file-folders { display:flex; flex-wrap:wrap; gap:var(--cp-space-2); margin-bottom:var(--cp-space-3); }
.file-explorer button { font:inherit; background:var(--cp-surface); color:var(--cp-text); border:1px solid var(--cp-border); border-radius:var(--cp-radius-sm); padding:var(--cp-space-1) var(--cp-space-2); }
.file-folders [aria-pressed="true"] { border-color:var(--cp-focus); }
.file-list > [data-file-id] { display:block; padding:var(--cp-space-2); overflow-wrap:anywhere; }
.browser-panel, .browser-loading { color:var(--cp-text); background:var(--cp-surface); padding:var(--cp-space-5); }
.browser-panel button { font:inherit; padding:var(--cp-space-2) var(--cp-space-3); border:1px solid var(--cp-border-strong); border-radius:var(--cp-radius-sm); background:var(--cp-surface); color:var(--cp-link); cursor:pointer; }
#practice-page { width:100%; height:100%; border:0; background:var(--cp-surface); }
.desktop-stage .all-steps > summary { display:none; }
.desktop-stage .coach .prog { min-width:0; gap:12px; }
.desktop-stage .coach .say { font-size:var(--cp-text-sm); line-height:1.35; }
.desktop-stage .prog h3 { font-size:11px; margin:0 0 4px; position:sticky; top:0; z-index:1; background:var(--cp-surface); }
.desktop-stage .prog section { min-width:0; }
.desktop-stage .prog section > div { margin:2px 0; font-size:11px; line-height:1.2; }
.desktop-stage .coach button, .desktop-stage .coach a.btn { padding:5px 8px; font-size:var(--cp-text-xs); }
.mode-switch { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--cp-border); border-radius:var(--cp-radius); }
#c-context { grid-column:1; min-width:0; font-size:var(--cp-text-xs); line-height:1.35; }
#c-context code { display:block; font-family:var(--cp-font-mono); overflow-wrap:anywhere; }
#stage-skip { background:none; border-color:transparent; color:var(--cp-link); font-weight:400; }
.desktop-stage .vsc.agent-setup .body { grid-template-columns:44px 150px minmax(120px,1fr) minmax(300px,1.3fr); }
.desktop-stage .vsc .thread button { align-self:flex-start; background:#264f78; border-color:#4cc2ff; color:#fff; font-size:12px; }
.desktop-stage #agent-chat { background:none; color:var(--vs-text); border:0; padding:0; font-size:12px; }
.sample-studio { --studio-brand:#3b3fd8; position:absolute; inset:0; display:flex; background:#fff; color:#242424; font:14px/1.45 "Segoe UI",system-ui,sans-serif; user-select:text; container-type:size; }
.sample-studio svg { flex:none; }
.studio-nav { display:flex; flex-direction:column; align-items:center; flex:0 0 74px; gap:6px; padding:12px 4px; background:#fafafa; border-right:1px solid #e0e0e0; }
.studio-nav > span { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:8px; }
.studio-nav hr { width:32px; margin:2px 0; border:0; border-top:1px solid #e0e0e0; }
.studio-nav .selected, .studio-nav .studio-logo { background:#ebebeb; }
.studio-nav .studio-nav-bottom { margin-top:auto; }
.studio-nav .studio-account { width:28px; height:28px; border-radius:50%; background:var(--studio-brand); color:#fff; font-size:11px; }
.studio-agent-page { flex:1; min-width:0; display:flex; flex-direction:column; }
.studio-topbar { display:flex; align-items:center; flex:none; gap:12px; min-height:54px; padding:6px 16px; border-bottom:1px solid #e0e0e0; }
.studio-identity { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
#studio-agent { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-draft { display:flex; align-items:center; gap:3px; flex:none; border:1px solid #d6d6d6; border-radius:20px; padding:2px 7px; font-size:11px; color:#616161; background:#f5f5f5; }
.studio-draft svg { width:14px; height:14px; }
.studio-tabs { display:flex; align-items:center; flex:none; border:1px solid #d6d6d6; border-radius:8px; font-size:12px; overflow:hidden; }
.studio-tabs > span { padding:6px 12px; border-right:1px solid #e0e0e0; }
.studio-tabs > :last-child { border:0; }
.studio-tabs [aria-pressed="true"] { color:var(--studio-brand); background:#f6f6ff; font-weight:600; }
.studio-actions { display:flex; justify-content:flex-end; align-items:center; gap:14px; flex:1; font-size:12px; }
.studio-actions > span { display:flex; align-items:center; gap:6px; flex:none; }
.studio-review { border:1px solid #d6d6d6; border-radius:6px; padding:5px 10px; }
.studio-shield { position:relative; display:flex; }
.studio-shield small { position:absolute; right:-3px; top:-5px; width:12px; height:12px; border-radius:50%; background:#c4314b; color:#fff; font:9px/12px "Segoe UI",sans-serif; text-align:center; }
.studio-publish { border-radius:6px; padding:6px 14px; background:#eeedfc; color:var(--studio-brand); font-weight:600; }
.studio-preview { flex:1; min-height:0; display:flex; justify-content:center; padding:0 20px; }
.studio-test { display:flex; flex-direction:column; width:62%; max-width:960px; min-width:0; min-height:0; }
.studio-test-header { display:flex; align-items:center; gap:12px; flex:none; min-height:48px; font-size:12px; }
.studio-header-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-chat-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.studio-chat-actions > span, .sample-studio #studio-new-chat { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.studio-chat-actions svg { width:16px; height:16px; }
.sample-studio #studio-new-chat { padding:0; border:0; background:none; color:inherit; font:inherit; }
.studio-toggle { width:28px; height:16px; border-radius:20px; background:var(--studio-brand); }
.studio-toggle::after { content:""; width:12px; height:12px; margin-left:14px; border-radius:50%; background:white; }
.studio-thread { flex:1; min-height:0; overflow:auto; padding:18px 4px 8px; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.studio-speaker { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-weight:600; }
.studio-greeting h2 { font-size:18px; line-height:1.3; margin:0; font-weight:600; }
.studio-thread p { white-space:pre-wrap; margin:0 0 12px; }
.studio-description { color:#424242; }
.studio-feedback { display:flex; gap:12px; color:#616161; }
.studio-feedback svg { width:16px; height:16px; }
.studio-thread .sample-question { width:fit-content; max-width:88%; margin-left:auto; background:#f0f0f0; border-radius:10px; padding:8px 14px; }
.studio-thread a { color:var(--studio-brand); }
.studio-prompts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; flex:none; padding:8px 0 12px; }
.studio-prompts[hidden] { display:none; }
.sample-studio .studio-prompts button { display:flex; align-items:center; min-width:0; gap:8px; border:1px solid #d6d6d6; border-radius:28px; padding:8px 12px; background:#fff; color:#424242; text-align:left; font:12px/1.3 "Segoe UI",system-ui,sans-serif; }
.studio-prompts button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-prompts svg { width:16px; height:16px; }
.sample-studio form { display:flex; align-items:center; flex:none; gap:12px; min-height:68px; margin:0; padding:10px 16px; background:#fff; border:1px solid #c7c7c7; border-radius:34px; }
.studio-plus { display:flex; color:#616161; }
.sample-studio textarea { flex:1; min-width:0; width:100%; padding:0; font:14px/1.4 "Segoe UI",system-ui,sans-serif; resize:none; border:0; background:#fff; color:#242424; }
.sample-studio textarea:focus-visible { outline:none; }
.sample-studio form:focus-within { border-color:var(--studio-brand); box-shadow:0 0 0 1px var(--studio-brand); }
.sample-studio #studio-send { display:grid; place-items:center; flex:none; width:32px; height:32px; padding:4px; background:var(--studio-brand); color:#fff; border:0; border-radius:8px; }
.studio-ai-disclaimer { flex:none; margin:6px 0; color:#616161; font-size:11px; text-align:center; }
.studio-ai-disclaimer span { color:var(--studio-brand); }
.studio-footer { flex:none; padding:3px 8px; color:#616161; font-size:11px; text-align:center; pointer-events:none; }
@container (max-width:1200px) {
  .studio-topbar { gap:8px; padding-inline:10px; }
  .studio-actions { flex:0; gap:8px; }
  .studio-test { width:80%; }
}
@container (max-width:950px) {
  .studio-actions > span:not(.studio-review):not(.studio-publish) { display:none; }
  .studio-test { width:100%; }
}
@container (max-height:500px) {
  .studio-nav { gap:2px; padding-block:4px; }
  .studio-nav > span { width:28px; height:28px; }
  .studio-topbar { min-height:40px; padding-block:3px; }
  .studio-test-header { min-height:34px; }
  .studio-thread { padding-top:6px; font-size:13px; line-height:1.4; }
  .studio-thread:has(#studio-answer) { padding-block:4px; }
  .studio-thread .sample-question { padding:6px 10px; margin-bottom:4px; font-size:12px; line-height:1.35; }
  .studio-thread > .studio-speaker { margin-bottom:0; }
  .studio-greeting h2 { font-size:16px; }
  .studio-greeting .studio-speaker { margin-bottom:4px; }
  .studio-greeting p { margin-bottom:6px; }
  .studio-prompts { gap:4px; padding-block:4px; }
  .sample-studio .studio-prompts button { padding:5px 10px; }
  .sample-studio form { min-height:54px; padding-block:6px; }
  .studio-ai-disclaimer { margin-block:3px; }
}
@media (max-width:600px) {
  .desktop-stage .edge:has(.sample-studio) > .tbar,
  .desktop-stage .edge:has(.sample-studio) .bar { display:none; }
  .desktop-stage .edge:has(.sample-studio) .view { inset:0; }
}
@container (max-width:600px) {
  .studio-nav { flex-basis:32px; padding-inline:0; }
  .studio-topbar { flex-wrap:wrap; gap:4px; padding:4px 6px; }
  .studio-identity { flex-basis:100%; font-size:12px; }
  .studio-tabs { flex:1; font-size:11px; }
  .studio-tabs > span { flex:1; text-align:center; padding:4px; }
  .studio-actions { display:none; }
  .studio-preview { padding-inline:8px; }
  .studio-test-header { flex-wrap:wrap; gap:2px; padding-block:4px; font-size:11px; }
  .studio-header-name { flex-basis:100%; }
  .studio-chat-actions { gap:5px; justify-content:flex-start; }
  .studio-thread { font-size:12px; padding-inline:2px; }
  .studio-greeting h2 { font-size:15px; }
  .sample-studio .studio-prompts button { gap:4px; padding:6px; font-size:11px; }
  .sample-studio form { gap:6px; padding:8px; min-height:58px; }
  .sample-studio textarea { font-size:12px; }
  .studio-footer { padding-inline:4px; }
}
@media (min-width:601px) and (max-height:740px) {
  .desktop-stage .edge:has(.sample-studio) > .tbar,
  .desktop-stage .edge:has(.sample-studio) .bar { display:none; }
  .desktop-stage .edge:has(.sample-studio) .view { inset:0; }
}
.desktop-stage .ps .in { display:inline-block; min-width:8px; min-height:16px; }
#stage-controls { display:flex; flex-wrap:wrap; align-items:center; gap:6px; grid-column:1; }
#stage-controls [aria-pressed="true"] { border-color:var(--cp-accent); background:var(--cp-accent-soft); }
#stage-controls [hidden] { display:none; }
#resume-notice { grid-column:1; order:7; flex-basis:100%; color:var(--cp-text-muted); font:var(--cp-text-xs)/var(--cp-leading-snug) var(--cp-font); }
#resume-notice button { color:var(--cp-link); }
.desktop-stage .coach { position:relative; }
#watch-pause-notice { position:absolute; inset:0; z-index:var(--cp-z-overlay); display:flex; flex-wrap:wrap; align-items:center; align-content:start; gap:var(--cp-space-2); min-width:0; padding:var(--cp-space-2) var(--cp-space-3); border:1px solid var(--cp-border-strong); border-radius:var(--cp-radius); background:var(--cp-surface); color:var(--cp-text); font:var(--cp-text-sm)/var(--cp-leading-snug) var(--cp-font); }
#watch-pause-notice[hidden] { display:none; }
#watch-pause-notice p { flex:1 1 32ch; margin:0; }
#watch-pause-notice button { padding:6px 16px; border:1px solid var(--cp-focus); border-radius:var(--cp-radius-sm); background:var(--cp-link); color:var(--cp-surface); font:inherit; cursor:pointer; }
#watch-pause-notice a { margin-left:16px; color:var(--cp-link); font-size:12px; }
.desktop-stage .type-helper { display:none; }
#watch-pointer { position:absolute; left:24px; top:24px; z-index:2100; pointer-events:none; transition:left .55s ease, top .55s ease; filter:drop-shadow(0 2px 3px #0006); }
#watch-pointer.click::after { content:""; position:absolute; left:-10px; top:-10px; width:24px; height:24px; border:3px solid #ffb900; border-radius:50%; }
.desktop-stage .hint { animation:none; transition-property:none !important; }
.desktop-stage[data-mode="watch"] .hint { box-shadow:0 0 0 3px #ffb90033; }
@media (prefers-reduced-motion:reduce) { #watch-pointer { display:none; } }
.steps { list-style:none; margin:0 0 20px; padding:0; counter-reset:s; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.steps > li { counter-increment:s; position:relative; margin:0; padding:12px 12px 12px 46px; border:1px solid var(--cp-border); border-radius:var(--cp-radius); background:var(--cp-surface); }
.steps > li::before { content:counter(s); position:absolute; left:10px; top:11px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:700; border:2px solid var(--cp-border-strong); }
.steps h2 { font-size:1rem; margin:0 0 4px; }
.steps p { font-size:.875rem; line-height:1.45; margin:4px 0; }
.steps pre { font-size:12px; line-height:1.45; padding:8px; }
[data-what-you-need] ul { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; list-style:none; padding:0; margin:10px 0; }
[data-what-you-need] li { border:1px solid var(--cp-border); border-radius:var(--cp-radius); padding:12px 14px; }
@media (max-width:900px) {
  main { width:calc(100% - 24px); margin-top:8px; }
  .head { gap:8px; }
  .head h1 { font-size:var(--cp-text-base); }
  .head .lede { font-size:var(--cp-text-xs); line-height:1.4; }
  .stage { margin-top:10px; gap:16px; }
  .steps { gap:6px; grid-template-columns:1fr; }
  .steps > li { padding:8px 10px 8px 42px; }
  .steps > li::before { top:7px; left:8px; width:24px; height:24px; font-size:12px; }
  .steps h2 { font-size:14px; }
  .steps p { font-size:12px; line-height:1.4; }
  .steps pre { font-size:12px; padding:6px; margin:6px 0; }
  .desktop-stage #pc { display:block !important; height:540px; min-height:540px; width:100%; }
  .desktop-stage .coach { display:grid !important; padding:10px; }
  .desktop-stage #tb-search { display:none; }
  .desktop-stage #tb-center { left:8px; transform:none; }
  .desktop-stage #tray { padding-right:4px; gap:2px; }
  .desktop-stage #tray > svg { display:none; }
  .desktop-stage #start { padding:16px 12px 0; bottom:54px; }
  .desktop-stage #pins { grid-template-columns:repeat(3,1fr); overflow:auto; }
  .desktop-stage #start .foot { margin-left:-12px; margin-right:-12px; padding:8px 12px; }
  .desktop-stage .win { min-width:0; left:0 !important; top:0 !important; width:100% !important; height:calc(100% - 48px) !important; border-radius:0; }
  .desktop-stage .win .tbar .ctl i { width:28px; }
  .desktop-stage .vsc .body { grid-template-columns:1fr !important; }
  .desktop-stage .vsc .act, .desktop-stage .vsc .exp, .desktop-stage .vsc .ed, .desktop-stage .vsc .cmd { display:none; }
  .desktop-stage .vsc .sbar { gap:8px; }
  .desktop-stage .gh { padding:20px 8px; }
  .desktop-stage .gh .card { width:100%; }
  .desktop-stage .edge .bar { padding:0 6px; gap:4px; }
  .desktop-stage .edge .nav { display:none; }
  .desktop-stage .edge .url { min-width:0; padding:0 8px; }
  .desktop-stage .edge .url input { width:0; min-width:0; }
  .desktop-stage .bs input { min-width:0; }
  .desktop-stage .toast { width:calc(100% - 24px); right:12px; }
  [data-what-you-need] ul { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .head { flex-wrap:wrap; gap:4px; }
  #solution-picker { width:100%; max-width:none; }
  .head .lede { font-size:11px; }
  .stage { margin-top:8px; }
  .desktop-stage #pc { height:clamp(340px, 55dvh, 480px); min-height:340px; }
  .desktop-stage .coach { grid-template-columns:minmax(0,1fr); gap:8px; }
  .desktop-stage .all-steps { grid-column:1; grid-row:auto; }
  .desktop-stage .all-steps > summary { display:list-item; font-size:var(--cp-text-xs); }
  .desktop-stage .prog { margin-top:8px; grid-template-columns:1fr 1fr; }
  .desktop-stage .coach .acts { gap:6px; }
  .desktop-stage .coach button, .desktop-stage .coach a.btn { min-height:36px; }
  .desktop-stage .type-helper { display:inline-block; }
  .desktop-stage #start .rec-sec, .desktop-stage #recs { display:none; }
  .desktop-stage #start .sec { margin:12px 0 6px; }
  .desktop-stage #pins { gap:0; }
  .desktop-stage .pin { height:66px; }
  .desktop-stage[data-journey="local"] .all-steps { max-height:180px; }
  .desktop-stage .downloads { width:80% !important; height:150px !important; }
  .desktop-stage .bs .log { padding:10px; }
  .desktop-stage .bs .hd { padding:6px; }
  .desktop-stage .bs .hd strong { font-size:12px; }
  .desktop-stage .bs button { padding:4px 6px; font-size:11px; }
  .desktop-stage .bs form { padding:6px; }
  .desktop-stage .bs .sample-label { font-size:11px; }
}
.studio-thread:has(#studio-answer)::after { content:""; position:sticky; bottom:calc(-1 * var(--cp-space-2)); display:block; height:var(--cp-space-5); margin:calc(-1 * var(--cp-space-5)) 0 calc(-1 * var(--cp-space-2)); background:linear-gradient(#ffffff00,#fff); pointer-events:none; }
.studio-thread:focus-visible { outline:2px solid var(--cp-focus); outline-offset:-2px; }
.studio-thread[data-more="false"]::after { visibility:hidden; }
.studio-scroll-status { flex:none; height:20px; }
.studio-test:not(:has(#studio-answer)) .studio-scroll-status { display:none; }
#studio-answer p, #studio-answer ul, #studio-answer table { margin:0 0 8px; }
#studio-answer h3, #studio-answer h4 { font-size:14px; line-height:inherit; margin:0 0 4px; }
#studio-answer ul { padding-left:20px; }
#studio-answer table { width:100%; table-layout:fixed; border-collapse:collapse; }
#studio-answer th, #studio-answer td { padding:4px 6px; border:1px solid #e0e0e0; text-align:left; overflow-wrap:anywhere; }
#studio-answer th { background:#eee; }
#studio-answer > :last-child { margin-bottom:0; }
.studio-scroll-hint { flex:none; margin:0; padding:2px 12px; color:#616161; font-size:11px; line-height:1.4; }
.studio-scroll-hint[hidden] { display:none; }
@media (min-width:901px) {
  #instructions > .stage { height:calc(100dvh - 142px); }
  #instructions > .stage .computer, #instructions .desktop-stage { height:100%; display:flex; flex-direction:column; }
  #instructions .desktop-stage #pc { flex:1; height:auto; min-height:0; }
  #instructions .desktop-stage .coach { flex:none; }
  .desktop-stage .win:not(.downloads) { top:4px !important; height:calc(100% - 56px) !important; max-height:calc(100% - 56px); }
  .desktop-stage[data-journey="local"] .downloads { top:116px !important; }
  .desktop-stage .edge, .desktop-stage .vsc { left:12px !important; width:calc(100% - 24px) !important; }
  .desktop-stage .win[data-max] { left:0 !important; top:0 !important; width:100% !important; height:calc(100% - 48px) !important; max-height:calc(100% - 48px); }
  .desktop-stage .vsc .body { grid-template-rows:minmax(0,1fr) 22px; }
  .desktop-stage .vsc .chat { min-height:0; }
  .desktop-stage .vsc .thread { min-height:0; }
  .desktop-stage .vsc .thread > * { flex-shrink:0; }
  .desktop-stage .bs { display:grid; grid-template-rows:30px 15px minmax(0,1fr) 26px 38px; }
  .desktop-stage .bs .hd { grid-row:1; padding:2px 12px; flex-wrap:nowrap; }
  .desktop-stage .bs .hd button { padding:2px 8px; }
  .desktop-stage .bs .sample-label { grid-row:2; padding:0 12px; line-height:15px; }
  .desktop-stage .bs .log { grid-row:3; min-height:0; padding:4px 12px; line-height:1.35; }
  .desktop-stage .bs .m { max-width:100%; padding:4px 8px; margin-bottom:4px; }
  .desktop-stage .bs .bs-starters { grid-row:4; grid-column:1; justify-self:start; justify-content:start; padding:0 12px; }
  .desktop-stage .bs .bs-toolbar { grid-row:4; grid-column:1; justify-self:end; padding:0 12px; }
  .desktop-stage .bs form { grid-row:5; margin:0; padding:2px 12px; }
  .desktop-stage .bs form input { padding:4px 8px; }
  .desktop-stage .bs:has(.bs-finish) { grid-template-rows:30px 15px minmax(0,1fr) 28px 26px 38px; }
  .desktop-stage .bs .bs-finish { grid-row:4; margin:0 12px; }
  .desktop-stage .bs:has(.bs-finish) :is(.bs-starters, .bs-toolbar) { grid-row:5; }
  .desktop-stage .bs:has(.bs-finish) form { grid-row:6; }
  .desktop-stage .bs-panel { top:42px; max-height:calc(100% - 46px); padding:8px 12px; }
  .desktop-stage .bs-panel p { margin:4px 0; }
  .desktop-stage .bs-panel input { margin:4px 0; }
  .desktop-stage .gh { padding:8px; }
  .desktop-stage .gh .card { width:min(440px,100%); padding:10px 16px; }
  .desktop-stage .gh h2 { font-size:18px; margin-bottom:6px; }
  .desktop-stage .gh p { margin:4px 0; }
  .desktop-stage .gh label { margin:4px 0; }
  .desktop-stage .gh input { padding:4px; }
  .desktop-stage .gh button { margin-top:6px; }
}
@media (min-width:901px) and (max-height:920px) {
  .topbar { min-height:36px; padding-block:2px; }
  .topbar .brand-copy { line-height:1.1; font-size:14px; }
  .topbar .nav a { padding-block:4px; }
  .brand-mark { width:28px; height:28px; }
  .head { min-height:32px; }
  .head .lede { line-height:1.2; }
  #instructions > .stage { height:calc(100dvh - 84px); }
  .practice-page .page { padding:8px 12px; gap:4px; }
  .practice-page .page h1 { font-size:18px; }
  .practice-page .page .lede { font-size:12px; }
  .practice-page .journey-link, .practice-notes { line-height:1.2; }
  .desktop-stage .coach { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:6px 8px; position:relative; }
  .desktop-stage[data-journey="local"] .coach { min-height:118px; align-content:start; }
  .desktop-stage[data-journey="local"] #resume-notice { flex-basis:auto; }
  .desktop-stage .coach button, .desktop-stage .coach a.btn { padding:3px 6px; line-height:1.2; }
  .desktop-stage .mode-switch { padding:0; }
  .desktop-stage .coach .n { order:0; font-size:11px; line-height:1.2; }
  .desktop-stage .all-steps { order:1; margin-left:auto; overflow:visible; max-height:none; }
  .desktop-stage[data-journey="local"] .all-steps { max-height:none; overflow:visible; }
  .desktop-stage .all-steps > summary { display:list-item; font-size:12px; line-height:1.2; cursor:pointer; }
  .desktop-stage .all-steps[open] .prog { position:absolute; right:8px; bottom:calc(100% + 8px); width:440px; max-height:50dvh; overflow:auto; padding:12px; background:var(--cp-surface); border:1px solid var(--cp-border); border-radius:var(--cp-radius-sm); z-index:2000; }
  .desktop-stage #step-help { order:2; font-size:12px; }
  .desktop-stage #step-help[open] { position:absolute; right:8px; bottom:calc(100% + 8px); z-index:2001; max-width:440px; }
  .desktop-stage .coach .say { order:3; flex-basis:100%; }
  .desktop-stage #c-context { order:4; flex-basis:100%; }
  .desktop-stage #stage-controls { order:5; flex-wrap:nowrap; }
  .desktop-stage #c-acts { order:6; flex-wrap:nowrap; }
  .desktop-stage #practice-caption:not(.caption-repeated) { order:7; flex-basis:100%; }
  .desktop-stage .edge > .tbar { height:28px; }
  .desktop-stage .edge .bar { height:30px; }
  .desktop-stage .edge .bar .url { height:26px; }
  .desktop-stage .edge .view { inset:30px 0 0; }
}

/* Cowork sample scene. Colours and shapes follow solutions/_shared/surfaces/cowork/index.html. */
.sample-cowork { position:absolute; inset:0; display:flex; background:#fff; color:#242424; font:14px/1.45 "Segoe UI",system-ui,sans-serif; container-type:size; }
.sample-cowork button { font:inherit; cursor:pointer; }
.sample-cowork h2, .sample-cowork h3, .sample-cowork p { margin:0; }
.sample-cowork.cowork-library { align-items:center; justify-content:center; padding:16px; background:#f5f5f5; }
.cowork-card { display:grid; gap:10px; width:min(440px,100%); padding:24px; border:1px solid #e3e3e3; border-radius:10px; background:#fff; }
.cowork-card h2 { font-size:20px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.cowork-kicker { color:#616161; font-size:12px; }
.cowork-saved { min-height:20px; color:#107c41; font-size:13px; overflow-wrap:anywhere; }
.sample-cowork .cowork-primary { justify-self:start; padding:8px 16px; border:1px solid #242424; border-radius:8px; background:#242424; color:#fff; font-weight:600; }
.sample-cowork .cowork-primary:disabled { opacity:.55; cursor:default; }
.cowork-rail { display:flex; flex-direction:column; align-items:center; flex:0 0 76px; gap:14px; padding:14px 4px; border-right:1px solid #ebebeb; color:#616161; }
.sample-cowork .cowork-rail button { display:grid; justify-items:center; gap:2px; width:100%; padding:6px 2px; border:0; border-radius:8px; background:none; color:#242424; font-size:11px; line-height:1.2; }
.cowork-rail-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f0f0f0; color:#242424; }
.cowork-me { display:grid; place-items:center; width:26px; height:26px; margin-top:auto; border-radius:50%; background:#c7d7ea; color:#1f3b5c; font-size:11px; font-weight:600; }
.cowork-main { display:flex; flex:1; flex-direction:column; min-width:0; }
.cowork-bar { display:flex; align-items:center; flex:none; gap:10px; height:48px; padding:0 24px; }
.cowork-bar span { border:1px solid #d6d6d6; border-radius:6px; padding:0 7px; color:#424242; font-size:12px; }
.cowork-page { flex:1; min-height:0; overflow:auto; padding:0 24px 12px; }
.cowork-col { display:grid; gap:12px; width:100%; max-width:760px; margin:0 auto; }
.cowork-greeting { margin:4vh 0 6px 4px !important; font-size:22px; font-weight:400; }
.cowork-box { display:flex; align-items:flex-end; gap:10px; margin:0; padding:14px 16px; border:1px solid #d6d6d6; border-radius:22px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cowork-placeholder { flex:1; min-height:44px; color:#707070; }
.sample-cowork textarea { flex:1; min-width:0; padding:0; border:0; background:#fff; color:#242424; font:inherit; resize:none; }
.sample-cowork textarea:focus-visible { outline:none; }
.sample-cowork .cowork-send { display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:#242424; color:#fff; }
.cowork-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:8px; }
.cowork-head h2 { font-size:18px; font-weight:600; }
.cowork-menu { justify-self:end; display:grid; min-width:160px; padding:4px; border:1px solid #d6d6d6; border-radius:8px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.sample-cowork .cowork-menu button { padding:8px 12px; border:0; border-radius:6px; background:#fff; color:#242424; text-align:left; }
.cowork-empty { padding:20px 16px; border:1px dashed #d6d6d6; border-radius:10px; color:#616161; }
.cowork-plugin { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; padding:14px 16px; border:1px solid #e3e3e3; border-radius:10px; }
.cowork-plugin span { color:#107c41; font-size:12px; }
.cowork-layer { position:absolute; inset:0; display:grid; place-items:center; padding:12px; background:rgba(36,36,36,.28); }
.cowork-layer[hidden] { display:none; }
.cowork-dialog { display:grid; gap:10px; width:min(400px,100%); padding:20px; border-radius:10px; background:#fff; box-shadow:0 12px 36px rgba(0,0,0,.24); }
.cowork-dialog h3 { font-size:16px; font-weight:600; }
.cowork-name { font-weight:600; overflow-wrap:anywhere; }
.sample-cowork .cowork-file { padding:10px 12px; border:1px solid #d6d6d6; border-radius:8px; background:#fafafa; color:#242424; text-align:left; overflow-wrap:anywhere; }
.cowork-who { display:grid; gap:6px; }
.cowork-who span { display:flex; align-items:center; gap:8px; color:#616161; }
.cowork-who span::before { content:""; flex:none; width:14px; height:14px; border:1.4px solid #707070; border-radius:50%; }
.cowork-who .on { color:#242424; font-weight:600; }
.cowork-who .on::before { border:4px solid #242424; }
.cowork-chat { padding-top:8px; }
.cowork-when { display:flex; align-items:center; gap:12px; color:#707070; font-size:12px; }
.cowork-when::before, .cowork-when::after { content:""; flex:1; height:1px; background:#e3e3e3; }
.cowork-ask { justify-self:end; max-width:80%; padding:10px 14px; border-radius:10px; background:#f4f4f4; overflow-wrap:anywhere; }
.cowork-trail { display:flex; align-items:center; gap:10px; color:#242424; font-size:13px; }
.cowork-trail::before { content:""; flex:none; width:14px; height:14px; border-radius:3px; background:#107c41 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/10px no-repeat; }
.cowork-answer { overflow-wrap:anywhere; }
.cowork-answer p, .cowork-answer ul, .cowork-answer table { margin:0 0 8px; }
.cowork-answer p { white-space:pre-wrap; }
.cowork-answer h3, .cowork-answer h4 { font-size:14px; margin:0 0 4px; }
.cowork-answer ul { padding-left:20px; }
.cowork-answer table { width:100%; table-layout:fixed; border-collapse:collapse; }
.cowork-answer th, .cowork-answer td { padding:4px 6px; border:1px solid #e0e0e0; text-align:left; overflow-wrap:anywhere; }
.cowork-answer th { background:#eee; }
.cowork-footer { flex:none; padding:3px 8px; border-top:1px solid #ebebeb; color:#616161; font-size:11px; text-align:center; }
@container (max-width:600px) {
  .cowork-rail { flex-basis:60px; gap:10px; padding:8px 2px; }
  .sample-cowork .cowork-rail button { font-size:10px; }
  .cowork-bar { height:36px; padding:0 12px; }
  .cowork-page { padding:0 12px 8px; font-size:12px; }
  .cowork-greeting { margin-top:4px !important; font-size:17px; }
  .cowork-box { padding:10px 12px; border-radius:16px; }
  .sample-cowork textarea { font-size:12px; }
  .cowork-card { padding:16px; }
  .cowork-card h2 { font-size:17px; }
  .cowork-dialog { padding:14px; }
  .cowork-answer h3, .cowork-answer h4, .cowork-trail { font-size:12px; }
}
@media (max-width:600px) {
  .desktop-stage .edge:has(.sample-cowork) > .tbar { display:none; }
}