#panel{--bg: rgba(16, 16, 22, .62);--line: rgba(255, 255, 255, .14);--fg: rgba(255, 255, 255, .92);--dim: rgba(255, 255, 255, .55);position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:10;display:flex;flex-direction:column;gap:14px;width:min(620px,calc(100vw - 32px));box-sizing:border-box;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--bg);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 18px 50px #0000006b;color:var(--fg);font:13px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;transition:opacity .45s ease,transform .45s ease}#panel[data-hidden=true]{opacity:0;transform:translate(-50%,14px);pointer-events:none}#panel .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#panel button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);border-radius:9px;background:#ffffff0d;color:var(--fg);font:inherit;padding:7px 12px;cursor:pointer;transition:background .18s ease,border-color .18s ease}#panel button:hover{background:#ffffff21}#panel button[aria-pressed=true]{background:#ffffffeb;border-color:transparent;color:#111}#panel button:focus-visible{outline:2px solid #fff;outline-offset:2px}.patterns{flex:1}.swatches{gap:6px}.swatch{width:46px;height:26px;padding:0;border-radius:7px;border:1px solid var(--line);cursor:pointer;background-clip:padding-box}.swatch[aria-pressed=true]{outline:2px solid #fff;outline-offset:2px}.sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.slider{display:flex;flex-direction:column;gap:4px}.slider label{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;letter-spacing:.04em;text-transform:uppercase}.slider label span{color:var(--fg);font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:18px;margin:0;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:#ffffff40}input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:#ffffff40}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:#fff}input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}.editor{gap:6px}.editor[hidden]{display:none}.stop{position:relative;width:34px;height:30px}.stop input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:100%;padding:0;border:1px solid var(--line);border-radius:7px;background:none;cursor:pointer}.stop input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.stop input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}.stop .kill{position:absolute;top:-6px;right:-6px;width:16px;height:16px;padding:0;border-radius:50%;font-size:11px;line-height:1;background:#1b1b22;opacity:0;transition:opacity .15s ease}.stop:hover .kill,.stop .kill:focus-visible{opacity:1}.spacer{flex:1}.hint{color:var(--dim);font-size:11px}@media (max-width: 520px){.sliders{grid-template-columns:1fr}#panel{gap:10px;padding:13px}}