/* The 30-second scene (HANDOFF §7), drawn from proof-c/scene.html and tool-refresh/ (the refreshed tool). Loaded by home and /demo/ only.
   Markup: partials/scene/*.html, written by scripts/scene-gen.mjs. No style="" attribute anywhere (CSP style-src 'self'): every position is a class here.
   Vocabularies, kept apart on purpose:
   .sc-cam / .bw-*  the camera and a neutral browser window      .h-*  the staged host site "Pine Street Plants" (invented; its palette is deliberately not ours, scoped as --h-*)
   .gb-*            the tool, in the tool's own token names and values (packages/capture/src/tokens.css + tool-refresh), scoped to .gb
   .dst / .bus / .ibx  the destinations and the inbox row (wp-admin's palette, scoped as --wp-*)
   The clock, the pointer and the controls (assets/scene.js, HANDOFF section 7) drive the same markup: the block at the end of this file is theirs. Without the script, and before the stage is near, the page shows the poster (scene-05) and nothing is blank. */

/* camera: the browser window; two gentle zooms and one recede, nothing else */
.sc-cam{--bw-bar:#E9ECF2;--bw-line:#D3D8E2;--bw-dot:#C3C9D6;--bw-text:#4A5468;position:absolute;left:0;top:0;width:var(--stage-w);height:var(--stage-h);transform-origin:0 0;background:var(--surface);overflow:hidden}
.sc-cam.far{transform:translate(24px,263px) scale(.27);border-radius:28px;opacity:.72}
.bw-bar{display:flex;align-items:center;gap:16px;height:40px;padding:0 16px;background:var(--bw-bar);border-bottom:1px solid var(--bw-line)}
.bw-dots{display:flex;gap:7px}.bw-dots i{width:11px;height:11px;border-radius:50%;background:var(--bw-dot)}
.bw-addr{flex:1;max-width:520px;margin:0 auto;height:26px;border-radius:13px;background:var(--surface);display:flex;align-items:center;justify-content:center;font:400 12px/1 var(--mono);color:var(--bw-text);letter-spacing:0}
.bw-vp{position:relative;height:680px;overflow:hidden}
.bw-sp{width:47px}

/* the staged host site: invented, .example address, "Demo price" on every card. Palette and faces are not ours. */
.h,.mini{--h-paper:#F6F1E7;--h-ink:#1F2A22;--h-clay:#B8502F;--h-rule:#DDD5C3;--h-muted:#5A635C;--h-serif:Georgia,"Times New Roman",serif;--h-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--h-fs-s:14px;--h-fs-m:16px}
.h{position:absolute;inset:0;background:var(--h-paper);color:var(--h-ink);font:400 15px/1.5 var(--h-sans);padding:0 120px}
.h-top{display:flex;align-items:center;justify-content:space-between;height:72px;border-bottom:1px solid var(--h-rule)}
.h-logo{font:700 22px/1 var(--h-serif);letter-spacing:-.01em}
.h-nav{display:flex;gap:28px;font-size:var(--h-fs-s)}
.h-nav b{font-weight:600;border-bottom:2px solid var(--h-clay);padding-bottom:3px}
.h-eb{margin-top:34px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--h-muted)}
.h .h1{font:400 44px/1.1 var(--h-serif);letter-spacing:-.02em;margin-top:6px}
.h-cards{display:grid;grid-template-columns:repeat(3,320px);gap:40px;position:absolute;left:120px;top:232px}
.h-ph{display:block;width:320px;height:232px;border-radius:6px}
.h-card b{display:block;margin-top:16px;font:400 18px/24px var(--h-serif)}
.h-card span{display:block;margin-top:6px;font-size:var(--h-fs-s);line-height:20px;color:var(--h-muted)}
.h-btn{display:block;margin-top:14px;height:40px;width:148px;padding:0 20px;border-radius:4px;background:var(--h-ink);color:var(--h-paper);font:600 14px/40px var(--h-sans);white-space:nowrap;text-align:center}
.h-btn.bug{width:96px;overflow:hidden;text-align:left}

/* the page thumbnail: one drawn miniature of the shop page, sized by a class (--k = scale against the 1280 by 680 host) */
.mini{--h-a:#E6DDC9;--h-b:#D7E0D1;--h-c:#EBD9CC;--k:.188;position:relative;display:block;overflow:hidden;flex:none;width:calc(1280px * var(--k));height:calc(680px * var(--k));background:var(--h-paper)}
.mini i{position:absolute;display:block}
.m-h{left:calc(120px * var(--k));top:calc(26px * var(--k));width:calc(190px * var(--k));height:calc(22px * var(--k));background:var(--h-ink)}
.m-t{left:calc(120px * var(--k));top:calc(130px * var(--k));width:calc(400px * var(--k));height:calc(40px * var(--k));background:var(--h-ink)}
.m-c{top:calc(232px * var(--k));width:calc(320px * var(--k));height:calc(232px * var(--k))}
.m-c.a{left:calc(120px * var(--k));background:var(--h-a)}.m-c.b{left:calc(480px * var(--k));background:var(--h-b)}.m-c.c{left:calc(840px * var(--k));background:var(--h-c)}
.m-c::before,.m-c::after{content:"";position:absolute;left:0;background:var(--h-muted)}
.m-c::before{top:calc(250px * var(--k));width:calc(220px * var(--k));height:calc(16px * var(--k))}
.m-c::after{top:calc(312px * var(--k));width:calc(148px * var(--k));height:calc(40px * var(--k));background:var(--h-ink)}
.m-c.b::after{width:calc(96px * var(--k))}
.mini .gb-shot-area{left:calc(468px * var(--k));top:calc(532px * var(--k));width:calc(128px * var(--k));height:calc(64px * var(--k));border-width:1px}
.mk-tool{--k:.188}.mk-tool .gb-shot-area{border-width:2px}
.mk-proof{--k:.0719}.mk-mail{--k:.234}.mk-chat{--k:.1625}.mk-inbox{--k:.1375}
.mini.pp{--k:.174;width:calc(390px * var(--k));height:calc(740px * var(--k))}
.pp .m-h{left:calc(16px * var(--k));top:calc(17px * var(--k))}
.pp .m-t{left:calc(16px * var(--k));top:calc(100px * var(--k));width:calc(210px * var(--k));height:calc(30px * var(--k))}
.pp .m-c{left:calc(16px * var(--k));top:calc(153px * var(--k));width:calc(358px * var(--k));height:calc(200px * var(--k))}
.pp .m-c::before{top:calc(216px * var(--k))}.pp .m-c::after{top:calc(280px * var(--k))}
.pp .gb-shot-area{left:calc(8px * var(--k));top:calc(420px * var(--k));width:calc(132px * var(--k));height:calc(66px * var(--k))}

/* the tool: the refreshed tool's own rules (tool-refresh/_src/tool.css, the rules the stills use), values are the shipped tokens + the seven new ones */
.gb{
  --gb-chrome:#152347;--gb-chrome-2:#1E2D55;--gb-chrome-3:#283863;--gb-ink:#B5C7FF;--gb-on-ink:#152347;--gb-ink-deep:#234AC7;
  --gb-text:#F0F3FF;--gb-text-2:#9AA8CC;--gb-line:rgba(255,255,255,.12);--gb-error:#FF8A73;--gb-live:#2fae74;--gb-caution:#f0b44c;
  --gb-ink-tint:rgba(181,199,255,.16);--gb-scrim:rgba(21,35,71,.32);--gb-halo:#fff;
  --gb-shadow:0 8px 24px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08);--gb-shadow-up:0 -8px 24px rgba(0,0,0,.28);
  --gb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;
  --gb-fs-meta:12px;--gb-fs-sub:13px;--gb-fs-ui:14px;--gb-fs-input:16px;--gb-fs-state:20px;
  --gb-sp-1:4px;--gb-sp-2:8px;--gb-sp-3:12px;--gb-sp-4:16px;--gb-sp-6:24px;
  --gb-r-s:4px;--gb-r-m:8px;--gb-r-l:12px;--gb-r-sheet:16px;--gb-r-pill:999px;
  --gb-touch:44px;--gb-btn-h:40px;--gb-chip-btn:32px;--gb-disc:48px;--gb-rail-w:48px;--gb-card-w:320px;--gb-icon-l:24px;
  --gb-t-bar:160ms;--gb-t-panel:180ms;--gb-t-stagger:30ms;--gb-confirm-ms:420ms;--gb-t-draw:360ms;--gb-ease:cubic-bezier(.2,.8,.2,1);
  
  --gb-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --gb-tr-label:.06em;
  --gb-rail-pad:var(--gb-sp-1);
  --gb-cm:8px;
  --gb-ring-15:1.5px;
  --gb-dots:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.4px) 0 0/12px 12px;
  --gb-t-out:120ms;
  position:absolute;inset:0;pointer-events:none;color:var(--gb-text);font:400 var(--gb-fs-ui)/1.4 var(--gb-font);letter-spacing:0}
