@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";:root{--prompt-shell-max-width: 48rem;--prompt-input-min-height: 5.5rem;--motion-smooth: cubic-bezier(.16, 1, .3, 1);--landing-entry-duration: 1.08s;--view-transition-prompt-duration: 1.12s;--ease-macos: cubic-bezier(.4, 0, .2, 1);--bg-void: #0a0a0c;--bg-base: #111114;--bg-raised: #18181c;--bg-elevated: #1e1e24;--glass-fill: rgba(255, 255, 255, .08);--glass-border: rgba(255, 255, 255, .14);--glass-hover: rgba(255, 255, 255, .14);--glass-active: rgba(255, 255, 255, .05);--text-primary: rgba(255, 255, 255, .92);--text-secondary: rgba(255, 255, 255, .55);--text-tertiary: rgba(255, 255, 255, .3);--accent-brand: #c45c3e;--accent-brand-deep: #8a3d2e;--accent-brand-warm: #e8a090;--accent-amber: var(--accent-brand);--accent-amber-glow: color-mix(in srgb, var(--accent-brand) 22%, transparent);--accent-blue: #3b82f6;--accent-green: #22c55e;--accent-red: #ef4444;--border-subtle: rgba(255, 255, 255, .07);--border-default: rgba(255, 255, 255, .14);--border-strong: rgba(255, 255, 255, .24);--shadow-float: 0 8px 32px rgba(0, 0, 0, .48), 0 2px 8px rgba(0, 0, 0, .32);--shadow-card: 0 4px 16px rgba(0, 0, 0, .32);--shadow-glow-amber: 0 1px 2px rgba(0, 0, 0, .2), 0 2px 8px var(--accent-amber-glow);--blur-sm: blur(12px);--blur-md: blur(24px);--blur-lg: blur(40px);--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 9999px;--btn-radius: 10px;--panel-back: var(--bg-raised);--panel-stroke: var(--border-default);--main-back: var(--bg-void);--main-text-color: var(--text-primary);--secondary-text-color: var(--text-secondary);--input-color: rgba(255, 255, 255, .06);--accent-color: var(--accent-amber);--button-hover: var(--glass-hover);--ai-paper: var(--bg-base);--ai-paper-2: var(--bg-void);--ai-ink: var(--bg-elevated);--ai-text: var(--text-primary);--ai-muted: var(--text-secondary);--ai-accent: var(--accent-brand);--ai-accent-deep: var(--accent-brand-deep);--ai-accent-warm: var(--accent-brand-warm);--ai-stroke: var(--border-default);--media-sidebar-width: 300px;--studio-panel-width: 352px;--editor-rail-width-compact: 56px;--editor-rail-width-expanded: 76px;--font-ui: "DM Sans", system-ui, sans-serif;--font-display: "Newsreader", Georgia, "Times New Roman", serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace}@media (max-width: 768px){:root{--prompt-input-min-height: 3.125rem}}@media (prefers-color-scheme: light){:root{--bg-void: #e8e8ed;--bg-base: #f0f0f5;--bg-raised: #f8f8fc;--bg-elevated: #ffffff;--glass-fill: rgba(255, 255, 255, .55);--glass-border: rgba(0, 0, 0, .08);--glass-hover: rgba(255, 255, 255, .75);--glass-active: rgba(0, 0, 0, .04);--text-primary: rgba(0, 0, 0, .88);--text-secondary: rgba(0, 0, 0, .5);--text-tertiary: rgba(0, 0, 0, .3);--border-subtle: rgba(0, 0, 0, .05);--border-default: rgba(0, 0, 0, .1);--border-strong: rgba(0, 0, 0, .2);--shadow-float: 0 8px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);--shadow-card: 0 2px 12px rgba(0, 0, 0, .08);--input-color: rgba(0, 0, 0, .04);--ai-paper: var(--bg-base);--ai-paper-2: var(--bg-void);--ai-ink: var(--bg-elevated);--ai-text: var(--text-primary);--ai-muted: var(--text-secondary);--ai-stroke: var(--border-default)}}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--main-back);color:var(--main-text-color);overflow:hidden}.editor{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;font-family:var(--font-ui);color:var(--ai-text);background:radial-gradient(ellipse 100% 70% at 50% -15%,rgba(196,92,62,.09),transparent 52%),radial-gradient(ellipse 80% 50% at 100% 50%,rgba(59,130,246,.04),transparent 45%),var(--bg-void);--editor-rail-width: var(--editor-rail-width-expanded)}.editor.panel-open{--editor-rail-width: var(--editor-rail-width-compact)}.canvas-area{flex:1;min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse 90% 55% at 50% 100%,rgba(24,26,40,.65),transparent 55%),color-mix(in srgb,var(--bg-base) 94%,var(--bg-void));z-index:1;transition:margin-left .25s var(--ease-macos),margin-right .25s var(--ease-macos)}.editor.panel-open .canvas-area{margin-left:calc(var(--studio-panel-width) - var(--editor-rail-width))}.editor.media-sidebar-collapsed .canvas-area{margin-right:var(--editor-rail-width)}.editor.media-sidebar-open .canvas-area{margin-right:var(--media-sidebar-width)}.canvas-area .motionity-frame{flex:1;width:100%;min-height:0;border:none}.editor-left-menu{width:var(--editor-rail-width);flex-shrink:0;background:#ffffff0f;backdrop-filter:var(--blur-lg) saturate(180%);-webkit-backdrop-filter:var(--blur-lg) saturate(180%);border-right:.5px solid var(--glass-border);display:flex;flex-direction:column;align-items:center;padding-top:12px;gap:4px;z-index:100;transition:width .25s var(--ease-macos);box-shadow:inset -1px 0 #ffffff0a}.menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:40px;min-height:40px;padding:8px;background:transparent;border:.5px solid transparent;border-radius:var(--btn-radius);color:var(--text-secondary);font-family:Inter,sans-serif;font-size:11px;font-weight:500;cursor:pointer;transition:color .14s var(--ease-macos),background .14s var(--ease-macos),border-color .14s var(--ease-macos),transform .1s var(--ease-macos)}.menu-item:hover{color:var(--text-primary);background:var(--glass-hover);border-color:#ffffff1f}.menu-item:active{transform:scale(.97);background:var(--glass-active)}.menu-item.active{color:#fff8f5;background:linear-gradient(145deg,var(--accent-brand) 0%,var(--accent-brand-deep) 100%);border-color:transparent;box-shadow:0 1px #ffffff1a inset,var(--shadow-glow-amber);font-weight:600}.menu-item-icon{font-size:18px;line-height:1}.menu-item-label{line-height:1.2;max-width:52px;text-align:center;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.editor:not(.panel-open) .menu-item-label{max-width:68px}.menu-item-icon-code{font-family:var(--font-mono, "JetBrains Mono", ui-monospace, monospace);font-size:13px;font-weight:600;letter-spacing:-.06em}.menu-item:focus-visible{outline:2px solid color-mix(in srgb,var(--accent-amber) 70%,transparent);outline-offset:2px}.ai-floating-panel{position:fixed;top:0;left:0;width:var(--studio-panel-width);height:100%;z-index:99999;background:#111114c7;backdrop-filter:var(--blur-lg) saturate(180%);-webkit-backdrop-filter:var(--blur-lg) saturate(180%);border-right:.5px solid var(--glass-border);box-shadow:var(--shadow-float);display:flex;flex-direction:column;transform:translate(-100%);transition:transform .25s var(--ease-macos);overflow:hidden}.ai-floating-panel.open{transform:translate(0)}.editor-media-sidebar{position:fixed;top:0;right:0;width:var(--media-sidebar-width);height:100%;z-index:99990;background:#111114c7;backdrop-filter:var(--blur-lg) saturate(180%);-webkit-backdrop-filter:var(--blur-lg) saturate(180%);border-left:.5px solid var(--glass-border);box-shadow:var(--shadow-float);overflow-y:auto;overflow-x:hidden;transform:translate(100%);transition:transform .25s var(--ease-macos)}.editor-media-sidebar.open{transform:translate(0)}.editor-media-sidebar .editor-right-stack{display:flex;flex-direction:column;min-height:100%;box-sizing:border-box}.editor-media-sidebar .editor-right-stack .ai-panel{flex:1 1 40%;min-height:160px;max-height:min(46vh,420px);border-bottom:.5px solid var(--border-subtle);overflow:hidden}.editor-media-sidebar .media-library{border-bottom:none;flex:1 1 55%;min-height:0;box-sizing:border-box}.editor-right-rail{position:fixed;top:0;right:0;width:var(--editor-rail-width);height:100%;z-index:99989;flex-shrink:0;background:#ffffff0f;backdrop-filter:var(--blur-lg) saturate(180%);-webkit-backdrop-filter:var(--blur-lg) saturate(180%);border-left:.5px solid var(--glass-border);display:flex;flex-direction:column;align-items:center;padding-top:12px;gap:4px;box-sizing:border-box;transition:width .25s var(--ease-macos);box-shadow:inset 1px 0 #ffffff0a}.editor-right-rail .menu-item-media-rail{width:auto;min-width:48px;max-width:64px;padding-left:6px;padding-right:6px}.editor-right-rail .menu-item-media-rail .menu-item-label{max-width:none;word-break:normal;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual;white-space:nowrap;font-size:10px;letter-spacing:.02em}.editor-right-rail .menu-item-icon-media svg{width:20px;height:20px;display:block}@media (max-width: 768px){html,body{width:100%;max-width:100%;overflow:hidden;height:100dvh;max-height:100dvh}.editor{width:100%;max-width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;box-sizing:border-box;touch-action:manipulation;--studio-panel-width: 100%;--media-sidebar-width: 100%;--editor-mobile-nav-h: calc(56px + env(safe-area-inset-bottom, 0px)) }.editor.panel-open .canvas-area{margin-left:0}.editor.media-sidebar-open .canvas-area,.editor.media-sidebar-collapsed .canvas-area{margin-right:0}.editor-left-menu{position:fixed;bottom:0;left:0;right:0;top:auto;width:100%;height:auto;min-height:var(--editor-mobile-nav-h);flex-direction:row;justify-content:center;align-items:center;gap:12px;padding:8px 16px;padding-bottom:env(safe-area-inset-bottom,0);border-right:none;border-top:.5px solid var(--border-subtle);z-index:10050;box-shadow:0 -8px 32px #00000073;backdrop-filter:var(--blur-lg) saturate(180%);-webkit-backdrop-filter:var(--blur-lg) saturate(180%);background:#111114e0}.editor-left-menu .menu-item{flex:1;max-width:180px;min-height:44px;flex-direction:row;gap:8px;touch-action:manipulation}.canvas-area{width:100%;flex:1 1 0;min-height:0;min-width:0;padding-bottom:var(--editor-mobile-nav-h);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.ai-floating-panel:before,.editor-media-sidebar:before{content:"";flex-shrink:0;width:40px;height:5px;margin:10px auto 6px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 16%,transparent)}.ai-floating-panel>.studio-left-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.ai-floating-panel{top:max(env(safe-area-inset-top,0px),min(24dvh,200px));bottom:0;left:0;right:0;width:100%;max-width:100%;max-height:calc(100dvh - max(env(safe-area-inset-top,0px),min(24dvh,200px)) - env(safe-area-inset-bottom,0px));height:auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-right:none;border-top:.5px solid var(--glass-border);box-shadow:var(--shadow-float);transform:translateY(100%);transition:transform .32s var(--ease-macos);backdrop-filter:var(--blur-lg) saturate(180%);-webkit-backdrop-filter:var(--blur-lg) saturate(180%);background:#111114f0;overflow:hidden;overscroll-behavior:contain}.ai-floating-panel.open{transform:translateY(0);padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);padding-bottom:max(10px,env(safe-area-inset-bottom,0))}.editor-media-sidebar{display:flex;flex-direction:column;overflow:hidden;top:max(env(safe-area-inset-top,0px),min(24dvh,200px));bottom:0;left:0;right:0;width:100%;max-width:100%;max-height:calc(100dvh - max(env(safe-area-inset-top,0px),min(24dvh,200px)) - env(safe-area-inset-bottom,0px));height:auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-left:none;border-top:.5px solid var(--glass-border);box-shadow:var(--shadow-float);transform:translateY(100%);transition:transform .32s var(--ease-macos);backdrop-filter:var(--blur-lg) saturate(180%);-webkit-backdrop-filter:var(--blur-lg) saturate(180%);background:#111114f0}.editor-media-sidebar .editor-right-stack{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.editor-media-sidebar.open{transform:translateY(0);padding-right:env(safe-area-inset-right,0);padding-bottom:max(10px,env(safe-area-inset-bottom,0))}.editor-right-rail{top:auto;bottom:calc(var(--editor-mobile-nav-h) + 10px);left:auto;right:10px;width:auto;height:auto;min-height:0;padding:6px 0 0;border:none;border-radius:var(--radius-md);background:#ffffff1a;backdrop-filter:var(--blur-md) saturate(160%);-webkit-backdrop-filter:var(--blur-md) saturate(160%);border:.5px solid var(--glass-border);box-shadow:var(--shadow-card);z-index:10040}.editor-right-rail .menu-item-media-rail{width:auto;min-width:52px;min-height:48px;padding:10px 12px}}@media (max-width: 768px){.editor.editor--landing-entry .ai-floating-panel.open,.editor.editor--landing-entry .editor-media-sidebar.open{transform:translateY(100%)}}.ai-floating-panel .ai-panel{flex:1 1 45%;min-height:min(280px,40vh)}.ai-floating-panel .props-panel{flex:1 1 auto;min-height:0;max-height:none}.ai-floating-panel .studio-left-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 12px 12px;gap:10px;overflow:hidden}.ai-floating-panel .studio-left-body:not(:has(.ai-panel)) .props-panel{flex:1 1 auto;min-height:0}.ai-floating-panel .studio-left-body:has(.ai-panel) .props-panel{flex:0 1 48%;min-height:140px;max-height:48%}.ai-floating-panel .studio-left-body:has(.ai-panel) .ai-panel{flex:1 1 45%;min-height:min(280px,40vh)}.studio-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:10px;flex-shrink:0;background:#ffffff1a;backdrop-filter:var(--blur-md) saturate(160%);-webkit-backdrop-filter:var(--blur-md) saturate(160%);border:.5px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);font-family:var(--font-ui)}.studio-panel-header .studio-home-link{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--btn-radius);color:var(--ai-muted);text-decoration:none;transition:color .18s ease,background .18s ease}.studio-panel-header .studio-home-icon{width:18px;height:18px;display:block}.studio-panel-header .studio-home-link:hover{color:var(--ai-text);background:color-mix(in srgb,#fff 6%,transparent)}.studio-panel-header .studio-close-btn{background:none;border:none;color:var(--ai-muted);font-size:16px;cursor:pointer;padding:4px 8px;line-height:1;border-radius:var(--btn-radius);transition:color .18s ease,background .18s ease}.studio-panel-header .studio-close-btn:hover{color:var(--ai-text);background:color-mix(in srgb,#fff 6%,transparent)}.editor,.editor *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}.editor ::-webkit-scrollbar{width:5px;height:5px}.editor ::-webkit-scrollbar-track{background:transparent}.editor ::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:var(--radius-pill)}.editor ::-webkit-scrollbar-thumb:hover{background:#ffffff3d}.editor ::-webkit-scrollbar-corner{background:transparent}.canvas-area .renderer-iframe{flex:1;width:100%;min-height:0;border:none}.ai-floating-panel .remotion-code-panel{flex:1;min-height:0}.editor.editor--landing-entry.panel-open .canvas-area{margin-left:0;margin-right:0;transition:margin-left var(--landing-entry-duration) var(--motion-smooth),margin-right var(--landing-entry-duration) var(--motion-smooth)}.editor.editor--landing-entry .ai-floating-panel.open{transform:translate(-100%);transition:transform var(--landing-entry-duration) var(--motion-smooth)}.editor.editor--landing-entry .editor-media-sidebar.open{transform:translate(100%);transition:transform var(--landing-entry-duration) var(--motion-smooth)}@supports (view-transition-name: none){::view-transition-group(prompt-bar){animation-duration:var(--view-transition-prompt-duration);animation-timing-function:var(--motion-smooth)}}.editor.editor--post-landing-ease.panel-open .canvas-area{transition:margin-left var(--landing-entry-duration) var(--motion-smooth),margin-right var(--landing-entry-duration) var(--motion-smooth)}.editor.editor--post-landing-ease .ai-floating-panel.open,.editor.editor--post-landing-ease .editor-media-sidebar.open{transition:transform var(--landing-entry-duration) var(--motion-smooth)}.route-loading-indicator{position:fixed;top:0;left:0;right:0;height:3px;z-index:2147483000;pointer-events:none;overflow:hidden;background:color-mix(in srgb,var(--border-default) 35%,transparent)}.route-loading-indicator:after{content:"";display:block;height:100%;width:min(42%,280px);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent-brand) 88%,transparent),color-mix(in srgb,var(--accent-brand-warm) 95%,transparent),transparent);animation:asap-route-indeterminate 1.05s var(--ease-macos, ease-in-out) infinite;border-radius:var(--radius-pill)}@keyframes asap-route-indeterminate{0%{transform:translate(-120%)}to{transform:translate(320%)}}@keyframes asap-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.route-loading-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147482990;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,var(--bg-void) 78%,transparent);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);pointer-events:none}.route-loading-card{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:280px;padding:1.35rem 1.6rem;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--bg-elevated) 72%,transparent);border:.5px solid var(--glass-border);box-shadow:var(--shadow-float);text-align:center;pointer-events:none}.route-loading-spinner{width:36px;height:36px;border-radius:50%;border:3px solid color-mix(in srgb,var(--accent-brand) 22%,transparent);border-top-color:var(--accent-brand);animation:asap-route-spinner .85s linear infinite}.route-loading-title{font-family:var(--font-ui, "DM Sans", system-ui, sans-serif);font-size:.95rem;font-weight:600;color:var(--text-primary);letter-spacing:.02em}.route-loading-hint{font-size:.78rem;line-height:1.4;color:var(--text-secondary)}@keyframes asap-route-spinner{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.route-loading-spinner{animation:none;border-top-color:color-mix(in srgb,var(--accent-brand) 55%,transparent)}.route-loading-indicator:after{animation:none;width:100%;opacity:.45}.editor.editor--landing-entry.panel-open .canvas-area,.editor.editor--landing-entry .ai-floating-panel.open,.editor.editor--landing-entry .editor-media-sidebar.open,.editor.editor--post-landing-ease.panel-open .canvas-area,.editor.editor--post-landing-ease .ai-floating-panel.open,.editor.editor--post-landing-ease .editor-media-sidebar.open{transition:none}}