:root{--bg:#16181d;--panel:#1e2128;--panel-2:#262a33;--line:#333845;--line-soft:#2a2f3a;--fg:#e6e9ef;--fg-dim:#98a0b0;--accent:#58b2ff;--accent-dim:#2b6fa8;--danger:#ff6b6b;--rail:60px;--side:268px;--topbar:44px;--status:26px;--radius:7px;--buncss-light: ;--buncss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{overflow:hidden;overscroll-behavior:none;height:100%;margin:0}body{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;font-family:Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px}button,input,select{font:inherit;color:inherit}button{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;padding:5px 9px;line-height:1.2}button:hover:not(:disabled){background:#303643;border-color:#414859}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.38;cursor:default}button.on{background:var(--accent-dim);border-color:var(--accent);color:#fff}button.ghost{background:0 0;border-color:#0000}button.ghost:hover:not(:disabled){background:var(--panel-2)}input[type=text],input[type=number]{border:1px solid var(--line);border-radius:var(--radius);background:#14161b;width:100%;min-width:0;padding:5px 7px}input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}input[type=range]{accent-color:var(--accent);width:100%;height:22px}.app{display:flex;padding-bottom:env(safe-area-inset-bottom);flex-direction:column;height:100dvh}.workspace{display:flex;flex:1;min-height:0}.topbar{height:var(--topbar);display:flex;background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:40;flex:none;align-items: center;gap:4px;padding:0 8px}.brand{letter-spacing:.04em;color:var(--accent);white-space:nowrap;margin-right:6px;font-weight:700}.brand small{color:var(--fg-dim);margin-left:5px;font-weight:400}.spacer{flex:1}.menu-root{position:relative}.menu-btn{white-space:nowrap;background:0 0;border-color:#0000;padding:6px 10px}.menu-btn.open{background:var(--panel-2);border-color:var(--line)}.menu-pop{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);z-index:60;overflow:auto;min-width:232px;max-height:72dvh;padding:4px;top:calc(100% + 4px);left:0;box-shadow:0 14px 34px #0000008c}.menu-item{display:flex;text-align:left;background:0 0;border:0;border-radius:5px;align-items: center;gap:10px;width:100%;padding:8px 9px}.menu-item:hover:not(:disabled){background:var(--panel-2)}.menu-item .key{color:var(--fg-dim);margin-left:auto;font-family:ui-monospace,monospace;font-size:11px}.menu-sep{background:var(--line-soft);height:1px;margin:4px 2px}.menu-title{color:var(--fg-dim);padding:6px 9px 2px;font-size:11px}.rail{width:var(--rail);background:var(--panel);border-right:1px solid var(--line);display:flex;overflow-y:auto;flex-direction:column;flex:none;gap:4px;padding:6px 4px}.tool{display:flex;background:0 0;border-color:#0000;flex-direction:column;align-items: center;gap:2px;width:100%;padding:6px 2px 4px}.tool .cap{color:var(--fg-dim);font-size:10px;line-height:1}.tool.on .cap{color:#fff}.tool svg{display:block;width:20px;height:20px}.stage{position:relative;overflow:hidden;touch-action:none;background:#101216;flex:1;min-width:0;min-height:0}.stage canvas{display:block;touch-action:none;width:100%;height:100%}.stage .float-zoom{position:absolute;display:flex;z-index:10;gap:6px;bottom:10px;right:10px}.stage .float-zoom button{backdrop-filter:blur(6px);background:#1e2128eb;width:38px;height:38px;font-size:16px}.toast{position:absolute;border:1px solid var(--line);z-index:20;pointer-events:none;background:#14161bf0;border-radius:999px;padding:6px 14px;font-size:12px;top:12px;left:50%;transform:translate(-50%)}.sidebar{width:var(--side);background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;display:flex;flex-direction:column;flex:none;gap:10px;padding:8px}.card{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:8px}.card>h3{color:var(--fg-dim);letter-spacing:.06em;display:flex;align-items: center;gap:6px;margin:0 0 7px;font-size:11px;font-weight:600}.card>h3 .spacer{flex:1}.row{display:flex;align-items: center;gap:6px}.row+.row{margin-top:6px}.row label{color:var(--fg-dim);white-space:nowrap;font-size:11px}.grow{flex:1;min-width:0}.palette{display:grid;grid-template-columns:repeat(16,1fr);background:var(--line-soft);border:1px solid var(--line-soft);overflow:hidden;border-radius:4px;gap:1px}.swatch{aspect-ratio:1;position:relative;background-clip:padding-box;border:0;border-radius:0;min-width:0;padding:0}.swatch.sel{z-index:2;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #000}.swatch.alpha{background-color:#888;background-image:linear-gradient(45deg,#555 25%,#0000 25%),linear-gradient(-45deg,#555 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#555 75%),linear-gradient(-45deg,#0000 75%,#555 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.color-chip{border:1px solid var(--line);border-radius:5px;flex:none;width:30px;height:30px}.layer{display:flex;cursor:pointer;border:1px solid #0000;border-radius:5px;align-items: center;gap:6px;min-height:38px;padding:5px 6px}.layer:hover{background:#2d323d}.layer.on{background:var(--accent-dim);border-color:var(--accent)}.layer .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.layer .eye{display:grid;background:0 0;border-color:#0000;flex:none;place-items: center;width:26px;height:26px;padding:0}.layer-thumb{border:1px solid var(--line);image-rendering:pixelated;background-color:#2a2f3a;background-image:linear-gradient(45deg,#3a4150 25%,#0000 25%),linear-gradient(-45deg,#3a4150 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#3a4150 75%),linear-gradient(-45deg,#0000 75%,#3a4150 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border-radius:4px;flex:none;width:30px;height:30px}.preview-box{display:grid;background:#14161b;border-radius:5px;place-items: center;min-height:72px;padding:8px}.preview-box canvas{image-rendering:pixelated;background-color:#1b1e25;background-image:linear-gradient(45deg,#23272f 25%,#0000 25%),linear-gradient(-45deg,#23272f 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#23272f 75%),linear-gradient(-45deg,#0000 75%,#23272f 75%);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;max-width:100%}.statusbar{height:var(--status);display:flex;background:var(--panel);border-top:1px solid var(--line);color:var(--fg-dim);overflow:hidden;white-space:nowrap;flex:none;align-items: center;gap:12px;padding:0 10px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px}.dock{display:none;background:var(--panel);border-top:1px solid var(--line);flex-direction:column;flex:none}.dock .strip{display:flex;overflow-x:auto;scrollbar-width:none;gap:4px;padding:5px 6px}.dock .strip::-webkit-scrollbar{display:none}.dock .strip .tool{flex:none;width:52px}.dock .tabs{display:flex;border-top:1px solid var(--line-soft)}.dock .tabs button{color:var(--fg-dim);background:0 0;border:0;border-top:2px solid #0000;border-radius:0;flex:1;padding:9px 4px}.dock .tabs button.on{color:var(--fg);border-top-color:var(--accent);background:var(--panel-2)}.drawer{overflow-y:auto;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:10px;max-height:43dvh;padding:8px}.mobile-palette{display:flex;overflow-x:auto;border-top:1px solid var(--line-soft);scrollbar-width:none;gap:4px;padding:5px 6px}.mobile-palette::-webkit-scrollbar{display:none}.mobile-palette .swatch{aspect-ratio:auto;border-radius:5px;flex:none;width:30px;height:30px}@media (max-width:899px){.rail,.sidebar{display:none}.dock{display:flex}.statusbar{gap:8px;font-size:10px}.topbar{height:42px}}.backdrop{position:fixed;display:grid;z-index:100;background:#08090c99;place-items: center;padding:16px;inset:0}.modal{background:var(--panel);border:1px solid var(--line);overflow:auto;border-radius:12px;width:min(420px,100%);max-height:86dvh;padding:16px;box-shadow:0 24px 60px #0009}.modal h2{margin:0 0 12px;font-size:15px}.modal .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:16px}.modal .actions button.primary{background:var(--accent-dim);border-color:var(--accent);color:#fff}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;margin-bottom:10px}.help dl{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:5px 12px;margin:0}.help dt{color:var(--accent);white-space:nowrap;font-family:ui-monospace,monospace}.help dd{color:var(--fg-dim);margin:0}.only-narrow{display:none}@media (max-width:899px){.only-wide{display:none!important}.only-narrow{display:inline-flex;align-items: center}}.swatch>i{position:absolute;display:block;inset:0}.color-chip.swatch{position:relative;overflow:hidden}.alpha-warn{display:flex;color:#ffce8a;background:#3a2a1a;border:1px solid #6b4a20;border-radius:5px;align-items: center;gap:6px;margin-top:6px;padding:5px 7px;font-size:11px}.alpha-warn button{margin-left:auto;padding:3px 8px;font-size:11px}.seg{display:flex;gap:0;min-width:0}.seg button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:0;flex:1;min-width:0;padding:5px 4px;font-size:11px}.seg button:first-child{border-radius:var(--radius)0 0 var(--radius)}.seg button:last-child{border-radius:0 var(--radius)var(--radius)0}.seg button+button{border-left:0}.modal.wide{width:min(560px,100%)}.linkbtn{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;text-align:center;justify-content:center;align-items: center;padding:5px 9px}.linkbtn:hover{background:#303643}.sharebar{display:flex;color:#bcd8f5;background:#1d2a3a;border-bottom:1px solid #2c4966;flex:none;align-items: center;gap:10px;padding:6px 10px;font-size:12px}.sharebar .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.share-btn{background:var(--accent-dim);border-color:var(--accent);color:#fff;padding:5px 12px;font-weight:600}.share-btn:hover:not(:disabled){background:#3583c4}.picker{display:flex;align-items: center;gap:10px;margin-bottom:8px}.picker-side{display:flex;flex-direction:column;flex:1;align-items:stretch;gap:8px;min-width:0}.big-chip{border:1px solid var(--line);position:relative;overflow:hidden;border-radius:6px;height:46px}canvas.wheel{display:block;touch-action:none;cursor:crosshair;background:#14161b;border-radius:50%;flex:none}.grad-wrap{position:relative;display:block;border-radius:9px;min-width:0}.grad-wrap.checker{background-color:#888;background-image:linear-gradient(45deg,#555 25%,#0000 25%),linear-gradient(-45deg,#555 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#555 75%),linear-gradient(-45deg,#0000 75%,#555 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}input[type=range].grad{-webkit-appearance:none;appearance:none;display:block;border:1px solid var(--line);cursor:pointer;border-radius:9px;width:100%;height:18px;margin:0;padding:0}input[type=range].grad:disabled{opacity:.4}input[type=range].grad::-webkit-slider-runnable-track{background:0 0;height:18px}input[type=range].grad::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid #15171c;border-radius:3px;width:10px;height:22px;margin-top:-3px;box-shadow:0 0 0 1px #ffffff80}input[type=range].grad::-moz-range-track{background:0 0;height:18px}input[type=range].grad::-moz-range-thumb{background:#fff;border:2px solid #15171c;border-radius:3px;width:10px;height:22px;box-shadow:0 0 0 1px #ffffff80}.num{text-align:right;color:var(--fg-dim);width:30px;font-family:ui-monospace,monospace;font-size:11px}.hint{color:var(--fg-dim);margin:6px 0 0;font-size:10px;line-height:1.5}button.danger{border-color:var(--danger);color:#ffdede;background:#5a2530}button.danger:hover:not(:disabled){background:#71303c}.used-swatches{display:flex;flex-wrap:wrap;gap:4px}.used-swatches .swatch{border:1px solid var(--line);aspect-ratio:auto;border-radius:5px;flex:none}.picker-open{border:2px solid var(--line);background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;flex:none;width:30px;height:30px;padding:0}.swatch-label{color:var(--fg-dim);margin:0 0 4px;font-size:10px}.swatch-label+.palette{margin-bottom:8px}.layer-picks{display:flex;overflow-y:auto;flex-direction:column;gap:3px;max-height:160px}.layer-pick{display:flex;text-align:left;align-items: center;gap:8px;padding:6px 8px}.layer-pick .box{border:1px solid var(--line);display:grid;border-radius:3px;flex:none;place-items: center;width:16px;height:16px;font-size:11px;line-height:1}.layer-pick.on .box{background:var(--accent);border-color:var(--accent);color:#0d1117}.layer-pick .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.layer-pick .tag{color:var(--fg-dim);font-size:10px}.file-list{list-style:none;overflow-y:auto;max-height:120px;margin:0;padding:0;font-size:11px}.file-list li{display:flex;border-bottom:1px solid var(--line-soft);gap:8px;padding:3px 4px}.file-list .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-family:ui-monospace,monospace}.file-list .size{color:var(--fg-dim)}.coarsen-bar{position:fixed;left:50%;bottom:calc(var(--status) + 14px + env(safe-area-inset-bottom));z-index:50;display:flex;border:1px solid var(--line);backdrop-filter:blur(8px);background:#1e2128f7;border-radius:10px;flex-wrap:wrap;align-items: center;gap:8px;max-width:min(760px,100vw - 24px);padding:8px 12px;transform:translate(-50%);box-shadow:0 12px 32px #00000080}.coarsen-bar .title{white-space:nowrap;font-weight:600}.coarsen-bar input[type=range]{flex:120px;width:160px;min-width:100px}.coarsen-bar .size{white-space:nowrap;min-width:74px;font-family:ui-monospace,monospace;font-size:12px}.coarsen-bar .size .sub{color:var(--fg-dim);font-size:10px}.coarsen-bar .quick{display:flex;gap:3px}.coarsen-bar .quick button{padding:4px 7px;font-size:11px}.coarsen-bar .primary{background:var(--accent-dim);border-color:var(--accent);color:#fff}@media (max-width:899px){.coarsen-bar{bottom:auto;top:calc(var(--topbar) + 8px);gap:6px;max-width:calc(100vw - 16px);padding:8px}.coarsen-bar .title{font-size:12px}}.dropzone{position:fixed;z-index:200;display:grid;backdrop-filter:blur(3px);pointer-events:none;background:#0a0c10c7;place-items: center;inset:0}.dropzone-inner{display:flex;border:3px dashed var(--accent);color:var(--accent);text-align:center;background:#1e2128e6;border-radius:16px;flex-direction:column;align-items: center;gap:10px;max-width:min(420px,100vw - 48px);padding:28px 36px}.dropzone-title{color:var(--fg);margin:0;font-size:16px;font-weight:700}.dropzone-hint{color:var(--fg-dim);margin:0;font-size:12px;line-height:1.6}.linksize{color:var(--fg-dim);margin:6px 0 0;font-family:ui-monospace,monospace;font-size:11px}.linksize.long{color:#ffce8a}.linksize.toolong{color:var(--danger)}