/* Rangooo Rangoli Studio: a white, app-style drawing studio. Desktop shows every tool at once; phones get one tool group at a time with a bottom tab bar. */
.rgl{--ink:#16202C;--muted:#5A6573;--line:#E7E7E1;--acc:#145C63;max-width:1120px;margin:0 auto;padding:8px 20px 48px;color:var(--ink);font-family:Inter,system-ui,sans-serif}
.rgl h1,.rgl h2{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.01em;margin:0}
.rgl .crumb{font-size:13px;color:var(--muted);margin:8px 0 6px}.rgl .crumb a{color:inherit;text-decoration:none}
.rgl-kick{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#B5541B;margin-bottom:8px}
.rgl-head h1{font-size:clamp(30px,4.4vw,52px);line-height:1.06}
.rgl-head p{max-width:60ch;color:#3A4654;line-height:1.55;margin:10px 0 0}
.rgl-app{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;margin-top:20px;align-items:start}
.rgl-stage{position:relative;display:grid;place-items:center;padding:0;background:none}
.rgl-stage canvas{display:block;max-width:100%;border-radius:22px;touch-action:none;cursor:crosshair;background:#fff;box-shadow:0 0 0 1px var(--line),0 16px 44px rgba(22,32,44,.10)}
.rgl-stage canvas.rp-spin{animation:rp-spin 40s linear infinite;pointer-events:none}
@keyframes rp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rgl-stage canvas.rp-spin{animation:none}}
.rgl-side{display:flex;flex-direction:column;gap:12px;min-width:0}

/* quick actions */
.rp-strip{display:grid;grid-template-columns:46px 46px minmax(0,1fr) 46px;gap:8px}
.rp-ib,.rp-go,.rp-btn,.rp-chip,.rp-tile,.rp-tab,.rp-sw{font-family:Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rp-ib{min-height:46px;border:0;border-radius:14px;background:#F0EEE6;color:#3A4654;display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.rp-ib svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rp-ib:disabled{opacity:.38;cursor:default}.rp-ib:not(:disabled):active,.rp-go:active,.rp-btn:active,.rp-tile:active,.rp-chip:active{transform:scale(.96)}
.rp-go{min-height:46px;border:0;border-radius:14px;background:#145C63;color:#fff;font-weight:600;font-size:15px;cursor:pointer;transition:transform .15s}

/* panels */
.rp-panels{display:flex;flex-direction:column;gap:12px}
.rp-panel{padding:14px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.rp-panel h2{font-family:Inter,system-ui,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 10px}
.rp-lab{margin:12px 0 6px;font-size:12px;font-weight:600;color:var(--muted)}.rp-sub{font-weight:400}
.rp-gap{margin-top:12px}
.rp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rp-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;border:1.5px solid var(--line);border-radius:16px;background:#fff;color:#3A4654;font-size:12px;font-weight:500;cursor:pointer;transition:transform .15s,background .15s}
.rp-tile svg{width:24px;height:24px}
.rp-tile[aria-pressed="true"]{background:rgba(20,92,99,.10);border-color:rgba(20,92,99,.5);color:#145C63;font-weight:600}
.rp-chips{display:flex;flex-wrap:wrap;gap:6px}
.rp-chip{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid transparent;background:#F0EEE6;color:#3A4654;font-size:13.5px;font-weight:500;cursor:pointer;transition:transform .15s,background .15s}
.rp-chip[aria-pressed="true"]{background:rgba(20,92,99,.12);border-color:rgba(20,92,99,.45);color:#145C63;font-weight:600}
.rp-sws{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.rp-sw{aspect-ratio:1;min-height:0;width:100%;border-radius:50%;border:1px solid rgba(22,32,44,.16);cursor:pointer;padding:0;position:relative;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.rp-sw::after{content:"";position:absolute;inset:-5px}
.rp-sw[aria-pressed="true"]{transform:scale(1.14);box-shadow:0 0 0 2px #fff,0 0 0 3.5px #145C63}
.rp-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;margin-top:12px}
.rp-rng{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}.rp-rng b{color:var(--ink)}
.rp-rng input{width:100%;accent-color:#145C63;min-height:28px;margin:0}
.rp-cust{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:#3A4654}
.rp-cust input{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.rp-cust input{-webkit-appearance:none;appearance:none;border-radius:50%;overflow:hidden}.rp-cust input::-webkit-color-swatch-wrapper{padding:0}.rp-cust input::-webkit-color-swatch{border:0;border-radius:50%}.rp-cust input::-moz-color-swatch{border:0;border-radius:50%}
#rp-colour .rp-two{grid-template-columns:auto minmax(0,1fr)}
.rp-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rp-btn{min-height:46px;padding:0 12px;border-radius:14px;border:0;background:#F0EEE6;color:#16202C;font-size:14px;font-weight:600;cursor:pointer;transition:transform .15s}
.rp-btn.solid{background:#145C63;color:#fff}
.rp-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rp-th{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.rp-th button:first-child{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}.rp-th img{display:block;width:100%;height:100%;object-fit:cover}
.rp-x{position:absolute;top:2px;right:2px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(22,32,44,.65);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.rp-x::after{content:"";position:absolute;inset:-9px}
.rp-empty{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted)}
.rp-tabs{display:none}
.rp-ib:focus-visible,.rp-go:focus-visible,.rp-btn:focus-visible,.rp-chip:focus-visible,.rp-tile:focus-visible,.rp-tab:focus-visible,.rp-sw:focus-visible,.rp-th button:focus-visible,.rp-x:focus-visible{outline:3px solid #E8590C;outline-offset:2px}

.rgl-more{margin-top:40px}.rgl-more h2{font-size:28px}
.rgl-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.rgl-facts div{padding:16px;border-radius:18px;background:#FFF4E6;border:1px solid #F3DFC4}
.rgl-facts b{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:18px}.rgl-facts p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#4A3A2A}
.rgl-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.rgl-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--acc);font-weight:600;text-decoration:none}
.rgl-toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:2147483647;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:14px;background:#16202C;color:#fff;font-weight:600;font-size:14px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.rgl-toast.on{opacity:1;transform:translate(-50%,0)}
/* the share and community sheets must sit above the full-screen studio */
.rgs,.cm-ov{z-index:2147483647!important}

/* ---- the full-screen studio (studio2 moves .rgl-app to <body>): white, app-like ---- */
html body .rgl-app.s2-studio{background:#fff!important;gap:8px 18px}
html body .rgl-app.s2-studio .rgl-stage{padding:6px;background:none;box-shadow:none;border-radius:0}
@media (min-width:861px){
  html body .rgl-app.s2-studio{grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr)}
  html body .rgl-app.s2-studio .rgl-side{display:flex;flex-direction:column;overflow:auto;min-height:0;padding:2px 4px 12px 0;align-content:normal}
  html body .rgl-app.s2-studio .rp-panel{padding:14px;border:1px solid var(--line);background:#fff}
}

/* ---- phones and small tablets: one tool group at a time, bottom tab bar ---- */
@media (max-width:860px){
  .rgl .crumb,.rgl .rgl-head,.rgl .rgl-head.rm-hero{display:none!important}
  .rgl{padding:4px 14px 0}
  .rgl-app{grid-template-columns:minmax(0,1fr);margin-top:2px;gap:10px}
  .rgl-stage canvas{border-radius:18px}
  .rgl-side{gap:6px}
  .rp-panels{display:block}
  .rp-panel{display:none;padding:10px 2px 8px;border:0;border-radius:0;height:min(300px,38svh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .rp-panel.on{display:block}
  .rp-panel h2{display:none}
  .rp-tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:2px 0 4px}
  .rp-tile{min-height:58px;border-radius:14px}
  .rp-chips{gap:6px}
  .rp-chips .rp-chip{flex:none;min-height:40px}
  #rgsym{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}#rgsym .rp-chip{padding:0}
  .rp-sws{grid-template-columns:repeat(9,minmax(0,1fr));gap:9px}
  .rp-two{margin-top:8px;gap:10px}
  .rp-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0 -14px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid #EEECE4;background:#fff}
  .rp-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;border:0;border-radius:14px;background:none;color:#7B8794;font-size:11px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
  .rp-tab[aria-selected="true"]{background:rgba(20,92,99,.10);color:#145C63;font-weight:600}
  .rgl-more{margin-top:24px;padding-bottom:110px}
  .rgl-facts{grid-template-columns:1fr}
  /* in the studio the stage takes the space left above the panel and tabs */
  html body .rgl-app.s2-studio{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:4px;padding-bottom:0!important}
  html body .rgl-app.s2-studio .rgl-side{padding:0}
  html body .rgl-app.s2-studio .rp-tabs{margin:0 -12px;padding-bottom:max(env(safe-area-inset-bottom,0px),6px)}
  html body .rgl-app.s2-studio .rp-panel{height:min(236px,34svh);padding-top:6px}
  html body .rgl-app.s2-studio .rp-tile{min-height:52px}
  /* the quick actions live in the top bar, so the drawing gets the room */
  html body .rgl-app.s2-studio .s2-title{display:none}
  html body .rgl-app.s2-studio .rp-strip{position:absolute;z-index:3;top:max(env(safe-area-inset-top,0px),8px);right:12px;height:48px;display:flex;align-items:center;gap:6px}
  html body .rgl-app.s2-studio .rp-ib,html body .rgl-app.s2-studio .rp-go{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;flex:none}
  html body .rgl-app.s2-studio .rp-go{font-size:0}
  html body .rgl-app.s2-studio .rp-go::before{content:"\2728";font-size:20px;line-height:1}
  html body .rgl-app.s2-studio .rp-tab{min-height:50px}

  /* ---- app chrome: grey workspace, white canvas, bottom sheet with a tab bar ---- */
  html body .rgl-app.s2-studio{background:#EEF0F3!important;gap:6px;--sheet:#fff}
  html body .rgl-app.s2-studio .s2-bar{min-height:52px;gap:10px;padding:0 0 0 0}
  html body .rgl-app.s2-studio .s2-back{width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;font-size:0;background:#fff;color:#16202C;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 1px 3px rgba(16,24,40,.10);display:grid;place-items:center}
  html body .rgl-app.s2-studio .s2-back span{font-size:28px;line-height:1;margin:0 2px 3px 0}
  html body .rgl-app.s2-studio .s2-title{display:block;flex:1;text-align:left;font:600 16px Inter,system-ui,sans-serif;letter-spacing:-.01em;color:#16202C;white-space:nowrap}
  html body .rgl-app.s2-studio .s2-sp{width:176px}
  html body .rgl-app.s2-studio .rp-strip{height:52px;gap:6px}
  html body .rgl-app.s2-studio .rp-ib,html body .rgl-app.s2-studio .rp-go{width:40px;height:40px;min-height:40px;background:#fff;color:#3A4654;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 1px 3px rgba(16,24,40,.10)}
  html body .rgl-app.s2-studio .rp-go{background:#145C63;box-shadow:0 2px 8px rgba(20,92,99,.35)}
  html body .rgl-app.s2-studio .rp-ib svg{width:20px;height:20px}
  html body .rgl-app.s2-studio .rgl-stage{padding:4px 0 12px}
  html body .rgl-app.s2-studio .rgl-stage canvas{border-radius:22px;box-shadow:0 0 0 1px rgba(16,24,40,.06),0 14px 34px rgba(16,24,40,.14)}
  html body .rgl-app.s2-studio .rgl-side{background:#fff;margin:0 -12px;padding:14px 14px 0;border-radius:24px 24px 0 0;box-shadow:0 -1px 0 rgba(16,24,40,.06),0 -12px 32px rgba(16,24,40,.10)}
  html body .rgl-app.s2-studio .rp-panels{position:relative}
  html body .rgl-app.s2-studio.rp-collapsed .rp-panel,html body .rgl-app.s2-studio.rp-collapsed .rp-panel.on{display:none}
  html body .rgl-app.s2-studio.rp-collapsed .rp-panels{height:0}
  html body .rgl-app.s2-studio.rp-collapsed .rgl-side{padding-top:10px}
  html body .rgl-app.s2-studio .rp-tab#rt-colour::after{content:"";position:absolute;top:7px;left:50%;margin-left:6px;width:10px;height:10px;border-radius:50%;background:var(--cur,#F28C28);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(16,24,40,.15)}
  html body .rgl-app.s2-studio .rp-panel{padding:4px 0 6px}
  html body .rgl-app.s2-studio .rp-tile{background:#F4F5F7;border:1.5px solid transparent;color:#3A4654;font-size:11.5px}
  html body .rgl-app.s2-studio .rp-tile[aria-pressed="true"]{background:rgba(20,92,99,.09);border-color:#145C63;color:#145C63}
  html body .rgl-app.s2-studio .rp-chip{background:#F4F5F7}
  html body .rgl-app.s2-studio .rp-chip[aria-pressed="true"]{background:rgba(20,92,99,.10);border-color:#145C63}
  html body .rgl-app.s2-studio .rp-lab,html body .rgl-app.s2-studio .rp-rng{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6B7684;font-weight:600}
  html body .rgl-app.s2-studio .rp-rng b{letter-spacing:0;text-transform:none;color:#16202C}
  html body .rgl-app.s2-studio .rp-btn{background:#F4F5F7}
  html body .rgl-app.s2-studio .rp-btn.solid{background:#145C63}
  html body .rgl-app.s2-studio .rp-tabs{margin:0 -14px;padding:2px 10px max(env(safe-area-inset-bottom,0px),6px);border-top:1px solid #EEF0F3;background:#fff}
  html body .rgl-app.s2-studio .rp-tab{position:relative;background:none!important;border-radius:12px;color:#8A94A1;font-size:10.5px;letter-spacing:.01em}
  html body .rgl-app.s2-studio .rp-tab[aria-selected="true"]{color:#145C63}
  html body .rgl-app.s2-studio .rp-tab[aria-selected="true"]::before{content:"";position:absolute;top:0;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:0 0 3px 3px;background:#145C63}
  html body .rgl-app.s2-studio .rp-tab svg{stroke-width:2}

  /* ---- clean by default: only the tab dock shows; each tab opens a sheet over the drawing ---- */
  html body .rgl-app.s2-studio .rgl-side{padding:0 14px;border-radius:0;box-shadow:0 -1px 0 rgba(16,24,40,.07)}
  html body .rgl-app.s2-studio .rp-panels{position:relative;height:0}
  html body .rgl-app.s2-studio .rp-panel{position:absolute;z-index:5;left:-14px;right:-14px;bottom:0;height:auto;max-height:min(340px,52svh);padding:0 16px 16px;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -1px 0 rgba(16,24,40,.06),0 -18px 44px rgba(16,24,40,.18);overflow-y:auto}
  html body .rgl-app.s2-studio .rp-panel.on{animation:rpUp .24s cubic-bezier(.2,.8,.2,1)}
  html body .rgl-app.s2-studio.rp-collapsed .rp-panel,html body .rgl-app.s2-studio.rp-collapsed .rp-panel.on{display:none}
  html body .rgl-app.s2-studio.rp-collapsed .rgl-side{padding-top:0}
  html body .rgl-app.s2-studio .rp-tabs{border-top:0;margin:0 -14px}
  html body .rgl-app.s2-studio.rp-collapsed .rp-tab[aria-selected="true"]{color:#8A94A1}
  html body .rgl-app.s2-studio.rp-collapsed .rp-tab[aria-selected="true"]::before{display:none}
  html body .rgl-app.s2-studio .rp-grab{display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:2;width:100%;height:28px;margin:0 0 4px;padding:0;border:0;background:#fff;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
  html body .rgl-app.s2-studio .rp-grab i{display:block;width:38px;height:4px;border-radius:4px;background:#C9CED6}
}
@keyframes rpUp{from{transform:translateY(22px);opacity:0}}
.rp-grab{display:none}

/* ---- phones: same header and bottom bar as the rest of the app (flat icon header, floating dark-glass pill with one open label) ---- */
@media (max-width:860px){
  html body .rgl-app.s2-studio{background:#fff!important}
  html body .rgl-app.s2-studio .s2-back,html body .rgl-app.s2-studio .rp-ib,html body .rgl-app.s2-studio .rp-go{background:transparent!important;box-shadow:none!important;color:#16202C;border:0}
  html body .rgl-app.s2-studio .s2-back{width:44px;height:44px;min-height:44px}
  html body .rgl-app.s2-studio .rp-ib,html body .rgl-app.s2-studio .rp-go{width:44px;height:44px;min-height:44px}
  html body .rgl-app.s2-studio .rp-go::before{font-size:22px}
  html body .rgl-app.s2-studio .rp-ib:disabled{opacity:.3}
  html body .rgl-app.s2-studio .s2-title{font:600 18px Inter,system-ui,sans-serif;letter-spacing:-.01em}
  html body .rgl-app.s2-studio .rgl-stage canvas{box-shadow:0 0 0 1px rgba(16,24,40,.09),0 10px 28px rgba(16,24,40,.10)}
  html body .rgl-app.s2-studio .rgl-side{height:calc(88px + env(safe-area-inset-bottom,0px));padding:0;box-shadow:none;background:transparent;margin:0}
  html body .rgl-app.s2-studio .rp-tabs{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:8;display:flex;align-items:center;gap:2px;margin:0;height:60px;padding:6px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(36,40,46,.84);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 10px 30px rgba(10,15,21,.28)}
  html body .rgl-app.s2-studio .rp-tab{flex:1 1 0;min-width:0;min-height:0;height:48px;flex-direction:row;gap:8px;border-radius:999px;font-size:0;color:rgba(255,255,255,.72);padding:0}
  html body .rgl-app.s2-studio .rp-tab svg{width:24px;height:24px;flex:none}
  html body .rgl-app.s2-studio .rp-tab[aria-selected="true"]{flex:2.4 1 0;background:rgba(255,255,255,.18)!important;color:#fff;font-size:13px;font-weight:600}
  html body .rgl-app.s2-studio .rp-tab[aria-selected="true"]::before{display:none}
  html body .rgl-app.s2-studio.rp-collapsed .rp-tab[aria-selected="true"]{flex:1 1 0;background:transparent!important;font-size:0;color:rgba(255,255,255,.72)}
  html body .rgl-app.s2-studio .rp-tab#rt-colour::after{top:8px;margin-left:8px;box-shadow:0 0 0 2px rgba(36,40,46,.9)}
  html body .rgl-app.s2-studio .rp-panel{max-height:min(340px,48svh)}
}

/* studio header icons: one matching set (24px grid, 2px round strokes), drawn as masks so they take the button colour */
html body .rgl-app.s2-studio .rp-ib svg{display:none}
html body .rgl-app.s2-studio .rp-ib::before,html body .rgl-app.s2-studio .rp-go::before{content:""!important;display:block;width:24px;height:24px;font-size:0;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
html body .rgl-app.s2-studio #rgundo{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h9.5a6.5 6.5 0 010 13H8'/%3E%3C/svg%3E")}
html body .rgl-app.s2-studio #rgredo{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14l5-5-5-5'/%3E%3Cpath d='M20 9h-9.5a6.5 6.5 0 000 13H16'/%3E%3C/svg%3E")}
html body .rgl-app.s2-studio #rgclear{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 7V4h4v3M6 7l1 13h10l1-13M10 11v5M14 11v5'/%3E%3C/svg%3E")}
html body .rgl-app.s2-studio #rgauto{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.8 5.2L18 10l-5.2 1.8L11 17l-1.8-5.2L4 10l5.2-1.8z'/%3E%3Cpath d='M19 16v5M16.5 18.5h5'/%3E%3C/svg%3E")}
@media (min-width:861px){html body .rgl-app.s2-studio #rgauto{color:#fff}}

/* ---- desktop studio: workspace + inspector, like a design app ---- */
@media (min-width:861px){
  html body .rgl-app.s2-studio{background:#EEF0F3!important;grid-template-columns:minmax(0,1fr) 372px;grid-template-rows:auto minmax(0,1fr);gap:8px 22px;padding:max(env(safe-area-inset-top),14px) 22px 20px!important}
  html body .rgl-app.s2-studio .s2-bar{min-height:52px;gap:12px}
  html body .rgl-app.s2-studio .s2-back{width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;font-size:0;background:#fff;color:#16202C;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 1px 3px rgba(16,24,40,.10);display:grid;place-items:center}
  html body .rgl-app.s2-studio .s2-back span{font-size:28px;line-height:1;margin:0 2px 3px 0}
  html body .rgl-app.s2-studio .s2-title{display:block;flex:1;text-align:left;font:600 18px Inter,system-ui,sans-serif;letter-spacing:-.01em;color:#16202C}
  html body .rgl-app.s2-studio .s2-sp{width:0}
  html body .rgl-app.s2-studio .rp-strip{position:absolute;z-index:3;top:max(env(safe-area-inset-top),14px);right:22px;height:52px;display:flex;align-items:center;gap:8px}
  html body .rgl-app.s2-studio .rp-ib,html body .rgl-app.s2-studio .rp-go{width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;flex:none;background:#fff;color:#3A4654;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 1px 3px rgba(16,24,40,.10)}
  html body .rgl-app.s2-studio .rp-go{background:#145C63;color:#fff;font-size:0;box-shadow:0 2px 8px rgba(20,92,99,.35)}
  html body .rgl-app.s2-studio .rp-go::before{content:"\2728";font-size:20px;line-height:1}
  html body .rgl-app.s2-studio .rgl-stage{padding:6px}
  html body .rgl-app.s2-studio .rgl-stage canvas{border-radius:26px;box-shadow:0 0 0 1px rgba(16,24,40,.06),0 18px 44px rgba(16,24,40,.14)}
  html body .rgl-app.s2-studio .rgl-side{background:#fff;border-radius:24px;padding:0;gap:0;box-shadow:0 0 0 1px rgba(16,24,40,.06),0 14px 36px rgba(16,24,40,.10);overflow:hidden;min-height:0;align-self:stretch;display:flex;flex-direction:column;align-items:stretch}
  html body .rgl-app.s2-studio .rp-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));order:-1;gap:2px;padding:8px;border-bottom:1px solid #EEF0F3;background:#fff;margin:0}
  html body .rgl-app.s2-studio .rp-tab{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:56px;padding:6px 0;border:0;border-radius:14px;background:none;color:#7B8794;font:500 11.5px Inter,system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s}
  html body .rgl-app.s2-studio .rp-tab:hover{background:#F4F5F7}
  html body .rgl-app.s2-studio .rp-tab[aria-selected="true"]{background:rgba(20,92,99,.09);color:#145C63;font-weight:600}
  html body .rgl-app.s2-studio .rp-tab#rt-colour{position:relative}
  html body .rgl-app.s2-studio .rp-tab#rt-colour::after{content:"";position:absolute;top:7px;left:50%;margin-left:7px;width:10px;height:10px;border-radius:50%;background:var(--cur,#F28C28);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(16,24,40,.15)}
  html body .rgl-app.s2-studio .rp-panels{display:block;flex:1;min-height:0;overflow-y:auto}
  html body .rgl-app.s2-studio .rp-panel{display:none;border:0;border-radius:0;padding:18px 18px 22px;background:#fff}
  html body .rgl-app.s2-studio .rp-panel.on{display:block;animation:rpFade .2s ease}
  html body .rgl-app.s2-studio .rp-panel h2{margin-bottom:12px}
  html body .rgl-app.s2-studio .rp-tile{background:#F4F5F7;border:1.5px solid transparent}
  html body .rgl-app.s2-studio .rp-tile[aria-pressed="true"]{background:rgba(20,92,99,.09);border-color:#145C63;color:#145C63}
  html body .rgl-app.s2-studio .rp-chip,html body .rgl-app.s2-studio .rp-btn{background:#F4F5F7}
  html body .rgl-app.s2-studio .rp-chip[aria-pressed="true"]{background:rgba(20,92,99,.10);border-color:#145C63}
  html body .rgl-app.s2-studio .rp-btn.solid{background:#145C63}
  .rgl .rgl-head.rm-hero{display:none!important}
}
@keyframes rpFade{from{opacity:0;transform:translateY(6px)}}

@media (max-width:360px){.rp-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.rp-chip{padding:0 11px}}
/* mobile audit: 44px targets for chips and sliders; no iOS save/copy callout or text selection when drawing */
@media (max-width:999px){
.rp-chip,.rp-chips .rp-chip{min-height:44px}
.rp-rng input{min-height:44px}
.rgl-stage canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* swatches: 18 colours in 6 columns (3 rows) so each dot is 44px or more; the panel already scrolls */
.rp-sws{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 4px}
.rp-sw{min-width:44px;max-width:56px;justify-self:center}
.rp-sw::after{inset:-2px}
}
@media (max-width:999px) and (min-width:361px){.rp-sws{column-gap:8px}}
/* phones with the app dock: the studio box already ends where the dock starts, so the tool bar sits inside it (absolute, just above the dock)
   instead of being fixed to the screen bottom underneath the dock; the toast rides above both */
@media (max-width:700px){
  html:has(.dk) body .rgl-app.s2-studio .rgl-side{height:76px}
  html:has(.dk) body .rgl-app.s2-studio .rp-tabs{position:absolute;left:16px;right:16px;bottom:8px}
  html:has(.dk) .rgl-toast{bottom:calc(var(--dock-h) + 84px)}
}