:root{--bg-page: #090a10;--bg-surface: #121422;--bg-surface-elevated: #1a1e32;--text-main: #f3f4f8;--text-muted: #9aa1be;--accent: #efb7d2;--accent-secondary: #748ffc;--border: #252b45;--border-focus: #495485;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-page);color:var(--text-main);line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:5rem}.playground-header{border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;background-color:#090a10eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}.brand{display:flex;align-items:center;gap:.75rem}.brand-logo{--blob-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M4 22C1 19 2 15 6 15C9 15 9 8 13 7C17 5 18 10 22 9C26 9 27 3 31 5C35 7 34 15 39 15C44 13 47 17 44 22C42 25 48 30 44 34C40 38 34 35 30 36C26 39 22 36 18 36C13 39 8 37 4 35C0 32 6 27 4 22Z'/%3E%3C/svg%3E");display:block;width:32px;height:25px;flex:0 0 auto;background:linear-gradient(145deg,#f9b8dc,#d580ce 48%,#9259bd);-webkit-mask-image:var(--blob-mask);mask-image:var(--blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.brand h1{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:#fff}.brand .badge{font-family:var(--font-mono);font-size:.75rem;padding:.2rem .55rem;background-color:var(--bg-surface-elevated);border:1px solid var(--border);border-radius:4px;color:var(--accent)}.header-meta{display:flex;align-items:center;gap:1.25rem;font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);flex-wrap:wrap}.header-meta span strong{color:#fff}.container{max-width:1280px;margin:0 auto;padding:2rem}.preset-bar{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem;flex-wrap:wrap}.preset-bar-label{font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-right:.25rem}.preset-chip{background-color:var(--bg-surface);border:1px solid var(--border);color:var(--text-main);padding:.45rem .9rem;border-radius:20px;font-size:.85rem;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;gap:.5rem}.preset-chip:hover{background-color:var(--bg-surface-elevated);border-color:var(--border-focus)}.preset-chip.active{background-color:#efb7d226;border-color:var(--accent);color:#fff;font-weight:600}.preset-swatch-preview{display:flex;gap:2px;border-radius:3px;overflow:hidden}.preset-swatch-dot{width:8px;height:8px}.hero-stage{border-radius:24px;overflow:hidden;padding:3.5rem 3rem;min-height:440px;border:1px solid rgba(255,255,255,.15);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 25px 60px #000000b3;margin-bottom:2.5rem}.hero-info{max-width:650px}.hero-info .tag{display:inline-block;font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.5rem}.hero-info h2{font-size:2.5rem;line-height:1.15;font-weight:800;letter-spacing:-.03em;margin-bottom:.75rem}.hero-info p{font-size:1.05rem;color:#e0e2ec;line-height:1.6;text-shadow:0 1px 4px rgba(0,0,0,.9)}.hero-metrics{display:flex;gap:1.5rem;margin-top:1.5rem;font-family:var(--font-mono);font-size:.8rem;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.8);flex-wrap:wrap}.telemetry-hud{display:flex;gap:1.5rem;background:#0a0b12d1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:.85rem 1.25rem;margin-top:1.5rem;width:fit-content;box-shadow:0 10px 30px #0006;flex-wrap:wrap}.telemetry-item{display:flex;flex-direction:column;gap:.2rem}.telemetry-item .t-label{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.telemetry-item .t-val{font-family:var(--font-mono);font-size:.95rem;font-weight:700;color:#fff}.telemetry-item .t-val.good{color:#4ade80}.telemetry-item .t-val.warn{color:#facc15}.controls-card{background-color:var(--bg-surface);border:1px solid var(--border);border-radius:20px;padding:2rem;margin-bottom:3rem}.controls-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.controls-card-header h3{font-size:1.15rem;font-weight:700}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.control-field{display:flex;flex-direction:column;gap:.45rem}.control-field label{font-size:.75rem;font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between}.control-field label span{color:var(--accent)}.control-field input[type=range]{accent-color:var(--accent);cursor:pointer;height:6px;border-radius:3px;background:var(--bg-surface-elevated)}.control-field select,.control-field input[type=number],.control-field input[type=text],.btn{background-color:var(--bg-surface-elevated);border:1px solid var(--border);color:var(--text-main);padding:.55rem .85rem;border-radius:8px;font-family:inherit;font-size:.875rem;cursor:pointer;transition:all .15s ease}.control-field select:focus,.control-field input:focus,.btn:focus{outline:2px solid var(--accent);outline-offset:2px}.btn{font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}.btn:hover{background-color:#262c46;border-color:var(--border-focus)}.btn.active{background-color:var(--accent);color:#0b0c16;font-weight:600;border-color:var(--accent)}.btn-secondary{background-color:transparent;border-color:var(--border)}.palette-builder{grid-column:1 / -1;background:var(--bg-surface-elevated);border:1px solid var(--border);border-radius:12px;padding:1.25rem;margin-top:.5rem}.palette-builder-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.palette-builder-header span{font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);text-transform:uppercase}.palette-swatches-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.color-stop-item{display:flex;align-items:center;gap:.4rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:.35rem .55rem}.color-stop-item input[type=color]{-webkit-appearance:none;border:none;width:28px;height:28px;border-radius:6px;cursor:pointer;background:transparent}.color-stop-item span{font-family:var(--font-mono);font-size:.75rem;color:#fff}.btn-icon-danger{background:transparent;border:none;color:#f87171;cursor:pointer;font-size:1rem;line-height:1;padding:0 .2rem}.btn-add-stop{padding:.4rem .8rem;font-size:.8rem;border-radius:8px}.comparison-section{margin-bottom:3rem}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.25rem}.comparison-card{border-radius:20px;border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}.comparison-header{padding:1rem 1.25rem;background-color:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.comparison-header h4{font-size:.95rem;font-weight:600}.comparison-header .badge-mode{font-family:var(--font-mono);font-size:.75rem;padding:.2rem .5rem;border-radius:4px;background:var(--bg-surface-elevated);border:1px solid var(--border)}.comparison-canvas-host{height:280px;position:relative;border-radius:0 0 20px 20px;display:flex;align-items:flex-end;padding:1.5rem}.comparison-overlay-text{background:#0a0b12bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);padding:.75rem 1rem;border-radius:10px;font-size:.85rem}.preset-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:1.5rem;margin-top:1.25rem;margin-bottom:3rem}.preset-card{background-color:var(--bg-surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease}.preset-card:hover{transform:translateY(-2px);border-color:var(--border-focus)}.preset-card-host{height:200px;border-radius:18px 18px 0 0;display:flex;align-items:flex-end;padding:1.25rem}.preset-card-body{padding:1.25rem;flex:1;display:flex;flex-direction:column;justify-content:space-between}.preset-card-title{font-size:1.1rem;font-weight:700;margin-bottom:.25rem}.preset-card-desc{font-size:.85rem;color:var(--text-muted);margin-bottom:1rem}.preset-card-meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted)}@media(max-width:900px){.comparison-grid{grid-template-columns:1fr}}@media(max-width:768px){.playground-header{padding:1rem;flex-direction:column;align-items:flex-start;gap:.75rem}.container{padding:1rem}.hero-stage{padding:2rem 1.5rem}.hero-info h2{font-size:2rem}.controls-grid{grid-template-columns:1fr}}.dither-host{position:relative;isolation:isolate;background-color:#0d0f18}.dither-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;border-radius:inherit;clip-path:inset(0 round inherit);display:block}