/* ColorDi studio, "cozy paper": a desk with a sheet on it. Drawing tools are illustrated objects
   tucked into the left screen edge, glass panels float around the sheet.
   Uses the tokens from index.html (--paper --desk --card --ink --mut --line --shadow --coral --sun --logo --body --grain). */
#studio{position:fixed;inset:0;z-index:6;display:block;visibility:hidden;opacity:0;transform:scale(1.025);background:var(--desk);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Rounded",system-ui,var(--body),sans-serif;
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,1,.3,1),visibility 0s .5s}
#studio.show{visibility:visible;opacity:1;transform:none;transition-delay:0s}
/* floating panels fade and spring in from the edge they belong to */
.st-pop{visibility:hidden;opacity:0;scale:.9;pointer-events:none;transition:opacity .2s ease,scale .3s cubic-bezier(.2,1.3,.4,1),visibility 0s .3s}
.st-pop.show{visibility:visible;opacity:1;scale:1;pointer-events:auto;transition-delay:0s}
.st-brush{position:absolute;left:146px;top:50%;transform:translateY(-50%);padding:10px;transform-origin:left center}
#stBrows{display:flex;gap:6px}
.st-colors{transform-origin:center bottom}
.st-surf{transform-origin:right top}
#studio button{font:inherit;color:inherit;cursor:pointer}
.st-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;background:radial-gradient(90% 80% at 50% 25%,#f6ecda,#e6d9c2 85%)}
.st-stage::after{content:"";position:absolute;inset:0;background-image:var(--grain);mix-blend-mode:multiply;opacity:.8;pointer-events:none}
.st-board{position:absolute;left:0;top:0;width:2048px;height:1536px;transform-origin:0 0;background:#fff;box-shadow:0 20px 60px rgba(59,47,74,.3),0 0 0 1px rgba(59,47,74,.08);will-change:transform;z-index:1}
.st-board canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
#stLive,#stGrain{pointer-events:none}
#stGrain{mix-blend-mode:multiply}

.st-pill,.st-card,.st-rb{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(28px);-webkit-backdrop-filter:saturate(180%) blur(28px);border:.5px solid rgba(0,0,0,.1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7),0 10px 32px rgba(0,0,0,.14);z-index:3}
.st-pill{border-radius:999px}
.st-card{border-radius:24px}
[hidden]{display:none!important}

.st-rb{position:absolute;top:max(12px,env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0}
.st-actions{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:2px;padding:4px}
.st-ib{width:46px;height:46px;border:0;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .1s}
.st-ib:hover{background:rgba(59,47,74,.07)}
.st-ib:active{transform:scale(.9)}
.st-ib:disabled{opacity:.3;cursor:default}
.st-ib.on{background:var(--sun)}
.st-ib.warn{background:var(--coral);color:#fff}
.st-sep{width:1px;height:24px;background:var(--line);margin:0 4px}
.st-rb svg,.st-ib svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-brow{display:flex;flex-direction:column;align-items:center;gap:6px;width:98px;border:0;background:transparent;border-radius:18px;padding:10px 6px 9px;text-align:center;transition:background .2s ease}
.st-brow:hover{background:rgba(59,47,74,.05)}
.st-brow.on{background:rgba(0,0,0,.07)}
.st-brow span{font-weight:500;font-size:14px}
.st-brow canvas{width:84px;height:34px;flex:none}

.st-side{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:flex;gap:0;padding:10px 5px 8px;border-radius:22px}
.st-vs{display:flex;flex-direction:column;align-items:center;gap:8px;width:30px}
.st-vpv{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex:none}
.st-vpv i{display:block;border-radius:50%;background:var(--ink);transition:width .1s,height .1s}
#stPvOp{width:16px;height:16px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.st-vtrack{position:relative;width:30px;height:118px;touch-action:none;cursor:pointer}
.st-vtrack::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:rgba(0,0,0,.12)}
.st-vfill{position:absolute;left:50%;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:rgba(0,0,0,.5)}
.st-vthumb{position:absolute;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 1px 5px rgba(0,0,0,.22);text-decoration:none}
.st-shelf{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:3;pointer-events:none}
.st-sh{pointer-events:auto;position:relative;width:196px;height:58px;margin-left:-124px;padding:0;border:0;background:none;transition:margin-left .45s cubic-bezier(.3,1.4,.5,1);filter:drop-shadow(2px 5px 5px rgba(59,47,74,.3))}
.st-sh:hover{margin-left:-114px}
.st-sh.on{margin-left:-66px}
.st-sh svg{display:block;width:100%;height:100%;overflow:visible}
/* colour bar: one glass pill, every control is the same 44px round touch target, even rhythm */
.st-bottom{position:absolute;bottom:max(16px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px 10px}
.st-sw{display:flex;align-items:center;gap:4px;max-width:372px;padding:3px 0;overflow-x:auto;scrollbar-width:none}
.st-sw::-webkit-scrollbar{display:none}
.st-sw button{scroll-snap-align:start}
.st-sw button,.st-colwrap .st-ib,.st-color{position:relative;width:44px;height:44px;margin:0;border:0;border-radius:50%;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.3,1.4,.5,1),background-color .2s ease}
.st-sw button{padding:0;background:transparent;box-shadow:none}
.st-sw button::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.22)}
.st-sw button::after{content:"";position:absolute;inset:1px;border-radius:50%;border:2px solid transparent;transition:border-color .2s ease}
.st-sw button.on::after{border-color:rgba(59,47,74,.34)}
.st-sw button.custom{margin-left:8px}
.st-sw button:hover{transform:scale(1.08)}
.st-colwrap{display:flex;align-items:center;gap:4px;flex:none}
.st-colwrap::before{content:"";width:.5px;height:22px;background:rgba(0,0,0,.18);margin:0 6px 0 2px}
.st-colwrap .st-ib{padding:0;background:transparent;color:rgba(0,0,0,.72)}
.st-colwrap .st-ib svg{width:22px;height:22px;stroke-width:1.7}
.st-colwrap .st-ib:hover{background:rgba(0,0,0,.06)}
.st-colwrap .st-ib.on{background:rgba(0,0,0,.1)}
.st-color{padding:0;background:transparent}
.st-color::before{content:"";position:absolute;inset:6px;border-radius:50%;background:conic-gradient(#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#007aff,#5856d6,#af52de,#ff2d55,#ff3b30)}
.st-color:hover{transform:scale(1.08)}
.st-color:active{transform:scale(.94)}
.st-color i{position:absolute;inset:11px;border-radius:50%;border:2px solid #fff;background:var(--ink);transition:background .3s ease}

.st-colors{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 88px);width:min(94vw,280px);padding:14px;display:flex;flex-direction:column;gap:12px;align-items:center}
.st-wheelwrap{position:relative;width:220px;height:220px;touch-action:none}
.st-wheelwrap canvas{display:block;width:220px;height:220px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.st-knob{position:absolute;width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none}
#stV{-webkit-appearance:none;appearance:none;width:100%;height:16px;border-radius:99px;margin:4px 0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2);background:linear-gradient(90deg,#000,#fff)}
#stV::-webkit-slider-runnable-track{height:16px;background:transparent}
#stV::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-6px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.25)}
#stV::-moz-range-track{height:16px;background:transparent}
#stV::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.st-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;width:100%}
.st-grid button{aspect-ratio:1;border-radius:50%;border:2px solid rgba(59,47,74,.16);padding:0}
.st-grid button.on{border-color:var(--ink)}

.st-surf{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:calc(max(12px,env(safe-area-inset-top,0px)) + 66px);width:min(94vw,340px);padding:14px}
.st-surf h3{margin:0 0 10px;font-family:inherit;font-weight:600;font-size:17px;letter-spacing:-.01em}
.st-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.st-stile{border:0;background:none;padding:0;display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:center;font-weight:500;font-size:13px}
.st-stile canvas{width:100%;aspect-ratio:4/3;border-radius:12px;border:3px solid transparent;box-shadow:0 0 0 1px var(--line);background:#fff}
.st-stile.on canvas{border-color:var(--coral)}

.st-loupe{position:absolute;display:none;width:78px;height:78px;border-radius:50%;border:5px solid #fff;box-shadow:0 0 0 2px rgba(59,47,74,.35),0 10px 24px rgba(0,0,0,.3);pointer-events:none;z-index:4;transform:translate(-50%,-135%)}
.st-loupe span{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);background:var(--ink);color:#fff7ec;font:600 11px var(--body);padding:3px 8px;border-radius:99px;white-space:nowrap;letter-spacing:.04em}
.st-toast{position:absolute;left:50%;top:calc(max(12px,env(safe-area-inset-top,0px)) + 66px);transform:translate(-50%,-10px);padding:10px 16px;border-radius:14px;background:var(--ink);color:#fff7ec;font-weight:500;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;z-index:5}
.st-toast.show{opacity:1;transform:translate(-50%,0)}

/* portrait: popovers open above the colour pill */
@media (max-aspect-ratio:1/1){
    .st-brush{left:50%;top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 84px);transform:translateX(-50%)}
  .st-colors{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 84px)}
}

/* palette: add / remove colours */
.st-add{position:relative;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;flex:none;cursor:pointer;overflow:hidden;transition:width .35s cubic-bezier(.3,1.3,.5,1),opacity .25s ease,margin .35s ease,transform .2s ease}
.st-add::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px dashed var(--c,#999);box-sizing:border-box}
.st-add::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat}
.st-add:hover{transform:scale(1.08)}
.st-add.hide{width:0;margin-left:-4px;opacity:0;pointer-events:none}
@keyframes swPop{from{transform:scale(0)}to{transform:none}}
.st-sw button.pop{animation:swPop .5s cubic-bezier(.3,1.5,.5,1)}
/* the wheel grows out of the colour well, spinning into place */
.st-colors.st-pop{scale:.25;transition:opacity .22s ease,scale .5s cubic-bezier(.2,1.35,.4,1),visibility 0s .5s}
.st-colors.st-pop.show{scale:1;transition-delay:0s}
.st-colors.show #stWheel{animation:wheelIn .75s cubic-bezier(.2,1.1,.3,1) both}
@keyframes wheelIn{from{transform:rotate(-150deg) scale(.55);opacity:0}to{transform:none;opacity:1}}
.st-colors.show .st-knob{animation:knobIn .5s ease .3s both}
@keyframes knobIn{from{opacity:0}to{opacity:1}}
.st-color.open{transform:scale(1.12) rotate(180deg)}

/* sound button: slash only when muted */
#stSnd:not(.off) .x{display:none}
#stSnd.off{color:rgba(59,47,74,.5)}

/* layers panel */
.st-layers{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:calc(max(12px,env(safe-area-inset-top,0px)) + 66px);width:min(94vw,320px);padding:12px;transform-origin:right top;display:flex;flex-direction:column;gap:10px}
.st-llist{display:flex;flex-direction:column;gap:4px;max-height:38vh;overflow-y:auto;scrollbar-width:none}
.st-llist::-webkit-scrollbar{display:none}
.st-lrow{display:flex;align-items:center;gap:2px;border-radius:16px;transition:background .2s}
.st-lrow.on{background:rgba(0,0,0,.07)}
.st-lrow.off .st-lsel{opacity:.45}
.st-lsel{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:none;padding:6px;text-align:left;font-weight:500;font-size:15px}
.st-lsel canvas{width:56px;height:42px;border-radius:9px;box-shadow:0 0 0 1px var(--line);flex:none;background:#fff}
.st-lsel small{display:block;font-size:12px;color:var(--mut);font-weight:400;min-height:15px}
.st-leye{width:40px;height:40px}
.st-leye svg{width:20px;height:20px}
.st-lmodes{display:flex;flex-wrap:wrap;gap:6px}
.st-chip{border:0;border-radius:99px;padding:7px 13px;background:rgba(0,0,0,.06);font-size:13px;font-weight:500;transition:background .2s,color .2s}
.st-chip.on{background:var(--ink);color:#fff7ec}
.st-lop{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500}
.st-lop input{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(0,0,0,.14)}
.st-lop input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 1px 5px rgba(0,0,0,.22)}
.st-lbtns{display:flex;justify-content:space-between}
#studio .st-chip.on{color:#fff7ec}
.st-layers{right:calc(max(12px,env(safe-area-inset-right,0px)) + 72px);background:rgba(255,255,255,.9)}

/* colouring page: outline sits above the strokes; the tap-to-fill tool has no size sliders */
#stOutline{pointer-events:none}
#studio.fillmode .st-side{display:none}
#stLock{display:none}
#studio.pagemode #stLock{display:flex}

/* paint by numbers: only the fill tube, numbered colour buttons */
#stNums,#stAuto{pointer-events:none}
#studio.nummode #stLayers,#studio.nummode #stLock,#studio.nummode .st-colwrap{display:none}
.st-sw button.num::before{inset:5px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.22)}
.st-sw button.num span{position:relative;z-index:1;font-weight:600;font-size:16px;pointer-events:none}
.st-sw button.num.done{opacity:.4}
.st-sw button.num.on{transform:scale(1.14)}
.st-sw button.num.on::after{border-color:rgba(59,47,74,.45)}
.st-conf{position:absolute;width:10px;height:15px;border-radius:2px;z-index:7;pointer-events:none}
#studio.nummode .st-sw{max-width:min(92vw,520px)}

/* finale card */
.st-win{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(59,47,74,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s ease}
.st-win.show{opacity:1}
.st-wincard{width:min(92vw,420px);max-height:94vh;overflow:auto;text-align:center;padding:22px 24px 20px;border-radius:30px;background:rgba(255,253,248,.94);border:.5px solid rgba(0,0,0,.1);box-shadow:0 24px 70px rgba(59,47,74,.4);transform:translateY(30px) scale(.86);transition:transform .6s cubic-bezier(.2,1.35,.4,1)}
.st-win.show .st-wincard{transform:none}
.st-winpic{width:72%;margin:0 auto;transform:rotate(-2.5deg);padding:7px 7px 7px;background:#fff;border-radius:6px;box-shadow:0 8px 22px rgba(59,47,74,.25)}
.st-winpic canvas{display:block;width:100%;border-radius:2px}
.st-windots{display:flex;justify-content:center;gap:7px;margin:16px 0 10px}
.st-windots i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2);animation:dotPop .5s cubic-bezier(.3,1.6,.5,1) both}
.st-windots i:nth-child(2){animation-delay:.07s}.st-windots i:nth-child(3){animation-delay:.14s}.st-windots i:nth-child(4){animation-delay:.21s}.st-windots i:nth-child(5){animation-delay:.28s}.st-windots i:nth-child(6){animation-delay:.35s}.st-windots i:nth-child(n+7){animation-delay:.42s}
@keyframes dotPop{from{transform:scale(0)}to{transform:none}}
.st-wincard h2{margin:0 0 8px;font-family:var(--logo);font-weight:500;font-size:30px;line-height:1.15;color:var(--ink)}
.st-wincard p{margin:0 auto;max-width:320px;font-size:16px;line-height:1.5;font-weight:500;color:var(--ink)}
.st-winsig{margin-top:10px;font-size:15px;color:var(--mut);font-weight:500}
.st-winbtns{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.st-winb{border:0;border-radius:999px;padding:13px 22px;background:var(--sun);color:#2b1b00;font-weight:600;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.08);transition:transform .15s}
.st-winb:active{transform:scale(.95)}
#studio .st-winb.ghost{background:rgba(59,47,74,.08);color:var(--ink);box-shadow:none}

/* tool pictures */
.st-timg{display:none;width:100%;height:100%;object-fit:contain}
.st-sh.img svg{display:none}
.st-sh.img .st-timg{display:block}
.st-sh{filter:drop-shadow(2px 4px 4px rgba(59,47,74,.22))}
.st-timg{transform:scale(1.3);transform-origin:94% 50%}