/* Rangooo "Draw and paint": header button, page section and the full-screen studio. Same look as the rest of the site:
   teal primary pill, grey secondary pills, segmented picker, white cards, #F6F6F2 page. */
.sh-draw{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid #E7E7E1;border-radius:999px;background:#fff;color:#16202C;font:600 14px/1 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;margin-left:auto}
.sh-draw:hover{border-color:#C9CBC3;background:#FAFAF7}
.sh-draw:focus-visible{outline:3px solid #0E5E6F;outline-offset:2px}
.sh-draw svg{color:#145C63;flex-shrink:0}
@media (min-width:961px){.sh-nav ~ .sh-draw{margin-left:0}}
.sh-draw ~ .sh-share{margin-left:0!important}
@media (max-width:1180px) and (min-width:961px){.sh-draw span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.sh-draw{width:40px;padding:0;justify-content:center}}
@media (max-width:560px){.sh-draw span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.sh-draw{width:40px;padding:0;justify-content:center}}

/* page section */
.dp{padding:8px 20px 56px;font-family:Inter,system-ui,sans-serif;color:#16202C}
.dp-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:32px;align-items:center;background:#fff;border:1px solid #E7E7E1;border-radius:22px;padding:30px 32px}
.dp-k{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#B4652A}
.dp h2{margin:0 0 10px;font:500 clamp(24px,3.2vw,32px)/1.2 Fraunces,Georgia,serif;color:#16202C}
.dp p.dp-s{margin:0 0 20px;font-size:16px;line-height:1.55;color:#5A6573;max-width:46ch}
.dp-cta{display:flex;flex-wrap:wrap;gap:10px}
.dp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:999px;background:#145C63;color:#fff;font:600 15px/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 22px rgba(14,94,111,.22);transition:transform .15s,box-shadow .15s}
.dp-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(14,94,111,.28)}
.dp-btn.ghost{background:#F0EEE6;color:#3A4654;box-shadow:none}
.dp-btn.ghost:hover{background:#E8E5DA}
.dp-btn:focus-visible,.dp-prev:focus-visible{outline:3px solid #0E5E6F;outline-offset:3px}
.dp-prev{display:block;width:100%;padding:0;border:1px solid #E7E7E1;border-radius:18px;background:#fff;cursor:pointer;overflow:hidden;box-shadow:0 10px 28px rgba(22,32,44,.1);transition:transform .2s}
.dp-prev:hover{transform:translateY(-3px) rotate(-.6deg)}
.dp-prev img{display:block;width:100%;height:auto;aspect-ratio:3/4}
@media (max-width:760px){.dp{padding:4px 16px 40px}.dp-in{grid-template-columns:1fr;padding:22px 20px;gap:22px}.dp-prev{max-width:240px;margin:0 auto}.dp-cta .dp-btn{flex:1 1 100%}}

/* studio */
html.dpx-lock,html.dpx-lock body{overflow:hidden!important;overscroll-behavior:none}
.dpx{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;background:#F6F6F2;color:#16202C;font:500 15px/1.4 Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.dpx *{box-sizing:border-box}
.dpx button{font-family:inherit}
.dpx button:focus-visible,.dpx input:focus-visible+span{outline:3px solid #0E5E6F;outline-offset:2px}
.dpx-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid #E7E7E1;flex-shrink:0}
.dpx-t{flex:1;min-width:0}
.dpx-t b{display:block;font:500 17px/1.2 Fraunces,Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpx-t small{display:block;margin-top:2px;font-size:12.5px;color:#5A6573;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpx-ib{width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#F0EEE6;color:#3A4654;cursor:pointer;transition:background .15s}
.dpx-ib:hover{background:#E8E5DA}
.dpx-pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:999px;background:#145C63;color:#fff;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 8px 18px rgba(14,94,111,.25)}
.dpx-pill:hover{background:#0F474D}
.dpx-pill.ghost{background:#F0EEE6;color:#3A4654;box-shadow:none;padding:0 16px}
.dpx-pill.ghost:hover{background:#E8E5DA}
.dpx-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px}
.dpx-stage{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;padding:18px;container-type:size}
.dpx-paper{position:relative;width:min(100cqw,calc(100cqh * .75));aspect-ratio:3/4;background:#fff;border:1px solid #E7E7E1;border-radius:18px;box-shadow:0 14px 40px rgba(22,32,44,.14);overflow:hidden;touch-action:none}
.dpx-paper canvas,.dpx-paper img{position:absolute;inset:0;width:100%;height:100%;display:block}
.dpx-paper canvas{touch-action:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 28l1.5-7L21 5.5a2.5 2.5 0 013.5 0l1 1a2.5 2.5 0 010 3.5L10 25.5z' fill='%23F6B10A' stroke='%2316202C' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M4 28l1.5-7 5.5 5.5z' fill='%23E8C9A0' stroke='%2316202C' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M4 28l.9-4.2 3.3 3.3z' fill='%2316202C'/%3E%3C/svg%3E") 4 28,crosshair}
.dpx-paper img{object-fit:contain;pointer-events:none;mix-blend-mode:multiply;user-select:none;-webkit-user-drag:none}
.dpx-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5A6573;font-size:14px;background:#fff;pointer-events:none;transition:opacity .2s}
.dpx-load[hidden]{display:flex;opacity:0}
.dpx-panel{min-height:0;overflow:auto;overscroll-behavior:contain;background:#fff;border-left:1px solid #E7E7E1;padding:18px;display:flex;flex-direction:column;gap:20px}
.dpx-panel h3{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5A6573}
.dpx-sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.dpx-c{position:relative;aspect-ratio:1;min-width:34px;border:2px solid #fff;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(22,32,44,.18);cursor:pointer;padding:0;transition:transform .12s}
.dpx-c:hover{transform:scale(1.08)}
.dpx-c[aria-checked=true]{box-shadow:0 0 0 3px #145C63;transform:scale(1.08)}
.dpx-c.rb{background:conic-gradient(#D7263D,#F28C28,#F6B10A,#2E9E6B,#0E9AA7,#3B4BB8,#A8327A,#D7263D);overflow:hidden}
.dpx-c.rb input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer}
.dpx-seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:#F0EEE6}
.dpx-seg button{flex:1;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:transparent;color:#3A4654;cursor:pointer}
.dpx-seg button[aria-checked=true]{background:#fff;color:#145C63;box-shadow:0 1px 3px rgba(22,32,44,.14)}
.dpx-seg i{display:block;border-radius:50%;background:currentColor}
.dpx-act{display:flex;gap:10px}
.dpx-act .dpx-pill{flex:1;justify-content:center}
.dpx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dpx-pic{display:block;padding:0;border:2px solid #E7E7E1;border-radius:12px;background:#fff;cursor:pointer;overflow:hidden;text-align:center;color:#3A4654;font-size:11.5px;font-weight:600;transition:border-color .15s,transform .15s}
.dpx-pic:hover{transform:translateY(-2px)}
.dpx-pic[aria-checked=true]{border-color:#145C63}
.dpx-pic img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#fff}
.dpx-pic span{display:block;padding:5px 4px 6px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpx-pic.blank{display:flex;flex-direction:column}
.dpx-pic.blank i{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;background:#fff;color:#145C63}
.dpx-more{display:none}
.dpx-scrim{display:none}
.dpx-toast{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);padding:11px 18px;border-radius:999px;background:#16202C;color:#fff;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5;white-space:nowrap}
.dpx-toast.on{opacity:1;transform:translate(-50%,0)}
body.dpx-open .rgs{z-index:2147483600!important}
@media (max-width:900px){
 .dpx-main{display:flex;flex-direction:column}
 .dpx-stage{flex:1;padding:12px}
 .dpx-panel{flex:none;border-left:0;border-top:1px solid #E7E7E1;padding:12px 14px calc(12px + env(safe-area-inset-bottom));gap:10px;overflow:visible}
 html:has(.dk) .dpx-panel{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
 .dpx-toast{bottom:calc(100px + env(safe-area-inset-bottom))}
 .dpx-panel h3{display:none}
 .dpx-sw{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;margin:0 -2px;scrollbar-width:none}
 .dpx-sw::-webkit-scrollbar{display:none}
 .dpx-c{flex:0 0 38px;width:38px;min-width:38px}
 .dpx-tools{display:flex;gap:8px;align-items:center}
 .dpx-tools .dpx-seg{flex:1.4}
 .dpx-tools .dpx-seg button{height:36px}
 .dpx-act{flex:1.3}
 .dpx-act .dpx-pill{padding:0 10px}
 .dpx-act .dpx-pill span{display:none}
 .dpx-more{display:inline-flex}
 .dpx-pics{position:fixed;left:0;right:0;bottom:0;z-index:4;max-height:70dvh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(22,32,44,.22);transform:translateY(105%);transition:transform .25s}
 .dpx-pics h3{display:block}
 .dpx.sheet .dpx-pics{transform:none}
 /* closed sheet is off screen: also take it out of the tab order and the accessibility tree */
 .dpx-pics{visibility:hidden;transition:transform .25s,visibility 0s .25s}
 .dpx.sheet .dpx-pics{visibility:visible;transition-delay:0s}
 .dpx.sheet .dpx-scrim{display:block;position:absolute;inset:0;z-index:3;background:rgba(22,32,44,.45)}
 .dpx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px) and (orientation:landscape) and (max-height:560px){
 .dpx-bar{padding:6px 12px}.dpx-ib,.dpx-pill{height:38px}.dpx-ib{width:38px}
 .dpx-main{display:grid;grid-template-columns:minmax(0,1fr) 300px}
 .dpx-stage{padding:8px}
 .dpx-panel{border-top:0;border-left:1px solid #E7E7E1;overflow:auto;justify-content:center;gap:12px}
 .dpx-sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible}
 .dpx-c{flex:none;width:auto;min-width:0}
 .dpx-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .dpx-pics{left:auto;width:min(520px,100%);right:0;top:0;bottom:0;max-height:none;border-radius:22px 0 0 22px;transform:translateX(105%)}
 .dpx.sheet .dpx-pics{transform:none}
}
@media (prefers-reduced-motion:reduce){.dpx *,.dp *{transition:none!important}}
/* mobile audit: 44px swatches and size buttons; no iOS save/copy callout on the paper */
@media (max-width:900px){
 .dpx-c{flex:0 0 44px;width:44px;min-width:44px}
 .dpx-tools .dpx-seg button{height:44px}
 .dpx-paper{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}
@media (max-width:900px) and (orientation:landscape) and (max-height:560px){
 .dpx-ib,.dpx-pill{height:44px}.dpx-ib{width:44px}
 /* swatches: 4 columns in the 300px panel so each is 44px or more */
 .dpx-sw{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
 .dpx-c{flex:none;width:100%;min-width:44px;max-width:52px;justify-self:center}
}