@charset "UTF-8";
/* Only benefit 02: three illustrated poses with independently moving props. */
#gift-create .gift-workshop{height:auto;width:100%;max-width:410px;aspect-ratio:400/390;margin:17px auto 12px;isolation:isolate;container-type:inline-size}
#gift-create .gift-workshop:before{inset:21% 0 2%;background:#fffaf64d;transform:rotate(-3deg)}
#gift-create .workshop-visual{position:absolute;inset:0;pointer-events:none}
#gift-create .workshop-toua{position:absolute;left:5%;bottom:3%;width:90%;aspect-ratio:512/552;z-index:2;transform-origin:50% 80%}
/* The character row is a little taller than the atlas's nominal square cells. */
#gift-create .workshop-pose{position:absolute;inset:0;background:url('assets/toua-idea-workshop-atlas.webp') no-repeat;background-size:300% 185.50725%;background-position:0 0;opacity:0;clip-path:inset(0 1% 0 1%)}
#gift-create .workshop-organizing{background-position:50% 0}
#gift-create .workshop-delighted{background-position:100% 0;opacity:1}
#gift-create .workshop-questions{position:absolute;inset:0;z-index:4;opacity:0;color:#806a5a;font-family:var(--hand);font-size:clamp(16px,4.9cqw,21px);font-style:oblique 6deg;font-weight:400;font-synthesis:style}
#gift-create .workshop-question{position:absolute;white-space:nowrap;transform:rotate(var(--question-tilt,0deg))}
#gift-create .question-light{left:0;top:21%;--question-tilt:-15deg;--float-delay:0s}
#gift-create .question-product{left:23%;top:0;--question-tilt:-9deg;--float-delay:.15s}
#gift-create .question-service{right:0;top:7%;--question-tilt:11deg;--float-delay:.3s}
#gift-create .question-plan{right:-1%;top:28%;--question-tilt:8deg;--float-delay:.1s}
#gift-create .workshop-scribble{position:absolute;left:0;top:45%;width:10%;height:auto;opacity:.6;transform:rotate(-12deg)}
#gift-create .workshop-sticky-notes{position:absolute;inset:0;z-index:4;opacity:0}
#gift-create .workshop-sticky{position:absolute;width:11%;height:7%;border:1px solid #bfbb94;box-shadow:1px 2px 0 #6e654216;transform:rotate(var(--note-tilt,0deg));background:#f7df96}
#gift-create .workshop-sticky:before{content:"";position:absolute;left:18%;right:17%;top:35%;border-top:1px solid #b1956480;box-shadow:0 5px 0 #b1956445}
#gift-create .sticky-a{left:23%;top:78%;--note-tilt:-5deg;--note-x:-170%;--note-y:-160%;--note-delay:2.64s}
#gift-create .sticky-b{right:21%;top:78%;background:#efb8bd;border-color:#cba4a8;--note-tilt:4deg;--note-x:140%;--note-y:-290%;--note-delay:3.02s}
#gift-create .sticky-c{right:20%;top:87%;background:#cddfb9;border-color:#a6b896;--note-tilt:-3deg;--note-x:150%;--note-y:-160%;--note-delay:3.4s}
#gift-create .workshop-finished-objects{position:absolute;inset:0;z-index:5}
#gift-create .workshop-object{position:absolute;background:url('assets/toua-idea-workshop-atlas.webp') no-repeat;background-size:300% 200%;aspect-ratio:1;transform-origin:50% 85%;clip-path:inset(10% 1.5% 0 1.5%);filter:drop-shadow(0 3px 2px #6f563717);opacity:1}
#gift-create .finished-laptop{width:45%;left:-2%;bottom:-1%;background-position:0 100%;--object-tilt:-5deg;--object-delay:5.45s;transform:rotate(-5deg)}
#gift-create .finished-product{width:30%;left:37%;bottom:0;background-position:50% 100%;--object-tilt:2deg;--object-delay:5.78s;transform:rotate(2deg)}
#gift-create .finished-proposal{width:35%;right:-2%;bottom:1%;background-position:100% 100%;--object-tilt:6deg;--object-delay:6.11s;transform:rotate(6deg)}
#gift-create .workshop-sparkles{position:absolute;inset:0;z-index:6;color:#d9aa45}
#gift-create .workshop-sparkles i{position:absolute;font-style:normal;font-size:25px;line-height:1;transform-origin:center;opacity:1}
#gift-create .workshop-sparkles i:before{content:'✦'}
#gift-create .workshop-sparkles i:nth-child(1){left:7%;top:28%;--sparkle-delay:5.55s}
#gift-create .workshop-sparkles i:nth-child(2){right:10%;top:10%;font-size:30px;--sparkle-delay:5.8s}
#gift-create .workshop-sparkles i:nth-child(3){left:42%;bottom:29%;font-size:19px;--sparkle-delay:6.05s}
#gift-create .workshop-sparkles i:nth-child(4){right:0;top:53%;font-size:20px;--sparkle-delay:6.3s}
#gift-create .workshop-replay{position:absolute;right:0;bottom:-10px;border:1px solid #adbea1;width:27px;height:27px;background:#fffdf5bf;border-radius:50%;color:#6d8465;font:20px/1 Georgia,serif;display:grid;place-items:center;padding:0;z-index:8}
#gift-create .workshop-replay:hover{background:#fffdf5}
#gift-create .workshop-replay[hidden]{display:none}
#gift-create [data-workshop-state="ready"] .workshop-pose{opacity:0}
#gift-create [data-workshop-state="ready"] .workshop-confused,#gift-create [data-workshop-state="ready"] .workshop-questions{opacity:1}
#gift-create [data-workshop-state="ready"] .workshop-object,#gift-create [data-workshop-state="ready"] .workshop-sparkles{opacity:0}
#gift-create [data-workshop-state="playing"] .workshop-confused{animation:workshop-confused 8.4s linear both}
#gift-create [data-workshop-state="playing"] .workshop-organizing{animation:workshop-organizing 8.4s linear both}
#gift-create [data-workshop-state="playing"] .workshop-delighted{animation:workshop-delighted 8.4s linear both}
#gift-create [data-workshop-state="playing"] .workshop-toua{animation:workshop-body 8.4s ease-in-out both}
#gift-create [data-workshop-state="playing"] .workshop-questions{animation:workshop-confused 8.4s linear both}
#gift-create [data-workshop-state="playing"] .workshop-question{animation:workshop-question-float 1.2s var(--float-delay) ease-in-out 3 alternate both}
#gift-create [data-workshop-state="playing"] .workshop-sticky-notes{animation:workshop-organizing 8.4s linear both}
#gift-create [data-workshop-state="playing"] .workshop-sticky{animation:workshop-note-sort .8s var(--note-delay) cubic-bezier(.2,.65,.3,1) both}
#gift-create [data-workshop-state="playing"] .workshop-object{animation:workshop-object-pop .65s var(--object-delay) cubic-bezier(.22,.75,.3,1) both}
#gift-create [data-workshop-state="playing"] .workshop-sparkles i{animation:workshop-sparkle .6s var(--sparkle-delay) ease-out both}
@keyframes workshop-confused{0%,29%{opacity:1}31%,100%{opacity:0}}
@keyframes workshop-organizing{0%,29%{opacity:0}31%,61%{opacity:1}63%,100%{opacity:0}}
@keyframes workshop-delighted{0%,61%{opacity:0}63%,100%{opacity:1}}
@keyframes workshop-body{0%,29%,31%,61%,75%,100%{transform:translateY(0) rotate(0)}8%,23%{transform:rotate(-1.4deg)}16%{transform:rotate(1deg)}38%,52%{transform:translateY(3px) rotate(1deg)}45%,59%{transform:translateY(0) rotate(-.5deg)}64%{transform:translateY(-7px) rotate(-1.5deg) scale(1.02)}70%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes workshop-question-float{from{transform:translateY(0) rotate(var(--question-tilt))}to{transform:translateY(-7px) rotate(calc(var(--question-tilt) + 7deg))}}
@keyframes workshop-note-sort{0%{opacity:0;transform:translate(var(--note-x),var(--note-y)) rotate(-18deg) scale(.8)}25%{opacity:1}78%{transform:translate(0,-3px) rotate(2deg) scale(1.05)}100%{opacity:1;transform:translate(0,0) rotate(var(--note-tilt)) scale(1)}}
@keyframes workshop-object-pop{0%{opacity:0;transform:translateY(26px) rotate(-8deg) scale(.15)}25%{opacity:1}70%{transform:translateY(-9px) rotate(calc(var(--object-tilt) + 4deg)) scale(1.08)}100%{opacity:1;transform:translateY(0) rotate(var(--object-tilt)) scale(1)}}
@keyframes workshop-sparkle{0%{opacity:0;transform:scale(0) rotate(-25deg)}60%{opacity:1;transform:scale(1.3) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:760px){
 #gift-create .gift-workshop{height:auto;max-width:350px;margin:14px auto 17px}
 #gift-create .workshop-replay{width:24px;height:24px;font-size:18px;bottom:-10px}
 #gift-create .workshop-sparkles i{font-size:20px}
 #gift-create .workshop-sparkles i:nth-child(2){font-size:25px}
}
@media(prefers-reduced-motion:reduce){#gift-create .gift-workshop:not(.replay-motion) *{animation:none!important;transition:none!important}#gift-create .workshop-replay{display:none}}