.panel{position:fixed;z-index:2;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;width:min(320px,calc(100vw - 32px));max-height:calc(100svh - 32px - env(safe-area-inset-top,0px));display:flex;flex-direction:column;background:var(--panel);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--line);border-radius:14px;font-size:13px;line-height:1.4}.panel-toggle{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}.panel-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:14px}.chev{transition:transform .25s ease}.panel-toggle[aria-expanded=false] .chev{transform:rotate(-90deg)}.panel-body{overflow:auto;padding:0 16px 16px;display:grid;gap:16px}.panel fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}.panel legend{padding:0;margin-bottom:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.swatch{display:grid;gap:6px;font-size:12px;color:var(--ink-dim);min-width:0}.swatch input{width:100%;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}.swatch input::-webkit-color-swatch-wrapper{padding:0}.swatch input::-webkit-color-swatch{border:0;border-radius:7px}.swatch input::-moz-color-swatch{border:0;border-radius:7px}.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px}.row label{color:var(--ink-dim)}.row output{font-variant-numeric:tabular-nums}.row input[type=range]{grid-column:1 / -1;width:100%;margin:0;accent-color:var(--accent)}.row select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel-raise);color:var(--ink);font:inherit}.check{display:flex;align-items:center;gap:8px;color:var(--ink-dim);cursor:pointer}.check input{width:16px;height:16px;margin:0;accent-color:var(--accent)}.actions{display:flex;flex-wrap:wrap;gap:8px}.actions button{flex:1 1 auto;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-raise);color:var(--ink);font:inherit;cursor:pointer}.actions button:hover{border-color:#d6e2ee61}.actions button:focus-visible,.panel input:focus-visible,.panel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.meter{margin:0;font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums}#copyOut{width:100%;min-height:150px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#00000059;color:var(--ink);font:12px/1.4 ui-monospace,Menlo,Consolas,monospace}.toast{margin:0;min-height:1.2em;font-size:12px;color:var(--accent)}@media(max-width:720px){.panel{top:auto;left:16px;right:16px;width:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);max-height:62svh}}@media(prefers-reduced-motion:reduce){.chev{transition:none}}