:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1d2433;background:#f4f6fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}html:fullscreen{background:#f4f6fa}html:fullscreen body{min-height:100dvh;overflow:auto}button,textarea,input{font:inherit}button{cursor:pointer}.shell{width:min(1240px,calc(100% - 40px));margin:0 auto;padding:34px 0 48px}.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}.topbar h1{margin:6px 0 0;max-width:620px;font-size:clamp(2rem,4vw,3.65rem);line-height:.98;letter-spacing:-.06em;font-weight:750}.topbar-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px}.mobile-fullscreen-trigger{display:none}.eyebrow{display:block;color:#68758d;font-size:.69rem;font-weight:800;letter-spacing:.14em}.workspace{display:grid;grid-template-columns:minmax(320px,.86fr) minmax(360px,1.14fr);gap:20px;align-items:stretch}.panel{min-height:660px;padding:24px;border:1px solid #e0e5ee;border-radius:28px;background:#ffffffd9;box-shadow:0 20px 70px #19284912}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.mobile-editor-trigger,.mobile-editor-close{display:none}.panel-heading h2{margin:6px 0 0;font-size:1.28rem;letter-spacing:-.03em}.preview-heading-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 14px;min-width:0}.device-switcher{display:inline-flex;max-width:100%;padding:3px;border:1px solid #dfe5ef;border-radius:11px;background:#f3f5f9}.device-switcher-option{min-width:58px;padding:6px 9px;border:0;border-radius:8px;color:#77849a;background:transparent;font-size:.73rem;font-weight:800}.device-switcher-option:hover{color:#385fc0}.device-switcher-option[aria-pressed=true]{color:#243a72;background:#fff;box-shadow:0 2px 7px #23304b1f}.device-switcher-option:focus-visible{outline:3px solid rgba(68,111,230,.28);outline-offset:1px}.ghost-button,.text-button{border:0;background:transparent;color:#586781;font-weight:700}.ghost-button{padding:10px 14px;border:1px solid #d8dfeb;border-radius:999px}.ghost-button:hover,.text-button:hover{color:#1f5eff}.ghost-button:disabled{cursor:not-allowed;opacity:.55}.text-button{padding:5px 0;font-size:.82rem}.status-dot{display:inline-flex;align-items:center;gap:7px;color:#6e7a8f;font-size:.75rem;font-weight:700}.status-dot:before{width:7px;height:7px;border-radius:50%;background:#53b68e;content:""}.status-dot.busy:before{background:#f2a444;box-shadow:0 0 0 5px #f2a44424}.conversation{display:flex;flex-direction:column;gap:16px;height:430px;margin:26px -4px 18px 0;padding:2px 10px 4px 0;overflow:auto}.message{max-width:90%;padding:13px 15px;border-radius:17px;background:#f1f4f8}.message.user{align-self:flex-end;color:#fff;background:#1e5eff;border-bottom-right-radius:5px}.message.assistant{align-self:flex-start;border-bottom-left-radius:5px}.message-role{display:block;margin-bottom:5px;opacity:.64;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.message p{margin:0;font-size:.91rem;line-height:1.45;white-space:pre-wrap}.prompt-form{padding-top:16px;border-top:1px solid #edf0f5}.prompt-form textarea{display:block;width:100%;resize:vertical;min-height:76px;padding:13px;border:1px solid #dce2ec;border-radius:15px;outline:0;color:#1d2433;background:#fbfcfe}.prompt-form textarea:focus{border-color:#7da2ff;box-shadow:0 0 0 4px #446fe61c}.image-input-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px}.image-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.image-button,.remove-image-button{padding:7px 10px;border:1px solid #d8dfeb;border-radius:9px;color:#586781;background:#fff;font-size:.76rem;font-weight:700}.image-button:disabled,.remove-image-button:disabled{cursor:not-allowed;opacity:.55}.image-attachment{display:flex;align-items:center;min-width:0;gap:8px;color:#586781;font-size:.75rem}.image-attachment img{width:38px;height:38px;flex:0 0 auto;border:1px solid #d8dfeb;border-radius:7px;object-fit:cover}.image-attachment span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prompt-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;color:#8994a7;font-size:.72rem}.primary-button{padding:10px 16px;border:0;border-radius:11px;color:#fff;background:#1d5ced;font-weight:800}.primary-button:disabled{cursor:not-allowed;opacity:.45}.phone-wrap{display:grid;place-items:center;min-height:610px;margin-top:10px;border-radius:22px;background:radial-gradient(circle at 50% 35%,#edf2ff,#f7f8fb 56%)}.phone{position:relative;width:min(300px,80%);height:580px;padding:0;border:var(--phone-edge-width) solid #222a39;border-radius:40px;background:#222a39;box-shadow:0 22px 35px #23304b38}.phone-screen{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:var(--phone-screen-radius);background:#fff}.phone--iphone{border-color:#222a39;background:#222a39}.phone-status-bar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;flex:0 0 30px;min-height:30px;padding:0 14px;color:#151923;background:#fff;font-size:.65rem;line-height:1;z-index:1}.phone-status-time{justify-self:start;font-weight:800;letter-spacing:-.02em}.phone-camera{grid-column:2;grid-row:1;justify-self:center;width:85px;height:17px;border-radius:999px;background:#171b25;box-shadow:inset 0 -1px 1px #ffffff1a}.phone-status-icons{display:flex;grid-column:3;grid-row:1;align-items:center;justify-self:end;gap:5px;color:#151923}.phone-signal{display:flex;align-items:flex-end;gap:1px;width:11px;height:10px}.phone-signal i{display:block;width:2px;border-radius:2px 2px 0 0;background:currentColor}.phone-signal i:nth-child(1){height:4px}.phone-signal i:nth-child(2){height:6px}.phone-signal i:nth-child(3){height:8px}.phone-signal i:nth-child(4){height:10px}.phone-wifi{position:relative;width:13px;height:10px}.phone-wifi:before{position:absolute;top:0;right:0;bottom:1px;left:0;border:1.5px solid currentColor;border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;border-radius:50%;content:""}.phone-wifi:after{position:absolute;bottom:0;left:50%;width:3px;height:3px;border-radius:50%;background:currentColor;content:"";transform:translate(-50%)}.phone-battery{position:relative;display:block;width:16px;height:9px;border:1.5px solid currentColor;border-radius:3px}.phone-battery:after{position:absolute;top:2px;right:-3px;width:2px;height:3px;border-radius:0 1px 1px 0;background:currentColor;content:""}.phone-battery span{display:block;width:72%;height:100%;border-radius:1px;background:currentColor}.phone--pixel{border-color:#dce1e9;border-radius:35px;background:#dce1e9;box-shadow:0 22px 35px #23304b33,inset 0 0 0 1px #ffffff1c}.phone--pixel:before,.phone--pixel:after{position:absolute;right:-7px;width:3px;border-radius:0 3px 3px 0;background:#b7bfcc;content:""}.phone--pixel:before{top:140px;height:54px}.phone--pixel:after{top:207px;height:27px}.phone--pixel .phone-camera{width:13px;height:13px;border:2px solid #636c7c;border-radius:50%;background:#121721;box-shadow:0 0 0 2px #252c38}.phone-status-bar--pixel .phone-status-icons{color:#4a5569}.app-surface{min-height:0;flex:1 1 auto;overflow:auto;border-radius:0 0 var(--phone-screen-radius) var(--phone-screen-radius);background:#fff;overscroll-behavior:contain}.empty-preview{display:grid;place-content:center;gap:8px;min-height:100%;padding:28px;color:#748096;text-align:center}.empty-preview strong{color:#34415a;font-size:1rem}.empty-preview span{font-size:.75rem;line-height:1.5}.todo-app{min-height:100%;padding:29px 18px;color:#17233a;background:linear-gradient(145deg,#f9fbff,#eef3ff)}.todo-kicker{color:#6d7da1;font-size:.58rem;font-weight:900;letter-spacing:.16em}.todo-app h2{margin:8px 0 3px;font-size:1.65rem;letter-spacing:-.06em}.todo-subtitle{margin:0 0 24px;color:#78869d;font-size:.76rem}.todo-add{display:flex;gap:7px;margin-bottom:23px}.todo-add input{min-width:0;flex:1;padding:11px 12px;border:1px solid #dce4f4;border-radius:12px;outline:0;background:#fff;font-size:.8rem}.todo-add button{width:39px;border:0;border-radius:12px;color:#fff;background:#426ef2;font-size:1.3rem}.todo-list{display:flex;flex-direction:column;gap:9px}.todo-row{display:flex;align-items:center;gap:10px;padding:11px 9px;border:1px solid #e8edf7;border-radius:13px;background:#ffffffc7}.todo-check{display:grid;place-items:center;width:21px;height:21px;padding:0;border:1px solid #c4cee2;border-radius:50%;color:#fff;background:transparent;font-size:.73rem}.todo-check.done{border-color:#426ef2;background:#426ef2}.todo-title{flex:1;font-size:.8rem}.todo-title.done{color:#94a0b2;text-decoration:line-through}.todo-delete{padding:0 2px;border:0;color:#9ba7b9;background:transparent;font-size:1.1rem}.todo-empty{padding:25px 12px;color:#8592aa;font-size:.78rem;line-height:1.5;text-align:center}.runtime-error{display:flex;flex-direction:column;gap:7px;margin:24px;padding:14px;border:1px solid #ffd4d4;border-radius:14px;color:#8e4545;background:#fff4f4;font-size:.75rem;line-height:1.4}.error-banner{margin-top:13px;padding:11px 13px;border:1px solid #ffd9b2;border-radius:13px;color:#85531e;background:#fff8ed;font-size:.77rem;line-height:1.4}.preview-note{margin:13px 3px 0;color:#8a95a5;font-size:.69rem;line-height:1.45}@media(max-width:800px){.shell{width:min(100% - 22px,620px);padding-top:20px}.topbar{align-items:flex-start}.topbar h1{font-size:2.25rem}.workspace{grid-template-columns:1fr}.panel{min-height:auto}.conversation{height:330px}.phone-wrap{min-height:600px}.preview-heading-actions{align-items:flex-end;flex-direction:column;gap:7px}}@media(max-width:420px){.panel-heading{flex-wrap:wrap}.preview-heading-actions{width:100%;align-items:stretch}.device-switcher{align-self:flex-end}}@media(max-width:640px){html,body,#root{height:100%;min-height:100%;overflow:hidden}body{overscroll-behavior:none}.shell{width:100%;height:100vh;min-height:100vh;padding:0}@supports (height: 100dvh){.shell{height:100dvh;min-height:100dvh}}.topbar,.preview-panel>.panel-heading,.preview-note{display:none}.workspace{position:relative;display:block;height:100%}.preview-panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;height:100vh;min-height:0;padding:0;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}@supports (height: 100dvh){.preview-panel{height:100dvh}}.phone-wrap{display:block;height:100%;min-height:0;margin:0;border-radius:0;background:transparent}.phone{width:100%;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none}.phone-screen{border-radius:0}.phone-status-bar{display:none}.app-surface{height:100%;border-radius:0}.mobile-editor-trigger{position:fixed;right:max(16px,calc(env(safe-area-inset-right) + 16px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 16px));z-index:3;display:grid;place-items:center;width:60px;height:60px;min-width:48px;min-height:48px;padding:7px;border:0;border-radius:50%;color:#fff;background:#1d5ced;box-shadow:0 12px 26px #1d5ced52;font-size:.7rem;font-weight:800;line-height:1}.mobile-fullscreen-trigger{position:fixed;bottom:max(16px,calc(env(safe-area-inset-bottom) + 16px));left:max(16px,calc(env(safe-area-inset-left) + 16px));z-index:3;display:inline-flex;align-items:center;justify-content:center;min-width:60px;min-height:48px;padding:10px 13px;border:0;border-radius:999px;color:#fff;background:#34415a;box-shadow:0 12px 26px #1928493d;font-size:.72rem;font-weight:800}.mobile-fullscreen-trigger[hidden]{display:none}.mobile-fullscreen-trigger:disabled{cursor:not-allowed;opacity:.55}.mobile-fullscreen-trigger:focus-visible{outline:3px solid rgba(68,111,230,.38);outline-offset:3px}.mobile-editor-trigger[hidden]{display:none}.mobile-editor-trigger:hover{background:#164dcc}.mobile-editor-trigger:focus-visible,.mobile-editor-close:focus-visible{outline:3px solid rgba(68,111,230,.38);outline-offset:3px}.mobile-editor-trigger-icon{font-size:1.45rem;line-height:.85}.chat-panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;display:flex;flex-direction:column;width:100%;height:100vh;min-height:0;max-height:none;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:hidden;border:0;border-radius:0;background:#fffffffa;box-shadow:0 0 40px #1928492e;opacity:0;pointer-events:none;transform:translateY(100%);transition:transform .22s ease,opacity .18s ease,visibility .22s ease;visibility:hidden}@supports (height: 100dvh){.chat-panel{height:100dvh}}.mobile-editor-open{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.chat-panel>.panel-heading{display:flex;flex:0 0 auto;align-items:flex-start;min-height:48px}.mobile-editor-close{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:10px 12px;border:1px solid #d8dfeb;border-radius:999px;color:#586781;background:#fff;font-size:.78rem;font-weight:800}.mobile-editor-close:hover{color:#1f5eff}.mobile-editor-close:disabled{cursor:not-allowed;opacity:.55}.mobile-editor-content{display:flex;flex:1;flex-direction:column;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.conversation{height:auto;max-height:none;margin:18px 0}.prompt-form{padding-bottom:max(4px,env(safe-area-inset-bottom))}}