.gb .i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gb .i.s{width:14px;height:14px}
.gb .i.m{width:16px;height:16px}
.gb-l{font:500 var(--gb-fs-meta)/1 var(--gb-mono);letter-spacing:var(--gb-tr-label);text-transform:uppercase;color:var(--gb-text-2);white-space:nowrap}
.gb-card-h .gb-l{display:inline-flex;align-items:center;gap:var(--gb-sp-2);color:var(--gb-text)}
.gb-card-h .gb-l::before{content:"";width:var(--gb-sp-3);height:var(--gb-ring-15);background:var(--gb-ink)}
.gb-crop{position:relative}
.gb-crop::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;--c:var(--gb-ink);--w:var(--gb-ring-15);--a:var(--gb-cm);
  background:linear-gradient(var(--c),var(--c)) 0 0/var(--a) var(--w),linear-gradient(var(--c),var(--c)) 0 0/var(--w) var(--a),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--a) var(--w),linear-gradient(var(--c),var(--c)) 100% 0/var(--w) var(--a),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--a) var(--w),linear-gradient(var(--c),var(--c)) 0 100%/var(--w) var(--a),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--a) var(--w),linear-gradient(var(--c),var(--c)) 100% 100%/var(--w) var(--a);
  background-repeat:no-repeat}
