:root{--paper:#f7f3ed;--ink:#51434f;--muted:#968991;--accent:#85668c;--canvas-color:#baa4d0;--app-height:100vh}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0;background:none}button:focus,input:focus{outline:2px solid #a390aa;outline-offset:4px}button:disabled{opacity:.3;cursor:default}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}button:active:not(:disabled){transform:scale(.96)}[hidden]{display:none!important}
.studio{width:100%;max-width:470px;height:100vh;height:var(--app-height,100vh);min-height:660px;max-height:960px;margin:auto;padding:18px 22px 10px;display:flex;flex-direction:column;padding-top:calc(18px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));padding-bottom:calc(10px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}
.header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;margin-bottom:20px}.brand{display:flex;align-items:center}.brand-mark{font-size:40px;line-height:1;margin-right:10px;color:#8b7190;transform:rotate(10deg)}h1{font-size:23px;letter-spacing:2px;margin:0 0 5px;font-weight:650}.brand p{margin:0;font-size:10px;letter-spacing:.7px;color:var(--muted)}.actions{display:flex;align-items:center}.actions>button+button{margin-left:9px}.icon-button{height:40px;width:36px;padding:9px}.actions svg{width:19px;height:19px}.reset-button{background:#eee7ed;border-radius:24px;display:flex;align-items:center;height:38px;padding:0 13px;font-size:12px}.reset-button svg{margin-right:6px;width:16px;height:16px}
.blanket-wrap{flex:1;min-height:220px;position:relative;margin:0 1px 26px;isolation:isolate}.blanket{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:32px;background:var(--canvas-color);overflow:hidden;box-shadow:0 14px 30px -18px rgba(77,42,79,.42),0 3px 7px rgba(88,62,77,.09);touch-action:none}.blanket:after{content:"";pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 2px 6px rgba(255,255,255,.3),inset 0 -6px 16px rgba(56,28,62,.17);border:1px solid rgba(255,255,255,.18)}#fur{display:block;width:100%;height:100%;touch-action:none;cursor:none}.fabric-tag{position:absolute;right:23px;bottom:-9px;z-index:-1;padding:10px 9px 4px;border-radius:0 0 3px 3px;background:#eee5d8;color:#9b8b80;font:6px Georgia,serif;letter-spacing:1px;transform:rotate(-3deg);box-shadow:0 2px 3px rgba(67,37,48,.05)}.hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;font-size:11px;color:#fbf7fd;padding:9px 13px;background:rgba(66,41,72,.28);border:1px solid rgba(255,255,255,.19);border-radius:24px;pointer-events:none;transition:opacity .3s}.hint svg{height:17px;width:17px;margin-right:7px;stroke-width:1.4}.hint.dismissed{opacity:0}.canvas-unavailable{padding:40px;color:white;font-size:14px}
.controls{flex-shrink:0}.tone-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.tone-heading label,.palette-title{font-size:12px;font-weight:550;letter-spacing:.3px}.tone-heading output{background:#ece4ed;color:#806187;border-radius:20px;font-size:10px;padding:4px 10px;min-width:42px;text-align:center}.depth-control{position:relative;height:28px;margin:0 12px}.depth-colors{position:absolute;top:9px;right:0;left:0;height:10px;border-radius:10px;display:flex;overflow:hidden;box-shadow:inset 0 1px 2px rgba(50,30,60,.1)}.depth-colors span{flex:1}.depth-colors span+span{border-left:1px solid rgba(255,255,255,.2)}#depth{position:absolute;left:-12px;top:0;margin:0;width:calc(100% + 24px);height:28px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y}#depth::-webkit-slider-runnable-track{height:10px;background:transparent}#depth::-webkit-slider-thumb{-webkit-appearance:none;width:25px;height:25px;border:4px solid #fffaf5;border-radius:50%;background:var(--selected-tone,#e8cee8);margin-top:-7px;box-shadow:0 2px 5px rgba(53,35,59,.2),0 0 0 1px rgba(95,76,104,.1)}#depth::-moz-range-track{height:10px;background:transparent}#depth::-moz-range-thumb{width:17px;height:17px;border:4px solid #fffaf5;border-radius:50%;background:var(--selected-tone);box-shadow:0 2px 5px rgba(53,35,59,.2)}.depth-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin:4px 0 16px}
.tools{display:flex;padding:5px;background:#eee9e3;border-radius:20px;margin-bottom:18px}.tool{flex:1;min-width:0;position:relative;border-radius:15px;padding:9px 5px 8px;display:flex;flex-direction:column;align-items:center;transition:background .2s,color .2s}.tool+.tool{margin-left:5px}.tool.selected{background:#fffcf8;box-shadow:0 3px 8px rgba(85,58,75,.06);color:#78587e}.tool svg{width:32px;height:32px;margin-bottom:5px}.tool-fill{fill:#d8c7d9;stroke:none}.tool[data-tool="brush"] .tool-fill{fill:#e3cfb9}.tool span{font-size:12px;font-weight:550}.tool small{font-size:9px;margin-top:4px;color:var(--muted)}.palette-row{display:flex;align-items:center;height:40px}.palette-title{margin-right:auto}.palette{display:flex;align-items:center}.swatch{height:34px;width:30px;padding:4px 2px;position:relative;border-radius:50%}.swatch+.swatch{margin-left:3px}.swatch span{width:23px;height:23px;display:block;border-radius:50%;box-shadow:inset 0 1px 2px rgba(255,255,255,.3),inset 0 -2px 3px rgba(38,27,35,.12)}.swatch.selected:after{content:"";position:absolute;top:2px;left:0;width:27px;height:27px;border:1px solid #9d879f;border-radius:50%}.color-name{width:47px;margin-left:11px;color:var(--muted);font-size:10px;text-align:right}footer{font-size:9px;color:#ac9da4;letter-spacing:.7px;text-align:center;margin-top:16px;flex-shrink:0}footer span{margin-left:7px;color:#b19aab}
@media(min-width:600px){body{background:radial-gradient(ellipse at 50% 35%,#fcf9f4,#eee8e2)}.studio{padding:26px 30px 18px;margin-top:18px;height:calc(var(--app-height,100vh) - 36px);max-height:910px;background:var(--paper);border:1px solid rgba(139,113,130,.08);border-radius:36px;box-shadow:0 20px 70px rgba(82,62,75,.05)}.header{margin-bottom:24px}}
@media(max-height:730px) and (max-width:599px){.studio{min-height:590px;padding-top:12px;padding-top:calc(12px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)))}.header{margin-bottom:15px}.blanket-wrap{margin-bottom:19px}.tools{margin-bottom:10px}.tool{padding-top:7px;padding-bottom:7px}.tool svg{height:27px;width:27px}.depth-labels{margin-bottom:11px}footer{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Keep the drawing surface generous, with every action in the top bar. */
.studio{padding:12px 16px 8px;min-height:570px;padding-top:calc(12px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));padding-bottom:calc(8px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}
.header{margin-bottom:12px;min-height:44px}.brand{flex-shrink:0}.brand-mark{font-size:28px;margin-right:6px}h1{font-size:20px;margin:0;letter-spacing:1px}.actions>button+button{margin-left:2px}.action-button{height:44px;min-width:40px;padding:4px 5px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;color:#8c788f}.action-button svg{width:17px;height:17px;margin-bottom:5px}.action-button:active{background:#eee7ed}.fullscreen-tools{display:none}
.blanket-wrap{margin:0 1px 16px}.blanket{border-radius:27px}.controls .tone-heading{margin-bottom:3px}.depth-labels{margin:2px 0 9px}.controls .tools{padding:4px;margin-bottom:8px;border-radius:16px}.controls .tool{flex-direction:row;justify-content:center;height:47px;padding:5px 3px;border-radius:12px}.controls .tool svg{width:26px;height:26px;margin:0 6px 0 0}.controls .tool small{display:none}.controls .tool span{font-size:11px}.palette-row{height:40px;justify-content:space-between}.palette-meta{display:flex;flex-direction:column;flex-shrink:0;margin-right:5px;width:60px}.palette-title{font-size:11px;margin:0}.color-name{font-size:9px;width:auto;margin:5px 0 0;text-align:left}.palette-group{display:flex;align-items:center;min-width:0}.swatch{width:29px;height:36px;padding:6px 3px}.swatch+.swatch{margin-left:2px}.swatch.selected:after{top:3px;left:0;width:27px;height:27px}.custom-swatch{position:relative;width:31px;height:36px;flex-shrink:0;margin-left:5px;display:flex;align-items:center;justify-content:center;cursor:pointer}.custom-swatch>span{height:25px;width:25px;border:1px dashed #aa98af;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;color:#9a82a0;background:#fffaf6}.custom-swatch.selected>span{border-style:solid;border-color:#95809c;box-shadow:0 0 0 3px var(--paper),0 0 0 4px #9d879f;background:var(--custom-color);color:var(--custom-ink,#fff)}.custom-swatch input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.custom-swatch:focus-within{outline:2px solid #a390aa;outline-offset:3px;border-radius:50%}footer{margin-top:9px;font-size:8px}
body.immersive{overflow:hidden}.studio.immersive{position:fixed;top:0;left:0;width:100%;max-width:none;height:var(--app-height,100vh);min-height:0;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:8px 10px;padding-top:calc(8px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));padding-bottom:calc(8px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));z-index:10}.studio.immersive .brand,.studio.immersive footer,.studio.immersive .fabric-tag{display:none}.studio.immersive .header{margin-bottom:8px}.studio.immersive .actions{width:100%;justify-content:flex-start}.studio.immersive .blanket-wrap{margin:0 0 8px;min-height:0}.studio.immersive .controls{display:block;position:relative;width:100%;max-width:470px;align-self:center;padding:8px 10px;background:#f2ecef;border-radius:20px;flex-shrink:0}.studio.immersive .settings-toggle{display:flex}.studio.immersive .tool-strip{margin-bottom:7px}.studio.immersive .controls.compact .tool-strip{margin-bottom:0}.studio.immersive .controls .tools{background:transparent;padding:0;margin:0}.studio.immersive .controls .tool{height:48px}.studio.immersive .depth-labels{margin-bottom:4px}.studio.immersive .palette-row{height:38px}

.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(51,39,54,.35);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}.save-dialog{width:100%;max-width:370px;max-height:calc(var(--app-height,100vh) - 36px);overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--paper);padding:14px 18px 18px;border-radius:24px;box-shadow:0 16px 60px rgba(42,22,48,.2)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.dialog-heading h2{font-size:16px;letter-spacing:.4px;margin:0;font-weight:550}.close-button{font-size:24px;width:36px;height:36px;border-radius:50%;color:var(--muted)}#saved-preview{display:block;width:auto;height:auto;max-width:100%;max-height:calc(var(--app-height,100vh) - 250px);margin:auto;border-radius:15px;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}.save-dialog p{font-size:11px;line-height:1.7;color:var(--muted);text-align:center;margin:13px 0}.download-button{display:block;width:100%;height:44px;background:#8b7298;color:white;border-radius:15px;font-size:13px}.download-button:disabled{opacity:.5}.dialog-backdrop .close-button:active{background:#eee7ed}
@media(min-width:600px){.studio{padding:18px 22px 12px}.header{margin-bottom:16px}.studio.immersive{padding:12px 18px}.studio.immersive .header{max-width:600px;width:100%;margin:0 auto 10px}}
@media(max-width:350px){.studio{padding-left:13px;padding-right:13px}.brand-mark{font-size:24px;margin-right:4px}h1{font-size:18px}.action-button{min-width:38px;padding-left:4px;padding-right:4px}.actions>button+button{margin-left:0}.palette-meta{width:55px}.swatch{width:28px}.swatch+.swatch{margin-left:1px}.custom-swatch{margin-left:3px}}
.toothpick-fill{fill:#e6cfac;stroke:none}.swatch:first-child span{box-shadow:inset 0 0 0 1px rgba(94,77,94,.11),inset 0 -2px 3px rgba(38,27,35,.08)}.controls .tool svg{margin-right:4px}.controls .tool+.tool{margin-left:3px}
.blanket,.studio.immersive .blanket{overflow:visible;border-radius:0;background:transparent;box-shadow:none}.blanket:after{display:none}#fur{filter:drop-shadow(0 8px 9px rgba(68,43,65,.17))}
.tool-layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;border-radius:18px;z-index:2}.cursor{position:absolute;width:0;height:0;pointer-events:none;opacity:0;transition:opacity 130ms ease-out;--tool-angle:0deg;--tool-flip:1;--fiber-bend:0deg}.cursor.visible{opacity:1}.tool-object{position:absolute;left:-30px;top:-130px;width:120px;height:150px;transform-origin:30px 130px;transform:translateY(-9px) rotate(var(--tool-angle)) scaleX(var(--tool-flip));filter:drop-shadow(3px 8px 4px rgba(65,42,52,.2));transition:transform 110ms cubic-bezier(.2,.7,.3,1),filter 110ms ease-out}.cursor.pressed .tool-object{transform:translateY(0) rotate(var(--tool-angle)) scaleX(var(--tool-flip));filter:drop-shadow(1px 3px 2px rgba(65,42,52,.23))}.cursor-art{position:absolute;left:0;top:0;display:none;width:120px;height:150px;overflow:visible}.cursor.toothpick .art-toothpick,.cursor.finger .art-finger,.cursor.brush .art-brush,.cursor.comb .art-comb{display:block}.tool-contact{position:absolute;left:-14px;top:-8px;width:28px;height:16px;border-radius:50%;opacity:0;transform:scale(.8);background:radial-gradient(ellipse,rgba(82,51,69,.19),rgba(255,255,255,.2) 65%,transparent 74%);transition:opacity 90ms ease-out,transform 110ms ease-out}.cursor.pressed .tool-contact{opacity:1;transform:scale(1)}.cursor.toothpick .tool-contact{width:8px;height:6px;left:-4px;top:-3px}.cursor.brush .tool-contact{width:76px;height:20px;left:-38px;top:-8px}
@media(max-width:350px){.palette-meta{width:49px;margin-right:2px}.swatch{width:27px;padding-left:2px}.swatch.selected:after{width:25px;height:25px;top:4px}.custom-swatch{width:29px;margin-left:2px}.controls .tool svg{height:23px;width:23px;margin-right:3px}.controls .tool span{font-size:10px}}

.cursor.comb .tool-contact{width:48px;height:10px;left:-24px;top:-4px}.tool[data-tool="comb"] .tool-fill{fill:#e4c7ad}

.tone-summary,.size-control{display:flex;align-items:center}.tone-summary output{margin-left:7px}.size-control>span{font-size:10px;color:var(--muted);margin-right:7px}.tool-sizes{display:flex;padding:2px;background:#eee9e3;border-radius:12px}.tool-sizes button{width:34px;height:32px;padding:0;border-radius:10px;font-size:11px;color:var(--muted)}.tool-sizes button.selected{background:#fffcf8;color:#78587e;box-shadow:0 2px 5px rgba(85,58,75,.07)}.cursor{transform:scale(var(--tool-scale,1));transform-origin:0 0}

/* Approved picture-book sprites share a contact point at (30,130). */
.cursor-art{object-fit:contain;max-width:none;-webkit-user-drag:none;user-select:none;transition:transform 110ms ease-out}
.art-toothpick{width:93.840px;height:115.680px;left:27.600px;top:16.960px;transform-origin:2.400px 113.040px}
.art-finger{width:109.000px;height:123.750px;left:21.750px;top:11.500px;transform-origin:8.250px 118.500px}
.art-brush{width:75.075px;height:99.225px;left:-7.450px;top:33.750px;transform-origin:37.450px 96.250px}
.art-comb{width:64.800px;height:96.480px;left:-2.580px;top:36.040px;transform-origin:32.580px 93.960px}
.pressed .art-finger{transform:scale(1.045,.975)}.art-brush{transform:skewX(var(--fiber-bend));transition:transform 120ms cubic-bezier(.2,.7,.3,1)}.pressed .art-brush{transform:skewX(var(--fiber-bend)) scale(1.05,.985)}
.controls .tool img{width:27px;height:31px;object-fit:contain;margin-right:5px;pointer-events:none}.cursor.comb .tool-contact{width:60px;left:-30px}
@media(max-width:350px){.controls .tool img{width:23px;height:28px;margin-right:3px}}

/* Put frequent drawing choices beside the blanket; keep fullscreen settings in flow. */
.tool-strip{display:flex;align-items:center;margin-bottom:8px}.tool-strip .tools{flex:1;min-width:0;margin-bottom:0}.settings-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:48px;padding:0;margin-left:4px;border-radius:12px;color:#88748f;font-size:9px}.settings-toggle svg{width:18px;height:18px;margin-bottom:4px}.settings-toggle[aria-expanded="false"]{background:#e4d7e9;color:#72527e}.settings-toggle[aria-expanded="false"] svg{transform:rotate(180deg)}
.controls .tool.selected{background:#e4d6eb;color:#664672;box-shadow:inset 0 0 0 1px #bea4c9}.controls .tool.selected img{transform:translateY(-2px) scale(1.08)}.controls .tool img{transition:transform 150ms ease-out}.tool-sizes button.selected{background:#85658f;color:#fff;box-shadow:none}button:focus:not(:focus-visible){outline:none}button:focus-visible{outline:2px solid #a390aa;outline-offset:3px}
.actions #undo{order:0;background:#e8ddeb;color:#705178;min-width:44px;margin:0 3px 0 0}.actions #reset{order:1;color:#9b8b98}.actions #fullscreen{order:2}.actions #save-image{order:3}.actions #undo:disabled{background:transparent;opacity:.35}
.studio.immersive .actions #fullscreen{order:0;flex-direction:row;min-width:66px;margin:0 auto 0 0;color:#806b87;font-size:12px}.studio.immersive #fullscreen svg{margin:0 6px 0 0;width:16px;height:16px}.studio.immersive .actions #undo{order:1;flex-direction:row;min-width:72px;margin:0 7px 0 0;font-size:12px;border-radius:14px}.studio.immersive #undo svg{margin:0 6px 0 0}.studio.immersive .actions #reset{order:2;margin:0 4px 0 0;min-width:44px}.studio.immersive .actions #save-image{order:3;min-width:50px;color:#795e84}
@media(max-width:350px){.studio.immersive .controls{padding-left:6px;padding-right:6px}.studio.immersive .controls .tool{flex-direction:column;height:52px;padding:3px 0}.studio.immersive .controls .tool img{width:23px;height:27px;margin:0 0 2px}.studio.immersive .controls .tool span{font-size:9px}.studio.immersive .controls .palette-meta{width:46px}.studio.immersive .controls .swatch{width:26px}.studio.immersive .controls .swatch+.swatch{margin-left:0}.studio.immersive .size-control>span{font-size:9px;margin-right:4px}.studio.immersive .tool-sizes button{width:30px}.studio.immersive .tone-summary output{margin-left:4px}}
@media(orientation:landscape) and (max-height:560px){.studio.immersive{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:44px minmax(0,1fr);column-gap:16px;row-gap:8px}.studio.immersive .header{grid-column:1 / -1;grid-row:1;width:100%;max-width:none;margin:0}.studio.immersive .blanket-wrap{grid-column:1;grid-row:2;width:100%;height:100%;margin:0}.studio.immersive .controls{grid-column:2;grid-row:2;max-height:100%;overflow-y:auto;padding:8px}.studio.immersive .controls .tool{flex-direction:column;height:54px}.studio.immersive .controls .tool img{margin:0 0 2px}.studio.immersive .palette-meta{width:46px}.studio.immersive .swatch{width:26px}.studio.immersive .swatch+.swatch{margin-left:0}.studio.immersive .size-control>span{font-size:9px;margin-right:4px}.studio.immersive .tool-sizes button{width:30px}}

.studio.immersive .palette-title{font-size:10px;white-space:nowrap}

/* Each palette family occupies one swipeable page; custom color stays outside it. */
.palette-row,.studio.immersive .palette-row{height:auto;display:block}
.palette-meta,.studio.immersive .controls .palette-meta{width:100%;flex-direction:row;align-items:center;margin:0;height:22px}
.palette-meta .color-name{margin:0 0 0 8px;font-size:9px}
.palette-navigation{display:flex;align-items:center;margin-left:auto;color:#8e7a94;font-size:10px}
.palette-dots{display:flex;align-items:center;margin-left:5px}
.palette-dot{width:19px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px}
.palette-dot:after{content:"";width:5px;height:5px;border-radius:50%;background:#d5cbd8}
.palette-dot[aria-pressed="true"]:after{width:12px;border-radius:4px;background:#96749f}
.palette-group{width:100%;display:flex;align-items:center}
.palette{flex:1;min-width:0;display:flex;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.palette::-webkit-scrollbar{display:none}
.palette-page{flex:0 0 100%;min-width:0;display:flex;align-items:center;justify-content:space-between;padding:3px 2px}
.palette .swatch,.studio.immersive .controls .palette .swatch{flex:1;min-width:0;max-width:40px;width:auto;height:36px;padding:0;display:flex;align-items:center;justify-content:center;margin:0}
.palette .swatch.selected:after{width:27px;height:27px;top:50%;left:50%;transform:translate(-50%,-50%)}
.palette .swatch:focus{outline:1px solid #a390aa;outline-offset:-1px}
.palette-group .custom-swatch{width:31px;height:36px;margin-left:8px}
@supports(scroll-snap-type:x mandatory){.palette{scroll-snap-type:x mandatory}.palette-page{scroll-snap-align:start;scroll-snap-stop:always}}
.palette .swatch:focus:not(:focus-visible){outline:none}