@import"https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;700&display=swap";:root{--bg-deep: #020205;--accent: #00fff2;--accent-glow: rgba(0, 255, 242, .4);--secondary: #7000ff;--secondary-glow: rgba(112, 0, 255, .3);--glass-bg: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .08);--glass-highlight: rgba(255, 255, 255, .12);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .6);--text-muted: rgba(255, 255, 255, .35);--font-main: "Outfit", sans-serif;--font-serif: "Instrument Serif", serif;--font-condensed: "Space Grotesk", sans-serif;--font-mono: "Geist Mono", monospace;--ease: cubic-bezier(.16, 1, .3, 1);--transition-fast: .2s var(--ease);--transition: .5s var(--ease)}*{margin:0;padding:0;box-sizing:border-box;cursor:default}body{background-color:var(--bg-deep);color:var(--text-primary);font-family:var(--font-main);height:100vh;height:100dvh;overflow:hidden;position:relative;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 15% 15%,var(--secondary-glow) 0%,transparent 40%),radial-gradient(circle at 85% 85%,var(--accent-glow) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0%,var(--bg-deep) 100%);pointer-events:none;z-index:-1;animation:atmosphere 15s infinite alternate ease-in-out}@keyframes atmosphere{0%{transform:scale(1);opacity:.8}to{transform:scale(1.1);opacity:1}}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.03;background:url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');z-index:100}#root{height:100%;width:100%;display:flex;flex-direction:column}.header{height:72px;padding:0 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:50;background:#02020566}.brand-wrapper{display:flex;align-items:center;gap:16px}.logo{font-weight:800;font-size:1.25rem;letter-spacing:-.5px;display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--font-condensed)}.logo-dot{width:14px;height:14px;background:linear-gradient(135deg,var(--accent),var(--secondary));border-radius:4px;box-shadow:0 0 15px var(--accent-glow);animation:rotate 6s linear infinite}.subtext{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}.container{flex:1;display:grid;grid-template-columns:1fr 420px;gap:20px;padding:20px;height:calc(100vh - 72px);position:relative}.glass-panel{position:relative;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:32px;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 24px -1px #0003,inset 0 0 0 1px var(--glass-highlight);transition:var(--transition)}.preview-panel{pointer-events:all}.control-panel{transition:transform .3s ease-out}.glass-panel:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:24px;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent,rgba(255,255,255,.1));mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;pointer-events:none}.viewport{flex:1;background:#000;margin:20px;border-radius:20px;border:1px solid var(--glass-border);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 40px #00000080}.viewport-placeholder{text-align:center;opacity:1;transition:var(--transition);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;width:100%;height:100%;padding:20px}.studio-hero-immense{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:60px;animation:studioFadeIn 1.5s var(--ease)}.studio-top-accent{position:absolute;top:40px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:flex-start}.studio-year{font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:2px;color:var(--text-primary)}.studio-service-list{font-family:var(--font-mono);font-size:10px;line-height:1.8;text-align:right;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary)}.studio-main-title{display:flex;flex-direction:column;align-items:center;gap:0;margin:0}.studio-main-title span{display:block;line-height:.75;letter-spacing:-.07em;font-family:var(--font-condensed);font-weight:900}.word-small{font-family:var(--font-serif)!important;font-style:italic;font-size:clamp(2rem,5vw,3.5rem);color:var(--text-muted);font-weight:400!important;margin-bottom:-15px}.word-large{font-size:clamp(5rem,13vw,11rem);color:#fff;filter:drop-shadow(0 0 50px rgba(255,255,255,.15))}.word-medium{font-size:clamp(3.5rem,9vw,8rem);color:var(--text-secondary)}.gradient-studio{background:linear-gradient(135deg,#fff 0%,var(--accent) 30%,#ffdf2b 60%,#ff5e00 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 60px var(--accent-glow))}.studio-bottom-accent{position:absolute;bottom:40px;left:40px}.studio-capsule-desc{font-family:var(--font-main);font-size:12px;line-height:1.6;color:var(--text-muted);max-width:320px;letter-spacing:.02em}@keyframes studioFadeIn{0%{opacity:0;filter:blur(20px);transform:scale(1.05)}to{opacity:1;filter:blur(0);transform:scale(1)}}.generating-view{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at center,#7000ff0d,#000)}.code-stream-preview{flex:1;padding:32px;color:var(--accent);font-family:var(--font-mono);font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-all;overflow-y:auto;-webkit-mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);opacity:.8}.generating-label{padding:24px;display:flex;align-items:center;justify-content:center;gap:16px;font-family:var(--font-mono);font-size:.8rem;letter-spacing:3px;color:var(--accent);border-top:1px solid var(--glass-border);background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.spinner{width:20px;height:20px;border:2px solid rgba(0,255,242,.1);border-top-color:var(--accent);border-radius:50%;animation:spin 1s infinite cubic-bezier(.5,0,.5,1)}@keyframes spin{to{transform:rotate(360deg)}}.result-iframe{width:100%;height:100%;border:none;background:transparent}.controls{padding:32px;display:flex;flex-direction:column;gap:24px;height:100%}.label-group{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.label-group label{text-transform:uppercase;font-size:.65rem;letter-spacing:2px;color:var(--text-muted);font-weight:600}.prompt-wrapper{position:relative;background:#0006;border-radius:20px;border:1px solid var(--glass-border);transition:var(--transition-fast)}.prompt-wrapper:focus-within{border-color:var(--accent);box-shadow:0 0 40px -10px var(--accent-glow);background:#0009}textarea{width:100%;height:200px;background:transparent;border:none;padding:24px;color:#fff;font-family:var(--font-main);font-size:1rem;resize:none;outline:none;line-height:1.6;font-weight:400}textarea::placeholder{color:var(--text-muted)}.style-select{width:100%;background:#ffffff0a;border:1px solid var(--glass-border);border-radius:12px;padding:14px 16px;color:#fff;font-family:var(--font-main);font-size:.9rem;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="white" stroke-opacity="0.4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');background-repeat:no-repeat;background-position:right 20px center;transition:var(--transition-fast)}.style-select:hover:not(:disabled){border-color:var(--glass-highlight);background-color:#ffffff14}.gen-button{width:100%;height:56px;border-radius:16px;border:none;background:#fff;color:#000;font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;position:relative;overflow:hidden;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}.gen-button:hover:not(:disabled){transform:translateY(-2px);background:var(--accent);box-shadow:0 8px 32px -4px var(--accent-glow)}.gen-button:active:not(:disabled){transform:translateY(0)}.gen-button:disabled{opacity:.4;cursor:wait}.prism-shift{position:absolute;width:300px;height:300px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);filter:blur(60px);opacity:.2;pointer-events:none;mix-blend-mode:screen;z-index:1}.status-bar{margin-top:auto;border-top:1px solid var(--glass-border);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:1px}.tag{padding:4px 10px;border:1px solid var(--glass-border);border-radius:6px;background:#ffffff08;font-size:9px;font-family:var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-secondary)}.status-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block;margin-right:8px;box-shadow:0 0 12px var(--accent)}.scanlines{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(#12101000 50%,#0000001a 50%);background-size:100% 4px;z-index:200;pointer-events:none;opacity:.05}.action-button{background:#ffffff08;border:1px solid var(--glass-border);border-radius:12px;padding:8px 16px;color:var(--text-secondary);font-family:var(--font-mono);font-size:10px;letter-spacing:1px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition-fast);text-transform:uppercase}.action-button:hover:not(:disabled){background:#ffffff14;border-color:var(--accent);color:#fff;transform:translateY(-1px)}.copy-btn{border-color:#00fff24d}.copy-btn:hover{box-shadow:0 0 20px -5px var(--accent-glow)}.mobile-app{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg-deep);overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0}.mobile-app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 10% 10%,var(--secondary-glow) 0%,transparent 50%),radial-gradient(circle at 90% 90%,var(--accent-glow) 0%,transparent 50%),#000;pointer-events:none;z-index:0}.mobile-app:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.08;background:url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');z-index:1}.mobile-header{height:60px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;background:transparent;z-index:100;transition:transform .4s var(--ease)}.mobile-brand-wrapper{display:flex;align-items:center;gap:8px}.mobile-logo{font-family:var(--font-condensed);font-weight:800;font-size:18px;letter-spacing:-.5px;color:#fff;display:flex;align-items:center;gap:8px}.mobile-logo-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent-glow)}.mobile-status-indicator{display:flex;align-items:center;gap:8px}.status-pill{position:relative;padding:6px 12px;border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}.status-glow{position:absolute;top:0;right:0;bottom:0;left:0;filter:blur(8px);opacity:.4;border-radius:20px;transition:background .5s ease}.status-pill.ready .status-glow{background:radial-gradient(circle at center,#0f0 0%,transparent 70%)}.status-pill.generating .status-glow{background:radial-gradient(circle at center,var(--accent) 0%,transparent 70%);animation:glow-pulse 1s infinite alternate}@keyframes glow-pulse{0%{opacity:.3;transform:scale(.95)}to{opacity:.6;transform:scale(1.05)}}.mobile-status-action svg{color:#fff;opacity:1}.mobile-status-action{background:none;border:none;padding:4px 8px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .2s;border-radius:20px;color:#fff}.mobile-status-action:active{background:#ffffff1a;transform:scale(.96)}.status-dot.action{width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 8px #fffc}.status-label{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase}@keyframes pulse-fast{0%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}to{opacity:.5;transform:scale(.9)}}.mobile-preview{flex:1;min-height:0;position:relative;z-index:1}.mobile-placeholder{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:100%;padding:32px 24px;text-align:left}.mobile-placeholder-content{max-width:100%}.mobile-placeholder-content h1{font-size:3.8rem;line-height:.9;margin-bottom:32px;letter-spacing:-2px;font-weight:400}.mobile-placeholder-content h1 span.serif{font-family:var(--font-serif);font-style:italic;font-size:1.1em;display:block;margin-bottom:-10px}.mobile-placeholder-content h1 span.bold-sans{font-family:var(--font-condensed);font-weight:900;text-transform:uppercase;display:block;letter-spacing:-4px;color:#fff}.gradient-text-luxury{background:linear-gradient(to right,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(0,255,242,.3))}.mobile-subheadline{font-size:1rem;color:var(--text-secondary);line-height:1.5;max-width:280px;font-weight:400;letter-spacing:-.2px;opacity:.8}.mobile-generating{width:100%;height:100%;display:flex;flex-direction:column;background:#000}.mobile-generating-label{padding:16px;display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:2px;color:var(--accent);border-top:1px solid var(--glass-border);background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mobile-iframe{width:100%;height:100%;border:none;background:#000}.mobile-input-container{padding:16px 20px;padding-bottom:max(24px,env(safe-area-inset-bottom));background:transparent;z-index:100;position:relative}.mobile-input-wrapper{display:flex;flex-direction:column;gap:8px;background:#1e1e1e;border:1px solid rgba(255,255,255,.08);border-radius:32px;padding:16px 20px;box-shadow:0 12px 48px #0009;transition:var(--transition-fast)}.mobile-input-wrapper:focus-within{border-color:#ffffff26;background:#222}.mobile-textarea{flex:1;background:transparent;border:none;color:#fff;font-family:var(--font-main);font-size:1.1rem;font-weight:500;resize:none;outline:none;max-height:96px;min-height:28px;padding:2px 0;line-height:1.5;overflow-y:hidden}.mobile-textarea:focus{overflow-y:auto}.mobile-textarea::placeholder{color:#fff6}.mobile-actions-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.mobile-actions-left{display:flex;align-items:center;gap:20px}.mobile-actions-right{display:flex;align-items:center;gap:16px}.mobile-action-icon{background:none;border:none;color:#ffffff80;padding:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s}.mobile-action-icon:active{color:#fff}.mobile-plan-btn{background:none;border:none;color:#fff9;font-family:var(--font-main);font-size:1rem;font-weight:500;padding:4px 8px;cursor:pointer}.mobile-action-icon.has-aesthetic{color:var(--accent)}.mobile-send-btn-circle{width:48px;height:48px;border-radius:24px;background:#444;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);flex-shrink:0}.mobile-send-btn-circle:not(:disabled):active{background:#555;transform:scale(.94)}.mobile-send-btn-circle:disabled{opacity:.3}.spinner-small-white{width:18px;height:18px;border:2px solid rgba(255,255,255,.1);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:10px;transition:var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:var(--glass-highlight)}.keyboard-hint{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:16px;text-align:center;letter-spacing:1px;opacity:.6}.keyboard-hint kbd{background:#ffffff0d;border:1px solid var(--glass-border);padding:2px 6px;border-radius:4px;color:var(--text-secondary)}@media(max-width:1024px){.container{grid-template-columns:1fr;padding:12px;gap:12px}.viewport{margin:0;min-height:400px}}.spinner-small{width:18px;height:18px;border:2px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin .8s linear infinite}.mobile-style-picker{position:absolute;bottom:100%;left:16px;right:16px;margin-bottom:12px;background:#020205f2;border:1px solid var(--glass-border);border-radius:20px;padding:20px;max-height:60vh;overflow-y:auto;backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);animation:slideUp .3s var(--ease);z-index:200;box-shadow:0 20px 60px #0009,inset 0 0 0 1px #ffffff0d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.style-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--glass-border)}.style-picker-header span{font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);font-family:var(--font-mono)}.style-picker-header button{background:#ffffff0d;border:1px solid var(--glass-border);border-radius:8px;color:var(--text-secondary);font-size:1.25rem;cursor:pointer;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.style-picker-header button:active{background:#ffffff1a;transform:scale(.95)}.style-picker-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.style-option{background:#ffffff0a;border:1px solid var(--glass-border);border-radius:12px;padding:14px 12px;color:var(--text-secondary);font-family:var(--font-main);font-size:.8rem;font-weight:500;text-align:center;cursor:pointer;transition:all .2s var(--ease);letter-spacing:.3px}.style-option:active{transform:scale(.98)}.style-option.active{background:#00fff21a;border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}@media(max-width:768px){.header,.container{display:none!important}body{overflow:hidden}*{cursor:default;-webkit-tap-highlight-color:transparent}.scanlines{opacity:.03}.mobile-copy-btn{background:#00fff21a;border:1px solid var(--accent);color:var(--accent);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0}.mobile-copy-btn:active{background:var(--accent);color:#000;box-shadow:0 0 15px var(--accent-glow)}.mobile-header,.mobile-input-container{transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease}.mobile-header.hidden{transform:translateY(-100%);opacity:0;pointer-events:none}.mobile-input-container.hidden{transform:translateY(120%);opacity:0;pointer-events:none}.mobile-input-wrapper{display:grid;grid-template-areas:"text text" "left right";grid-template-columns:1fr 1fr;gap:12px;align-items:center;background:#1e1e1e;border:1px solid rgba(255,255,255,.08);border-radius:32px;padding:20px 24px;box-shadow:0 12px 48px #0009;transition:all .4s cubic-bezier(.16,1,.3,1)}.mobile-textarea{grid-area:text;width:100%}.mobile-actions-left{grid-area:left;justify-self:start;display:flex;align-items:center}.mobile-actions-right{grid-area:right;justify-self:end;display:flex;align-items:center}.mobile-input-wrapper.bullet{grid-template-areas:"left text right";grid-template-columns:auto 1fr auto;align-items:center;padding:10px 14px;border-radius:99px;width:100%;gap:8px;background:#1e1e1ed9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-color:#ffffff1f;box-shadow:0 8px 32px #00000080}.mobile-input-wrapper.bullet .mobile-textarea{min-height:24px;padding:0;margin:0;display:flex;align-items:center;line-height:24px;font-size:16px;transform:translateY(1px)}.mobile-input-wrapper.bullet .mobile-actions-left{margin-bottom:0;padding-left:4px}.mobile-input-wrapper.bullet .mobile-actions-right{margin-bottom:0;padding-right:4px}.mobile-input-wrapper.bullet .mobile-send-btn-circle{width:34px;height:34px}.mobile-input-wrapper.bullet:focus-within{background:#141414f2;border-color:var(--accent);box-shadow:0 0 25px #00fff226;border-radius:24px}.mobile-input-wrapper.bullet:focus-within .mobile-textarea{min-height:64px}.mobile-actions-row{display:none}}