/* Two product views, one prompt-to-image story. The UI inside is an illustration. */
.studio-demo{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);width:min(100%,520px);border:1px solid #ffffff16;border-radius:18px;background:#0b0c0e;overflow:hidden;box-shadow:0 25px 80px #0006}
.studio-demo-head{height:53px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;gap:8px;border-bottom:1px solid var(--line-soft)}
.studio-platforms{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #ffffff0a;border-radius:999px;background:#151618}
.studio-platforms button{display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;background:transparent;color:#93969e;padding:7px 11px;font-size:11px;cursor:pointer;transition:background .18s ease,color .18s ease}
.studio-platforms button[aria-pressed="true"]{color:#edf4f6;background:#303438;box-shadow:0 1px 3px #0004}
.studio-platforms i{font-size:15px;color:var(--accent)}
.studio-ae-icon{display:inline-grid;place-items:center;width:17px;height:16px;background:#25213b;border:1px solid #8b82b731;border-radius:4px;color:#c6bded;font-size:10px;font-weight:500;line-height:1}
.studio-playback-controls{display:flex;gap:4px}
.studio-playback-controls button{display:grid;place-items:center;width:27px;height:27px;border:1px solid #ffffff12;border-radius:50%;color:#b6bac1;background:transparent;cursor:pointer;transition:background .18s ease}
.studio-playback-controls i{font-size:13px}
.studio-demo button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.studio-demo button[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.studio-demo button:hover{background:#3b4146;color:#fff}}
.studio-theater{height:474px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#20262b66,transparent 72%)}
.studio-canvas{position:absolute;left:50%;top:50%;width:350px;height:456px;transform:translate(-50%,-50%);transform-origin:center;isolation:isolate}
.studio-product{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px;background:#090b0c;border:1px solid #ffffff24;border-radius:28px;box-shadow:0 16px 40px #0006;overflow:hidden}
.studio-app-header{display:flex;align-items:center;gap:10px;height:51px;padding:0 7px 10px;flex:none}
.studio-app-header>i:first-child{color:#e4cf68;font-size:24px}
.studio-app-header b{font-size:22px;font-weight:500;letter-spacing:-.03em}
.studio-app-header>span{font-size:10px;border:1px solid #ffffff20;border-radius:7px;padding:3px 7px;color:var(--accent)}
.studio-app-header>i:last-child{margin-left:auto;font-size:23px;color:#c7ccd1}
.studio-extension-bar,.studio-extension-tabs,.studio-extension-foot{display:none}
.studio-workspace{position:relative;flex:1;min-height:0}
.studio-compose{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;border:1px solid #ffffff20;border-top-color:#ffffff40;border-radius:23px;background:#121416;padding:16px}
.studio-model-row{display:flex;align-items:center;justify-content:space-between;flex:none}
.studio-model-pill{display:flex;align-items:center;gap:8px;border-radius:999px;background:#232629;padding:8px 10px;font-size:12px;line-height:19px}
.studio-model-pill>i:first-child{font-size:21px;color:#f0f0f0}
.studio-model-pill>i:last-child{font-size:11px;margin-left:4px}
.studio-model-extra{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#232629;color:#979da8;font-size:18px}
.studio-reference{display:flex;align-items:center;gap:9px;font-size:12px;border:1px solid #ffffff06;border-radius:12px;background:#222529;color:#e1e3e7;padding:8px 10px;width:fit-content;flex:none}
.studio-reference i{font-size:18px}.studio-reference span{font-size:17px;color:#a7abb3;margin-left:5px;line-height:1}
.studio-prompt{padding:7px 0;min-height:69px;flex:1;font-size:20px;line-height:1.4;letter-spacing:-.025em;color:#f2f4f6;position:relative}
.studio-placeholder{color:#818792;font-size:17px;letter-spacing:-.015em}
.studio-demo.has-prompt .studio-placeholder{display:none}
.studio-caret{display:inline-block;vertical-align:-3px;width:1px;height:22px;background:var(--accent);margin-left:2px;opacity:0}
.studio-demo.is-typing .studio-caret{opacity:1;animation:studio-caret-blink .8s steps(1) infinite;animation-play-state:paused}
.studio-demo.is-running.is-typing .studio-caret{animation-play-state:running}
@keyframes studio-caret-blink{50%{opacity:0}}
.studio-prompt-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#80868f;font-size:8px;flex:none}
.studio-prompt-meta>span:last-child{font:7px var(--font-mono);white-space:nowrap}
.studio-compose-bottom{display:flex;align-items:center;gap:8px;flex:none}
.studio-output-type{display:flex;align-items:center;gap:7px;border-radius:999px;background:#222529;padding:10px 13px;font-size:13px;flex:1}
.studio-output-type>i{font-size:17px}.studio-output-type>i:last-child{margin-left:auto;font-size:10px}
.studio-settings{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#222529;font-size:16px;color:#d4d8dc}
.studio-generate{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #f7edbe52;border-radius:50%;background:#bca85a;color:#191b13;box-shadow:inset 0 1px 7px #fff3;flex:none}
.studio-generate>i{font-size:23px}.studio-generate>span{display:none}
.studio-generate.is-target{box-shadow:0 0 0 4px #d6c3701c,inset 0 1px 7px #fff3}
.studio-processing{position:absolute;inset:0 0 44px;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;pointer-events:none}
.studio-imagination{position:relative;width:114px;height:114px;display:grid;place-items:center;margin-bottom:22px}
.studio-imagination>i{font-size:35px;color:#dce8ed}
.studio-orbit{position:absolute;inset:0;border:1px solid #bfd8e333;border-radius:35px;box-shadow:inset 0 0 20px #b9d0db07,0 0 25px #b9d0db05}
.studio-orbit-two{inset:10px;border-color:#cbdce74d;border-radius:29px}.studio-orbit-three{inset:21px;border-color:#cbdce766;border-radius:22px}
.studio-processing>b{font-size:19px;font-weight:500;letter-spacing:-.02em}
.studio-processing>span{font-size:11px;color:#8e98a2;margin-top:5px}
.studio-progress-track{height:3px;width:160px;background:#262c31;border-radius:3px;overflow:hidden;margin-top:20px}
.studio-progress-track>i{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.studio-processing>small{width:160px;display:flex;justify-content:space-between;font:7px var(--font-mono);color:#667681;margin-top:9px}
.studio-processing>small>span{color:#b3c8d0}
.studio-result{position:absolute;inset:0 0 46px;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none}
.studio-result-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 4px;font-size:10px;color:#ccd7db}
.studio-result-top>span{display:flex;align-items:center;gap:5px}.studio-result-top i{font-size:14px;color:var(--accent)}
.studio-result-top small{font:6px var(--font-mono);color:#667680;letter-spacing:.1em}
.studio-image-wrap{position:relative;margin:9px 0;min-height:0;flex:1;aspect-ratio:4/5;max-width:100%;border:1px solid #ffffff24;border-radius:14px;overflow:hidden;background:#161c22;box-shadow:0 8px 25px #0006}
.studio-image-wrap>img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.studio-image-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#e5f6ff38 50%,transparent 75%);opacity:0;pointer-events:none}
.studio-image-tools{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);display:flex;gap:17px;padding:10px 16px;border:1px solid #ffffff20;border-radius:999px;background:#0c131bbd;backdrop-filter:blur(10px);color:#f6f8fa;font-size:17px}
.studio-image-tag{position:absolute;left:9px;top:9px;border:1px solid #ffffff29;border-radius:4px;background:#0b152b70;color:#e4eff5;font:5px var(--font-mono);letter-spacing:.12em;padding:4px 5px}
.studio-result-action{display:flex;align-items:center;justify-content:center;gap:7px;min-height:32px;min-width:174px;border-radius:999px;background:#c6dbe2;color:#10222c;font-size:11px;font-weight:500;flex:none;padding:0 15px;box-shadow:inset 0 0 10px #fff5}
.studio-result-action>i{font-size:14px}.studio-result-action>i:last-child{font-size:11px;margin-left:4px}
.studio-result-action.is-target{box-shadow:0 0 0 4px #c6dbe220,inset 0 0 10px #fff5}
.studio-prompt-receipt{position:absolute;bottom:0;left:0;right:0;height:35px;display:flex;align-items:center;gap:8px;background:#171b1e;border:1px solid #ffffff1a;border-radius:999px;padding:0 12px;font-size:11px;color:#d8e1e4;opacity:0}
.studio-prompt-receipt>i:first-child{color:var(--accent);font-size:15px}.studio-prompt-receipt>i:last-child{margin-left:auto;font-size:12px;color:#91aaa5;opacity:0}.studio-demo[data-scene="result"] .studio-prompt-receipt>i:last-child,.studio-demo[data-scene="saved"] .studio-prompt-receipt>i:last-child{opacity:1}
.studio-app-nav{display:flex;align-items:center;gap:4px;border:1px solid #ffffff13;border-radius:999px;margin-top:10px;background:#121517;padding:4px;flex:none;height:49px}
.studio-app-nav>span,.studio-app-nav>b{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:#898f9b;font-size:8px;font-weight:500;padding:3px 0;border-radius:999px}
.studio-app-nav i{font-size:17px}.studio-app-nav>b{background:#25282d;color:#eceff3}.studio-app-nav>b>i{color:#8fbbff}
.studio-cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 3px #0008)}
.studio-cursor>span{position:absolute;left:-10px;top:-10px;width:28px;height:28px;border:1px solid #d1e6ed;border-radius:50%;opacity:0}
.studio-demo-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;height:41px;border-top:1px solid var(--line-soft);padding:0 16px;font-size:11px;color:#b1bcc3}
.studio-demo-label{font:7px var(--font-mono);letter-spacing:.12em;color:#697681;flex:none}
.studio-loop-track{height:2px;background:#13191e}.studio-loop-track>i{display:block;height:100%;width:100%;background:#9bbbc866;transform:scaleX(0);transform-origin:left}
/* The extension keeps the same generator, with desktop chrome and a comp handoff. */
.studio-demo[data-platform="extension"] .studio-canvas{width:460px}
.studio-demo[data-platform="extension"] .studio-product{padding:0;border-radius:12px;background:#101214}
.studio-demo[data-platform="extension"] .studio-extension-bar{display:flex;align-items:center;gap:12px;height:33px;padding:0 14px;flex:none;background:#1d2023;border-bottom:1px solid #ffffff0c}
.studio-extension-bar>b{font-size:13px;font-weight:500}.studio-extension-bar>span{font:6px var(--font-mono);letter-spacing:.13em;color:#9299a5}.studio-extension-bar>i{margin-left:auto;font-size:20px;color:#b5bac3}
.studio-demo[data-platform="extension"] .studio-app-header{height:52px;padding:0 21px;gap:9px}.studio-demo[data-platform="extension"] .studio-app-header b{font-size:21px}
.studio-demo[data-platform="extension"] .studio-extension-tabs{display:flex;align-items:center;gap:24px;height:30px;padding:0 21px;flex:none;border-bottom:1px solid #ffffff0d;color:#767f8b;font-size:10px}
.studio-extension-tabs>b{height:100%;font-weight:500;border-bottom:2px solid var(--accent);color:#d8e9ef;padding:0 2px}
.studio-demo[data-platform="extension"] .studio-workspace{margin:15px 20px 8px}
.studio-demo[data-platform="extension"] .studio-compose{border-radius:14px;padding:16px;gap:10px;background:#171a1d}
.studio-demo[data-platform="extension"] .studio-reference{font-size:11px;padding:6px 10px;border-radius:8px}
.studio-demo[data-platform="extension"] .studio-prompt{font-size:23px;min-height:38px;padding-top:2px}
.studio-demo[data-platform="extension"] .studio-placeholder{font-size:18px}
.studio-demo[data-platform="extension"] .studio-output-type{flex:0 1 138px}
.studio-demo[data-platform="extension"] .studio-generate{margin-left:auto;width:auto;gap:15px;border-radius:999px;padding:0 15px;background:#c6dbe2;color:#10222c;border-color:#effaff44}
.studio-demo[data-platform="extension"] .studio-generate>span{display:block;font-size:12px;font-weight:500}.studio-demo[data-platform="extension"] .studio-generate>i{font-size:18px}
.studio-demo[data-platform="extension"] .studio-app-nav{display:none}
.studio-demo[data-platform="extension"] .studio-extension-foot{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:28px;flex:none;color:#8e99a4;font-size:8px}
.studio-extension-foot>span:first-child{display:flex;align-items:center;gap:5px}.studio-extension-foot i{font-size:6px;color:var(--accent)}.studio-extension-foot>span:last-child{font:6px var(--font-mono);letter-spacing:.1em;color:#576572}
.studio-demo[data-platform="extension"] .studio-result{align-items:stretch;inset:0 0 43px;padding-left:191px;justify-content:center}
.studio-demo[data-platform="extension"] .studio-result-top{display:block;padding:0}.studio-demo[data-platform="extension"] .studio-result-top>span{font-size:12px;gap:7px}.studio-demo[data-platform="extension"] .studio-result-top small{display:block;margin:10px 0 17px 21px;font-size:7px}
.studio-demo[data-platform="extension"] .studio-image-wrap{position:absolute;left:0;top:0;bottom:0;margin:0;width:169px;max-width:none;aspect-ratio:auto;border-radius:11px}
.studio-demo[data-platform="extension"] .studio-image-tools{gap:13px;font-size:15px;padding:8px 13px}
.studio-demo[data-platform="extension"] .studio-result-action{font-size:11px;min-width:0;min-height:36px;gap:6px}
.studio-demo[data-platform="extension"] .studio-result-action>i:last-child{margin-left:auto}
.studio-demo[data-platform="extension"] .studio-result::after{content:"From your imagination.\AInto your composition.";white-space:pre;line-height:1.7;font-size:10px;color:#6e7b88;margin-top:16px}
.studio-composition{position:absolute;inset:0;display:flex;flex-direction:column;background:#16191e;border:1px solid #ffffff26;border-radius:12px;overflow:hidden;opacity:0;pointer-events:none}
.studio-comp-head{height:38px;flex:none;display:flex;align-items:center;gap:9px;padding:0 13px;font-size:8px;color:#8a929d;border-bottom:1px solid #ffffff14}
.studio-comp-head b{color:#d7dce4;margin-left:7px;font-weight:500}.studio-comp-head>i{margin-left:auto;font-size:19px}
.studio-comp-view{position:relative;flex:1;min-height:0;background:#0c0d10;overflow:hidden}
.studio-comp-art{position:absolute;top:14px;bottom:19px;left:50%;transform:translateX(-50%);aspect-ratio:4/5;border:1px solid #94bad8}
.studio-comp-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.studio-comp-handle{position:absolute;width:5px;height:5px;border:1px solid #a7d0e9;background:#213849}.studio-handle-tl{top:-3px;left:-3px}.studio-handle-tr{top:-3px;right:-3px}.studio-handle-bl{bottom:-3px;left:-3px}.studio-handle-br{bottom:-3px;right:-3px}
.studio-comp-zoom{position:absolute;bottom:4px;left:11px;color:#919da9;font-size:7px;display:flex;align-items:center;gap:15px}
.studio-timeline{height:79px;position:relative;border-top:1px solid #ffffff1a;background:#20232a;flex:none}
.studio-time-ruler{display:flex;align-items:center;height:23px;border-bottom:1px solid #ffffff0a;font:7px var(--font-mono);color:#788896}.studio-time-ruler>b{width:40%;font-weight:500;padding-left:13px;color:#a9c8df}.studio-time-ruler>span{flex:1}
.studio-layer{display:flex;height:25px;font-size:8px;background:#ffffff04;border-bottom:1px solid #ffffff09}.studio-layer>span{display:flex;align-items:center;gap:8px;width:40%;padding-left:13px;color:#c5ced8}.studio-layer>span>i:first-child{font-size:10px;color:#778ca0}.studio-layer>span>i:nth-child(2){color:#a795ce}
.studio-layer>div{flex:1;padding:5px 6px 5px 0}.studio-layer>div>i{display:block;height:100%;background:#8571a9;border:1px solid #b2a0d0;border-radius:2px;transform-origin:left}
.studio-empty-layer{height:25px;border-bottom:1px solid #ffffff06}.studio-comp-playhead{position:absolute;top:18px;bottom:0;left:40%;width:1px;background:#7bafd7}.studio-comp-playhead::before{content:"";position:absolute;left:-3px;top:-4px;width:7px;height:7px;background:#7bafd7;clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%)}
.studio-import-confirm{height:35px;display:flex;align-items:center;justify-content:center;gap:7px;background:#1d292c;color:#c0d7db;font-size:10px;flex:none}.studio-import-confirm>i{font-size:14px}
@media(min-width:901px) and (max-height:800px){.studio-theater{height:clamp(315px,56dvh,448px)}}
@media(max-width:900px){.studio-demo{max-width:480px}.studio-demo-head{height:43px;padding:0 10px}.studio-platforms button{font-size:9px;padding:5px 9px;gap:5px}.studio-platforms i{font-size:13px}.studio-playback-controls button{width:24px;height:24px}.studio-theater{height:clamp(225px,32dvh,360px)}.studio-demo-foot{height:33px;padding:0 12px;font-size:9px}.studio-demo-label{font-size:6px}}
body.flow .studio-theater{height:474px}
@media(prefers-reduced-motion:reduce){.studio-demo *{animation:none!important;transition:none!important}.studio-cursor{display:none}}