.studio{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.studio [hidden]{display:none!important}.paper{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}@media (hover:hover) and (pointer:fine){.paper{cursor:none}}.brush-ring{z-index:3;pointer-events:none;--r:24px;--c:var(--ink);width:0;height:0;position:fixed;top:0;left:0}.brush-ring[hidden]{display:none}.brush-ring:before{content:"";left:calc(-1 * var(--r));top:calc(-1 * var(--r));width:calc(2 * var(--r));height:calc(2 * var(--r));border:1.6px solid var(--c);border-radius:50% 47% 52% 49%/48% 52% 47% 51%;transition:transform .14s,border-color .2s;position:absolute;box-shadow:0 0 0 1px #ffffff80,inset 0 0 0 1px #ffffff59}.brush-ring:after{content:"";background:var(--c);border-radius:50%;width:3px;height:3px;position:absolute;top:-1.5px;left:-1.5px;box-shadow:0 0 0 1px #fff9}.brush-ring.is-down:before{transform:scale(.9)}.brush-ring[data-tool=water]:before{border-style:dashed}.brush-ring[data-tool=lift]:before{border-style:dotted;border-width:2px}.studio-top{pointer-events:none;z-index:5;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px;display:flex;position:fixed;top:0;left:0;right:0}.studio-top>*{pointer-events:auto}.studio-actions{align-items:center;gap:10px;display:flex}.studio-history{gap:6px;display:flex}.to-generator{color:inherit;text-decoration:none}.app[data-sheet=open] #sheetToggle{background:var(--ink);color:var(--paper-solid)}.studio-hint{left:50%;bottom:calc(104px + env(safe-area-inset-bottom,0px));z-index:4;background:var(--paper-card) var(--grain);max-width:calc(100vw - 32px);font:italic 400 18px/1.25 var(--serif);color:var(--ink-2);text-align:center;pointer-events:none;border-radius:16px 13px 17px 12px/13px 17px 12px 16px;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:0;padding:10px 18px;transition:opacity .5s,transform .5s;animation:.9s cubic-bezier(.2,.8,.2,1) .7s both hint-in;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 14px 30px -18px #261c3280}.studio-hint[hidden]{display:none}.studio-hint b{color:var(--accent);font-weight:400}.studio-hint span+span:before{content:"·";color:var(--ink-3);margin-right:14px;font-style:normal}.studio-hint.is-gone,.app[data-inks=open] .studio-hint,.app[data-sheet=open] .studio-hint{opacity:0;transform:translate(-50%,10px)}@keyframes hint-in{0%{opacity:0;transform:translate(-50%,12px)}}.studio-dock{left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:5;background:var(--paper-card) var(--grain);border-radius:22px 18px 23px 17px/17px 23px 18px 22px;align-items:center;gap:4px;height:62px;padding:0 10px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 18px 40px -22px #261c328c,0 2px 8px #261c3214}.studio-dock[hidden]{display:none}.pans,.tools{align-items:center;gap:2px;display:flex}.dock-rule{background:var(--line);flex:none;width:1px;height:30px;margin:0 6px;transform:rotate(4deg)}.pan{--c:#888;background:0 0;border:0;place-items:center;width:46px;height:52px;padding:0;display:grid;position:relative}.pan i{background:radial-gradient(circle at 34% 30%, color-mix(in oklab, var(--c) 55%, white) 0, transparent 46%), radial-gradient(circle at 60% 70%, color-mix(in oklab, var(--c) 82%, black) 0, var(--c) 62%);border-radius:48% 52% 45% 55%/55% 45% 52% 48%;width:34px;height:34px;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s;display:block;position:relative;box-shadow:inset 0 -4px 8px #00000029,inset 0 2px 5px #ffffff38,0 3px 8px -3px #1e142880}.pan i:after{content:"";border-radius:inherit;background:var(--grain);mix-blend-mode:multiply;opacity:.9;position:absolute;inset:0}.pan:nth-child(2) i{border-radius:55% 45% 50% 50%/46% 54%}.pan:nth-child(3) i{border-radius:46% 54% 56% 44%/52% 48%}.pan:nth-child(4) i{border-radius:52% 48% 44% 56%/48% 56% 44% 52%}.pan:nth-child(5) i{border-radius:50% 50% 54% 46%/56% 44%}.pan:hover i{transform:rotate(-6deg)scale(1.06)}.pan[aria-checked=true] i{transform:translateY(-5px)scale(1.14)rotate(-4deg);box-shadow:inset 0 -4px 8px #00000029,inset 0 2px 5px #ffffff38,0 10px 16px -8px #1e142899}.pan[aria-checked=true]:after{content:"";background:var(--c);border-radius:3px 2px;width:16px;height:3px;position:absolute;bottom:3px;left:50%;transform:translate(-50%)rotate(-3deg)}.tool{width:44px;height:44px;color:var(--ink-2);background:0 0;border:0;border-radius:14px 11px 15px 12px/12px 15px 11px 14px;place-items:center;padding:0;transition:background .2s,color .2s,transform .2s;display:grid}.tool:hover{color:var(--ink);transform:rotate(-4deg)}.tool[aria-checked=true]{background:var(--ink);color:var(--paper-solid);transform:none}.tool.size i{width:var(--dot,14px);height:var(--dot,14px);background:var(--ink-2);border-radius:48% 52% 50% 50%/52% 48%;transition:width .2s,height .2s;display:block}.tool.size:hover i{background:var(--ink)}.ink-btn{background:0 0;border:0;border-radius:13px 10px 14px 11px/11px 14px 10px 13px;place-items:center;width:40px;height:50px;margin-right:4px;padding:0;transition:background .2s;display:grid}.ink-btn:hover,.app[data-inks=open] .ink-btn{background:#26212e12}.ink-jars{align-items:flex-end;gap:2px;height:34px;display:flex}.jar{opacity:.5;border-radius:4px 5px 3px 6px/6px 4px 5px 3px;width:9px;height:25px;transition:height .25s cubic-bezier(.3,1.5,.5,1),opacity .2s,transform .2s;display:block;box-shadow:inset 0 0 0 1px #0000001f,0 2px 5px -2px #1e142880}.jar:only-child{width:14px}.jar[data-on=true]{opacity:1;height:34px}.ink-btn:hover .jar[data-on=true]{transform:rotate(-5deg)}.studio-sheet,.ink-pop{z-index:6;background:var(--paper-card) var(--grain);border-radius:18px 22px 17px 23px/23px 17px 22px 18px;display:flex;position:fixed;box-shadow:0 30px 60px -30px #261c3273,0 2px 8px #261c3214}.studio-sheet:before,.ink-pop:before{content:"";border:1.3px solid var(--line-strong);border-radius:inherit;filter:url(#rough);pointer-events:none;transition:opacity .2s;position:absolute;inset:0}.ink-pop{left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));width:min(440px,100vw - 32px);max-height:calc(100dvh - 200px);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s,background-color .2s,box-shadow .2s,visibility;transform:translate(-50%)}.app[data-inks=closed] .ink-pop{opacity:0;visibility:hidden;pointer-events:none;transition:transform .3s,opacity .2s,visibility 0s .3s;transform:translate(-50%,14px)}.ink-row{flex-wrap:wrap;gap:8px;margin:6px 0 2px;display:flex}.ink-card{box-shadow:0 0 0 1px var(--line);color:var(--ink-2);background:0 0;border:0;border-radius:12px 10px 13px 9px/10px 13px 9px 12px;justify-items:start;gap:6px;padding:7px 8px 6px;font-size:11.5px;transition:box-shadow .15s,transform .2s,color .15s;display:grid}.ink-card:hover{color:var(--ink);transform:rotate(-1deg)}.ink-card[aria-checked=true]{box-shadow:0 0 0 2px var(--ink);color:var(--ink)}.ink-swatch{border-radius:6px 8px 5px 9px/8px 5px 9px 6px;width:104px;height:22px;display:flex;overflow:hidden}.ink-swatch i{flex:1}.ink-add{min-width:120px;box-shadow:none;outline:1px dashed var(--line-strong);outline-offset:-1px;align-content:center;justify-items:center}.ink-plus{font:400 26px/.8 var(--serif);color:var(--accent)}.ink-pop .library{margin-top:10px}input.hue-range[type=range]{height:26px}input.hue-range[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#cc5a82,#cd632d,#a58100,#5c9932,#009c89,#0095c1,#647ee0,#a867c3,#cb5a84);background:linear-gradient(90deg,lab(54.033% 49.0093 .650013),lab(54.8654% 40.479 49.4789),lab(56.167% 8.5904 85.9372),lab(57.5273% -34.3409 45.5662),lab(57.8014% -53.4682 -.350964),lab(56.3636% -27.8162 -38.294),lab(54.4166% 12.0047 -53.6393),lab(53.6684% 38.5733 -38.2773),lab(54.019% 48.9569 -.366843));border-radius:7px 6px 8px;height:12px}input.hue-range[type=range]::-moz-range-track{background:linear-gradient(90deg,#cc5a82,#cd632d,#a58100,#5c9932,#009c89,#0095c1,#647ee0,#a867c3,#cb5a84);background:linear-gradient(90deg,lab(54.033% 49.0093 .650013),lab(54.8654% 40.479 49.4789),lab(56.167% 8.5904 85.9372),lab(57.5273% -34.3409 45.5662),lab(57.8014% -53.4682 -.350964),lab(56.3636% -27.8162 -38.294),lab(54.4166% 12.0047 -53.6393),lab(53.6684% 38.5733 -38.2773),lab(54.019% 48.9569 -.366843));border-radius:7px;height:12px}input.hue-range[type=range]::-moz-range-progress{background:0 0}input.hue-range[type=range]::-webkit-slider-thumb{background:var(--paper-solid);box-shadow:0 0 0 1.5px var(--ink), 0 2px 5px #1e142859;margin-top:-1.5px}input.hue-range[type=range]::-moz-range-thumb{background:var(--paper-solid);box-shadow:0 0 0 1.5px var(--ink)}.studio-sheet{width:340px;max-height:calc(100dvh - 196px);transition:transform .42s cubic-bezier(.7,0,.2,1),opacity .3s,background-color .2s,box-shadow .2s,visibility;top:86px;right:20px}.app[data-sheet=closed] .studio-sheet{opacity:0;visibility:hidden;pointer-events:none;transition:transform .42s cubic-bezier(.7,0,.2,1),opacity .3s,visibility 0s .42s;transform:translate(calc(100% + 40px))}.studio-sheet-inner{overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0;padding:18px 20px 16px;overflow-y:auto}.studio-sheet-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.studio-sheet-head strong{font:400 25px/1 var(--serif);letter-spacing:-.01em}.studio-sheet-head em{color:var(--accent)}.studio-section{border-top:1px dashed var(--line);padding:12px 0 10px}.studio-sheet-head+.studio-section{border-top:0}.studio-section .mini-actions{margin:10px 0 2px}.studio-section .chip .icon{margin-left:-2px}.studio-note{color:var(--ink-3);margin:6px 0 0;font-size:12px}.swatch-strip[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink);transform:rotate(-1.5deg)}.app[data-scrub=true] :is(.studio-sheet,.ink-pop){box-shadow:none;background:0 0}.app[data-scrub=true] :is(.studio-sheet,.ink-pop):before{opacity:0}.app[data-scrub=true] #sliders .ctl:not(.is-scrubbing),.app[data-scrub=true] .studio-top,.app[data-scrub=true] .studio-dock{opacity:0;pointer-events:none;transition:opacity .18s}.app[data-scrub=true] .studio-sheet-inner>:not(:has(.is-scrubbing)){opacity:0;pointer-events:none;transition:opacity .18s}.app[data-scrub=true] .studio-section>:not(:has(.is-scrubbing)):not(.is-scrubbing){opacity:0;pointer-events:none;transition:opacity .18s}.app[data-scrub=true] .studio-section:has(.is-scrubbing){border-color:#0000}.studio-top,.studio-dock,.studio-sheet-inner{transition:opacity .35s}.app[data-painting=true] .studio-top,.app[data-painting=true] .studio-dock,.app[data-painting=true] .studio-sheet,.app[data-painting=true] .ink-pop,.app[data-painting=true] .toast{opacity:.12;pointer-events:none;transition:opacity .2s}.app[data-zen=true] .studio-top,.app[data-zen=true] .studio-dock,.app[data-zen=true] .studio-sheet,.app[data-zen=true] .ink-pop{opacity:0;pointer-events:none}@media (max-width:760px){.studio-top{align-items:center;padding:12px}.studio-actions{gap:8px}.to-generator,#redo{display:none}.studio-actions .btn{justify-content:center;width:38px;height:38px;padding:0}.studio-actions .btn span:last-child{display:none}.studio-actions .icon-btn{width:38px;height:38px}.studio-dock{left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom,0px));justify-content:space-between;gap:2px;height:58px;padding:0 6px;transform:none}.pans,.tools{gap:0}.ink-btn{width:32px;height:46px;margin-right:0}.pan{width:36px}.pan i{width:29px;height:29px}.tool{width:36px;height:40px}.dock-rule{height:26px;margin:0 1px}.app[data-sheet=open] .studio-dock,.app[data-inks=open] .studio-dock{opacity:0;pointer-events:none}.studio-hint{bottom:calc(82px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:1px;padding:10px 18px;font-size:16.5px}.studio-hint span+span:before{content:none}.studio-sheet{top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));border-radius:22px 24px 18px 20px/20px 22px 18px 24px;width:auto;max-height:66dvh}.app[data-sheet=closed] .studio-sheet{transform:translateY(calc(100% + 30px))}.ink-pop{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));border-radius:22px 24px 18px 20px/20px 22px 18px 24px;width:auto;max-height:72dvh;transform:none}.app[data-inks=closed] .ink-pop{transform:translateY(calc(100% + 30px))}.studio-sheet-inner{padding:16px 16px 14px}.ink-swatch{width:84px}.ink-add{min-width:100px}.ink-pop .library{scrollbar-width:none;gap:8px;margin:10px -16px 0;padding:4px 16px 6px;display:flex;overflow-x:auto}.ink-pop .library::-webkit-scrollbar{display:none}.ink-pop .swatch-strip{flex:none;width:116px;height:30px}.toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}@media (max-width:380px){.pan,.tool{width:33px}.pan i{width:27px;height:27px}.ink-btn{width:30px}}