.gb-dock{position:absolute;right:0;top:var(--y,24px)}
.gb-rail{display:flex;flex-direction:column;align-items:center;width:var(--gb-rail-w);border-radius:var(--gb-r-l) 0 0 var(--gb-r-l);background:var(--gb-chrome);box-shadow:var(--gb-shadow)}
.gb-dock.rest .gb-rail,.mv .gb-rail{transform:translateX(2px) scale(.68);transform-origin:100% 22px}
.gb-mark{position:relative;display:grid;place-items:center;width:var(--gb-rail-w);height:var(--gb-touch);color:var(--gb-ink)}
.gb-mark .bun{height:26px;width:auto}
.gb-tools-in{display:flex;flex-direction:column;align-items:center;gap:var(--gb-sp-1);padding-bottom:var(--gb-rail-pad)}
.gb-tool{position:relative;display:grid;place-items:center;width:var(--gb-btn-h);height:var(--gb-btn-h);border-radius:var(--gb-r-m);color:var(--gb-text)}
.gb-tool.on{background:var(--gb-ink);color:var(--gb-on-ink)}
.gb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--gb-sp-2);height:var(--gb-btn-h);padding:0 var(--gb-sp-4);border-radius:var(--gb-r-pill);background:var(--gb-ink);color:var(--gb-on-ink);font:600 var(--gb-fs-ui)/1 var(--gb-font);white-space:nowrap}
.gb-btn.quiet{background:var(--gb-chrome-3);color:var(--gb-text)}
.gb-btn.text{background:none;color:var(--gb-text);padding:0;text-decoration:underline;text-decoration-color:var(--gb-ink);text-decoration-thickness:var(--gb-ring-15);text-underline-offset:4px}
.gb-chip{display:inline-flex;align-items:center;gap:var(--gb-sp-1);height:var(--gb-chip-btn);padding:0 10px;border-radius:var(--gb-r-pill);background:var(--gb-chrome-3);color:var(--gb-text-2);font:600 var(--gb-fs-sub)/1 var(--gb-font);white-space:nowrap}
.gb-chip .i{display:none;stroke-width:2.25}
.gb .gb-chip .i.s{width:12px;height:12px}
.gb-chip.on{background:var(--gb-ink-tint);color:var(--gb-ink);box-shadow:inset 0 0 0 1px var(--gb-ink)}
.gb-chip.on .i{display:block}
.gb-chip.more{padding:0 var(--gb-sp-2) 0 var(--gb-sp-3);color:var(--gb-text)}
.gb-chip.more .i{display:block;stroke-width:1.75}
.gb-chip.fixed{background:none;padding:0 var(--gb-sp-1) 0 0;color:var(--gb-text);font-weight:600}
.gb-chip.fixed .i{display:block;color:var(--gb-live)}
.gb-chips{display:flex;gap:6px;min-width:0}
.gb-card{position:absolute;right:calc(var(--gb-rail-w) + var(--gb-sp-3));top:var(--cy,24px);display:flex;flex-direction:column;gap:var(--gb-sp-3);width:var(--gb-card-w);padding:var(--gb-sp-4);border-radius:var(--gb-r-l);background:var(--gb-chrome);box-shadow:var(--gb-shadow)}
.gb-sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:var(--gb-sp-3);padding:var(--gb-sp-4);border-radius:var(--gb-r-sheet) var(--gb-r-sheet) 0 0;background:var(--gb-chrome);box-shadow:var(--gb-shadow-up)}
.gb-scrim{position:absolute;inset:0;background:var(--gb-scrim)}
.gb-card-h{display:flex;align-items:center;justify-content:space-between;min-height:var(--gb-chip-btn)}
.gb-card-h b{font:600 var(--gb-fs-ui)/1.4 var(--gb-font)}
.gb-x{display:grid;place-items:center;width:var(--gb-chip-btn);height:var(--gb-chip-btn);margin-right:calc(var(--gb-sp-2) * -1);border-radius:var(--gb-r-m);color:var(--gb-text-2)}
.gb-sheet .gb-x{width:var(--gb-touch);height:var(--gb-touch)}
.gb-shot{display:flex;justify-content:center;align-items:center;height:144px;padding:var(--gb-sp-2);background:var(--gb-dots),var(--gb-chrome-2);overflow:hidden}
.gb-shot-tool{position:absolute;right:var(--gb-sp-2);bottom:var(--gb-sp-2);z-index:3;display:inline-flex;align-items:center;gap:var(--gb-sp-1);height:var(--gb-chip-btn);padding:0 var(--gb-sp-3);border-radius:var(--gb-r-pill);background:var(--gb-chrome);box-shadow:0 0 0 1px var(--gb-line);color:var(--gb-text);font:600 var(--gb-fs-meta)/1 var(--gb-font)}
.gb-shot-x{position:absolute;left:var(--gb-sp-2);bottom:var(--gb-sp-2);z-index:3;display:grid;place-items:center;width:var(--gb-chip-btn);height:var(--gb-chip-btn);border-radius:var(--gb-r-pill);background:var(--gb-chrome);box-shadow:0 0 0 1px var(--gb-line);color:var(--gb-text)}
.gb-sheet .gb-shot-tool,.gb-sheet .gb-shot-x{height:var(--gb-touch)}
.gb-sheet .gb-shot-x{width:var(--gb-touch)}
.gb-rinput{min-height:60px;padding:var(--gb-sp-2) var(--gb-sp-3);border-radius:var(--gb-r-m);background:var(--gb-chrome-2);box-shadow:inset 0 0 0 1px var(--gb-line);color:var(--gb-text);font:400 var(--gb-fs-input)/1.4 var(--gb-font)}
.gb-rinput.focus{box-shadow:inset 0 0 0 2px var(--gb-ink)}
.gb-caret{display:inline-block;width:1.5px;height:19px;margin:0 1px -4px 0;background:var(--gb-text)}
.gb-meta{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.gb-meta>.gb-l:not(:first-child){margin-top:6px}
.gb-for{display:flex;align-items:center;gap:var(--gb-sp-1);min-width:0}
.gb-av{display:grid;place-items:center;flex:none;width:var(--gb-icon-l);height:var(--gb-icon-l);border-radius:var(--gb-r-pill);background:var(--gb-chrome-3);color:var(--gb-text);font:600 10px/1 var(--gb-mono);letter-spacing:0}
.gb-who{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:var(--gb-chip-btn);min-width:var(--gb-chip-btn);padding:0 var(--gb-sp-1);border-radius:var(--gb-r-pill);color:var(--gb-text-2);font:600 var(--gb-fs-sub)/1 var(--gb-font);white-space:nowrap}
.gb-who.any{padding:0 var(--gb-sp-3);background:var(--gb-chrome-3)}
.gb-who.on{flex:0 1 auto;padding:0 var(--gb-sp-3) 0 var(--gb-sp-1);background:var(--gb-ink-tint);color:var(--gb-ink);box-shadow:inset 0 0 0 1px var(--gb-ink);min-width:0;overflow:hidden}
.gb-who.any.on{padding:0 var(--gb-sp-3)}
.gb-who.on .gb-av{background:var(--gb-ink);color:var(--gb-on-ink)}
.gb-who.on span:last-child{overflow:hidden;text-overflow:ellipsis}
.gb-who.more{width:var(--gb-chip-btn);padding:0;color:var(--gb-text)}
.gb-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--gb-sp-3)}
.gb-foot small{display:flex;gap:var(--gb-sp-1);align-items:flex-start;color:var(--gb-text-2);font:400 var(--gb-fs-meta)/1.3 var(--gb-font);max-width:180px}
.gb-foot small .i{margin-top:1px}
.gb-foot .end{display:flex;align-items:center;gap:var(--gb-sp-3);margin-left:auto}
.gb-proof{display:flex;align-items:center;gap:var(--gb-sp-4);margin:0 calc(var(--gb-sp-4) * -1);padding:var(--gb-sp-3) var(--gb-sp-4);background:var(--gb-dots);border-block:1px solid var(--gb-line)}
.gb-proof .gb-shot{position:relative;flex:none;width:104px;height:68px;padding:6px;background:var(--gb-chrome-2);overflow:visible}
.gb-stamp{position:absolute;right:-12px;bottom:-12px;z-index:4;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--gb-r-pill);background:var(--gb-ink);color:var(--gb-on-ink);box-shadow:0 0 0 3px var(--gb-chrome)}
.gb-stamp .i{width:18px;height:18px;stroke-width:2.5}
.gb-state{display:block;font:600 var(--gb-fs-state)/1.2 var(--gb-font);letter-spacing:-.01em}
.gb-forline{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--gb-text-2);font:400 var(--gb-fs-sub)/1 var(--gb-font)}
.gb-forline b{color:var(--gb-text);font-weight:600}
.gb-forline .gb-av{background:var(--gb-ink);color:var(--gb-on-ink)}
.gb-quote{color:var(--gb-text);font:400 var(--gb-fs-ui)/1.4 var(--gb-font);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.gb-ledger{display:flex;flex-direction:column}
.gb-ledger>div{display:flex;align-items:center;justify-content:space-between;gap:var(--gb-sp-3);min-height:34px;padding:6px 0;border-top:1px solid var(--gb-line)}
.gb-ledger>div:last-child{border-bottom:1px solid var(--gb-line)}
.gb-ledger dt{font:600 var(--gb-fs-sub)/1.3 var(--gb-font);color:var(--gb-text)}
.gb-ledger dt span{font-weight:400;color:var(--gb-text-2)}
.gb-ledger dd{display:flex;align-items:center;gap:6px;color:var(--gb-text-2);font:500 var(--gb-fs-meta)/1 var(--gb-mono);letter-spacing:.02em;white-space:nowrap}
.gb-ledger dd .i{width:14px;height:14px;stroke-width:2.25}
.gb-ledger .ok dd .i{color:var(--gb-live)}
.gb-ledger a{color:var(--gb-ink);text-decoration:underline;text-underline-offset:3px}
.gb-ledger p{flex:0 0 100%;color:var(--gb-text-2);font:400 var(--gb-fs-meta)/1.4 var(--gb-font)}

/* what the scene adds to the tool block */
.sc{--mid:340px}
.sc .gb-dock{top:var(--mid);transform:translateY(-50%)}
.sc .gb-card{top:var(--mid);transform:translateY(-50%)}
.sp .gb-dock{top:150px;transform:none}
.gb-shot-area{position:absolute;box-sizing:border-box;border:2px solid var(--gb-ink);background:var(--gb-ink-tint)}
.gb-shot .mini,.gb-proof .mini{flex:none}
.gb-sheet .gb-av{width:28px;height:28px;font-size:var(--gb-fs-meta)}
.gb-sheet .gb-chips,.gb-sheet .gb-for{flex-wrap:wrap}

/* the pointer: drawn, navy with a white edge */
.ptr{position:absolute;width:28px;height:28px;margin:-4px 0 0 -6px;z-index:5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}

/* destinations: our own neutral cards. The service name is a plain text label; no logo, no redrawn interface. */
.dst{--dst-sp:8px;--dst-fs-s:12px;--dst-fs-m:13px;--dst-fs-t:16px;position:absolute;top:120px;width:304px;padding:20px;border-radius:var(--r-l);background:var(--surface);color:var(--ink);font:400 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:0;text-transform:none}
.dst-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--hairline)}
.dst-h b{font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dst-h span{font:400 12px/1 var(--mono);color:var(--ink)}
.dst strong{display:block;font-weight:700}
.dst .t{font-weight:600;font-size:var(--dst-fs-t);line-height:1.35}
.dst p{margin-top:6px}
.dst a{color:var(--action);text-decoration:underline;text-underline-offset:3px}
.dst .mini{margin-top:12px;border-radius:6px;box-shadow:0 0 0 1px var(--hairline)}
.dst small{display:block;margin-top:10px;font-size:var(--dst-fs-s);color:var(--muted)}
.dst dl{margin-top:10px;font-size:var(--dst-fs-m)}
.dst dt{font-weight:700;margin-top:var(--dst-sp)}
.dst dd{color:var(--muted);overflow-wrap:anywhere}
.bus{position:absolute;inset:0;width:1280px;height:720px;overflow:visible}
.bus path{fill:none;stroke:var(--sky);stroke-width:1.5}
.bus rect{fill:var(--band);stroke:var(--sky);stroke-width:2}

/* the inbox row: a wp-admin screen, in WordPress's own greys (admin-tokens.css), scoped here */
.ibx{--wp-ink:#1d2327;--wp-muted:#646970;--wp-line:#dcdcde;--wp-ctl:#c3c4c7;--wp-info:#E1F1F4;--wp-info-ink:#0A5B6B;--wp-fs-s:12px;--wp-fs-m:13px;--wp-fs-ui:14px;--wp-fs-t:17px;--wp-fs-h:20px;--wp-sp-2:8px;
  position:absolute;left:140px;top:150px;width:1000px;background:var(--surface);border-radius:8px;color:var(--wp-ink);font:400 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:0;text-transform:none;overflow:hidden}
.ibx-t{display:flex;align-items:center;gap:20px;padding:14px 24px;border-bottom:1px solid var(--wp-line)}
.ibx-t b{font-size:var(--wp-fs-h);font-weight:600;margin-right:16px}
.ibx-t span{padding:6px 0;color:var(--wp-muted)}.ibx-t span.on{color:var(--wp-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--wp-ink)}
.ibx-p{display:flex;justify-content:space-between;padding:10px 24px;background:var(--canvas);border-bottom:1px solid var(--wp-line)}
.ibx-p u{color:var(--wp-ink)}
.ibx-r{display:grid;grid-template-columns:176px minmax(0,1fr) auto;gap:6px 24px;padding:20px 24px 24px}
.ibx-k{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;color:var(--wp-muted)}
.ibx-bd{display:flex;gap:var(--wp-sp-2)}
.bdg{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font-weight:600;font-size:var(--wp-fs-s);box-shadow:inset 0 0 0 1px var(--wp-ctl);color:var(--wp-ink)}
.bdg.info{box-shadow:none;background:var(--wp-info);color:var(--wp-info-ink)}
.bdg .i{width:13px;height:13px}
.ibx-r .mini{border-radius:2px;box-shadow:0 0 0 1px var(--wp-line)}
.ibx-r .ibx-h{font-size:var(--wp-fs-t);font-weight:400;line-height:1.3;margin:0 0 8px}
.ibx-r p{color:var(--wp-ink);margin-top:2px}.ibx-r p i{color:var(--wp-muted);margin-right:6px}
.ibx-a{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.abtn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--wp-ctl);font-weight:600;font-size:var(--wp-fs-ui)}
.seg{display:inline-flex}.seg span{display:inline-flex;align-items:center;height:34px;padding:0 13px;box-shadow:inset 0 0 0 1px var(--wp-ctl);font-size:var(--wp-fs-m);color:var(--wp-muted)}.seg span+span{margin-left:-1px}
.sc-lab{position:absolute;left:140px;top:112px;color:var(--band-muted)}

