:root{--bg: #07070d;--bg-2: #0d0d18;--panel: rgba(22, 22, 36, .72);--panel-solid: #14141f;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .16);--text: #eef0f6;--muted: #9aa0b4;--faint: #6b7086;--cyan: #22d3ee;--magenta: #e838c8;--accent-grad: linear-gradient(120deg, #22d3ee 0%, #7c5cff 48%, #e838c8 100%);--radius: 16px;--radius-sm: 10px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 700px at 15% -10%,rgba(124,92,255,.16),transparent 60%),radial-gradient(1000px 600px at 100% 0%,rgba(232,56,200,.12),transparent 55%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app{min-height:100%;display:flex;flex-direction:column;max-width:1400px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg),rgba(7,7,13,.4) 70%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.brand{display:flex;align-items:center;gap:12px}.brand__mark{position:relative;width:34px;height:30px;display:block}.brand__mark span{position:absolute;width:22px;height:16px;border-radius:4px}.brand__mark span:nth-child(1){left:0;top:0;background:var(--cyan)}.brand__mark span:nth-child(2){left:6px;top:6px;background:var(--magenta);mix-blend-mode:screen}.brand__mark span:nth-child(3){left:12px;top:12px;background:#7c5cff;mix-blend-mode:screen}.brand__text{display:flex;flex-direction:column;line-height:1.1}.brand__text strong{font-size:18px;letter-spacing:-.02em}.brand__text em{font-style:normal;font-size:12px;color:var(--muted)}.topbar__actions{display:flex;gap:10px;align-items:center}.btn{font:inherit;font-size:14px;font-weight:600;border-radius:999px;border:1px solid var(--border-strong);background:#ffffff0a;color:var(--text);padding:10px 18px;cursor:pointer;transition:transform .12s ease,background .2s ease,border-color .2s ease;white-space:nowrap}.btn:hover{background:#ffffff17;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn--primary{border:none;background:var(--accent-grad);color:#07070d;box-shadow:0 8px 24px #7c5cff4d}.btn--primary:hover{filter:brightness(1.08)}.btn--ghost{background:transparent}.btn--tiny{font-size:12.5px;padding:7px 12px;color:var(--muted);border-color:var(--border)}.hero{padding:8px 0 40px;max-width:780px}.hero h1{font-size:clamp(28px,5vw,46px);line-height:1.08;letter-spacing:-.03em;margin:0 0 16px}.hero p{font-size:clamp(15px,2.2vw,18px);color:var(--muted);line-height:1.6;margin:0 0 28px}.grad{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.features{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.features li{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted);line-height:1.5}.features strong{color:var(--text);font-size:15px}.layout{flex:1;display:flex;flex-direction:column;gap:20px;padding-bottom:32px}.layout--editing{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}.stage{min-width:0}.stage__frame{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(0deg,#0003,#0003),repeating-conic-gradient(#1a1a26,#1a1a26 25%,#12121c 0%,#12121c 50%) 50% / 28px 28px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;min-height:320px}.stage__frame--empty{padding:8px;background:transparent;border:none}.stage__canvas{max-width:100%;max-height:72vh;width:auto;height:auto;display:block;border-radius:calc(var(--radius) - 2px)}.stage__caption{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin:12px 2px 0}.dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}.dot--live{background:#38e8a0;box-shadow:0 0 #38e8a099;animation:pulse 1.8s infinite}@keyframes pulse{0%{box-shadow:0 0 #38e8a080}70%{box-shadow:0 0 0 7px #38e8a000}to{box-shadow:0 0 #38e8a000}}.dropzone{width:100%;min-height:300px;border:1.5px dashed var(--border-strong);border-radius:var(--radius);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;cursor:pointer;text-align:center;transition:border-color .2s ease,background .2s ease,transform .12s ease}.dropzone:hover,.dropzone--active{border-color:var(--cyan);background:#22d3ee0f}.dropzone--active{transform:scale(1.005)}.dropzone__icon{color:var(--cyan);margin-bottom:6px}.dropzone__title{font-size:18px;font-weight:600;margin:0}.dropzone__hint{color:var(--muted);font-size:14px;margin:0}.dropzone__note{color:var(--faint);font-size:12.5px;margin:10px 0 0}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;position:sticky;top:84px;max-height:calc(100vh - 108px);overflow-y:auto;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel__head h2{font-size:16px;margin:0;letter-spacing:-.01em}.panel__tip{margin:14px 4px 4px;font-size:12.5px;color:var(--faint);line-height:1.5}.effects{display:flex;flex-direction:column;gap:20px}.effects__group{display:flex;flex-direction:column;gap:10px}.effects__cat{margin:0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}.effect{border:1px solid var(--border);border-radius:var(--radius-sm);background:#ffffff05;overflow:hidden;transition:border-color .2s ease}.effect--on{border-color:var(--border-strong);background:#ffffff09}.effect__head{display:flex;gap:12px;align-items:flex-start;padding:14px}.effect__meta h3{display:flex;align-items:center;gap:8px;font-size:15px;margin:0 0 3px}.effect__glyph{font-size:16px}.effect__meta p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}.effect__body{padding:0 14px 14px;border-top:1px solid var(--border);margin-top:2px}.effect__controls{display:flex;flex-direction:column;gap:12px;padding:14px 0}.control{display:flex;flex-direction:column;gap:7px}.control__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.control__label{font-size:13px;color:var(--text)}.control__value{font-size:12.5px;color:var(--cyan);font-variant-numeric:tabular-nums;font-weight:600}.control__value em{color:var(--faint);font-style:normal;margin-left:2px}.control--toggle{flex-direction:row;align-items:center;justify-content:space-between}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(var(--accent-grad)) 0 / var(--fill, 50%) 100% no-repeat,#ffffff1a;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0b0b14;box-shadow:0 2px 6px #0006;cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0b0b14;cursor:pointer}.switch{flex:none;width:42px;height:24px;border-radius:999px;border:1px solid var(--border-strong);background:#ffffff0f;position:relative;cursor:pointer;padding:0;transition:background .2s ease,border-color .2s ease}.switch__dot{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#cfd2df;transition:transform .2s ease,background .2s ease}.switch--on{background:var(--accent-grad);border-color:transparent}.switch--on .switch__dot{transform:translate(18px);background:#fff}.banner{padding:12px 16px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:16px}.banner--error{background:#e8385824;border:1px solid rgba(232,56,88,.4);color:#ffb3c0}.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 0 28px;border-top:1px solid var(--border);color:var(--faint);font-size:12.5px}@media (max-width: 900px){.layout--editing{grid-template-columns:1fr}.panel{position:static;max-height:none}.stage__canvas{max-height:56vh}}@media (max-width: 560px){.topbar{flex-wrap:wrap}.topbar__actions{width:100%;justify-content:flex-end}.btn{padding:9px 14px}}