/* Isolated demo UI, sized by the browser window rather than the outer viewport. */
.product-page .hero-demo{--demo-bg:#faf9f6;--demo-raised:#fff;--demo-chrome:#e9e8e5;--demo-ink:#182327;--demo-muted:#5c6668;--demo-line:#dcdedb;--demo-accent:#8c510f;--demo-button:#182327;--demo-button-ink:#fff;--demo-selected:#ffbd7626}
.product-page .demo-browser{container-type:inline-size;font-family:Archivo,Arial,sans-serif;font-size:14px;line-height:1.45}
.product-page .demo-browser *{box-sizing:border-box}
.product-page .demo-stage{display:block;min-height:670px;height:670px;background:var(--demo-bg)}
.product-page .demo-scene{display:none;position:absolute;inset:0;opacity:1;visibility:visible;transform:none;transition:none;overflow:hidden}
.product-page [data-scene="0"] .demo-install,.product-page [data-scene="4"] .demo-pr{display:block}
.product-page [data-scene="1"] .demo-connect,.product-page [data-scene="2"] .demo-workspace,.product-page [data-scene="3"] .demo-workspace{display:grid}
.product-page .demo-tabbar{height:32px;font-size:11px}.product-page .demo-tab{width:220px;padding:6px 10px}.product-page .demo-chrome{height:42px;gap:12px}.product-page .demo-address{font-size:11px;border-radius:20px;background:#f6f6f4}.product-page .demo-mark{width:20px;height:17px}
/* Checkout: consistent catalog, order, payment and final action. */
.product-page .demo-workspace{grid-template-columns:minmax(0,1.35fr) minmax(290px,1fr)}
.product-page .demo-app{padding:0 24px;background:#faf9f6;display:flex;flex-direction:column}
.product-page .store-header{height:70px;flex-shrink:0}.product-page .store-brand{font-size:16px;font-weight:600;letter-spacing:.08em;line-height:1.3}.store-brand small{display:block;font-size:8px;font-weight:400;letter-spacing:.12em;margin-top:4px;color:var(--demo-muted)}
.product-page .store-header .store-nav{display:block;font-size:10px;white-space:nowrap}.store-nav b{border-radius:50%;padding:2px 5px;background:#ecece6;font-weight:400}
.product-page .checkout{max-width:470px;margin:18px auto 14px;width:100%}.checkout-heading{display:flex;justify-content:space-between;gap:12px}.store-secure{font-size:10px;color:var(--demo-muted)}
.product-page .checkout h3{font-size:24px;font-weight:500;margin:12px 0 4px;letter-spacing:-.04em}.product-page .store-intro{font-size:11px;color:var(--demo-muted);margin:0 0 14px}
.product-page .order-row{display:flex;align-items:center;gap:13px;margin:0;padding:10px 0;border-top:1px solid #e2e3df;font-size:12px}
.order-row img{width:66px;height:76px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#eeeae2}.order-product{flex:1;min-width:0}.order-product strong{font-size:12px;font-weight:500;display:block}.product-page .order-row small{font-size:10px;margin-top:4px}.item-quantity{display:block;font-size:10px;color:var(--demo-muted);margin-top:7px}.item-price{font-size:12px;font-weight:500;align-self:flex-start;margin-top:6px;white-space:nowrap}
.checkout-delivery{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e2e3df;padding:12px 0;font-size:11px}.checkout-delivery strong{font-weight:500}.checkout-delivery small{display:block;font-size:10px;color:var(--demo-muted);margin-top:3px}
.product-page .payment-method{margin-top:0}.product-page .payment-method>span{font-size:10px;margin-bottom:4px}.product-page .payment-method .mock-field{font-family:Archivo,Arial,sans-serif;font-size:11px;padding:9px 10px;background:#fff}.payment-method b{font-size:9px;letter-spacing:.04em;margin-right:9px}
.product-page .order-total{margin-top:12px;padding-top:10px;font-size:12px}.order-total small{display:block;font-size:9px;color:var(--demo-muted);margin-top:2px}.product-page .order-total>span:last-child{font-size:20px;font-weight:500}
.product-page .checkout-target{margin-top:16px;padding:3px}.product-page .mock-pay{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:#182327;color:#fff;font-size:12px;font-weight:500}.product-page [data-updated="true"] .mock-pay{background:#182327;color:#fff}.product-page .checkout-secure{font-size:9px;margin-top:6px}.product-page .target-label{font-size:10px;line-height:1.3;white-space:nowrap;top:-17px;background:#fff6e9;color:#8c510f}
.product-page .preview-bar{position:relative;margin:auto -24px 0;padding:8px 12px;font-size:10px;background:#f1f2ef}.product-page .preview-status,.product-page .preview-revision{font-size:9px}
/* Extension pane has its own inset, header, transcript and anchored composer. */
.product-page .demo-sidebar{padding:0 16px 16px;border-left:1px solid var(--demo-line);display:flex;flex-direction:column;background:#fff;min-height:0;overflow:hidden}
.product-page .sidebar-title{padding:16px 0;min-height:70px;font-size:15px;font-weight:500;flex-shrink:0}.product-page .sidebar-title small{font:10px/1.5 var(--mono);margin-top:5px}.connection-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#5b7863;margin-right:4px}.product-page .sidebar-settings{display:block;font-size:20px}
.product-page .chat-thread{padding:18px 0;min-height:0;flex:1;overflow:auto;scrollbar-width:thin}.product-page .chat-message{font-size:12px;line-height:1.65}.product-page .chat-user{padding:12px;background:#f4f3ed;border:1px solid #e4e3de;border-radius:10px 10px 3px 10px}.product-page .chat-agent{padding:18px 2px}.product-page .agent-label{font:9px/1.4 var(--mono);letter-spacing:.08em;color:var(--demo-muted);margin-bottom:8px}.product-page .selection-attachment{font-size:10px;line-height:1.4}.product-page .selection-attachment small{font-size:9px}.product-page .change-result{font-size:10px;padding:10px;background:#fafbf8}.product-page .change-result>span{color:#456249}.product-page .agent-working{font-size:11px;padding-top:20px}
.product-page .demo-composer{min-height:106px;margin-top:0;padding:12px;border-radius:10px;background:#fafaf8;border:1px solid #d7dad5}.product-page .composer-input{min-height:38px;font-size:11px}.product-page .composer-toolbar{gap:10px;font-size:10px}.product-page .composer-attachment{font-size:10px}.product-page .composer-send{width:25px;height:25px;font-size:16px}.product-page .select-tool{font-size:17px}.product-page .model-picker{display:block}
/* Plausible extension install and repository pairing. */
.product-page .demo-install{padding:32px}.product-page .extensions-heading h3{font-size:24px}.product-page .extensions-heading>span{font-size:11px}.product-page .extensions-tools{font-size:11px;gap:12px}.product-page .mock-outline{font-size:11px;padding:7px 12px}.product-page .extension-card{top:170px;padding:24px;max-width:490px;background:#fff;box-shadow:0 4px 16px #18232708}.product-page .extension-card p{font-size:12px}.product-page .extension-card h3{font-size:16px}.product-page .extension-card h3 small{font-size:10px}.product-page .install-success{bottom:90px;font-size:12px}.product-page .folder-picker{background:#fff;font-size:12px}
.product-page .demo-connect{grid-template-columns:1.1fr 1fr}.product-page .pane-heading{font-size:12px;padding:20px}.product-page .repo-files{font-size:12px;padding:20px 12px}.product-page .repo-terminal{font-size:11px;padding:20px}.product-page .terminal-heading,.product-page .terminal-endpoint{font-size:10px}.product-page .pairing-pane{padding:36px 26px;align-self:center}.product-page .pairing-pane h3{font-size:28px}.product-page .pairing-pane label{font-size:11px}.product-page .pairing-pane .mock-field{font-size:11px;background:#fff}.product-page .pairing-help{font-size:11px}.product-page .demo-kicker{font-size:10px}.product-page .connect-action{font-size:12px}
/* Review has an explicit scope and one matching diff. */
.product-page .demo-pr{padding:28px;background:#fff}.product-page .pr-repo-header{font-size:12px}.product-page .pr-heading h3{font-size:24px}.pr-eyebrow{display:block;font:9px var(--mono);color:var(--demo-muted);margin-bottom:9px}.product-page .pr-heading p{font-size:10px}.pr-context-note{font-size:12px;line-height:1.65;color:var(--demo-muted);max-width:600px;margin-bottom:24px}.product-page .pr-tabs{font-size:11px;margin-bottom:18px}.product-page .pr-code{font-size:11px;line-height:2.3}.product-page .pr-file{font-size:10px}.product-page .pr-footer{margin-top:24px}.product-page .pr-checks{font-size:11px}.product-page .pr-checks small{font-size:10px}.product-page .pr-action{font-size:11px;min-width:180px}.product-page .pr-badge{font-size:10px}
.product-page .workflow-hero .hero-demo>.demo-controls-wrap{margin:26px 0 0;padding:0}
.product-page .workflow-hero .hero-demo>.demo-controls-wrap .demo-controls button{padding:15px 0 0;min-height:40px;font-size:13px;text-align:center}
.product-page .workflow-hero .hero-demo>.demo-controls-wrap .demo-controls button:after,.product-page .workflow-hero .hero-demo>.demo-controls-wrap .demo-controls i{top:0;bottom:auto}
/* Stack the storefront and extension when the rendered browser is narrow. */
@container(max-width:650px){
 .product-page .demo-stage{height:1170px;min-height:1170px}
 .product-page .demo-workspace{grid-template-columns:1fr;grid-template-rows:680px 490px}
 .product-page .demo-app{padding:0 18px}.product-page .checkout{max-width:470px;margin-top:16px}.product-page .store-header{height:60px}.product-page .store-header .store-nav{display:block;font-size:9px}.product-page .store-brand{font-size:14px}.product-page .preview-bar{margin-left:-18px;margin-right:-18px}
 .product-page .demo-sidebar{border-left:0;border-top:1px solid var(--demo-line);padding:0 16px 14px}.product-page .sidebar-title{min-height:58px;padding:10px 0}.product-page .chat-thread{padding:12px 0}.product-page .demo-composer{min-height:100px}.product-page .demo-tab{width:190px}
 .product-page .demo-connect{grid-template-columns:1fr;grid-template-rows:500px 640px}.product-page .repo-pane{border-right:0;border-bottom:1px solid var(--demo-line)}.product-page .pairing-pane{padding:32px;align-self:start}.product-page .demo-install{padding:24px 18px}.product-page .extensions-tools{gap:8px;flex-wrap:wrap}.product-page .extensions-heading>span{font-size:10px}.product-page .extensions-heading h3{font-size:20px}.product-page .extension-card{width:calc(100% - 36px);padding:18px;grid-template-columns:34px 1fr}.product-page .install-mark{width:34px}.product-page .install-success{top:450px;bottom:auto}.product-page .demo-pr{padding:24px 16px}.product-page .pr-heading h3{font-size:21px}.product-page .pr-tabs{gap:14px}.product-page .pr-footer{flex-direction:column;align-items:stretch}.product-page .pr-code code{white-space:pre-wrap;overflow-wrap:anywhere}.product-page .pr-code>div:not(.pr-file){gap:7px}.product-page .pr-code>div>span:first-child:not(:last-child){width:26px}.product-page .pr-heading p{flex-wrap:wrap}
}
.product-page .folder-picker{display:none;transition:none}
.product-page [data-scene="0"][data-beat="1"] .folder-picker{display:block}
.product-page .extension-card{transition:none}
.product-page [data-scene="4"]:not([data-beat="2"]) .pr-heading h3>span{visibility:hidden}
/* Short mobile scenes do not inherit the stacked checkout/transcript height. */
@container(max-width:650px){
 .product-page [data-scene="0"] .demo-stage{height:610px;min-height:610px}
 .product-page [data-scene="4"] .demo-stage{height:660px;min-height:660px}
 .product-page [data-scene="1"] .demo-stage{height:860px;min-height:860px}
 .product-page .demo-connect{grid-template-rows:420px 440px}
}
/* Compact composer: input above a bottom-aligned tool row. */
.product-page .demo-composer{min-height:0;height:auto;display:flex;flex-direction:column;gap:10px;padding:10px}
.product-page .composer-input{min-height:28px;line-height:1.5;flex:none}
.product-page .composer-toolbar{display:flex;align-items:center;gap:10px;min-height:28px;margin-top:auto;flex:none;line-height:1}
.product-page .composer-toolbar>span{flex-shrink:0}
.product-page .composer-toolbar .select-tool{display:grid;place-items:center;width:24px;height:24px;line-height:1}
.product-page .composer-toolbar .composer-send{display:grid;place-items:center;width:28px;height:28px;min-width:28px;max-width:28px;padding:0;margin-left:auto;line-height:0;flex:0 0 28px;border-radius:5px}
.product-page .composer-send svg{display:block;width:16px;height:16px;max-width:none;flex:none;transform:none}
.product-page .composer-attachment{margin-bottom:0;padding:5px 7px}

/* Familiar installed utilities give the extension setup scene context. */
.hero-frame .existing-extension,.hero-frame .extension-card{position:absolute;top:170px;width:calc((100% - 96px)/3);padding:20px;min-height:186px;display:grid;grid-template-columns:40px 1fr;gap:16px 12px;border:1px solid var(--demo-line);border-radius:8px;background:#fff}
.hero-frame .existing-translate{left:32px}.hero-frame .existing-acrobat{left:calc(32px + (100% - 96px)/3 + 16px)}
.hero-frame .extension-card{left:calc(32px + 2*((100% - 96px)/3 + 16px));max-width:none;transform:none}
.hero-frame [data-scene="0"][data-beat="2"] .extension-card{transform:none}
.hero-frame .existing-extension h3{font-size:16px;letter-spacing:0;margin:0 0 8px}
.hero-frame .existing-extension p{font-size:12px;line-height:1.6;color:var(--demo-muted)}
.hero-frame .extension-placeholder-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:6px;background:#f0f2f4;color:#566579;font-size:14px}
.hero-frame .existing-acrobat .extension-placeholder-icon{background:#fbefee;color:#a7473e;font-size:11px}
.hero-frame .folder-picker{position:relative;z-index:3;box-shadow:0 12px 40px #0002}

.hero-frame .existing-grammarly{left:calc(32px + 2*((100% - 96px)/3 + 16px))}
.hero-frame .existing-onepassword{left:32px;top:376px}
.hero-frame .extension-card{top:376px}
.hero-frame .install-success{bottom:36px}

.hero-frame .extension-card{left:calc(32px + (100% - 96px)/3 + 16px)}

/* Connect starts in the same app, with a terminal above the browser content. */
.hero-frame [data-scene="1"] .demo-workspace{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-frame [data-scene="1"] .demo-app{width:calc(100% - 30% * var(--connect-sidebar,0))}
.hero-frame [data-scene="1"] .demo-sidebar{position:absolute;inset:0 0 0 auto;width:30%;transform:translateX(calc(100% * (1 - var(--connect-sidebar,0))));opacity:var(--connect-sidebar,0)}
.hero-frame [data-scene="1"] .chat-thread{visibility:hidden}
.connect-terminal{display:none;position:absolute;z-index:6;left:16%;top:100px;width:560px;background:#172126;color:#f5f5f1;border:1px solid #ffffff30;border-radius:10px;box-shadow:0 24px 65px #0006;overflow:hidden;pointer-events:none}
.hero-frame [data-scene="1"] .connect-terminal{display:block;opacity:var(--terminal-opacity,0);transform:translateY(calc((1 - var(--terminal-opacity,0))*12px))}
.connect-terminal-title{position:relative;text-align:center;padding:12px;background:#263137;font-size:12px;border-bottom:1px solid #ffffff15}
.connect-terminal-title>span{position:absolute;left:14px;color:#b7bebb;letter-spacing:4px;font-size:10px}
.connect-terminal-body{padding:24px;min-height:240px;font:14px/1.9 var(--mono)}
.terminal-prompt{color:#ffbd76}.connect-terminal-result,.connect-launch-result{color:#a8b7ae;font-size:12px;margin-top:12px}
.connect-launch{margin-top:20px}.connect-terminal-result,.connect-launch,.connect-launch-result{visibility:hidden}
[data-scene="1"][data-beat="2"] .connect-terminal-result,[data-scene="1"][data-beat="3"] .connect-terminal-result,[data-scene="1"][data-beat="4"] .connect-terminal-result{visibility:visible}
[data-scene="1"][data-beat="3"] .connect-launch,[data-scene="1"][data-beat="4"] .connect-launch,[data-scene="1"][data-beat="4"] .connect-launch-result{visibility:visible}

/* macOS folder chooser shown by Chrome's Load unpacked action. */
.hero-frame .finder-picker{position:absolute;top:65px;left:50%;transform:translateX(-50%);z-index:8;width:740px;max-width:none;margin:0;padding:0;border:1px solid #b5b5b5;border-radius:10px;background:#fff;color:#292929;font:13px/1.4 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;overflow:hidden;box-shadow:0 26px 80px #0005,0 2px 10px #0002}
.finder-toolbar{height:64px;display:flex;align-items:center;gap:18px;padding:0 20px;background:linear-gradient(#f6f6f6,#ededed);border-bottom:1px solid #d2d2d2}
.finder-history{font-size:25px;color:#898989}.finder-location{display:flex;align-items:center;justify-content:space-between;width:280px;margin:auto;border:1px solid #cecece;border-radius:5px;padding:5px 10px;background:#fff;box-shadow:0 1px 2px #0001}.finder-location>span{font-size:10px;color:#777}.finder-search{border:1px solid #d5d5d5;border-radius:5px;color:#888;width:135px;padding:5px 9px;background:#fff}
.finder-main{display:grid;grid-template-columns:165px 1fr;height:280px}.finder-sidebar{background:#f0f0f0;border-right:1px solid #ddd;padding:12px 8px}.finder-sidebar>span{display:block;padding:6px 10px;border-radius:5px;white-space:nowrap}.finder-sidebar .finder-heading{font-size:11px;font-weight:600;color:#888;padding:8px 10px 4px}.finder-sidebar-selected{background:#dcdcdc}.finder-files{background:#fff}.finder-columns,.finder-file{display:grid;grid-template-columns:1fr 130px;gap:12px;padding:5px 12px}.finder-columns{font-size:11px;color:#737373;border-bottom:1px solid #ddd;background:#fafafa}.finder-file{margin:2px 6px;border-radius:4px}.finder-file.selected{background:#0969da;color:white}.finder-file.muted>span:last-child{color:#888}.finder-footer{background:#f5f5f5;border-top:1px solid #ddd;padding:10px 16px 14px}.finder-path{font-size:11px;text-align:center;color:#666;padding:0 0 13px}.finder-actions{display:flex;align-items:center;gap:10px}.finder-help{margin-right:auto;border:1px solid #ccc;width:20px;height:20px;text-align:center;border-radius:50%;background:#fff}.finder-cancel,.finder-select{padding:4px 22px;border:1px solid #ccc;border-radius:5px;background:#fff;box-shadow:0 1px 2px #0001}.finder-select{background:linear-gradient(#2889ff,#0674ed);border-color:#0674ed;color:#fff}

/* Consistent desktop chrome: 12px controls within a 36px title bar. */
.hero-frame .demo-tabbar{height:36px;padding:0 14px;gap:22px;background:linear-gradient(#efefed,#e6e6e4);border-bottom:1px solid #d8d9d6;font:12px/1.2 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}
.hero-frame .demo-dots,.window-traffic-lights{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hero-frame .demo-dots i,.window-traffic-lights i{display:block;width:12px;height:12px;border-radius:50%;opacity:1;background:#b7b9b7;box-shadow:inset 0 0 0 1px #0000000d;flex:0 0 12px}
.hero-frame .demo-dots i:nth-child(1),.window-traffic-lights i:nth-child(1){background:#ed6a5e}
.hero-frame .demo-dots i:nth-child(2),.window-traffic-lights i:nth-child(2){background:#f4bd4f}
.hero-frame .demo-dots i:nth-child(3),.window-traffic-lights i:nth-child(3){background:#61c554}
.hero-frame .demo-tab{height:30px;align-self:end;display:flex;align-items:center;width:248px;padding:0 12px;border-radius:8px 8px 0 0;background:#fff;box-shadow:0 -1px 2px #00000004}
.hero-frame .demo-chrome{height:42px;padding:0 14px;gap:16px;background:#fff;border-bottom:1px solid #e5e6e3}
.hero-frame .demo-address{height:28px;display:flex;align-items:center;padding:0 12px;font-size:12px;background:#f1f2ef;border:1px solid #ebede8;border-radius:14px}
.hero-frame .demo-browser{border-radius:10px;border-color:#c8cbc7}
.hero-frame .workflow-hero .demo-desktop{border-color:#ffffff70;border-radius:10px;box-shadow:0 22px 52px #00000030,0 5px 14px #0000001a,0 0 0 1px #00000009}
.hero-frame .connect-terminal-title{height:36px;display:flex;align-items:center;justify-content:center;padding:0 80px;font:12px/1.2 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;background:linear-gradient(#303a40,#263137);color:#d5dcdf}
.hero-frame .connect-terminal-title>.window-traffic-lights{position:absolute;left:14px;top:12px;letter-spacing:0}
.hero-frame .connect-terminal{border-radius:10px;box-shadow:0 24px 64px #00000040,0 4px 12px #00000026;border-color:#ffffff26}
.hero-frame .finder-toolbar{height:56px;gap:14px}
.hero-frame .finder-cancel,.hero-frame .finder-select{min-width:82px;min-height:28px;display:inline-flex;align-items:center;justify-content:center;padding:4px 18px;font-size:13px}

.hero-frame .window-drag-handle{cursor:grab;touch-action:none;user-select:none}
.hero-frame .window-drag-handle.is-dragging{cursor:grabbing}
.hero-frame [data-scene="1"][data-beat="1"] .connect-terminal-title,.hero-frame [data-scene="1"][data-beat="2"] .connect-terminal-title,.hero-frame [data-scene="1"][data-beat="3"] .connect-terminal-title{pointer-events:auto}

.hero-frame .finder-toolbar.window-drag-handle{pointer-events:auto}

/* One crisp edge per window, without a second translucent frame. */
.hero-frame .workflow-hero .demo-desktop{border:0;border-radius:8px;background:transparent;overflow:hidden;box-shadow:0 18px 42px #00000030,0 3px 10px #00000018}
.hero-frame .demo-desktop .demo-browser{border:1px solid #c8cbc7;border-radius:8px;overflow:hidden;box-shadow:none;background-clip:padding-box}
.hero-frame .connect-terminal,.hero-frame .finder-picker{border-radius:8px;background-clip:padding-box}

/* Newly installed Critloop leads the extension grid. */
.hero-frame .extension-card{left:32px;top:170px}
.hero-frame .install-logo-tile{width:40px;height:40px;display:grid;place-items:center;background:#fff6e9;border-radius:8px}
.hero-frame .install-logo-tile .install-mark{width:34px;height:28px}
.hero-frame [data-scene="0"][data-beat="2"] .existing-translate{left:calc(32px + (100% - 96px)/3 + 16px)}
.hero-frame [data-scene="0"][data-beat="2"] .existing-acrobat{left:calc(32px + 2*((100% - 96px)/3 + 16px))}
.hero-frame [data-scene="0"][data-beat="2"] .existing-grammarly{left:32px;top:376px}
.hero-frame [data-scene="0"][data-beat="2"] .existing-onepassword{left:calc(32px + (100% - 96px)/3 + 16px)}
/* GitHub onboarding stays beside the Northline storefront. */
.connect-account,.github-login-preview{display:none}
.hero-frame [data-scene="1"] .connect-account{display:block;position:absolute;inset:94px 18px 20px}
.hero-frame [data-scene="1"] .demo-composer{visibility:hidden}
.hero-frame [data-scene="1"] .sidebar-title small{visibility:hidden}
.hero-frame [data-scene="1"][data-beat="5"] .sidebar-title small{visibility:visible}
.connect-welcome{padding-top:105px}.connect-welcome>img{width:46px;height:38px;margin-bottom:24px}
.connect-account h3{font-size:24px;line-height:1.2;letter-spacing:-.035em;margin:0 0 14px;font-weight:500}
.connect-account p{font-size:12px;color:var(--demo-muted);line-height:1.65;margin:0 0 24px}
.connect-github-action,.connect-repo-action{background:#182327;color:white;padding:12px;border-radius:5px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
.connect-repositories,.connect-complete{display:none;padding-top:24px}
.hero-frame [data-scene="1"][data-beat="3"] .connect-welcome,.hero-frame [data-scene="1"][data-beat="4"] .connect-welcome,.hero-frame [data-scene="1"][data-beat="5"] .connect-welcome{display:none}
.hero-frame [data-scene="1"][data-beat="3"] .connect-repositories,.hero-frame [data-scene="1"][data-beat="4"] .connect-repositories,.hero-frame [data-scene="1"][data-beat="5"] .connect-complete{display:block}
.connect-account-label{display:block;font-size:10px;color:#4b7858;margin-bottom:24px}
.repo-search{border:1px solid var(--demo-line);border-radius:4px;padding:9px;font-size:11px;color:var(--demo-muted);margin-bottom:14px}
.connect-repo-option{display:flex;gap:9px;align-items:center;border:1px solid var(--demo-line);padding:12px 9px;margin-bottom:8px;border-radius:5px;font-size:11px}
.connect-repo-option strong{font-size:11px;font-weight:500}.connect-repo-option small{display:block;color:var(--demo-muted);font-size:9px;margin-top:5px}.connect-repo-option i{margin-left:auto;font-style:normal}
.connect-repo-action{margin-top:20px;opacity:.35}
.hero-frame [data-scene="1"][data-beat="4"] .northline-repo{border-color:#a56021;background:#fff6e9}
.hero-frame [data-scene="1"][data-beat="4"] .northline-repo i{font-size:0}
.hero-frame [data-scene="1"][data-beat="4"] .northline-repo i:after{content:'✓';font-size:12px;color:#a56021}
.hero-frame [data-scene="1"][data-beat="4"] .connect-repo-action{opacity:1}
.connect-complete{padding-top:105px}.connect-check{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#eef4ed;color:#4b7858;font-size:22px;margin-bottom:24px}.connected-repo{border:1px solid var(--demo-line);padding:12px 9px;font:11px var(--mono);border-radius:5px;margin:20px 0}
.hero-frame [data-scene="1"][data-beat="2"] .github-login-preview{display:block}
.github-login-preview{position:absolute;z-index:8;left:26%;top:58px;width:410px;background:#fff;border:1px solid #d0d7de;border-radius:8px;box-shadow:0 22px 60px #0003;overflow:hidden;color:#1f2328}
.github-login-title{height:36px;display:flex;align-items:center;justify-content:center;font:12px -apple-system,BlinkMacSystemFont,sans-serif;background:#ececeb;position:relative}
.github-login-title .window-traffic-lights{position:absolute;left:12px;gap:6px}.github-login-title .window-traffic-lights i{width:10px;height:10px;flex-basis:10px}
.github-login-address{font:11px var(--mono);border-block:1px solid #d8dee4;padding:8px 16px;background:#f6f8fa;color:#59636e}
.github-login-body{padding:24px 42px;text-align:center}.github-login-icon{font-size:32px;line-height:1.2}.github-login-body h3{font:400 22px/1.3 -apple-system,BlinkMacSystemFont,sans-serif;margin:10px 0 5px}.github-login-body>p{font-size:11px;color:#59636e;margin:0 0 20px}
.github-login-form{padding:16px;background:#f6f8fa;border:1px solid #d8dee4;border-radius:6px;text-align:left}
.github-login-form label{display:block;font-size:11px;margin:0 0 7px}.github-login-form label>span{float:right;font-size:10px;color:#0969da}.github-login-form .mock-field{background:#fff;font:12px var(--mono);padding:8px;margin:0 0 15px;border:1px solid #d0d7de;border-radius:5px}
.github-signin-action{background:#1f883d;border:1px solid #1f232826;border-radius:5px;color:#fff;text-align:center;font-size:12px;padding:8px}
.github-login-body .github-login-footnote{font-size:10px;margin:16px 0 0}
.hero-frame .github-login-title.window-drag-handle{pointer-events:auto}
/* Three edits accumulate in the same working checkout. */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc(170px * var(--recommendations,0)));gap:calc(20px * var(--recommendations,0));flex:1;min-height:0}
.checkout-recommendations{min-width:0;overflow:hidden;opacity:var(--recommendations,0);padding-top:32px;transform:translateX(calc(14px * (1 - var(--recommendations,0))));font-size:11px}
.recommendation-eyebrow{font-size:8px;letter-spacing:.08em;white-space:nowrap;color:var(--demo-muted)}
.checkout-recommendations h4{font-size:17px;line-height:1.2;font-weight:500;letter-spacing:-.025em;margin:10px 0}
.checkout-recommendations>p{font-size:10px;line-height:1.5;color:var(--demo-muted);margin-bottom:18px}
.checkout-recommendations article{border:1px solid var(--demo-line);border-radius:6px;overflow:hidden;margin-bottom:12px;background:var(--store-raised,#fff)}
.checkout-recommendations article img{width:100%;height:100px;object-fit:cover;display:block}
.checkout-recommendations article strong{display:block;font-size:11px;font-weight:500;margin:9px 10px 4px;white-space:nowrap}
.checkout-recommendations article>span{display:block;color:var(--demo-muted);font-size:9px;margin:0 10px 8px;white-space:nowrap}
.checkout-recommendations article>div{font-size:9px;padding:7px 10px;border-top:1px solid var(--demo-line)}
.batch-thread{display:none}.hero-frame [data-scene="3"] .batch-thread{display:block}
.hero-frame [data-scene="3"] .chat-thread>.chat-message,.hero-frame [data-scene="3"] .chat-thread>.agent-working{display:none}
.batch-thread [hidden]{display:none}.batch-response{font-size:11px;line-height:1.6;color:#5c6668;padding:12px 2px 22px}.batch-complete{font-size:12px;line-height:1.6;padding:12px;background:#f3f6ef;border:1px solid #dce4d4;border-radius:5px;color:#456249}.batch-complete small{font-size:9px}
.hero-frame .demo-app{--demo-ink:color-mix(in srgb,#182327, #f2f1e9 var(--store-dark,0%));--demo-muted:color-mix(in srgb,#5c6668, #aab8b5 var(--store-dark,0%));--demo-line:color-mix(in srgb,#dcdedb, #394743 var(--store-dark,0%));--store-raised:color-mix(in srgb,#fff, #24312e var(--store-dark,0%));color:var(--demo-ink);background:color-mix(in srgb,#faf9f6, #17221f var(--store-dark,0%))}
.hero-frame .demo-app .order-row,.hero-frame .demo-app .checkout-delivery,.hero-frame .demo-app .order-total,.hero-frame .demo-app .store-header{border-color:var(--demo-line)}
.hero-frame .demo-app .payment-method .mock-field{background:var(--store-raised);color:var(--demo-ink);border-color:var(--demo-line)}
.hero-frame .demo-app .preview-bar{background:color-mix(in srgb,#f1f2ef, #202e29 var(--store-dark,0%));color:var(--demo-muted);border-color:var(--demo-line)}
.hero-frame .demo-app .mock-pay{background:color-mix(in srgb,#182327, #d5e5ce var(--store-dark,0%));color:color-mix(in srgb,#fff, #17221f var(--store-dark,0%))}
.hero-frame .demo-app .store-nav b{background:var(--store-raised)}
.hero-frame .demo-app .checkout-back,.hero-frame .demo-app .checkout-secure,.hero-frame .demo-app .payment-method>span{color:var(--demo-muted)}
.pr-batch-summary{font:11px/1.9 var(--mono);color:var(--demo-muted);padding:14px 0}
/* Keep the product rail in the checkout grid, independent of site navigation. */
.hero-frame .checkout-layout{grid-template-columns:minmax(0,1fr) minmax(0,calc(190px * var(--recommendations,0)));align-items:stretch}
.hero-frame .checkout-layout>.checkout{grid-column:1;grid-row:1;min-width:0}
.hero-frame .checkout-layout>.checkout-recommendations{position:relative;inset:auto;grid-column:2;grid-row:1;width:auto;min-width:0;display:block;align-self:stretch;margin:18px 0 14px;padding:16px calc(12px * var(--recommendations,0));border:0;border-left:1px solid var(--demo-line);border-radius:6px;background:color-mix(in srgb,#f0f0e9, #2b3934 var(--store-dark,0%));color:var(--demo-ink)}
.hero-frame .checkout-recommendations article{background:color-mix(in srgb,#fff, #34463e var(--store-dark,0%))}
/* Content may scroll inside the window, but must not enlarge its grid row. */
.hero-frame .demo-workspace{height:100%;min-height:0;grid-template-rows:minmax(0,1fr)}
.hero-frame .demo-workspace>.demo-app,.hero-frame .demo-workspace>.demo-sidebar{min-height:0;max-height:100%;overflow:hidden}
.hero-frame .demo-sidebar>.chat-thread{flex:1 1 0;min-height:0;overflow-y:auto}
.hero-frame .demo-sidebar>.demo-composer{flex:0 0 auto}
.hero-frame .checkout-layout{grid-template-rows:minmax(0,1fr)}
.hero-frame .extension-lockup{display:inline-flex;align-items:center;gap:7px}
.hero-frame .extension-lockup img{display:block;width:25px;height:20px;object-fit:contain}
.hero-frame .recommendation-eyebrow{display:block;opacity:calc(1 - var(--eyebrow-removal,0));max-height:calc(16px * (1 - var(--eyebrow-removal,0)));overflow:hidden}
/* Selection context follows the pointer from one element to the whole page. */
.hero-frame .demo-app{position:relative}
.page-sweep-point{position:absolute;width:1px;height:1px;pointer-events:none;opacity:0}
.page-capture-overlay{position:absolute;left:6%;top:10%;width:calc(88% * var(--sweep-progress,0));height:calc(82% * var(--sweep-progress,0));z-index:5;pointer-events:none;border:1px solid #db9b51;border-radius:2px;opacity:0;background:#ffbd7612}
.page-capture-label{display:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff6e9;color:#8c510f;padding:5px 10px;border:1px solid #ffbd76;border-radius:4px;font:10px var(--mono)}
.hero-frame [data-page-sweep="true"] .page-capture-overlay,.hero-frame [data-scope="page"] .page-capture-overlay{opacity:1}
.hero-frame [data-scope="page"] .page-capture-label{display:block}
.area-select-icon{display:block;flex-shrink:0}
.hero-frame [data-eyebrow-selected="true"] .recommendation-eyebrow{outline:2px solid #db9b51;outline-offset:3px;background:#ffbd7626}
.scope-attachment{padding:7px;border:1px solid #e4ba85;border-radius:4px;background:#fff6e9;color:#8c510f;font:10px/1.4 var(--mono)}
.scope-attachment[hidden]{display:none}
.batch-context{display:block;font:9px/1.5 var(--mono);color:#8c510f;border-bottom:1px solid #e4e3de;padding-bottom:7px;margin-bottom:7px}
/* Contextual tools stay above the prompt, separate from send controls. */
.hero-frame .composer-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;min-height:38px;padding:5px 0 8px}
.hero-frame .composer-actions button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;width:auto;height:27px;padding:4px 8px;font:11px/1.2 Archivo,Arial,sans-serif;border:1px solid #d7dad5;border-radius:5px;background:#fafaf8;color:#5c6668}
.hero-frame .composer-actions button[aria-pressed="true"]{background:#fff0de;border-color:#ddb27d;color:#8c510f}
.hero-frame .composer-actions .store-theme-toggle{margin-left:auto;gap:7px}
.hero-frame .composer-actions [hidden]{display:none}
.store-theme-toggle i{display:block;position:relative;width:23px;height:13px;background:#c7cfca;border-radius:20px}
.store-theme-toggle i:after{content:'';position:absolute;top:2px;left:2px;width:9px;height:9px;background:white;border-radius:50%}
.store-theme-toggle[aria-pressed="true"] i{background:#596e61}
.store-theme-toggle[aria-pressed="true"] i:after{left:12px}
.hero-frame [data-scene="1"] .composer-actions{visibility:hidden}
.hero-frame .composer-actions button:focus-visible{outline:2px solid #b07839;outline-offset:2px}
.hero-frame .composer-actions{pointer-events:auto}
.hero-frame [data-scene="1"] .composer-actions{pointer-events:none}
.theme-chat-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;margin:0 0 16px;border:1px solid #d7dad5;border-radius:7px;background:#fafaf8;font-size:11px;pointer-events:auto}
.theme-chat-card[hidden]{display:none}
.theme-chat-card small{display:block;margin-top:4px;font-size:9px;color:#5c6668;line-height:1.4}
.theme-chat-card .store-theme-toggle{display:flex;align-items:center;gap:7px;padding:6px;border:1px solid #d7dad5;border-radius:5px;background:white;color:#182327;font-size:10px}
.theme-chat-card .store-theme-toggle[hidden]{display:none}