*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;height:100%;background:#000;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}:root{--black: #000000;--near-black: #050201;--coal: #0c0704;--ember-red: #b83200;--flame-orange: #ff6a00;--flame-gold: #ffd27a;--flare-white: #fff3dc;--warm-shift: 1.06;--hdr-contrast: 1.18;--hdr-shoulder: .92;--night: 0;--night-inv: 1;--night-warmth: calc(1 + var(--night) * .08);--night-dim: calc(1 - var(--night) * .18)}.room{position:relative;width:100vw;height:100vh;background:radial-gradient(circle at center,#120a05,#000 70%);background-color:var(--black);color-scheme:dark;overflow:hidden;--intensity: 1;contain:layout paint style;animation:camera-drift 60s ease-in-out infinite}.room::marker{content:""}.room:after,.room:before,.room::reflection{pointer-events:none}.room::reflection{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at center bottom,rgba(255,140,80,calc(.22 * var(--night-inv))),transparent 65%),linear-gradient(to top,rgba(255,120,40,calc(.1 * var(--night-inv))),transparent 55%);opacity:calc(.6 * var(--intensity, 1) * var(--night-inv));filter:blur(28px) saturate(.85);mix-blend-mode:screen;animation:wall-bounce 11s ease-in-out infinite,wall-drift 48s ease-in-out infinite}.room:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center bottom,rgba(255,140,0,calc(.22 * var(--night-inv))),transparent 70%);opacity:calc(.8 * var(--night-inv));z-index:0;animation:room-warmth 9s ease-in-out infinite alternate}.room:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center bottom,#0000 35%,#000000bf 88%);pointer-events:none;z-index:1;animation:vignette-breathe 14s ease-in-out infinite,shadow-flicker 3.6s steps(6) infinite}.fireplace-shell{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100vw;max-width:none;display:flex;flex-direction:column;align-items:center;z-index:3;animation:shell-drift 60s ease-in-out infinite}.mantle{width:100%;height:56px;background:linear-gradient(to bottom,#ffffff0f,#191919 18%,#0b0b0b);box-shadow:0 10px 28px #000000d9,inset 0 -2px #ffffff0d}.firebox{position:relative;width:100vw;max-width:none;height:420px;contain:layout paint style;background:radial-gradient(ellipse at center,var(--coal) 0%,var(--black) 78%);overflow:hidden;box-shadow:inset 0 0 140px #000000f7,inset 0 0 60px #ff64000f}.firebox *{will-change:transform,opacity}.firebox:before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.025);box-shadow:inset 0 0 0 2px #0009;pointer-events:none}.firebox:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 32%),radial-gradient(ellipse at center bottom,rgba(255,180,90,.14),transparent 62%);pointer-events:none;z-index:3}.hearth{width:100%;height:84px;background:linear-gradient(to bottom,#ffffff0a,#0b0b0b,#050505);box-shadow:inset 0 8px 16px #000000e6,0 -1px #ffffff08}.logs{position:absolute;bottom:4%;left:50%;width:min(1200px,85vw);height:80px;transform:translate(-52%);z-index:2;background:radial-gradient(circle at 20% 60%,rgba(255,90,0,.35),transparent 55%),radial-gradient(circle at 55% 50%,rgba(255,120,0,.4),transparent 60%),radial-gradient(circle at 80% 65%,rgba(255,70,0,.3),transparent 55%),linear-gradient(to top,#0a0503,#020100);border-radius:40px;filter:blur(1px);box-shadow:inset 0 0 22px #ff5a0040,inset 0 -12px 18px #000000e6;animation:log-pulse 11s ease-in-out infinite}.embers{position:absolute;bottom:6%;left:50%;width:min(1400px,90vw);height:120px;transform:translate(-50%) translate(12px);pointer-events:none;z-index:2}.ember{position:absolute;bottom:0;left:var(--x);width:var(--size);height:var(--size);transform:scale(var(--cluster));background:radial-gradient(circle,rgba(255,200,120,.9),rgba(255,120,0,.4) 60%,transparent 70%);border-radius:50%;opacity:calc(var(--burst, 0) * 1);box-shadow:0 0 6px #ff8c0099,0 0 12px #ff500040;animation-delay:var(--delay);animation:ember-rise 14s ease-out infinite}.flame-row{position:absolute;bottom:10%;left:50%;display:flex;gap:clamp(12px,2vw,28px);transform:translate(-50%);transform-origin:center bottom;-webkit-mask-image:radial-gradient(ellipse at center,black 55%,transparent 100%);mask-image:radial-gradient(ellipse at center,black 55%,transparent 100%)}.flame{width:28px;height:calc(210px + var(--noise-flare) * 24px);background:radial-gradient(ellipse at center bottom,rgba(255,255,255,.95),transparent 68%),linear-gradient(to top,var(--ember-red) 0%,var(--flame-orange) 32%,var(--flame-gold) 58%,rgba(255,240,220,.85) 78%,transparent 100%);border-radius:50% 50% 40% 40%;transform-origin:center 92%;transform:scaleY(var(--scale));filter:blur(calc(1.8px / var(--heat))) contrast(var(--hdr-contrast)) brightness(calc((.78 + var(--heat) * .32) * var(--hdr-shoulder) * var(--night-dim))) saturate(calc(1.08 * var(--night-warmth)));opacity:calc(.75 * var(--intensity) * var(--heat));clip-path:polygon(45% 0%,55% 0%,85% 40%,68% 100%,32% 100%,15% 40%);-webkit-mask-image:linear-gradient(to top,black 0%,black 55%,rgba(0,0,0,.55) 70%,transparent 100%);mask-image:linear-gradient(to top,black 0%,black 55%,rgba(0,0,0,.55) 70%,transparent 100%);animation-timing-function:cubic-bezier(.35,0,.65,1),ease-in-out,ease-in-out;animation-play-state:running;animation-delay:calc(var(--delay) * -1),calc(var(--delay) * -4);animation:flame-column 4.2s ease-in-out infinite,flare-up 32s ease-in-out infinite,flame-breathe 6s ease-in-out infinite}.flame:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center bottom,rgba(255,255,255,.55),transparent 65%);mix-blend-mode:screen;opacity:calc(var(--heat) * (.65 - var(--night) * .18));pointer-events:none;filter:brightness(1.15) saturate(1.05)}.flame[style*="--flare: 0"]{animation-name:flame-column}.flame-row.back{opacity:.35;filter:blur(8px);transform:translate(-50%) translate(-18px)}.flame-row.mid{opacity:.7;filter:blur(3.5px);transform:translate(-50%) translate(0)}.flame-row.front{opacity:1;filter:blur(.8px);transform:translate(-50%) translate(14px)}.flame-row.back .flame{animation-duration:4.4s,26s}.flame-row.mid .flame{animation-duration:3.6s,22s}.flame-row.front .flame{animation-duration:3.8s,24s}.heat-webgl{position:absolute;inset:0;pointer-events:none;z-index:4;mix-blend-mode:soft-light;opacity:.7;filter:blur(.4px)}.glow{position:absolute;bottom:10%;left:50%;width:min(1400px,90vw);height:500px;transform:translate(-48%);background:radial-gradient(ellipse at center,rgba(255,140,0,.35),transparent 70%);filter:blur(calc(28px + var(--night) * 10px)) saturate(.9);opacity:calc((.75 + var(--noise-flare) * .25) * (.9 * var(--night-inv) + .5 * var(--night)));z-index:1;animation-duration:7s;animation:glow-pulse 9s ease-in-out infinite}.sound-toggle{position:absolute;top:18px;right:18px;background:#00000059;border:none;border-radius:999px;width:42px;height:42px;color:#ffc88cd9;font-family:system-ui;font-size:16px;letter-spacing:.2em;text-transform:uppercase;mix-blend-mode:screen;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:.6;z-index:10;transition:opacity 1.2s ease}.room:not(:hover) .sound-toggle{opacity:.08}.sound-toggle:hover{background:#0000008c;transform:scale(1.05)}.sound-toggle:active{transform:scale(.96)}@keyframes shell-drift{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-2px)}}@keyframes camera-drift{0%{transform:scale(1) translateY(0)}50%{transform:scale(1.008) translateY(-2px)}to{transform:scale(1) translateY(0)}}@keyframes ember-rise{0%,78%{opacity:0}82%{opacity:1}to{opacity:0;transform:translate(calc(var(--drift) * 2.2)) translateY(calc(var(--rise) * -1.2)) scale(.12)}}@keyframes flame-column{0%{transform:translate(calc(var(--drift) * -.3 + var(--convection) * 1px)) skew(-1deg) scaleY(calc(var(--scale) * (.9 + var(--noise-breathe))))}50%{transform:translate(calc(var(--drift) + var(--convection) * 2px)) skew(1.6deg) scaleY(calc(var(--scale) * (1.05 + var(--noise-breathe))))}to{transform:translate(calc(var(--drift) * -.2 + var(--convection) * 1px)) skew(-.8deg) scaleY(calc(var(--scale) * (.94 + var(--noise-breathe))))}}@keyframes flare-up{0%,92%{filter:brightness(1)}94%{transform:translate(var(--drift)) scaleY(calc(var(--scale) * 1.35)) scaleX(1.08);filter:brightness(calc(1.15 + var(--noise-flare) * .15))}96%{transform:translate(calc(var(--drift) * .6)) scaleY(calc(var(--scale) * 1.55)) scaleX(1.02);filter:brightness(calc(1.35 + var(--noise-flare) * .25))}to{filter:brightness(1)}}@keyframes wall-bounce{0%{transform:translateY(0);opacity:calc(.45 * var(--night-inv))}50%{transform:translateY(-8px);opacity:calc(.75 * var(--night-inv))}to{transform:translateY(-3px);opacity:calc(.5 * var(--night-inv))}}@keyframes wall-drift{0%,to{filter:blur(26px) saturate(.85)}50%{filter:blur(34px) saturate(.75)}}@keyframes flame-breathe{0%,to{width:27px}50%{width:29px}}@keyframes vignette-breathe{0%,to{opacity:1}50%{opacity:.94}}@keyframes room-warmth{0%{opacity:.6}50%{opacity:.85}to{opacity:.6}}@keyframes glow-pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@keyframes shadow-flicker{0%{filter:brightness(1)}50%{filter:brightness(calc(.88 + var(--intensity) * .06))}to{filter:brightness(1)}}@keyframes log-pulse{0%,to{filter:brightness(calc(.95 + var(--night) * .08))}50%{filter:brightness(calc(1.05 + var(--night) * .12))}}@media(prefers-reduced-motion:reduce){.fire,.glow,.ember{animation:none}.sound-toggle{display:none}}@supports (opacity: clamp(0,1,1)){.room::reflection{opacity:clamp(.18,calc(.6 * var(--intensity) * var(--night-inv)),.75)}}@supports (content-visibility: auto){.firebox{content-visibility:auto;contain-intrinsic-size:420px}}
