:root{--rail:clamp(236px,17.3vw,294px);--gold:#efd6a9;--ink:#0e1a25}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%;overflow:hidden;background:#0c1318;color:#f5e9d6;font-family:Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid #efd0a0;outline-offset:4px}button img{user-select:none;-webkit-user-drag:none}#scene{height:100vh;height:100dvh;width:100%;position:relative;overflow:hidden;isolation:isolate;background:#17120f}#stage{position:absolute;left:0;top:0;bottom:0;right:var(--rail);overflow:hidden;isolation:isolate;contain:layout paint}.backdrop{position:absolute;inset:0;background:url('assets/window-v2.webp') center/100% 100% no-repeat;z-index:0}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,10,23,.07),rgba(2,10,23,0) 42%,rgba(25,13,8,.05) 72%,rgba(13,7,5,.24));z-index:1}#snowBack,#snowFront,#smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#snowBack{z-index:2}#snowFront{z-index:12}#smoke{z-index:13}#warmth{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at 9% 83%,rgba(255,153,42,.27) 0,rgba(255,153,42,.06) 23%,transparent 50%);mix-blend-mode:screen;transition:opacity 1.1s}
header{position:absolute;z-index:9;top:2.8%;left:30%;right:6%;text-align:center;text-shadow:0 3px 20px rgba(4,10,22,.65);pointer-events:none}h1{margin:0;font:400 clamp(39px,5vw,86px)/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.026em;color:#f9ead4;white-space:nowrap}.subtitle{margin:12px 0 0;font:italic clamp(16px,1.95vw,29px) Georgia,'Times New Roman',serif;white-space:nowrap;color:#e7ddce}.subtitle:before,.subtitle:after{content:'—';padding:0 12px;opacity:.8}
#branch{position:absolute;top:-1.2%;left:-1%;width:56%;height:auto;aspect-ratio:2/1;border:0;background:none;padding:0;z-index:8;touch-action:manipulation;filter:drop-shadow(0 7px 9px rgba(0,0,0,.25))}#branchArt{display:block;width:100%;height:100%;pointer-events:none}.bulbs{position:absolute;inset:0;pointer-events:none;opacity:1;transition:opacity .6s}.bulbs i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff3be;box-shadow:0 0 5px 2px #ffe4ad,0 0 15px 6px #ffb94e66,0 0 27px 12px #ffc45b30;animation:glimmer var(--period,3.8s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}@keyframes glimmer{0%,13%{opacity:.45;transform:scale(.74)}57%{opacity:1;transform:scale(1.13)}100%{opacity:.6;transform:scale(.84)}}
#bauble{position:absolute;z-index:7;left:20.5%;top:23.8%;width:8%;min-width:75px;max-width:115px;height:27%;border:0;background:transparent;transform-origin:50% 0;touch-action:manipulation;padding:0}.hanging-cord{position:absolute;left:50%;top:0;width:1px;height:36%;background:linear-gradient(#eed2a6,#816d4e);box-shadow:1px 0 #0004}#bauble img{position:absolute;left:0;top:29%;width:100%;filter:drop-shadow(0 9px 5px #0006)}
#globe{position:absolute;right:3.5%;bottom:10.6%;height:43%;aspect-ratio:360/395;max-height:395px;min-height:210px;z-index:7;border:0;background:none;padding:0;touch-action:manipulation;filter:drop-shadow(0 11px 11px #0009);transform-origin:50% 86%}#globe img{display:block;width:100%;height:100%;object-fit:contain}#globeSnow{position:absolute;left:12%;top:16%;width:68%;height:64%;border-radius:50%;pointer-events:none}
#candle{position:absolute;z-index:7;left:2.5%;bottom:11.5%;width:min(13%,180px);height:30%;max-height:245px;min-width:110px;min-height:153px;border:0;background:none;padding:0;touch-action:manipulation}.candle-halo{position:absolute;width:320%;height:200%;left:-110%;top:-95%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,#ffab4340 0,rgba(255,147,24,.09) 40%,transparent 70%)}.candle-glass{position:absolute;left:12%;bottom:0;width:76%;height:66%;border:1px solid #e0cbb2b0;border-radius:7px 7px 22px 22px;background:linear-gradient(85deg,#fff9 0%,#e0d5bd20 15%,#bb803f3a 50%,#fff5 90%),repeating-linear-gradient(60deg,transparent 0 13px,#fff2 13.5px 15px);box-shadow:inset 6px 0 6px #ffebcc44,inset -8px 0 7px #612d1855,0 14px 20px #0006;backdrop-filter:blur(1px)}.candle-shine{position:absolute;left:19%;bottom:13%;height:44%;width:7%;border-left:2px solid #ffedc180;border-radius:40%;pointer-events:none}.wax{position:absolute;left:18%;bottom:5%;width:64%;height:44%;border-radius:15% 15% 15% 15%;background:linear-gradient(100deg,#bb9766,#e9cd95 50%,#aa8156)}.wick{position:absolute;left:50%;bottom:50%;height:10%;width:2px;background:#42251b;z-index:2}.flame{position:absolute;z-index:3;left:calc(50% - 10px);bottom:59%;width:21px;height:49px;transform-origin:50% 92%;border-radius:55% 45% 48% 52% / 77% 79% 21% 23%;background:radial-gradient(ellipse at 50% 85%,#9aacf9 0%,#fff9d9 17%,#fff3b9 40%,#ffa125 69%,rgba(251,115,4,0) 80%);filter:drop-shadow(0 0 10px #ffb02c)}.flame i{position:absolute;left:37%;right:37%;top:39%;bottom:20%;background:#fffdf2;border-radius:55%}.out .flame,.out .candle-halo{opacity:0}.out .wick{background:linear-gradient(#d85d27,#261d18)}.blow-hint{position:absolute;z-index:6;left:1.2%;bottom:7%;width:16%;font:italic clamp(10px,.95vw,14px) Georgia,serif;color:#f4dfb9;text-align:center;text-shadow:0 2px 7px #261a17;opacity:.75;pointer-events:none;transition:opacity .7s}
#snowTray{position:absolute;z-index:6;bottom:25.3%;left:16%;width:51%;height:5.5%;min-height:31px;transform:rotate(-.4deg);filter:drop-shadow(0 4px 3px #0005)}#drawing{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;clip-path:polygon(0 24%,6% 14%,12% 13%,18% 7%,23% 13%,34% 6%,43% 12%,52% 5%,61% 12%,71% 7%,78% 13%,87% 10%,94% 13%,100% 22%,100% 100%,0 100%)}
#details{position:absolute;right:0;top:0;bottom:0;width:var(--rail);display:flex;flex-direction:column;align-items:center;gap:15px;padding:clamp(78px,10vh,106px) 16px 24px;background:radial-gradient(ellipse at 30% 42%,#412514 0,#1e1510 49%,#100e0d 100%);border-left:1px solid #c9ae7a55;box-shadow:inset 8px 0 20px #0506084a;z-index:8}#details:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;background:url('assets/window-v2.webp') 100% 42% / auto 130% no-repeat;filter:blur(22px)}.detail{width:min(100%,245px);height:clamp(146px,19vh,194px);flex:0 0 auto;position:relative;overflow:hidden;padding:0;border:1px solid #e3c0889c;border-radius:16px;box-shadow:0 12px 22px #0008,inset 0 0 2px #fff8;background:#221915;transition:transform .35s,box-shadow .35s}.detail:hover{transform:translateY(-3px);box-shadow:0 15px 30px #0009,0 0 17px #e0ac6530}.detail:active{transform:scale(.98)}.detail img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08)}.detail:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#110e11e3);pointer-events:none}.detail span{position:absolute;z-index:2;bottom:14px;left:6px;right:6px;text-align:center;font:italic clamp(17px,1.55vw,25px)/1.1 Georgia,serif;text-shadow:0 2px 6px #000b;color:#f6e5c9;white-space:nowrap}
#snowFront{z-index:14}#smoke{z-index:15}.toolbar{position:absolute;z-index:18;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:2px;border-radius:30px;padding:5px 9px;background:#211913b8;border:1px solid #c9a76c88;box-shadow:0 10px 35px #0008;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.toolbar button{display:flex;align-items:center;gap:7px;white-space:nowrap;border:0;border-radius:21px;padding:9px 12px;color:#f2dec0;background:none;font-size:11px;letter-spacing:.02em;transition:background .2s}.toolbar button:hover,.toolbar button[aria-pressed=true]{background:#eac48d22}.toolbar button:disabled{opacity:.45}.tool-icon{font-size:20px;line-height:1}
#toast{z-index:30;position:absolute;bottom:95px;left:50%;transform:translateX(-50%);max-width:min(88%,420px);padding:12px 18px;border:1px solid #ecd4aa66;border-radius:20px;background:#162332e8;box-shadow:0 10px 25px #0006;text-align:center;font-size:12px;line-height:1.4;color:#fbebd4;opacity:0;pointer-events:none;transition:opacity .3s}
#closeDrawing{position:absolute;z-index:35;left:50%;transform:translateX(-50%);bottom:16%;background:#edd3a8;color:#241a12;border:0;border-radius:99px;padding:12px 24px;font-weight:bold}#closeDrawing[hidden]{display:none}#settingsPanel{position:absolute;z-index:40;bottom:90px;right:calc(var(--rail) + 22px);width:328px;max-width:90vw;padding:22px;background:#19252deb;border:1px solid #dabd8d88;box-shadow:0 18px 50px #0008;backdrop-filter:blur(24px);border-radius:19px}#settingsPanel[hidden]{display:none}#settingsPanel h2{font:25px Georgia;margin:0 0 18px}#settingsPanel label{display:block;font-size:13px;margin:15px 0}#settingsPanel label.check{display:flex;gap:8px;align-items:center}input[type=range]{accent-color:#e2bd85;display:block;width:100%;margin:12px 0 8px}#settingsPanel p{font-size:11px;line-height:1.5;color:#d2c9bc}#closeSettings{width:100%;border:0;background:#ebcc98;color:#241c15;border-radius:12px;padding:11px;font-weight:bold}
@media(max-width:780px){:root{--rail:0px}#stage{right:0}.backdrop{background-size:auto 100%;background-position:52% center}#details{display:none}header{top:3%;left:3%;right:3%}h1{font-size:clamp(32px,9.5vw,54px)}.subtitle{font-size:clamp(13px,4vw,17px);margin-top:7px}.subtitle:before,.subtitle:after{padding:0 5px}#branch{top:18%;left:-21%;width:118%;z-index:8}#bauble{left:20%;top:38%;width:70px;height:22%}#globe{right:1%;bottom:15%;height:26%;min-height:160px}#candle{left:0%;bottom:16%;width:110px;height:190px;min-width:110px;min-height:190px}#snowTray{left:22%;width:44%;height:35px;bottom:26%}.blow-hint{bottom:13%;width:30%;font-size:11px}.toolbar{bottom:max(12px,env(safe-area-inset-bottom));padding:5px 7px}.toolbar button{padding:8px 10px;gap:4px;font-size:9px;flex-direction:column}.tool-icon{font-size:18px}#settingsPanel{right:5%;bottom:95px}#closeDrawing{bottom:19%}#toast{bottom:100px}}
@media(max-width:400px){#bauble{top:40%}#branch{top:20%;width:125%}#globe{height:24%}#snowTray{width:44%}h1{font-size:clamp(30px,9.3vw,40px)}}
@media(max-height:590px) and (min-width:781px){#details{padding-top:35px;gap:8px}.detail{height:28vh}#globe{height:43%;bottom:9%}#candle{height:36%;bottom:9%}#branch{width:42%}.toolbar{bottom:5px}#snowTray{bottom:17%}}
@media(prefers-reduced-motion:reduce){.bulbs i{animation:none}.detail{transition:none}}

/* Photographic hand-cut glass from the visual reference; live flame remains an independent animation. */
.candle-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none;filter:drop-shadow(0 10px 10px #190c064d);transition:filter .7s}.candle-glass,.candle-shine,.wax{display:none}.out .candle-photo{filter:brightness(.49) saturate(.6)}

/* V4: real photographic snow appears on the actual ledge, no modal. */
#snowTray {position:absolute;z-index:6;left:13.5%;width:60%;bottom:12.7%;height:17%;min-height:0;transform:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.19));opacity:0;pointer-events:none;transition:opacity .7s ease;contain:layout paint;}
#snowTray.snow-ready{opacity:1;pointer-events:auto;}
#drawing{display:block;width:100%;height:100%;clip-path:none;cursor:crosshair;touch-action:none;}
#snowTray.snow-ready:active{cursor:crosshair}
#snowTray.snow-pulse{animation:trayPulse 1.2s ease}
@keyframes trayPulse{0%,100%{filter:drop-shadow(0 6px 6px rgba(0,0,0,.19))}45%{filter:drop-shadow(0 0 18px rgba(255,255,255,.65))}}
#sillHint {position:absolute;z-index:10;left:32%;bottom:13.7%;font:italic clamp(12px,1.15vw,16px) Georgia,serif;color:#ffe1b2;text-shadow:0 2px 7px #0c1421,0 0 10px #24160d;opacity:.86;pointer-events:none;transition:opacity .7s ease;transform:rotate(-2deg)}
#sillHint.gone{opacity:0;}
#ornamentCord{position:absolute;z-index:7;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
#cordPath{stroke:#c69e6c;stroke-width:1.45;fill:none;filter:drop-shadow(1px 0 1px #21120c);stroke-linecap:round;}
#bauble{z-index:9;touch-action:none;user-select:none;will-change:transform;cursor:grab;}
#bauble:active{cursor:grabbing;}
#bauble .hanging-cord{display:none;}
#bauble.detached{cursor:pointer;}
@media (max-width:780px){
 #snowTray{left:13%;width:67%;bottom:14%;height:14%;}
 #sillHint{left:21%;bottom:15%;font-size:12px}
}
@media(max-width:400px){#snowTray{left:16%;width:64%;height:12.5%;bottom:14.5%;}}


/* V5: immersion-first mobile entry, no bottom helper UI. */
.toolbar,.blow-hint,#toast,#sillHint{display:none !important;}
#settingsPanel{display:none !important;}
.side-toggle{position:absolute;z-index:22;right:18px;top:22px;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid rgba(226,188,129,.55);background:rgba(22,14,10,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(0,0,0,.32);color:#f5dfb5;font:600 12px/1.1 Inter,system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;user-select:none}
.side-toggle .switch{position:relative;width:36px;height:20px;border-radius:999px;background:rgba(236,197,129,.25);box-shadow:inset 0 0 0 1px rgba(248,218,163,.45)}
.side-toggle .switch i{position:absolute;top:2px;left:18px;width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,#ffe8bb,#d4a356);box-shadow:0 1px 5px rgba(0,0,0,.35);transition:left .22s ease, transform .22s ease}
.side-toggle.is-off .switch{background:rgba(102,86,67,.35)}
.side-toggle.is-off .switch i{left:2px;background:linear-gradient(180deg,#d3c7b4,#8f7f67)}
#entryOverlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:linear-gradient(180deg,rgba(5,8,16,.72),rgba(7,8,14,.88));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#entryOverlay.hidden,[hidden]#entryOverlay{display:none}
#entryOverlay .entry-card{width:min(100%,420px);padding:24px 20px;border-radius:26px;border:1px solid rgba(235,202,146,.38);background:radial-gradient(circle at top,rgba(41,29,20,.95),rgba(15,11,10,.96));box-shadow:0 24px 60px rgba(0,0,0,.42);color:#f8ead0;text-align:center}
#entryOverlay .entry-eyebrow{font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.25em;color:#e4c289;margin-bottom:14px}
#entryOverlay h2{margin:0 0 12px;font:400 clamp(28px,7vw,38px)/1.05 Georgia,serif;color:#fff2dc}
#entryOverlay p{margin:0 0 18px;color:#eddab8;font:400 15px/1.45 Inter,system-ui,sans-serif}
#enterFullscreen,#enterContinue{width:100%;border:0;border-radius:18px;padding:16px 18px;font:700 15px/1 Inter,system-ui,sans-serif;cursor:pointer}
#enterFullscreen{background:linear-gradient(180deg,#f1d29f,#d3a05b);color:#27160e;box-shadow:0 12px 26px rgba(0,0,0,.28)}
#enterContinue{margin-top:10px;background:rgba(255,255,255,.06);color:#f3dfbb;border:1px solid rgba(255,224,174,.2)}
@media (min-width:781px){ #entryOverlay{display:none !important;} }
@media (max-width:780px){ .side-toggle{top:max(10px,env(safe-area-inset-top));right:10px;transform:scale(.96);transform-origin:top right} }


/* V6: no right hints, no snow globe, stronger realism. */
#details,#globe,#globeSnow{display:none !important;}
#stage{right:0 !important;}
#snowTray{left:14%;width:64%;bottom:12.3%;height:18.5%;filter:drop-shadow(0 9px 10px rgba(0,0,0,.22));}
#branch{left:-3%;top:-1%;width:49%;}
#bauble{left:19.5%;top:26.8%;width:8.6%;min-width:78px;max-width:118px;height:30%;}
#bauble img{filter:drop-shadow(0 10px 10px rgba(0,0,0,.4)) saturate(1.06) contrast(1.02)}
#candle{left:2.2%;bottom:11.6%;width:min(13%,180px);}
header{top:3.3%;left:17.6%;right:17.6%;}
#sillHint{display:none !important;}
.wall-switch{position:absolute;z-index:24;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;color:#e9d3ad;cursor:pointer}
.wall-switch-label{font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.wall-switch .plate{position:relative;display:block;width:48px;height:78px;border-radius:14px;background:linear-gradient(180deg,#6a4e35,#453221);border:1px solid rgba(251,223,180,.28);box-shadow:0 10px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.15), inset 0 -2px 10px rgba(0,0,0,.22)}
.wall-switch .plate::after{content:'';position:absolute;inset:8px;border-radius:10px;border:1px solid rgba(255,231,188,.16)}
.wall-switch .rocker{position:absolute;left:9px;right:9px;top:10px;bottom:10px;border-radius:10px;background:linear-gradient(180deg,#f1dfb7,#a67a45 62%,#8a6035);box-shadow:inset 0 2px 8px rgba(255,255,255,.32), inset 0 -8px 12px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.28);transform-origin:center;transition:transform .24s ease, filter .24s ease}
.wall-switch.is-off .rocker{transform:translateY(8px) rotateX(18deg);filter:saturate(.55) brightness(.85)}
#chimneySmoke{position:absolute;left:60.3%;top:19.8%;width:9%;height:16%;z-index:2;pointer-events:none;filter:blur(.2px)}
#chimneySmoke span{position:absolute;left:50%;bottom:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 45% 40%, rgba(241,244,249,.72), rgba(207,216,227,.36) 45%, rgba(189,201,214,.07) 72%, transparent 76%);animation:chimneyFloat 6s linear infinite;opacity:.0}
#chimneySmoke span:nth-child(2){animation-delay:1.3s;left:58%;transform:scale(1.12)}
#chimneySmoke span:nth-child(3){animation-delay:2.7s;left:46%;transform:scale(.9)}
#chimneySmoke span:nth-child(4){animation-delay:4.1s;left:54%;transform:scale(1.22)}
@keyframes chimneyFloat{0%{transform:translate(-2px,6px) scale(.55);opacity:0}12%{opacity:.5}55%{opacity:.3}100%{transform:translate(12px,-92px) scale(1.9);opacity:0}}
#entryOverlay .entry-eyebrow{letter-spacing:.2em}
#entryOverlay h2{font-size:clamp(30px,7vw,40px)}
#entryOverlay p{font-size:15px}
@media(max-width:780px){
  header{left:7%;right:7%;top:4%;}
  #branch{left:-19%;top:16%;width:118%;}
  #bauble{left:19%;top:36.5%;width:76px;height:23%;}
  #snowTray{left:14%;width:70%;bottom:14%;height:15%;}
  .wall-switch{right:10px;top:58%;transform:translateY(-50%) scale(.92)}
  #chimneySmoke{left:64.2%;top:27.2%;width:12%;height:11%;}
}