:root{--bg-0: #07080d;--bg-1: #0b0d15;--surface: rgba(255, 255, 255, .035);--surface-strong: rgba(255, 255, 255, .06);--surface-hover: rgba(255, 255, 255, .075);--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--border-focus: rgba(167, 139, 250, .55);--text: #f4f5fb;--text-muted: #9ba1b3;--text-faint: #6b7184;--violet: #a78bfa;--violet-deep: #7c3aed;--pink: #ec4899;--cyan: #22d3ee;--blue: #3b82f6;--amber: #f59e0b;--emerald: #10b981;--rose: #f43f5e;--grad-brand: linear-gradient(135deg, #a78bfa 0%, #ec4899 55%, #f59e0b 100%);--grad-brand-soft: linear-gradient( 135deg, rgba(167, 139, 250, .18) 0%, rgba(236, 72, 153, .16) 55%, rgba(245, 158, 11, .14) 100% );--grad-cool: linear-gradient(135deg, #22d3ee 0%, #3b82f6 60%, #a78bfa 100%);--shadow-panel: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 8px 24px -12px rgba(0, 0, 0, .45);--shadow-button: 0 18px 42px -14px rgba(124, 58, 237, .6), 0 8px 18px -10px rgba(236, 72, 153, .35);--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 22px;--r-pill: 999px;color-scheme:dark;color:var(--text);background-color:var(--bg-0);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-feature-settings:"cv11","ss01","ss03";font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh}body{position:relative;min-width:320px;background:var(--bg-0);overflow-x:hidden}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:0;background:transparent}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}::selection{background:#a78bfa59;color:#fff}.app-root{position:relative;min-height:100vh;isolation:isolate}.app-shell{width:100%;max-width:none;margin:0 auto;padding:28px clamp(20px,4vw,64px) 64px}.bg-mesh{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 20% 0%,rgba(124,58,237,.08),transparent 50%),radial-gradient(circle at 100% 100%,rgba(34,211,238,.05),transparent 55%),linear-gradient(180deg,var(--bg-1),var(--bg-0))}.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 22s ease-in-out infinite;will-change:transform}.orb-violet{top:-120px;left:-80px;width:520px;height:520px;background:radial-gradient(circle,#7c3aed 0%,transparent 70%)}.orb-cyan{top:40%;right:-160px;width:460px;height:460px;background:radial-gradient(circle,#22d3ee 0%,transparent 70%);opacity:.35;animation-delay:-7s;animation-duration:28s}.orb-amber{bottom:-160px;left:30%;width:420px;height:420px;background:radial-gradient(circle,#ec4899 0%,transparent 70%);opacity:.32;animation-delay:-14s;animation-duration:26s}.grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)}@keyframes drift{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(40px,30px,0) scale(1.08)}}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin:0 auto;padding:18px clamp(20px,4vw,64px);background:linear-gradient(180deg,#07080dd9,#07080d80);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.brand{display:inline-flex;align-items:center;gap:12px}.brand-mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--grad-brand);color:#fff;box-shadow:0 10px 28px -10px #ec48998c;position:relative}.brand-mark:after{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 60%);pointer-events:none}.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-name{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}.brand-tag{margin-top:3px;font-size:.72rem;font-weight:500;color:var(--text-faint);letter-spacing:.02em}.topbar-actions{display:inline-flex;align-items:center;gap:10px}.status-pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 10px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text-muted);font-size:.78rem;font-weight:600;letter-spacing:.005em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.status-pill .status-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px #f59e0b2e;animation:pulse 2.2s ease-in-out infinite}.status-pill.status-ready .status-dot{background:var(--emerald);box-shadow:0 0 0 4px #10b9812e}.status-pill.status-warn .status-dot{background:var(--rose);box-shadow:0 0 0 4px #f43f5e33}.status-pill.status-idle .status-dot{background:var(--text-faint);box-shadow:0 0 0 4px #6b71842e}.status-label{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}.ghost-link{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text-muted);font-size:.78rem;font-weight:600;transition:color .16s ease,border-color .16s ease,background .16s ease}.ghost-link:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-hover)}.hero{padding:56px 0 36px;text-align:center;max-width:760px;margin:0 auto}.hero-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text-muted);font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.hero-eyebrow svg{color:var(--amber)}.hero-title{margin:22px 0 14px;font-size:clamp(2.2rem,5.2vw,3.6rem);font-weight:700;line-height:1.06;letter-spacing:-.025em;color:var(--text)}.gradient-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.hero-subtitle{margin:0;font-size:1.04rem;line-height:1.55;color:var(--text-muted)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch;margin-top:28px}.panel{position:relative;display:flex;flex-direction:column;padding:26px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:border-color .22s ease}.panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 30%);pointer-events:none}.input-panel,.output-panel{min-height:720px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}.panel-head-text{display:flex;flex-direction:column;gap:4px}.panel-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}.output-eyebrow{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.panel-head h2{margin:0;font-size:1.18rem;font-weight:600;letter-spacing:-.01em;color:var(--text)}.ghost-button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface-strong);color:var(--text-muted);font-size:.78rem;font-weight:600;transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease}.ghost-button:hover:not(:disabled){color:var(--text);border-color:var(--border-strong);background:var(--surface-hover)}.ghost-button:active:not(:disabled){transform:translateY(1px)}.ghost-button:disabled{opacity:.4}.ghost-button.is-success{color:var(--emerald);border-color:#10b98180;background:#10b9811a}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}.field-label{font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--text)}.field-optional{color:var(--text-faint);font-weight:500}.text-input,.prompt-box{width:100%;border:1px solid var(--border);border-radius:var(--r-md);background:#07080d99;color:var(--text);outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.text-input::placeholder,.prompt-box::placeholder{color:var(--text-faint)}.text-input:focus,.prompt-box:focus{border-color:var(--border-focus);background:#07080dcc;box-shadow:0 0 0 4px #a78bfa1f}.text-input{height:44px;padding:0 14px;font-size:.92rem}.textarea-wrap{position:relative}.prompt-box{min-height:168px;padding:14px 16px;font-size:.95rem;line-height:1.6;resize:vertical}.char-meter{display:flex;align-items:center;gap:10px;margin-top:10px}.char-meter-track{flex:1;height:4px;border-radius:var(--r-pill);background:var(--surface-strong);overflow:hidden}.char-meter-fill{height:100%;background:var(--grad-cool);transition:width .24s ease;border-radius:inherit}.char-meter-text{flex-shrink:0;font-size:.74rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-faint)}.example-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px}.example-label{font-size:.76rem;font-weight:600;color:var(--text-faint);margin-right:2px}.example-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface-strong);color:var(--text-muted);font-size:.76rem;font-weight:600;transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease}.example-chip svg{color:var(--violet)}.example-chip:hover{color:var(--text);border-color:#a78bfa66;background:#a78bfa14;transform:translateY(-1px)}.segmented-stack{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}.segmented-group{display:flex;flex-direction:column;gap:8px}.segmented-label{font-size:.78rem;font-weight:600;color:var(--text)}.segmented{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--r-pill);background:#07080d8c}.segmented-option{flex:1 1 auto;min-width:0;height:32px;padding:0 14px;border-radius:var(--r-pill);color:var(--text-muted);font-size:.82rem;font-weight:600;white-space:nowrap;transition:color .18s ease,background .18s ease,box-shadow .18s ease}.segmented-option:hover:not(.is-active){color:var(--text);background:var(--surface-hover)}.segmented-option.is-active{color:#fff;background:linear-gradient(135deg,#a78bfaf2,#ec4899e6);box-shadow:0 8px 24px -10px #a78bfa99}.slider-block{margin-bottom:22px}.slider-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.slider-title{font-size:.8rem}.slider-value{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-strong);border:1px solid var(--border);color:var(--text);font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}.range-input{--progress: 35%;width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--violet) 0%,var(--pink) var(--progress),rgba(255,255,255,.08) var(--progress),rgba(255,255,255,.08) 100%);border-radius:var(--r-pill);outline:none}.range-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--violet);cursor:grab;box-shadow:0 4px 14px -2px #a78bfa99;transition:transform .14s ease}.range-input::-webkit-slider-thumb:hover{transform:scale(1.1)}.range-input::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}.range-input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--violet);cursor:grab;box-shadow:0 4px 14px -2px #a78bfa99}.slider-scale{display:flex;justify-content:space-between;margin-top:10px;font-size:.7rem;font-weight:500;color:var(--text-faint)}.error-message{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:11px 14px;border:1px solid rgba(244,63,94,.32);border-radius:var(--r-md);background:#f43f5e14;color:#fda4af;font-size:.85rem;font-weight:500}.primary-button{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:auto;padding:0 18px;border-radius:var(--r-md);background:var(--grad-brand);color:#fff;font-size:.96rem;font-weight:600;letter-spacing:-.005em;box-shadow:var(--shadow-button);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}.primary-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 50%);opacity:0;transition:opacity .2s ease}.primary-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 22px 50px -16px #7c3aedb3,0 10px 22px -10px #ec489973}.primary-button:hover:not(:disabled):before{opacity:1}.primary-button:active:not(:disabled){transform:translateY(0)}.primary-button:disabled{opacity:.5;box-shadow:none}.primary-button-inner{display:inline-flex;align-items:center;gap:10px;position:relative}.kbd-hint{position:relative;display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;background:#00000040;border:1px solid rgba(255,255,255,.18);color:#ffffffd9;font-size:.72rem;font-weight:600;font-family:SFMono-Regular,Consolas,monospace;margin-left:6px}.output-panel{background:radial-gradient(circle at 100% 0%,rgba(34,211,238,.06),transparent 50%),var(--surface)}.result-surface{position:relative;flex:1;display:grid;place-items:center;min-height:480px;margin-bottom:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:radial-gradient(circle at 50% 0%,rgba(167,139,250,.06),transparent 55%),#07080da6;overflow:hidden}.result-surface:before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent)}.result-surface.has-result{place-items:stretch}.result-surface pre{width:100%;height:100%;margin:0;padding:22px 24px;overflow:auto;color:#e6e9f4;font-family:JetBrains Mono,Cascadia Code,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.88rem;line-height:1.7;white-space:pre-wrap;word-break:break-word}.result-surface pre::-webkit-scrollbar{width:8px}.result-surface pre::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:var(--r-pill)}.result-surface pre::-webkit-scrollbar-thumb:hover{background:#ffffff2e}.empty-state,.loading-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 24px;text-align:center}.empty-icon{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border-radius:16px;background:var(--grad-brand-soft);border:1px solid rgba(167,139,250,.25);color:var(--violet)}.empty-title,.loading-title{font-size:.98rem;font-weight:600;color:var(--text)}.empty-sub,.loading-sub{max-width:320px;font-size:.84rem;font-weight:500;color:var(--text-faint);line-height:1.5}.loading-pulse{position:relative;display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:4px;border-radius:50%;color:var(--violet)}.loading-pulse:before,.loading-pulse:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--grad-brand-soft);animation:ripple 1.8s ease-out infinite}.loading-pulse:after{animation-delay:-.9s}@keyframes ripple{0%{transform:scale(.6);opacity:.9}to{transform:scale(1.4);opacity:0}}.spin{animation:spin .9s linear infinite;position:relative;z-index:1}@keyframes spin{to{transform:rotate(360deg)}}.meta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.meta-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface-strong);color:var(--text-muted);font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}.meta-chip.subtle{color:var(--text-faint)}.meta-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px #10b9812e}.page-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:40px;font-size:.78rem;color:var(--text-faint)}.footer-divider{color:#ffffff2e}@media(max-width:1080px){.workspace{grid-template-columns:1fr}.input-panel,.output-panel{min-height:auto}.result-surface{min-height:360px}}@media(max-width:720px){.app-shell,.topbar{width:calc(100% - 24px)}.hero{padding:36px 0 24px}.panel{padding:20px;border-radius:var(--r-lg)}.brand-tag,.ghost-link{display:none}.status-label{max-width:130px}.segmented{width:100%}.segmented-option{flex:1 1 30%;font-size:.78rem;padding:0 8px}.kbd-hint{display:none}.panel-head h2{font-size:1.05rem}}@media(max-width:420px){.app-shell,.topbar{width:calc(100% - 16px)}.panel{padding:16px}.topbar{padding:14px 0}.hero-title{font-size:2rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}