.story-art{isolation:isolate;min-height:580px;background:radial-gradient(ellipse at 50% 78%,#78351d 0%,#30251c 35%,#191c18 73%);border:1px solid #b5956c42;box-shadow:0 24px 60px #29272020}
.story-art::before{content:'';position:absolute;inset:12px;border:1px solid #d1af7926;pointer-events:none;z-index:3}
.story-art .fire-halo{display:none}
.story-art img{width:190px;margin-top:-20px;filter:brightness(0) invert(.95) drop-shadow(0 0 24px #ffb47033)}
.story-art>span{z-index:2;font-family:Georgia,serif;font-style:italic;font-size:27px;letter-spacing:.3px;line-height:1.3;margin-top:28px;text-shadow:0 2px 18px #191c18}
.story-art .coordinates{z-index:3;bottom:28px;letter-spacing:1.6px;font-size:7px}
.roast-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.roast-aura{position:absolute;width:100%;height:85%;left:0;top:8%;background:radial-gradient(ellipse,#ffb16525 0%,transparent 60%);animation:roast-breathe 7s ease-in-out infinite alternate}
.roast-ring{position:absolute;width:76%;aspect-ratio:1;left:12%;top:10%;border-radius:50%;border:1px solid #dfa05b4a;box-shadow:0 0 35px #e55e1114,inset 0 0 30px #e98b2814}
.roast-ring::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px dashed #d7b18330}
.roast-ring::after{content:'';position:absolute;inset:0;border-radius:50%;border-top:2px solid #edb16f;border-right:1px solid #e1783550;filter:drop-shadow(0 0 6px #ed8b42);transform:rotate(-40deg)}
.roast-ring.outer{animation:roast-orbit 32s linear infinite}
.roast-ring.inner{width:65%;left:17.5%;top:15%;border-color:#e3c49d20;animation:roast-orbit 45s linear infinite reverse}
.roast-ring.inner::before{display:none}.roast-ring.inner::after{border-top-color:#c58b4e60}
.roast-bean{position:absolute;width:var(--size);aspect-ratio:.7;left:var(--x);top:var(--y);transform:rotate(var(--angle));animation:roast-drift var(--duration) ease-in-out infinite alternate;filter:drop-shadow(5px 12px 8px #0008)}
.roast-bean svg{width:100%;height:100%;overflow:visible}
.roast-ember{position:absolute;width:var(--size);height:var(--size);left:var(--x);bottom:10%;background:#ffc484;border-radius:50%;box-shadow:0 0 10px #ff6e24;opacity:0;animation:roast-rise var(--duration) linear infinite;animation-delay:var(--delay)}
.roast-glow{position:absolute;left:-15%;right:-15%;height:28%;bottom:-18%;border-radius:50%;background:#e26c2f;filter:blur(32px);opacity:.75;animation:roast-breathe 4s ease-in-out infinite alternate}
.roast-flames{position:absolute;left:0;right:0;bottom:0;height:36%;opacity:.88;filter:drop-shadow(0 0 9px #ff722950);mask-image:linear-gradient(#000 65%,transparent 100%)}
.roast-flames svg{width:100%;height:100%;overflow:visible}
.flame-tongue{transform-box:fill-box;transform-origin:50% 100%;animation:roast-flame var(--flicker) ease-in-out infinite alternate}
.roast-glow{background:#fa7429;height:34%;bottom:-20%;filter:blur(28px)}
@keyframes roast-flame{0%{transform:scaleY(.86) skewX(var(--lean));opacity:.7}45%{transform:scaleY(1.04) skewX(0deg);opacity:1}100%{transform:scaleY(.93) skewX(calc(var(--lean) * -1));opacity:.85}}
.roast-caption{position:absolute;top:32px;left:0;right:0;text-align:center;font:9px Arial,sans-serif;letter-spacing:3px;color:#d6ae79;z-index:3}
.roast-caption::before{content:'';display:inline-block;width:5px;height:5px;margin-right:9px;background:#eea667;border-radius:50%;box-shadow:0 0 10px #ef8f42}
.roast-toggle{position:absolute;right:22px;bottom:54px;z-index:4;border:1px solid #dcc49b50;border-radius:50%;width:32px;height:32px;background:#201d1780;color:#dfcfb5;font-size:12px;cursor:pointer}
.roast-toggle:focus-visible{outline:2px solid #efab72;outline-offset:4px}
.story-art[data-roast-paused="true"] .roast-scene *{animation-play-state:paused}
@keyframes roast-orbit{to{transform:rotate(360deg)}}
@keyframes roast-drift{from{transform:translateY(-8px) rotate(var(--angle))}to{transform:translateY(12px) rotate(calc(var(--angle) + 14deg))}}
@keyframes roast-breathe{from{opacity:.45;transform:scale(.92)}to{opacity:.9;transform:scale(1.08)}}
@keyframes roast-rise{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:.8}80%{opacity:.4}100%{opacity:0;transform:translate(var(--drift),-440px) scale(.2)}}
@media(max-width:640px){.story-art{min-height:480px}.story-art img{width:155px}.story-art>span{font-size:24px}.roast-caption{font-size:8px;letter-spacing:2px}.story-art .coordinates{font-size:6px;letter-spacing:1px}.roast-ring{top:18%}.roast-ring.inner{top:21%}.roast-bean-2,.roast-bean-3{top:77%}}
@media(prefers-reduced-motion:reduce){.roast-scene *{animation:none!important}.roast-ember:nth-of-type(3n){opacity:.35;bottom:35%}.roast-toggle{display:none}}