@font-face{font-family:Caveat;src:url(/fonts/Caveat-Regular.ttf)format("truetype");font-weight:400;font-display:swap}:root{--paper:#faf8f3;--panel:#fffefbdb;--panel-solid:#fffefb;--line:#28221417;--line-strong:#28221429;--text:#2a2824;--muted:#8a8478;--hover:#3c321e0f;--active:#ece6d9;--active-text:#1f2328;--accent:#7c5cff;--accent-soft:#7c5cff1f;--danger:#c84545;--shadow:0 1px 1px #281e0a0a, 0 4px 10px #281e0a0d, 0 14px 32px #281e0a12;--ok:#3aa676;--warn:#d99a2b;--off:#b9b2a5;--radius:16px;--ui:ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--paper:#1b1a18;--panel:#262421db;--panel-solid:#262421;--line:#fff5e114;--line-strong:#fff5e124;--text:#ebe7df;--muted:#9a9488;--hover:#fff5e10f;--active:#3a3732;--active-text:#fffaf0;--accent-soft:#967dff2e;--shadow:0 1px 1px #00000040, 0 6px 16px #00000047, 0 18px 40px #00000040;--off:#6b665d;--dotc:#fff5e11a}}*{box-sizing:border-box}html,body{background:var(--paper);height:100%;color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;touch-action:none;margin:0;font-size:14px;overflow:hidden}#app{position:fixed;inset:0}.stage{touch-action:none;cursor:crosshair;position:absolute;inset:0;overflow:hidden}#app[data-tool=lasso] .stage{cursor:default}#app[data-tool=text] .stage{cursor:text}#app[data-tool=eraser] .stage{cursor:none}.layer{transform-origin:0 0;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}@media (prefers-color-scheme:light){.layer.live{mix-blend-mode:multiply}}.panel{background:var(--panel);-webkit-backdrop-filter:blur(14px)saturate(1.5);backdrop-filter:blur(14px)saturate(1.5);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;margin:0;padding:0}button:disabled{opacity:.32;cursor:default}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sep{background:var(--line-strong);flex:none;align-self:stretch;width:1px;margin:8px 4px}.toolbar{left:50%;bottom:calc(14px + var(--safe-b));z-index:10;border-radius:20px;align-items:center;gap:2px;padding:5px;display:flex;position:absolute;transform:translate(-50%)}.tool{width:46px;height:46px;color:var(--text);border-radius:14px;place-items:center;transition:background .15s,color .15s,transform .12s;display:grid;position:relative}.tool:not(:disabled):hover{background:var(--hover)}.tool:not(:disabled):active{transform:scale(.94)}.tool.on{background:var(--active);color:var(--active-text);box-shadow:inset 0 0 0 1px var(--line)}.tool.ai{color:var(--accent)}.tool.ai.off{color:var(--muted)}.tool.ai .count{background:var(--accent);color:#fff;text-align:center;font-variant-numeric:tabular-nums;border-radius:8px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;line-height:16px;position:absolute;top:5px;right:4px}.tool.ai.off .count{background:var(--off)}.tool.ai.pulse:after{content:"";border-radius:14px;animation:1.4s ease-out 2 pulse;position:absolute;inset:3px;box-shadow:0 0 #7c5cff8c}@keyframes pulse{0%{box-shadow:0 0 #7c5cff80}to{box-shadow:0 0 0 14px #7c5cff00}}.props{left:50%;bottom:calc(14px + 58px + 10px + var(--safe-b));z-index:10;border-radius:999px;align-items:center;gap:2px;padding:4px 6px;animation:.18s rise;display:flex;position:absolute;transform:translate(-50%)}.props[hidden]{display:none}.props{scrollbar-width:none;max-width:calc(100vw - 24px);overflow-x:auto}.props::-webkit-scrollbar{display:none}@keyframes rise{0%{opacity:0;transform:translate(-50%,6px)}}.swatch{border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.swatch i{background:var(--c);border-radius:50%;width:20px;height:20px;transition:transform .15s;box-shadow:inset 0 0 0 1px #0000001f}.swatch.hl i{border-radius:6px;width:22px;height:16px}.swatch:hover i{transform:scale(1.1)}.swatch.on{box-shadow:inset 0 0 0 2px var(--c), inset 0 0 0 4px var(--panel-solid)}@media (prefers-color-scheme:dark){.swatch i{box-shadow:inset 0 0 0 1px #fff5e129}.swatch[style*=\#1f2328] i{background:#e9e5dc}.swatch.on[style*=\#1f2328]{box-shadow:inset 0 0 0 2px #e9e5dc, inset 0 0 0 4px var(--panel-solid)}}.size{border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.size i{width:var(--d);height:var(--d);background:var(--muted);border-radius:50%}.size.on{background:var(--active)}.size.on i{background:var(--active-text)}.props .group{align-items:center;gap:2px;display:flex}.fav{width:38px;height:34px;color:var(--muted);-webkit-touch-callout:none;border-radius:12px;place-items:center;transition:background .15s,transform .15s;display:grid;position:relative}.fav:hover{background:var(--hover)}.fav.on{background:var(--active);box-shadow:inset 0 0 0 1px var(--line)}.fav.pressed{animation:.26s favpress}@keyframes favpress{40%{transform:scale(.86)}}.tool .chev{color:var(--muted);opacity:0;pointer-events:none;transition:opacity .15s,transform .2s;display:grid;position:absolute;top:3px;left:50%;transform:translate(-50%,2px)}.tool.on .chev{opacity:1;transform:translate(-50%)}.tool.open .chev{color:var(--active-text);transform:translate(-50%)rotate(180deg)}.tool.has-settings>svg{margin-top:3px}.penpop{z-index:25;background:var(--panel-solid);border:1px solid var(--line);box-shadow:var(--shadow), 0 24px 60px #281e0a1f;opacity:0;transform-origin:var(--nub,50%) calc(100% + 12px);pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:22px;flex-direction:column;transition:opacity .16s,transform .24s cubic-bezier(.2,.9,.25,1.06);display:flex;position:absolute;transform:translateY(10px)scale(.965)}.penpop.show{opacity:1;pointer-events:auto;transform:none}.penpop[hidden]{display:none}.penpop:after{content:"";left:var(--nub,50%);background:var(--panel-solid);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-bottom-right-radius:4px;width:14px;height:14px;margin-left:-7px;position:absolute;bottom:-7px;transform:rotate(45deg)}.pp-body{overscroll-behavior:contain;border-radius:inherit;scrollbar-width:none;padding:14px 16px 16px;overflow-y:auto}.pp-body::-webkit-scrollbar{display:none}.pp-head{justify-content:space-between;align-items:center;margin:0 2px 10px;display:flex}.pp-title{letter-spacing:-.1px;font-size:15px;font-weight:600}.pp-link{min-height:28px;color:var(--muted);border-radius:8px;margin-right:-8px;padding:2px 8px;font-size:12.5px;font-weight:500}.pp-link:hover{color:var(--text);background:var(--hover)}.pp-preview-wrap{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);background-image:radial-gradient(circle, var(--dotc,#8c806438) 1px, transparent 1.2px);background-position:8px 8px;background-size:16px 16px;border-radius:14px;overflow:hidden}.pp-preview{width:100%;height:92px;display:block}.pp-section{color:var(--muted);letter-spacing:.5px;text-transform:uppercase;justify-content:space-between;align-items:center;margin:16px 2px 8px;font-size:11.5px;font-weight:600;display:flex}.pp-section .pp-link{text-transform:none;letter-spacing:0}.pp-swatches,.pp-recents{grid-template-columns:repeat(6,1fr);justify-items:center;gap:2px;display:grid}.penpop[data-tool=highlighter] .pp-swatches{grid-template-columns:repeat(7,1fr)}.pp-recents{border-top:1px dashed var(--line-strong);margin-top:6px;padding-top:6px}.pp-recents[hidden]{display:none}.pp-mini{color:var(--muted);grid-column:1/-1;justify-self:start;margin:0 4px 2px;font-size:11px}.penpop .swatch{width:40px;height:40px}.penpop .swatch i{width:24px;height:24px}.penpop .swatch.hl i{width:26px;height:18px}.swatch.custom i{background:conic-gradient(#ff5a5a,#ffd23f,#4cd97b,#3fc5ff,#6c63ff,#ff5ad1,#ff5a5a);position:relative;box-shadow:inset 0 0 0 1px #00000014}.swatch.custom.on i:after{content:"";background:var(--pick);box-shadow:0 0 0 2px var(--panel-solid);border-radius:50%;position:absolute;inset:5px}.swatch.custom.on{box-shadow:inset 0 0 0 2px var(--line-strong), inset 0 0 0 4px var(--panel-solid)}.pp-picker{opacity:0;grid-template-rows:0fr;transition:grid-template-rows .24s,opacity .2s;display:grid}.pp-picker.open{opacity:1;grid-template-rows:1fr}.picker{min-height:0;overflow:hidden}.pp-picker.open .picker{overflow:visible}.sv{background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue,0) 100% 50%));touch-action:none;cursor:crosshair;border-radius:12px;height:128px;margin-top:10px;position:relative;box-shadow:inset 0 0 0 1px #00000014}.sv-thumb{left:calc(var(--sx,0) * 100%);top:calc(var(--sy,0) * 100%);background:var(--pick);pointer-events:none;border:3px solid #fff;border-radius:50%;width:22px;height:22px;margin:-11px 0 0 -11px;transition:transform .12s;position:absolute;box-shadow:0 0 0 1px #0000002e,0 2px 6px #00000040}.sv.drag .sv-thumb{transform:scale(1.18)}.hexrow{align-items:center;gap:8px;margin-top:10px;display:flex}.chip{background:var(--pick);border-radius:8px;flex:none;width:28px;height:28px;box-shadow:inset 0 0 0 1px #0000001f}.hex{border:1px solid var(--line-strong);background:var(--paper);min-width:0;height:32px;color:var(--text);letter-spacing:.5px;-webkit-user-select:text;user-select:text;border-radius:9px;flex:1;padding:0 10px;font:500 13px/1 ui-monospace,SF Mono,Menlo,monospace}.hex:focus{outline:2px solid var(--accent);outline-offset:-1px}.pp-field{margin-top:8px}.pp-switch{width:100%;min-height:44px;color:var(--text);text-align:start;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:4px 2px;font-size:13px;display:flex}.pp-switch-text{flex-direction:column;gap:1px;display:flex}.pp-switch-sub{color:var(--muted);font-size:11.5px}.pp-switch i{background:var(--active);width:40px;height:24px;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:12px;flex:none;transition:background .15s;position:relative}.pp-switch i:after{content:"";background:var(--panel-solid);border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0003}.pp-switch[aria-checked=true] i{background:var(--ink,var(--text))}.pp-switch[aria-checked=true] i:after{transform:translate(16px)}.pp-label{justify-content:space-between;align-items:baseline;margin:0 2px 2px;font-size:13px;display:flex}.pp-value{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}.slider{--f:0;touch-action:none;cursor:pointer;outline:none;height:34px;position:relative}.slider .rail{background:var(--active);border-radius:3px;height:6px;margin-top:-3px;position:absolute;top:50%;left:13px;right:13px;overflow:hidden}.slider .fill{height:100%;width:calc(var(--f) * 100%);background:var(--ink,var(--text));border-radius:inherit;opacity:.85}.slider .thumb{top:50%;left:calc(13px + var(--f) * (100% - 26px));width:24px;height:24px;box-shadow:0 0 0 .5px #0000001f, 0 2px 6px #0000002e, 0 0 0 0 var(--accent-soft);background:#fff;border-radius:50%;margin:-12px 0 0 -12px;transition:transform .12s,box-shadow .15s;position:absolute}.slider.drag .thumb{transform:scale(1.12)}.slider:focus-visible .thumb{box-shadow:0 0 0 .5px #0000001f, 0 2px 6px #0000002e, 0 0 0 4px var(--accent-soft)}.slider.wedge .rail{clip-path:polygon(0 calc(50% - 1px),100% 0,100% 100%,0 calc(50% + 1px));border-radius:0 7px 7px 0;height:14px;margin-top:-7px}.slider.hue{height:34px;margin-top:6px}.slider.hue .rail{background:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);border-radius:7px;height:14px;margin-top:-7px;left:0;right:0;box-shadow:inset 0 0 0 1px #00000014}.slider.hue .thumb{left:calc(13px + var(--hf,0) * (100% - 26px));background:hsl(var(--hue,0) 100% 50%);border:3px solid #fff}.seg{background:var(--active);border-radius:12px;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:4px;padding:3px;display:grid}.seg-btn{height:36px;color:var(--muted);border-radius:9px;justify-content:center;align-items:center;gap:4px;font-size:12.5px;font-weight:500;transition:background .15s,color .15s,box-shadow .15s;display:flex}.seg-btn svg{width:20px;height:20px}.seg-btn.on{background:var(--panel-solid);color:var(--text);box-shadow:0 1px 2px #00000014, 0 0 0 .5px var(--line-strong)}.pp-favs{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.fav-slot{flex-direction:column;gap:4px;display:flex}.pp-favs .fav{background:var(--hover);border-radius:12px;width:100%;height:46px}.pp-favs .fav.on{background:var(--active);box-shadow:inset 0 0 0 1.5px var(--ink,var(--text))}.pp-favs .fav svg{width:32px;height:32px}.pp-favs .fav.empty{border:1.5px dashed var(--line-strong);color:var(--muted);background:0 0}.fav-acts{flex-direction:column;gap:2px;display:flex}.fav-act{height:26px;color:var(--text);background:var(--hover);border-radius:7px;font-size:11.5px;font-weight:500}.fav-act.danger{color:var(--danger)}#app[data-penpanel=open] .props{display:none}.top{top:calc(12px + var(--safe-t));left:calc(12px + var(--safe-l));right:calc(12px + var(--safe-r));pointer-events:none;z-index:10;justify-content:space-between;align-items:flex-start;display:flex;position:absolute}.top>*{pointer-events:auto}.top-right{align-items:center;gap:8px;display:flex}.brand{border-radius:14px;align-items:center;gap:10px;height:42px;padding:0 14px 0 16px;display:flex}.brand .word{letter-spacing:.2px;margin-top:-2px;font-family:Caveat,cursive;font-size:25px;line-height:1}.brand.has-account{gap:8px;padding-right:4px}.avatar{border-radius:50%;flex:none;place-items:center;width:34px;height:34px;display:grid}.avatar-face{background:var(--active);width:26px;height:26px;color:var(--active-text);box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:50%;place-items:center;font-size:12.5px;font-weight:600;line-height:1;transition:box-shadow .15s,background .15s;display:grid}.avatar:hover .avatar-face,.avatar.on .avatar-face{box-shadow:inset 0 0 0 1px var(--line-strong), 0 0 0 3px var(--hover)}.avatar:focus-visible{outline:none}.avatar:focus-visible .avatar-face{box-shadow:inset 0 0 0 1px var(--line-strong), 0 0 0 2px var(--paper), 0 0 0 4px var(--muted)}.account{z-index:20;background:var(--panel-solid);border:1px solid var(--line);min-width:220px;max-width:min(320px,100vw - 24px);box-shadow:var(--shadow);opacity:0;border-radius:14px;padding:12px;transition:opacity .14s;position:absolute;top:0;left:0}.account.show{opacity:1}.account[hidden]{display:none}.acct-name,.acct-email{text-overflow:ellipsis;white-space:nowrap;margin:0 2px;overflow:hidden}.acct-name{font-weight:600}.acct-email{color:var(--muted);margin-top:2px;font-size:12.5px}.account form{margin:12px 0 0}.acct-out{background:var(--hover);border-radius:10px;width:100%;height:38px;font-weight:500}.acct-out:hover{background:var(--active)}.status{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}.status-text:empty{display:none}.dot{background:var(--off);border-radius:50%;width:8px;height:8px;transition:background .3s}.dot[data-s=online]{background:var(--ok);box-shadow:0 0 0 3px #3aa67626}.dot[data-s=syncing],.dot[data-s=connecting]{background:var(--warn);animation:1.2s ease-in-out infinite blink}@keyframes blink{50%{opacity:.4}}.viewctl{border-radius:14px;align-items:center;height:42px;padding:0 4px;display:flex}.icon{width:36px;height:36px;color:var(--text);border-radius:10px;place-items:center;display:grid}.icon svg{width:19px;height:19px}.icon:hover{background:var(--hover)}.icon.on{color:var(--text)}.viewctl .icon:first-child:not(.on){color:var(--muted)}.icon.danger{color:var(--danger)}.zoom{font-variant-numeric:tabular-nums;min-width:52px;height:36px;color:var(--muted);border-radius:10px;font-size:12.5px}.zoom:hover{background:var(--hover);color:var(--text)}.watch{height:42px;color:var(--accent);border-radius:14px;align-items:center;gap:6px;padding:0 12px;font-size:12.5px;font-weight:500;display:flex}.watch[hidden]{display:none}.watch svg{width:18px;height:18px;animation:3s ease-in-out infinite breathe}@keyframes breathe{50%{opacity:.45}}.popover{z-index:20;background:var(--panel-solid);border:1px solid var(--line);min-width:200px;box-shadow:var(--shadow);opacity:0;border-radius:14px;padding:10px;transition:opacity .14s;position:absolute;top:0;left:0}.popover.show{opacity:1}.popover[hidden]{display:none}.pop-head{color:var(--accent);letter-spacing:.2px;align-items:center;gap:6px;margin:0 2px 8px;font-size:12px;font-weight:600;display:flex}.spark{color:var(--accent);display:inline-grid}.spark svg{width:16px;height:16px}.pop-row{gap:6px;display:flex}.pop-btn{background:var(--hover);border-radius:10px;flex:1;justify-content:center;align-items:center;gap:6px;height:40px;padding:0 14px;font-weight:500;display:flex}.pop-btn svg{width:17px;height:17px}.pop-btn.primary{background:var(--accent);color:#fff}.pop-all{color:var(--muted);align-items:center;gap:8px;margin:9px 2px 0;font-size:12px;display:flex}.link{color:var(--accent);padding:4px 2px;font-size:12px;font-weight:500}.selbar{z-index:15;border-radius:14px;align-items:center;gap:2px;padding:4px 6px 4px 12px;display:flex;position:absolute;top:0;left:0}.selbar[hidden]{display:none}.selbar .swatch{width:30px;height:30px}.selbar .swatch i{width:16px;height:16px}.selcount{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;margin-right:6px;font-size:12px}.toast{left:50%;top:calc(14px + var(--safe-t));z-index:30;background:var(--panel-solid);border:1px solid var(--line);max-width:calc(100vw - 32px);box-shadow:var(--shadow);opacity:0;pointer-events:none;border-radius:999px;align-items:center;gap:8px;padding:9px 10px 9px 14px;font-size:13px;transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.3,1.2);display:flex;position:absolute;transform:translate(-50%,-12px)}.toast.show{opacity:1;pointer-events:auto;transform:translate(-50%)}.toast-btn{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600}.text-edit{z-index:5;white-space:pre;-webkit-user-select:text;user-select:text;caret-color:var(--accent);min-height:1em;box-shadow:0 0 0 6px var(--accent-soft);background:0 0;border-radius:4px;outline:none;margin:0;padding:0;position:absolute}@media (max-width:560px){.tool{width:40px;height:42px}.toolbar .sep{margin:8px 1px}.viewctl .icon:nth-child(2),.viewctl .sep,.brand .status-text{display:none}.props{bottom:calc(14px + 54px + 10px + var(--safe-b))}:is(.props .sizes,.props .sep:has(+.sizes)){display:none}}@media (pointer:coarse){.viewctl{height:50px}.icon{border-radius:12px;width:44px;height:44px}.zoom{min-width:56px;height:44px}.swatch,.size,.fav,.penpop .swatch{width:44px;height:44px}.seg-btn,.slider{height:44px}.slider .thumb{width:28px;height:28px;margin:-14px 0 0 -14px}.pp-link{min-height:44px}.fav-act{height:36px}.avatar{width:44px;height:44px;margin:-1px -4px}.acct-out{height:44px}}.seg.two{grid-template-columns:repeat(2,1fr)}.pp-hint{color:var(--muted);margin:6px 4px 0;font-size:12px;line-height:1.35}.pp-field[hidden]{display:none}.pp-toggle{border-top:1px solid var(--line);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;min-height:44px;margin-top:10px;padding:0 2px;font-size:13px;display:flex}.switch{background:var(--active);width:44px;height:26px;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:13px;flex:none;padding:0;transition:background .18s;position:relative}.switch i{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .2s cubic-bezier(.2,.9,.25,1.06);position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.switch.on{background:var(--accent);box-shadow:none}.switch.on i{transform:translate(18px)}.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}