@font-face{font-family:Manrope;src:url(manrope-bold.ttf) format('truetype');font-weight:600 800;font-display:swap}
:root{--ink:#24232b;--muted:#64616c;--coral:#dd653d;--primary:#ffc4b5;--lilac:#eee8f8;--lavender:#75549a;--line:#e9e7ed;--sc-canvas:#fff;--sc-ink:var(--ink);--sc-accent:var(--coral);--sc-font-text:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:#fff;color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;background:none;border:0}a{color:inherit;text-decoration:none}button,a,input,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--lavender);outline-offset:5px}[hidden]{display:none!important}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.sprite{position:absolute;width:0;height:0;overflow:hidden}.skip{position:fixed;top:8px;left:8px;padding:12px;background:white;z-index:100;transform:translateY(-200%)}.skip:focus{transform:none}
.site-header{max-width:1440px;margin:auto;min-height:88px;padding:20px clamp(24px,5vw,80px);display:flex;align-items:center;gap:32px}.brand{display:inline-flex;align-items:center;gap:8px;font-family:Manrope,sans-serif;font-size:26px;letter-spacing:-1.3px;font-weight:700;line-height:1}.brand>span{color:var(--coral);margin-left:-6px}.site-header nav{display:flex;gap:28px;margin-left:auto;font-size:13px}.site-header nav a{padding:10px 0}.site-header nav a:hover{color:var(--coral)}.quiet-button{font-size:12px;min-height:44px;padding:10px 15px;border-radius:99px;background:#f5f4f7;white-space:nowrap}.quiet-button span{margin-left:8px}.primary{display:inline-flex;justify-content:center;align-items:center;gap:16px;min-height:48px;padding:13px 22px;border-radius:99px;background:var(--primary);font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,transform .2s}.primary:hover{background:#ffb6a3;transform:translateY(-2px)}.primary svg{width:17px;height:17px}.primary:disabled{opacity:.6;cursor:wait}
main{overflow:clip} .chapter{width:min(1280px,calc(100% - 112px));margin:auto;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(48px,6vw,96px);align-items:center;padding:96px 0;min-height:660px;--arrival:1;--depart:0}.hero{min-height:calc(100svh - 88px);padding:64px 0 80px}.copy{position:relative;z-index:2;min-width:0}.context-label{color:var(--muted);font-size:12px;margin-bottom:24px;display:flex;align-items:center;gap:8px}.tiny-pointer{color:var(--coral);font-size:20px}h1,h2{font-family:Manrope,sans-serif;font-weight:700;letter-spacing:-.05em;line-height:1.08;text-wrap:balance}h1{font-size:clamp(46px,4.6vw,66px)}h2{font-size:clamp(40px,4vw,58px)}h1 span,h2 span{color:var(--coral)}.copy>p:not(.context-label):not(.small-note):not(.sample-label):not(.status-line){font-size:16px;line-height:1.75;color:var(--muted);max-width:440px;margin-top:24px}.copy>.primary{margin-top:28px}.small-note{font-size:11px;color:var(--muted);margin-top:14px}.sample-label{font-size:11px;color:var(--muted);margin-top:20px}.story-bridge{width:min(1280px,calc(100% - 112px));margin:0 auto;display:flex;align-items:center;gap:16px;color:var(--muted);font-size:12px;padding:8px 0}.story-bridge i{width:72px;height:1px;background:linear-gradient(90deg,var(--coral),#dd653d20);position:relative}.story-bridge i:after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--coral)}
/* One stage moves from a typed request to the agent's desktop and back to chat. */
.brief-visual.sequence{height:520px;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;min-width:0}
.orbit-plane{position:absolute;inset:-3% -8%;background:radial-gradient(ellipse at 55% 50%,#eee6f9,transparent 70%);z-index:-1;pointer-events:none}
.sequence-window{flex:1;min-height:0;background:#fff;border-radius:16px;box-shadow:0 16px 55px -24px #5037664d;overflow:hidden;display:flex;flex-direction:column}
.sequence-titlebar{height:46px;flex:none;background:#f7f5fa;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 18px;font-size:11px;color:#645a6f;border-bottom:1px solid #eee9f3}.sequence-traffic{display:flex;gap:5px}.sequence-traffic i{width:7px;height:7px;border-radius:50%;background:#d8d0e0}.sequence-traffic i:first-child{background:#eab2a6}.sequence-traffic i:nth-child(2){background:#e8d8b0}.sequence-traffic i:nth-child(3){background:#bfd0b6}#hero-rec{font-size:9px;color:#746582}#hero-rec:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#8faba0;margin-right:5px}.sequence[data-scene=work] #hero-rec{color:#a1452a}.sequence[data-scene=work] #hero-rec:before{background:var(--coral)}
.sequence-stage{position:relative;flex:1;min-height:0;overflow:hidden}.hero-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(24px) scale(.97);transition:opacity .45s ease,transform .65s cubic-bezier(.22,1,.36,1),visibility .45s;pointer-events:none}.sequence[data-scene=chat] .hero-chat-scene,.sequence[data-scene=work] .hero-work-scene,.sequence[data-scene=result] .hero-result-scene{opacity:1;visibility:visible;transform:translateX(0) scale(1);pointer-events:auto}.sequence[data-scene=work] .hero-chat-scene{transform:translateX(-24px) scale(.97)}
.chat-greeting{position:absolute;inset:35px 20px auto;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;transition:opacity .3s,transform .5s}.chat-greeting h3{font:600 27px/1.3 Manrope,sans-serif;letter-spacing:-.035em}.chat-composer{position:absolute;left:8%;right:8%;bottom:32px;background:#f6f3fa;border:1px solid #e7dfef;border-radius:14px;padding:17px 18px;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .3s}.composer-text{min-height:48px;font-size:15px;line-height:1.6;position:relative}.composer-placeholder{color:#746b7d;font-size:13px}.composer-text:has(#hero-request:not(:empty)) .composer-placeholder{display:none}.typing-caret{display:inline-block;width:1px;height:16px;background:var(--coral);vertical-align:-3px;margin-left:2px;animation:caret-blink .8s steps(2,end) infinite}.composer-text:has(#hero-request:empty) .typing-caret{display:none}.composer-tools{display:flex;align-items:center;gap:12px;margin-top:12px;color:#73667d;font-size:22px}.composer-attachment{font-size:10px;background:white;border-radius:5px;padding:3px 7px}.composer-send{margin-left:auto;background:var(--primary);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;transform:rotate(-90deg);transition:transform .2s,background .2s}.composer-send svg{width:15px}.sequence[data-phase=send] .composer-send{background:#f4a68f;transform:rotate(-90deg) scale(.85)}
.sent-message{position:absolute;top:28px;right:7%;width:79%;background:#efe8f7;border-radius:14px 14px 4px 14px;padding:15px 18px;opacity:0;transform:translateY(100px);transition:opacity .3s,transform .65s cubic-bezier(.22,1,.36,1)}.sent-message>span{font-size:10px;color:#7a6b87}.sent-message p{font-size:14px;line-height:1.6;margin-top:5px}.chat-answer{position:absolute;left:7%;right:10%;top:155px;display:grid;grid-template-columns:24px 1fr;gap:8px 11px;opacity:0;transform:translateY(12px);transition:opacity .35s,transform .5s}.chat-answer p{font-size:14px;line-height:1.65}.chat-answer>span{grid-column:2;font-size:11px;color:var(--lavender)}.sequence[data-phase=reply] .sent-message{opacity:1;transform:translateY(0)}.sequence[data-phase=reply] .chat-greeting{opacity:0;transform:translateY(-15px)}.sequence[data-phase=reply] .chat-composer{opacity:0;transform:translateY(20px)}.sequence[data-phase=reply] .chat-answer{opacity:1;transform:translateY(0);transition-delay:.5s}
.hero-workspace{position:relative;height:calc(100% - 34px);padding:23px;overflow:hidden}.hero-app-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.hero-app-top strong{font-size:17px;letter-spacing:-.04em}.hero-new,.hero-create{padding:8px 10px;background:#eee6f7;border-radius:6px;font-size:10px;font-weight:600;display:inline-block}.hero-projects{display:flex;gap:12px}.hero-projects>div{flex:1;min-width:0}.hero-projects i{height:65px;background:#f4d4ca;border-radius:7px;display:block;position:relative;overflow:hidden}.hero-projects>div:nth-child(2) i{background:#e5dcf0}.hero-projects>div:nth-child(3) i{background:#dce7d5}.hero-projects i:after{content:'';position:absolute;width:46px;height:46px;border:9px solid #dd9e8c;border-radius:50%;top:12px;left:30%}.hero-projects>div:nth-child(2) i:after{border:0;background:#b49acb;border-radius:8px;transform:rotate(-25deg)}.hero-projects>div:nth-child(3) i:after{border:0;background:#b6c9a6;border-radius:8px;box-shadow:-10px -8px #c4d5b6}.hero-projects span{display:block;font-size:9px;margin-top:7px;white-space:nowrap}.hero-form{position:absolute;inset:15px 18px;background:#fff;border:1px solid #e9e2ef;border-radius:10px;padding:16px 20px;box-shadow:0 8px 30px #45305f12}.hero-form>span:first-child{font-weight:600;font-size:13px}.hero-form label{display:block;font-size:9px;color:var(--muted);margin:10px 0 5px}.hero-field{font-size:12px;border:1px solid #bc9ed9;border-radius:6px;height:31px;padding:5px 10px;margin-bottom:10px}.hero-field i{border-left:1px solid var(--coral);height:13px;margin-left:2px}.hero-create{font-size:9px;padding:6px 10px}.hero-success{position:absolute;inset:0;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.hero-success strong{font-size:22px;letter-spacing:-.04em}.hero-success>span:last-child{font-size:11px;color:var(--muted)}.hero-cursor{position:absolute;width:25px;height:30px;fill:var(--coral);stroke:white;stroke-width:1.5;left:85%;top:20%;transition:left .7s,top .7s,transform .25s;filter:drop-shadow(0 2px 2px #281b3022);pointer-events:none}.brief-visual[data-phase=ask] .hero-cursor,.brief-visual[data-phase=export] .hero-cursor{opacity:0}.brief-visual[data-phase=type] .hero-cursor{left:46%;top:48%}.brief-visual[data-phase=create] .hero-cursor{left:25%;top:76%;transform:scale(.9)}.brief-visual[data-phase=finish] .hero-cursor{left:62%;top:65%}.brief-visual[data-phase=open] .hero-new,.brief-visual[data-phase=create] .hero-create{background:#dcc9ed}

.sequence .hero-workspace{height:calc(100% - 43px);padding:32px 26px}.sequence .hero-app-top{margin-bottom:28px}.sequence .hero-app-top strong{font-size:23px}.sequence .hero-new{font-size:11px;padding:10px 12px}.sequence .hero-projects i{height:110px}.sequence .hero-projects span{font-size:11px;margin-top:10px}.sequence .hero-projects i:after{top:25px;left:30%;width:60px;height:60px}.sequence .hero-form{inset:32px 26px;padding:24px}.sequence .hero-form>span:first-child{font-size:17px}.sequence .hero-form label{font-size:11px;margin-top:20px}.sequence .hero-field{font-size:14px;height:40px;padding:8px 12px;margin-bottom:20px}.sequence .hero-create{font-size:11px;padding:9px 13px}.sequence .hero-cursor{left:0;top:0;transition:transform .65s cubic-bezier(.22,1,.36,1);width:28px;height:35px}.sequence .hero-success strong{font-size:27px}.sequence .hero-success{gap:14px}.sequence .hero-success>span:last-child{font-size:12px}.sequence .hero-success .success-icon{width:42px;height:42px}.sequence[data-phase=export] .hero-cursor{opacity:0}.recording-strip{height:43px;background:#faf8fc;border-top:1px solid #eee9f3;display:flex;align-items:center;gap:8px;padding:0 16px;font-size:10px;color:#6e607b}.recording-strip>i{width:6px;height:6px;background:var(--coral);border-radius:50%}.recording-strip>span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
.hero-result-scene{padding:25px 8%}.result-answer{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:16px}.finished-video{margin-left:34px;border:1px solid #e7e1ee;border-radius:12px;overflow:hidden;background:white}.finished-video-frame{position:relative;height:185px;padding:17px;background:#e8dff3}.finished-app{background:white;height:100%;border-radius:7px;display:flex;align-items:center;flex-direction:column;padding:10px}.finished-app>span{align-self:flex-start;font-size:8px;color:#71657c}.finished-app .success-icon{width:25px;height:25px;margin:12px 0 7px}.finished-app .success-icon svg{width:14px;height:14px}.finished-app strong{font-size:18px;letter-spacing:-.03em}.finished-app small{font-size:9px;color:var(--muted);margin-top:3px}.finished-play{position:absolute;right:25px;bottom:25px;background:#ffffffee;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;color:var(--coral)}.finished-play svg{width:14px;fill:currentColor;stroke:0}.finished-file{display:flex;align-items:center;gap:9px;padding:12px 14px}.finished-file>svg{width:16px;color:var(--lavender)}.finished-file>svg:last-child{margin-left:auto;color:#668259}.finished-file strong{font-size:11px;font-weight:500;display:block}.finished-file span{font-size:9px;color:var(--muted);display:block;margin-top:2px}.result-summary{font-size:12px;line-height:1.65;margin:15px 0 0 34px;color:var(--muted)}
.sequence-caption{display:flex;gap:8px;align-items:center;color:#6e5b7f;font-size:11px;min-height:25px;padding:0 4px}.sequence-example{margin-left:auto;font-size:9px;color:#77707e}.hero-playback{display:flex;align-items:center;gap:12px;font-size:10px;color:var(--muted);min-height:40px}.hero-playback button{font-size:10px;padding:8px 10px;min-height:40px;min-width:55px;border-radius:7px;background:#f5f3f8}.hero-playback input{flex:1;min-width:0;height:20px;accent-color:var(--coral)}#hero-time{font-size:10px;font-variant-numeric:tabular-nums}#hero-restart{min-width:36px;padding:8px;display:grid;place-items:center}#hero-restart svg{width:15px;height:15px}.sequence.is-paused .typing-caret{animation-play-state:paused}
@keyframes caret-blink{50%{opacity:0}}
.status-line{font-size:11px;color:var(--muted);margin-top:16px;min-height:36px;line-height:1.6}
/* A window becomes an export, with separate controls and clear space. */
.styling{min-height:760px}.format-tabs{display:flex;gap:6px;margin-top:28px;padding:5px;background:#f5f4f7;border-radius:14px;max-width:350px}.format-tabs button{padding:11px 12px;font-size:12px;border-radius:10px;flex:1;white-space:nowrap;min-height:44px}.format-tabs span{font-size:10px;color:var(--muted);margin-left:5px}.format-tabs [aria-pressed=true]{background:white;box-shadow:0 2px 5px #26203612}.style-controls{display:flex;align-items:end;gap:24px;margin-top:24px;flex-wrap:wrap}.style-controls fieldset{border:0;margin:0;padding:0}.style-controls legend{font-size:11px;color:var(--muted);margin-bottom:8px}.style-controls fieldset>div{display:flex;gap:4px}.style-controls fieldset button{width:35px;height:44px;display:grid;place-items:center;border-radius:8px;position:relative}.style-controls fieldset [aria-pressed=true]{background:#f0eaf7}.style-controls fieldset [aria-pressed=true]:after{content:'';height:3px;width:12px;border-radius:3px;background:var(--lavender);position:absolute;bottom:2px;left:50%;transform:translateX(-50%)}#colour-options button:before{content:'';width:21px;height:21px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #0000000a}#cursor-options svg{width:20px;height:20px;fill:currentColor;stroke:none}.style-controls>.quiet-button{font-size:10px;padding:10px 12px}.style-visual{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center;perspective:1200px}.export-echo{position:absolute;inset:10% 3%;background:#f4f0fa;border-radius:16px;transform:rotate(calc(-6deg - var(--arrival)*3deg)) scale(.95);z-index:-1}.export-frame{position:relative;width:100%;max-width:590px;aspect-ratio:16/9;background:linear-gradient(135deg,#e4d8f3,#eee8f8 55%,#cdb7e5);border-radius:16px;padding:26px;box-shadow:0 28px 50px -32px #5c3c7d65;transition:width .65s,aspect-ratio .65s,padding .65s,transform .65s;transform:rotate(calc(3deg - var(--arrival)*3deg));display:grid;align-items:center}.export-app{position:relative;background:white;border-radius:9px;min-height:240px;box-shadow:0 6px 16px #48305a12;padding:17px;display:flex;flex-direction:column;overflow:hidden}.export-app-name{font-weight:700;font-size:13px;color:#50435c;letter-spacing:-.05em}.export-project{display:flex;flex:1;align-items:center;justify-content:center;flex-direction:column;padding:30px 8px}.export-project h3{font-size:24px;letter-spacing:-.04em;margin:12px 0 4px;line-height:1.3}.export-project p{font-size:11px;color:var(--muted)}.style-pointer{position:absolute;width:27px;height:35px;right:18%;bottom:24%;fill:var(--cursor,#dd653d);stroke:white;stroke-width:1.5}.video-logo{position:absolute;right:28px;bottom:9px;display:flex;gap:5px;align-items:center;font-size:8px}.export-label{position:absolute;bottom:0;display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px;color:var(--muted)}.export-label svg{width:15px}.export-label>span:last-child{font-size:10px;padding:3px 8px;background:#f4f1f7;border-radius:6px}.style-visual[data-format=square] .export-frame{width:360px;aspect-ratio:1;padding:24px}.style-visual[data-format=portrait] .export-frame{width:230px;aspect-ratio:9/16;padding:18px}.style-visual[data-format=portrait] .export-app{min-height:290px}.style-visual[data-format=portrait] .export-project h3{font-size:20px}.style-visual[data-format=portrait] .export-project{padding:20px 0}.style-visual[data-colour=coral] .export-frame{background:linear-gradient(135deg,#ffd9cd,#ffc4b5)}.style-visual[data-colour=white] .export-frame{background:#f1f1f4}
/* The recorded actions separate into reviewable, reusable steps. */
.repeat{min-height:720px}.input-label{display:block;margin-top:28px;margin-bottom:9px;font-size:12px;color:var(--muted)}.replay-input{display:flex;gap:8px;padding:6px;background:#f5f4f7;border-radius:99px;max-width:400px}.replay-input input{border:0;min-width:0;width:100%;background:transparent;padding:8px 12px;font-size:14px;color:var(--ink);outline-offset:0}.replay-input .primary{font-size:12px;padding:10px 17px;gap:12px;min-height:44px}.stop-button{font-size:12px;text-decoration:underline;padding:10px 0}.workflow-visual{position:relative;padding:20px 0 58px 18px}.workflow-paper{background:#f6f2fa;border-radius:16px;padding:24px;transform:rotate(calc(-3deg + var(--arrival)*3deg));box-shadow:0 22px 50px -30px #60437840}.workflow-header{display:flex;align-items:center;gap:9px;font-size:12px}.reviewed{margin-left:auto;color:#49624f;background:#e8eee5;border-radius:6px;padding:4px 7px;font-size:9px}.workflow-paper ol{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px}.workflow-paper li{display:flex;align-items:center;gap:13px;background:white;padding:20px 16px;border-radius:10px;position:relative;transform:translateX(calc((1 - var(--arrival))*18px));transition:background .25s,transform .5s}.workflow-paper li:nth-child(2){transform:translateX(calc((1 - var(--arrival))*36px))}.workflow-paper li:nth-child(3){transform:translateX(calc((1 - var(--arrival))*54px))}.step-number{width:27px;height:27px;border:1px solid #e7e1ee;border-radius:50%;font-size:10px;display:grid;place-items:center;flex:none}.workflow-paper strong{display:block;font-size:12px;font-weight:500}.workflow-paper small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.workflow-paper li>svg,.text-symbol{margin-left:auto;color:var(--lavender);width:16px;font-size:15px}.workflow-paper li.current{background:#ede2fa}.workflow-paper li.done .step-number{background:#e1eadc;border-color:#e1eadc;color:#45604a}.workflow-outcome{margin: -8px 24px 0 auto;position:relative;width:78%;background:white;border-radius:12px;padding:20px;display:flex;align-items:center;gap:13px;box-shadow:0 14px 32px -18px #43305244;transform:rotate(-3deg);transition:transform .5s}.workflow-outcome>div>span{display:block;font-size:10px;color:var(--muted)}.workflow-outcome strong{font-size:15px;overflow-wrap:anywhere;display:block;line-height:1.4}.workflow-outcome.complete{transform:rotate(0) translateY(6px)}.success-icon{width:34px;height:34px;flex:none;background:#e6eddf;border-radius:50%;display:grid;place-items:center;color:#638257}.success-icon svg{width:18px;height:18px}
.site-footer{border-top:1px solid var(--line);padding:56px max(32px,calc((100% - 1280px)/2));display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}.site-footer>div>p{font-size:12px;color:var(--muted);margin-top:14px}.assistant-links>p{margin-top:0!important}.assistant-links>div{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}.assistant-links button{font-size:12px;padding:8px 0}.assistant-links button:hover{color:var(--coral)}.footer-bottom{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:10px;color:var(--muted)}.footer-bottom label{display:flex;align-items:center;gap:5px}.footer-bottom input{accent-color:var(--coral)}
dialog{border:0;border-radius:16px;padding:0;max-width:560px;width:calc(100% - 32px);max-height:85svh;color:var(--ink);box-shadow:0 25px 120px #21162f30;background:white}dialog::backdrop{background:#221b3445;backdrop-filter:blur(6px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}.dialog-head .brand{font-size:22px}.dialog-head button{font-size:25px;width:36px;height:36px;border-radius:50%;background:#f3f3f5}.dialog-body{padding:25px 28px}.dialog-body h2{font-size:28px;margin-bottom:15px}.dialog-body>p{font-size:14px;line-height:1.65;color:var(--muted)}details{border-bottom:1px solid var(--line)}summary{cursor:pointer;padding:17px 0;font-size:13px;font-weight:500}details p{font-size:12px;color:var(--muted);line-height:1.75;padding-bottom:16px;margin:0}.dialog-body .release-note{font-size:11px;margin-top:20px}
@media(min-width:1600px){.chapter{gap:100px}.hero{min-height:800px}}
@media(max-width:1100px){.chapter{width:calc(100% - 64px);gap:40px;grid-template-columns:.9fr 1.1fr}.story-bridge{width:calc(100% - 64px)}h1{font-size:48px}h2{font-size:43px}.brief-visual{height:440px}.request-card{padding:20px;width:100%}.request-card>p{font-size:16px}.assistant-reply{left:5%;font-size:11px}.sample-body{grid-template-columns:60px 1fr;min-height:250px}.sample-sidebar{font-size:5px}.sample-wordmark{font-size:11px}.sample-content{padding:16px 10px}.project-heading h3{font-size:11px}.mini-button{font-size:6px;padding:6px}.project-tile strong{font-size:6px}.project-tile small{font-size:5px}.transport{gap:7px;width:100%}.transport .primary{padding:10px;font-size:10px}.workflow-header{font-size:10px;gap:6px}.workflow-paper{padding:18px}.workflow-paper li{padding:16px 10px}.workflow-paper strong{font-size:11px}.style-controls{gap:15px}.export-frame{padding:20px}.export-app{min-height:230px}.export-project h3{font-size:22px}}
@media(max-width:760px){html{scroll-padding-top:24px}.site-header{min-height:74px;padding:20px 24px;gap:16px}.brand{font-size:24px}.site-header nav{display:none}.site-header>.quiet-button{margin-left:auto;font-size:11px}.chapter{width:calc(100% - 48px);display:flex;flex-direction:column;align-items:stretch;gap:32px;min-height:0;padding:56px 0}.hero{padding-top:28px;padding-bottom:36px;gap:16px}.context-label{font-size:11px;margin-bottom:16px}h1{font-size:clamp(42px,10vw,56px);line-height:1.08}h2{font-size:clamp(36px,9.5vw,48px)}.copy>p:not(.context-label):not(.small-note):not(.sample-label):not(.status-line){font-size:14px;line-height:1.75;margin-top:20px;max-width:520px}.copy>.primary{margin-top:24px}.small-note{font-size:10px}.brief-visual{height:350px;margin-top:12px;max-width:500px;width:100%;align-self:center}.preview-result{top:4%;left:18%;width:77%;height:58%;padding:14px}.result-grid{min-height:112px;padding:12px;grid-template-columns:38px 1fr;gap:12px}.result-title{font-size:10px;margin:8px 0 12px}.result-tiles i{height:38px}.result-file{margin-top:12px;font-size:7px}.request-card{top:31%;padding:18px;width:96%;left:0}.request-card>p{font-size:14px;margin:16px 0}.request-top{font-size:9px;gap:9px}.you-avatar{font-size:9px;padding:5px 8px}.request-bottom{font-size:8px;padding-top:12px}.request-bottom button{width:32px;height:32px}.assistant-reply{bottom:0;left:9%;font-size:10px;gap:6px}.assistant-reply img{width:22px;height:22px}.story-bridge{width:calc(100% - 48px);font-size:10px;gap:12px;padding:20px 0}.story-bridge i{width:40px}.capture{gap:36px}.action-list{margin-top:22px}.action-list>div{font-size:11px;padding:10px 0}.sample-label{font-size:10px;margin-top:14px}.capture-visual{max-width:520px;align-self:center;width:100%}.window-shell{padding:10px;border-radius:12px}.capture-bar{font-size:7px;gap:8px;margin-bottom:9px}.capture-bar>span:last-child{font-size:6px}.sample-body{min-height:230px;grid-template-columns:52px 1fr}.sample-titlebar{font-size:5px;height:24px;padding:0 6px}.sample-sidebar{font-size:4px;padding:12px 3px}.sample-wordmark{font-size:9px;padding:0 3px}.sample-sidebar>span{padding:3px}.workspace-member{display:none}.sample-content{padding:18px 8px}.sample-breadcrumb{font-size:5px}.project-heading h3{font-size:10px}.project-heading{gap:5px;margin-top:16px}.mini-button{font-size:5px;padding:5px}.sample-subtitle{font-size:6px}.project-grid{gap:5px;margin-top:18px}.project-tile strong{font-size:5px;margin-left:4px;margin-right:4px;white-space:normal}.project-tile small{display:none}.tile-art{height:58px}.rings:before,.rings:after{width:38px;height:38px;border-width:7px}.folded:before{width:32px;height:42px}.steps-art:before{width:35px;height:27px}.new-project-form{inset:40px 7px 12px;padding:14px}.new-project-form input{font-size:10px}.new-project-form label{font-size:10px}.new-project-form button{font-size:8px}.sample-created h3{font-size:18px}.sample-created p{font-size:9px}.demo-pointer{width:22px;height:28px}.transport{margin-top:18px;gap:7px;font-size:8px;padding:7px}.transport .primary{font-size:10px;gap:5px;padding:10px 12px}.transport .icon-button{width:25px;padding:4px}.status-line{font-size:10px;min-height:32px;margin-top:12px}.format-tabs{max-width:350px}.style-controls{gap:20px}.style-visual{min-height:400px;max-width:520px;width:100%;align-self:center}.export-frame{padding:16px}.export-app{min-height:210px;padding:14px}.export-project h3{font-size:20px}.export-project p{font-size:10px}.export-app-name{font-size:11px}.export-label{font-size:10px}.style-visual[data-format=square] .export-frame{width:290px;padding:18px}.style-visual[data-format=portrait] .export-frame{width:200px;padding:16px}.style-visual[data-format=portrait] .export-app{min-height:260px}.export-echo{inset:10% 4%}.workflow-visual{padding:12px 0 36px;max-width:520px;width:100%;align-self:center}.workflow-paper{padding:18px 14px}.workflow-header{font-size:10px}.reviewed{font-size:8px;padding:3px 5px}.workflow-header img{width:20px;height:20px}.workflow-paper li{padding:16px 12px;gap:10px}.workflow-paper strong{font-size:11px}.workflow-paper small{font-size:9px}.workflow-outcome{padding:16px;margin-right:14px;width:83%}.workflow-outcome strong{font-size:14px}.replay-input .primary{font-size:11px;padding:10px 15px}.replay-input input{font-size:13px}.site-footer{padding:40px 24px;grid-template-columns:1fr;gap:24px}.site-footer>div>p{font-size:11px}.assistant-links button{font-size:11px}.assistant-links>div{gap:15px}.footer-bottom{flex-wrap:wrap;justify-content:flex-start;gap:18px;font-size:9px}.footer-bottom>span{width:100%}.footer-bottom>a{margin-left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.chapter{--arrival:1!important;--depart:0!important}}
.motion-reduced{scroll-behavior:auto}.motion-reduced *{transition:none!important;animation:none!important}.motion-reduced .chapter{--arrival:1!important;--depart:0!important}

@media(min-width:761px){.styling .copy{grid-column:2;grid-row:1}.styling .style-visual{grid-column:1;grid-row:1}.styling{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}}

@media(min-width:761px) and (max-height:720px){.hero{padding-top:32px;padding-bottom:40px}.hero h1{font-size:52px}.hero .brief-visual{height:440px}.hero .context-label{margin-bottom:20px}.hero .copy>p.intro{margin-top:20px}.hero .copy>.primary{margin-top:22px}}

@media(max-width:1100px){.hero .brief-visual.sequence{height:520px}.sequence-titlebar{padding:0 12px;font-size:10px}#hero-rec{font-size:8px}.chat-greeting h3{font-size:25px}.composer-text{font-size:14px}.sequence .hero-projects span{font-size:9px}.sequence .hero-form{inset:25px 18px;padding:20px}.hero-result-scene{padding:24px 6%}}
@media(max-width:760px){.hero .brief-visual.sequence{height:510px;gap:9px;margin-top:18px}.sequence-titlebar{height:42px;padding:0 10px;font-size:9px}.sequence-traffic{gap:3px}.sequence-traffic i{width:5px;height:5px}#hero-rec{font-size:7px}.chat-greeting{top:44px}.chat-greeting h3{font-size:25px}.chat-composer{left:6%;right:6%;bottom:30px;padding:15px}.composer-text{font-size:14px;min-height:70px}.composer-placeholder{font-size:12px}.sent-message{right:6%;width:85%;padding:13px 15px}.sent-message p{font-size:13px}.chat-answer{left:6%;right:6%;top:155px;gap:8px}.chat-answer p{font-size:13px}.sequence .hero-workspace{padding:28px 17px}.sequence .hero-app-top strong{font-size:19px}.sequence .hero-new{font-size:9px;padding:9px}.sequence .hero-projects{gap:8px}.sequence .hero-projects i{height:95px}.sequence .hero-projects i:after{width:43px;height:43px;left:20%}.sequence .hero-projects span{font-size:8px;white-space:normal}.sequence .hero-form{inset:25px 14px;padding:20px 16px}.recording-strip{font-size:8px;padding:0 10px;gap:6px}.hero-result-scene{padding:24px 6%}.finished-video{margin-left:0}.finished-video-frame{height:190px;padding:14px}.result-summary{margin-left:0;font-size:11px}.sequence-caption{font-size:10px}.sequence-example{font-size:8px}.hero-playback{gap:8px}.hero-playback button{min-height:44px}.hero h1{font-size:clamp(42px,10.5vw,56px)}}
@media(min-width:761px) and (max-height:720px){.hero .brief-visual.sequence{height:490px;gap:8px}.hero .intro{font-size:15px!important}.sequence-titlebar{height:40px}.chat-greeting{top:25px}.chat-greeting h3{font-size:24px}.chat-composer{bottom:25px}.hero-result-scene{padding-top:18px}.finished-video-frame{height:165px}.result-summary{margin-top:12px}.sequence .hero-form{padding:20px}.sequence .hero-form label{margin-top:14px}.sequence .hero-field{margin-bottom:15px}}

/* Cursor position is measured inside the current scene. */
#hero-cursor{left:0;top:0}
/* The visitor teaches this example, so its motion follows their own choices. */
h1,h2{letter-spacing:-.04em}
.repeat{position:relative;min-height:780px;isolation:isolate}.repeat h2 span{color:var(--coral)}.try-label{display:flex;gap:9px;align-items:center;font-size:13px;margin-top:28px;font-weight:600;color:var(--coral)}.copy>p.demo-instruction{font-size:13px!important;margin-top:8px!important}.workflow-actions{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}.recorded-steps{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0;max-width:440px;font-size:11px;color:var(--muted)}.recorded-steps li{display:flex;align-items:center;gap:8px;transition:color .2s}.recorded-steps li>span{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:#eee8f8;flex:none;font-size:10px}.recorded-steps li.is-active{color:#75549a;font-weight:600}.recorded-steps li.is-active>span{background:#ddccee}.practice-stage{min-width:0;background:#eee8f8;padding:14px;border-radius:16px;box-shadow:0 22px 45px -30px #60437840;transition:background .6s}.practice-stage[data-mode=replaying]{background:#e7dff4}.practice-stage[data-mode=done]{background:#eee8f8}.practice-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;padding:4px 2px 15px;gap:8px;color:#6e5b7f}.practice-top>span:first-child{display:flex;align-items:center;gap:7px}.practice-top i{width:6px;height:6px;background:var(--coral);border-radius:50%}.practice-stage[data-mode=recording] .practice-top i{background:var(--coral)}#practice-badge{font-size:9px}.practice-coach{display:flex;align-items:center;gap:10px;font-size:12px;padding:14px 12px;background:white;border-radius:9px;margin-bottom:12px;min-height:64px}.practice-coach>span:first-child{width:26px;height:26px;display:grid;place-items:center;flex:none;color:#75549a;background:#eee8f8;border-radius:50%}.practice-coach p{line-height:1.4}.practice-coach>span:last-child{font-size:10px;color:#6e5b7f;white-space:nowrap;margin-left:auto}.practice-app{position:relative;min-height:340px;padding:22px;background:white;border-radius:10px;overflow:hidden}.practice-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:20px;border-bottom:1px solid #e9e7ed;font-size:12px}.practice-toolbar button{display:flex;align-items:center;gap:6px;border-radius:7px;padding:10px;background:#f5f4f7;font-size:11px;min-height:44px}.practice-toolbar svg{width:14px;height:14px}.practice-app button:disabled{cursor:default}.practice-home{text-align:center;padding:28px 8px}.practice-app h3{font-size:18px;letter-spacing:-.025em;line-height:1.4}.practice-home p{font-size:11px;color:var(--muted);margin-top:9px}.mini-bars{height:70px;display:flex;align-items:end;justify-content:center;gap:8px;margin-bottom:22px}.mini-bars i{width:25px;height:40%;background:#d6c5ee;border-radius:6px 6px 2px 2px}.mini-bars i:nth-child(2){height:70%;background:#ffc4b5}.mini-bars i:nth-child(3){height:55%;background:#e2cff2}.mini-bars i:nth-child(4){height:100%;background:#ffa994}#practice-report h3{margin:17px 0 16px}.practice-app fieldset{border:0;margin:0 0 14px;padding:3px;display:flex;gap:6px;flex-wrap:wrap;border-radius:7px}.practice-app legend{font-size:10px;color:var(--muted);padding:0;margin-bottom:5px}.practice-app fieldset button{min-height:38px;padding:7px 11px;font-size:10px;background:#f5f4f7;border-radius:6px;transition:background .2s}.practice-app fieldset:disabled button{opacity:.55}.practice-app fieldset button[aria-pressed=true]{background:#eee8f8;color:#75549a;opacity:1}.practice-app .next-target{outline:2px solid #8a65b4;outline-offset:4px}.practice-app .next-target button:hover{background:#eee8f8}.report-bottom{display:flex;justify-content:space-between;align-items:center;gap:9px;padding-top:12px;border-top:1px solid #e9e7ed;font-size:10px;color:var(--muted)}.report-bottom button{display:flex;align-items:center;gap:5px;padding:9px 12px;min-height:40px;border-radius:7px;background:#ffc4b5;color:#24232b;white-space:nowrap;font-size:10px}.report-bottom button:disabled{opacity:.5}.report-bottom svg{width:14px;height:14px}.practice-success{display:flex;align-items:center;flex-direction:column;padding:35px 5px 20px;text-align:center}.practice-success .success-icon{background:#eee8f8;margin-bottom:16px;width:42px;height:42px}.practice-success h3{font-size:20px}.practice-success p{font-size:12px;color:var(--muted);margin-top:6px}.practice-success button{margin-top:22px;font-size:11px;background:#f5f4f7}.practice-bottom{display:flex;align-items:center;gap:7px;padding:13px 2px 0;font-size:10px;color:#6e5b7f;min-height:32px}.practice-bottom>span:last-child{margin-left:auto;font-size:8px}.replay-pointer{position:absolute;top:0;left:0;width:28px;height:35px;fill:#8a65b4;stroke:white;stroke-width:1.5;pointer-events:none;z-index:3;transition:transform .55s cubic-bezier(.22,1,.36,1)}
/* Section backgrounds provide contrast within the existing brand palette. */
.styling{position:relative;isolation:isolate}.styling:before{content:'';position:absolute;inset:0 calc(50% - 50vw);z-index:-2;pointer-events:none;background:#f3edf9}
.outputs{display:block;padding:88px 0 110px;min-height:0}.output-heading{text-align:center;margin:auto;max-width:660px}.output-heading .context-label{justify-content:center;margin-bottom:18px}.output-heading>p:last-child{font-size:15px;line-height:1.7;color:var(--muted);max-width:550px;margin:22px auto 0}.output-heading h2 span{color:var(--coral)}.output-system{--output-accent:#75549a;--output-tint:#eee8f8;position:relative;isolation:isolate;margin-top:38px}.output-source{display:flex;align-items:center;justify-content:center;gap:12px;margin:auto;font-size:13px;font-weight:600;width:fit-content;padding:14px 23px;background:white;border:1px solid #e9e6ee;border-radius:12px}.output-branches{display:block;width:100%;height:72px;stroke:var(--output-accent);stroke-width:1;opacity:.35;transition:stroke .4s}.output-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.output-options button{display:flex;align-items:center;flex-direction:column;padding:5px 6px 17px;border-radius:12px;min-width:0;transition:background .3s,transform .3s}.output-options button:hover{transform:translateY(-5px)}.output-options button[aria-pressed=true]{background:var(--output-tint)}.output-options strong{font-size:13px;font-weight:500;margin-top:19px;line-height:1.4}.output-options small{font-size:10px;color:var(--muted);margin-top:4px}.output-art{width:108px;height:95px;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:white;box-shadow:0 6px 8px #26233310}.art-video{background:#ffc4b5;border:9px solid white}.art-video svg{width:26px;height:26px;fill:#a64c35;stroke:0}.art-video i{position:absolute;bottom:9px;left:10px;width:65%;height:3px;background:white;border-radius:2px}.art-captions{background:#eee8f8;border:9px solid white;flex-direction:column;gap:7px}.art-captions b{font-size:8px;white-space:nowrap;background:#75549a;color:white;padding:3px}.art-captions i{width:60px;height:3px;background:#d6c5ee}.art-captions i:last-child{width:37px}.art-guide{align-items:start;flex-direction:column;gap:8px;padding:17px;border-top:12px solid #d9c7ed}.art-guide b{font-size:8px}.art-guide i{height:3px;width:100%;background:#e5dfed}.art-guide i:last-child{width:60%}.art-workflow{flex-direction:column;gap:5px;align-items:stretch;padding:13px;background:#eee8f8}.art-workflow i{font-size:8px;font-style:normal;background:white;border-radius:3px;padding:1px 7px;text-align:left;color:#75549a}.art-workflow i:after{content:'';display:inline-block;width:40px;height:2px;background:#d6c5ee;vertical-align:middle;margin-left:6px}.art-project{background:#ffe5dd;display:block;padding:15px}.art-project svg{color:#a64c35;width:36px;height:36px;margin:auto}.art-project i{display:block;height:7px;background:#ffc4b5;border-radius:3px;margin-top:6px;width:90%}.art-project i:last-child{width:60%;background:#dd653d}.output-detail{margin:32px auto 0;max-width:760px;padding:24px 0 0;border-top:1px solid #e4dfea;display:flex;align-items:center;gap:30px;min-height:145px}.output-detail>div{flex:1}.output-detail>div>span{color:var(--output-accent);font-size:11px}.output-detail h3{font-family:Manrope,sans-serif;font-size:20px;line-height:1.4;letter-spacing:-.025em;margin:6px 0}.output-detail p{font-size:12px;line-height:1.7;color:var(--muted);max-width:520px}.output-detail .quiet-button{background:var(--output-tint);color:var(--output-accent);font-size:11px;display:flex;align-items:center;justify-content:center}
@media(max-width:1100px){.site-header nav{gap:16px;font-size:12px}.repeat{gap:32px}.practice-app{padding:16px}.practice-toolbar{font-size:11px}.practice-coach{font-size:11px}.practice-app fieldset{gap:5px}.practice-app fieldset button{padding:7px 9px}.recorded-steps{grid-template-columns:1fr}.output-options strong{font-size:12px}}
@media(max-width:760px){.repeat{min-height:0}.recorded-steps{grid-template-columns:1fr 1fr;font-size:10px}.practice-stage{padding:11px}.practice-app{padding:16px;min-height:350px}.practice-toolbar{font-size:11px}.practice-coach{font-size:11px;padding:12px 8px;gap:7px}.practice-coach>span:first-child{width:23px;height:23px}.practice-app fieldset button{font-size:10px;min-height:42px;padding:7px 10px}.practice-bottom{font-size:9px}.practice-bottom>span:last-child{font-size:7px}.practice-top{font-size:9px}#practice-badge{font-size:8px}.practice-success h3{font-size:19px}.output-heading{text-align:left}.output-heading .context-label{justify-content:start}.output-heading>p:last-child{font-size:14px;margin-top:20px}.outputs{padding:56px 0 64px}.output-system{margin-top:28px}.output-source{font-size:12px}.output-branches{height:45px}.output-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 5px}.output-options button{padding:6px 3px 13px}.output-options strong{font-size:10px;margin-top:12px;text-align:center}.output-options small{font-size:9px}.output-art{width:80px;height:76px;border-radius:9px}.art-captions b{font-size:6px;padding:3px 2px}.art-captions i{width:43px}.art-guide{padding:10px;gap:6px;border-top-width:9px}.art-guide b{font-size:7px}.art-workflow{padding:10px}.art-workflow i:after{width:27px;margin-left:4px}.art-project{padding:10px}.art-project svg{width:26px;height:26px}.art-project i{margin-top:4px}.output-branches{display:none}.output-source{margin-bottom:24px}.output-detail{display:block;margin-top:20px;min-height:0;padding-top:20px}.output-detail h3{font-size:20px}.output-detail p{font-size:12px}.output-detail .quiet-button{display:inline-flex;margin-top:17px;white-space:normal}.try-label{margin-top:22px}.workflow-actions{gap:8px}.workflow-actions .primary{font-size:12px}.workflow-actions .quiet-button{font-size:11px}}
.practice-result-actions{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.practice-result-actions #replay-inline{background:#ffc4b5;color:#24232b}

.outputs{position:relative;isolation:isolate}.outputs:before{content:'';position:absolute;inset:0 calc(50% - 50vw);background:#fff0eb;z-index:-2;pointer-events:none}
.story-bridge{position:relative;isolation:isolate}.story-bridge:before{content:'';position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none}#brief+.story-bridge:before{background:#f3edf9}#repeat+.story-bridge:before{background:#fff0eb}
.practice-success .success-icon{color:#75549a}.try-label{color:#75549a}
/* Recorded steps are the result of the workflow demonstration. */
.practice-success{padding:20px 0 4px;align-items:stretch;text-align:left}.practice-success>.success-icon{display:none}.practice-success h3{font-size:19px}.practice-success>p{font-size:11px;margin-top:5px}.reviewed-actions{list-style:none;counter-reset:recorded;margin:18px 0 0;padding:0;display:grid;gap:0}.reviewed-actions li{counter-increment:recorded;display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eeeaf3;font-size:12px;color:#49434f}.reviewed-actions li:before{content:counter(recorded);width:23px;height:23px;flex:none;display:grid;place-items:center;border-radius:6px;background:var(--lilac);color:var(--lavender);font-size:10px}.practice-result-actions{justify-content:flex-start;gap:8px}.practice-result-actions button{margin-top:18px;font-size:11px}.practice-result-actions #replay-inline{background:var(--primary);padding:10px 15px}
/* An export window replaces the branching output diagram. */
.export-studio{max-width:1030px;margin:38px auto 0;background:#fff;border-radius:16px;box-shadow:0 24px 60px -40px #6a3a3540;overflow:hidden}.studio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 24px;background:#fcfbfd;border-bottom:1px solid var(--line);font-size:12px}.studio-toolbar>span:first-child{display:flex;align-items:center;gap:9px;font-weight:600}.studio-toolbar>span:last-child{font-size:10px;color:var(--muted)}.studio-body{display:grid;grid-template-columns:215px minmax(0,1fr);min-height:340px}.export-studio .output-options{display:flex;flex-direction:column;gap:5px;padding:22px 14px;border-right:1px solid var(--line);background:#fcfbfd}.export-studio .output-options button{flex-direction:row;align-items:center;gap:10px;border-radius:8px;padding:13px 11px;min-height:48px;transform:none;text-align:left;transition:background .2s}.export-studio .output-options button:hover{background:#f3eff8;transform:none}.export-studio .output-options [aria-pressed=true]{background:#eee8f8}.export-studio .output-options svg{width:17px;height:17px;color:var(--lavender)}.format-glyph{font-size:9px;width:17px;font-weight:700;color:var(--lavender)}.export-studio .output-options strong{font-size:12px;font-weight:500;margin:0}.export-studio .output-options small{font-size:9px;margin:0 0 0 auto;color:#71677d}.file-preview{padding:20px 28px 24px;min-width:0;position:relative}.file-preview-bar{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#69616f;margin-bottom:17px}.file-preview-bar>span:last-child{font-size:9px;color:#73697d;white-space:nowrap}.format-preview-panel{min-height:250px;animation:file-arrives .3s ease-out}.preview-movie{background:#e9dff4;padding:19px;position:relative;border-radius:9px;width:100%;max-width:410px;margin:auto;aspect-ratio:16/9}.preview-movie-app{height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;background:white;border-radius:6px;padding:12px}.preview-movie-app>span:first-child{align-self:flex-start;font-size:9px;color:#71667b;margin-bottom:auto}.preview-movie-app .success-icon{width:26px;height:26px;margin:10px 0 7px}.preview-movie-app .success-icon svg{width:15px;height:15px}.preview-movie-app h3{font-family:Manrope,sans-serif;font-size:21px;letter-spacing:-.03em;line-height:1.3}.preview-movie-app p{font-size:10px;color:var(--muted);margin:4px 0 auto}.preview-movie-play{position:absolute;right:30px;bottom:28px;color:var(--coral);background:#fff;width:30px;height:30px;display:grid;place-items:center;border-radius:50%}.preview-movie-play svg{width:13px;height:13px;fill:currentColor;stroke:0}.movie-timeline{max-width:410px;margin:13px auto 0;display:flex;align-items:center;gap:10px;font-size:9px;color:var(--muted)}.movie-timeline i{height:3px;flex:1;background:#eee9f2;border-radius:3px;position:relative}.movie-timeline i:before{content:'';width:26%;height:100%;background:var(--coral);position:absolute;border-radius:3px}.subtitle-preview{padding:12px 10px}.subtitle-preview>span{font-family:ui-monospace,monospace;color:var(--lavender);font-size:10px}.subtitle-preview p{font-size:15px;padding:4px 0 18px;margin:0;color:#3c3546;line-height:1.5}.guide-preview{padding:10px 15px}.document-tag{font-size:10px;color:var(--lavender)}.guide-preview h3,.project-preview h3{font-family:Manrope,sans-serif;font-size:23px;line-height:1.35;letter-spacing:-.03em;margin:8px 0 17px}.guide-preview ol{margin:0;padding-left:21px;font-size:13px;color:#4b4353;line-height:2.4}.guide-preview li::marker{color:var(--lavender)}.saved-workflow-preview{padding:10px 15px}.saved-workflow-preview>div{display:flex;align-items:center;gap:9px;font-size:14px}.saved-workflow-preview>div>svg{color:var(--lavender)}.saved-workflow-preview small{margin-left:auto;color:var(--muted);font-size:10px}.saved-workflow-preview ol{list-style:none;counter-reset:previewstep;padding:0;margin:12px 0}.saved-workflow-preview li{counter-increment:previewstep;display:flex;align-items:center;gap:10px;font-size:12px;padding:9px 0;border-bottom:1px solid #eeeaf3}.saved-workflow-preview li:before{content:counter(previewstep);font-size:9px;width:20px;height:20px;display:grid;place-items:center;background:var(--lilac);color:var(--lavender);border-radius:5px}.saved-workflow-preview p{font-size:10px;line-height:1.6;color:var(--muted);margin-top:12px}.project-preview{padding:10px 8px}.project-preview h3{font-size:22px}.edit-track{display:flex;align-items:center;gap:6px;margin-top:11px;min-height:34px;font-size:10px}.edit-track>span{width:52px;flex:none;color:var(--muted)}.edit-track i{flex:1;padding:8px 10px;background:#eee8f8;border-radius:5px;font-style:normal;color:#655275;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.edit-track:nth-of-type(2) i{background:#ffe3da;color:#8d4f3b}.edit-track:nth-of-type(3) i{background:#f3f1f5}.project-preview>p{font-size:11px;color:var(--muted);margin-top:20px}.export-studio .output-detail{margin:0;max-width:none;border-top:1px solid var(--line);padding:24px 28px;min-height:145px;gap:24px}.export-studio .output-detail h3{font-size:19px}.export-studio .output-detail p{max-width:620px}.export-studio .output-detail .quiet-button{flex:none;font-size:11px;background:var(--primary);color:var(--ink)}
@keyframes file-arrives{from{opacity:.5;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.export-studio{margin-top:28px;border-radius:12px}.studio-toolbar{padding:16px;font-size:11px}.studio-toolbar>span:last-child{font-size:8px}.studio-body{display:block}.export-studio .output-options{display:flex;flex-direction:row;overflow-x:auto;gap:3px;padding:9px;border-right:0;border-bottom:1px solid var(--line)}.export-studio .output-options button{flex:none;min-height:44px;padding:9px 10px;gap:5px}.export-studio .output-options strong{font-size:10px;white-space:nowrap}.export-studio .output-options small,.export-studio .output-options svg,.export-studio .format-glyph{display:none}.file-preview{padding:17px 14px;min-height:300px}.file-preview-bar{font-size:10px;margin-bottom:14px}.file-preview-bar>span:last-child{font-size:8px}.format-preview-panel{min-height:235px}.preview-movie{margin-top:16px;padding:13px;aspect-ratio:4/3}.preview-movie-app{padding:11px}.preview-movie-app h3{font-size:20px}.preview-movie-app>span:first-child{font-size:8px}.movie-timeline{margin-top:17px}.guide-preview,.saved-workflow-preview{padding:10px 3px}.guide-preview h3{font-size:21px}.guide-preview ol{font-size:12px}.subtitle-preview{padding:8px 0}.subtitle-preview p{font-size:13px;padding-bottom:20px}.subtitle-preview>span{font-size:9px}.project-preview{padding:7px 0}.project-preview h3{font-size:20px}.edit-track{font-size:9px;gap:4px}.edit-track>span{width:44px}.edit-track i{padding:8px 5px}.export-studio .output-detail{padding:20px;min-height:0}.export-studio .output-detail h3{font-size:19px}.export-studio .output-detail .quiet-button{margin-top:16px}.practice-success h3{font-size:18px}.practice-success>p{font-size:10px}.reviewed-actions li{font-size:11px}.practice-result-actions{gap:6px}.practice-result-actions button{font-size:10px;padding:9px 11px}.practice-result-actions #replay-inline{padding:9px 11px}}
@media(max-width:760px){.export-studio .output-options{gap:1px;padding:8px 5px}.export-studio .output-options button{flex:1;justify-content:center;padding:9px 5px;min-width:0}.export-studio .output-options strong{font-size:9px}}
/* Explicit handover from the visitor to the replay. */
.workflow-phases{display:flex;list-style:none;padding:0 0 16px;margin:0;gap:5px}.workflow-phases li{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;font-size:10px;color:#6d6379;padding:9px 6px;border-radius:8px;line-height:1.4}.workflow-phases li>span{font-size:9px;width:18px;height:18px;display:grid;place-items:center;flex:none;border-radius:50%;background:#e3d9ef;color:#655177}.workflow-phases .is-current{background:white;color:#3e304c;font-weight:600}.workflow-phases .is-current>span{background:var(--primary);color:var(--ink)}.workflow-phases .is-complete>span{background:#d6c5ee}.practice-coach{align-items:flex-start;min-height:83px;padding:16px 13px;gap:11px}.coach-message{flex:1;min-width:0}.coach-message strong{display:block;font-size:13px;font-weight:600;line-height:1.45;color:var(--ink);margin-bottom:5px}.coach-message p{font-size:11px;color:#6c5a7b;line-height:1.5}.practice-coach>span:first-child{margin-top:1px}.practice-coach>span:last-child{padding-top:3px}.practice-stage[data-mode=recording] #practice-badge{color:#a5472e;font-weight:600}.practice-stage[data-mode=replaying] #practice-badge{color:#68468b;font-weight:600}.practice-stage[data-mode=replaying] .practice-coach{background:#fdfaff;box-shadow:inset 0 0 0 1px #d4bfe9}.practice-app .replay-target,.practice-app fieldset:disabled .replay-target{opacity:1!important;background:#ffe2d8!important;color:var(--ink)!important;box-shadow:0 0 0 2px #dd653d;transition:transform .15s,background .15s}.practice-app .replay-press{transform:scale(.97);background:var(--primary)!important}.replay-pointer{width:120px;height:60px;overflow:visible;display:block;fill:var(--coral);stroke:white;pointer-events:none}.replay-pointer>svg{display:block;width:28px;height:35px;fill:var(--coral);stroke:white;stroke-width:1.5}.replay-pointer>span{position:absolute;left:23px;top:28px;padding:3px 7px;border-radius:5px;background:var(--lavender);color:white;font-size:9px;white-space:nowrap;line-height:1.5}.practice-bottom{min-height:46px;gap:8px}.practice-bottom #practice-footer{font-size:10px;line-height:1.5;flex:1;color:#584566}.practice-bottom #stop-workflow{min-height:32px;padding:6px 10px;font-size:10px;background:white;color:var(--lavender);flex:none}
.pdf-preview-page{max-width:360px;margin:0 auto;padding:18px 22px 13px;background:#fff;box-shadow:0 2px 8px #44324f16;border-top:3px solid var(--coral)}.pdf-page-brand{display:flex;align-items:center;font-family:Manrope,sans-serif;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.04em}.pdf-page-brand>span{color:var(--coral)}.pdf-page-brand>small{margin-left:auto;font:9px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;color:var(--muted)}.pdf-preview-page h3{font:700 21px/1.4 Manrope,sans-serif;letter-spacing:-.03em;margin:18px 0 4px}.pdf-preview-page>p{font-size:10px;color:var(--muted);line-height:1.5}.pdf-preview-page ol{font-size:11px;line-height:1.5;color:#53455d;margin:16px 0 20px;padding-left:19px}.pdf-preview-page li{padding:4px 0}.pdf-preview-page li::marker{color:var(--lavender)}.pdf-page-footer{display:flex;justify-content:space-between;gap:8px;font-size:8px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
@media(max-width:760px){.workflow-phases{gap:3px;padding-bottom:11px}.workflow-phases li{font-size:9px;flex-direction:column;gap:5px;padding:7px 3px;text-align:center}.workflow-phases li>span{width:19px;height:19px}.practice-coach{min-height:92px;padding:13px 10px;gap:7px}.coach-message strong{font-size:12px}.coach-message p{font-size:10px}.practice-coach>span:first-child{width:21px;height:21px}.practice-coach>span:last-child{font-size:9px}.practice-bottom #practice-footer{font-size:9px}.replay-pointer>span{font-size:8px;left:12px;top:27px;transform:translateX(-60%)}.pdf-preview-page{padding:16px 15px 12px}.pdf-preview-page h3{font-size:20px}.pdf-page-brand{font-size:15px}.export-studio .output-options{flex-wrap:wrap;gap:3px}.export-studio .output-options button{flex:1 0 29%;min-height:40px;padding:8px 5px}.export-studio .output-options strong{font-size:10px}}
.replay-pointer>span{left:0;transform:translateX(-65%)}
/* A task you can recognise, demonstrate and watch again. */
.repeat{grid-template-columns:.78fr 1.22fr;gap:56px;min-height:780px}.task-invitation{margin-top:32px;padding-left:18px;border-left:3px solid var(--primary);max-width:340px}.task-invitation>span{font-size:12px;font-weight:700;color:var(--coral)}.task-invitation p{font-size:14px;line-height:1.7;margin-top:7px;color:var(--muted)}
.task-demo{min-width:0;border:1px solid #e9e1f2;background:#f3edf9;border-radius:22px;padding:16px;box-shadow:0 22px 55px -36px #4e346249}.task-coach{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 5px 22px;min-height:118px}.task-coach>div{min-width:0}.task-coach #workflow-actor{display:block;font-size:9px;font-weight:700;letter-spacing:.08em;color:#806292;margin-bottom:8px}.task-coach strong{display:block;font-size:17px;line-height:1.4;letter-spacing:-.025em}.task-coach p{font-size:11px;color:#746880;line-height:1.6;margin-top:5px;max-width:280px}.task-coach .primary{font-size:11px;min-height:43px;padding:12px 16px;gap:9px;flex:none;white-space:nowrap}.task-coach .primary svg{width:15px;height:15px}.task-coach .quiet-button{font-size:11px;flex:none;background:white}
.task-app{background:white;border:1px solid #e9e4ee;border-radius:12px;overflow:hidden;position:relative;min-height:360px}.task-app-chrome{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ece8ef;padding:17px 19px}.task-app-chrome strong{font-size:14px;letter-spacing:-.04em}.task-app-chrome strong>span{font-size:10px;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:8px}.task-app-chrome small{font-size:9px;color:#8a7f91}.task-board-heading{padding:22px 19px 20px;display:flex;align-items:center;justify-content:space-between}.task-board-heading h3{font-size:19px;letter-spacing:-.035em}.task-board-heading>span{font-size:9px;color:var(--muted)}.task-board{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:0 17px 25px;min-height:244px}.task-column{min-width:0;background:#f8f7fa;padding:10px;border-radius:8px}.task-column h4{font-size:11px;display:flex;align-items:center;gap:6px;margin-bottom:12px;font-weight:600}.task-column h4>span{margin-left:auto;color:#9a909f;font-size:9px}.task-column h4>i{width:6px;height:6px;background:#c9bfce;border-radius:50%}.done-column h4>i{background:#9c80b6}.task-card{border:1px solid #e8e3ed;background:white;border-radius:7px;padding:13px;text-align:left;display:block;width:100%;margin-top:9px;box-shadow:0 2px 3px #38204704}.task-card strong{display:block;font-size:12px;line-height:1.5}.task-tag{font-size:7px;color:#a45e4b;letter-spacing:.05em;background:#fff0eb;padding:3px 5px;border-radius:3px;display:inline-block;margin-bottom:7px}.task-card p{font-size:9px;line-height:1.6;color:var(--muted);margin:5px 0 13px}.task-card-meta{display:flex;gap:6px;justify-content:space-between;font-size:8px;color:#807287}.task-click-hint{display:block;font-size:9px;color:#98674f;font-weight:600;margin-top:12px}.launch-card:disabled{cursor:default;opacity:1}.launch-card.task-finished{border-color:#c8b2dc;background:#fdfbff}.task-finished .task-click-hint{display:none}.task-finished strong:before{content:'✓ ';color:#8a65b4}.background-task{padding:12px;box-shadow:none}.background-task strong{font-size:10px;color:#746a7c;font-weight:500}.background-task>span{display:block;font-size:8px;color:#a398aa;margin-top:8px}.done-placeholder{font-size:10px;color:#a69aaf;line-height:1.6;padding:24px 5px;text-align:center}
.task-inspector{position:absolute;inset:57px 15px 15px;background:white;z-index:2;border:1px solid #e3d9ec;border-radius:9px;box-shadow:0 12px 55px #35244026;padding:21px 23px;animation:task-open .3s ease-out}.inspector-title{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#98869f;letter-spacing:.05em}.inspector-title small{background:#f3edf9;padding:4px 7px;border-radius:4px;color:#75549a;font-size:9px}.task-inspector h3{font-size:23px;letter-spacing:-.035em;margin:12px 0 5px}.task-inspector>p{font-size:10px;color:var(--muted);margin-bottom:19px}.task-inspector fieldset{border:0;padding:0;margin:0 0 16px;display:flex;gap:8px;border-radius:6px}.task-inspector legend{font-size:10px;color:#7c7186;margin-bottom:9px}.task-inspector fieldset button{display:flex;align-items:center;gap:7px;padding:7px 12px;min-height:36px;border:1px solid #e9e3ef;border-radius:6px;font-size:11px;background:white}.task-inspector fieldset:disabled button{color:#9b90a4;cursor:default}.task-inspector fieldset button[aria-pressed=true]{background:#eee5f8;border-color:#cbb3df;color:#624080}.person-avatar{display:grid;place-items:center;border-radius:50%;width:21px;height:21px;background:#f3eaf9;color:#816195;font-size:9px}.task-complete{font-size:11px;padding:10px 16px;min-height:39px;gap:8px;margin-top:4px}.task-complete svg{width:14px;height:14px}.task-complete:disabled{opacity:.5;cursor:default}.task-app .next-target{outline:2px solid #dd653d;outline-offset:4px}.task-app .replay-target{box-shadow:0 0 0 2px #dd653d;background:#fff0eb!important;color:var(--ink)!important;opacity:1!important}.task-app .replay-press{transform:scale(.97)}.task-app .replay-pointer{z-index:5}.task-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 4px 2px;font-size:10px;color:#867291;min-height:40px}.task-demo-footer button{font-size:10px;white-space:nowrap;text-decoration:underline;min-height:30px;color:#76568d}.task-recording-details{padding:14px 4px 2px;border-top:1px solid #e3d9ed;margin-top:10px;font-size:11px;color:#7d648d}.task-recording-details summary{cursor:pointer}.task-recording-details ol{padding-left:20px;line-height:2;margin:12px 0}.task-recording-details button{font-size:10px;text-decoration:underline;min-height:30px}.task-demo[data-mode=recording] #workflow-actor{color:#b85a3c}.task-demo[data-mode=replaying] .task-coach{border-color:#c7afdf}
@keyframes task-open{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.repeat{gap:32px;grid-template-columns:.7fr 1.3fr}.task-coach{flex-wrap:wrap;gap:13px}.task-coach p{max-width:none}.task-coach .primary{padding:10px 15px}.task-board{gap:8px;padding:0 12px 18px}.task-column{padding:8px}.task-card{padding:10px}.task-card-meta{flex-wrap:wrap}}
@media(max-width:760px){.repeat{grid-template-columns:1fr;min-height:0;gap:29px}.task-invitation{margin-top:23px;max-width:100%}.task-demo{padding:10px;border-radius:17px}.task-coach{min-height:130px;padding:9px 6px 19px}.task-coach strong{font-size:17px}.task-coach p{font-size:11px}.task-app-chrome{padding:15px 12px}.task-app-chrome strong>span{margin-left:3px;font-size:9px}.task-board-heading{padding:20px 12px 18px;gap:8px}.task-board-heading h3{font-size:17px}.task-board-heading>span{font-size:8px;white-space:nowrap}.task-board{padding:0 9px 16px;gap:7px;min-height:261px}.task-column{padding:7px}.task-card{padding:9px}.task-card strong{font-size:11px}.background-task strong{font-size:9px}.task-card p{font-size:9px}.task-card-meta{font-size:8px;gap:4px}.task-inspector{inset:54px 10px 12px;padding:17px}.task-inspector h3{font-size:22px}.task-demo-footer{font-size:9px;align-items:flex-start}.task-demo-footer span{padding-top:8px;line-height:1.5}.task-app .replay-pointer>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.task-inspector{animation:none}.task-app .replay-pointer{transition:none}}
.motion-reduced .task-inspector{animation:none}
/* The captured screen becomes the editor preview without changing scenes. */
.sequence{--editor-progress:0;--timeline-arrival:0;--editor-playhead:98%}.sequence .hero-workspace{z-index:2;background:#fff;transform-origin:50% 0;transform:translateY(calc(var(--editor-progress)*46px)) scale(calc(1 - var(--editor-progress)*.48));border-radius:calc(var(--editor-progress)*12px);box-shadow:0 4px 16px rgb(64 40 78 / calc(var(--editor-progress)*.10))}.sequence .hero-workspace:after{content:'';position:absolute;inset:3px;border:2px solid #dd653d;border-radius:9px;pointer-events:none;z-index:4;opacity:calc(1 - var(--editor-progress))}.sequence .recording-strip{position:absolute;bottom:0;left:0;right:0;height:48px;background:#fff0eb;border-top:1px solid #f2c4b8;color:#8e4a38;gap:12px;opacity:calc(1 - var(--editor-progress));transform:translateY(calc(var(--editor-progress)*48px));z-index:3;font-size:10px}.recording-label{display:flex;align-items:center;gap:7px;flex:none;color:#a8472c;font-size:11px;font-variant-numeric:tabular-nums}.recording-label i{width:8px;height:8px;border-radius:50%;background:#dd653d;animation:recording-pulse 1.1s ease-in-out infinite}.recording-label strong{font-size:10px;letter-spacing:.03em}#hero-record-time{font-variant-numeric:tabular-nums;min-width:26px}.sequence .recording-strip .recording-stop{margin-left:auto;width:9px;height:9px;background:#dd653d;border-radius:2px;flex:none}.sequence[data-scene=work] #hero-rec{padding:4px 8px;background:#fff0eb;border-radius:5px;font-weight:600;color:#a8472c}.sequence[data-phase=zoomout] #hero-rec,.sequence[data-phase=editor] #hero-rec{background:#eee8f8;color:#75549a}.sequence[data-phase=zoomout] #hero-rec:before,.sequence[data-phase=editor] #hero-rec:before{background:#9f80b9}.sequence[data-phase=zoomout] .hero-cursor,.sequence[data-phase=editor] .hero-cursor{opacity:0}.sequence.is-paused .recording-label i{animation-play-state:paused}
.hero-editor-chrome{position:absolute;inset:0;opacity:var(--editor-progress);background:#faf8fc;pointer-events:none}.editor-top{height:38px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;font-size:10px;background:white;border-bottom:1px solid #eee8f2}.editor-top>span:first-child{display:flex;align-items:center;gap:6px;font-weight:600}.editor-export{border-radius:5px;padding:4px 8px;background:#ffc4b5;color:#773b2b;font-size:9px}.editor-preview-mat{position:absolute;inset:38px 0 145px;background:#eee8f8}.editor-preview-label{position:absolute;left:14px;right:14px;bottom:149px;display:flex;justify-content:space-between;gap:6px;font-size:8px;color:#8b7b97}.hero-editor-timeline{position:absolute;bottom:0;left:0;right:0;height:145px;z-index:3;background:white;border-top:1px solid #ded4e8;opacity:var(--timeline-arrival);transform:translateY(calc((1 - var(--timeline-arrival))*45px));pointer-events:none}.editor-transport{height:29px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee9f3;font-size:8px;color:#88768e}.editor-transport>span:first-child{color:#80638f;word-spacing:5px}.editor-transport b{font-weight:500;color:#4c4057;font-variant-numeric:tabular-nums}.editor-tracks{position:relative;padding:0 12px 8px 70px}.timeline-ruler{display:flex;justify-content:space-between;height:22px;align-items:center;font-size:7px;color:#9b8ba8;font-variant-numeric:tabular-nums}.timeline-ruler span{position:relative}.timeline-ruler span:after{content:'';width:1px;height:4px;background:#d5c9dd;position:absolute;left:0;bottom:-4px}.editor-track{position:relative;margin-bottom:5px;height:20px}.track-name{position:absolute;left:-58px;top:0;width:50px;height:100%;display:flex;align-items:center;gap:5px;font-size:8px;color:#8a7798}.track-name svg{width:10px;height:10px}.video-track{height:35px}.video-clip{height:100%;position:relative;display:flex;gap:3px;padding:3px;background:#d8c5eb;border:1px solid #b89ad2;border-radius:4px;overflow:hidden}.clip-thumb{flex:1;min-width:0;background:#f7f3fb;border-radius:2px;display:flex;align-items:center;justify-content:center}.clip-thumb b{display:block;width:48%;height:67%;background:#fff;border:2px solid #e8dfef;border-radius:2px;position:relative}.clip-thumb b:after{content:'';position:absolute;left:20%;right:20%;top:35%;height:3px;background:#d6c3e5;box-shadow:0 5px #ede3f4}.clip-thumb:first-child b{background:#ffe6dc}.clip-thumb:nth-child(4) b,.clip-thumb:nth-child(5) b{background:#f0e5fa}.video-clip>span{position:absolute;left:9px;bottom:5px;font-size:7px;background:#6f4a8bee;color:white;padding:2px 5px;border-radius:2px}.zoom-clips{display:flex;align-items:center;gap:9%;height:100%;padding:0 6%}.zoom-clips span{height:17px;flex:1;white-space:nowrap;background:#ffe2d6;color:#a65c41;border-radius:3px;font-size:7px;text-align:center;line-height:17px}.cursor-clip{height:17px;background:#f2edf7;color:#987ca9;font-size:7px;padding:2px 7px;border-radius:3px;display:flex;align-items:center;gap:4px}.cursor-clip svg{width:9px;height:9px;color:#dd653d}.editor-playhead{position:absolute;top:14px;bottom:9px;left:calc(70px + (100% - 82px)*.98);width:1px;background:#dd653d;z-index:2}.editor-playhead i{position:absolute;top:0;left:-3px;width:7px;height:7px;background:#dd653d;clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%)}
@keyframes recording-pulse{50%{opacity:.4}}
@media(max-width:760px){.sequence .recording-strip{padding:0 10px;gap:8px;font-size:8px}.recording-label{font-size:10px;gap:5px}.recording-label strong{font-size:9px}.recording-label i{width:7px;height:7px}.sequence[data-scene=work] #hero-rec{padding:3px 5px;font-size:7px}.editor-top{font-size:9px;padding:0 9px}.editor-export{font-size:8px}.editor-preview-label{font-size:7px}.editor-tracks{padding-left:58px;padding-right:8px}.track-name{left:-49px;width:43px;font-size:7px;gap:3px}.track-name svg{width:9px}.zoom-clips{gap:5%;padding:0 2%}.zoom-clips span{font-size:6px}.video-clip>span{font-size:6px;left:5px}.editor-playhead{left:calc(58px + (100% - 66px)*.98)}.sequence .hero-workspace{transform:translateY(calc(var(--editor-progress)*46px)) scale(calc(1 - var(--editor-progress)*.48))}}
@media(prefers-reduced-motion:reduce){.recording-label i{animation:none}}
.motion-reduced .recording-label i{animation:none}
/* Placeholder app content keeps attention on the recording, cursor and editor. */
.mock-line{display:block;height:9px;width:70%;border-radius:4px;background:#e1dce8}.mock-heading{height:14px;width:40%;background:#a89bb8}.sequence .hero-workspace{padding-left:100px}.mock-sidebar{position:absolute;left:0;top:0;bottom:0;width:76px;background:#f7f5fa;border-right:1px solid #eee9f3;padding:30px 15px;display:flex;flex-direction:column;gap:19px}.mock-sidebar i,.mock-sidebar b{display:block;width:100%;height:7px;background:#ded7e8;border-radius:4px}.mock-sidebar .mock-brand{width:23px;height:23px;background:#b9a1d0;border-radius:7px;margin-bottom:20px}.mock-sidebar b{margin-top:auto;width:24px;height:24px;border-radius:50%;background:#e7ddd5}.sequence .hero-new{display:flex;align-items:center;gap:7px;min-width:85px;min-height:34px}.hero-new .mock-line{height:6px;width:37px;background:#b09bc3}.hero-new b{font-size:14px;color:#826599;line-height:1}.hero-projects .mock-card-lines{padding:0 2px}.mock-card-lines b{display:block;background:#dfd9e7;border-radius:3px;width:78%;height:7px;margin-bottom:7px}.mock-card-lines b:last-child{width:52%;height:5px;background:#eeeaf2}.mock-table{margin-top:24px;border-top:1px solid #eee9f2}.mock-table>div{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #f1edf5}.mock-table i{width:17px;height:17px;border-radius:5px;background:#eee7f5}.mock-table b{width:43%;height:6px;border-radius:3px;background:#dfd8e7}.mock-table span{margin-left:auto;width:15%;height:12px;border-radius:4px;background:#f4e2db}.sequence .hero-form{inset:45px 30px 42px 98px;display:flex;flex-direction:column;justify-content:center;z-index:2}.sequence .hero-form[hidden]{display:none}.hero-form .mock-heading{margin-bottom:32px;width:55%}.hero-form .mock-field-label{height:7px;width:25%;margin-bottom:12px}.sequence .hero-field{display:flex;align-items:center;gap:3px;flex:none}.hero-field #hero-typed{width:52%;height:8px;background:#aa98bc;transform-origin:left center}.hero-field i{display:inline-block}.sequence .hero-create{width:94px;min-height:32px;display:grid;place-items:center}.hero-create .mock-line{width:58px;height:7px;background:#ad97c2}.sequence .hero-success{left:76px;padding:25px;gap:16px}.hero-success .mock-heading{width:48%;height:14px}.hero-success .mock-success-detail{width:33%;height:7px;background:#e7e1ed}.mock-result-cards{display:flex;gap:12px;width:100%;margin-top:15px}.mock-result-cards>div{flex:1;min-width:0;border:1px solid #eee8f3;border-radius:8px;padding:10px}.mock-result-cards i{display:block;height:52px;border-radius:5px;background:#ecdff5;margin-bottom:12px}.mock-result-cards>div:nth-child(2) i{background:#f6d7cc}.mock-result-cards>div:nth-child(3) i{background:#e2e9da}.mock-result-cards b{display:block;height:6px;border-radius:4px;background:#ded6e7;margin:7px 0;width:85%}.mock-result-cards b:last-child{width:55%;background:#eee9f3}.mock-mini{display:flex;width:100%;min-height:200px;flex:1;overflow:hidden;border:1px solid #eee9f3;border-radius:6px}.mock-mini-nav{width:17%;background:#f7f4fa;padding:15px 8px}.mock-mini-nav i{display:block;width:16px;height:16px;background:#b8a1cd;border-radius:5px;margin-bottom:22px}.mock-mini-nav b{display:block;width:100%;height:5px;background:#ddd4e6;border-radius:3px;margin:13px 0}.mock-mini-main{flex:1;padding:23px 14px;min-width:0}.mock-mini-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.mock-mini-heading i{width:45%;height:9px;border-radius:3px;background:#b3a3c1}.mock-mini-heading b{width:22%;height:17px;border-radius:4px;background:#e6d9f1}.mock-mini-cards{display:flex;gap:8px}.mock-mini-cards i{flex:1;height:54px;background:#f1d3c9;border-radius:5px}.mock-mini-cards i:nth-child(2){background:#e4d8ef}.mock-mini-cards i:nth-child(3){background:#dfe8d8}.mock-mini-rows{margin-top:20px}.mock-mini-rows i{display:block;height:6px;background:#e4deeb;border-radius:3px;margin:11px 0;width:83%}.mock-mini-rows i:nth-child(2){width:65%}.preview-movie-app .mock-mini{min-height:0;height:100%}.preview-movie-app .mock-mini-main{padding:12px}.preview-movie-app .mock-mini-heading{margin-bottom:12px}.preview-movie-app .mock-mini-cards i{height:30px}.preview-movie-app .mock-mini-rows{margin-top:10px}.preview-movie-app .mock-mini-rows i{height:4px;margin:8px 0}.style-visual[data-format=portrait] .mock-mini-nav{display:none}.style-visual[data-format=portrait] .mock-mini-main{padding:26px 10px}.style-visual[data-format=portrait] .mock-mini-cards{flex-direction:column}.style-visual[data-format=portrait] .mock-mini-cards i{flex:none;height:35px}.style-visual[data-format=portrait] .mock-mini-rows{margin-top:16px}
@media(max-width:760px){.sequence .hero-workspace{padding-left:68px}.mock-sidebar{width:51px;padding:28px 11px;gap:17px}.mock-sidebar .mock-brand{width:20px;height:20px}.sequence .hero-projects i{height:76px}.sequence .hero-projects i:after{width:32px;height:32px;border-width:6px;left:18%;top:22px}.sequence .hero-new{min-width:62px;padding:8px;gap:4px}.hero-new .mock-line{width:25px}.sequence .hero-form{inset:38px 14px 42px 63px;padding:20px 14px}.sequence .hero-success{left:51px;padding:17px;gap:15px}.mock-result-cards{gap:6px}.mock-result-cards>div{padding:6px}.mock-result-cards i{height:42px}.mock-table>div{padding:12px 0}.mock-heading{width:42%;height:11px}}