:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:#111214;color:#ececec}.app{max-width:960px;margin:0 auto;padding:24px 16px 48px;display:grid;gap:16px}.bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}.bar h1{margin:0;font-size:20px;letter-spacing:.02em}.hint{margin:0;opacity:.7;flex:1 1 240px;font-size:14px}.actions{display:flex;gap:8px}button{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid #4a4c52;background:#1f2024;color:inherit;cursor:pointer}button:hover{border-color:#8a8d95}.canvas{position:relative;aspect-ratio:16 / 10;border-radius:16px;overflow:hidden;touch-action:none}.handle{position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000073;transform:translate(-50%,-50%);cursor:grab}.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.swatch{height:72px;border-radius:12px;border:2px solid transparent;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;padding:8px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.7)}.swatch[aria-pressed=true]{border-color:#fff}.swatch-light{color:#111214;text-shadow:none}.swatch-light[aria-pressed=true]{border-color:#111214}.css{margin:0;padding:12px;border-radius:12px;background:#1a1b1f;font-size:12px;line-height:1.5;overflow-x:auto;white-space:pre}