:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#f2f2f5;background:#101218;--muted:#93969f;--line:#2c2f37;--accent:#dfdbfa}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse 55% 440px at 50% 430px,#30314360,transparent),#101218}[hidden]{display:none!important}button,input,textarea{font:inherit}button,a,label{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #aaa2cf;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip:focus{clip:auto;width:auto;height:auto;padding:14px;background:#fff;color:#111;z-index:10}.topbar{height:94px;max-width:1376px;margin:auto;padding:0 42px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:25px;font-weight:650;letter-spacing:-1px}.brand svg{width:27px;height:27px;color:var(--accent)}.brand-dot{color:var(--accent);margin-left:-9px}.edition{display:flex;align-items:center;gap:8px;color:#a7a8b0;font-size:12px}.edition i,.preview-footer i{width:5px;height:5px;border-radius:50%;background:#aba6ca;display:inline-block}.text-button{background:none;border:0;color:#c7c5d4;font-size:13px;min-height:44px}.text-button span{margin-left:20px}.hero{max-width:854px;margin:auto;padding:58px 36px 0;text-align:center}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#c3bfd5;display:flex;align-items:center;justify-content:center;gap:8px}.star{font-size:19px;color:#d7d2f0}h1{font-size:68px;line-height:1.07;font-weight:500;letter-spacing:-3.4px;margin:25px 0 19px}h1 span{color:#9c99b0}.lead{font-size:17px;line-height:1.65;color:#a9a8b4;margin:0 0 33px}.composer-shell{padding:1px;border-radius:20px;background:linear-gradient(145deg,#66637580,#38394570 50%,#494754);box-shadow:0 22px 70px #00000040,0 0 65px #a9a4e708}.composer-shell form{background:#1c1e27;border-radius:19px;padding:24px;text-align:left}#prompt{background:none;color:#f3f2fa;border:0;resize:vertical;width:100%;font-size:17px;line-height:1.6;min-height:107px;max-height:270px;padding:0}textarea::placeholder,input::placeholder{color:#868794}.composer-bar{display:flex;align-items:center;gap:15px;margin-top:19px}.attach{display:flex;align-items:center;gap:7px;min-height:42px;color:#c8c7d0;font-size:12px;cursor:pointer}.attach svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.page-type{font-size:11px;color:#747582;border-left:1px solid #373943;padding-left:15px}.primary{display:flex;align-items:center;justify-content:center;gap:27px;margin-left:auto;min-height:44px;padding:12px 17px;background:var(--accent);color:#22212b;border:1px solid #e5e0ff;border-radius:9px;font-size:13px;font-weight:600;box-shadow:0 2px 6px #0003}.primary span{font-size:20px;line-height:16px}.primary:hover{background:#eeeafe}#file-list{color:#c5c2d4;font-size:12px;padding-left:18px;line-height:1.7;overflow-wrap:anywhere}#file-list:empty{display:none}#notice{font-size:12px;line-height:1.6;color:#e3c891;text-align:left;margin-top:12px}#notice:empty{display:none}.prototype-note{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:#878794;margin:16px 0 0;line-height:1.5}.small-orbit{width:10px;height:10px;border:1px solid #767484;border-radius:50%}.suggestions{display:flex;align-items:center;justify-content:center;gap:8px;margin:28px 0 0}.suggestions>span{font-size:11px;color:#686a77;margin-right:4px}.suggestions button{border:1px solid #30323d;background:#191b22;color:#bebcc9;padding:9px 12px;border-radius:7px;font-size:11px;min-height:36px}.suggestions button span{color:#777685;margin-left:12px}.suggestions button:hover{border-color:#676175;background:#242530}footer{max-width:1292px;margin:auto;padding:25px 42px;border-top:1px solid #262832;display:flex;justify-content:space-between;gap:18px;color:#656675;font-size:10px;line-height:1.5}#studio{max-width:1376px;margin:22px auto 45px;padding:0 42px}.studio-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:20px}.studio-kicker{font-size:9px;letter-spacing:1.5px;color:#787786}.studio-header h1{font-size:25px;line-height:1.2;letter-spacing:-.8px;margin:7px 0 0;max-width:650px;overflow-wrap:anywhere}.device-switch{display:flex;background:#1a1c24;border:1px solid #30323e;padding:4px;border-radius:8px}.device-switch button{background:none;border:0;color:#888895;padding:9px 13px;border-radius:5px;font-size:11px;min-height:34px}.device-switch button[aria-pressed=true]{background:#34323f;color:#e8e4f5}.studio-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}.conversation{border:1px solid #2d2f3b;border-radius:12px;padding:20px;background:#191b23}.conversation-top{font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:25px}#messages{max-height:330px;overflow:auto;scrollbar-width:thin;scrollbar-color:#464252 #191b23}.message{font-size:12px;line-height:1.7;color:#b4b0c2;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 18px;padding:12px 13px;border-radius:10px;background:#242630}.message.response{background:none;border-left:1px solid #565066;border-radius:0;padding:0 0 0 13px;color:#92909f}#edit-form{border:1px solid #44404f;border-radius:10px;background:#22232d;padding:13px;margin-top:20px}#edit-prompt{border:0;background:none;color:#eeebf6;width:100%;min-height:75px;resize:vertical;font-size:12px;line-height:1.7;padding:0}.edit-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}#edit-count{font-size:10px;color:#827c92}#edit-submit{border:0;background:var(--accent);color:#282132;border-radius:7px;width:34px;height:34px;font-size:20px}.studio-note{font-size:10px;color:#777181;line-height:1.6;margin:12px 2px 0}.preview-panel{border:1px solid #34333f;border-radius:12px;overflow:hidden;background:#181a22}.browser-bar{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid #34333f;font-size:10px;color:#8b8798}.browser-dots{display:flex;gap:5px}.browser-dots i{width:5px;height:5px;border-radius:50%;background:#5b5767}.browser-bar a{text-decoration:none;font-size:18px;width:30px;min-height:30px;display:flex;align-items:center;justify-content:center}.preview-stage{background:#25262f;padding:0;display:flex;justify-content:center;min-height:610px}iframe{display:block;width:100%;height:610px;border:0;background:#f5f0e8}.preview-stage.phone{padding:18px}.preview-stage.phone iframe{width:350px;border-radius:15px;max-width:100%}.preview-footer{padding:12px 17px;display:flex;align-items:center;justify-content:space-between;color:#7e798b;font-size:9px}.preview-footer span:first-child{display:flex;align-items:center;gap:7px}.domain{max-width:780px;margin:22px 0 0 auto;border:1px solid #30303c;border-radius:10px;padding:16px 18px}.domain summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none;font-size:12px;color:#bbb5ca;min-height:24px;align-items:center}.domain summary::-webkit-details-marker{display:none}#domain-form{display:flex;gap:10px;margin-top:17px}#domain{width:100%;min-width:0;background:#20212a;border:1px solid #44404f;border-radius:7px;padding:12px;color:#e7e1f0;font-size:12px}.secondary{border:1px solid #625970;color:#d5cde2;background:#292632;border-radius:7px;min-height:42px;padding:10px 20px;font-size:12px}#domain-status{color:#958b9f;font-size:12px;line-height:1.6;margin:12px 0 0}#domain-status:empty{display:none}@media(max-width:700px){.topbar{height:78px;padding:0 22px}.brand{font-size:22px}.brand svg{width:24px}.edition{font-size:10px}.hero{padding:44px 20px 0}.eyebrow{font-size:8px;letter-spacing:1.35px;gap:6px}.star{font-size:16px}h1{font-size:43px;letter-spacing:-2px;line-height:1.12;margin:23px 0 17px}.lead{font-size:14px;max-width:270px;margin:0 auto 28px;line-height:1.7}.composer-shell form{padding:19px}#prompt{font-size:15px;min-height:135px}.composer-bar{gap:9px;margin-top:15px}.page-type{display:none}.attach{font-size:10px;gap:5px}.attach svg{width:15px}.primary{font-size:11px;gap:14px;padding:10px 12px;min-height:42px}.primary span{font-size:17px}.prototype-note{font-size:9px;gap:5px;line-height:1.7;margin:13px auto 0;max-width:280px}.small-orbit{flex-shrink:0}.suggestions{flex-wrap:wrap;gap:7px;margin-top:24px}.suggestions>span{width:100%;margin:0 0 3px;font-size:10px}.suggestions button{font-size:10px;padding:8px 9px;min-height:34px}.suggestions button span{margin-left:7px}.topbar:has(+main[hidden]) .edition{display:none}footer{padding:22px;align-items:flex-start;font-size:9px}footer span:last-child{max-width:145px;text-align:right}#studio{padding:0 18px;margin:20px auto 35px}.studio-header{align-items:flex-start;flex-wrap:wrap;gap:15px;margin-bottom:20px}.studio-header h1{font-size:23px;max-width:330px}.device-switch{padding:3px}.device-switch button{min-height:32px;font-size:10px;padding:8px 14px}.studio-grid{grid-template-columns:1fr;gap:16px}.preview-panel{grid-row:1}.conversation{padding:18px}.preview-stage,iframe{min-height:430px;height:430px}.preview-stage.phone{padding:10px}.preview-stage.phone iframe{width:290px}#messages{max-height:150px}.conversation-top{margin-bottom:17px}.message{font-size:12px;margin-bottom:13px}#edit-prompt{font-size:13px;min-height:65px}#edit-submit{width:40px;height:40px}#edit-count{font-size:11px}.domain{margin-top:18px;padding:15px}#domain-form{gap:8px}.secondary{padding:10px 15px}}@media(max-width:350px){.topbar{padding:0 17px}.edition{font-size:9px;gap:5px}.hero{padding-left:16px;padding-right:16px}h1{font-size:37px}.composer-shell form{padding:16px}.attach{font-size:9px}.primary{gap:9px;font-size:10px;padding:10px}.suggestions button{font-size:9px;padding:8px}.studio-header h1{font-size:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

