:is(html:has(.zoo-color-studio),body:has(.zoo-color-studio)){overscroll-behavior:none;height:100%;overflow:hidden}.zoo-color-studio{box-sizing:border-box;height:100dvh;padding:max(8px,env(safe-area-inset-top)) clamp(10px,2vw,28px) max(12px,env(safe-area-inset-bottom));color:#284d36;background:#fbf7ec url(/pilpilon-explore-airy-pattern-v4.webp) 50%/800px;flex-direction:column;font-family:Rubik,Arial,sans-serif;display:flex;overflow:hidden}.zoo-color-studio *{box-sizing:border-box}.zoo-color-header{flex:none;justify-content:space-between;align-items:center;gap:12px;min-height:48px;margin-bottom:8px;display:flex}.zoo-color-header>a{color:#315b45;white-space:nowrap;background:#fff9e9dc;border:1px solid #e4d9bd;border-radius:12px;align-items:center;gap:5px;padding:8px;font-size:14px;font-weight:700;text-decoration:none;display:flex}.zoo-color-header>div{text-align:center;min-width:0}.zoo-color-header>div>span{color:#86642d;font-size:12px}.zoo-color-header h1{text-overflow:ellipsis;white-space:nowrap;margin:1px 0;font-size:clamp(17px,2vw,25px);line-height:1.2;overflow:hidden}.zoo-color-header-mark{text-align:left;width:70px;font-size:30px}.zoo-color-workspace{flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:220px minmax(0,1fr);gap:16px;width:100%;max-width:1400px;min-height:0;margin:0 auto;display:grid}.zoo-color-paper-area{background:#edf0e280;border-radius:16px;grid-area:1/2;min-width:0;min-height:0;position:relative;box-shadow:inset 0 0 0 1px #d8dec6}.zoo-color-paper-frame{justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:absolute;inset:8px}.zoo-color-paper-frame canvas{touch-action:none;cursor:crosshair;background:#fff;border:1px solid #ded6bd;border-radius:3px;width:auto;max-width:100%;height:auto;max-height:100%;display:block;box-shadow:0 4px 18px #5e56361f}.zoo-color-loading{text-align:center;background:#fbf7ecee;border-radius:16px;place-items:center;margin:0;padding:20px;font-weight:700;display:grid;position:absolute;inset:0}.zoo-color-sr{clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.zoo-color-toolbar{z-index:2;background:#fffdf7;border:1px solid #decfa9;border-radius:20px;grid-area:1/1;align-self:center;min-width:0;padding:12px;position:relative;box-shadow:0 4px #e3d7ba}.zoo-color-studio button{cursor:pointer;color:#315b45;touch-action:manipulation;background:#fff;border:1px solid #d5dbc9;border-radius:11px;min-width:0;min-height:42px;padding:5px;font:700 13px Rubik,Arial,sans-serif}.zoo-color-studio button:disabled{opacity:.35;cursor:default}.zoo-color-studio button:focus-visible,.zoo-color-studio input:focus-visible,.zoo-color-header>a:focus-visible{outline-offset:2px;outline:3px solid #d79825}.zoo-color-studio button[aria-pressed=true],.zoo-color-studio button[aria-expanded=true]{background:#e7f2e7;border-color:#427a50;box-shadow:inset 0 0 0 1px #427a50}.zoo-color-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.zoo-color-tools button,.zoo-color-controls button{flex-direction:column;justify-content:center;align-items:center;gap:2px;line-height:1.1;display:flex}.zoo-color-tools button{min-height:58px}.zoo-color-tools button>span:first-child{font-size:23px;line-height:1}.zoo-color-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px;display:grid}.zoo-color-controls button>span:first-child{font-size:22px;line-height:20px}.zoo-color-controls button>span:last-child{font-size:11px}.zoo-color-color-trigger i{border:1px solid #0003;border-radius:50%;width:20px;height:20px;display:block}.zoo-color-studio .zoo-color-save{color:#3e491e;background:#ffe05c;border-color:#e4bf38;box-shadow:0 2px #d6ad2c}.zoo-color-desktop-help{text-align:center;color:#7b806c;margin:14px 0 0;font-size:11px;line-height:1.6}.zoo-color-popover{overscroll-behavior:contain;background:#fffdf7;border:2px solid #d5c49b;border-radius:18px;width:330px;max-width:calc(100vw - 32px);max-height:min(380px,100dvh - 80px);padding:12px;position:absolute;bottom:0;right:calc(100% + 12px);overflow:auto;box-shadow:0 8px 35px #374d3133}.zoo-color-popover-heading{justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:flex}.zoo-color-popover-heading h2{margin:0;font-size:16px}.zoo-color-popover-heading button{min-width:36px;min-height:36px;font-size:16px}.zoo-color-palette{grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;display:grid}.zoo-color-palette button{aspect-ratio:1;border:2px solid #d8dbce;border-radius:50%;width:100%;min-height:0;padding:0}.zoo-color-palette button[aria-pressed=true]{outline-offset:2px;outline:3px solid #284d36}.zoo-color-custom{justify-content:space-between;align-items:center;margin-top:14px;font-size:14px;font-weight:700;display:flex}.zoo-color-custom input{background:#fff;border:1px solid #d5dbc9;border-radius:8px;width:64px;height:40px}.zoo-color-size{font-size:14px;line-height:1.5;display:block}.zoo-color-size input{accent-color:#427a50;touch-action:pan-x;width:100%;height:34px;margin:8px 0;display:block}.zoo-color-size-example{justify-content:center;align-items:center;height:66px;display:flex}.zoo-color-size-example i{border:1px solid #0002;border-radius:50%;display:block}.zoo-color-stickers{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;display:grid}.zoo-color-stickers button{min-height:42px;padding:5px;font-size:25px}.zoo-color-popover p{margin:10px 0 0;font-size:13px;line-height:1.5}.zoo-color-studio .zoo-color-clear{color:#8c3e26;background:#fff2e9;width:100%;display:block}@media (width<=760px){.zoo-color-studio{padding:max(4px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom))}.zoo-color-header{gap:6px;min-height:38px;margin-bottom:4px}.zoo-color-header>a{padding:7px;font-size:12px}.zoo-color-header>div>span{font-size:10px}.zoo-color-header h1{font-size:16px}.zoo-color-header-mark{width:49px;font-size:23px}.zoo-color-workspace{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:6px}.zoo-color-paper-area{border-radius:12px;grid-area:1/1}.zoo-color-paper-frame{inset:3px}.zoo-color-toolbar{box-shadow:none;border-radius:16px;grid-area:2/1;align-self:stretch;padding:7px}.zoo-color-tools{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.zoo-color-tools button{flex-direction:row;gap:4px;min-height:43px;font-size:12px}.zoo-color-tools button>span:first-child{font-size:20px}.zoo-color-controls{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:5px}.zoo-color-controls button{gap:1px;min-height:39px;padding:3px}.zoo-color-controls button>span:first-child{font-size:20px;line-height:18px}.zoo-color-controls button>span:last-child{font-size:10px}.zoo-color-color-trigger i{width:18px;height:18px}.zoo-color-desktop-help{display:none}.zoo-color-popover{width:min(100%,380px);max-height:min(310px,100dvh - 160px);bottom:calc(100% + 8px);right:0}}@media (height<=520px){.zoo-color-header>div>span,.zoo-color-desktop-help{display:none}.zoo-color-header{min-height:30px}.zoo-color-header h1{font-size:16px}.zoo-color-header-mark{font-size:20px}}@media (width<=760px) and (height<=480px){.zoo-color-toolbar{gap:6px;padding:5px;display:flex}.zoo-color-tools{flex:4;gap:3px}.zoo-color-controls{flex:6;gap:3px;margin:0}.zoo-color-tools button{flex-direction:column;gap:2px;min-height:40px;font-size:9px}.zoo-color-tools button>span:first-child{font-size:18px}.zoo-color-controls button{min-height:40px}.zoo-color-controls button>span:last-child{font-size:9px}.zoo-color-popover{max-height:calc(100dvh - 112px)}}@media (width<=360px){.zoo-color-palette{grid-template-columns:repeat(6,minmax(0,1fr))}}