/* A small paint supply readout, outside the canvas and the mobile action dock. */
.paint-brush-hud{position:fixed;z-index:37;left:50%;bottom:64px;transform:translateX(-50%);width:286px;max-width:calc(100vw - 24px);color:#edf2e6;font:11px/1.2 system-ui,sans-serif;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.paint-brush-hud[hidden],.paint-brush-hud [hidden]{display:none!important}
.paint-brush-hud-main{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 7px;background:#122832f2;border:1px solid #86a99b80;border-radius:9px;box-shadow:0 3px 12px #07152155}
.paint-brush-hud-icon{flex:none;width:36px;height:38px;color:#dbdfcf}.paint-brush-hud-color{fill:var(--brush-paint-color,#ef5973);stroke:#f4efdf}
.paint-brush-hud-info{min-width:0;flex:1}.paint-brush-hud-title{display:flex;flex-direction:column;gap:2px;margin-bottom:5px}.paint-brush-hud-title strong{font-size:11px;font-weight:600}.paint-brush-hud-title>span{font-size:9px;color:#b9cfc8;white-space:nowrap}
.paint-brush-hud-gauge{display:flex;align-items:center;gap:5px}.paint-brush-hud-track{display:block;flex:1;height:7px;min-width:40px;overflow:hidden;border-radius:2px;background:#071820;border:1px solid #e0eee229}.paint-brush-hud-track i{display:block;width:100%;height:100%;transform-origin:left center;background:var(--brush-paint-color,#ef5973)}
.paint-brush-hud [data-brush-hud-amount]{font:700 14px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#fff2cd;min-width:3ch;text-align:right}.paint-brush-hud [data-brush-hud-total]{font-size:10px;color:#adc5bc;min-width:4ch;white-space:nowrap;font-variant-numeric:tabular-nums}
.paint-brush-hud button{pointer-events:auto;flex:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer;min-height:34px;padding:6px 9px;border:1px solid #a3c5b875;border-radius:6px;background:#34574f;color:#eaf2de;font:600 11px/1 system-ui,sans-serif}.paint-brush-hud button:hover{background:#476f60;border-color:#d4e6c3}.paint-brush-hud button:focus-visible{outline:2px solid #efd184;outline-offset:2px}.paint-brush-hud [data-brush-hud-hide]{align-self:flex-start;padding:2px;min-height:24px;width:20px;border:0;background:transparent;color:#c3d5c9;font-size:17px;font-weight:400}.paint-brush-hud.is-empty .paint-brush-hud-title>span{color:#eed49c}.paint-brush-hud.is-refilled .paint-brush-hud-title>span{color:#b9e7ab}.paint-brush-hud.is-collapsed{width:auto}.paint-brush-hud .paint-brush-hud-restore{background:#122832ed;border-radius:16px;min-height:30px;font-size:10px;padding:6px 11px}
.paint-brush-hud.is-fullscreen{position:static;transform:none;flex:0 1 286px;max-width:100%;width:286px}.paint-brush-hud.is-fullscreen.is-collapsed{flex:0 0 auto;width:auto}.paint-brush-hud.is-fullscreen .paint-brush-hud-main{box-shadow:none;background:#1a343c;border-color:#6d958466}.paint-focus-footer:has(>.paint-brush-hud){align-items:center;gap:12px;padding-block:5px}.paint-focus-footer:has(>.paint-brush-hud)>span{display:none}.paint-focus-footer:has(>.paint-brush-hud)>output{min-width:0;font-size:10px}
@media(max-width:850px),(pointer:coarse){.paint-brush-hud{bottom:calc(116px + env(safe-area-inset-bottom));width:280px}.paint-brush-hud-main{gap:7px}.paint-brush-hud [data-brush-hud-dip]{min-height:40px;min-width:43px}.paint-brush-hud [data-brush-hud-hide]{min-height:30px;width:23px}.paint-hud-visible.has-creative-dock>.shared-paint:has(>details[open]){bottom:calc(180px + env(safe-area-inset-bottom))}.paint-hud-visible.has-creative-dock>.shared-paint details[open]{max-height:min(60dvh,calc(100dvh - 254px))}.paint-focus-footer:has(>.paint-brush-hud){gap:7px;padding-inline:8px}.paint-brush-hud.is-fullscreen{flex-basis:260px;width:260px}.paint-brush-hud.is-fullscreen .paint-brush-hud-main{gap:5px;padding:4px}.paint-brush-hud.is-fullscreen .paint-brush-hud-icon{width:30px}.paint-brush-hud.is-fullscreen [data-brush-hud-dip]{padding:6px}.paint-focus-footer:has(>.paint-brush-hud)>output{flex:1;text-align:right;font-size:9px}}
@media(max-width:360px){.paint-brush-hud.is-fullscreen{flex-basis:242px;width:242px}.paint-brush-hud.is-fullscreen .paint-brush-hud-track{min-width:28px}.paint-focus-footer:has(>.paint-brush-hud)>output{font-size:8px}.paint-brush-hud.is-fullscreen [data-brush-hud-total]{min-width:3ch}}
@media(prefers-reduced-motion:no-preference){.paint-brush-hud-track i{transition:transform .09s linear}}

.paint-brush-hud [data-brush-hud-rinse]{min-height:38px;white-space:nowrap;padding:6px 8px}.paint-brush-hud-main{max-width:calc(100vw - 20px)}@media(max-width:480px){.paint-brush-hud [data-brush-hud-rinse]{padding-inline:6px;font-size:11px}.paint-brush-hud-main{gap:6px}}