.draw-mask,.draw-replay-mask,.draw-comments-mask,.draw-submit-mask{position:fixed;inset:0;background:rgba(34,34,34,.3);z-index:430;display:none;align-items:center;justify-content:center;padding:18px;overscroll-behavior:contain}
.draw-card,.draw-card *,.draw-replay-card,.draw-replay-card *,.draw-comments-card,.draw-comments-card *,.draw-submit-card,.draw-submit-card *,.draw-popover,.draw-popover *{box-sizing:border-box}
.draw-mask.show,.draw-replay-mask.show,.draw-comments-mask.show,.draw-submit-mask.show{display:flex}
#modalMask{z-index:800}
.draw-card{width:720px;max-width:100%;max-height:94vh;max-height:94dvh;overflow:auto;background:var(--bg);border:1px solid var(--line);padding:18px;letter-spacing:0}
.draw-card [hidden],.draw-replay-card [hidden],.draw-comments-card [hidden]{display:none!important}
.draw-head,.draw-replay-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px;flex-shrink:0}
.draw-title{font-size:16px;font-weight:700;letter-spacing:0}
.draw-head-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}
.draw-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;padding:7px;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--sub);cursor:pointer;vertical-align:middle;overflow:visible}
.draw-icon img,.draw-command img{width:18px;height:18px;display:block;flex-shrink:0;opacity:.62;pointer-events:none}
.draw-icon:hover img,.draw-icon.on img,.draw-command:hover img{opacity:1}
.draw-icon.on{border-color:var(--ink);color:var(--ink)}
.draw-icon:disabled,.draw-command:disabled{opacity:.35;cursor:default}
.draw-close:not(.draw-motion) img{transition:transform .3s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.draw-close:not(.draw-motion):hover img{transform:rotate(45deg)}}
.draw-card button:focus-visible,.draw-card input:focus-visible,.draw-replay-card button:focus-visible,.draw-replay-card canvas:focus-visible{outline:1px solid var(--ink)!important;outline-offset:2px}
.draw-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);flex-shrink:0}
.draw-tool-group{display:flex;align-items:center;gap:3px;min-width:0}
.draw-tools>.draw-tool-group:first-child{flex-wrap:wrap}
.draw-tool-group+.draw-tool-group{border-left:1px solid var(--line);padding-left:8px}
.draw-colors{display:flex;align-items:center;gap:8px;padding:8px 0}
.draw-swatch{width:20px;height:20px;flex:0 0 20px;padding:0;border:1px solid rgba(0,0,0,.14);border-radius:50%;cursor:pointer}
.draw-swatch.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--ink)!important}
.draw-color-trigger{width:27px;height:27px;flex:0 0 27px;border:2px solid #fff;outline:1px solid #bbb;border-radius:50%;background:var(--current-color);cursor:pointer;margin:3px}
.draw-panel-triggers{margin-left:auto}
.draw-size{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 150px;font:12px var(--sans);color:var(--sub)}
.draw-size input{flex:1 1 80px;width:80px;min-width:0;accent-color:var(--ink)}
.draw-size output{width:48px;flex:0 0 48px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.draw-canvas-wrap{width:100%;border:1px solid var(--line);background:#e1e3e4;touch-action:none;cursor:crosshair;overflow:hidden;position:relative;aspect-ratio:1000/640;flex-shrink:0;isolation:isolate}
.draw-card:not(.is-focus) .draw-canvas-wrap{max-height:calc(94dvh - 300px);min-height:120px}
#drawViewport{position:absolute;inset:0;touch-action:none;background:#e1e3e4}
.draw-canvas-wrap.is-brush,.draw-canvas-wrap.is-eyedropper,.draw-canvas-wrap.is-bucket{cursor:none}
.draw-brush-cursor{position:absolute;pointer-events:none;z-index:3;border:1px solid #fff;outline:1px solid #111;border-radius:50%;transform:translate(-50%,-50%)}
/* The SVG tip is (2,22) in its 24px viewBox: that tip is the sampling position. */
.draw-brush-cursor.is-eyedropper{border:0;outline:0;border-radius:0;width:24px!important;height:24px!important;background:url('/vendor/lucide/pipette.svg') center/contain no-repeat;transform:translate(-2px,-22px);filter:drop-shadow(0 0 1px #fff)}
.draw-brush-cursor.is-bucket{border:0;outline:0;border-radius:0;background:url('/vendor/lucide/paint-bucket.svg') center/contain no-repeat;width:23px!important;height:23px!important}
.draw-brush-cursor.is-eyedropper::before,.draw-brush-cursor.is-eyedropper::after{display:none}
.draw-brush-cursor.is-bucket::before,.draw-brush-cursor.is-bucket::after{display:none}
.draw-brush-cursor.is-cross{width:13px!important;height:13px!important;border:0;outline:0}
.draw-brush-cursor.is-picking{transform:translate(-2px,-42px)}
.draw-brush-cursor.is-picking span{position:absolute;left:50%;top:28px;width:16px;height:16px;border:1px solid #fff;outline:1px solid #111;border-radius:2px;transform:translateX(-50%)}
.draw-brush-cursor.is-cross::before,.draw-brush-cursor.is-cross::after{content:'';position:absolute;left:50%;top:50%;background:#fff;box-shadow:0 0 0 1px #111;transform:translate(-50%,-50%)}
.draw-brush-cursor.is-cross::before{width:13px;height:1px}
.draw-brush-cursor.is-cross::after{width:1px;height:13px}
.draw-canvas-wrap.is-pan{cursor:grab}
.draw-canvas-wrap.is-dragging{cursor:grabbing}
.draw-canvas-wrap.is-zoom{cursor:zoom-in}
.draw-canvas-wrap.is-rotate{cursor:alias}
.draw-popover.draw-selection-tools{width:380px;max-width:calc(100vw - 16px)}
.draw-sel-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.draw-sel-row+.draw-sel-row{border-top:1px solid var(--line)}
.draw-sel-label{flex:0 0 30px;color:var(--sub);font-size:11px}
.draw-sel-row .draw-segments{flex:0 1 auto}
.draw-selection-actions{margin-left:auto}
.draw-segments{display:inline-flex;align-items:center;border:1px solid #ddd;border-radius:4px;padding:2px;gap:2px;min-width:0}
.draw-segments button{display:flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 8px;border:0;border-radius:2px;color:var(--sub);background:transparent;font:12px var(--sans);cursor:pointer;white-space:nowrap}
.draw-segments button.on{color:var(--ink);background:#e8e9e9}
.draw-segments img{width:17px;height:17px;opacity:.7}
.draw-selection-actions{margin-left:auto}
.draw-text-button{border:0;background:transparent;color:var(--sub);font:12px var(--sans);padding:5px 2px;cursor:pointer;white-space:nowrap}
.draw-skew-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:6px 0 2px;border-top:1px solid var(--line);font:12px var(--sans);color:var(--sub)}
.draw-skew-controls .draw-sel-label{flex:0 0 auto}
.draw-skew-controls label{display:flex;align-items:center;gap:6px;min-width:max-content;flex:0 1 auto;white-space:nowrap}
.draw-skew-controls input{flex:none;width:95px;min-width:0;accent-color:var(--ink)}
.draw-skew-controls output{flex:0 0 32px;text-align:right;font-variant-numeric:tabular-nums}
.draw-view-tools{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 0;flex-shrink:0}
.draw-view-tools>.draw-tool-group:last-child{margin-left:auto}
#drawZoomValue{min-width:44px;text-align:center;font:12px var(--sans);font-variant-numeric:tabular-nums;color:var(--sub)}
.draw-fields{display:flex;gap:8px;margin-top:8px;flex-shrink:0}
.draw-fields input{flex:1;min-width:0;border:1px solid var(--line);padding:8px;font:12px var(--sans);background:transparent}
.draw-submit-row{display:flex;justify-content:flex-end;margin-top:12px;flex-shrink:0}
.draw-submit-card{width:520px;max-width:100%;background:var(--bg);border:1px solid var(--line);padding:18px;letter-spacing:0;box-shadow:0 8px 32px rgba(0,0,0,.12)}
.draw-submit-note{margin:0;color:var(--sub);font:12px/1.6 var(--sans)}
.draw-submit-card .draw-fields{margin-top:14px;flex-direction:column}
.draw-submit-card .draw-fields input{width:100%;flex:1}
.draw-submit-mask{z-index:760}
.draw-submit-status{margin:10px 0;color:#b4443c;font:13px/1.6 var(--sans);overflow-wrap:anywhere}
.draw-submit-status:empty{display:none}
.draw-command{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--sub);font:12px var(--sans);padding:6px 10px;cursor:pointer;overflow:visible}
.draw-command:hover{border-color:var(--ink);color:var(--ink)}
.draw-motion-wrap{display:block;position:relative;overflow:visible;pointer-events:none}
.draw-motion-content{display:flex;align-items:center;justify-content:center;gap:6px;min-height:18px;transition:transform .45s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
.draw-icon .draw-motion-wrap,.draw-icon .draw-motion-content{width:100%;height:100%;min-height:0}
.draw-motion,.draw-swatch,.draw-color-trigger{transition:transform .2s ease,border-color .25s ease,opacity .2s ease}
.draw-motion:active:not(:disabled),.draw-swatch:active,.draw-color-trigger:active{transform:scale(.94)}
.draw-speed-trigger img{transition:transform .3s ease}
.draw-speed-trigger[aria-expanded=true] img{transform:rotate(180deg)}
.draw-speed-menu button{transition:transform .2s ease}
@media(hover:hover){
  .draw-motion:hover:not(:disabled) .draw-motion-content{transform:scale(1.08)}
  .draw-motion[data-motion=brush]:hover .draw-motion-content{transform:translate(2px,-2px) rotate(-10deg)}
  .draw-motion[data-motion=erase]:hover .draw-motion-content{transform:translate(3px,-1px) rotate(8deg)}
  .draw-motion[data-motion=pour]:hover .draw-motion-content{transform:rotate(-28deg) translateY(1px)}
  .draw-motion[data-motion=trace]:hover .draw-motion-content{transform:rotate(-6deg) scale(1.12)}
  .draw-motion[data-motion=pan]:hover .draw-motion-content{transform:translateX(4px)}
  .draw-motion[data-motion=clockwise]:hover .draw-motion-content{transform:rotate(32deg)}
  .draw-motion[data-motion=counterclockwise]:hover .draw-motion-content{transform:rotate(-32deg)}
  .draw-motion[data-motion=expand]:hover .draw-motion-content{transform:scale(1.2)}
  .draw-motion[data-motion=shrink]:hover .draw-motion-content{transform:scale(.82)}
  .draw-motion[data-motion=flip]:hover .draw-motion-content{transform:rotateY(180deg)}
  .draw-motion[data-motion=up]:hover .draw-motion-content{transform:translateY(-4px)}
  .draw-motion[data-motion=down]:hover .draw-motion-content{transform:translateY(4px)}
  .draw-motion[data-motion=copy]:hover .draw-motion-content{transform:translate(3px,-3px)}
  .draw-motion[data-motion=send]:hover .draw-motion-content{transform:translateY(-2px)}
  .draw-motion[data-motion=play]:hover .draw-motion-content{transform:translateX(4px) scale(1.1)}
  .draw-motion[data-motion=close]:hover .draw-motion-content{transform:rotate(45deg)}
  .draw-motion[data-motion=smudge]:hover .draw-motion-content{transform:translateX(2px) rotate(-12deg)}
  .draw-motion[data-motion=eye]:hover .draw-motion-content{transform:scaleX(1.18)}
  .draw-motion[data-motion=lock]:hover .draw-motion-content{transform:translateY(-2px) rotate(-5deg)}
  .draw-motion[data-motion=layers]:hover .draw-motion-content{transform:translateY(-3px)}
  .draw-motion[data-motion=scissors]:hover .draw-motion-content{transform:rotate(-10deg) scale(1.06)}
  .draw-swatch:hover,.draw-color-trigger:hover{transform:scale(1.12)}
  .draw-speed-menu button:hover{background:#eceeee;color:var(--ink)}
}
@media(prefers-reduced-motion:reduce){.draw-motion,.draw-motion-content,.draw-swatch,.draw-color-trigger,.draw-speed-trigger img,.draw-speed-menu button,.draw-close:not(.draw-motion) img{transition:none!important;transform:none!important}}
#drawStage,#drawStage *,#drawReplayCanvas{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.draw-status{font:12px/1.6 var(--sans);color:#b4443c;flex-shrink:0}
.draw-status:not(:empty){margin-top:8px}
.draw-progress{margin-top:10px;color:var(--sub);font:11px/1.5 var(--sans)}
.draw-progress-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.draw-progress-head output{color:var(--text);font-variant-numeric:tabular-nums}
.draw-progress-track{height:3px;overflow:hidden;background:#e8e8e8}
.draw-progress-track i{display:block;width:0;height:100%;background:var(--ink);transition:width .18s var(--ease)}
.draw-import-progress{padding-top:10px;border-top:1px solid var(--line)}
.draw-toast{position:fixed;z-index:700;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 36px);padding:10px 16px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(34,34,34,.94);color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.15);font:13px/1.6 var(--sans);text-align:center;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.draw-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.draw-toast{transition:none}}
.draw-mask.focus-mode{padding:0;align-items:stretch;width:100vw;right:auto}
.draw-card.is-focus{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;border:0;display:flex;flex-direction:column;overflow:hidden;background:#e1e3e4}
.draw-card.is-focus .draw-head{display:none}
.draw-card.is-focus .draw-tools{padding-top:8px}
.draw-card.is-focus .draw-canvas-wrap{flex:1 1 0;min-height:80px;aspect-ratio:auto}
.draw-card.is-focus .draw-canvas-wrap{border:0}
.draw-card.is-focus .draw-canvas-wrap,.draw-card.is-focus #drawViewport{background:#e1e3e4}
.draw-card.is-focus .draw-submit-row{display:none}
.draw-gallery{padding:18px 0 36px}
.draw-masonry{--masonry-columns:2;--masonry-gap:14;display:grid;grid-template-columns:repeat(var(--masonry-columns),minmax(0,1fr));grid-auto-rows:1px;column-gap:calc(var(--masonry-gap)*1px);row-gap:0;align-items:start}
.draw-masonry>.draw-gallery-empty,.draw-masonry>.ntf-none{grid-column:1/-1;grid-row:auto}
.draw-masonry.is-empty{display:block}
.draw-gallery-card{min-width:0;width:100%;border:1px solid var(--line);padding:10px;background:transparent;overflow-wrap:anywhere}
.draw-cta{display:inline-flex;align-items:center;gap:5px;border:0;background-color:transparent;color:var(--sub);font:12px var(--sans);cursor:pointer;transition:color .25s var(--ease)}
.draw-cta:hover{color:var(--ink)}
.draw-cta-label{display:inline-flex;align-items:baseline;line-height:1.4}
html[lang=en] .draw-cta-label{gap:.25em}
.draw-cta-label>span{display:inline-block;animation:drawCtaChar 1.8s ease-in-out infinite}
.draw-cta-label>span:nth-child(2){animation-delay:.08s}.draw-cta-label>span:nth-child(3){animation-delay:.16s}.draw-cta-label>span:nth-child(4){animation-delay:.24s}.draw-cta-label>span:nth-child(5){animation-delay:.32s}.draw-cta-label>span:nth-child(6){animation-delay:.4s}
@keyframes drawCtaChar{0%,70%,100%{transform:translateY(0)}12%{transform:translateY(-4px)}24%{transform:translateY(0)}}
.draw-cta-arrow{display:inline-flex;width:13px;height:13px;flex:0 0 13px;align-items:center;justify-content:center;opacity:.62;animation:drawCtaNudge 1.6s ease-in-out infinite}
.draw-cta-arrow img{width:13px;height:13px;display:block;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.draw-cta-arrow-left img{transform:rotate(-90deg)}
.draw-cta-arrow-right img{transform:rotate(90deg)}
.draw-cta:hover .draw-cta-arrow img{opacity:1}
.draw-cta:hover .draw-cta-arrow-left img{transform:translateX(2px) rotate(-90deg)}
.draw-cta:hover .draw-cta-arrow-right img{transform:translateX(-2px) rotate(90deg)}
@keyframes drawCtaNudge{0%,100%{transform:translateY(0);opacity:.55}45%{transform:translateY(4px);opacity:1}60%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.draw-cta-arrow,.draw-cta-label>span{animation:none}.draw-cta-arrow img{transition:none}}
.draw-avatar-field{display:flex;align-items:center;gap:7px;flex:1.2;min-width:0}
.draw-avatar-preview{width:38px;height:38px;flex:0 0 38px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:#fff}
.draw-artwork-frame{position:relative;width:100%;aspect-ratio:1000/640;overflow:hidden;background:#eceeed;border:1px solid var(--line)}
.draw-artwork-frame>.draw-artwork{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;cursor:zoom-in;opacity:1;transition:opacity .35s ease}
.draw-artwork-frame.is-loading>.draw-artwork,.draw-artwork-frame.is-failed>.draw-artwork{opacity:0;pointer-events:none}
.draw-artwork-frame.is-loading::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:drawImageLoading 1.5s linear infinite;pointer-events:none}
.draw-image-retry{position:absolute;inset:0;border:0;background:transparent;color:var(--sub);font:12px var(--sans);padding:14px;cursor:pointer}
.draw-image-retry[hidden]{display:none}
.draw-gallery-skeleton>i{display:block;width:70%;height:10px;background:#eceeed;margin-top:14px}
.draw-gallery-skeleton>i:last-child{width:40%;margin-top:8px}
@keyframes drawImageLoading{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.draw-artwork-frame.is-loading::after{animation:none}.draw-artwork-frame>.draw-artwork{transition:none}}
.draw-author{display:inline-flex;align-items:center;gap:7px;min-width:0;overflow-wrap:anywhere}
.draw-avatar{display:block;width:28px;height:28px;flex:0 0 28px;aspect-ratio:1;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.draw-gallery-meta{display:flex;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;margin-top:8px;color:var(--sub);font:11px/1.6 var(--sans);overflow-wrap:anywhere}
.draw-gallery-msg{margin-top:4px;color:var(--text);font:13px/1.7 var(--serif);white-space:pre-wrap;word-break:break-word}
.draw-gallery-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:nowrap;margin-top:8px}
.draw-gallery-actions .draw-command{flex-shrink:0;white-space:nowrap;min-height:34px}
.draw-comment-count{font-variant-numeric:tabular-nums}
.draw-gallery-actions img{width:16px;height:16px;border:0;background:transparent;aspect-ratio:auto;cursor:inherit;flex:0 0 16px}
.draw-action-label{display:block;position:relative;height:1.45em;line-height:1.45;min-width:3.2em;overflow:hidden;white-space:nowrap;vertical-align:middle}
.draw-action-label>span{display:block;transition:transform .42s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
.draw-action-label>span+span{position:absolute;left:0;top:100%;white-space:nowrap}
.draw-command:hover .draw-action-label>span:first-child{transform:translateY(-100%)}
.draw-command:hover .draw-action-label>span+span{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.draw-action-label>span{transition:none!important}}
.draw-gallery-empty{padding:58px 0;text-align:center;color:var(--sub);font:13px var(--sans)}
.draw-token-import{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font:12px var(--sans);color:var(--sub)}
.draw-import-intro{display:flex;align-items:flex-start;gap:10px;margin:2px 0 14px;padding:11px;background:#f4f4f3;border:1px solid #e5e5e3}
.draw-import-mark{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border:1px solid #d6d6d4;background:#fff;color:var(--ink)}
.draw-import-mark img{width:15px;height:15px}
.draw-import-intro strong{display:block;color:var(--text);font:600 12px/1.4 var(--sans)}
.draw-import-intro p{margin:3px 0 0;color:var(--sub);font:11px/1.55 var(--sans)}
.draw-import-label{display:block;margin-bottom:6px;color:var(--sub);font:11px var(--sans)}
.draw-token-import-controls{display:flex;gap:8px;margin-top:0;align-items:stretch}
.draw-import-input{display:flex;align-items:center;gap:7px;min-width:0;flex:1;border:1px solid #d8d8d6;background:#fafafa;padding:0 9px;transition:border-color .2s,background-color .2s,box-shadow .2s}
.draw-import-input:hover{border-color:#b7b7b4;background:#fff}
.draw-import-input:focus-within{border-color:var(--ink);background:#fff}
.draw-card .draw-import-input input:focus-visible{outline:none!important;box-shadow:none}
.draw-import-input img{width:14px;height:14px;opacity:.5;flex:0 0 14px}
.draw-import-input input{width:100%;min-width:0;border:0;padding:9px 0;font:12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;background:transparent;color:var(--text);outline:0}
.draw-token-import-controls .draw-command{flex:0 0 auto;padding-left:12px;padding-right:12px}
.draw-token-mask{position:fixed;inset:0;background:rgba(34,34,34,.3);z-index:720;display:none;align-items:center;justify-content:center;padding:18px}
.draw-token-mask.show{display:flex}
.draw-token-card{width:460px;max-width:100%;background:var(--bg);border:1px solid var(--line);padding:18px;letter-spacing:0}
.draw-token-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.draw-token-note{margin:14px 0 10px;color:var(--sub);font:13px/1.6 var(--sans)}
.draw-token-value{display:flex;gap:8px}
.draw-token-value input{flex:1;min-width:0;border:1px solid var(--line);padding:9px;font:12px var(--sans);color:var(--text);background:transparent}
.draw-token-actions{display:flex;justify-content:flex-end;margin-top:12px}
.draw-replay-mask{z-index:435}
.draw-replay-card{width:660px;max-width:100%;max-height:94vh;max-height:94dvh;overflow:auto;background:var(--bg);border:1px solid var(--line);padding:18px;letter-spacing:0}
.draw-replay-head>span{min-width:0;overflow-wrap:anywhere;font-size:14px}
.draw-replay-canvas-wrap{position:relative;width:100%;background:#e1e3e4}
#drawReplayCanvas{display:block;width:100%;height:auto;aspect-ratio:1000/640;background:#fff;border:1px solid var(--line);touch-action:none;cursor:ew-resize}
#drawReplayCanvas[aria-disabled=true]{cursor:default}
.draw-replay-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;color:var(--sub);font:12px/1.7 var(--sans);margin-top:9px;overflow-wrap:anywhere}
#drawReplayMsg{white-space:pre-wrap;min-width:0}
#drawReplayDate{margin-left:auto;flex-shrink:0}
.draw-replay-controls{display:flex;align-items:center;gap:8px;margin-top:10px;font:12px var(--sans);color:var(--sub)}
.draw-speed-trigger{display:flex;align-items:center;justify-content:center;gap:5px;min-width:57px;height:32px;border:0;border-bottom:1px solid #ccc;border-radius:0;background:transparent;color:var(--text);font:12px var(--sans);font-variant-numeric:tabular-nums;cursor:pointer}
.draw-speed-trigger img{width:13px;height:13px;opacity:.6}
.draw-speed-trigger:disabled{opacity:.35;cursor:default}
.draw-replay-time{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.draw-replay-exports{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.draw-replay-exports .draw-command{display:inline-flex;align-items:center;gap:6px;min-height:34px}
.draw-export-panel{margin-top:12px;padding:12px;border:1px solid var(--line);font:12px/1.6 var(--sans)}
.draw-export-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
.draw-export-head strong{font-weight:500}
.draw-export-hint{color:var(--sub);margin:6px 0 12px;overflow-wrap:anywhere}
.draw-export-field{display:flex;align-items:center;gap:10px}
.draw-export-field>span{flex-shrink:0}
.draw-export-field input,.draw-export-field select{min-width:0;border:1px solid var(--line);border-radius:2px;padding:8px;background:var(--bg);color:var(--text);font:12px var(--sans)}
.draw-export-field input{flex:1;width:100%}
.draw-export-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.draw-export-actions .draw-command{text-decoration:none;min-height:34px;display:inline-flex;align-items:center}
.draw-export-actions a{color:var(--ink);cursor:pointer}
.draw-replay-progress{position:absolute;left:50%;top:50%;width:min(260px,70%);margin:0;padding:12px 14px;transform:translate(-50%,-50%);background:rgba(250,250,250,.94);border:1px solid var(--line);box-shadow:0 4px 18px rgba(0,0,0,.08)}
.draw-replay-progress[hidden]{display:none}
.draw-popover{position:fixed;z-index:460;width:282px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:14px;background:var(--bg);border:1px solid #d7d7d7;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.1);overflow:auto;overscroll-behavior:contain;color:var(--text);font:12px/1.5 var(--sans)}
.draw-popover{will-change:transform,opacity}
.draw-panel-dock{position:fixed;z-index:460;display:flex;flex-direction:column;gap:8px;width:282px;max-width:calc(100vw - 20px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable}
.draw-panel-dock>.draw-popover{position:relative;inset:auto;width:100%;max-width:none;max-height:none;flex:0 0 auto;overflow:visible;box-shadow:none}
.draw-panel-dock.is-stacked #drawLayerList{max-height:156px}
.draw-popover-enter{animation:drawPopoverIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes drawPopoverIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.draw-popover-enter{animation:none}}
.draw-popover-head{display:flex;align-items:center;gap:4px;margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:6px;font-size:14px;cursor:grab;user-select:none;touch-action:none}
.draw-popover-head:active,.draw-popover.is-dragging .draw-popover-head{cursor:grabbing}
.draw-popover-head>span:first-child{margin-right:auto;font-weight:600}
.draw-popover-head .draw-icon{width:28px;height:28px;flex-basis:28px;padding:5px}
.draw-color-pair{display:flex;border:1px solid #ddd;border-radius:3px;overflow:hidden;margin-right:6px}
.draw-color-pair span{display:block;width:25px;height:22px}
.draw-color-modes{display:flex;margin-bottom:12px}
.draw-color-modes button{flex:1}
.draw-setting-row{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) 46px;align-items:center;gap:9px;min-height:32px;color:var(--sub);font:12px var(--sans)}
.draw-setting-row>span{min-width:0;white-space:nowrap}
.draw-setting-row input[type=range]{display:block;width:100%;min-width:0;margin:0;accent-color:var(--ink)}
.draw-setting-row output{width:46px;text-align:right;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.draw-adjust-actions{display:flex;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
#drawColorPicker{width:244px;max-width:100%;margin:0 auto 12px;min-height:235px;touch-action:none;user-select:none}
#drawColorPicker *{touch-action:none}
.draw-hex-label{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:11px;margin:8px 0}
.draw-hex-label input{min-width:0;flex:1;height:30px;border:1px solid var(--line);background:transparent;padding:4px 7px;color:var(--text);font:12px var(--sans)}
.draw-hex-label input{font-family:monospace}
.draw-recent-colors{border-top:1px solid var(--line);min-height:37px}
.draw-recent-colors .draw-swatch{width:19px;height:19px;flex-basis:19px}
.draw-layer-row{display:flex;align-items:center;gap:4px;border:1px solid transparent;border-bottom-color:var(--line);padding:6px 0;position:relative;transition:background-color .16s,border-color .16s,box-shadow .16s}
.draw-layer-row.is-active{border-color:#c7c9ca;background:#ededed;box-shadow:none;padding:5px 4px}
.draw-layer-row.is-active .draw-layer-pick{color:var(--ink);font-weight:600}
.draw-layer-row.is-active .draw-layer-pick canvas{border-color:#999;box-shadow:none}
.draw-layer-pick{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--text);font:12px var(--sans)}
.draw-layer-pick canvas{width:48px;height:31px;flex-shrink:0;border:1px solid #ddd;background:repeating-conic-gradient(#e5e5e5 0% 25%,#fff 0% 50%) 0 0/8px 8px}
.draw-layer-label{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.draw-layer-label>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draw-layer-group{position:relative}
.draw-layer-children{margin:0 0 0 17px;padding-left:10px;position:relative}
.draw-layer-children::before{content:'';position:absolute;left:0;top:16px;bottom:0;width:6px;border-left:1px solid var(--sub);border-top:1px solid var(--sub);opacity:.65}
.draw-layer-children::after{content:'';position:absolute;left:-3px;bottom:1px;width:5px;height:5px;border-right:1px solid var(--sub);border-bottom:1px solid var(--sub);transform:rotate(45deg);opacity:.65}
.draw-layer-row.is-clipping{background:#f5f5f5}
.draw-layer-row.is-clipping .draw-layer-label{padding-left:4px}
.draw-layer-row .draw-icon{width:26px;height:28px;flex-basis:26px;padding:5px}
.draw-layer-row .draw-icon img{width:15px;height:15px}
#drawLayerList{max-height:260px;overflow:auto;scrollbar-width:thin;scrollbar-gutter:stable}
.draw-layer-opacity{display:flex;align-items:center;gap:6px;color:var(--sub);font-size:11px;margin-top:10px}
.draw-layer-opacity input{flex:1;min-width:40px;width:70px;accent-color:var(--ink)}
.draw-layer-opacity output{width:32px;text-align:right;font-variant-numeric:tabular-nums}
.draw-layer-blend{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:11px;margin:10px 0}
.draw-layer-blend-control{flex:1;min-width:0;border:1px solid #d0d5d1;border-radius:5px;background:#f7f8f6;transition:border-color .18s,background-color .18s,box-shadow .18s}
.draw-layer-blend-control:hover{border-color:#aeb1b2;background:#fff}
.draw-layer-blend-control:focus-within{border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(17,17,17,.06)}
.draw-blend-trigger{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:6px 8px;border:0;border-radius:4px;background:transparent;color:var(--text);font:12px var(--sans);text-align:left;cursor:pointer}
.draw-blend-trigger>span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draw-blend-trigger>img{width:14px;height:14px;opacity:.6;transition:transform .18s}
.draw-blend-trigger[aria-expanded=true]>img{transform:rotate(180deg)}
.draw-blend-trigger:disabled{opacity:.45;cursor:default}
.draw-blend-menu,.draw-blend-menu *{box-sizing:border-box}
.draw-blend-menu{position:fixed;z-index:790;padding:5px;border:1px solid #d5d9d5;border-radius:6px;background:#fcfdfb;box-shadow:0 12px 34px rgba(20,30,24,.15),0 2px 5px rgba(20,30,24,.04);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b7bfb9 transparent;letter-spacing:0}
.draw-blend-menu[hidden]{display:none!important}
.draw-blend-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:32px;padding:6px 9px;border:0;border-radius:3px;background:transparent;color:var(--text);font:12px/1.5 var(--sans);text-align:left;cursor:pointer}
.draw-blend-option:hover,.draw-blend-option:focus-visible{background:#edf1ec;outline:0}
.draw-blend-option[aria-selected=true]{background:#e5ece6;color:#24392d;font-weight:600}
.draw-blend-option>img{width:14px;height:14px;opacity:0;flex:none}
.draw-blend-option[aria-selected=true]>img{opacity:.8}
.draw-blend-divider{height:1px;margin:5px 7px;background:#e0e5df}
.draw-blend-preview{position:relative;width:27px;height:24px;flex:0 0 27px;overflow:hidden;border:1px solid #d1d1d1;border-radius:3px;background:linear-gradient(135deg,#ddd 25%,#fff 25% 50%,#ddd 50% 75%,#fff 75%) 0 0/8px 8px;isolation:isolate}
.draw-blend-preview i,.draw-blend-preview b{position:absolute;display:block;width:15px;height:15px;border-radius:50%;top:4px}
.draw-blend-preview i{left:3px;background:#d94841}
.draw-blend-preview b{left:9px;background:#3973a8;mix-blend-mode:var(--blend-mode,source-over)}
.draw-layer-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.draw-layer-row .draw-icon.on{background:#eef3f1;border-color:#aabdb6}
.draw-layer-row .draw-icon.on img{opacity:1}
.draw-speed-menu{width:96px;padding:4px}
.draw-speed-menu.draw-popover-enter{animation:drawSpeedIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes drawSpeedIn{from{opacity:0;transform:translateY(4px) scale(.92)}to{opacity:1;transform:none}}
.draw-speed-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;height:32px;padding:0 8px;border:0;background:transparent;color:var(--sub);font:12px var(--sans);cursor:pointer}
.draw-speed-menu button{border-radius:3px;transition:background-color .16s,color .16s}
.draw-speed-menu button[aria-checked=true]{font-weight:600;color:var(--ink)}
.draw-speed-menu img{width:13px;height:13px;opacity:0;transition:opacity .16s,transform .16s;transform:scale(.75)}
.draw-speed-menu button[aria-checked=true] img{opacity:1}
.draw-speed-menu button[aria-checked=true] img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.draw-speed-menu.draw-popover-enter{animation:none}.draw-speed-menu img{transition:none}}
.draw-comments-mask{z-index:438}
.draw-comments-card{display:flex;flex-direction:column;width:520px;max-width:100%;height:640px;max-height:94dvh;padding:18px;border:1px solid var(--line);background:var(--bg);overflow:auto;letter-spacing:0}
.draw-comments-owner{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--sub);font:12px var(--sans);margin-bottom:8px}
#drawCommentsOwner{margin-right:auto;min-width:0;overflow-wrap:anywhere}
#drawCommentsCount{white-space:nowrap}
.draw-comments-list{flex:1 1 0;min-height:100px;overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-right:12px;scrollbar-width:thin;scrollbar-gutter:stable}
.draw-comments-empty{display:flex;align-items:center;justify-content:center;min-height:150px;color:var(--sub);font:12px var(--sans)}
.draw-comment{display:flex;align-items:flex-start;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.draw-comment:last-child{border-bottom:0}
.draw-comment-main{flex:1;min-width:0}
.draw-comment-meta{display:flex;align-items:baseline;justify-content:space-between;gap:5px 12px;flex-wrap:wrap;font:11px/1.6 var(--sans);color:var(--sub);overflow-wrap:anywhere}
.draw-comment-meta>span{color:var(--text);font-size:12px}
.draw-comment p{margin:7px 0 0;font:13px/1.7 var(--serif);white-space:pre-wrap;overflow-wrap:anywhere}
.draw-comments-more{align-self:center;flex-shrink:0;margin-top:8px}
.draw-comment-open{align-self:center;margin-top:12px}
.draw-comments-card button:focus-visible,.draw-comment-compose-card button:focus-visible{outline:1px solid var(--ink)!important;outline-offset:2px}
.draw-comment-compose-mask{position:fixed;inset:0;z-index:442;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(34,34,34,.3);overscroll-behavior:contain}
.draw-comment-compose-mask.show{display:flex}
.draw-comment-compose-card{width:520px;max-width:100%;max-height:90vh;max-height:90dvh;padding:20px;border:1px solid var(--line);background:var(--bg);overflow-y:auto;overscroll-behavior:contain;letter-spacing:0;animation:drawCommentIn .25s var(--ease)}
.draw-comment-subject{display:flex;align-items:center;gap:12px;margin-bottom:18px;min-width:0;color:var(--sub);font:13px/1.6 var(--sans)}
.draw-comment-subject img{width:56px;height:44px;object-fit:contain;flex:none;background:#fff;border:1px solid var(--line)}
.draw-comment-subject span{min-width:0;overflow-wrap:anywhere}
.draw-comment-compose-form{display:flex;flex-direction:column;gap:12px;min-width:0}
.draw-comment-compose-form>.app-field,.draw-comment-compose-form .draw-avatar-field{flex:none}
.draw-comment-compose-form .draw-avatar-field>.app-field{flex:1}
.draw-comment-compose-form>input,.draw-comment-compose-form textarea,.draw-comment-compose-form .draw-avatar-field input{width:100%;min-width:0;padding:12px;border:1px solid var(--line);background:transparent;font:16px/1.6 var(--serif);color:var(--text)}
.draw-comment-compose-form textarea{min-height:128px;max-height:280px;resize:vertical}
.draw-comment-compose-form .draw-submit-row{gap:10px;flex-wrap:wrap;margin-top:0;padding-top:12px;border-top:1px solid var(--line)}
.draw-comment-compose-form .draw-status{margin:0;color:#b4443c;overflow-wrap:anywhere}
.draw-comment-compose-form .draw-status:empty{display:none}
.draw-comment-counter{margin-top:-6px;text-align:right;color:var(--sub);font:11px/1.5 var(--sans);font-variant-numeric:tabular-nums}
@keyframes drawCommentIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.draw-comment-compose-card{animation:none}}
@media(max-width:600px){.draw-comment-compose-mask{padding:10px}.draw-comment-compose-card{padding:16px;max-height:calc(100dvh - 20px)}}
@media(max-width:430px){.draw-setting-row{grid-template-columns:minmax(58px,auto) minmax(0,1fr) 42px;gap:6px}.draw-setting-row output{width:42px}.draw-popover{max-width:calc(100vw - 16px)}}
@media(max-width:600px){.draw-comments-mask{padding:10px}.draw-comments-card{padding:12px;height:680px}}
@media(max-width:600px){.draw-mask,.draw-replay-mask,.draw-token-mask,.draw-submit-mask{padding:10px}.draw-card,.draw-replay-card,.draw-token-card,.draw-submit-card{padding:12px}.draw-fields{flex-direction:column}.draw-token-import-controls{flex-direction:column}.draw-tools{gap:6px}.draw-tool-group+.draw-tool-group{padding-left:6px}.draw-colors{gap:5px}.draw-icon{width:32px;height:32px;flex-basis:32px;padding:6px}.draw-card.is-focus{padding:8px}.draw-size{gap:4px}}
@media(max-width:430px){.draw-tools>.draw-tool-group:first-child{gap:1px}.draw-tools>.draw-size{order:3;flex-basis:100%}.draw-tools>.draw-panel-triggers{padding-left:0;border:0;gap:4px}.draw-selection-tools{gap:2px}.draw-sel-row{gap:8px}.draw-sel-label{flex-basis:26px}.draw-segments button{padding:0 6px}.draw-selection-actions{gap:0}.draw-selection-actions .draw-icon{width:27px;flex-basis:27px}.draw-popover{padding:12px}}
@media(max-width:600px){
  .draw-gallery-actions{gap:6px}
  .draw-gallery-actions .draw-command{padding:6px;min-width:34px;height:34px}
  .draw-gallery-actions .draw-action-label{position:absolute;width:1px;min-width:0;height:1px;overflow:hidden;clip-path:inset(50%)}
}
.draw-help-panel{width:460px}
.draw-help{font:12px/1.8 var(--sans);color:var(--sub)}
.draw-help h4{margin:14px 0 6px;color:var(--ink);font-size:13px}
.draw-help h4:first-child{margin-top:0}
.draw-help p{margin:5px 0}
.draw-help table{width:100%;border-collapse:collapse;margin:6px 0}
.draw-help td{padding:5px 0;border-bottom:1px solid var(--line);vertical-align:top}
.draw-help td:first-child{width:42%;padding-right:10px;color:var(--text)}
.draw-help kbd{display:inline-block;margin:0 2px;padding:0 5px;border:1px solid #d7d7d7;border-bottom-width:2px;border-radius:3px;background:#fff;color:var(--ink);font:11px/1.7 ui-monospace,Consolas,monospace;white-space:nowrap}
@media(max-width:700px),(hover:none) and (pointer:coarse){
  .draw-mask{padding:0;align-items:stretch}
  .draw-card{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;display:flex;flex-direction:column;overflow:hidden;border:0;padding:calc(6px + env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .draw-card .draw-head{margin-bottom:3px;padding-bottom:4px;min-height:38px}
  .draw-card .draw-title{font-size:14px}
  .draw-tools,.draw-card.is-focus .draw-tools{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;overflow-y:hidden;gap:8px;padding:4px 0;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain;scroll-padding-inline:4px}
  .draw-tools>.draw-tool-group:first-child{flex:0 0 auto;flex-wrap:nowrap;gap:3px}
  .draw-tools>.draw-panel-triggers{flex:0 0 auto;flex-wrap:nowrap;gap:5px;border-left:1px solid var(--line);padding-left:8px;margin-left:auto}
  .draw-tools::-webkit-scrollbar{display:none}
  .draw-tools .draw-icon{width:38px;height:38px;flex-basis:38px}
  .draw-card .draw-canvas-wrap,.draw-card:not(.is-focus) .draw-canvas-wrap{flex:1 1 0;min-height:100px;max-height:none;aspect-ratio:auto}
  .draw-card .draw-view-tools{flex-wrap:nowrap;overflow:visible;padding:4px 0;gap:6px;min-height:42px}
  .draw-view-tools>.draw-tool-group{flex:0 0 auto}
  .draw-view-tools>.draw-tool-group:first-child{flex:0 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
  .draw-view-tools>.draw-tool-group:first-child::-webkit-scrollbar{display:none}
  .draw-card>.draw-submit-row{margin-top:3px;gap:8px}
  .draw-card>.draw-submit-row .draw-command{min-height:36px}
  .draw-card.is-focus{padding:calc(4px + env(safe-area-inset-top,0px)) 6px calc(4px + env(safe-area-inset-bottom,0px))}
  .draw-popover,.draw-panel-dock{width:300px;max-width:calc(100vw - 16px)}
  .draw-popover-head{cursor:default;touch-action:pan-y}
  .draw-popover-head .draw-icon{width:34px;height:34px;flex-basis:34px}
  .draw-layer-row .draw-icon{width:32px;height:34px;flex-basis:32px}
  .draw-layer-row{min-height:46px}
  .draw-layer-actions .draw-icon{width:36px;height:36px;flex-basis:36px}
}