/* Clip the slide while keeping the panel surface fully opaque. */
#doodle-editor .brush-palette-window{position:fixed;z-index:39;overflow:visible;pointer-events:none}
#doodle-editor .brush-palette-viewport{position:relative;overflow:hidden;padding:6px 4px 0;pointer-events:none}
#doodle-editor .brush-palette{background:#fff;border:1px solid #e5eaee;border-radius:16px 16px 8px 8px;color:#536574;padding:8px 12px 26px;pointer-events:auto;font-size:11px}
/* A stationary white overlay fades only the inner content, including on scroll.
   Stay inside the border and let all touch/scroll events reach the controls. */
#doodle-editor .brush-palette-viewport::after{content:"";position:absolute;z-index:1;left:5px;right:5px;bottom:1px;height:26px;border-radius:0 0 7px 7px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}
/* Empty rounded silhouette, painted within an expanded, non-interactive layer.
   Its box-shadow paints outside the outline only; content is a separate sibling. */
#doodle-editor .brush-palette-shadow{position:absolute;inset:-34px -36px -40px;pointer-events:none}
#doodle-editor .brush-palette-shadow::before{content:"";position:absolute;inset:40px;border-radius:16px 16px 8px 8px;pointer-events:none;box-shadow:0 -2px 5px -1px rgb(37 60 84 / .07),0 -6px 18px -4px rgb(37 60 84 / .09),0 -12px 36px -8px rgb(37 60 84 / .08)}
/* Direction follows device width, including when focus moves the toolbar. */
@media(min-width:768px){
 #doodle-editor .brush-palette-shadow::before{box-shadow:2px 0 5px -1px rgb(37 60 84 / .07),6px 0 18px -4px rgb(37 60 84 / .09),12px 0 36px -8px rgb(37 60 84 / .08)}
}
#doodle-editor .brush-palette-window.opening .brush-palette-shadow{animation:brush-shadow-open 300ms ease-out both}
#doodle-editor .brush-palette-window.closing .brush-palette-shadow{animation:brush-shadow-close 200ms ease-out both}
@keyframes brush-shadow-open{from{opacity:0}to{opacity:1}}
@keyframes brush-shadow-close{from{opacity:1}to{opacity:0}}
#doodle-editor .brush-palette-heading{display:flex;align-items:center;justify-content:space-between;height:20px;margin-bottom:3px}
#doodle-editor .brush-palette-heading strong{font-size:11px;font-weight:600;color:#83929f}
#doodle-editor .brush-palette-close{display:grid;place-items:center;width:32px;height:32px;padding:0;font-size:20px;color:#9aa5ad;touch-action:manipulation}
#doodle-editor .brush-palette-controls{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(130px,1.2fr);gap:14px;align-items:start}
#doodle-editor .brush-palette-width{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1px;margin:0}
#doodle-editor .brush-palette-width output{font-size:10px;font-variant-numeric:tabular-nums;color:#83929f}
#doodle-editor .brush-palette-width input{grid-column:1/-1;width:100%;height:40px;margin:0;accent-color:#7b9eb3;touch-action:none}
#doodle-editor .brush-palette-angle{display:flex;align-items:center;justify-content:space-between;gap:2px;font-size:10px}
#doodle-editor .brush-palette-color{display:grid;gap:4px}
#doodle-editor .brush-palette-color>span{display:flex;align-items:center;gap:7px;line-height:14px}
#doodle-editor .brush-palette-color-preview{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px #e5eaee}
#doodle-editor .brush-palette .brush-sv{position:relative;width:100%;height:84px;margin:0;border:0;border-radius:8px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);touch-action:none;cursor:crosshair}
#doodle-editor .brush-palette .brush-sv span{position:absolute;width:10px;height:10px;margin:-5px;transform:none;border:2px solid #fff;border-radius:50%;box-shadow:0 0 2px #263a4990;pointer-events:none}
#doodle-editor .brush-palette .brush-hue{display:block;appearance:none;-webkit-appearance:none;width:100%;height:24px;margin:-4px 0 0;background:transparent;touch-action:none;cursor:pointer}
#doodle-editor .brush-palette .brush-hue::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
#doodle-editor .brush-palette .brush-hue::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
#doodle-editor .brush-palette .brush-hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;border:2px solid #fff;border-radius:50%;background:#536574;box-shadow:0 0 0 1px #e5eaee}
#doodle-editor .brush-palette .brush-hue::-moz-range-thumb{width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#536574;box-shadow:0 0 0 1px #e5eaee}
#doodle-editor .brush-palette-pressure{display:block;margin-top:4px;font-size:9px;line-height:12px;font-weight:400;color:#a4adb4}
#doodle-editor .brush-palette-window.opening .brush-palette{animation:brush-palette-open 300ms both}
#doodle-editor .brush-palette-window.closing{pointer-events:none}
#doodle-editor .brush-palette-window.closing .brush-palette{pointer-events:none;animation:brush-palette-close 200ms cubic-bezier(.2,.6,.4,1) both}
@keyframes brush-palette-open{0%{transform:translateY(100%);animation-timing-function:cubic-bezier(.16,.8,.3,1)}72%{transform:translateY(-5px);animation-timing-function:ease-out}100%{transform:translateY(0)}}
@keyframes brush-palette-close{from{transform:translateY(0)}to{transform:translateY(100%)}}
#doodle-editor .brush-palette-window.desktop-palette .brush-palette{padding-left:22px}
/* Desktop panels keep their existing rounded edges without a content fade. */
@media(min-width:821px){
 #doodle-editor .brush-palette-viewport::after{display:none}
}
#doodle-editor .brush-palette-utility{display:grid;gap:6px;padding-top:4px}
#doodle-editor .brush-palette-description{margin:0;font-size:11px;line-height:1.6;color:#83929f}
#doodle-editor .brush-palette-options{display:grid;gap:4px;padding-top:4px}
#doodle-editor .brush-palette-options .menu-option{min-height:44px;padding:8px 10px;border-radius:8px;touch-action:manipulation}
#doodle-editor .brush-palette-options .menu-option span{min-width:0;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){#doodle-editor .brush-palette-window.opening .brush-palette,#doodle-editor .brush-palette-window.opening .brush-palette-shadow{animation:none}#doodle-editor .brush-palette-window.closing .brush-palette,#doodle-editor .brush-palette-window.closing .brush-palette-shadow{animation-duration:1ms}}
#doodle-editor .calligraphy-palette .brush-palette{max-height:calc(100dvh - 155px);overflow-y:auto;overscroll-behavior:contain}
#doodle-editor .calligraphy-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding-top:10px}
#doodle-editor .calligraphy-options fieldset{grid-column:1/-1;min-width:0;border:0;padding:0;margin:0}
#doodle-editor .calligraphy-options legend{font-size:11px;margin-bottom:7px}
#doodle-editor .calligraphy-caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
#doodle-editor .calligraphy-caps button{min-height:36px;padding:3px;background:#f7f6f8;border:1px solid transparent;border-radius:7px;font-size:11px}
#doodle-editor .calligraphy-caps button[aria-pressed=true]{background:#edf5f8;border-color:#83a9bd;color:#4186ae}
#doodle-editor .calligraphy-pressure{display:flex;gap:5px;align-items:center;font-size:10px}
#doodle-editor .calligraphy-preview{grid-column:1/-1;display:block;width:100%;height:auto;background:#fafbf9;border:1px solid #e6eaee;border-radius:9px}
@media(min-width:821px){
 #doodle-editor:not(.focus-mode) .brush-palette-window .brush-palette{max-height:calc(var(--doodle-viewport-height,100dvh) - 24px);overflow-y:auto;overscroll-behavior:contain}
}