@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{color:#edf5eb;font-synthesis:none;--bg:#07100d;--panel:#0c1713;--panel2:#101e18;--line:#22352b;--muted:#82968a;--lime:#b8ff43;--lime2:#7cc52c;--mono:"DM Mono",monospace;--ease:cubic-bezier(.23,1,.32,1);background:#07100d;font-family:Space Grotesk,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 78% 0,#173522 0,#07100d 37%),#07100d;min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}.app-shell{background-image:linear-gradient(#b8ff4305 1px,#0000 1px),linear-gradient(90deg,#b8ff4305 1px,#0000 1px);background-size:42px 42px;min-height:100vh}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:5;background:#07100dbf;justify-content:space-between;align-items:center;height:70px;padding:0 clamp(18px,4vw,60px);display:flex;position:sticky;top:0}.brand{letter-spacing:.04em;align-items:center;gap:10px;display:flex}.brand-mark{border:1px solid var(--lime);width:31px;height:31px;color:var(--lime);place-items:center;display:grid;box-shadow:0 0 18px #b8ff4330}.brand strong{font-family:var(--mono);font-size:14px;line-height:1;display:block}.brand strong span{color:var(--lime)}.brand small{font-family:var(--mono);color:var(--muted);letter-spacing:.15em;font-size:8px}.topbar-center,.toolbar-meta,footer,.section-kicker,.field-label,.two-fields span,.range-field span,.top-actions{font:10px var(--mono);letter-spacing:.1em;color:var(--muted)}.topbar-center{margin-left:110px}.status-dot{background:var(--lime);width:6px;height:6px;box-shadow:0 0 10px var(--lime);border-radius:50%;margin-right:7px;display:inline-block}.slash{color:#3a5946;padding:0 8px}.top-actions{align-items:center;gap:10px;display:flex}.icon-button,.avatar{border:1px solid var(--line);color:var(--muted);width:30px;height:30px;transition:.18s var(--ease);background:0 0;place-items:center;text-decoration:none;display:grid}.icon-button:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-1px)}.avatar{color:var(--lime);background:#1b3522;border-color:#31522e;border-radius:50%;font-size:9px}.workspace{max-width:1370px;margin:auto;padding:68px clamp(18px,4vw,60px) 40px}.hero{justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:54px;display:flex}.eyebrow{font:10px var(--mono);color:var(--lime);letter-spacing:.15em;align-items:center;gap:7px;display:flex}.hero h1{letter-spacing:-.065em;margin:15px 0 22px;font-size:clamp(45px,6vw,82px);font-weight:600;line-height:.93}.hero h1 em{color:var(--lime);font-style:normal}.hero p{color:#93a99a;max-width:475px;margin:0;font-size:14px;line-height:1.7}.hero-note{border-left:1px solid #496343;gap:15px;min-width:195px;margin-bottom:7px;padding:10px 0 10px 18px;display:flex}.hero-note>span,.step-no{font:11px var(--mono);color:var(--lime)}.hero-note b,.hero-note small{display:block}.hero-note b{font:10px var(--mono);letter-spacing:.14em;color:#cce0c9}.hero-note small{color:var(--muted);margin-top:8px;font-size:11px;line-height:1.5}.studio-grid{grid-template-columns:390px minmax(0,1fr);gap:18px;display:grid}.control-panel,.preview-panel{border:1px solid var(--line);background:#0b1712e6;box-shadow:0 20px 60px #00000025}.control-panel{padding:25px 24px 20px}.panel-header{color:#759a71;justify-content:space-between;align-items:flex-start;margin-bottom:20px;display:flex}.panel-header h2{letter-spacing:-.03em;color:#edf5eb;margin:8px 0 0;font-size:17px}.panel-header.compact{margin-top:24px}.panel-header svg{color:#6b9862}.section-kicker{color:#65856d;font-size:9px}.tabs{border-bottom:1px solid var(--line);margin-bottom:17px;display:flex}.tabs button{color:var(--muted);font:10px var(--mono);letter-spacing:.06em;background:0 0;border:0;border-bottom:2px solid #0000;align-items:center;gap:7px;margin-right:22px;padding:0 0 12px;display:flex}.tabs button.active{color:var(--lime);border-color:var(--lime)}.dropzone{text-align:center;height:153px;transition:.2s var(--ease);cursor:pointer;background:#0c1b14;border:1px dashed #3d6243;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.dropzone:hover,.dropzone.has-file{border-color:var(--lime);background:#101f15}.dropzone input{opacity:0;cursor:pointer;position:absolute;inset:0}.upload-icon,.file-icon{width:38px;height:38px;color:var(--lime);border:1px solid #476b46;place-items:center;margin-bottom:10px;display:grid}.file-icon{background:#203d1c;border-radius:50%}.dropzone b{color:#e1eee0;font-size:12px}.dropzone small,.dropzone span{font:10px var(--mono);color:var(--muted);margin-top:7px}.dropzone>span{color:var(--lime);text-underline-offset:3px;text-decoration:underline}.change-file{color:var(--lime)!important}.url-card{border:1px solid var(--line);color:var(--lime);background:#0c1b14;flex-wrap:wrap;align-items:center;gap:10px;padding:18px;display:flex}.url-card input{color:#fff;background:0 0;border:0;outline:0;flex:1;min-width:190px;font-size:12px}.url-card small{width:100%;font:10px var(--mono);color:var(--muted);line-height:1.5}.error-message{color:#ff9e91;font:10px var(--mono);background:#321817;align-items:center;gap:7px;margin-top:10px;padding:9px;display:flex}.divider{background:var(--line);height:1px;margin:24px 0}.field-label{justify-content:space-between;margin-bottom:10px;font-size:9px;display:flex}.field-label span{color:#9dbc91}.mode-grid{gap:7px;display:grid}.mode-card{border:1px solid var(--line);color:#d4e0d3;text-align:left;min-height:47px;transition:.18s var(--ease);background:#0d1a14;align-items:center;gap:10px;padding:10px;display:flex}.mode-card:hover{border-color:#577754}.mode-card.selected{border-color:var(--lime);box-shadow:inset 3px 0 var(--lime);background:#142516}.mode-card>svg{color:var(--lime);margin-left:auto}.mode-card b{font:10px var(--mono);letter-spacing:.08em;display:block}.mode-card small{color:var(--muted);margin-top:3px;font-size:10px;display:block}.mode-swatch{border-radius:50%;flex:none;width:21px;height:21px;display:block}.mode-swatch.matrix{background:radial-gradient(circle,#c8ff78 1px,#58a82f 3px,#0b1710 10px);box-shadow:0 0 10px #b8ff4370}.mode-swatch.source{background:conic-gradient(#f472b6,#a78bfa,#22d3ee,#facc15,#f472b6)}.mode-swatch.random{background:conic-gradient(#b8ff43,#f0abfc,#93c5fd,#fb7185,#b8ff43)}.two-fields{grid-template-columns:1fr 1fr;gap:12px;margin-top:21px;display:grid}.two-fields label{display:block}.two-fields span,.range-field span{color:#75907b;justify-content:space-between;margin-bottom:8px;font-size:9px;display:flex}.two-fields select{border:1px solid var(--line);color:#cbdac9;background:#0c1913;outline:0;width:100%;padding:10px 9px;font-size:11px}.range-field{margin-top:22px;display:block}.range-field b{color:var(--lime);font-weight:400}input[type=range]{appearance:none;background:#29422d;outline:0;width:100%;height:3px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--lime);border-radius:50%;width:13px;height:13px;box-shadow:0 0 0 4px #b8ff4325}.toggles{gap:15px;margin-top:20px;display:flex}.toggles label{font:10px var(--mono);color:#9aaf9e;align-items:center;gap:6px;display:flex}.toggles input{display:none}.toggle{background:#29402d;border-radius:10px;width:25px;height:13px;position:relative}.toggle:before{content:"";background:#76917a;border-radius:50%;width:9px;height:9px;transition:all .2s;position:absolute;top:2px;left:2px}.toggles input:checked+.toggle{background:#476b2d}.toggles input:checked+.toggle:before{background:var(--lime);left:14px}.small-fields{margin-top:18px}.render-button{background:var(--lime);color:#0a130b;width:100%;font:600 11px var(--mono);letter-spacing:.04em;transition:.16s var(--ease);border:0;justify-content:center;align-items:center;gap:8px;margin-top:24px;padding:14px;display:flex;box-shadow:0 0 22px #b8ff431f}.render-button:hover:not(:disabled){background:#d2ff85;transform:translateY(-2px);box-shadow:0 8px 30px #b8ff4333}.render-button:active:not(:disabled){transform:scale(.98)}.render-button:disabled{opacity:.38;cursor:not-allowed}.render-button span{margin-left:7px;font-size:17px}.spin{animation:1s linear infinite spin}.privacy-note{font:9px var(--mono);text-align:center;color:#607867;margin:13px 0 0}.lock-dot{background:#5c8d55;border-radius:50%;width:5px;height:5px;margin:0 4px 1px;display:inline-block}.preview-panel{flex-direction:column;min-width:0;display:flex}.preview-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:57px;padding:0 20px;display:flex}.toolbar-title{color:#b4c7b4;font:11px var(--mono);letter-spacing:.08em;align-items:center;gap:10px;display:flex}.toolbar-title svg{color:var(--lime)}.live-pill{color:#7d9b82;border:1px solid var(--line);margin-left:5px;padding:5px 7px;font-size:9px}.live-pill i{background:var(--lime);border-radius:50%;width:5px;height:5px;margin-right:4px;display:inline-block}.toolbar-meta{font-size:9px}.toolbar-meta span{color:#3a5946;padding:0 5px}.monitor-stage{background:#050a08 radial-gradient(#0e2117 0,#050a08 66%);flex:1;place-items:center;min-height:560px;padding:35px;display:grid;position:relative;overflow:hidden}.monitor-frame{background:#020604;border:1px solid #28472f;width:min(300px,68%);height:490px;position:relative;overflow:hidden;box-shadow:0 0 0 9px #09120d,0 0 0 10px #182b1d,0 0 80px #b8ff4314}.monitor-frame.wide{aspect-ratio:16/9;width:min(650px,90%);height:auto}.monitor-frame.square{aspect-ratio:1;width:min(430px,74%);height:auto}.monitor-frame video{display:none}.monitor-frame canvas{image-rendering:auto;width:100%;height:100%;display:block}.monitor-overlay{color:#6e956f;font:8px var(--mono);letter-spacing:.06em;pointer-events:none;justify-content:space-between;display:flex;position:absolute;inset:11px 12px auto}.empty-monitor{text-align:center;color:#5f7c65;font:10px var(--mono);letter-spacing:.08em;place-content:center;gap:9px;display:grid;position:absolute;inset:0}.empty-monitor b{color:#8ba58e;font-size:10px}.empty-monitor span{color:#54705a;font-size:9px;line-height:1.6}.empty-icon{color:#739d69;border:1px solid #34543b;border-radius:50%;place-items:center;width:55px;height:55px;margin:auto;display:grid}.render-scan{color:var(--lime);font:10px var(--mono);background:#07120bdb;border:1px solid #46653d;justify-content:space-between;padding:9px 10px;display:flex;position:absolute;bottom:18px;left:15px;right:15px}.preview-footer{border-top:1px solid var(--line);align-items:end;gap:30px;padding:17px 20px;display:flex}.timeline{flex:1}.timeline-track{background:#263b2a;height:4px;position:relative}.timeline-track span{background:var(--lime);height:100%;box-shadow:0 0 10px var(--lime);transition:width .15s;display:block}.timeline-labels{font:9px var(--mono);color:#617b66;justify-content:space-between;margin-top:8px;display:flex}.preview-actions{gap:9px;display:flex}.ghost-button,.download-button{border:1px solid var(--line);color:#9db39f;font:10px var(--mono);background:0 0;align-items:center;gap:7px;padding:10px 12px;text-decoration:none;display:flex}.download-button{color:var(--lime);background:#19341c;border-color:#446c3c}.download-button.muted{opacity:.42}.workflow-strip{color:#b7c8b8;justify-content:space-between;align-items:center;padding:35px 0 16px;display:flex}.workflow-strip>div:not(.connector){grid-template-columns:27px auto;column-gap:9px;display:grid}.workflow-strip b{font:10px var(--mono);letter-spacing:.12em}.workflow-strip small{color:#6f8774;grid-column:2;margin-top:5px;font-size:10px}.connector{background:#27432c;width:14%;height:1px;margin:0 10px}footer{border-top:1px solid var(--line);justify-content:space-between;padding:19px clamp(18px,4vw,60px);font-size:8px;display:flex}.footer-signal{color:var(--lime);vertical-align:middle;font-size:13px}.modal-backdrop{z-index:10;background:#000a;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.help-modal{background:#0e1d15;border:1px solid #46653d;width:100%;max-width:440px;padding:32px;box-shadow:0 25px 100px #000}.close-modal{float:right;color:#76937c;background:0 0;border:0}.help-modal h2{margin:18px 0;font-size:28px}.help-modal ol{color:#bfd0bf;padding-left:20px;font-size:13px;line-height:2}.help-modal p{color:#7d9983;font:11px var(--mono);margin-top:25px;line-height:1.6}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.topbar-center{display:none}.studio-grid{grid-template-columns:1fr}.control-panel{order:2}.monitor-stage{min-height:520px}.hero{flex-direction:column;align-items:flex-start}.hero-note{margin:0}.workflow-strip{flex-wrap:wrap;gap:18px}.connector{width:5%}}@media (width<=550px){.workspace{padding-top:38px}.hero h1{font-size:49px}.topbar{height:60px}.brand small{display:none}.studio-grid{gap:12px}.control-panel{padding:20px 16px}.monitor-stage{min-height:430px;padding:25px 12px}.monitor-frame{width:75%;height:370px}.preview-toolbar{padding:0 13px}.toolbar-meta{display:none}.preview-footer{padding:14px;display:block}.preview-actions{margin-top:14px}.preview-actions>*{flex:1;justify-content:center}.workflow-strip{grid-template-columns:1fr 1fr;padding:28px 0;display:grid}.connector{display:none}.workflow-strip>div:not(.connector){grid-template-columns:25px auto}.workflow-strip small{font-size:9px}footer{flex-wrap:wrap;gap:10px}.toggles{gap:9px}}