:root{--ink: #2d2158;--ink2: #5f5488;--paper: #fffef8;--violet: #7c3aed;--violet-d: #5b21b6;--pink: #f03e8a;--orange: #ff8a1f;--orange-d: #d9680a;--yellow: #ffd43b;--green: #22b35e;--green-d: #15803d;--blue: #2f80ed;--blue-d: #1b5fc0;--red: #e03131;--shadow: 0 10px 28px rgba(60, 20, 120, .28), 0 2px 6px rgba(60, 20, 120, .18);--sat: env(safe-area-inset-top, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px);--sar: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:Nunito,system-ui,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;background:var(--violet)}#app{position:fixed;inset:0;display:flex;flex-direction:column;background:linear-gradient(120deg,#8b5cf6,#ec4899,#fb923c,#38bdf8,#8b5cf6);background-size:400% 400%;animation:rainbow 30s ease infinite}@keyframes rainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}h1,h2,h3,.btn,.chip,#steps{font-family:Fredoka,Nunito,sans-serif}h2{margin:0 0 4px;font-size:26px;font-weight:600;color:var(--violet-d)}p{margin:0}.sub{color:var(--ink2);font-size:15px;line-height:1.35;margin-bottom:8px}.note{color:var(--ink2);font-size:14px;line-height:1.3;min-height:1.3em}.note.bad{color:var(--red);font-weight:700}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}svg.i{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.24em;flex:none}svg.i *{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}svg.i .fill{fill:currentColor;stroke:none}#top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:calc(6px + var(--sat)) calc(10px + var(--sar)) 6px calc(10px + var(--sal))}.brand{display:flex;align-items:center;gap:8px;color:#fff;order:1;flex:1;min-width:0}.brand h1{margin:0;font-size:21px;font-weight:600;white-space:nowrap;text-shadow:0 2px 0 rgba(60,20,120,.35)}.logo-spin{width:30px;height:30px;border-radius:50%;flex:none;border:3px solid #fff;background:conic-gradient(#ff4d6d,#ffd43b,#51cf66,#339af0,#b197fc,#ff4d6d);animation:spin 7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tools{display:flex;gap:6px;order:2}nav{order:3;flex:1 1 100%}#steps{list-style:none;margin:0;padding:0;display:flex;gap:4px}#steps li{flex:1;min-width:0}#steps button{width:100%;min-height:44px;border:0;border-radius:14px;padding:3px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:#ffffff47;color:#fff;font-weight:500;font-size:12px;line-height:1.1;transition:transform .15s,background .2s}#steps button b{font-size:15px;font-weight:600}#steps button.on{background:#fff;color:var(--violet-d);transform:scale(1.05);box-shadow:var(--shadow)}#steps button.done{background:#22b35ee6}#steps button:disabled{opacity:.5;cursor:not-allowed}#steps span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ic{width:44px;height:44px;border-radius:14px;border:0;padding:0;flex:none;display:grid;place-items:center;font-size:20px;background:#fff;color:var(--violet-d);box-shadow:0 3px #3c14784d;transition:transform .12s}.ic:active{transform:translateY(2px) scale(.96)}.ic:disabled{opacity:.45}#main{flex:1;min-height:0;padding:0 calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal))}.step{height:100%;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}.split{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0}.stage{flex:1 1 42%;min-height:150px;border-radius:22px;overflow:hidden;position:relative;background:#ffffff40;box-shadow:var(--shadow)}.stage.paper{background:var(--paper)}.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}.panel{flex:1 1 58%;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--paper);border-radius:22px;padding:12px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}.scroller{height:100%;overflow-y:auto;background:var(--paper);border-radius:22px;padding:12px 14px;box-shadow:var(--shadow)}#pickView{height:100%}.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:auto;padding-top:4px}.actions.start{justify-content:flex-start;margin-top:0}.panel>.actions:last-child{position:sticky;bottom:-12px;margin-bottom:-12px;padding:6px 0 12px;background:var(--paper);z-index:2}.actions.col{flex-direction:column;align-items:stretch}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 18px;border:0;border-radius:16px;font-size:17px;font-weight:600;color:#fff;flex:1 1 auto;background:var(--violet);box-shadow:0 4px 0 var(--violet-d);transition:transform .12s,box-shadow .12s,filter .12s}.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--violet-d)}.btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}.btn.big{min-height:54px;font-size:20px}.btn.orange{background:var(--orange);box-shadow:0 4px 0 var(--orange-d)}.btn.green{background:var(--green);box-shadow:0 4px 0 var(--green-d)}.btn.blue{background:var(--blue);box-shadow:0 4px 0 var(--blue-d)}.btn.plain{background:#efeafd;color:var(--violet-d);box-shadow:0 4px #cfc3f3}.btn.red{background:var(--red);box-shadow:0 4px #a51d1d}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;padding:4px 12px;border:2px solid #d9d0f5;border-radius:14px;background:#fff;color:var(--violet-d);font-weight:500;font-size:15px;transition:transform .12s}.chip:active{transform:scale(.95)}.chip:disabled{opacity:.4;cursor:not-allowed}.chip[aria-pressed=true],.chip.on{background:var(--violet);color:#fff;border-color:var(--violet)}.field{display:flex;align-items:center;gap:8px}.field input{width:124px;min-height:48px;font:600 26px Fredoka,sans-serif;text-align:center;color:var(--violet-d);border:3px solid var(--violet);border-radius:14px;background:#fff;padding:2px 4px}.field input.bad{border-color:var(--red);color:var(--red)}.unit{font:500 20px Fredoka,sans-serif;color:var(--ink2)}input[type=range]{width:100%;min-height:32px;accent-color:var(--violet)}.slider{display:block;font-weight:700;font-size:14px;color:var(--ink2)}.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink2);min-height:44px}.check input{width:22px;height:22px;accent-color:var(--violet);flex:none}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:10px}.pic{display:flex;flex-direction:column;align-items:center;padding:6px;gap:0;border:3px solid transparent;border-radius:18px;background:#f2edff;color:var(--ink);transition:transform .15s,border-color .15s}.pic:hover,.pic:focus-visible{transform:translateY(-3px) rotate(-1.5deg);border-color:var(--orange)}.pic canvas{width:100%;aspect-ratio:16 / 13;display:block}.pic span{font:600 15px Fredoka,sans-serif}.pic small{font-size:12px;color:var(--ink2)}.shape-chips{display:flex;flex-wrap:wrap;gap:4px;max-height:100px;overflow-y:auto;flex:none}.sc{width:34px;height:34px;border-radius:50%;border:3px solid #fff;padding:0;color:#fff;font:600 12px Fredoka,sans-serif;box-shadow:0 0 0 1px #2d21584d;text-shadow:0 1px 2px rgba(0,0,0,.7)}.sc[aria-pressed=false]{background:#fff!important;color:var(--ink2);opacity:.6;text-shadow:none;border-style:dashed;border-color:#a9a0c9}.status{padding:8px 10px;border-radius:12px;font-size:14px;font-weight:700;line-height:1.25;background:#eee}.status.good{background:#d8f8e4;color:#11693a}.status.warn{background:#fff0c9;color:#8a5a00}.status.bad{background:#ffdfdf;color:#a31919}.edit-row{display:flex;gap:8px;justify-content:center}.edit-row .ic{background:#efeafd}#editPanel{display:flex;flex-direction:column;gap:8px}.shake{animation:shake .35s}@keyframes shake{25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}.progress{height:12px;border-radius:6px;background:#ece6fb;overflow:hidden;flex:none}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff4d6d,#ffd43b,#51cf66,#339af0,#b197fc);transition:width .25s}.howto{margin:0;padding-left:20px;font-size:14px;line-height:1.35;color:var(--ink2)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;z-index:20;background:#2d145a8c;animation:fade .2s}@keyframes fade{0%{opacity:0}}.card{width:min(460px,100%);max-height:100%;overflow-y:auto;background:var(--paper);border-radius:24px;padding:18px;box-shadow:var(--shadow);animation:pop .3s cubic-bezier(.2,1.4,.4,1);display:flex;flex-direction:column;gap:10px}.card p{line-height:1.4}.prose ol{margin:0;padding-left:22px;line-height:1.4}#toast{position:absolute;left:50%;bottom:calc(16px + var(--sab));transform:translate(-50%);z-index:30;max-width:90%;padding:10px 16px;border-radius:14px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;text-align:center;box-shadow:var(--shadow)}#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}@media(min-width:760px),(orientation:landscape)and (max-height:560px){.split{flex-direction:row}.stage{flex:1 1 58%;min-height:0}.panel{flex:0 1 380px;min-width:300px}}@media(min-width:700px){#top{flex-wrap:nowrap}nav{order:2;flex:1 1 auto;max-width:620px;margin:0 auto}.brand{flex:0 0 auto}.tools{order:3}#steps button{flex-direction:row;gap:6px;font-size:14px}}@media(orientation:landscape)and (max-height:560px){#top{flex-wrap:nowrap;padding-top:calc(3px + var(--sat));padding-bottom:3px}nav{order:2;flex:1 1 auto}.brand{flex:0 0 auto}.brand h1{display:none}.tools{order:3}#steps button{flex-direction:row;gap:4px;min-height:40px;font-size:13px}.ic{height:40px}h2{font-size:21px}.panel{padding:8px 10px;gap:6px}.panel>.actions:last-child{bottom:-8px;margin-bottom:-8px;padding:4px 0 8px}.btn,.btn.big{min-height:44px;font-size:16px}.sub{font-size:14px;margin-bottom:2px}}@media(prefers-reduced-motion:reduce){#app,.logo-spin,.step,.card,.overlay{animation:none}.btn,.chip,.ic,.pic,#steps button{transition:none}}#print{display:none}@media print{html,body{overflow:visible;height:auto;background:#fff}#app{display:none!important}#print{display:block}.pp-page{break-after:page;page-break-after:always}.pp-page:last-child{break-after:auto;page-break-after:auto}.pp-page svg{display:block}}