:root{--bg:#121212;--surface:#1c1c1e;--surface-2:#2a2a2d;--text:#f2f2f2;--text-dim:#a8a8ad;--accent:#7aa2ff;--on-accent:#0b1020;--dur:.18s;--tap:48px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;margin:0;font-family:Roboto,system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#app{height:100dvh;padding:var(--sat) var(--sar) 0 var(--sal);flex-direction:column;display:flex;position:relative;overflow:hidden}[hidden]{display:none!important}.home{padding:24px 24px calc(24px + var(--sab));text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;display:flex}.home h1{letter-spacing:.3em;margin:0;font-size:28px;font-weight:500}.home p{max-width:28ch;color:var(--text-dim);margin:0;line-height:1.45}.home .error{color:#ff8a80;min-height:1.4em}.btn-primary{background:var(--accent);min-height:56px;color:var(--on-accent);border-radius:28px;align-items:center;gap:10px;padding:0 28px;font-weight:500;display:inline-flex}.editor{flex-direction:column;flex:1;min-height:0;display:flex}.topbar{justify-content:space-between;align-items:center;height:56px;padding:0 4px;display:flex}.icon-btn{width:var(--tap);height:var(--tap);border-radius:24px;place-items:center;display:grid}.icon-btn:active{background:var(--surface-2)}.preview{min-height:0;padding:8px 16px calc(8px + var(--sheet-h,0px));transition:padding var(--dur) ease;flex:1;place-items:center;display:grid}.preview canvas{max-width:100%;max-height:100%}.tabbar{background:var(--surface);padding-bottom:var(--sab);z-index:2;display:flex;position:relative}.tab{min-height:56px;color:var(--text-dim);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:12px;display:flex}.tab[aria-selected=true]{color:var(--accent)}.sheet{left:0;right:0;bottom:calc(56px + var(--sab));background:var(--surface-2);z-index:1;visibility:hidden;min-height:180px;transition:transform var(--dur) ease, visibility 0s var(--dur);border-radius:16px 16px 0 0;padding:8px 16px 16px;position:absolute;transform:translateY(100%)}.sheet.open{visibility:visible;transition:transform var(--dur) ease;transform:none}.sheet-head{justify-content:space-between;align-items:center;display:flex}.sheet-head h2{margin:0;font-size:15px;font-weight:500}.sheet-body{padding:0 0 8px}.sheet-soon{color:var(--text-dim);text-align:center;padding:24px 0}@media (prefers-reduced-motion:reduce){.sheet,.sheet.open{transition:none}}.actions{align-items:center;gap:4px;padding-right:8px;display:flex}.btn-ghost,.btn-accent{min-height:var(--tap);border-radius:24px;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:500;display:inline-flex}.btn-accent{background:var(--accent);color:var(--on-accent)}.btn-ghost:active{background:var(--surface-2)}button:disabled{opacity:.5}.chips{flex-wrap:wrap;gap:8px;padding:8px 0 0;display:flex}.chip{min-height:var(--tap);min-width:var(--tap);background:var(--surface);border-radius:24px;padding:0 16px;font-size:14px}.chip[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.format-chip{border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 12px;font-size:12px;display:flex}.shape{border:2px solid;border-radius:2px;display:block}.shape.dashed{border-style:dashed}.free-ratio{align-items:center;gap:8px;padding-top:8px;display:flex}.free-ratio input{width:80px;min-height:var(--tap);background:var(--surface);color:var(--text);text-align:center;font:inherit;border:0;border-radius:12px}.slider-row{align-items:center;gap:12px;padding-top:8px;display:flex}.slider-row input[type=range]{min-height:var(--tap);accent-color:var(--accent);flex:1}.slider-value{white-space:nowrap;text-align:right;min-width:6ch;color:var(--text-dim);font-variant-numeric:tabular-nums}.swatch{width:var(--tap);height:var(--tap);border:2px solid var(--surface);border-radius:50%;padding:0}.swatch[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}.swatch-custom{appearance:none;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.swatch-custom::-webkit-color-swatch-wrapper{padding:0}.swatch-custom::-webkit-color-swatch{border:0;border-radius:50%}.toast{left:16px;right:16px;bottom:calc(80px + var(--sab));z-index:5;background:var(--text);color:var(--bg);text-align:center;border-radius:12px;justify-content:center;align-items:center;gap:12px;padding:12px 16px;font-size:14px;display:flex;position:absolute}.toast-action{min-height:40px;color:var(--bg);border-radius:20px;padding:0 12px;font-weight:500;text-decoration:underline}.sheet{max-height:50dvh;overflow-y:auto}.slider-block{padding-top:8px}.slider-label{color:var(--text-dim);margin-top:8px;font-size:13px;display:block}.hint{color:var(--accent);margin:8px 0 0;font-size:13px}.preview canvas.pipette{cursor:crosshair;outline:2px dashed var(--accent);outline-offset:4px}.chip{align-items:center;gap:6px;display:inline-flex}.preview canvas{touch-action:none}.chip[aria-label]{padding:0 14px}.preview{position:relative}.badge{color:#fff;pointer-events:none;background:#000000b3;border-radius:16px;padding:6px 14px;font-size:13px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.hint-dim{color:var(--text-dim);text-align:center;margin:12px 0 0;font-size:13px}.icon-btn:disabled{opacity:.3}.strip{background:var(--bg);align-items:center;gap:8px;height:64px;padding:0 8px;display:flex}.scope{flex:none;min-height:40px;padding:0 12px;font-size:13px}.thumbs{scrollbar-width:none;flex:1;gap:8px;min-width:0;padding:4px 2px;display:flex;overflow-x:auto}.thumbs::-webkit-scrollbar{display:none}.thumb{width:var(--tap);height:var(--tap);background:var(--surface);border:2px solid #0000;border-radius:10px;flex:none;padding:2px}.thumb canvas{border-radius:6px;width:100%;height:100%;display:block}.thumb[aria-pressed=true]{border-color:var(--accent)}.sheet{bottom:calc(56px + var(--sab) + var(--strip-h,0px))}.progress{left:16px;right:16px;bottom:calc(80px + var(--sab));z-index:6;background:var(--surface-2);border-radius:12px;flex-direction:column;gap:8px;padding:12px 16px;font-size:14px;display:flex;position:absolute}.progress-track{background:var(--surface);border-radius:3px;height:6px;overflow:hidden}.progress-bar{background:var(--accent);width:0;height:100%;transition:width var(--dur) ease}.history{align-items:center;display:flex}.text-input{width:100%;min-height:var(--tap);background:var(--surface);color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;border:0;border-radius:12px;padding:0 14px}.text-input::placeholder{color:var(--text-dim)}.preset-new{align-items:center;gap:8px;padding-top:4px;display:flex}.preset-new .text-input{flex:1;min-width:0}.preset-list{flex-direction:column;gap:4px;padding-top:8px;display:flex}.preset-item{justify-content:space-between;align-items:center;gap:8px;display:flex}.preset-item .chip{flex:1;justify-content:flex-start}.chip:disabled{opacity:.4}.neutrals{grid-template-columns:repeat(4,1fr);gap:8px;padding-top:8px;display:grid}.swatch-wide{border:1px solid var(--surface);border-radius:12px;width:100%}.hex-input{font-variant-numeric:tabular-nums;max-width:11em}.text-input[aria-invalid=true]{outline-offset:-2px;outline:2px solid #ff8a80}.crop{z-index:30;background:var(--bg);padding-bottom:env(safe-area-inset-bottom);flex-direction:column;display:flex;position:fixed;inset:0}.crop-head{align-items:center;gap:4px;padding:4px 8px;display:flex}.crop-head h2{margin:0;font-size:16px;font-weight:500}.crop-area{flex:1;min-height:0;position:relative}.crop-stage{touch-action:none;position:absolute;inset:0;overflow:hidden}.crop-stage canvas{width:100%;height:100%;display:block}.crop-box{pointer-events:none;border:2px solid #fff;position:absolute;box-shadow:0 0 0 9999px #0009}.crop-h{pointer-events:auto;width:44px;height:44px;position:absolute}.crop-box.fixed .crop-h{pointer-events:none}.crop-h:after{content:"";background:#fff;border-radius:3px;width:16px;height:16px;position:absolute}.crop-h.nw{top:-36px;left:-36px}.crop-h.nw:after{bottom:14px;right:14px}.crop-h.ne{top:-36px;right:-36px}.crop-h.ne:after{bottom:14px;left:14px}.crop-h.sw{bottom:-36px;left:-36px}.crop-h.sw:after{top:14px;right:14px}.crop-h.se{bottom:-36px;right:-36px}.crop-h.se:after{top:14px;left:14px}.crop [hidden]{display:none!important}.crop-adjust{padding-bottom:4px}.crop-dials{justify-content:center;gap:20px;padding:4px 16px 0;display:flex}.crop-dial{color:var(--text-dim);font:inherit;background:0 0;border:0;flex-direction:column;align-items:center;gap:4px;font-size:12px;display:flex}.crop-dial-value{background:var(--surface-2,#2a2a2a);width:52px;height:52px;color:var(--text);font-variant-numeric:tabular-nums;border:2px solid #0000;border-radius:50%;place-items:center;font-size:16px;display:grid}.crop-dial[aria-pressed=true]{color:var(--text)}.crop-dial[aria-pressed=true] .crop-dial-value{border-color:var(--accent)}.crop-ruler{width:calc(100% - 32px);accent-color:var(--accent);min-height:var(--tap);margin:4px 16px 0;display:block}.crop-grid{pointer-events:none;filter:drop-shadow(0 0 1px #000000b3);background-size:100% 100%;position:absolute;inset:0}.crop-ratios{scrollbar-width:none;gap:8px;padding:8px 16px;display:flex;overflow-x:auto}.crop-ratios::-webkit-scrollbar{display:none}.crop-ratios .chip{flex:none}.crop-bar{gap:8px;padding:4px 16px 16px;display:flex}.crop-bar button{flex:1;justify-content:center}.rc-list{min-height:100dvh;padding:8px 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;gap:8px;display:flex}.rc-head{justify-content:space-between;align-items:center;display:flex}.rc-head h2{letter-spacing:.2em;margin:0;font-size:20px;font-weight:500}.rc-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start;gap:10px;display:grid}.rc-tile{aspect-ratio:1;position:relative}.rc-open{background:var(--surface);border-radius:10px;place-items:center;width:100%;height:100%;padding:0;display:grid;overflow:hidden}.rc-frame{width:100%;line-height:0;display:block;position:relative;overflow:hidden}.rc-frame.tall{width:auto;height:100%}.rc-frame img{width:100%;height:100%;display:block}.rc-box{border:2px solid #fff;position:absolute;box-shadow:0 0 0 999px #0009}.rc-del,.rc-sel{place-items:center;width:44px;height:44px;display:grid;position:absolute}.rc-del{top:0;right:0}.rc-sel{top:0;left:0}.rc-sel span{background:#00000073;border:2px solid #fff;border-radius:50%;place-items:center;width:24px;height:24px;display:grid}.rc-sel[aria-pressed=true] span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.rc-del svg{background:#0009;border-radius:50%;width:26px;height:26px;padding:4px}.rc-hint{color:var(--text-dim);text-align:center;margin:8px 0 0;font-size:13px}.rc-save{justify-content:center;width:100%;margin-top:8px}.recent{flex-direction:column;gap:6px;width:100%;max-width:420px;display:flex}.recent h3,.pick h3{color:var(--text-dim);letter-spacing:.04em;text-align:left;margin:12px 0 0;font-size:13px;font-weight:500}.recent-row{scrollbar-width:none;gap:10px;padding:4px 0;display:flex;overflow-x:auto}.recent-row::-webkit-scrollbar{display:none}.recent-row .rc-tile{flex:none;width:84px}.pick{z-index:20;background:var(--bg);padding:8px 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;display:flex;position:fixed;inset:0;overflow-y:auto}.pick-head{align-items:center;gap:4px;display:flex}.pick-head h2{margin:0;font-size:16px;font-weight:500}.pick .btn-primary{justify-content:center;align-self:stretch}.rc-open>img{object-fit:contain;width:100%;height:100%;display:block}.rc-tile.work{aspect-ratio:4/5}.recent-row .rc-tile.work{width:96px}@media (width>=900px) and (height>=560px){.editor{grid-template:"top top"56px"prev tabs"minmax(0,1fr)"strip tabs"/minmax(0,1fr) 96px;display:grid}.topbar{grid-area:top;padding:0 12px}.preview{grid-area:prev;padding:16px}.strip{grid-area:strip}.tabbar{flex-direction:column;grid-area:tabs;justify-content:flex-start;gap:4px;padding:8px 0}.tab{flex:none;min-height:76px}.tab:hover{background:var(--surface-2)}.sheet{width:400px;top:56px;left:auto;right:96px;bottom:calc(var(--sab) + var(--strip-h,0px));border-radius:12px;min-height:0;max-height:none;transform:translate(calc(100% + 96px))}.sheet.open{transform:none}.editor:has(+.sheet.open) .preview{padding-right:416px}.editor[data-dock=bottom]+.sheet{border-radius:12px 12px 0 0;width:auto;max-height:40dvh;top:auto;left:0;right:96px;transform:translateY(100%)}.editor[data-dock=bottom]+.sheet.open{transform:none}.editor[data-dock=bottom]:has(+.sheet.open) .preview{padding:16px 16px calc(16px + var(--sheet-h,0px))}.progress{max-width:480px;margin:0 auto;bottom:24px}.crop>:not(.crop-head):not(.crop-area){align-self:center;width:min(100%,640px)}}