#prompt:focus-visible{outline:none}#notice{color:#c6c0dc}
.composer-bar{flex-wrap:wrap}.composer-bar .attach{border:0;background:none;padding:0;white-space:nowrap;font-size:16px;min-height:44px}.composer-bar .attach:hover{color:#fff}.composer-bar .attach:disabled{cursor:wait}#attachment-hint{font-size:14px;line-height:1.6;color:#b6b3c5;margin:14px 0 0}#file-list{font-size:16px;max-height:180px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#666075 #1c1e27;padding:0;list-style:none}#file-list li{display:flex;align-items:center;gap:12px;border-bottom:1px solid #393643;padding:3px 0}#file-list li span{flex:1;min-width:0;overflow-wrap:anywhere}#file-list button{flex-shrink:0;background:none;border:0;color:#d0c9e6;font-size:14px;min-height:44px;padding:4px}#file-list button:hover{color:#fff;text-decoration:underline}#composer.is-dragging{outline:2px dashed #dfdbfa;outline-offset:-8px;background:#292735}@media(max-width:700px){.composer-bar .primary{width:100%;margin-left:0;font-size:16px;min-height:44px}#attachment-hint{font-size:16px}.composer-bar{gap:12px 24px}#prompt{font-size:16px}#notice{font-size:16px}}.job-progress{text-align:left;margin-top:22px;padding:26px;border:1px solid #454251;border-radius:20px;background:radial-gradient(ellipse at 0 0,#49435f55,transparent 70%),#1a1b24}.progress-top{display:flex;align-items:center;gap:18px}.progress-kicker{font-size:9px;letter-spacing:1.6px;color:#b1a9c5}.job-progress h2{font-size:20px;font-weight:500;letter-spacing:-.4px;line-height:1.4;margin:7px 0}.progress-orbit{width:43px;height:43px;border:1px solid #7a728f;border-radius:50%;flex-shrink:0;display:grid;place-items:center}.progress-orbit i{width:18px;height:18px;border-radius:50%;background:#dcd4f4;box-shadow:0 0 24px #c1b0eb88}.job-progress[data-state=generating] .progress-orbit{animation:breathe 3s ease-in-out infinite}#job-elapsed{margin-left:auto;color:#b2aabd;font-size:11px;white-space:nowrap}#job-stages{display:flex;list-style:none;padding:0;gap:10px;margin:30px 0 20px}#job-stages li{flex:1;border-top:2px solid #413d4b;padding-top:12px;font-size:11px;color:#9a92a7}#job-stages li[data-done=true]{border-color:#c4b5df;color:#ded5ee}#job-stages li[aria-current=step]{border-color:#eee2ff;color:#fff}#job-detail,#job-saved,.completion-email p{font-size:13px;line-height:1.6;color:#c2b8d0}#job-saved{color:#a79caf}.job-progress .secondary{font-size:12px;margin-top:8px}.completion-email{border-top:1px solid #49414e;margin-top:24px;padding-top:18px}.completion-email summary{font-size:13px;cursor:pointer;min-height:30px}.completion-email summary span{font-size:11px;color:#a99daf;margin-left:8px}.completion-email label{display:block;font-size:12px;margin-top:16px;color:#cfc5d9}.completion-email input[type=email]{width:100%;padding:13px;background:#13151c;border:1px solid #595063;border-radius:8px;color:#eee;margin-top:8px}.completion-email .email-consent{display:flex;align-items:center;gap:10px;line-height:1.6}.email-consent input{width:18px;height:18px;accent-color:#c7b1e0}.job-progress[data-state=held],.job-progress[data-state=failed]{border-color:#997673}.job-progress[data-state=ready]{border-color:#88a496}@keyframes breathe{50%{box-shadow:0 0 35px #b8a0eb35;transform:scale(1.07)}}@media(max-width:700px){.job-progress{padding:20px}.progress-top{gap:12px;flex-wrap:wrap}.job-progress h2{font-size:18px}#job-elapsed{margin-left:55px}#job-stages{gap:8px}#job-stages li{font-size:10px}}@media(prefers-reduced-motion:reduce){.progress-orbit{animation:none!important}}
#landing{padding-bottom:clamp(60px,8vw,100px)}

.completion-email input[type=email]{font-size:16px}.completion-email p{overflow-wrap:anywhere}.completion-email button:disabled{cursor:default;opacity:.7}@media(max-width:700px){.completion-email summary,.completion-email label,.completion-email p,.completion-email .secondary{font-size:16px}.completion-email summary span{font-size:14px}.completion-email .secondary{min-height:44px}}

.job-progress{border:1px solid #454251;border-radius:18px;margin-top:26px;background:var(--surface);padding:26px}.build-layout{display:grid;grid-template-columns:124px minmax(0,1fr);gap:24px;align-items:center}.build-art{background:#302c3b;border-radius:12px;height:142px;display:grid;place-items:center;overflow:hidden}.paper{width:98px;height:110px;background:#fffef9;border:1px solid #bbcab4;box-shadow:0 7px 12px #2f4e2420;padding:10px;transform:rotate(-5deg)}.paper-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.paper-header i{width:17px;height:4px;background:#355b40}.paper-header span{width:22px;height:2px;background:#9caf94}.paper-body{display:grid;grid-template-columns:1fr 1fr;gap:7px}.paper-copy b,.paper-copy i{display:block;background:#57744a;width:100%;height:4px;margin-bottom:4px}.paper-copy b:nth-child(2){width:70%;margin-bottom:8px}.paper-copy i{height:2px;background:#becbb4}.paper-copy em{display:block;width:20px;height:7px;margin-top:7px;background:#355b40}.paper-picture{background:#c9d7bb;border-radius:20px 20px 3px 3px}.paper-bottom{display:flex;gap:5px;margin-top:12px}.paper-bottom i{height:13px;flex:1;background:#e2e8d9}.job-progress[data-running=true] .paper{animation:float-page 4s ease-in-out infinite}.job-progress[data-running=true] .paper-picture,.job-progress[data-running=true] .paper-bottom{animation:assemble 4s ease-in-out infinite}.job-progress[data-running=true] .paper-bottom{animation-delay:.3s}@keyframes float-page{50%{transform:translateY(-4px) rotate(-2deg)}}@keyframes assemble{0%,100%{opacity:.45;transform:translateY(3px)}45%,80%{opacity:1;transform:translateY(0)}}.job-progress h1{font-size:23px;line-height:1.25;font-weight:500;letter-spacing:-.6px;margin:0 0 10px}#job-detail{font-size:16px;line-height:1.55;color:var(--muted);margin:0}#job-elapsed{font-variant-numeric:tabular-nums;color:var(--muted);font-size:16px;line-height:1.5;margin:12px 0 0}#job-open-preview{margin-top:18px;width:100%}#job-stages{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;gap:8px;margin:28px 0 12px}#job-stages li{padding-top:10px;border-top:3px solid #413d4b;color:var(--muted);font-size:16px;line-height:1.4}#job-stages li[data-done=true]{border-color:#a99ac7}#job-stages li[aria-current=step]{border-color:#dfdbfa;color:#dfdbfa;font-weight:600}.progress-actions{display:flex;justify-content:space-between;gap:20px}#job-saved{font-size:16px;line-height:1.6;color:var(--muted);margin:8px 0 0}.completion-email{border-top:1px solid var(--line);margin-top:20px;padding-top:12px}.completion-email summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:16px}.completion-email label{display:block;font-size:16px;line-height:1.5;margin-top:12px}.completion-email input[type=email]{width:100%;min-height:48px;padding:12px;border:1px solid #595063;border-radius:6px;background:white;color:#eeeaf6;margin-top:8px}.completion-email .email-consent{display:flex;align-items:center;gap:12px;min-height:44px}.email-consent input{width:20px;height:20px;flex-shrink:0;accent-color:#dfdbfa}.secondary{border:1px solid #625970;border-radius:6px;padding:12px 16px;min-height:48px;color:#dfdbfa;background:#292632;font-size:16px;margin-top:12px}.completion-email p{font-size:16px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere;margin-bottom:0}.job-progress[data-state=held],.job-progress[data-state=failed]{border-color:#997673}.job-progress[data-state=ready] .build-art{background:#3d394d}.hero:has(.job-progress:not([hidden])){padding-top:55px}.hero:has(.job-progress:not([hidden])) .intro-note{display:none}.workspace:has(.job-progress:not([hidden])) .composer-shell,.workspace:has(.job-progress:not([hidden])) .suggestions,.workspace:has(.job-progress:not([hidden])) .prototype-note{display:none}.workspace:has(.job-progress:not([hidden])) .job-progress{margin-top:0}.workspace:has(.job-progress:not([hidden])) #notice:not(:empty){margin:0 0 18px}

:root{--surface:#1a1b24;--muted:#b6b3c5}body{min-height:100vh}.hero{padding-top:64px}.hero>h1{margin:0 0 38px}.brand-dot{margin-left:-9px}.composer-bar .attach,.primary,.suggestions button,.prototype-note,#notice,footer{font-size:16px}.suggestions button{min-height:44px}.prototype-note{color:#a9a6b5}.suggestions{margin-top:20px}.primary{font-size:16px;text-decoration:none}.primary:hover{background:#eeeafe}.job-progress .primary{margin-left:0}.job-progress h1{font-size:24px;line-height:1.3;letter-spacing:-.5px;margin:0 0 12px}.job-progress #job-elapsed{white-space:normal;margin-left:0}.job-progress .text-button{font-size:16px;color:#d7cee8}.completion-email input[type=email]{background:#13151c;color:#eee}.email-consent input{accent-color:#c7b1e0}.hero:has(.job-progress:not([hidden]))>h1,.hero:has(.job-progress:not([hidden]))>.composer-shell,.hero:has(.job-progress:not([hidden]))>.suggestions,.hero:has(.job-progress:not([hidden]))>.prototype-note{display:none}.hero:has(.job-progress:not([hidden])){padding-top:30px}footer{justify-content:center}footer a{text-decoration:none}.progress-top{display:block}
@media(max-width:700px){.hero{padding-top:36px}.hero>h1{margin-bottom:28px}.prototype-note{font-size:16px;max-width:none}.suggestions button{font-size:16px;padding:8px 12px}.job-progress{padding:20px}.build-layout{grid-template-columns:82px minmax(0,1fr);gap:16px}.build-art{height:112px}.paper{transform:scale(.75) rotate(-5deg)}#job-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#job-stages li{font-size:16px}.job-progress h1{font-size:23px}.job-progress #job-elapsed{font-size:16px}.job-progress .secondary{font-size:16px;min-height:44px}}
@media(max-width:350px){.build-layout{grid-template-columns:1fr}.build-art{display:none}.suggestions{gap:6px}.suggestions button{padding:8px;font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.hero>h1{font-size:56px;line-height:1.12;letter-spacing:-2px}.hero>h1>span{display:block;max-width:650px;margin:10px auto 0;font-size:40px;line-height:1.2;letter-spacing:-1.3px}.hero>h1>br{display:none}#edit-submit{width:auto;padding:8px 12px;font-size:16px}.browser-bar a{width:auto;font-size:16px}
@media(max-width:700px){.hero>h1{font-size:36px;letter-spacing:-1.4px}.hero>h1>span{font-size:28px;letter-spacing:-.8px;max-width:350px;margin-top:10px}}

.mobile-break{display:none}@media(max-width:700px){.mobile-break{display:block}}

.idea-picker{max-width:540px;margin:20px auto 0;padding-bottom:24px}.idea-viewport{overflow:hidden;padding:4px 0;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}.idea-picker .suggestions{display:flex;justify-content:flex-start;flex-wrap:nowrap;gap:8px;margin:0;width:max-content}.idea-picker .suggestions button{flex:none;min-height:44px;padding:8px 12px;font-size:16px;white-space:nowrap;color:var(--muted)}.idea-picker .suggestions button span{margin:0;color:inherit}.idea-picker button:focus-visible{outline:2px solid #ddd7fa;outline-offset:2px}.hero:has(.job-progress:not([hidden])) .idea-picker{display:none}.idea-viewport.manual{overflow-x:auto;mask-image:none}.idea-viewport.manual .suggestions{transform:none!important}@media(prefers-reduced-motion:reduce){.idea-picker button{animation:none!important;transition:none!important}}

.revision-panel{border-top:1px solid var(--line,#41404b);margin-top:24px;padding-top:24px;text-align:left}.revision-panel h2{font-size:24px;margin:0 0 20px}.revision-panel label{display:block;font-size:16px;margin-bottom:10px}.revision-panel textarea{display:block;box-sizing:border-box;width:100%;min-height:120px;padding:14px;margin-bottom:16px;border:1px solid #565260;border-radius:12px;background:#101218;color:#eeeaf6;font:inherit;font-size:16px;resize:vertical}.revision-panel p{font-size:16px;line-height:1.5}.revision-panel a{display:inline-flex;min-height:44px;align-items:center;margin-right:20px;color:#ddd7fa}.revision-panel button:disabled{opacity:.55;cursor:default}

:root{--ease-out:cubic-bezier(.23,1,.32,1)}
.composer-shell{box-shadow:0 16px 50px #0002}
:root[data-input=keyboard] #prompt:focus-visible{outline:1px solid #aaa2cf;outline-offset:4px}
#prompt{min-height:112px;resize:vertical}
.composer-bar{gap:12px 20px;margin-top:16px}
.composer-bar .attach svg{display:none}
.primary,.secondary{transition:transform 160ms var(--ease-out),background-color 160ms ease,border-color 160ms ease}
.primary:active:not(:disabled),.secondary:active:not(:disabled){transform:scale(.98)}
.primary:focus-visible,.secondary:focus-visible{transition:none;transform:none}
.magic-button{
 position:relative;isolation:isolate;gap:12px;min-height:48px;
 padding:10px 4px;border:0;border-radius:0;color:#eeebff;
 background:transparent;box-shadow:none;
}
.magic-button span{position:relative;z-index:1;font-size:16px;line-height:24px}
.magic-button .button-bracket{width:8px;height:24px;flex:none;border:1.5px solid #c4b8df;border-right:0;border-radius:2px 0 0 2px;transition:border-color 180ms ease}
.magic-button .button-bracket-right{transform:rotate(180deg)}
.magic-button #generate-mark{position:absolute;left:50%;top:50%;width:2px;height:24px;background:#eeebff;border-radius:1px;opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.magic-button[data-transition=true]{opacity:1;flex-shrink:0;transition:none}
.magic-button[data-transition=true]:disabled{opacity:1}
.magic-button[data-transition=true] .button-bracket{transition:none}
:root[data-input=keyboard] .job-progress{animation:none}
.magic-button:hover{background:transparent;color:#fff}
.magic-button:disabled{opacity:.7}
@media(hover:hover) and (pointer:fine){
 .magic-button:hover:not(:disabled):not(:focus-visible) #generate-label{background:linear-gradient(100deg,#eeebff 34%,#ab78f5 45%,#dec6ff 50%,#ab78f5 55%,#eeebff 66%) 100% 0/250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:create-color-flow 1500ms linear infinite}
 .magic-button:hover:not(:disabled):not(:focus-visible) .button-bracket{animation:create-bracket-flow 1500ms linear infinite}
 .magic-button:hover:not(:disabled):not(:focus-visible) .button-bracket-right{animation-delay:850ms}
 .magic-button:active:not(:disabled){transform:scale(.98)}
}
@keyframes create-color-flow{to{background-position:0 0}}
@keyframes create-bracket-flow{0%,35%,100%{border-color:#c4b8df}16%{border-color:#b584ff}}
@media(prefers-reduced-motion:reduce){.magic-button:hover:not(:disabled):not(:focus-visible) #generate-label{animation:none;background:none;color:#d4b6ff}.magic-button:hover:not(:disabled):not(:focus-visible) .button-bracket{animation:none;border-color:#c4a0f5}}
#file-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:148px;margin:16px 0 0}
#file-list li{min-width:0;gap:10px;padding:4px 0 4px 5px;border:1px solid #343640;border-radius:8px;background:#171921}
#file-list img{width:36px;height:36px;flex:none;object-fit:cover;border-radius:4px;background:#292b35}
#file-list li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
#file-list button{width:44px;min-height:44px;font-size:23px;line-height:1;text-decoration:none;color:#b6b3c5}
#file-list button:hover{color:#fff;text-decoration:none}
#notice{line-height:1.5;padding:4px 0}
.job-progress{max-width:680px;margin:16px auto 0;padding:32px;border-color:#373843;background:#1a1b24;box-shadow:0 18px 60px #0002}
.job-progress:not([hidden]){animation:panel-enter 220ms var(--ease-out) both}
@keyframes panel-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.build-layout{grid-template-columns:80px minmax(0,1fr);gap:24px;align-items:center}
.build-art{height:104px;background:transparent!important;border-radius:0}
.paper{width:70px;height:88px;padding:8px;background:#edeaf7;border:1px solid #b4abc8;box-shadow:0 6px 12px #0002;transform:rotate(-5deg)}
.paper-header{margin-bottom:10px}.paper-header i,.paper-copy em{background:#686079}
.paper-header span,.paper-copy i{background:#b2a9c4}.paper-copy b{background:#847992;height:3px}
.paper-copy b:nth-child(2){margin-bottom:5px}.paper-copy em{height:5px;width:16px;margin-top:5px}
.paper-picture{background:#c1b9d2}.paper-bottom{gap:4px;margin-top:8px}.paper-bottom i{height:9px;background:#d7d0e3}
.job-progress h1{font-size:28px;letter-spacing:-.7px;line-height:1.2;margin:0 0 10px}
#job-detail{max-width:46ch;line-height:1.55}
#job-stages{margin:28px 0 20px;gap:12px}
#job-stages li{font-size:16px;border-top-width:2px}
.job-tools,.completion-email,.version-history{border-top:1px solid #33343f;margin-top:0;padding-top:0}
.job-tools summary,.completion-email summary,.version-history summary{display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer;font-size:16px;line-height:1.5;color:#c1bdce;list-style:none;padding:12px 0}
.job-tools summary::-webkit-details-marker,.completion-email summary::-webkit-details-marker,.version-history summary::-webkit-details-marker{display:none}
.job-tools summary::after,.completion-email summary::after,.version-history summary::after{content:"";width:6px;height:6px;border:solid #9993ac;border-width:0 1px 1px 0;transform:rotate(45deg);margin-left:auto;margin-right:3px}
.job-tools[open] summary::after,.completion-email[open] summary::after,.version-history[open] summary::after{transform:rotate(225deg)}
.job-tools[open],.completion-email[open],.version-history[open]{padding-bottom:16px}
.job-tools #job-elapsed{margin:0 0 4px;font-size:16px;color:var(--muted)}
.progress-actions{gap:12px;justify-content:flex-start;align-items:center;flex-wrap:wrap}
.progress-actions .text-button{padding:8px 0;margin-right:12px;text-align:left;min-height:44px}
#job-saved{margin-top:4px;font-size:16px;line-height:1.5}
.job-progress[data-state=ready]{border-color:#454250}
.job-progress[data-state=ready] .build-layout{display:block}
.job-progress[data-state=ready] .build-art,.job-progress[data-state=held] .build-art,.job-progress[data-state=failed] .build-art{display:none}
.job-progress[data-state=held] .build-layout,.job-progress[data-state=failed] .build-layout{display:block;margin-bottom:24px}
#job-open-preview{width:fit-content;min-width:200px;margin:22px 0 0;min-height:48px}
.previous-preview{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;text-underline-offset:5px;color:#e3ddf5}
.revision-panel{margin:28px 0 24px;padding-top:24px}
.revision-panel h2{font-size:20px;line-height:1.4;letter-spacing:-.3px;margin:0 0 16px;font-weight:500}
.revision-panel textarea{min-height:100px;max-height:260px;line-height:1.6;margin:0;border-color:#41414e;border-radius:10px;background:#14161e;padding:14px;scroll-margin-bottom:90px}
#revision-form{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
#revision-form textarea{flex-basis:100%}
#revision-submit{margin:0 0 0 auto;min-height:44px;background:#302d3b;border-color:#514a60;font-size:16px;color:#ece7f6}
#revision-message{flex:1 1 100%;margin:0;font-size:16px;color:var(--muted)}
#revision-message:empty{display:none}
#website-versions{display:flex;flex-wrap:wrap;gap:0 24px}
#website-versions a{display:inline-flex;align-items:center;min-height:44px;line-height:1.5;text-underline-offset:5px;color:#ddd7fa}
.completion-email .secondary{margin-top:14px;font-size:16px;min-height:44px}
.completion-email label{margin-top:8px}
.completion-email input[type=email]{border-color:#4a4556}
.completion-entry{display:flex;align-items:center;gap:10px;margin-top:14px}
.completion-entry input[type=email]{flex:1;min-width:0;width:auto;margin:0}
.completion-entry .secondary{flex:none;margin:0;white-space:nowrap;padding:12px 14px}
#completion-status:empty{display:none}
@media(max-width:700px){
 .hero{padding-top:32px}.hero>h1{margin-bottom:28px}
 .composer-shell form{padding:18px}.composer-bar{display:grid;grid-template-columns:44px 44px minmax(0,1fr);align-items:center;margin-top:12px;gap:4px}
 .composer-bar .attach{justify-content:center;width:44px;height:44px}
 .composer-bar .attach span{display:none}
 .composer-bar .attach svg{display:block;width:21px;height:21px}
 #prompt{min-height:124px;line-height:1.6}.composer-bar .magic-button{width:auto;min-width:0;min-height:48px;margin:0 0 0 auto;gap:9px;padding:8px 2px}
 .composer-bar .magic-button span{line-height:22px}
 .composer-bar:has(#attach-folder[hidden]){grid-template-columns:44px minmax(0,1fr)}
 #file-list{grid-template-columns:minmax(0,1fr);max-height:180px}
 .hero:has(.job-progress:not([hidden])){padding-top:14px}
 .job-progress{padding:24px 20px;margin-top:12px}
 .build-layout{grid-template-columns:62px minmax(0,1fr);gap:16px}
 .build-art{height:100px}.paper{transform:scale(.85) rotate(-5deg)}
 .job-progress h1{font-size:25px;letter-spacing:-.5px}
 #job-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin:24px 0 20px}
 #job-open-preview{width:100%;min-width:0}
 .revision-panel{margin-top:24px;padding-top:22px}
 .revision-panel h2{font-size:20px}.revision-panel textarea{min-height:112px}
 #revision-submit{width:100%}
}
@media(max-width:350px){.build-layout{display:block}.build-art{display:none}.hero{padding-right:16px;padding-left:16px}.job-progress{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){.primary:active,.secondary:active,.magic-button:hover{transform:none!important}.magic-button:hover .button-bracket{transform:none!important}.magic-button:hover .button-bracket-right{transform:rotate(180deg)!important}}
