:root{--accent:#4e51d8;--accent-soft:#6366f129;--surface:#2b3241;--surface-elevated:#1c222e;--border:#94a3b81a;--text:#f8fafc;--text-muted:#94a3b8;--danger:#f87171}*{box-sizing:border-box}body{background:radial-gradient(circle at top right,#6366f11f,transparent 45%),var(--surface);color:var(--text);flex-direction:column;align-items:center;gap:clamp(1.5rem,2.5vw,2.5rem);min-height:100vh;margin:0;padding:3rem clamp(1.5rem,3vw,4rem);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;display:flex}.hero{text-align:center;max-width:720px}.hero h1{letter-spacing:-.03em;margin:0 0 .5rem;font-size:clamp(1.8rem,2.2vw,2.6rem)}.hero p{color:var(--text-muted);margin:0;font-size:.95rem}.workspace{grid-template-columns:1fr;gap:clamp(1.25rem,2vw,2rem);width:100%;max-width:1200px;display:grid}.panel{background:var(--surface-elevated);border:1px solid var(--border);border-radius:18px;padding:clamp(1rem,2vw,1.75rem);box-shadow:0 20px 60px #0f111559}.preview-panel{justify-content:center;align-items:center;display:flex}#preview{aspect-ratio:16/10;background:linear-gradient(135deg,#94a3b833,#1e293b66);border:1px solid #94a3b824;border-radius:16px;width:min(100%,520px);position:relative;overflow:hidden}.layer{mix-blend-mode:normal;background-position:50%;background-size:cover;transition:filter .2s,opacity .2s;position:absolute;inset:0}.controls{flex-direction:column;gap:1rem;display:flex}.controls>button{align-self:flex-start}.controls-panel{max-height:25rem;overflow-y:auto}.controls-panel::-webkit-scrollbar{width:.65rem}.controls-panel::-webkit-scrollbar-track{background:#94a3b814;border-radius:999px}.controls-panel::-webkit-scrollbar-thumb{background:#6366f166;border:2px solid #15181fd9;border-radius:999px}.controls-panel::-webkit-scrollbar-thumb:hover{background:#6366f18c}.controls-panel{scrollbar-color:#6366f166 #94a3b814;scrollbar-width:thin}.input-group{flex-direction:column;gap:.4rem;margin-bottom:1rem;display:flex}.input-group label{color:var(--text-muted);font-size:.85rem}.layer-controls{border-top:1px solid #94a3b81f;margin-top:.5rem;padding-top:1rem}.layer-controls:first-of-type{border-top:none;margin-top:0;padding-top:0}.layer-controls h2{margin:0 0 .75rem;font-size:1rem;font-weight:600}.layer-controls input[type=range]{width:100%;accent-color:var(--accent)}.layer-controls select,.add-filter select{width:100%;color:var(--text);background:#0f1115bf;border:1px solid #94a3b82e;border-radius:8px;padding:.45rem .65rem}button{background:var(--accent);color:#fff;cursor:pointer;letter-spacing:-.01em;border:1px solid #0000;border-radius:10px;padding:.6rem 1rem;font-size:.9rem;font-weight:600;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:0 10px 30px #6366f159}button:hover{transform:translateY(-1px);box-shadow:0 14px 34px #6366f173}.layer-controls .layer-remove{width:100%;color:var(--danger);box-shadow:none;background:#f871711f;border:1px solid #f8717147;margin-top:.75rem}.layer-controls .layer-remove:hover{background:#f8717138;transform:none}.filters-section{flex-direction:column;gap:1rem;margin-top:.75rem;display:flex}.filters-header h3{margin:0;font-size:.95rem;font-weight:600}.filters-list{flex-direction:column;gap:.75rem;display:flex}.filter-control{background:#94a3b80f;border:1px solid #94a3b81f;border-radius:12px;flex-direction:column;gap:.75rem;padding:.75rem .85rem;display:flex}.filter-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.filter-meta{flex-direction:column;gap:.2rem;display:flex}.filter-name{font-size:.9rem;font-weight:600}.filter-value{color:var(--text-muted);font-size:.8rem}button.filter-remove{color:var(--text-muted);box-shadow:none;letter-spacing:0;background:0 0;border:1px solid #94a3b833;border-radius:999px;padding:.25rem .75rem;font-size:.75rem}button.filter-remove:hover{color:#fff;box-shadow:none;background:#94a3b82e;transform:none}.range-control{background:#94a3b80f;border:1px solid #94a3b81f;border-radius:12px;flex-direction:column;gap:.75rem;margin-bottom:.75rem;padding:.75rem .85rem;display:flex}.range-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.range-label{font-size:.9rem;font-weight:600}.range-value{color:var(--text-muted);font-size:.8rem}.add-filter{align-items:center;gap:.75rem;display:flex}.add-filter select{flex:1}button.filter-add{white-space:nowrap}.code-panel{width:100%;max-width:1200px}.credit{color:var(--text-muted);text-align:center;margin-top:auto;font-size:1rem}.credit a{color:var(--accent);text-decoration:none}.credit a:hover{text-decoration:underline}.code-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.code-header h2{margin:0;font-size:1rem;font-weight:600}#copyCode{margin-left:1rem}#code{white-space:pre-wrap;word-break:break-word;color:var(--text-muted);background:#0f1115bf;border:1px solid #94a3b82e;border-radius:14px;padding:1.25rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.85rem;line-height:1.5}@media (width>=1024px){.workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}body{align-items:stretch}}