:root{--bg: #f4f1ea;--bar: rgba(255, 255, 255, .86);--bar-border: rgba(31, 35, 40, .1);--text: #1f2328;--muted: #6b7280;--hover: rgba(31, 35, 40, .06);--active: #1f2328;--active-text: #ffffff;--accent: #2459d6;--shadow: 0 6px 24px rgba(31, 35, 40, .12), 0 1px 3px rgba(31, 35, 40, .08);--sheet-shadow: 0 2px 6px rgba(31, 35, 40, .08), 0 18px 40px rgba(31, 35, 40, .1);color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #1b1c1f;--bar: rgba(40, 42, 47, .9);--bar-border: rgba(255, 255, 255, .08);--text: #e8e8ea;--muted: #9ca3af;--hover: rgba(255, 255, 255, .07);--active: #e8e8ea;--active-text: #1b1c1f;--shadow: 0 6px 24px rgba(0, 0, 0, .4);--sheet-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .35);color-scheme:dark}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.3 -apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.bar{margin:calc(10px + env(safe-area-inset-top)) auto 8px;max-width:calc(100% - 24px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px;padding:6px;background:var(--bar);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--bar-border);border-radius:16px;box-shadow:var(--shadow);z-index:2}.group{display:flex;align-items:center;gap:2px}.bar,.pop,.bar button,.pop button{touch-action:manipulation}.group+.group{padding-left:6px;border-left:1px solid var(--bar-border)}.btn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:var(--text);cursor:pointer;transition:background .15s,color .15s,opacity .15s}.btn:hover{background:var(--hover)}.btn:disabled{opacity:.3;cursor:default;background:transparent}.btn svg,.select svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.btn.on,.btn[aria-pressed=true]{background:var(--active);color:var(--active-text)}.btn.toggle[aria-pressed=false]{color:var(--muted)}.swatch{width:34px;height:40px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;border-radius:10px}.swatch i{width:20px;height:20px;border-radius:50%;display:block;transition:transform .15s;box-shadow:inset 0 0 0 1px #0000001f}.swatch.on i{box-shadow:0 0 0 2px var(--bar),0 0 0 4px var(--active)}.swatch:hover i{transform:scale(1.1)}.size{width:32px;height:40px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;border-radius:10px;color:var(--muted)}.size i{display:block;border-radius:50%;background:currentColor}.size.on{color:var(--text);background:var(--hover)}.select{position:relative;height:40px;display:flex;align-items:center;gap:4px;padding:0 6px 0 8px;border-radius:11px;cursor:pointer}.select:hover{background:var(--hover)}.select select{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--text);font:inherit;cursor:pointer;padding:0 2px}.label{min-width:38px;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted)}#stage{flex:1;position:relative;overflow:hidden;touch-action:none}#stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#live{cursor:crosshair}body[data-tool=eraser] #live{cursor:cell}body[data-tool=lasso] #live{cursor:default}.btn{position:relative;touch-action:manipulation}.btn.area:after{content:"";position:absolute;right:5px;bottom:5px;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 1.5px var(--active)}.zoom{height:40px;min-width:52px;padding:0 8px;border:0;border-radius:11px;background:transparent;color:var(--muted);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation}.zoom:hover{background:var(--hover);color:var(--text)}#selMenu{position:absolute;left:0;top:0;display:flex;gap:2px;padding:4px;background:var(--active);border-radius:12px;box-shadow:var(--shadow);z-index:2}#selMenu[hidden]{display:none}#selMenu button{border:0;background:transparent;color:var(--active-text);font:inherit;font-weight:500;padding:8px 12px;border-radius:9px;cursor:pointer;touch-action:manipulation}#selMenu button:hover{background:#7f7f7f40}.pop{position:fixed;z-index:4;width:232px;padding:8px;background:var(--bar);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--bar-border);border-radius:16px;box-shadow:var(--shadow)}.pop[hidden]{display:none}.pop-item{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);font:inherit;padding:10px;border-radius:10px;cursor:pointer;text-align:left}.pop-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.pop-item:hover{background:var(--hover)}.pop-item.on{background:var(--active);color:var(--active-text)}.pop-title{padding:10px 10px 4px;color:var(--muted);font-size:12px}.pop-sizes{display:flex;justify-content:space-between;padding:4px 4px 2px}.pop-sizes button{width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--text);cursor:pointer}.pop-sizes button:hover{background:var(--hover)}.pop-sizes button.on{background:var(--active);color:var(--active-text)}.pop-sizes i{display:block;border-radius:50%;border:1.6px solid currentColor}#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;background:var(--active);color:var(--active-text);border-radius:14px;box-shadow:var(--shadow);font-weight:500;animation:up .2s ease-out;z-index:3}#toast[hidden]{display:none}#toast button{border:0;border-radius:9px;padding:7px 12px;background:#7f7f7f40;color:inherit;font:inherit;cursor:pointer}@keyframes up{0%{opacity:0;transform:translate(-50%,8px)}}#micBtn{position:absolute;top:12px;right:12px;z-index:3;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--bar-border);background:var(--bar);color:var(--text);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);cursor:grab;touch-action:none;transition:background .15s,color .15s,box-shadow .15s}#micBtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#micBtn.dragging{cursor:grabbing;transition:none;box-shadow:0 12px 32px #1f232847;background:var(--active);color:var(--active-text)}#micBtn.recording{background:#d1352b;color:#fff;border-color:transparent}#dictation{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:8px;max-width:min(520px,calc(100% - 24px));padding:6px 6px 6px 12px;background:var(--active);color:var(--active-text);border-radius:14px;box-shadow:var(--shadow)}#dictation[hidden]{display:none}#dictText{flex:1;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#dictText.wait{opacity:.65}#dictation button{border:0;border-radius:9px;padding:8px 12px;background:#7f7f7f40;color:inherit;font:inherit;font-weight:500;cursor:pointer;display:grid;place-items:center;touch-action:manipulation}#dictation svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.rec-dot{width:10px;height:10px;border-radius:50%;background:#ff5a4f;flex:none;animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{50%{opacity:.3;transform:scale(.8)}}@media(prefers-reduced-motion:reduce){.rec-dot{animation:none}}#shapeMenu{width:264px}.pop-shapes{display:flex;justify-content:space-between;padding:2px}.pop-shapes button{width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--text);cursor:pointer}.pop-shapes button:hover{background:var(--hover)}.pop-shapes button.on{background:var(--active);color:var(--active-text)}.pop-shapes svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.pop-switch{display:flex;align-items:center;gap:12px;margin-top:6px;padding:10px;border-top:1px solid var(--bar-border);cursor:pointer}.pop-switch span{flex:1;font-weight:500}.pop-switch small{display:block;margin-top:2px;font-weight:400;font-size:12px;color:var(--muted)}.pop-switch input{position:absolute;opacity:0;pointer-events:none}.pop-switch i{flex:none;position:relative;width:44px;height:26px;border-radius:13px;background:#7f7f7f59;transition:background .2s}.pop-switch i:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .2s}.pop-switch input:checked+i{background:#2f9e5b}.pop-switch input:checked+i:after{transform:translate(18px)}.pop-switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}#imageMenu{width:280px}.float-bar{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;background:var(--bar);color:var(--text);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--bar-border);border-radius:14px;box-shadow:var(--shadow);font-weight:500;z-index:4;white-space:nowrap;animation:up .2s ease-out}.float-bar[hidden]{display:none}.float-bar span{margin-right:4px}.float-bar button{border:0;border-radius:9px;padding:8px 14px;background:var(--hover);color:var(--text);font:inherit;cursor:pointer;touch-action:manipulation}.float-bar button.primary{background:var(--active);color:var(--active-text)}#cropBar{bottom:calc(24px + env(safe-area-inset-bottom))}.nb-btn{height:40px;max-width:200px;display:flex;align-items:center;gap:8px;padding:0 6px 0 10px;border:0;border-radius:11px;background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer}.nb-btn:hover{background:var(--hover)}.nb-btn i{flex:none;width:12px;height:16px;border-radius:3px;background:var(--accent);box-shadow:inset -3px 0 #00000026}.nb-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nb-btn svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}#library{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;display:flex}#library[hidden]{display:none}.lib-backdrop{flex:1;background:#00000040}.lib-panel{width:min(380px,100%);height:100%;overflow:auto;padding:calc(14px + env(safe-area-inset-top)) 12px 24px;background:var(--bg);box-shadow:var(--shadow);animation:slide .2s ease-out}@keyframes slide{0%{transform:translate(-24px);opacity:0}}.lib-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px}.lib-head h2{margin:0;font-size:22px}.lib-new{width:100%;margin:12px 0 8px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1.5px dashed var(--bar-border);border-radius:12px;background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer}.lib-new:hover{background:var(--hover)}.lib-new svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.lib-hint{color:var(--muted);font-size:12px;padding:8px;margin:8px 0 0}.nb-row{display:flex;align-items:center;gap:4px;min-height:48px;padding-right:2px;border-radius:12px}.nb-row:hover{background:var(--hover)}.nb-row.current{background:var(--bar);box-shadow:0 0 0 1.5px var(--accent) inset}.nb-row .tw{width:28px;height:36px;flex:none;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px}.nb-row .tw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .15s}.nb-row .tw.open svg{transform:rotate(90deg)}.nb-row .tw.none{visibility:hidden}.nb-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 4px;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.nb-cover{flex:none;width:28px;height:36px;border-radius:4px 7px 7px 4px;display:grid;place-items:center;font-size:16px;box-shadow:inset 4px 0 #0000002e,0 1px 2px #00000026}.nb-name{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nb-meta{display:block;font-size:12px;color:var(--muted)}.nb-more{width:36px;height:36px;flex:none;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}.nb-more:hover{background:var(--hover);color:var(--text)}.nb-edit{flex:1;min-width:0;padding:6px 0}.nb-edit input{width:100%;padding:9px 10px;border:1.5px solid var(--accent);border-radius:10px;background:var(--bar);color:var(--text);font:inherit;font-size:16px;-webkit-user-select:text;user-select:text}.nb-colors{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 8px}.nb-colors button{width:28px;height:28px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px #0000001f}.nb-colors button.on{box-shadow:0 0 0 2px var(--bar),0 0 0 4px var(--active)}.pop-item.danger{color:#d1352b}#stickerMenu{width:320px}.st-head{display:flex;align-items:center;gap:8px;padding:4px 6px 8px;color:var(--muted);font-size:13px}.st-head select{flex:1;padding:7px 8px;border:1px solid var(--bar-border);border-radius:9px;background:var(--bar);color:var(--text);font:inherit;font-size:14px}.st-tabs{display:flex;gap:4px;padding:0 2px 8px}.st-tabs button{flex:1;padding:8px 0;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-weight:600;cursor:pointer}.st-tabs button.on{background:var(--active);color:var(--active-text)}.st-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-height:260px;overflow:auto}.st-grid button{aspect-ratio:1;border:0;border-radius:12px;background:transparent;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center}.st-grid button:hover{background:var(--hover)}.st-grid img{width:80%;height:80%;object-fit:contain}.st-empty{grid-column:1 / -1;padding:24px 12px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5}#nbMenu{z-index:6;width:250px}.lib-backup{margin-top:16px;padding-top:8px;border-top:1px solid var(--bar-border);display:grid;gap:6px}.lib-backup button{display:flex;align-items:center;gap:10px;padding:11px 12px;border:0;border-radius:12px;background:var(--bar);color:var(--text);font:inherit;font-weight:500;cursor:pointer;text-align:left}.lib-backup button:hover{background:var(--hover)}.lib-backup svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