.d-mail{left:396px;width:340px}.d-slack{left:760px;width:240px}.d-asana{left:1016px;width:240px}
.dst .t.lg{margin-top:0;font-size:18px;line-height:1.3}
.dst p strong.in{display:inline}
.dst-also{position:absolute;left:760px;top:56px;color:var(--band-muted)}
.dst.hero{box-shadow:0 0 0 var(--line-bold) var(--sky)}
.dst .em-s{font-size:var(--dst-fs-s);color:var(--muted);margin-bottom:10px}
.dst .em-btn2{display:inline-block;margin-top:14px;padding:9px 18px;border-radius:var(--r-full);background:var(--action);color:var(--on-action);font-weight:600;font-size:var(--dst-fs-m)}
.dst.sm{padding:16px;font-size:var(--dst-fs-m)}.dst.sm .t{font-size:var(--fs-small)}.dst.sm dl{font-size:var(--dst-fs-s)}
.ptr.pa{left:600px;top:570px}.ptr.pb{left:820px;top:300px}

/* phone staging: fluid, no scaling, so the tool's text is at its own size at any width (the sheet is the tool's real touch layout) */
.sp .sc-cam{width:100%;height:100%}
.sp .bw-bar{height:36px;padding:0 12px}.sp .bw-vp{height:calc(100% - 36px)}
.sp .h{padding:0 16px}
.sp .h-top{height:56px}.sp .h-logo{font-size:18px}
.sp .h .h1{font-size:30px}.sp .h-eb{margin-top:20px}
.sp .h-cards{position:static;display:block;margin-top:20px}
.sp .h-ph{width:100%;height:200px}

