/* The original Connect workspace is the shared visual grammar of every scene. */
.hero .workbench{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0}
.hero-window-shell{touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none}
.hero-window-shell.is-dragging{cursor:grabbing}
.hero-feature-deck{position:relative;perspective:1100px;isolation:isolate}
.hero .hero-feature{position:relative;display:flex;flex-direction:column;grid-area:1/1;padding:0;min-height:0;border:1px solid #c6d6ec;border-radius:15px;overflow:hidden;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:none;backface-visibility:hidden;transform-origin:center}
.hero .hero-feature[hidden]{display:flex;visibility:hidden;pointer-events:none}
.hero .hero-feature[data-transit]{visibility:visible;will-change:transform,opacity}
.hero .hero-feature .workbench-bar{flex:none;background:linear-gradient(105deg,#edf3fc,var(--feature-tint));position:relative;z-index:1}
.hero .hero-feature .workbench-body{flex:1;min-height:360px;background:radial-gradient(ellipse at 100% 0%,var(--feature-tint),transparent 72%)}
.hero .hero-feature .workspace{display:flex;flex-direction:column;padding:20px;min-width:0}
.hero .hero-feature .workspace-heading{font-size:8px;gap:12px;color:var(--feature-ink)}
.hero .hero-feature .workspace h2{font-size:24px;line-height:1.15;min-height:56px;margin:10px 0 0;color:#21334d}
.hero .hero-feature .demo-apps{margin:12px 0 15px;gap:7px}
.hero .hero-feature .mini-app{font-size:12px;font-weight:700}
.hero .hero-feature .demo-prompt{min-height:42px;margin:0 0 0 28px;font-size:11px;padding:10px 12px;line-height:1.65;color:#365986}
.hero .hero-feature .demo-answer{min-height:52px;margin-top:15px;gap:11px}
.hero .hero-feature .demo-answer p{margin:0;padding-top:2px;font-size:11px;line-height:1.7}
.hero .hero-feature .demo-cards{margin:15px 0 14px 34px;min-height:62px}
.hero .hero-feature .demo-cards>span{justify-content:center;background:#f3f7fbd9;font-size:9px;line-height:1.4}
.hero .hero-feature .permission-line{margin-top:auto;min-height:20px;font-size:9px;line-height:1.5;color:var(--feature-ink)}
.hero .hero-feature .app-rail{flex-shrink:0}
.hero .hero-feature .ai-star{background:var(--feature-ink)}
.hero-feature-controls{border:0;background:none;gap:6px;position:relative;z-index:8;padding:15px 0 0;cursor:default}
.hero-feature-controls button{background:#f4f7fcbd;border:1px solid #d6e1f04d;min-width:34px;min-height:32px;padding:5px 9px}
.hero-feature-controls button[aria-current=true]{box-shadow:0 3px 10px #1655e812}
.hero-playback-controls{display:flex;gap:7px;align-items:center}
.hero-playback-controls button{display:grid;place-items:center;width:34px;height:34px;border:1px solid #dce3ec;border-radius:50%;background:#ffffffcc;color:#476386;padding:0;line-height:1}
.hero-playback-controls button[hidden]{display:none}
.hero-playback-controls .hero-arrow{font-size:17px}
.hero-playback-controls button:hover{background:#e6eeff;border-color:#b0c9f2;color:#1655e8}
.hero .float-note{pointer-events:none}
.hero-art-footer{z-index:9;gap:16px}
/* Keep the moving rim highlight, masking out the whole window interior. */
.surface-light{position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;background:conic-gradient(from var(--rim-angle,-35deg),transparent 0deg,#80baff 22deg,#edf7ff 45deg,#edbd7c 67deg,transparent 105deg 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .22s ease}
.hero-art:is(:hover,:focus-within,.is-spotlit) .surface-light{opacity:1}
.hero-window-shell{position:relative;z-index:2}
@media(min-width:1051px){.hero-feature-controls{justify-content:flex-end;padding-right:12px}.hero .local-note{left:16px;max-width:40%}}
@media(min-width:701px) and (max-width:1050px){.hero-art{padding-block:90px 120px}.hero .local-note{bottom:46px}}
@media(max-width:1050px){.hero .hero-feature .workspace{padding:17px}.hero .hero-feature .workspace h2{font-size:22px}.hero .hero-feature .app-rail{width:42px}.hero .hero-feature .app-rail>span{width:29px;height:30px;font-size:16px}.hero .hero-feature .demo-prompt{margin-left:12px}.hero .hero-feature .demo-cards,.hero .hero-feature .permission-line{margin-left:0}.hero .hero-feature .demo-cards>span{font-size:8px}.hero .hero-feature .demo-answer p{font-size:10px}}
@media(max-width:700px){.hero .hero-feature .workspace{padding:16px 14px}.hero .hero-feature .workspace h2{font-size:22px;min-height:52px}.hero .hero-feature .demo-prompt{font-size:10px;min-height:50px}.hero .hero-feature .demo-answer{min-height:68px}.hero .hero-feature .permission-line{font-size:8px}.hero .hero-feature .workspace-heading{font-size:7px}.hero-art{padding-block:85px 115px}.hero .local-note{bottom:46px}.hero-art-footer{bottom:0;right:6px;left:6px;justify-content:space-between;gap:8px}.hero-art-footer .demo-caption{font-size:8px}.hero-playback-controls button{width:38px;height:38px}.hero-feature-controls{gap:5px}.hero .hero-feature .mini-app{width:25px;height:25px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-window-shell{cursor:default}}

@media(prefers-reduced-motion:reduce){.surface-light{transition:none}}