.story-steps-studio{--hot:#ef7aa4;--deep:#a94877;--ink:#554268;--sun:#ffe37a;--sky:#9de6f5}.story-studio-stage{position:absolute;z-index:1;inset:0;overflow:hidden;isolation:isolate}.story-stage-glow{z-index:1;top:14%;left:52%;width:min(930px,88%);height:74%;border-radius:50%;background:radial-gradient(ellipse,#fffbdc9c,#fff3be35 52%,transparent 76%);filter:blur(9px);transform:translateX(-50%)}.story-curtain,.story-stage-glow{position:absolute;pointer-events:none}.story-curtain{z-index:2;top:0;bottom:0;width:clamp(34px,5vw,72px);background:repeating-linear-gradient(90deg,#b94976 0 14px,#e979a1 15px 28px,#9b3664 29px 37px);box-shadow:inset -10px 0 15px #6d224c45,0 0 18px #63324f38}.story-curtain:after{position:absolute;top:0;width:115%;height:27px;border-radius:0 0 50% 50%;background:#ffd25f;box-shadow:inset 0 -7px #df9f31,0 5px 8px #64354c35;content:""}.story-curtain-left{left:0;border-radius:0 0 70% 0}.story-curtain-right{right:0;border-radius:0 0 0 70%;transform:scaleX(-1)}.story-curtain-left:after,.story-curtain-right:after{left:0}.story-title-sign{position:absolute;z-index:12;top:17.5%;left:52%;min-width:250px;padding:7px 18px;border:3px solid #fff6c7;border-radius:15px;color:#73415b;background:linear-gradient(#fff6bf,#ffd36a);box-shadow:0 5px 0 #ba7840,0 10px 18px #68443b35;font-size:clamp(15px,2vw,20px);font-weight:1000;text-align:center;transform:translateX(-50%) rotate(-.4deg)}.story-picture-row{position:absolute;z-index:8;top:28%;left:53%;display:grid;width:min(850px,calc(100% - 260px));height:31%;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:clamp(12px,2.2vw,30px);transform:translateX(-50%)}.story-picture{position:relative;display:grid;min-width:0;padding:7px 7px 38px;cursor:pointer;place-items:stretch;border:5px solid #fff;border-radius:23px 23px 29px 29px;background:linear-gradient(155deg,#fffef4,#e8f8ff 65%,#d4e8f8);box-shadow:0 8px 0 #6e83b1,0 15px 22px #3f46593d;transform:rotate(var(--picture-tilt,0deg));touch-action:manipulation;transition:transform .2s ease,filter .2s ease,opacity .2s ease;-webkit-tap-highlight-color:transparent}.story-picture:first-child{--picture-tilt:-1.8deg}.story-picture:nth-child(2){--picture-tilt:1.3deg}.story-picture:nth-child(3){--picture-tilt:-1deg}.story-picture:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-7px) rotate(0)}.story-picture:active:not(:disabled){transform:translateY(4px) rotate(0);box-shadow:0 4px 0 #6e83b1}.story-picture:focus-visible{outline:6px solid #fff04f;outline-offset:4px}.story-picture.is-placed{visibility:hidden;pointer-events:none}.story-picture.is-wrong{animation:story-card-wiggle .48s ease-in-out}.story-picture-label{position:absolute;right:7px;bottom:6px;left:7px;overflow:hidden;color:#5b4565;font-size:clamp(12px,1.6vw,17px);font-weight:1000;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap}.story-try-mark{position:absolute;z-index:9;top:-12px;right:-10px;display:grid;width:46px;height:46px;place-items:center;border:4px solid #fff;border-radius:50%;color:#fff;background:#ee6c7d;box-shadow:0 5px #a83c57;font-size:24px;font-weight:1000}.story-scene-art{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:16px;background:radial-gradient(circle at 50% 42%,#fffefb 0 25%,#dff4ff 70%,#bee0f0 100%)}.story-scene-art:after{position:absolute;z-index:0;right:15%;bottom:5%;left:15%;height:18px;border-radius:50%;background:radial-gradient(ellipse,#4b52613d,transparent 70%);filter:blur(3px);content:""}.story-scene-art.is-compact{width:calc(100% - 8px);height:calc(100% - 38px);margin:34px auto 4px;border-radius:12px;background:transparent}.story-art-piece{position:absolute;z-index:2;top:var(--piece-y);left:var(--piece-x);width:var(--piece-size);aspect-ratio:1;filter:drop-shadow(0 8px 6px #38435236);transform:translate(-50%,-50%) rotate(var(--piece-rotate)) scale(var(--piece-scale));transform-origin:50% 85%}.story-art-piece img,.story-cherry img,.story-finish-character img{object-fit:contain}.story-water-drops{position:absolute;z-index:4;right:18%;bottom:14%;display:flex;gap:4px;rotate:-18deg}.story-water-drops i{width:10px;height:18px;border-radius:70% 30% 60% 40%;background:#51c9f1;box-shadow:inset 2px 2px #c9f7ff}.story-water-drops i:nth-child(2){translate:0 11px;scale:.78}.story-water-drops i:nth-child(3){translate:0 21px;scale:.58}.effect-pour .story-water-drops{right:42%;bottom:24%}.story-scene-sparkles{position:absolute;z-index:5;top:10%;right:9%;color:#ffbc29;font-size:clamp(17px,2.4vw,28px);letter-spacing:5px;text-shadow:0 2px #fff;animation:story-sparkle 1.2s ease-in-out infinite alternate}.story-scene-sparkles i{color:#ee6ba1;font-style:normal}.story-sent-mark{position:absolute;z-index:6;top:10%;right:12%;display:grid;width:42px;height:42px;place-items:center;border:4px solid #fff;border-radius:50%;color:#fff;background:#55bf75;box-shadow:0 4px #2a8650;font-size:23px;font-weight:1000}.story-motion-arrow{position:absolute;z-index:6;top:6%;left:46%;color:#6d5ed0;font-size:clamp(32px,5vw,54px);font-weight:1000;text-shadow:0 3px #fff}.story-air-puffs{position:absolute;z-index:5;top:15%;left:8%;color:#fff;font-size:clamp(17px,2.3vw,27px);font-weight:1000;text-shadow:0 2px 4px #5684a3}.story-block-stack{position:absolute;z-index:2;bottom:13%;left:50%;display:flex;flex-direction:column-reverse;align-items:center;transform:translateX(-50%)}.story-block-stack i{width:clamp(52px,6vw,72px);height:clamp(42px,5vw,60px);margin-top:-3px;border:4px solid #fff7d0;border-radius:12px;background:linear-gradient(145deg,#ffad73,#ed647b);box-shadow:inset -8px -8px #a8406252,0 5px #923a59,0 9px 10px #4a354138}.story-block-stack i:nth-child(2){background:linear-gradient(145deg,#7edee6,#4b9bd4);box-shadow:inset -8px -8px #3471a152,0 5px #356b9c,0 9px 10px #4a354138}.story-block-stack i:nth-child(3){background:linear-gradient(145deg,#ffe171,#f1aa3a);box-shadow:inset -8px -8px #c4802e52,0 5px #b46d27,0 9px 10px #4a354138}.story-paper{z-index:2;width:66%;height:70%;border:4px solid #fff;border-radius:8px;background:#fffdf4;box-shadow:0 7px 0 #b7c9d6,0 12px 16px #4a516035;transform:translate(-50%,-50%) rotate(-2deg)}.story-paper,.story-paper i{position:absolute;top:50%;left:50%}.story-paper i{width:48%;aspect-ratio:1;border:7px solid transparent;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,80% 94%,50% 71%,20% 94%,32% 56%,2% 35%,39% 35%);transform:translate(-50%,-50%)}.drawing-1 i{border:7px solid #7461cf;background:#fff}.drawing-2 i{border-color:#cc477d;background:#ff80aa}.story-timeline{position:absolute;z-index:9;bottom:8%;left:55%;display:grid;width:min(720px,calc(100% - 340px));height:23%;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,42px);transform:translateX(-50%)}.story-step-slot{position:relative;min-width:0;border:4px dashed #fff8c8;border-radius:23px;background:#fff8d44f;box-shadow:inset 0 0 0 3px #a96d5840,0 8px 14px #5b463438}.story-step-slot:not(:last-child):after{position:absolute;z-index:8;top:50%;left:calc(100% + 6px);color:#fff4a8;content:"➜";font-size:clamp(24px,3vw,38px);filter:drop-shadow(0 3px #85533e);transform:translateY(-50%)}.story-step-slot strong{position:absolute;z-index:6;top:5px;left:50%;display:flex;align-items:center;gap:6px;color:#744960;font-size:clamp(12px,1.5vw,16px);font-weight:1000;transform:translateX(-50%)}.story-step-slot strong span{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;color:#fff;background:#d85d86;box-shadow:0 3px #9c3e65}.story-step-slot.is-next{animation:story-slot-pulse 1.1s ease-in-out infinite alternate}.story-step-slot.is-filled{border-style:solid;background:#fffdf2c9}.story-step-slot.is-filled .story-scene-art{animation:story-place .42s cubic-bezier(.2,1.5,.45,1)}.story-cherry{position:absolute;z-index:12;bottom:0;left:-1%;width:clamp(214px,25.2vw,300px);aspect-ratio:1;filter:drop-shadow(0 14px 9px #49352e42);pointer-events:none;transform-origin:50% 92%;animation:story-cherry-breathe 4.2s ease-in-out infinite}.story-cherry.is-correct{animation:story-cherry-cheer .58s ease-in-out}.story-cherry.is-wrong{animation:story-cherry-wiggle .52s ease-in-out}.story-cherry.is-celebrate{animation:story-cherry-cheer .72s ease-in-out infinite alternate}.story-feedback{position:absolute;z-index:13;right:3%;bottom:2%;width:min(440px,calc(100% - 420px));margin:0;color:#fffdf2;font-size:clamp(15px,1.8vw,20px);font-weight:1000;line-height:1.15;text-align:center;text-shadow:0 3px 0 #64643d,0 6px 11px #3f442d70}.story-finish-character{position:relative;display:block;width:150px;height:150px}@keyframes story-card-wiggle{20%,60%{transform:translateX(-9px) rotate(-2deg)}40%,80%{transform:translateX(9px) rotate(2deg)}}@keyframes story-sparkle{to{opacity:.55;transform:scale(.82) rotate(8deg)}}@keyframes story-slot-pulse{to{border-color:#fff05e;box-shadow:inset 0 0 0 3px #fff49c80,0 0 20px #fff2669c}}@keyframes story-place{0%{opacity:0;transform:translateY(-25px) scale(.7) rotate(-4deg)}}@keyframes story-cherry-breathe{50%{transform:translateY(-4px) scale(1.008,.994)}}@keyframes story-cherry-cheer{45%{transform:translateY(-13px) rotate(3deg) scale(1.04)}}@keyframes story-cherry-wiggle{25%{transform:rotate(-2deg)}70%{transform:rotate(2deg)}}@media (max-width:1000px){.story-title-sign{top:24%}.story-picture-row{top:33%;width:min(820px,calc(100% - 110px));height:29%}.story-timeline{bottom:8%;width:min(680px,calc(100% - 230px));height:22%}.story-cherry{left:-2.5%;width:clamp(192px,27.6vw,264px)}.story-feedback{width:min(410px,calc(100% - 300px))}}@media (max-width:680px){.story-curtain{width:36px;opacity:.86}.story-title-sign{top:25%;min-width:215px;padding:5px 12px;font-size:14px}.story-picture-row{top:34%;left:51%;width:calc(100% - 42px);height:27%;gap:7px}.story-picture{padding:4px 4px 30px;border-width:4px;border-radius:17px}.story-picture-label{bottom:5px;font-size:11px}.story-timeline{bottom:10%;left:55%;width:calc(100% - 126px);height:24%;gap:14px}.story-step-slot{border-width:3px;border-radius:16px}.story-step-slot:not(:last-child):after{left:calc(100% + 1px);font-size:21px}.story-step-slot strong{top:4px;gap:3px;font-size:10px}.story-step-slot strong span{width:21px;height:21px}.story-cherry{left:-32px;width:175px}.story-feedback{right:5px;bottom:2%;width:calc(100% - 125px);font-size:13px}}@media (max-width:560px){.story-title-sign{top:23%;min-width:190px;font-size:12px}.story-picture-row{top:31%;left:50%;width:calc(100% - 16px);height:28%;gap:4px}.story-picture{padding-bottom:26px;border-width:3px;box-shadow:0 5px 0 #6e83b1,0 9px 13px #3f465938}.story-picture-label{font-size:9px}.story-art-piece{filter:drop-shadow(0 5px 4px #38435232)}.story-timeline{bottom:11%;left:55%;width:calc(100% - 98px);height:25%;gap:10px}.story-step-slot:not(:last-child):after{left:calc(100% - 1px);font-size:17px}.story-step-slot strong{font-size:9px}.story-step-slot strong span{width:19px;height:19px}.story-scene-art.is-compact{height:calc(100% - 31px);margin-top:29px}.story-cherry{left:-29px;width:149px}.story-feedback{width:calc(100% - 105px);font-size:12px}.story-block-stack i{width:42px;height:34px;border-width:3px}.story-sent-mark{width:31px;height:31px;border-width:3px;font-size:18px}}@media (max-width:390px){.story-title-sign{top:24%}.story-picture-row{top:33%;height:26%}.story-timeline{bottom:12%;width:calc(100% - 84px);height:24%}.story-cherry{width:132px}.story-feedback{width:calc(100% - 94px);font-size:11px}}@media (prefers-reduced-motion:reduce){.story-cherry,.story-picture,.story-scene-sparkles,.story-step-slot,.story-step-slot.is-filled .story-scene-art{animation:none;transition:none}}