/* ---- the clock (assets/scene.js). Poster = scene-05 without .mv; .mv is the t0 state the timeline starts from. ---- */
.sc-in{position:absolute;inset:0}

.lv .dst,.lv .bus,.lv .dst-also,.lv .sc-lab,.lv .ibx,.gb-flash,.gb-word,.gb-hint,.gb-area,.snt,.gb-tip,.gb-scrim{opacity:0}
.sp .gb-scrim{opacity:1}
.lv .bus path{stroke-dasharray:1;stroke-dashoffset:0}
.lv .sc-end{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--sp-7);padding:0 var(--sp-10);background:var(--band);color:var(--on-band);visibility:hidden;opacity:0}
.sc-end .bun{height:var(--sp-7);width:auto;color:var(--sky)}
.sc-end p{max-width:12em;font:600 var(--scene-end-fs)/var(--lh-heading) var(--display);letter-spacing:var(--tr-display)}
.sp .sc-end{padding:0 var(--sp-5);gap:var(--sp-5)}
.sp .sc-end p{font-size:var(--fs-title)}
.mk,.gb-btn .sg,.gb-rinput .phx,.ptr-x,.ptr-t{display:none}
.gb-btn.dim{background:var(--gb-chrome-3);color:var(--gb-text-2)}
.gb-btn.sd .sg{display:inline}.gb-btn.sd b:first-child{display:none}
.gb-rinput.ph .phx{display:inline;color:var(--gb-text-2)}
.gb-area{left:468px;top:532px;width:0;height:0}
.gb-flash{position:absolute;inset:0;box-shadow:inset 0 0 0 var(--gb-sp-1) var(--gb-ink)}
.gb-word{position:absolute;right:calc(var(--gb-rail-w) + var(--gb-sp-3));top:var(--gb-sp-6);padding:var(--gb-sp-2) var(--gb-sp-3);border-radius:var(--gb-r-pill);background:var(--gb-chrome);box-shadow:var(--gb-shadow);color:var(--gb-text);font:600 var(--gb-fs-sub)/1 var(--gb-font)}
.gb-hint{position:absolute;left:50%;bottom:var(--gb-sp-6);translate:-50% 0;display:flex;align-items:center;gap:var(--gb-sp-3);padding:var(--gb-sp-2) var(--gb-sp-3);border-radius:var(--gb-r-m);background:var(--gb-chrome);box-shadow:var(--gb-shadow);color:var(--gb-text);font:600 var(--gb-fs-sub)/1.4 var(--gb-font);white-space:nowrap}
.gb-hint small{color:var(--gb-text-2);font:500 var(--gb-fs-meta)/1 var(--gb-mono)}
.sp .gb-word{right:auto;left:50%;translate:-50% 0;top:var(--gb-sp-4)}
.sp .gb-hint{white-space:normal;width:max-content;max-width:calc(100% - var(--gb-sp-6))}
/* the first-run labels (tool-refresh tool.css) */
.gb-tip{position:absolute;right:calc(100% + var(--gb-rail-pad) + var(--gb-sp-4));top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--gb-sp-2);padding:var(--gb-sp-1) var(--gb-sp-2);border-radius:var(--gb-r-m);background:var(--gb-chrome);box-shadow:var(--gb-shadow);color:var(--gb-text);font:600 var(--gb-fs-meta)/1.4 var(--gb-font);white-space:nowrap}
.gb-tip::after{content:"";position:absolute;left:100%;top:50%;width:var(--gb-sp-4);height:var(--gb-ring-15);margin-top:calc(var(--gb-ring-15) / -2);background:var(--gb-ink)}
.gb-tip span{font-weight:400;color:var(--gb-text-2)}
.gb-tip kbd{padding:1px var(--gb-sp-1);border:1px solid var(--gb-line);border-radius:var(--gb-r-s);color:var(--gb-text-2);font:500 var(--fs-mono-s)/1.4 var(--gb-mono)}
/* the pointer group: arrow, cross while dragging, touch dot on the phone, and the press ring */
.pg{position:absolute;left:820px;top:300px;z-index:5;pointer-events:none}
.ptr-x{width:var(--sp-5);height:var(--sp-5);margin:calc(var(--sp-5) / -2) 0 0 calc(var(--sp-5) / -2)}
.ptr-x::before,.ptr-x::after{content:"";position:absolute;background:var(--surface);box-shadow:0 0 0 var(--line) var(--ink)}
.ptr-x::before{left:calc(50% - var(--line-bold) / 2);top:0;width:var(--line-bold);height:100%}
.ptr-x::after{top:calc(50% - var(--line-bold) / 2);left:0;height:var(--line-bold);width:100%}
.pg.x .ptr{display:none}.pg.x .ptr-x{display:block}
.ptr-t{width:var(--sp-5);height:var(--sp-5);margin:calc(var(--sp-5) / -2) 0 0 calc(var(--sp-5) / -2);border-radius:50%;background:var(--ink-soft);box-shadow:0 0 0 var(--line-mark) var(--surface)}
.sp .pg .ptr,.sp .pg.x .ptr-x{display:none}.sp .pg .ptr-t{display:block}
.pg .ring{position:absolute;left:0;top:0;width:var(--pin);height:var(--pin);margin:calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);border:var(--line-bold) solid var(--action);border-radius:50%;opacity:0}
/* t0 */
.mv .pg{left:0;top:0;opacity:0}
.mv .sc:not(.sp) .gb-dock{top:calc(var(--mid) - var(--gb-touch) / 2);transform:none}
.mv .gb-rail{clip-path:inset(-24px -24px 66% -400px)}
.mv .gb-tool{opacity:0}
.mv .gb-tool.on{background:none;color:var(--gb-text)}
.mv .gb-tool.on.sel{background:var(--gb-ink);color:var(--gb-on-ink)}
.mv .cmp,.mv .gb-scrim{opacity:0}
.sc.sp .gb-dock{opacity:0}.mv .sc.sp .gb-dock{opacity:1}
.mv .cmp:not(.ar) .mini .gb-shot-area,.mv .cmp:not(.ar) .clr,.mv .cmp.ar .mk{display:none}
.mv .cmp:not(.ar) .mk{display:inline-flex}
.mv .bus path{stroke-dashoffset:1}
/* phone: the three destinations stacked under the shrunken page, the inbox row compact */
.sp .sc-cam.far{transform:translate(33.333%,var(--sp-4)) scale(.3333)}
.pds{position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.pd{position:static;width:auto;padding:var(--sp-3)}
.pd .dst-h{padding-bottom:var(--sp-2);margin-bottom:var(--sp-2)}
.pd p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.sp .sc-lab{left:var(--sp-4);top:var(--sp-5)}
.sp .ibx{left:var(--sp-4);right:var(--sp-4);top:var(--sp-8);width:auto}
.sp .ibx-t{flex-wrap:wrap;gap:var(--sp-3);padding:var(--sp-3)}
.sp .ibx-t span:not(.on){display:none}
.sp .ibx-p{padding:var(--sp-2) var(--sp-3)}
.sp .ibx-r{grid-template-columns:minmax(0,1fr);padding:var(--sp-3)}
.sp .ibx-k{flex-wrap:wrap;gap:var(--sp-2)}
.sp .ibx-r .mini{display:none}
.sp .ibx-a{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3)}

