*,:before,:after{box-sizing:border-box}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#000;height:100%}html,body,#root{background:#000;min-height:100%;margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;font-family:Segoe UI,Pretendard,-apple-system,BlinkMacSystemFont,Roboto,Noto Sans KR,sans-serif}#root{width:100%;min-height:100dvh}button,textarea,input{font:inherit}textarea{resize:vertical}html.is-recording,body.is-recording,body.is-recording #root{background:#000;overflow:hidden}:root{--phone-bg:#000;--phone-chrome:#2c2c2e;--phone-user:#003b73;--phone-voice:#2f7dff}.app{--bg:#eef1f6;--surface:#fff;--surface-muted:#f7f8fb;--ink:#16181d;--muted:#6b7285;--line:#e4e7ee;--focus:#4f6ef7;--shadow:0 18px 40px #16181d14;height:100dvh;min-height:100dvh;color:var(--ink);background:radial-gradient(1200px 420px at 12% -10%, #fff 0%, transparent 55%), radial-gradient(900px 360px at 100% 0%, #e4e9ff 0%, transparent 46%), var(--bg);flex-direction:column;display:flex;overflow:hidden}.app-header{flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:10px 20px;width:100%;max-width:1180px;margin:0 auto;padding:12px 24px 8px;display:flex}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-copy{flex:1;min-width:0}.brand-mark{background:linear-gradient(145deg,#6d7cff 0%,#4b5fd9 48%,#2f3d8f 100%);border-radius:12px;flex-shrink:0;width:36px;height:36px;box-shadow:0 8px 18px #4f6ef747}.app-header h1{letter-spacing:-.03em;margin:0;font-size:1.45rem;font-weight:700}.app-description{color:var(--muted);margin:4px 0 0;font-size:.95rem}.mode-tabs{background:var(--phone-bg);border-radius:999px;flex-shrink:0;gap:2px;padding:4px;display:inline-flex}.mode-tab{color:#9a9aa3;cursor:pointer;background:0 0;border:0;border-radius:999px;min-width:88px;padding:8px 18px;font-size:.92rem;font-weight:600}.mode-tab.is-active{background:var(--phone-chrome);color:#fff}.mode-tab:disabled{opacity:.38;cursor:default}.workspace{flex:auto;grid-template-columns:minmax(280px,1fr) minmax(300px,420px);align-items:stretch;gap:44px;width:100%;max-width:1180px;min-height:0;margin:0 auto;padding:8px 24px 16px;display:grid}.editor{background:var(--surface);border:1px solid var(--line);width:100%;min-height:0;max-height:100%;box-shadow:var(--shadow);border-radius:20px;flex-direction:column;align-self:start;gap:10px;padding:14px;display:flex;overflow:hidden}.editor-scroll{overflow-anchor:none;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c5cad6 transparent;flex-direction:column;flex:auto;gap:10px;min-height:0;display:flex;overflow:hidden auto}.editor-scroll::-webkit-scrollbar{width:6px}.editor-scroll::-webkit-scrollbar-track{background:0 0}.editor-scroll::-webkit-scrollbar-thumb{background:#c5cad6;border-radius:999px}.editor-scroll::-webkit-scrollbar-thumb:hover{background:#b0b7c5}.conversation-block{border:1px solid var(--line);background:#fff;border-radius:16px;flex-direction:column;gap:10px;padding:14px;display:flex}.conversation-toolbar{justify-content:space-between;align-items:center;gap:10px;display:flex}.conversation-heading{letter-spacing:.01em;color:#4b5160;margin:0;font-size:.8rem;font-weight:600}.conversation-actions{align-items:center;gap:4px;display:flex}.icon-btn{border:1px solid var(--line);background:var(--surface-muted);color:#4b5160;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;width:30px;height:30px;padding:0;display:inline-flex}.icon-btn:hover:not(:disabled){background:#eef1f8}.icon-btn:disabled{opacity:.32;cursor:default}.icon-btn-danger:hover:not(:disabled){color:#b42318;background:#fff4f3;border-color:#f0c4bf}.add-conversation{color:#3d4a66;cursor:pointer;background:0 0;border:1px dashed #cdd3e0;border-radius:14px;flex-shrink:0;margin-top:0;padding:11px 14px;font-size:.92rem;font-weight:600}.add-conversation:hover{background:var(--surface-muted);border-color:#b8c0d4}.field{flex-direction:column;gap:8px;display:flex}.field-label{letter-spacing:.02em;color:#4b5160;font-size:.82rem;font-weight:600}.field-copy{flex-direction:column;gap:2px;display:flex}.field-hint{color:var(--muted);letter-spacing:0;font-size:.72rem;font-weight:400;line-height:1.3}.field textarea{border:1px solid var(--line);background:var(--surface-muted);width:100%;min-height:76px;color:var(--ink);border-radius:14px;outline:none;padding:10px 12px;line-height:1.55;transition:border-color .15s,box-shadow .15s,background .15s}.field textarea:focus,.thinking-time input:focus{background:#fff;border-color:#b9c5ff;box-shadow:0 0 0 4px #4f6ef724}.thinking-time-field{gap:6px}.thinking-time{color:#4b5160;align-items:center;gap:8px;font-size:.88rem;display:flex}.thinking-time input{border:1px solid var(--line);background:var(--surface-muted);width:88px;color:var(--ink);border-radius:10px;outline:none;padding:8px 10px}.response-timing{flex-wrap:wrap;gap:10px 18px;display:flex}.response-timing .field{flex:160px}.preview-column{flex-direction:column;gap:8px;min-width:0;height:100%;min-height:0;display:flex;position:relative;overflow:visible}.preview-shell{flex-direction:column;flex:auto;min-width:0;min-height:0;display:flex;position:relative}.preview-phone-wrap{flex-shrink:0;width:fit-content;max-width:100%;position:relative;overflow:visible}.preview-side-tab{z-index:2;writing-mode:vertical-rl;text-orientation:upright;color:var(--ink);border:1px solid var(--line);letter-spacing:.05em;background:#fff;border-right:0;border-radius:8px 0 0 8px;margin:0;padding:6px 4px 7px;font-size:.72rem;font-weight:600;line-height:.95;position:absolute;top:40px;right:100%}.preview-helper-row{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px 10px;min-height:32px;display:flex}.preview-stage{flex:auto;justify-content:center;align-items:flex-start;min-width:0;min-height:0;display:flex;overflow:visible;container-type:size}.session-warning{color:#6b5420;background:#fff8e8;border:1px solid #eadfbf;border-radius:10px;flex-shrink:0;margin:0;padding:8px 10px;font-size:.78rem;line-height:1.4}.session-warning-title,.session-warning-hint{margin:0}.session-warning-hint{color:#8a7040;margin-top:2px;font-size:.72rem;font-weight:400}.reset-session{background:var(--surface);color:#3d4a66;cursor:pointer;border:1px solid #c5cad6;border-radius:14px;min-height:44px;padding:10px 16px;font-size:.92rem;font-weight:600}.reset-session:hover:not(:disabled){background:#f4f6fb;border-color:#b0b7c5}.reset-session:disabled{opacity:.38;cursor:default}.mobile-view-button{border:1px solid var(--line);background:var(--surface);color:#3d4a66;cursor:pointer;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;gap:6px;height:32px;min-height:32px;padding:0 10px;font-size:.85rem;font-weight:600;line-height:1;display:inline-flex}.mobile-view-button:hover{background:var(--surface-muted);border-color:#c5cad6}.mobile-view-caption{min-width:0;color:var(--muted);flex:220px;margin:0;font-size:.72rem;font-weight:400;line-height:1.35}.video-recording{border:1px solid var(--line);background:var(--surface-muted);border-radius:16px;flex-direction:column;flex-shrink:0;gap:8px;padding:12px;display:flex}.video-recording-heading{letter-spacing:.01em;color:#4b5160;margin:0;font-size:.8rem;font-weight:600}.video-recording-header{flex-direction:column;gap:2px;display:flex}.recording-workflow-hint{color:var(--muted);margin:0;font-size:.72rem;font-weight:400;line-height:1.35}.recording-status{color:#b42318;letter-spacing:.01em;margin:0;font-size:.82rem;font-weight:600}.recording-status.is-processing{color:#4b5160}.recording-status.is-ready{color:#17663a}.recording-error{color:#b42318;margin:0;font-size:.82rem;line-height:1.45}.recording-validation{color:#8a5a12;margin:0;font-size:.78rem;line-height:1.4}.recording-bar{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.recording-actions{flex-wrap:wrap;gap:8px;display:flex}.recording-actions-divider{background:var(--line);align-self:stretch;width:1px;min-height:28px;margin:0 2px}.recording-bar>.reset-session{margin-left:auto}.start-recording,.stop-recording,.download-video{cursor:pointer;border-radius:14px;justify-content:center;align-items:center;min-height:44px;padding:10px 16px;font-size:.92rem;font-weight:600;text-decoration:none;display:inline-flex}.start-recording{color:#f3f4f6;background:#161616;border:1px solid #2c2c2e}.start-recording:hover:not(:disabled){background:#1f1f1f}.start-recording:disabled{opacity:.38;cursor:default}.stop-recording{color:#fff7f7;background:#991b1b;border:1px solid #7f1d1d}.stop-recording:hover:not(:disabled){background:#b91c1c}.stop-recording:disabled{opacity:.38;cursor:default}.download-video{color:#f3f4f6;box-sizing:border-box;background:#2c2c2e;border:1px solid #3a3a3c}.download-video:hover:not(:disabled){background:#3a3a3c}.download-video:disabled{opacity:.38;cursor:default}.export-canvas{opacity:.02;pointer-events:none;z-index:0;contain:strict;width:2px;height:2px;position:fixed;top:0;left:0}.phone-screen{--sim-keyboard-progress:0;--sim-keyboard-height:252px;--composer-bottom-rest:calc(18px + env(safe-area-inset-bottom,0px));--phone-w:390px;--phone-h:844px;width:min(var(--phone-w), 100cqw, calc(100cqh * 390 / 844));height:min(var(--phone-h), 100cqh, calc(100cqw * 844 / 390));background:var(--phone-bg);color:#f5f5f7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;border-radius:28px;flex-direction:column;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Noto Sans KR,sans-serif;display:flex;position:relative;overflow:hidden}.phone-header{flex-shrink:0;justify-content:space-between;align-items:center;padding:22px 16px 10px;display:flex}.phone-icon-btn,.phone-header-cluster,.composer-plus,.composer-mic,.composer-voice{color:#f3f4f6;background:var(--phone-chrome);border:0;justify-content:center;align-items:center;display:inline-flex}.phone-icon-btn{pointer-events:none;border-radius:50%;width:38px;height:38px}.phone-header-cluster{border-radius:999px;gap:2px;height:38px;padding:0 8px}.phone-header-action{justify-content:center;align-items:center;width:36px;height:38px;display:inline-flex}.phone-messages-shell{flex-direction:column;flex:auto;min-height:0;display:flex;position:relative}.phone-messages-shell.has-top-fade{--top-fade-size:0px;overflow:hidden;-webkit-mask-image:none;mask-image:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.phone-messages{overflow-anchor:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#3a3a3c transparent;flex:auto;min-height:0;padding:18px 16px 12px;overflow:hidden auto}.phone-messages::-webkit-scrollbar{width:4px}.phone-messages::-webkit-scrollbar-thumb{background:#3a3a3c;border-radius:999px}.chat-turn+.chat-turn{margin-top:22px}.user-row{justify-content:flex-end;display:flex}.turn-spacer{pointer-events:none;flex:none;width:100%}.user-bubble{background:var(--phone-user);color:#fff;letter-spacing:-.011em;white-space:pre-wrap;word-break:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:22px;max-width:78%;margin:0;padding:11px 16px;font-size:16px;font-weight:400;line-height:1.375}.ai-block{margin-top:28px;padding-right:8px}.chat-turn>.ai-block:first-child{margin-top:0}.thinking-dots{align-items:center;gap:5px;min-height:1.55em;font-size:16.5px;line-height:1.55;display:flex}.thinking-dots span{background:#c8c8cc;border-radius:50%;width:6px;height:6px;animation:1.1s ease-in-out infinite thinking-pulse}.thinking-dots span:nth-child(2){animation-delay:.16s}.thinking-dots span:nth-child(3){animation-delay:.32s}@keyframes thinking-pulse{0%,80%,to{opacity:.28;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}.ai-text{color:#f4f4f5;letter-spacing:-.014em;white-space:pre-wrap;word-break:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-size:16.5px;font-weight:400;line-height:1.55}.typing-caret{vertical-align:-.12em;background:#c8c8cc;width:1.5px;height:.95em;margin-left:1px;animation:1s step-end infinite caret-blink;display:inline-block}@keyframes caret-blink{0%,49%{opacity:1}50%,to{opacity:0}}.ai-actions{color:#c8c8cc;align-items:center;gap:16px;margin-top:16px;display:flex}.ai-actions.is-delayed{animation:.18s .5s both actions-in}@keyframes actions-in{0%{opacity:0}to{opacity:1}}.phone-composer{margin:8px 12px calc(var(--composer-bottom-rest,18px) * (1 - var(--sim-keyboard-progress,0)) + 4px * var(--sim-keyboard-progress,0));background:var(--phone-chrome);border-radius:999px;flex:none;align-items:center;gap:8px;min-height:52px;padding:8px 6px 8px 8px;display:flex}.composer-input{resize:none;color:#f5f5f7;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:0 0;border:0;outline:none;flex:auto;align-self:center;min-width:0;height:22px;min-height:22px;max-height:88px;margin:0;padding:0;font-size:16px;font-weight:400;line-height:22px;overflow-y:hidden}.composer-input::placeholder{color:#8e8e93;letter-spacing:inherit;vertical-align:middle;font-weight:400;line-height:22px}.composer-input:disabled{opacity:.55}.phone-composer.is-locked{opacity:.72}.composer-plus,.composer-mic{color:#fff;background:0 0;flex-shrink:0;width:36px;height:36px}.composer-placeholder{color:#8e8e93;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1;min-width:0;height:22px;font-size:16px;font-weight:400;line-height:22px}.composer-voice{background:var(--phone-voice);color:#fff;cursor:pointer;border-radius:50%;flex-shrink:0;width:36px;height:36px;padding:0}.composer-voice:disabled{opacity:.55;cursor:default}@media (width<=860px){.app{height:auto;max-height:none;overflow:visible}.app-header{align-items:flex-start;padding:16px 16px 8px}.workspace{padding:8px 16px calc(32px + env(safe-area-inset-bottom,0px));flex:none;grid-template-columns:1fr;align-items:start;gap:16px}.editor{align-self:stretch;max-height:none;overflow:visible}.editor-scroll{flex:none;overflow:visible}.preview-column{height:auto}.preview-phone-wrap{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.preview-side-tab{writing-mode:horizontal-tb;text-orientation:mixed;border-right:1px solid var(--line);letter-spacing:.02em;border-radius:8px;margin:0;padding:4px 8px;position:static;right:auto}.preview-helper-row{flex-wrap:wrap;align-items:flex-start}.preview-stage{flex:none;container-type:normal}.recording-actions-divider{display:none}.recording-bar>.reset-session{margin-left:0}.phone-screen{width:min(390px,100%);height:min(844px, calc(var(--visual-viewport-height,var(--vv-height,100dvh)) - 24px));max-height:calc(var(--visual-viewport-height,var(--vv-height,100dvh)) - 24px)}}.app.is-recording{left:0;right:0;top:var(--visual-viewport-offset-top,0px);width:100%;height:var(--visual-viewport-height,100dvh);max-height:var(--visual-viewport-height,100dvh);background:#000;flex-direction:column;display:flex;position:fixed;overflow:hidden}.app.is-recording .app-header,.app.is-recording .editor,.app.is-recording .preview-side-tab,.app.is-recording .preview-helper-row{display:none}.app.is-recording .workspace{flex-direction:column;flex:auto;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0;display:flex}.app.is-recording .preview-column{flex:auto;gap:0;width:100%;height:100%;min-height:0}.app.is-recording .preview-shell{flex:auto;height:100%;min-height:0}.preview-stage.is-recording{background:#000;flex-direction:column;flex:auto;width:100%;height:100%;min-height:0;max-height:100%;display:flex;container-type:normal}:-webkit-any(.preview-stage:fullscreen,.preview-stage:-webkit-full-screen){background:#000;flex-direction:column;width:100%;height:100%;max-height:100%;display:flex;container-type:normal}:is(.preview-stage:fullscreen,.preview-stage:fullscreen){background:#000;flex-direction:column;width:100%;height:100%;max-height:100%;display:flex;container-type:normal}:-webkit-any(.preview-stage.is-recording .preview-phone-wrap,.preview-stage:fullscreen .preview-phone-wrap,.preview-stage:-webkit-full-screen .preview-phone-wrap){flex-direction:column;flex:auto;width:100%;max-width:none;height:100%;min-height:0;display:flex}:is(.preview-stage.is-recording .preview-phone-wrap,.preview-stage:fullscreen .preview-phone-wrap,.preview-stage:fullscreen .preview-phone-wrap){flex-direction:column;flex:auto;width:100%;max-width:none;height:100%;min-height:0;display:flex}:-webkit-any(.preview-stage.is-recording .phone-screen,.preview-stage:fullscreen .phone-screen,.preview-stage:-webkit-full-screen .phone-screen){--composer-bottom-rest:calc(12px + env(safe-area-inset-bottom,0px));border-radius:0;flex-direction:column;flex:auto;width:100%;height:100%;min-height:0;max-height:none;display:flex;overflow:hidden}:is(.preview-stage.is-recording .phone-screen,.preview-stage:fullscreen .phone-screen,.preview-stage:fullscreen .phone-screen){--composer-bottom-rest:calc(12px + env(safe-area-inset-bottom,0px));border-radius:0;flex-direction:column;flex:auto;width:100%;height:100%;min-height:0;max-height:none;display:flex;overflow:hidden}:-webkit-any(.preview-stage.is-recording .phone-header,.preview-stage:fullscreen .phone-header,.preview-stage:-webkit-full-screen .phone-header){padding-top:calc(14px + env(safe-area-inset-top,0px));flex:none}:is(.preview-stage.is-recording .phone-header,.preview-stage:fullscreen .phone-header,.preview-stage:fullscreen .phone-header){padding-top:calc(14px + env(safe-area-inset-top,0px));flex:none}:-webkit-any(.preview-stage.is-recording .phone-messages-shell,.preview-stage:fullscreen .phone-messages-shell,.preview-stage:-webkit-full-screen .phone-messages-shell,.preview-stage.is-recording .phone-messages,.preview-stage:fullscreen .phone-messages,.preview-stage:-webkit-full-screen .phone-messages){flex:auto;min-height:0}:is(.preview-stage.is-recording .phone-messages-shell,.preview-stage:fullscreen .phone-messages-shell,.preview-stage:fullscreen .phone-messages-shell,.preview-stage.is-recording .phone-messages,.preview-stage:fullscreen .phone-messages,.preview-stage:fullscreen .phone-messages){flex:auto;min-height:0}:-webkit-any(.preview-stage.is-recording .phone-messages,.preview-stage:fullscreen .phone-messages,.preview-stage:-webkit-full-screen .phone-messages){overflow-y:auto}:is(.preview-stage.is-recording .phone-messages,.preview-stage:fullscreen .phone-messages,.preview-stage:fullscreen .phone-messages){overflow-y:auto}:-webkit-any(.preview-stage.is-recording .phone-composer,.preview-stage:fullscreen .phone-composer,.preview-stage:-webkit-full-screen .phone-composer){flex:none;position:relative}:is(.preview-stage.is-recording .phone-composer,.preview-stage:fullscreen .phone-composer,.preview-stage:fullscreen .phone-composer){flex:none;position:relative}.composer-spacer{pointer-events:none;flex:none;height:68px}.recording-composer-dock{left:12px;right:12px;bottom:calc(var(--vv-bottom-inset,0px) + env(safe-area-inset-bottom,0px) + 8px);z-index:10000;box-sizing:border-box;background:#2c2c2e;background:var(--phone-chrome,#2c2c2e);color:#f3f4f6;width:auto;min-height:52px;box-shadow:none;border:0;border-radius:999px;align-items:center;gap:8px;margin:0;padding:8px 6px 8px 8px;display:flex;position:fixed}html.keyboard-open .recording-composer-dock,html.composer-focused.keyboard-open .recording-composer-dock{bottom:calc(var(--vv-bottom-inset,0px) + 6px)}:is(html.keyboard-open .preview-stage.is-recording .phone-header,html.keyboard-open .preview-stage:fullscreen .phone-header){padding-top:10px}html.keyboard-open .composer-spacer{height:64px}html.keyboard-open .app.is-recording{top:var(--visual-viewport-offset-top,0px);height:var(--visual-viewport-height,100dvh);max-height:var(--visual-viewport-height,100dvh)}.sim-keyboard-spacer{height:calc(var(--sim-keyboard-progress,0) * var(--sim-keyboard-height,252px));pointer-events:none;flex:none}.sim-keyboard{z-index:2;height:var(--sim-keyboard-height,252px);color:#f5f5f7;pointer-events:none;-webkit-user-select:none;user-select:none;transform:translate3d(0, calc((1 - var(--sim-keyboard-progress,0)) * 100%), 0);will-change:transform;background:#1c1c1e;flex-direction:column;padding:8px 4px 0;display:flex;position:absolute;bottom:0;left:0;right:0}.sim-keyboard-rows{flex-direction:column;flex:auto;gap:10px;display:flex}.sim-keyboard-row{gap:6px;height:42px;display:grid}.sim-keyboard-row-10{grid-template-columns:repeat(10,minmax(0,1fr))}.sim-keyboard-row-9{grid-template-columns:repeat(9,minmax(0,1fr));padding:0 18px}.sim-keyboard-row-3{grid-template-columns:1.25fr repeat(7,minmax(0,1fr)) 1.25fr}.sim-keyboard-row-4{grid-template-columns:1.15fr 1fr 3.3fr 1.35fr}.sim-key{color:#f5f5f7;letter-spacing:.02em;background:#3a3a3c;border-radius:8px;justify-content:center;align-items:center;min-width:0;height:42px;font-size:16px;font-weight:400;display:flex}.sim-key-mod{color:#f5f5f7;background:#2c2c2e}.sim-key-123{letter-spacing:.04em;font-size:13px}.sim-key-space{background:#3a3a3c}.sim-key-enter{color:#f5f5f7;letter-spacing:.02em;font-size:13px}.sim-keyboard-aux{color:#c7c7cc;flex:none;justify-content:space-between;align-items:center;height:36px;padding:0 22px 6px;display:flex}