:root{color-scheme:light dark}body{margin:0;font-family:system-ui,-apple-system,sans-serif;font-size:12px;background:#f4f4f5;overflow:hidden}.artwork{background:#000;cursor:none}.artwork,.artwork-canvas{width:100vw;height:100vh;height:100dvh}.artwork-canvas{display:block;touch-action:none}h1{font-size:1.1rem;font-weight:600;margin:0;color:#333}.app{display:flex;width:100vw;height:100vh;height:100dvh}.canvas-area{flex:1 1;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.toolbar{flex:0 0 280px;box-sizing:border-box;justify-content:flex-start;gap:1rem;padding:1rem;overflow-y:auto;background:hsla(0,0%,100%,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-left:1px solid #e4e4e7;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.slider,.toolbar{display:flex;flex-direction:column;align-items:stretch;font-size:12px}.slider{gap:.35rem;color:#333}.color,.select{display:flex;align-items:center;gap:.5rem;font-size:12px;color:#333}.color{justify-content:space-between}.color input[type=color]{width:2.5rem;height:1.5rem;padding:0;border:1px solid #d4d4d8;border-radius:6px;background:#fff;cursor:pointer}.slider-label{font-weight:500}.slider-row{display:flex;align-items:center;gap:.5rem}.slider-row input[type=range]{flex:1 1;min-width:0;margin:0}.select select{font:inherit;font-size:12px;padding:.35rem .5rem;border:1px solid #d4d4d8;border-radius:6px;background:#fff;color:#000;cursor:pointer}.select select:disabled{opacity:.5;cursor:not-allowed}.slider-value{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:4.5rem;color:#666}.settings-json{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.4;padding:.5rem;border:1px solid #d4d4d8;border-radius:6px;background:#fafafa;color:#333;resize:vertical;white-space:pre;overflow:auto}.presets{position:-webkit-sticky;position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:.5rem;margin:-1rem -1rem 0;padding:1rem;background:hsla(0,0%,100%,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid #e4e4e7}.presets .select select{flex:1 1;min-width:0}.preset-name{font:inherit;font-size:12px;padding:.35rem .5rem;border:1px solid #d4d4d8;border-radius:6px;background:#fff;color:#000}.preset-actions{display:flex;flex-wrap:wrap;gap:.5rem}.preset-actions button{flex:1 1;min-width:0;padding:.5rem}.preset-actions .view-artwork{flex:1 0 100%;text-align:center;padding:.5rem;border:1px solid #999;border-radius:3px;text-decoration:none;color:inherit}.json-actions{display:flex;gap:.5rem}.json-error{font-size:11px;color:#c0392b}button{font:inherit;font-size:12px;padding:.5rem 1rem;border:1px solid #d4d4d8;border-radius:6px;background:#fff;cursor:pointer;color:#000}button:hover{background:#fafafa}canvas{display:block;background:#fff}.fps-counter{position:fixed;top:8px;left:8px;z-index:10;padding:2px 6px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;line-height:1.4;color:#f4f4f5;background:rgba(0,0,0,.6);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}