@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Mono&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: "Plus Jakarta Sans", sans-serif;--font-mono: "Space 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}.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:.4;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:32px}.viewport-placeholder span{font-family:var(--font-mono);font-size:.75rem;display:block;letter-spacing:4px;color:var(--text-secondary)}.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-main);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 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:0;animation:atmosphere 15s infinite alternate ease-in-out}.mobile-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;padding-top:max(16px,env(safe-area-inset-top));background:#02020599;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--glass-border);z-index:100;position:relative}.mobile-brand-wrapper{display:flex;flex-direction:column;gap:2px}.mobile-brand{display:flex;align-items:center;gap:8px}.logo-text{font-weight:800;font-size:1rem;letter-spacing:-.5px;color:#fff}.mobile-subtext{font-family:var(--font-mono);font-size:7px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-left:22px}.mobile-status-tag{padding:4px 10px;border:1px solid var(--accent);border-radius:6px;background:#00fff20d;font-size:8px;font-family:var(--font-mono);letter-spacing:1.5px;color:var(--accent);font-weight:700;text-shadow:0 0 10px var(--accent-glow)}.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:2rem;font-weight:800;line-height:1.1;margin-bottom:16px;letter-spacing:-1.5px}.gradient-text{background:linear-gradient(135deg,#fff 0%,var(--accent) 40%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px var(--accent-glow))}.mobile-subheadline{font-size:.875rem;color:var(--text-secondary);line-height:1.6;max-width:320px;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:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:#020205f2;border-top:1px solid var(--glass-border);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:100;position:relative}.mobile-input-wrapper{display:flex;align-items:center;gap:8px;background:#ffffff0a;border:1px solid var(--glass-border);border-radius:20px;padding:6px 6px 6px 14px;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);box-shadow:0 4px 24px #0000004d,inset 0 0 0 1px #ffffff0d;transition:var(--transition-fast)}.mobile-input-wrapper:focus-within{border-color:var(--accent);box-shadow:0 4px 24px #0000004d,0 0 20px var(--accent-glow),inset 0 0 0 1px #ffffff1a;background:#ffffff0f}.mobile-textarea{flex:1;background:transparent;border:none;color:#fff;font-family:var(--font-main);font-size:.9rem;resize:none;outline:none;max-height:100px;min-height:38px;padding:9px 0;line-height:1.4}.mobile-textarea::placeholder{color:var(--text-muted);opacity:.6}.mobile-style-btn{background:none;border:none;color:var(--text-muted);padding:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast);border-radius:8px;position:relative}.mobile-style-btn:hover,.mobile-style-btn:active{color:var(--accent);background:#ffffff0d}.mobile-style-btn.active{color:var(--accent);background:#00fff21a;border:1px solid var(--accent);animation:styleGlow 2s ease-in-out infinite}@keyframes styleGlow{0%,to{box-shadow:0 0 4.5px var(--accent-glow),0 0 9px #00fff21c}50%{box-shadow:0 0 9px var(--accent-glow),0 0 13.5px #00fff238}}.mobile-send-btn{width:40px;height:40px;border-radius:20px;border:none;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast);flex-shrink:0;box-shadow:0 2px 8px #0003}.mobile-send-btn:not(:disabled):active{transform:scale(.95);background:var(--accent);box-shadow:0 0 20px var(--accent-glow)}.mobile-send-btn:disabled{opacity:.4;cursor:not-allowed}::-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}}