@keyframes db-pop{0%{transform:scale(.82)}55%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes db-ripple{0%{opacity:.55;transform:translate(-50%,-50%)scale(.1)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}@keyframes db-sheet-in{0%{opacity:0;transform:translateY(10px)scale(.97)}to{opacity:1;transform:none}}@keyframes db-note-in{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.db-root{--db-rail:64px;--db-gap:18px;--db-spring:cubic-bezier(.2, 1.4, .4, 1);height:var(--db-height,100dvh);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-template-rows:auto minmax(0,1fr) auto;width:100%;display:grid;position:relative;overflow:hidden}.db-top{min-width:0;padding:12px 16px 0}.db-stage{min-height:0;margin:14px calc(var(--db-rail) + var(--db-gap) + 16px) 12px;place-items:center;display:grid;position:relative;container-type:size}.db-anchor{--fit:min(100cqw - 22px, (100cqh - 22px) * var(--db-ratio));position:relative}.db-frame{padding:10px;transition:box-shadow .3s,transform .3s}.db-surface{width:var(--fit);aspect-ratio:var(--db-ratio);touch-action:none;cursor:none;contain:layout paint;background:#fff;position:relative}.db-surface[data-tool=FILL]{cursor:crosshair}.db-root[data-locked] .db-surface,.db-root[data-hidden] .db-surface{cursor:default}.db-canvas{image-rendering:auto;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.db-root[data-locked] .db-frame{box-shadow:0 0 0 2px var(--color-line), var(--shadow-soft)}.db-ring{--ring:10px;width:var(--ring);height:var(--ring);margin:calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2);pointer-events:none;opacity:0;transition:opacity .12s ease, width .14s var(--db-spring), height .14s var(--db-spring), margin .14s var(--db-spring);will-change:transform;z-index:3;border:1.5px solid #1d1c22d9;border-radius:999px;position:absolute;top:0;left:0;box-shadow:0 0 0 1px #fffffff2,inset 0 0 0 1px #ffffffb3}.db-ring:after{content:"";background:#1d1c22cc;border-radius:99px;width:2px;height:2px;margin:-1px 0 0 -1px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #fff}.db-ring[data-show=true]{opacity:1}.db-ring[data-mode=erase]{border-style:dashed}.db-ring[data-mode=fill]{--ring:0px;width:0;height:0;box-shadow:none;color:var(--color-ink);border:0;margin:0}.db-ring[data-mode=fill]:after{display:none}.db-ring[data-mode=fill] svg{filter:drop-shadow(0 0 1px #fff)drop-shadow(0 0 1px #fff);position:absolute;top:-24px;left:6px}.db-ripple{background:radial-gradient(circle, var(--c) 0%, color-mix(in srgb, var(--c) 60%, transparent) 40%, transparent 70%);pointer-events:none;z-index:2;border-radius:999px;width:220px;height:220px;animation:.52s cubic-bezier(.2,.8,.3,1) forwards db-ripple;position:absolute}.db-cover{z-index:4;background:radial-gradient(#1d1c2212 1px, transparent 1.6px) 0 0 / 18px 18px, var(--color-paper);opacity:0;visibility:hidden;place-items:center;transition:opacity .42s,visibility 0s linear .42s;display:grid;position:absolute;inset:0}.db-root[data-hidden] .db-cover{opacity:1;visibility:visible;transition:opacity .12s}.db-cover-scribble{opacity:.6;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><path d='M4 26 C 40 6, 70 36, 104 18 S 170 8, 196 22' fill='none' stroke='%23b8a6ff' stroke-width='7' stroke-linecap='round'/></svg>") 50%/contain no-repeat;width:38%;height:12%}.db-note{z-index:5;background:var(--color-ink);color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 24px);animation:db-note-in .26s var(--db-spring) both;pointer-events:none;border-radius:999px;padding:8px 14px;font-size:.84rem;font-weight:600;position:absolute;top:12px;left:50%;overflow:hidden;box-shadow:0 12px 28px -12px #1d1c2299}.db-rail{right:calc(100% + var(--db-gap));width:var(--db-rail);border:1px solid var(--color-line);box-shadow:inset 0 1px 0 #fff, var(--shadow-soft);z-index:6;background:#ffffffeb;border-radius:22px;flex-direction:column;align-items:center;gap:6px;padding:8px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.db-rail-sep{background:var(--color-line);width:28px;height:1px;margin:3px 0}.db-tool{width:48px;height:48px;color:var(--color-ink-2);-webkit-tap-highlight-color:transparent;touch-action:manipulation;isolation:isolate;border-radius:15px;place-items:center;transition:background-color .15s,color .15s,transform .36s cubic-bezier(.34,1.8,.5,1),box-shadow .18s;display:grid;position:relative}@media (hover:hover){.db-tool:hover:not(:disabled){color:var(--color-ink);background:#1d1c220d}}.db-tool:active:not(:disabled){transition-duration:.15s,.15s,80ms,.12s;transform:scale(.88)}.db-tool:disabled{opacity:.32;cursor:not-allowed}.db-tool[aria-pressed=true],.db-size[aria-pressed=true]{color:var(--color-ink);background:linear-gradient(#fff 0%,#f1ecff 48%,#ddd3ff 100%);box-shadow:inset 0 1.5px #fff,inset 0 -2px #5b40e229,0 0 0 1.5px #cdbfff,0 8px 16px -9px #7b61ffbf}.db-tool[aria-pressed=true]:before,.db-size[aria-pressed=true]:before,.db-tray-btn[aria-pressed=true]:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(#fffffff2,#fff0);border-radius:999px;height:44%;position:absolute;top:2px;left:14%;right:14%}.db-tool[aria-pressed=true] .db-tool-icon{animation:db-pop .38s var(--db-spring) both}.db-tool-danger:hover:not(:disabled){background:var(--color-coral-soft);color:var(--color-coral-deep)}.db-tool-icon{place-items:center;display:grid;position:relative}.db-tool-dot{opacity:0;width:10px;height:10px;transition:opacity .15s ease, transform .22s var(--db-spring), background-color .15s ease;border-radius:99px;position:absolute;bottom:-4px;right:-5px;transform:scale(.4);box-shadow:0 0 0 2px #fff,0 0 0 3px #1d1c221f}[aria-pressed=true]>.db-tool-icon>.db-tool-dot{opacity:1;transform:scale(1)}@media (hover:hover){.db-rail [data-tip]:after{content:attr(data-tip);background:var(--color-ink);color:#fff;font-family:var(--font-mono);letter-spacing:.04em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease, transform .16s var(--db-spring);z-index:10;border-radius:9px;padding:5px 9px;font-size:.7rem;font-weight:600;position:absolute;top:50%;left:calc(100% + 12px);transform:translate(-4px,-50%)}.db-rail [data-tip]:hover:after{opacity:1;transition-delay:.35s;transform:translateY(-50%)}}.db-bar{max-width:calc(100% - 32px);margin:0 16px calc(16px + env(safe-area-inset-bottom));border:1px solid var(--color-line);box-shadow:var(--shadow-soft);background:#ffffffeb;border-radius:22px;flex-wrap:wrap;justify-content:center;justify-self:center;align-items:center;gap:6px 10px;padding:6px 10px;transition:opacity .2s;display:flex}.db-palette,.db-sizes{align-items:center;gap:2px;display:flex}.db-bar-sep{background:var(--color-line);width:1px;height:28px}.db-bar-readout{text-align:right;min-width:46px;color:var(--color-mute);padding-right:4px;font-size:.72rem;font-weight:600}.db-root[data-locked] .db-bar,.db-root[data-locked] .db-rail,.db-root[data-locked] .db-tray{opacity:.55}.db-swatch{-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:999px;place-items:center;width:40px;height:40px;display:grid;position:relative}.db-swatch:disabled{cursor:not-allowed}.db-blob{background:radial-gradient(circle at 34% 28%, #ffffff8c 0 14%, transparent 34%), var(--c);width:28px;height:28px;transition:transform .22s var(--db-spring), box-shadow .16s ease, border-radius .3s ease;border-radius:52% 48% 55% 45%/47% 55% 45% 53%;box-shadow:inset 0 -2px 3px #00000024,0 1px 2px #1d1c222e}.db-blob[data-light]{box-shadow:inset 0 0 0 1px var(--color-line), inset 0 -2px 3px #0000000f, 0 1px 2px #1d1c221f}.db-swatch:hover:not(:disabled) .db-blob{transform:scale(1.1)rotate(-6deg)}.db-swatch:active:not(:disabled) .db-blob{transform:scale(.9)}.db-swatch[aria-pressed=true] .db-blob{box-shadow:0 0 0 2.5px #fff, 0 0 0 4.5px var(--color-ink), 0 6px 12px -4px #1d1c2259;border-radius:50%;transform:scale(1.16)}.db-swatch[data-variant=sheet]{width:100%;height:48px}.db-swatch[data-variant=sheet] .db-blob{width:34px;height:34px}.db-size{-webkit-tap-highlight-color:transparent;touch-action:manipulation;isolation:isolate;border-radius:13px;place-items:center;width:42px;height:42px;transition:background-color .15s,transform .34s cubic-bezier(.34,1.8,.5,1),box-shadow .16s;display:grid;position:relative}@media (hover:hover){.db-size:hover:not(:disabled){background:#1d1c220d}}.db-size:active:not(:disabled){transition-duration:.15s,80ms,.12s;transform:scale(.88)}.db-size:disabled{opacity:.35;cursor:not-allowed}.db-size-dot{transition:width .2s var(--db-spring), height .2s var(--db-spring), background-color .15s ease;border-radius:999px;box-shadow:inset 0 0 0 1px #1d1c221f}.db-size-dot[data-eraser]{box-shadow:inset 0 0 0 1.5px var(--color-ink-2);background:#fff;border:1px dashed #0000}.db-size[data-variant=sheet]{border-radius:16px;align-content:center;gap:4px;width:100%;height:72px}.db-size-key{font-family:var(--font-mono);color:var(--color-mute);font-size:.7rem;font-weight:700}.db-tray{display:none}@media (max-width:767px){.db-top{padding:8px 12px 0}.db-stage{margin:10px 12px 8px}.db-rail,.db-bar{display:none}.db-surface{cursor:default}.db-ring{display:none}.db-tray{margin:0 10px calc(10px + env(safe-area-inset-bottom));border:1px solid var(--color-line);box-shadow:0 -2px 10px -6px #1d1c221f, var(--shadow-soft);background:#fffffff2;border-radius:24px;padding:6px;display:block;position:relative}.db-tray-acts{border-bottom:1px solid var(--color-line);align-items:center;gap:4px;margin-bottom:4px;padding:0 2px 4px;display:flex}.db-tray-spacer{flex:1}.db-act{min-height:44px;color:var(--color-ink-2);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .15s ease, transform .16s var(--db-spring);border-radius:14px;align-items:center;gap:6px;padding:0 12px;font-size:.84rem;font-weight:650;display:inline-flex}.db-act:active:not(:disabled){background:#1d1c220f;transform:scale(.94)}.db-act:disabled{opacity:.35}.db-act-danger:active:not(:disabled){background:var(--color-coral-soft);color:var(--color-coral-deep)}.db-tray-tools{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:2px;display:grid}.db-tray-btn{min-height:58px;color:var(--color-ink-2);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .15s ease, color .15s ease, transform .18s var(--db-spring), box-shadow .16s ease;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:3px;display:flex}.db-tray-btn:active:not(:disabled){transition-duration:.15s,.15s,80ms,.12s;transform:scale(.9)}.db-tray-btn:disabled{opacity:.35}.db-tray-btn{isolation:isolate;position:relative}.db-tray-btn[aria-pressed=true],.db-tray-btn[aria-expanded=true]{color:var(--color-ink);background:linear-gradient(#fff 0%,#f1ecff 48%,#ddd3ff 100%);box-shadow:inset 0 1.5px #fff,inset 0 -2px #5b40e229,0 0 0 1.5px #cdbfff,0 8px 16px -10px #7b61ffb3}.db-tray-btn[aria-pressed=true] .db-tool-icon{animation:db-pop .38s var(--db-spring) both}.db-tray-label{letter-spacing:.01em;font-size:.66rem;font-weight:650}.db-tray-blob{border-radius:52% 48% 55% 45%/47% 55% 45% 53%;width:24px;height:24px;transition:background-color .15s;box-shadow:0 0 0 2px #fff,0 0 0 3px #1d1c222e}.db-tray-blob[data-light]{box-shadow:0 0 0 2px #fff,0 0 0 3px #1d1c224d}.db-tray-size{background:var(--color-paper-2);min-width:28px;height:24px;color:var(--color-ink);border-radius:8px;place-items:center;padding:0 4px;font-size:.72rem;font-weight:700;display:grid}.db-sheet{border:1px solid var(--color-line);box-shadow:var(--shadow-float);animation:db-sheet-in .24s var(--db-spring) both;z-index:8;background:#fff;border-radius:22px;padding:10px;position:absolute;bottom:calc(100% + 8px);left:0;right:0}.db-sheet-colors{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;display:grid}.db-sheet-sizes{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}}.db-confirm{text-align:center;padding:26px 22px 22px}.db-confirm-icon{background:var(--color-coral-soft);width:52px;height:52px;color:var(--color-coral-deep);border-radius:18px;place-items:center;margin:0 auto 12px;display:grid;box-shadow:inset 0 0 0 1px #ffd2cc}.db-confirm-title{letter-spacing:-.025em;color:var(--color-ink);font-size:1.5rem;font-weight:800}.db-confirm-body{max-width:30ch;color:var(--color-ink-2);margin:6px auto 0;font-size:.92rem}.db-confirm-actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;display:grid}@media (prefers-reduced-motion:reduce){.db-root *,.db-root :before,.db-root :after{transition-duration:1ms!important;animation-duration:1ms!important}}