:root{--cream:#efe5d0;--panel:#fbf6ea;--maroon:#6c2236;--ink:#2a1d1a;--muted:#7a6a60;--line:#dccfb6;--accent:#2f86c4}*{box-sizing:border-box}body{background:var(--cream);color:var(--ink);-webkit-text-size-adjust:100%;margin:0;font:16px ui-rounded,Avenir Next,Trebuchet MS,system-ui,sans-serif}button{font:inherit;color:inherit}.bar{background:var(--maroon);color:#f7ecd9;justify-content:space-between;align-items:center;gap:12px;padding:10px 20px;font-size:14px;display:flex}.bar .sub{opacity:.75;margin-left:8px}.bar .back{color:inherit;align-items:center;min-height:44px;font-weight:700;text-decoration:none;display:inline-flex}.bar .back:hover{text-decoration:underline}.loading[hidden]{display:none}.loading{background:var(--cream);color:var(--maroon);z-index:9;justify-content:center;align-items:center;font-size:18px;display:flex;position:fixed;inset:0}.stage{grid-template-columns:190px minmax(0,1fr) 290px;align-items:start;gap:22px;max-width:1400px;margin:0 auto;padding:18px 20px 26px;display:grid}.intro,.panel{position:sticky;top:14px}.intro h1{margin:0}.intro .tt{width:170px;height:auto;display:block}.intro .tt-m.always{display:block}.intro .tt[hidden]{display:none}.intro .tt-m{color:var(--maroon);font:italic 28px/1.1 Georgia,Times New Roman,serif;display:none}.intro p{color:var(--muted);margin:14px 0 0;font-size:14px;line-height:1.5}.pages{gap:8px;margin-top:16px;display:grid}.pages[hidden]{display:none}.pg{border:2px solid var(--line);cursor:pointer;text-align:left;background:#fff;border-radius:12px;align-items:center;gap:8px;padding:6px;font-size:13px;font-weight:600;display:flex}.pg img{object-fit:contain;background:#fbf6ea;border-radius:8px;flex:none;width:44px;height:44px}.pg:hover{border-color:var(--maroon)}.pg[aria-current=page]{border-color:var(--maroon);background:#f6e8ea}footer{max-width:1400px;color:var(--muted);margin:0 auto;padding:0 20px 28px;font-size:12px;line-height:1.5}.canvaswrap{justify-content:center;display:flex}#c{touch-action:none;cursor:crosshair;background:#f4edde;border-radius:3px;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 110px);display:block;box-shadow:0 0 0 1px #5a3c2847,0 12px 32px #3c231442}#ring{pointer-events:none;border:2px solid #281914b3;border-radius:50%;display:none;position:fixed;top:0;left:0;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #ffffffb3}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:14px;padding:14px;display:flex}.panel h2{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-size:11px}.seg{grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.acts{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.panel{max-height:calc(100vh - 28px);overflow:auto}.mixdemo{grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;display:grid}.mixdemo button{border:2px solid var(--line);cursor:pointer;opacity:.6;background:#f4edde;border-radius:10px;padding:0;position:relative;overflow:hidden}.mixdemo button[aria-pressed=true]{border-color:var(--maroon);opacity:1}.mixdemo img{width:100%;height:auto;display:block}.mixdemo span{background:#fbf6eae6;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700;position:absolute;top:4px;left:5px}.hint{color:var(--muted);margin:6px 0 0;font-size:12px;line-height:1.4}.act.dry{gap:6px;width:100%;margin-top:8px;transition:transform .1s,background-color .2s,border-color .2s;position:relative;overflow:hidden}.act.dry svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:16px;height:16px}.act.dry .i-done,.act.dry.done .i-wet{display:none}.act.dry.done .i-done{display:block}.act.dry:not(:disabled):hover{border-color:var(--maroon)}.act.dry:not(:disabled):active{transform:scale(.97)}.act.dry.done:disabled{opacity:1;color:#3e6a31;background:#edf3e8;border-color:#b9d1ad}.act.dry.drying{color:#fff;border-color:var(--maroon);background:linear-gradient(90deg,var(--maroon) 50%,#fff 50%) right/200% 100%;animation:.6s ease-out forwards dry-fill}.act.dry.drying .i-wet{animation:.6s ease-out dry-drop}@keyframes dry-fill{to{background-position:0}}@keyframes dry-drop{50%{transform:translateY(2px)scale(.8)}}#c.dried{animation:.7s ease-out dry-set}@keyframes dry-set{35%{filter:saturate(.8)brightness(1.06)}}.big{grid-template-columns:1fr 1fr;gap:8px;display:grid}.tool,.act{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:9px 6px;font-size:12px;font-weight:600;display:flex}.act{flex-direction:row;justify-content:center;font-size:13px}.act:disabled{opacity:.4;cursor:default}.tool svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.tool[aria-pressed=true]{background:var(--maroon);color:#fff;border-color:var(--maroon)}button:focus-visible,#cc:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.row{align-items:center;gap:10px;display:flex}input[type=range]{accent-color:var(--maroon);flex:1}#dot{justify-content:center;align-items:center;width:30px;height:30px;display:flex}#dot i{background:var(--ink);border-radius:50%}.switch{cursor:pointer;align-items:center;gap:8px;margin-top:8px;font-size:14px;display:flex}.switch input{width:18px;height:18px;accent-color:var(--maroon)}.sw{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.color-swatch{--paint:#888;aspect-ratio:1;cursor:pointer;background:radial-gradient(circle at 34% 28%, #ffffffd9 0 5%, #ffffff59 9%, transparent 17%), radial-gradient(ellipse 30% 18% at 64% 72%, #ffffff38, transparent 70%), radial-gradient(circle at 70% 74%, #ffffff4d 0 2%, transparent 7%), repeating-radial-gradient(circle at 72% 76%, transparent 0 5px, #0000000d 5.5px 6.5px, #ffffff12 7px, transparent 8.5px), radial-gradient(circle at 42% 38%, transparent 38%, #00000047 100%), var(--paint);border:1px solid #28190f2e;border-radius:56% 44% 52% 48%/48% 56% 44% 52%;padding:0;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 3px #3c231459,inset 0 -3px 4px #00000038,inset 0 2px 2px #ffffff59}.color-swatch:nth-child(3n+2){border-radius:46% 54% 44% 56%/55% 45%}.color-swatch:nth-child(4n+3){border-radius:52% 48% 58% 42%/44% 52% 48% 56%}.color-swatch:hover{transform:translateY(-1px)scale(1.04)}.color-swatch[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px;transform:translateY(-2px)scale(1.1);box-shadow:0 5px 7px #3c231466,inset 0 -3px 4px #00000038,inset 0 2px 2px #ffffff59}@media (prefers-reduced-motion:reduce){.color-swatch{transition:none}}.custom{color:var(--muted);align-items:center;gap:8px;margin-top:8px;font-size:13px;display:flex}#cc{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;width:44px;height:30px;padding:0}.big button{cursor:pointer;border:0;border-radius:12px;padding:12px 8px;font-size:15px;font-weight:700}#save{border:1px solid var(--line);background:#fff}#share{background:var(--maroon);color:#fff}#send{color:#3b2a00;background:#f3c431;grid-column:1/-1}.toast{z-index:10;background:var(--ink);color:#fbf6ea;text-align:center;opacity:0;pointer-events:none;border-radius:99px;max-width:calc(100vw - 32px);padding:10px 18px;font-size:14px;transition:opacity .2s,transform .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,8px);box-shadow:0 6px 18px #28190f4d}.toast.show{opacity:1;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.act.dry,.toast{transition:none}.act.dry.drying,.act.dry.drying .i-wet,#c.dried{animation:none}.act.dry.drying{background:var(--maroon)}}@media (width>=941px) and (height<=880px){.panel{gap:9px;padding:12px}.panel h2{margin-bottom:4px}.tool{gap:2px;padding:6px 4px}.switch{margin-top:4px}.sw{grid-template-columns:repeat(8,1fr);gap:4px}.mixdemo{margin-top:6px}.mixdemo img{aspect-ratio:240/90;object-fit:cover}.custom{margin-top:6px}.big button{padding:9px 8px}}@media (width<=940px){.stage{grid-template-columns:minmax(0,1fr);gap:14px;padding:12px 12px 20px}.intro,.panel{position:static}.intro .tt{display:none}.pages{grid-auto-columns:minmax(150px,1fr);grid-auto-flow:column;margin-top:10px;padding-bottom:4px;overflow-x:auto}.intro .tt-m{display:block}.intro p{margin-top:8px}#c{max-height:none}.sw{grid-template-columns:repeat(8,1fr)}}