.sketchpad{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#333;-webkit-tap-highlight-color:transparent}.sketchpad[hidden]{display:none}.sketchpad-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#14141447;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:sketchpad-fade .16s ease-out}.sketchpad-sheet{position:relative;width:min(92vw,380px);background:#fdfdfc;border:1px solid #e4e4e0;border-radius:14px;box-shadow:0 18px 48px #0000002e,0 2px 6px #0000000f;display:flex;flex-direction:column;overflow:hidden;animation:sketchpad-rise .22s cubic-bezier(.16,1,.3,1)}@keyframes sketchpad-fade{0%{opacity:0}to{opacity:1}}@keyframes sketchpad-rise{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.sketchpad-backdrop,.sketchpad-sheet{animation-duration:1ms}}.sketchpad-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px 16px;border-bottom:1px solid #efefec}.sketchpad-title{font-weight:600;letter-spacing:.01em}.sketchpad-stage{padding:14px;display:flex;justify-content:center;background:#f6f6f4}.sketchpad-canvas{width:min(78vw,300px);height:min(78vw,300px);border-radius:10px;border:1px solid #e0e0dc;cursor:crosshair;touch-action:none;background-color:#fff;background-image:linear-gradient(45deg,#f0f0ed 25%,transparent 25%,transparent 75%,#f0f0ed 75%),linear-gradient(45deg,#f0f0ed 25%,transparent 25%,transparent 75%,#f0f0ed 75%);background-size:16px 16px;background-position:0 0,8px 8px}.sketchpad-tools{display:flex;align-items:center;gap:14px;padding:12px 16px;flex-wrap:wrap}.sketchpad-colors,.sketchpad-sizes,.sketchpad-ops{display:flex;align-items:center;gap:6px}.sketchpad-ops{margin-left:auto}.swatch{width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:var(--swatch);cursor:pointer;padding:0;box-shadow:0 0 0 1px #00000024;transition:transform .14s cubic-bezier(.16,1,.3,1),box-shadow .14s ease}.swatch.is-active{box-shadow:0 0 0 2px #333;transform:scale(1.12)}.swatch:active{transform:scale(.94)}.size{width:26px;height:26px;border-radius:7px;border:1px solid #e0e0dc;background:#fff;cursor:pointer;display:grid;place-items:center;padding:0;transition:transform .14s cubic-bezier(.16,1,.3,1),border-color .14s ease,background .14s ease}.size span{display:block;border-radius:50%;background:#555}.size.is-active{border-color:#333;background:#f2f2ef}.size:active{transform:scale(.94)}.icon-button{min-width:26px;height:26px;border-radius:7px;border:1px solid #e0e0dc;background:#fff;color:#555;font:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0 6px;transition:transform .14s cubic-bezier(.16,1,.3,1),border-color .14s ease,background .14s ease,color .14s ease}.icon-button.is-active{border-color:#333;background:#333;color:#fff}.icon-button:active{transform:scale(.9)}@media(hover:hover)and (pointer:fine){.swatch:hover{transform:scale(1.12)}.size:hover,.icon-button:hover{border-color:#bdbdb8;background:#f7f7f5}.icon-button.is-active:hover{background:#444}}.sketchpad :focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sketchpad-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 14px;border-top:1px solid #efefec}.sketchpad-hint{color:#9a9a95;font-size:12px}.sketchpad-commit{border:0;border-radius:9px;padding:9px 18px;font:inherit;font-weight:600;color:#fff;background:linear-gradient(180deg,#3f3f3c,#2b2b29);cursor:pointer;white-space:nowrap;transition:transform .14s cubic-bezier(.16,1,.3,1),filter .14s ease}.sketchpad-commit:active:not(:disabled){transform:scale(.96)}@media(hover:hover)and (pointer:fine){.sketchpad-commit:not(:disabled):hover{filter:brightness(1.18)}}.sketchpad-commit:disabled{background:#e6e6e2;color:#a8a8a2;cursor:not-allowed}[data-tip]{position:relative}[data-tip]:after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);left:50%;transform:translate(-50%) translateY(-3px);background:#2b2b29;color:#fff;font-size:11px;line-height:1;padding:5px 7px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:2}@media(hover:hover)and (pointer:fine){[data-tip]:hover:after{opacity:1;transform:translate(-50%) translateY(0)}}[data-tip]:focus-visible:after{opacity:1;transform:translate(-50%) translateY(0)}.sketchpad-commit[data-tip]:after{top:auto;bottom:calc(100% + 7px);transform:translate(-50%) translateY(3px)}@media(hover:hover)and (pointer:fine){.sketchpad-commit[data-tip]:hover:after{transform:translate(-50%) translateY(0)}}.sketchpad-foot:hover .sketchpad-commit:disabled:after{opacity:1;transform:translate(-50%) translateY(0)}