:root{--drazzle-panel: rgba(15, 13, 24, .96);--drazzle-panel-raised: rgba(29, 25, 43, .96);--drazzle-border: rgba(255, 255, 255, .13);--drazzle-text: #f5f3ff;--drazzle-muted: #a8a2b8;--drazzle-accent: #9b7cff;--drazzle-accent-strong: #7653f4;--drazzle-focus: #c4b5fd;--drazzle-danger: #ff6b7a;--drazzle-radius: 16px;--drazzle-motion: cubic-bezier(.2, .8, .2, 1)}.drazzle-toolbar,.drazzle-brush-studio,.drazzle-brush-studio-backdrop{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--drazzle-text);-webkit-user-select:none;user-select:none}.drazzle-toolbar{position:fixed;left:50%;bottom:16px;z-index:40;display:flex;flex-direction:column;gap:10px;align-items:center;width:min(96vw,1120px);padding:12px;transform:translate(-50%);border:1px solid var(--drazzle-border);border-radius:var(--drazzle-radius);background:var(--drazzle-panel);box-shadow:0 20px 64px #00000073,inset 0 1px #ffffff0f;-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);animation:drazzle-toolbar-enter .26s var(--drazzle-motion) both}.drazzle-toolbar__brushes,.drazzle-toolbar__lower,.drazzle-toolbar__colors,.drazzle-toolbar__palette,.drazzle-toolbar__actions,.drazzle-toolbar__mobile-row{display:flex;align-items:center;justify-content:center;gap:6px}.drazzle-toolbar__lower{flex-wrap:wrap;gap:12px}.drazzle-toolbar__colors{gap:6px}.drazzle-toolbar__palette{position:relative;gap:7px}.drazzle-toolbar__palette .drazzle-toolbar__colors{display:flex}.drazzle-toolbar__actions{gap:4px}.drazzle-tool-button,.drazzle-studio-button,.drazzle-icon-button,.drazzle-primary-button{min-width:44px;min-height:44px;border:1px solid var(--drazzle-border);border-radius:11px;background:#ffffff0e;color:var(--drazzle-text);font:650 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 11px;transition:transform .14s var(--drazzle-motion),background .14s ease,border-color .14s ease}.drazzle-tool-button:hover,.drazzle-studio-button:hover,.drazzle-icon-button:hover{background:#ffffff1c;transform:translateY(-1px)}.drazzle-tool-button:active,.drazzle-studio-button:active,.drazzle-icon-button:active{transform:translateY(1px) scale(.98)}.drazzle-tool-button[data-active]{border-color:var(--drazzle-accent);background:#8b5cf638;box-shadow:0 0 0 1px #9b7cff40}.drazzle-tool-button:focus-visible,.drazzle-studio-button:focus-visible,.drazzle-icon-button:focus-visible,.drazzle-primary-button:focus-visible,.drazzle-color-swatch:focus-visible,.drazzle-color-plane:focus-visible,.drazzle-field input:focus-visible,.drazzle-field select:focus-visible,.drazzle-palette-button:focus-visible,.drazzle-brush-studio__drag-handle:focus-visible{outline:3px solid var(--drazzle-focus);outline-offset:2px}.drazzle-studio-button{border-color:#9b7cff85;background:linear-gradient(135deg,#8b5cf647,#3b82f629)}.drazzle-studio-button__color{width:20px;height:20px;border:2px solid rgba(255,255,255,.65);border-radius:50%}.drazzle-color-swatch,.drazzle-toolbar__native-color{position:relative;width:44px;height:44px;flex:0 0 44px;border:1px solid rgba(255,255,255,.34);border-radius:50%;cursor:pointer;transition:transform .15s var(--drazzle-motion),box-shadow .15s ease}.drazzle-color-swatch:hover{transform:scale(1.08)}.drazzle-color-swatch[data-active]{box-shadow:0 0 0 2px var(--drazzle-panel),0 0 0 4px #fff;transform:scale(1.08)}.drazzle-toolbar__native-color{display:grid;place-items:center;overflow:hidden;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.drazzle-toolbar__native-color>span{width:25px;height:25px;border:2px solid white;border-radius:50%}.drazzle-toolbar__native-color input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.drazzle-slider{display:grid;grid-template-columns:minmax(112px,.8fr) minmax(90px,1.5fr) minmax(92px,auto);align-items:center;gap:8px;min-height:44px;color:var(--drazzle-muted);font-size:12px}.drazzle-slider--toolbar{grid-template-columns:auto minmax(90px,160px) minmax(92px,auto)}.drazzle-slider__input{width:100%;min-height:32px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.drazzle-slider__input::-webkit-slider-runnable-track{height:7px;border:1px solid var(--drazzle-border);border-radius:999px;background:linear-gradient(to right,var(--drazzle-accent-strong) 0 var(--drazzle-slider-fill),rgba(255,255,255,.12) var(--drazzle-slider-fill) 100%)}.drazzle-slider__input::-webkit-slider-thumb{width:19px;height:19px;margin-top:-7px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:3px solid var(--drazzle-panel);border-radius:50%;background:var(--drazzle-focus);box-shadow:0 0 0 1px var(--drazzle-accent),0 3px 10px #00000073}.drazzle-slider__input::-moz-range-track{height:7px;border:1px solid var(--drazzle-border);border-radius:999px;background:#ffffff1f}.drazzle-slider__input::-moz-range-progress{height:7px;border-radius:999px;background:var(--drazzle-accent-strong)}.drazzle-slider__input::-moz-range-thumb{width:15px;height:15px;border:3px solid var(--drazzle-panel);border-radius:50%;background:var(--drazzle-focus);box-shadow:0 0 0 1px var(--drazzle-accent)}.drazzle-slider__input:focus-visible{outline:3px solid var(--drazzle-focus);outline-offset:3px;border-radius:999px}.drazzle-slider__value{min-width:92px;color:var(--drazzle-text);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}.drazzle-palette-button{width:36px;min-width:36px;height:44px;border:1px solid var(--drazzle-border);border-radius:10px;background:#ffffff0e;color:var(--drazzle-text);font:700 24px/1 Inter,sans-serif;cursor:pointer}.drazzle-palette-button:hover{background:#ffffff1c}.drazzle-palette-name{position:absolute;left:43px;right:43px;top:calc(100% + 3px);color:var(--drazzle-muted);font:650 9px/1 Inter,sans-serif;letter-spacing:.04em;text-align:center;pointer-events:none}.drazzle-mode-select{min-height:44px;display:inline-flex;align-items:center;gap:7px;color:var(--drazzle-muted);font-size:11px}.drazzle-mode-select select{min-height:40px;padding:0 30px 0 10px;border:1px solid var(--drazzle-border);border-radius:10px;background:#00000038;color:var(--drazzle-text);font:650 12px/1 Inter,sans-serif;cursor:pointer}.drazzle-mode-select select:focus-visible{outline:3px solid var(--drazzle-focus);outline-offset:2px}.drazzle-toolbar--narrow{left:0;right:0;bottom:0;width:100%;transform:none;border-radius:16px 16px 0 0;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));animation-name:drazzle-mobile-toolbar-enter}.drazzle-toolbar__mobile-sheet{display:grid;gap:10px;width:100%;max-height:0;overflow:hidden;opacity:0;transition:max-height .24s var(--drazzle-motion),opacity .18s ease}.drazzle-toolbar[data-expanded] .drazzle-toolbar__mobile-sheet{max-height:45vh;opacity:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 0}.drazzle-toolbar__mobile-row{width:100%;justify-content:space-between}.drazzle-toolbar__chevron{display:inline-flex;transition:transform .2s var(--drazzle-motion)}.drazzle-toolbar[data-expanded] .drazzle-toolbar__chevron{transform:rotate(180deg)}.drazzle-brush-studio-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:grid;place-items:center end;padding:18px;background:#04030957;-webkit-backdrop-filter:saturate(82%);backdrop-filter:saturate(82%);animation:drazzle-backdrop-in .18s ease both}.drazzle-brush-studio-backdrop.is-closing{animation:drazzle-backdrop-out .15s ease both}.drazzle-brush-studio{width:clamp(340px,25vw,640px);height:min(88vh,780px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(196,181,253,.24);border-radius:22px;background:var(--drazzle-panel);box-shadow:0 36px 120px #000000b3,inset 0 1px #ffffff14;transform:translate(var(--drazzle-panel-x, 0),var(--drazzle-panel-y, 0));animation:drazzle-studio-in .24s var(--drazzle-motion) both}.is-closing .drazzle-brush-studio{animation:drazzle-studio-out .15s ease both}.drazzle-brush-studio__header,.drazzle-brush-studio__footer{z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;background:var(--drazzle-panel-raised)}.drazzle-brush-studio__header{border-bottom:1px solid var(--drazzle-border)}.drazzle-brush-studio__drag-handle{align-self:stretch;width:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid var(--drazzle-border);border-radius:9px;background:#ffffff0d;cursor:grab;touch-action:none}.drazzle-brush-studio__drag-handle:active{cursor:grabbing}.drazzle-brush-studio__drag-handle>span{display:grid;gap:4px;width:16px}.drazzle-brush-studio__drag-handle i{display:block;height:2px;border-radius:99px;background:var(--drazzle-muted)}.drazzle-brush-studio__footer{border-top:1px solid var(--drazzle-border);color:var(--drazzle-muted);font-size:12px}.drazzle-brush-studio__header h2{margin:2px 0 0;font-size:23px;letter-spacing:-.035em}.drazzle-brush-studio__eyebrow{color:var(--drazzle-accent);font:700 10px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}.drazzle-icon-button{padding:8px}.drazzle-primary-button{min-width:104px;border-color:transparent;background:linear-gradient(135deg,var(--drazzle-accent-strong),#3b82f6);font-size:13px}.drazzle-brush-studio__body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;overflow-y:auto;overscroll-behavior:contain;padding:16px;background:radial-gradient(circle at 10% 0%,rgba(139,92,246,.08),transparent 34%)}.drazzle-brush-studio__section,.drazzle-brush-preview{min-width:0;padding:16px;border:1px solid var(--drazzle-border);border-radius:16px;background:#ffffff09}.drazzle-brush-preview{grid-column:auto;padding-bottom:7px;overflow:hidden}.drazzle-paint-modes,.drazzle-material-families,.drazzle-brush-presets{grid-column:auto}.drazzle-brush-preview__label{display:flex;justify-content:space-between;color:var(--drazzle-muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.drazzle-brush-preview__label output{min-width:70px;text-align:right;color:var(--drazzle-text);font-variant-numeric:tabular-nums}.drazzle-brush-preview svg{width:100%;height:104px;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}.drazzle-brush-studio__section-heading{min-height:54px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.drazzle-brush-studio__section h3{margin:0 0 5px;font-size:15px}.drazzle-brush-studio__section p{margin:0;color:var(--drazzle-muted);font-size:11px;line-height:1.45}.drazzle-color-chip{width:32px;height:32px;flex:0 0 32px;border:2px solid white;border-radius:50%;box-shadow:0 5px 16px #00000040}.drazzle-color-plane{position:relative;height:170px;border:1px solid var(--drazzle-border);border-radius:12px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);touch-action:none;cursor:crosshair}.drazzle-color-plane__cursor{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%);border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #000000bf,0 3px 12px #00000080;pointer-events:none}.drazzle-field{min-height:44px;display:grid;align-items:center;gap:8px;margin-top:3px;color:var(--drazzle-muted);font-size:12px}.drazzle-field--select{grid-template-columns:minmax(112px,.8fr) minmax(0,1.5fr) 68px}.drazzle-field--select select{grid-column:2 / -1}.drazzle-field--hex{grid-template-columns:48px 16px minmax(0,1fr)}.drazzle-field__prefix{color:var(--drazzle-muted);text-align:right}.drazzle-field input[type=text],.drazzle-field input:not([type]),.drazzle-field--hex input,.drazzle-field select,.drazzle-number-field{min-height:40px;border:1px solid var(--drazzle-border);border-radius:9px;background:#00000038;color:var(--drazzle-text);font:600 12px/1 Inter,sans-serif}.drazzle-field--hex input,.drazzle-field select{width:100%;padding:0 10px}.drazzle-number-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-right:8px}.drazzle-number-field input{width:100%;min-width:0;min-height:38px;border:0;outline:0;padding:0 4px 0 8px;background:transparent;color:var(--drazzle-text);font:inherit;text-align:right}.drazzle-number-field span{color:var(--drazzle-muted)}.drazzle-brush-studio input[type=text],.drazzle-brush-studio input[type=number],.drazzle-brush-studio input:not([type]),.drazzle-brush-studio textarea,.drazzle-brush-studio select{-webkit-user-select:text;user-select:text}.drazzle-field--preset-name{grid-template-columns:112px minmax(0,1fr)}.drazzle-field--preset-name input{min-height:40px;width:100%;padding:0 10px;border:1px solid var(--drazzle-border);border-radius:9px;background:#00000038;color:var(--drazzle-text);font:600 12px/1 Inter,sans-serif}.drazzle-preset-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.drazzle-preset-actions button:disabled{opacity:.42;cursor:not-allowed;transform:none}.drazzle-tool-button--danger{color:var(--drazzle-danger)}.drazzle-json-field{display:grid;gap:7px;margin-top:12px;color:var(--drazzle-muted);font-size:11px}.drazzle-json-field textarea{width:100%;min-height:112px;resize:vertical;padding:10px;border:1px solid var(--drazzle-border);border-radius:10px;background:#00000040;color:var(--drazzle-text);font:500 11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace}.drazzle-preset-status{min-height:24px;padding-top:8px;color:var(--drazzle-muted);font-size:10px}.drazzle-section-toggle{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--drazzle-muted);font-size:12px}.drazzle-section-toggle input{width:42px;height:24px;accent-color:var(--drazzle-accent);cursor:pointer}.drazzle-recent-colors{min-height:46px;display:flex;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior:contain;padding:3px}.drazzle-recent-colors .drazzle-color-swatch{width:44px;height:44px;flex-basis:44px}.drazzle-segmented-control{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:4px;border:1px solid var(--drazzle-border);border-radius:12px;background:#00000038}.drazzle-segmented-control button{min-height:44px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--drazzle-muted);font:650 12px/1.15 Inter,sans-serif;cursor:pointer;transition:color .14s ease,background .14s ease,transform .14s var(--drazzle-motion)}.drazzle-segmented-control button:hover{color:var(--drazzle-text);background:#ffffff0f}.drazzle-segmented-control button:active{transform:scale(.98)}.drazzle-segmented-control button[data-active]{color:#fff;border-color:#9b7cff80;background:linear-gradient(135deg,#8b5cf66b,#3b82f638);box-shadow:0 5px 18px #2414524d}.drazzle-segmented-control button:focus-visible{outline:3px solid var(--drazzle-focus);outline-offset:1px}.drazzle-touch-seed{min-height:32px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--drazzle-border);border-radius:999px;color:var(--drazzle-muted);font-size:10px;white-space:nowrap}.drazzle-touch-seed i{width:18px;height:18px;border:2px solid white;border-radius:50%}@keyframes drazzle-toolbar-enter{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@keyframes drazzle-mobile-toolbar-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes drazzle-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes drazzle-backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes drazzle-studio-in{0%{opacity:0;transform:translate(var(--drazzle-panel-x, 0),calc(var(--drazzle-panel-y, 0px) + 18px)) scale(.975)}to{opacity:1;transform:translate(var(--drazzle-panel-x, 0),var(--drazzle-panel-y, 0)) scale(1)}}@keyframes drazzle-studio-out{0%{opacity:1;transform:translate(var(--drazzle-panel-x, 0),var(--drazzle-panel-y, 0)) scale(1)}to{opacity:0;transform:translate(var(--drazzle-panel-x, 0),calc(var(--drazzle-panel-y, 0px) + 8px)) scale(.985)}}@media (max-width: 720px){.drazzle-brush-studio-backdrop{padding:0;align-items:end}.drazzle-brush-studio{width:100%;height:min(94dvh,860px);border-radius:22px 22px 0 0}.drazzle-brush-studio__body{grid-template-columns:minmax(0,1fr);padding:12px}.drazzle-brush-preview,.drazzle-paint-modes,.drazzle-material-families,.drazzle-brush-presets{grid-column:auto}.drazzle-segmented-control{grid-template-columns:repeat(2,minmax(0,1fr))}.drazzle-slider{grid-template-columns:92px minmax(80px,1fr) minmax(86px,auto)}.drazzle-toolbar__brushes,.drazzle-toolbar__colors{overflow-x:auto;justify-content:flex-start;overscroll-behavior:contain;padding:3px}.drazzle-toolbar__palette{width:100%}.drazzle-toolbar__palette .drazzle-toolbar__colors{min-width:0;flex:1}}@media (max-height: 560px){.drazzle-brush-studio{height:calc(100dvh - 12px)}.drazzle-color-plane{height:120px}}@media (prefers-reduced-motion: reduce){.drazzle-toolbar,.drazzle-brush-studio-backdrop,.drazzle-brush-studio,.drazzle-toolbar__mobile-sheet{animation:none;transition-duration:1ms}}
