:root{--bg:#121212;--panel:#1c1c1c;--raise:#2a2a2a;--raise-2:#353535;--line:#303030;--ink:#ececea;--dim:#98988f;--accent:#4c8dff;--sans:"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;--mono:"DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--hit:40px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (pointer:coarse){:root{--hit:44px}}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);font:400 13px/1.35 var(--sans);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;overflow:hidden}h1,h2,h3,p{margin:0}h2{font-size:13px;font-weight:600}h3{color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 2px;font-size:11px;font-weight:500}.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px}.dim,.note{color:var(--dim)}.grow{flex:1}button,select,input,textarea,.button{font:inherit;color:inherit}button,.button{min-height:var(--hit);cursor:pointer;white-space:nowrap;touch-action:manipulation;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:0 12px;text-decoration:none;transition:background 90ms;display:inline-flex}button:disabled{opacity:.32;cursor:default}@media (hover:hover){button:hover:not(:disabled):not(.on):not(.primary){background:var(--raise)}}button:active:not(:disabled){background:var(--raise-2)}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button.icon{width:var(--hit);flex:none;padding:0}button.on{background:var(--raise-2);color:#fff}button.primary,.button.primary{background:var(--accent);color:#fff;padding:0 16px;font-weight:600}button.primary:active:not(:disabled){background:#3b78e6}button.big{background:var(--raise);width:100%;min-height:48px;font-size:14px}button.big.primary{background:var(--accent)}button.act{background:var(--raise);flex:none;min-height:34px;padding:0 10px;font-size:12px}button.act.on,button.act.primary{background:var(--accent)}button.act.block{width:100%;min-height:var(--hit)}select,textarea,input.hex{background:var(--raise);-webkit-user-select:text;user-select:text;border:0;border-radius:8px;min-height:36px;padding:0 10px}textarea{resize:none;width:100%;padding:10px;font-size:16px}.app{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);grid-template:"top""stage"minmax(0,1fr)"bottom"/minmax(0,1fr);display:grid;position:fixed;inset:0}.app.wide{grid-template:"top top top""tools opts side""tools stage side"minmax(0,1fr)/64px minmax(0,1fr) 300px}.app.wide.empty{grid-template:"top""stage"minmax(0,1fr)/minmax(0,1fr)}.narrow .top .icon{width:40px}.narrow .top .export{width:44px;padding:0}.top{background:var(--panel);border-bottom:1px solid var(--line);grid-area:top;align-items:center;gap:2px;height:52px;padding:0 8px;display:flex}.stage{touch-action:none;background:var(--bg);cursor:crosshair;grid-area:stage;position:relative;overflow:hidden}.stage.tool-crop,.stage.tool-move{cursor:default}.stage.tool-pan,.stage.grab{cursor:grab}.stage.tool-text{cursor:text}.stage canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.checker{background:repeating-conic-gradient(#3a3a3a 0 25%, #2c2c2c 0 50%) 0 0 / 18px 18px;pointer-events:none;display:none;position:absolute;box-shadow:0 0 0 1px #000,0 8px 40px #00000080}.bottom{background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);grid-area:bottom;min-width:0}.side{background:var(--panel);border-left:1px solid var(--line);grid-area:side;min-height:0;overflow-y:auto}.tools{justify-content:space-around;padding:4px 4px 6px;display:flex}.tools button{min-width:0;min-height:52px;color:var(--dim);flex-direction:column;flex:1 1 0;gap:3px;padding:0;font-size:10px}.tools button.on{color:var(--accent);background:0 0}.wide .tools{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;grid-area:tools;justify-content:flex-start;gap:2px;padding:8px 6px}.wide .tools button{flex:none;min-height:54px}.wide .tools button.on{background:var(--raise)}.opts{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;min-height:50px;padding:8px 10px 4px;display:flex}.wide .opts{background:var(--panel);border-bottom:1px solid var(--line);scrollbar-width:none;flex-wrap:nowrap;grid-area:opts;padding:6px 12px;overflow-x:auto}.wide .opts::-webkit-scrollbar{display:none}.opts .slider{flex:180px;max-width:420px}.wide .opts>*{flex:none}.wide .opts .slider{width:240px}.narrow .wide-only{display:none}.acts,.pills{align-items:center;gap:6px;min-width:0;display:flex}.acts.line{scrollbar-width:none;flex:100%;padding-bottom:2px;overflow-x:auto}.wide .acts.line{border-left:1px solid var(--line);flex:none;padding-left:8px}.acts.line::-webkit-scrollbar{display:none}.pills button{min-height:34px;color:var(--dim);border-radius:17px;padding:0 10px;font-size:12px;position:relative}.pills button.on{background:var(--raise);color:var(--ink)}.pills b{color:var(--ink);font-weight:500}.dot{background:var(--accent);border-radius:50%;width:5px;height:5px;position:absolute;top:6px;right:5px}.swatch{border:2px solid var(--ink);width:34px;height:34px;min-height:34px;box-shadow:inset 0 0 0 2px var(--panel);border-radius:50%;flex:none;padding:0}.seg{background:var(--raise);border-radius:8px;flex:none;padding:2px;display:flex}.seg button{min-height:32px;color:var(--dim);border-radius:6px;padding:0 10px;font-size:12px;font-weight:500}.seg button.on{color:#fff;background:#4a4a4a}.slider{align-items:center;gap:10px;min-width:0;min-height:38px;display:flex}.slider-label{flex:none;width:84px}.slider .num{text-align:right;width:44px;color:var(--dim);flex:none}input[type=range]{appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;flex:1;min-width:0;height:30px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, #444 var(--from,0%), var(--ink) var(--from,0%), var(--ink) var(--to,0%), #444 var(--to,0%));border-radius:2px;height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right, #444 var(--from,0%), var(--ink) var(--from,0%), var(--ink) var(--to,0%), #444 var(--to,0%));border-radius:2px;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:0;border-radius:50%;width:18px;height:18px;margin-top:-7.5px;box-shadow:0 1px 4px #0009}input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:18px;height:18px}@media (pointer:coarse){input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10.5px}}.layers header,.develop-panel header,.sheet header{align-items:center;gap:4px;min-height:48px;padding:6px 6px 6px 14px;display:flex}.layers header h2,.sheet header h2{flex:1}.layers ul{margin:0;padding:0 6px 8px;list-style:none}.layers li{border-radius:10px;margin-bottom:2px}.layers li.on{background:var(--raise)}.row{align-items:center;gap:8px;min-width:0;display:flex}.layers li>.row{cursor:pointer;gap:6px;padding:4px 8px 4px 2px}.layers .name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.layers .name b{font-family:var(--mono);color:var(--dim);margin-right:2px}.thumb{object-fit:contain;background:repeating-conic-gradient(#4a4a4a 0 25%, #3a3a3a 0 50%) 0 0 / 10px 10px;border-radius:5px;flex:none;width:44px;height:44px}.layers .detail{padding:0 8px 8px 12px}.layers .detail .row{gap:0}.layers .detail select{background:var(--raise-2);min-width:0}.layers .detail .icon{width:36px}.layers .note{padding:12px 16px}.develop-panel .groups{padding:0 14px 12px}.narrow .develop-panel .groups{max-height:34vh;padding-bottom:6px;overflow-y:auto}.narrow .develop-panel header{padding-left:8px}.develop-panel section:first-child h3{margin-top:4px}.develop-panel .slider-label{cursor:default}.scrim{z-index:10;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--panel);border:1px solid var(--line);width:100%;max-width:460px;max-height:80dvh;padding:0 14px calc(14px + env(safe-area-inset-bottom));border-bottom:0;border-radius:16px 16px 0 0;flex-direction:column;gap:10px;animation:.16s ease-out rise;display:flex;overflow-y:auto;box-shadow:0 -12px 40px #00000080}.sheet header{margin-bottom:-6px;padding:4px 0 0 2px}.sheet .row{flex-wrap:wrap}.layers-sheet{padding:0 0 env(safe-area-inset-bottom);gap:0;max-height:62dvh}.layers-sheet header{margin:0;padding:6px 6px 6px 16px}@keyframes rise{0%{opacity:0;transform:translateY(24px)}}@media (width>=900px){.scrim{align-items:center}.sheet{border-bottom:1px solid var(--line);border-radius:16px;padding-bottom:14px}}.menu{top:calc(56px + env(safe-area-inset-top));background:var(--panel);border:1px solid var(--line);border-radius:12px;width:260px;max-height:80dvh;padding:6px;position:absolute;left:8px;overflow-y:auto;box-shadow:0 12px 40px #0009}.menu>button{justify-content:flex-start;gap:10px;width:100%}.menu p{color:var(--dim);padding:8px 12px 6px}.sizes{flex-direction:column;width:100%;display:flex}.sizes button{color:var(--dim);justify-content:space-between;min-height:38px}.sizes button span:first-child{color:var(--ink)}.picker{flex-direction:column;gap:12px;display:flex}.sv{touch-action:none;cursor:crosshair;border-radius:10px;height:180px;position:relative}.sv i{pointer-events:none;border:2px solid #fff;border-radius:50%;width:22px;height:22px;margin:-11px;position:absolute;box-shadow:0 0 0 1px #00000080}input.hue::-webkit-slider-runnable-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:6px;height:12px}input.hue::-moz-range-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:6px;height:12px}input.hue::-webkit-slider-thumb{width:22px;height:22px;margin-top:-5px}.swatches{flex-wrap:wrap;gap:6px;display:flex}.swatches button{border-radius:50%;width:28px;height:28px;min-height:28px;padding:0;box-shadow:inset 0 0 0 1px #ffffff2e}.swatches button.on{outline:2px solid var(--ink);outline-offset:2px}input.hex{width:110px;font-size:16px}.result{align-items:center;gap:12px;display:flex}.result img{object-fit:contain;background:repeating-conic-gradient(#4a4a4a 0 25%, #3a3a3a 0 50%) 0 0 / 12px 12px;border-radius:8px;width:96px;height:96px}.result p{color:var(--dim);word-break:break-all;margin-bottom:10px}.start{flex-direction:column;gap:10px;width:min(340px,100% - 40px);height:fit-content;max-height:100%;margin:auto;display:flex;position:absolute;inset:0;overflow-y:auto}.start h1{font:500 34px/1 var(--mono);letter-spacing:-.02em}.start p{color:var(--dim);margin-bottom:10px;font-size:14px}.start small{color:var(--dim);margin-top:6px;font-size:12px}.toast,.hint,.busy{border:1px solid var(--line);white-space:nowrap;text-overflow:ellipsis;pointer-events:none;background:#1e1e1eeb;border-radius:20px;max-width:calc(100% - 24px);padding:9px 14px;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}.toast{bottom:14px}.hint{top:12px}.busy{align-items:center;gap:10px;display:flex;top:50%}.busy i{border:2px solid var(--dim);border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}