/* controls: caption with its number, eight-segment progress, pause/play and replay, chapters (demo) */
.sc-bar{display:flex;align-items:center;gap:var(--sp-4) var(--sp-5)}
.sc-bar .sc-cap{flex:1 1 0;min-width:0;display:flex;gap:var(--sp-3);min-height:calc(var(--lh-body) * 1em)}
.sc-n{color:var(--sky)}
.sc-prog{display:flex;gap:var(--sp-1);width:var(--sp-10)}
.sc-prog li{flex:1;height:var(--bar);background:var(--line-inv)}
.sc-prog li::after{content:"";display:block;height:100%;background:var(--sky);transform:scaleX(var(--p,0));transform-origin:0 50%}
.sc-ctl{display:flex;gap:var(--sp-2)}
.sc-ctl[hidden],.sc-chap[hidden]{display:none}
.sc-b{min-width:var(--hit);height:var(--hit);padding:0 var(--sp-4);border:0;border-radius:var(--r-full);background:var(--band-raised);color:var(--on-band);font:600 var(--fs-small)/var(--lh-tight) var(--display);cursor:pointer}
.sc-b:hover{box-shadow:inset 0 0 0 var(--line) var(--line-inv-hover)}
.sc-b:disabled{color:var(--band-muted);cursor:default;box-shadow:none}
.sc-chap ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-5)}
.sc-chap button{display:flex;gap:var(--sp-3);align-items:baseline;width:100%;min-height:var(--hit);padding:var(--sp-2) 0;border:0;border-top:var(--line) solid var(--line-inv);background:none;color:var(--band-muted);font:500 var(--fs-small)/var(--lh-small) var(--display);text-align:left;cursor:pointer}
.sc-chap button[aria-current=true]{color:var(--on-band);border-top-color:var(--sky)}
.sc-chap .mono{font-size:var(--fs-mono-s)}
.rec .sc-bar,.rec .sc-chap{display:none}
@media (max-width:860px){.sc-chap ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sc-chap ol{grid-template-columns:minmax(0,1fr)}}

