.decomposition{position:fixed;inset:0;z-index:50;color:#30472c;background:#d9e3cb;animation:story-enter .4s ease}.story-header{position:absolute;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;margin:0 4%;border-bottom:1px solid #63794b30;z-index:40;pointer-events:none}.story-header>*{pointer-events:auto}.story-header>span{font-size:9px;letter-spacing:2px;color:#758b61}.story-header button{font-size:11px;letter-spacing:1px;padding:10px 0}.story-header button:last-child{padding:10px 18px;border:1px solid #677d4b60;border-radius:30px}.story-scroll{height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;outline:0;scrollbar-width:thin;scrollbar-color:#a0b48a transparent}.story-film{height:650dvh;position:relative}.story-stage{position:sticky;top:0;width:100%;height:100dvh;min-height:540px;overflow:hidden;background:#d9e3cb;background-image:radial-gradient(ellipse at 65% 46%,#ffffffb0,transparent 65%);color:#30472c}.story-backword{position:absolute;left:34%;top:13%;font:800 19vw/.9 Arial,sans-serif;letter-spacing:-.07em;color:#4b683518;white-space:nowrap;pointer-events:none}.story-counter{position:absolute;left:4%;top:109px;display:flex;gap:8px;font-size:10px;letter-spacing:2px;color:#839572}.story-counter>span:last-child{margin-left:22px;letter-spacing:1px;font-size:9px}.story-copy{position:absolute;left:7%;top:28%;width:37%;z-index:15;pointer-events:none;will-change:opacity,transform}.story-copy:not(:first-of-type){opacity:0}.story-copy small{font-size:8px;letter-spacing:2px;color:#879a73}.story-copy h2{font-size:clamp(35px,4.7vw,70px);line-height:1.25;letter-spacing:-2px;margin:22px 0;font-weight:600}.story-copy p{font-size:12px;line-height:2;letter-spacing:1px;color:#879b75;margin:9px 0}.story-copy #decomp-title{font-size:14px;color:#526e41}.story-scene{position:absolute;inset:0;perspective:1100px;pointer-events:none}.story-food{position:absolute;left:65%;top:53%;width:440px;height:440px;z-index:8;will-change:transform;mix-blend-mode:multiply}.story-whole{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.story-ingredients{position:absolute;inset:0;opacity:0}.story-ingredient{position:absolute;left:50%;top:50%;width:225px;height:156px;object-fit:contain;filter:drop-shadow(0 14px 9px #3f58231c);will-change:transform;pointer-events:none}.story-tray{position:absolute;left:65%;top:79%;width:570px;height:190px;border-radius:25px;background:linear-gradient(145deg,#f7f7e5,#cfdcbd);border:10px solid #e6edda;box-shadow:0 30px 45px #546d3725;transform:translate(-50%,-50%) rotateX(66deg) rotateZ(-5deg);z-index:1}.story-tray span{position:absolute;bottom:9px;left:0;width:100%;text-align:center;font-size:8px;letter-spacing:2px;color:#8c9d74}.story-shadow{position:absolute;left:65%;top:78%;width:300px;height:35px;transform:translate(-50%,-50%);border-radius:50%;background:#3a542b50;filter:blur(21px);z-index:2}.story-label{position:absolute;z-index:20;left:74%;top:48%;width:225px;opacity:0;pointer-events:none;will-change:transform,opacity;padding-left:15px}.story-label::before{content:'';position:absolute;left:-23px;top:11px;width:28px;height:1px;background:#9bb17d55}.story-label>div{display:flex;align-items:baseline;gap:8px;white-space:nowrap}.story-label strong{font-size:12px;font-weight:500}.story-label>div>span{font-size:9px;color:#819a69}.story-label b{font:14px Georgia;color:#48643a}.story-label>small{display:block;font-size:8px;color:#91a37c;line-height:1.7;letter-spacing:.2px}.story-box{position:absolute;left:61%;top:71%;width:470px;height:220px;transform:translate(-50%,-50%);opacity:0;z-index:6;transform-style:preserve-3d;will-change:transform,opacity}.story-box-inside{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#f1ead6 0px,#f1ead6 19px,#e8dfc9 20px,#e8dfc9 21px);border:13px solid #82936e;transform:rotateX(55deg);box-shadow:0 30px 35px #4c63312a}.story-lid{position:absolute;left:0;right:0;height:220px;bottom:166px;background:#647b50;border:7px solid #809467;transform-origin:bottom;transform:rotateX(-16deg);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#f1f1dc;box-shadow:inset 0 0 0 1px #b2c39750;backface-visibility:visible}.story-lid b{font-size:55px;font-weight:500;letter-spacing:4px}.story-lid small{font-size:8px;letter-spacing:2px;margin-top:12px;color:#ced8ba}.story-box-front{position:absolute;left:0;right:0;bottom:-12px;height:90px;background:#72885d;border-top:2px solid #a5b88e;box-shadow:0 15px 25px #4c63312a;display:flex;align-items:center;justify-content:space-around;color:#eaf0dc;z-index:25}.story-box-front b{font-size:30px;font-weight:600;letter-spacing:-1px}.story-box-front small{font-size:8px;letter-spacing:1.5px}.story-facts{position:absolute;left:7%;top:69%;display:flex;gap:30px;z-index:20;pointer-events:none}.story-facts>div{display:flex;flex-direction:column;gap:9px}.story-facts strong{font:25px Georgia}.story-facts span{font-size:8px;letter-spacing:1px;color:#879b75}.story-bottom{position:absolute;left:4%;right:4%;bottom:31px;display:flex;align-items:center;justify-content:space-between;z-index:25;font-size:8px;letter-spacing:2px;color:#6a8355}.story-bottom small{display:block;margin-top:10px;font-size:10px;letter-spacing:.5px;color:#94a77f}.story-chapters{display:flex;gap:10px}.story-chapter-button{padding:8px 5px;font:10px Georgia;color:#93a67e;position:relative}.story-chapter-button[aria-pressed=true]{color:#3f5a2d}.story-chapter-button[aria-pressed=true]::after{content:'';position:absolute;left:50%;bottom:0;width:3px;height:3px;background:currentColor;border-radius:50%}.story-timeline{position:absolute;bottom:0;left:0;right:0;height:3px;background:#6b855220;z-index:30}.story-timeline i{display:block;height:100%;background:#5b7843;transform:scaleX(0);transform-origin:left}.story-finish{min-height:65dvh;background:#f5f6ed;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:75px 6%;position:relative}.story-finish>small{font-size:9px;letter-spacing:2px;color:#9aa78a;line-height:2}.story-finish h2{font-size:clamp(30px,5vw,70px);font-weight:500;letter-spacing:-1px;margin:30px 0 10px}.story-finish p{font-size:13px;color:#869a74}.story-finish>div{display:flex;gap:18px;margin:20px 0 35px}.story-finish button{border:1px solid #a1b489;padding:15px 25px;border-radius:30px;color:#54703f;font-size:11px}.story-finish #story-add{background:#567344;color:#fbfcef;border-color:#567344}@keyframes story-enter{from{opacity:0}to{opacity:1}}
@media(max-width:1000px) and (min-width:701px){.story-copy h2{font-size:41px}.story-label{width:180px;padding-left:7px}.story-label::before{width:14px;left:-13px}.story-label strong{font-size:11px}.story-label>div{gap:5px}.story-label>small{font-size:7px}.story-facts{gap:23px}}
@media(max-width:700px){.story-header{height:64px;margin:0 5%}.story-header>span{font-size:6px;letter-spacing:1px}.story-header button{font-size:9px}.story-header button:last-child{padding:8px 12px}.story-film{height:600dvh}.story-stage{min-height:560px;background-image:radial-gradient(ellipse at 50% 56%,#ffffffb0,transparent 70%)}.story-counter{top:87px;left:5%;font-size:8px}.story-counter>span:last-child{font-size:7px;margin-left:12px}.story-copy{left:7%;top:15%;width:88%}.story-copy small{font-size:7px;letter-spacing:1px}.story-copy h2{font-size:33px;letter-spacing:-1px;line-height:1.2;margin:15px 0 10px}.story-copy p{font-size:9px;line-height:1.8;letter-spacing:.5px;max-width:220px;margin:6px 0}.story-copy #decomp-title{font-size:11px}.story-stage[data-chapter="2"] .story-copy h2{font-size:28px;line-height:1.12;margin:9px 0}.story-stage[data-chapter="2"] .story-copy h2 br{display:none}.story-stage[data-chapter="2"] .story-copy p{font-size:8px;max-width:290px}.story-stage[data-chapter="2"] .story-copy p br{display:none}.story-backword{left:-5%;top:42%;font-size:28vw}.story-ingredient{width:140px;height:106px;filter:drop-shadow(0 10px 7px #3f58231c)}.story-tray{width:390px;height:150px;top:81%;border-width:8px}.story-tray span{font-size:6px;letter-spacing:1px}.story-shadow{top:81%;width:220px;height:25px}.story-label{width:calc(33vw - 12px);padding-left:6px}.story-label::before{width:13px;left:-13px;top:9px}.story-label>div{display:block;white-space:normal;line-height:1.2;margin-bottom:2px}.story-label strong{font-size:9px;display:inline-block}.story-label>div>span{font-size:7px;display:inline-block;margin-left:4px;white-space:nowrap}.story-label b{font-size:10px}.story-label>small{font-size:6px;line-height:1.45;letter-spacing:0;white-space:nowrap}.story-box{top:72%;width:320px;height:170px}.story-lid{height:170px;bottom:130px;border-width:6px}.story-lid b{font-size:40px}.story-lid small{font-size:7px}.story-box-front{height:70px;bottom:-10px}.story-box-front b{font-size:24px}.story-box-front small{font-size:6px}.story-facts{top:auto;left:7%;right:7%;bottom:105px;gap:0;justify-content:space-between}.story-facts strong{font-size:20px}.story-facts span{font-size:7px;letter-spacing:0}.story-bottom{left:5%;right:5%;bottom:25px;font-size:7px;letter-spacing:1px}.story-bottom small{font-size:8px;letter-spacing:0;margin-top:8px;max-width:180px}.story-chapters{gap:4px}.story-chapter-button{font-size:8px;padding:7px 4px}.story-finish{padding:65px 7%}.story-finish>small:last-child{font-size:8px;letter-spacing:.5px}.story-finish h2{font-size:30px}.story-finish button{font-size:10px;padding:14px 20px}.story-finish>div{gap:12px}}
@media(max-height:700px) and (max-width:700px){.story-copy{top:16%}.story-copy h2{font-size:27px;margin:10px 0}.story-copy p{font-size:8px}.story-copy small{font-size:6px}.story-facts{bottom:85px}.story-facts strong{font-size:17px}}
.story-scene{perspective:none}
.story-box{z-index:9;perspective:1100px}
@media(max-width:700px){.story-label strong{font-size:10px}.story-label>div>span{font-size:8px}.story-label b{font-size:11px}.story-label>small{font-size:8px;line-height:1.4}}
@media(prefers-reduced-motion:reduce){.decomposition{animation:none}}