/* fix round: who is chosen, no pointer in the no-JS poster, the demo scene fits under the header, steady controls */
.gb-who:not(.on)>span:not(.gb-av){display:none}
.gb-who.any.on.off{background:var(--gb-chrome-3);color:var(--gb-text-2);box-shadow:none}
.lv:not(.mv) .pg{display:none}
.lv{scroll-margin-top:calc(var(--header-h) + var(--sp-5))}
.sc-b[data-a=p]{min-width:calc(var(--sp-8) + var(--sp-3))}
@container scene (min-width:900px){
  .demo-scene .scene.lv,.demo-scene .sc-chap{max-width:calc((100svh - var(--header-h) - var(--sp-5) - var(--sp-6) - var(--hit) - var(--sp-5) - var(--hit) * 2 - var(--sp-2) - var(--sp-7)) * 16 / 9);margin-inline:auto}
}
/* phone: the caption has its own row, three lines tall at most (the longest wraps to three), so nothing below it moves from beat to beat */
@media (max-width:520px){
  .sc-bar{flex-wrap:wrap}
  .sc-bar .sc-cap{flex-basis:100%;min-height:calc(var(--fs-eyebrow) * var(--lh-body) * 3)}
  .sc-prog{flex:1}
  .sc-ctl{margin-left:auto}
}