@charset "UTF-8";
:root{color-scheme:dark;--ink:#0c171c;--gold:#d7b57a;--paper:#f1e5ce;--signal:0;--portal-x:50%;--portal-y:55%;font-family:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--ink);color:var(--paper)}body{overflow-x:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ffe3a5;outline-offset:6px}button{color:inherit}button[hidden],[hidden]{display:none!important}a{color:inherit;text-decoration:none}
.radio-scene{min-height:100svh;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 20% 48%,#34494b33,transparent 50%),radial-gradient(ellipse at 76% 76%,#8a65324f,transparent 38%),linear-gradient(130deg,#14252d,#111e24 48%,#080f14);display:flex;flex-direction:column;align-items:center;padding:28px 5vw 22px}
.wall-grain{position:absolute;z-index:-3;inset:0;opacity:.16;background:repeating-linear-gradient(0deg,transparent 0 3px,#c7c1ac0a 4px 5px),repeating-linear-gradient(90deg,transparent 0 60px,#c2b58c12 61px 62px)}
.window-light{position:absolute;inset:-20% 50% 0 -25%;z-index:-2;transform:rotate(-28deg);background:repeating-linear-gradient(90deg,transparent 0 13%,#8baeb313 14% 20%,transparent 21% 30%);filter:blur(4px);mask-image:linear-gradient(#0000,#000,#0000)}
.table{position:absolute;z-index:-1;left:-20%;width:140%;top:var(--table-top,70%);bottom:-30px;background:radial-gradient(ellipse at 52% 0%,#b47a3d4a,transparent 65%),repeating-linear-gradient(1deg,#0000 0 2px,#c99c6320 3px,#0000 5px 14px),linear-gradient(#332b22,#191e20 85%);box-shadow:0 -2px 2px #d5b88613,0 -20px 70px #03090b;}
.dust{position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.36;background-image:radial-gradient(circle at 18% 37%,#cbd6b7b0 0 .7px,transparent 1.3px),radial-gradient(circle at 76% 22%,#d8bc7b 0 .6px,transparent 1px),radial-gradient(circle at 84% 66%,#e3c39a 0 .8px,transparent 1.5px),radial-gradient(circle at 33% 79%,#e8e6bd 0 .7px,transparent 1px);background-size:430px 310px,520px 490px,710px 360px,620px 560px;animation:dust 23s linear infinite alternate}
@keyframes dust{to{transform:translate3d(8px,-14px,0);opacity:.18}}
.masthead{align-self:stretch;display:flex;align-items:center;justify-content:space-between;max-width:1500px;width:100%;margin:0 auto;position:relative;z-index:1}.brand{font-family:Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:3px;display:flex;align-items:center;gap:9px}.brand i{font-family:Georgia,serif;font-size:14px;letter-spacing:0;font-weight:400;color:var(--gold)}.brand-mark{font-size:31px;color:var(--gold);font-weight:400;letter-spacing:0;line-height:1}.private-wave{font:9px Arial,sans-serif;letter-spacing:2.7px;color:#afa98c;display:flex;align-items:center;gap:10px}.private-wave>span{width:4px;height:4px;border-radius:50%;background:#d7b57a;box-shadow:0 0 10px #dab87980}
.intro{text-align:center;margin-top:clamp(22px,4.5vh,64px);z-index:1}.eyebrow{font:9px Arial,sans-serif;letter-spacing:3.7px;color:#bdac8c;margin:0 0 14px}.intro h1{font-weight:400;font-size:clamp(36px,4.8vw,65px);letter-spacing:-1.6px;line-height:1.1;margin:0;text-shadow:0 3px 28px #0008}.intro-line{font-size:clamp(13px,1.3vw,17px);font-style:italic;letter-spacing:.1px;color:#b9b4a1;margin:14px 0 0}
.receiver-wrap{position:relative;flex:none;width:min(860px,76vw,110vh);margin:clamp(22px,4vh,48px) auto 0;z-index:1}.receiver{position:relative;width:100%;aspect-ratio:1672/941;filter:drop-shadow(0 18px 25px #0008)}.receiver-art{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}.receiver-shadow{position:absolute;bottom:-1.8%;height:10%;left:6%;right:6%;border-radius:50%;background:#000c;filter:blur(16px)}
.dial{position:absolute;left:13.2%;top:24.1%;width:73.4%;height:16.5%;padding:.9% 1.6% 0;color:#cba66a;text-shadow:0 0 8px #eac47550;font-family:Arial,sans-serif;overflow:hidden;box-shadow:inset 0 0 22px #d88b1710;background:radial-gradient(ellipse at 25% 90%,#b56f141a,transparent 70%)}.dial-header{display:flex;align-items:center;justify-content:space-between;height:45%}.dial-brand{font:clamp(7px,1.05vw,12px) Georgia,serif;letter-spacing:3px;color:#bca06d;white-space:nowrap}.dial-brand em{font-size:.8em;letter-spacing:1px}#frequency{font-size:clamp(13px,2vw,25px);font-family:Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#f4d48a}#frequency small{font:8px Arial,sans-serif;letter-spacing:1px;color:#bda273}.tuning-track{position:relative;height:48%;margin-top:1%}.minor-ticks{position:absolute;inset:0 0 30%;background:repeating-linear-gradient(90deg,#b7925c90 0 1px,transparent 1px 2.5%);border-top:1px solid #b7925c55}.dial-numbers{position:absolute;top:42%;width:100%;display:flex;justify-content:space-between;font-size:clamp(6px,.75vw,9px);letter-spacing:1px}.needle{position:absolute;width:2px;top:-20%;height:120%;left:0%;background:#f6c36b;box-shadow:0 0 7px #ffbb4f;transition:left .19s ease}
.tune{position:absolute;top:64.1%;width:7.1%;min-width:44px;aspect-ratio:1;border-radius:50%;border:0;transform:translate(-50%,-50%);background:transparent;display:grid;place-items:center;padding:0;color:#392b18;text-shadow:0 1px 1px #ffe3a782;transition:filter .16s,box-shadow .2s}.tune-left{left:70.35%}.tune-right{left:82.8%}.tune>span{font-family:Georgia,serif;font-size:clamp(25px,3.4vw,40px);line-height:.8;transform:translateY(-3%);user-select:none}.tune:hover:not(:disabled){background:radial-gradient(circle,#ffeab525,transparent 68%);filter:brightness(1.3);box-shadow:0 0 25px #e5ab2825}.tune:active:not(:disabled){transform:translate(-50%,-50%) scale(.95);filter:brightness(.85)}.tune:disabled{opacity:.55}.pilot{position:absolute;top:48.6%;left:87.3%;width:2.8%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 calc(5px + var(--signal)*20px) #ffc249;opacity:calc(.2 + var(--signal)*.7);pointer-events:none}.signal{position:absolute;left:68%;top:80.1%;width:17%;height:3%;display:flex;gap:9%;align-items:flex-end;justify-content:center;opacity:.7}.signal i{width:6%;background:#5b4425;height:30%;transition:background .2s,box-shadow .2s}.signal i:nth-child(2){height:45%}.signal i:nth-child(3){height:65%}.signal i:nth-child(4){height:83%}.signal i:nth-child(5){height:100%}.signal i.lit{background:#e4bc70;box-shadow:0 0 5px #dcaa4f80}
.radio-caption{text-align:center;z-index:2;margin:clamp(12px,2.5vh,27px) 0 20px;min-height:64px;max-width:90vw}.radio-caption>p{font-size:15px;letter-spacing:.2px;color:#ded5bf;min-height:22px;margin:0 0 17px}.caption-bottom{display:flex;justify-content:center;align-items:center;gap:30px}.key-hint{display:flex;align-items:center;gap:12px;color:#ae9570;font-size:16px}.key-hint span,.quiet-button{font:8px Arial,sans-serif;letter-spacing:2px;color:#a09781}.quiet-button{border:0;background:none;padding:7px;color:#a09781}.quiet-button span{color:#d2ba8f;margin-left:3px}.retry{margin-top:15px;border:1px solid #a99063;background:#9c764d20;border-radius:5px;padding:10px 17px;font:13px Arial,sans-serif}.radio-footer{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:21px;width:100%;font:8px Arial,sans-serif;letter-spacing:2.2px;color:#8c8e82;z-index:1}.footer-line{height:1px;background:#b6a37d40;width:50px}
.performance{position:fixed;inset:0;background:#080c10;z-index:10;overflow:hidden;isolation:isolate}.film-ambient{position:absolute;inset:-8%;background-position:center;background-size:cover;filter:blur(34px) brightness(.25) saturate(.75);z-index:-1;opacity:.8}.film-frame{position:absolute;width:min(100vw,calc((100svh - 86px)*16/9));aspect-ratio:16/9;left:50%;top:calc((100svh - 68px)/2);transform:translate(-50%,-50%);overflow:hidden;background:#090d10}.film-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:transform,opacity;user-select:none}.film-image.previous{z-index:1}.film-image.current{z-index:2}.film-light{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:0;background:radial-gradient(ellipse at 18% 55%,#9ed06715,transparent 45%)}.episode-title{position:absolute;left:7vw;bottom:17%;z-index:5;pointer-events:none;text-shadow:0 2px 25px #000,0 1px 4px #000}.episode-title p{font:9px Arial,sans-serif;letter-spacing:3px;color:#f0cc8f;margin:0 0 12px}.episode-title h2{font-size:clamp(25px,3.7vw,50px);font-weight:400;margin:0;color:#fff1da}.player-controls{position:absolute;z-index:6;bottom:0;left:50%;transform:translateX(-50%);width:min(1080px,100%);min-height:72px;padding:12px max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:16px;background:linear-gradient(#09101433,#091014e8);font:11px Arial,sans-serif;color:#d3c9b6}.player-controls button{border:0;background:none;min-width:38px;min-height:38px;padding:5px;color:#e6d8bf;font:inherit}.back-button{display:flex;align-items:center;gap:8px;white-space:nowrap;margin-right:7px}.play-button{font:20px Arial,sans-serif!important}.player-controls output{font-variant-numeric:tabular-nums;min-width:30px}.seek{flex:1;min-width:40px;accent-color:#d3b27b;height:25px}.volume{width:70px;accent-color:#d3b27b}.icon-button{font-size:22px!important}.playback-notice{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:20px;background:#0c171cec;box-shadow:0 5px 90px #0008;border:1px solid #bba17045;border-radius:8px;padding:24px 32px;font:15px/1.6 Arial,sans-serif;text-align:center;max-width:88vw}.playback-notice button{background:#d0aa70;color:#172026;border:0;border-radius:4px;padding:12px 24px;font:15px Arial,sans-serif}.portal-glow{position:fixed;z-index:11;left:var(--portal-x);top:var(--portal-y);width:12vw;height:6vw;transform:translate(-50%,-50%);pointer-events:none;filter:blur(12px);border-radius:50%;box-shadow:0 0 45px 15px #e4c79455,inset 0 0 30px #deb36533;opacity:0}.performance.is-opening .player-controls,.performance.is-opening .episode-title,.performance.is-closing .player-controls{visibility:hidden}.performance.is-opening .film-frame,.performance.is-closing .film-frame{width:min(100vw,calc(100svh*16/9));top:50%}.noscript{position:fixed;inset:auto 15px 15px;z-index:50;padding:20px;background:#503d26;color:white}
@media(min-width:1600px){.receiver-wrap{width:min(1000px,72vw,118vh)}}
@media(max-height:800px) and (min-width:750px){.radio-scene{padding-top:20px;padding-bottom:17px}.intro{margin-top:18px}.intro h1{font-size:44px}.eyebrow{margin-bottom:10px}.intro-line{margin-top:9px}.receiver-wrap{width:min(760px,70vw,103vh);margin-top:24px}.radio-caption{margin-top:13px;margin-bottom:15px}.radio-caption>p{margin-bottom:8px}.radio-footer{letter-spacing:1.6px}}
@media(max-width:700px){.radio-scene{padding:22px 20px 22px;min-height:100svh;justify-content:flex-start}.masthead{gap:10px}.brand{font-size:11px;letter-spacing:2px}.private-wave{font-size:7px;letter-spacing:1.5px;max-width:115px;line-height:1.8}.private-wave>span{flex:none}.intro{margin-top:clamp(55px,10vh,90px)}.eyebrow{font-size:7px;letter-spacing:2.2px}.intro h1{font-size:clamp(35px,8.5vw,58px);letter-spacing:-1px}.intro-line{margin-top:14px;font-size:13px}.receiver-wrap{width:calc(100vw - 12px);margin-top:50px;margin-left:-14px;margin-right:-14px}.dial{padding-top:.6%}.dial-brand{font-size:7px;letter-spacing:1.5px}#frequency{font-size:14px}#frequency small{font-size:6px;letter-spacing:0}.dial-numbers{font-size:6px}.radio-caption{margin-top:30px;max-width:100%}.radio-caption>p{font-size:13px;max-width:310px;line-height:1.6;margin:auto auto 13px;min-height:42px}.caption-bottom{gap:18px}.key-hint span,.quiet-button{font-size:7px;letter-spacing:1.3px}.radio-footer{font-size:6px;letter-spacing:1.3px;gap:12px;padding-top:40px}.footer-line{width:25px}.table{height:42%;bottom:-2%}.player-controls{padding-left:10px;padding-right:10px;gap:8px}.back-button span{display:none}.volume{display:none}.episode-title{left:7%;bottom:calc(50% - 30vw);}.episode-title p{font-size:7px;margin-bottom:8px;letter-spacing:1.7px}.episode-title h2{font-size:23px}.player-controls output{font-size:10px}.player-controls button{min-width:32px}.film-frame{width:100vw}}
@media(max-height:540px) and (orientation:landscape){.radio-scene{padding-top:12px;padding-bottom:12px}.intro{margin-top:5px}.intro h1{font-size:29px}.eyebrow{font-size:6px;margin-bottom:5px}.intro-line{display:none}.receiver-wrap{width:min(510px,58vw,104vh);margin-top:10px}.radio-caption{margin:3px 0 5px;min-height:40px}.radio-caption>p{font-size:11px;margin-bottom:4px}.radio-footer{display:none}.player-controls{min-height:55px}.film-frame{width:min(100vw,calc((100svh - 55px)*16/9));top:calc((100svh - 55px)/2)}.episode-title{bottom:23%}}
/* Keep the tabletop at the radio's feet at every viewport size. */
.radio-scene .table{height:auto;bottom:-30px}
.portal-edge{position:fixed;inset:0;width:100vw;height:100svh;z-index:12;pointer-events:none;overflow:hidden;stroke:#edcca0;stroke-width:2;filter:drop-shadow(0 0 3px #e7b26c) drop-shadow(0 0 12px #f6cf864d)}
/* A single photographic room, with the interactive radio grounded in its plane. */
/* The oversized ambient backdrop must not create a scrollable focus container. */
.performance{overflow:clip}
.radio-scene{display:block;height:100svh;min-height:100svh;background:#122023;padding:24px 4vw 18px}
.room-plate{position:absolute;inset:0;z-index:-4;display:block;pointer-events:none}
.room-plate img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.room-shade{position:absolute;inset:0;z-index:-3;pointer-events:none;background:linear-gradient(#05101638 0%,transparent 34%,transparent 73%,#0710148c 100%)}
.radio-scene .masthead{text-shadow:0 2px 8px #000;position:relative;z-index:3}
.radio-scene .intro{position:absolute;left:50%;top:clamp(58px,8vh,90px);transform:translateX(-50%);width:min(680px,82vw);margin:0;z-index:2;text-shadow:0 2px 12px #000}
.radio-scene .intro h1{font-size:clamp(38px,4vw,57px)}
.radio-scene .intro-line{color:#e4d3b4;text-shadow:0 2px 8px #000}
.radio-scene .receiver-wrap{position:absolute;left:50%;top:var(--radio-ground,76%);width:var(--radio-width,54vw);transform:translate(-50%,-97.2%);margin:0;z-index:1;flex:none}
.radio-scene .receiver{filter:drop-shadow(8px 10px 9px #0006)}
.radio-scene .tune-left{left:calc(70.35% - var(--tap-shift,0px))}
.radio-scene .tune-right{left:calc(82.8% + var(--tap-shift,0px))}
.radio-scene .tune-left>span{transform:translate(var(--tap-shift,0px),-3%)}
.radio-scene .tune-right>span{transform:translate(calc(0px - var(--tap-shift,0px)),-3%)}
.radio-scene .receiver-shadow{bottom:1.5%;left:7%;right:7%;height:7%;background:#100a06c9;filter:blur(12px)}
.receiver-contact{position:absolute;inset:0;pointer-events:none}
.receiver-contact::before,.receiver-contact::after{content:"";position:absolute;bottom:1.3%;width:10%;height:1.8%;background:#080604d9;border-radius:50%;filter:blur(3px)}
.receiver-contact::before{left:7%}.receiver-contact::after{right:7%}
.radio-scene .radio-caption{position:absolute;left:50%;bottom:6.3%;transform:translateX(-50%);width:min(650px,80vw);max-width:none;margin:0;min-height:0;text-shadow:0 2px 8px #000}
.radio-scene .radio-caption>p{color:#f6e7ca;line-height:1.6;margin:0 auto 10px;font-size:15px;min-height:24px}
.radio-scene .caption-bottom{gap:25px}
.radio-scene .quiet-button,.radio-scene .key-hint span{color:#dfc7a0}
.radio-scene .radio-footer{position:absolute;bottom:17px;left:0;margin:0;padding:0 20px;color:#c7bb9d;text-shadow:0 2px 5px #000}
.film-light.concert-light{background:radial-gradient(ellipse at 20% 50%,#814ba31b,transparent 55%),radial-gradient(ellipse at 85% 40%,#4489db18,transparent 50%)}
.player-controls .dynamics-button{display:flex;align-items:center;gap:6px;border:1px solid #c9a96755;border-radius:5px;padding:3px 8px;font:10px Arial,sans-serif;color:#e6c695;white-space:nowrap}
.dynamics-button>span:first-child{font-size:25px;line-height:1}
.player-controls .dynamics-button[aria-pressed="false"]{color:#9ba4aa;border-color:#7a838755}
.player-controls .dynamics-button:disabled{opacity:.55;cursor:default}
@media(max-aspect-ratio:1/1){
 .radio-scene .intro{top:clamp(64px,8vh,82px);width:85vw}
 .radio-scene .intro h1{font-size:clamp(36px,6vw,52px)}
 .radio-scene .eyebrow{font-size:8px;letter-spacing:2.6px;margin-bottom:10px}
 .radio-scene .radio-caption{width:min(520px,88vw);bottom:5.8%}
 .radio-scene .radio-caption>p{max-width:440px;font-size:14px}
}
@media(max-width:700px){
 .radio-scene{padding:20px}
 .radio-scene .intro{top:76px}
 .radio-scene .intro h1{font-size:clamp(34px,8.5vw,48px)}
 .radio-scene .eyebrow{font-size:6.5px;letter-spacing:1.8px}
 .radio-scene .intro-line{font-size:12px;margin-top:10px}
 .radio-scene .radio-caption{bottom:5.8%;width:88vw}
 .radio-scene .radio-caption>p{max-width:310px;font-size:12px;min-height:38px;margin-bottom:9px}
 .radio-scene .radio-footer{font-size:6px;bottom:15px}
 .player-controls .dynamics-button{width:32px;min-width:32px;padding:0;justify-content:center}
 .dynamics-label{display:none}
 .player-controls{gap:6px}.seek{min-width:26px}
}
@media(min-width:701px) and (max-aspect-ratio:1/1){
 .radio-scene .intro{left:40%;width:68vw}
 .radio-scene .intro h1{font-size:clamp(36px,5.5vw,48px)}
 .radio-scene .radio-caption{left:48%;width:50vw}
 .radio-scene .radio-caption>p{max-width:310px;font-size:13px}
}
@media(max-height:540px) and (orientation:landscape){
 .radio-scene{padding-top:12px}
 .radio-scene .intro{display:none}
 .radio-scene .radio-caption{bottom:13px;min-height:0}
 .radio-scene .radio-caption>p{font-size:11px;min-height:0;margin-bottom:3px}
 .radio-scene .caption-bottom{display:none}.radio-scene .radio-footer{display:none}
}
/* The visible halo follows the brass cap, independently of its 44px hit target. */
.radio-scene .dial-header{justify-content:flex-end}
.radio-scene .tune{min-height:44px;--cap-offset:0px}
.radio-scene .tune-left{--cap-offset:var(--tap-shift,0px)}
.radio-scene .tune-right{--cap-offset:calc(0px - var(--tap-shift,0px))}
.radio-scene .tune::before{content:"";position:absolute;left:calc(50% + var(--cap-offset));top:50%;width:var(--tune-size,40px);height:var(--tune-size,40px);transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid #ffe2a6;box-shadow:0 0 4px 1px #ffd28bb3,0 0 14px 3px #eea3339c,inset 0 0 4px #ffdc9a55;opacity:0;pointer-events:none}
body[data-state="radio"] .tune:not(:disabled)::before{opacity:.78;animation:tune-breathe 3.8s ease-in-out infinite}
@keyframes tune-breathe{0%,100%{opacity:.72}50%{opacity:1}}
.radio-scene .tune:hover:not(:disabled),.radio-scene .tune:active:not(:disabled){background:transparent;filter:none;box-shadow:none;transform:translate(-50%,-50%)}
.radio-scene .tune:focus-visible{outline:none}
body[data-state="radio"] .tune:focus-visible::before{animation:none;opacity:1;outline:2px solid #fff0bd;outline-offset:3px;box-shadow:0 0 8px 2px #ffd28bb3,0 0 20px 4px #eea3338c,inset 0 0 5px #ffdc9a80}
@media(hover:hover){body[data-state="radio"] .tune:hover:not(:disabled)::before{animation:none;opacity:1;box-shadow:0 0 6px 2px #ffd28bb3,0 0 18px 4px #eea3338c,inset 0 0 5px #ffdc9a80}}
body[data-state="radio"] .tune:active:not(:disabled)::before{animation:none;opacity:1;border-color:#fff5d2;background:#ffe6ab20;box-shadow:0 0 3px 1px #ffdf97,inset 0 0 10px #b5793580}
.radio-scene .radio-utility{position:absolute;z-index:2;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);text-align:center}
.radio-utility .quiet-button{min-height:44px;min-width:44px;padding:12px;font-size:9px;letter-spacing:1.5px;color:#dfc7a0;text-shadow:0 2px 8px #000}
.radio-error{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);width:min(440px,88vw);padding:16px 20px;border:1px solid #bba17045;border-radius:7px;background:#0c171cf0;box-shadow:0 5px 50px #0008}
.radio-error p{margin:0;font:14px/1.5 Arial,sans-serif;color:#f6e7ca}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Pixel-aligned copies of the existing room props, never a second set of props. */
.room-objects{position:absolute;inset:0;z-index:-3;pointer-events:none}
.room-prop{position:absolute;display:block;border:0;padding:0;background:none;pointer-events:auto;touch-action:manipulation;border-radius:12px;isolation:isolate}
.room-prop:disabled{pointer-events:none}
.prop-art,.prop-repair{position:absolute;inset:0;pointer-events:none;background-image:var(--prop-image);background-size:var(--prop-size);background-position:var(--prop-position);background-repeat:no-repeat;clip-path:var(--prop-clip)}
.prop-art{transform-origin:50% 91%}
.prop-repair{background-image:var(--prop-clean);visibility:hidden;transform:translateX(var(--repair-shift,0px))}
.is-moving .prop-repair,.is-repositioned .prop-repair{visibility:visible}
.prop-hint{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,5px);opacity:0;pointer-events:none;white-space:nowrap;font:12px/1.4 Georgia,serif;color:#ffe5b9;background:#152022eb;padding:7px 12px;border:1px solid #d2b17566;border-radius:4px;box-shadow:0 4px 15px #0005;transition:opacity .2s,transform .2s}
.room-prop:focus-visible{outline:2px solid #ffe4af;outline-offset:5px}
.room-prop:focus-visible .prop-hint{opacity:1;transform:translate(-50%,0)}
.room-lamp .prop-hint{bottom:auto;top:calc(100% + 12px)}
.lamp-dimmer{position:absolute;inset:0;pointer-events:none;background-image:var(--prop-image);background-size:var(--prop-size);background-position:var(--prop-position);background-repeat:no-repeat;filter:brightness(.22) saturate(.65);clip-path:var(--prop-clip);opacity:0;transition:opacity .3s}
.room-shade{z-index:-2;transition:background .35s}
.lamp-spill{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 12% 35%,#ffa3271c,transparent 42%),radial-gradient(ellipse at 32% 78%,#ffb54f12,transparent 45%);opacity:1;transition:opacity .35s}
.room-plate,.room-objects{transition:filter .35s}
.radio-scene[data-lamp="off"] .room-plate,.radio-scene[data-lamp="off"] .room-objects{filter:brightness(.56) saturate(.73)}
.radio-scene[data-lamp="off"] .lamp-dimmer{opacity:1}
.radio-scene[data-lamp="off"] .lamp-spill{opacity:0}
.radio-scene[data-lamp="off"] .room-shade{background:linear-gradient(115deg,#05121da6,transparent 80%),linear-gradient(#05101638,transparent 70%,#0710148c)}
.radio-scene[data-lamp="off"] .receiver-art{filter:brightness(.7) saturate(.8)}
.receiver-art{transition:filter .35s}
@media(hover:hover){.room-prop:hover:not(:disabled) .prop-hint{opacity:1;transform:translate(-50%,0)}.room-prop:hover:not(:disabled) .prop-art{filter:brightness(1.1)}}
/* Envelopes are positioned in the receiver's coordinate system, on its top and desk. */
.scene-letters{position:absolute;inset:0;pointer-events:none;z-index:3}
.envelope{position:absolute;width:25%;aspect-ratio:1.5;min-width:74px;min-height:44px;background:none;border:0;padding:0;pointer-events:auto;touch-action:manipulation;transform:rotate(var(--envelope-angle));animation:envelope-arrive .8s ease-out both;isolation:isolate;border-radius:3px}
.envelope-nastya{left:9%;top:-12%;--envelope-angle:-7deg;--seal:#9c493b}
.envelope-nikita{right:9%;top:-12%;--envelope-angle:6deg;--seal:#536758}
.envelope-valentina{left:36%;top:100%;width:28%;--envelope-angle:-3deg;--seal:#92514b}
.envelope-art{position:absolute;inset:0;transform:scaleY(.38);filter:drop-shadow(2px 5px 3px #1009069c);transition:filter .25s}
.envelope-valentina .envelope-art{transform:scaleY(.5)}
.envelope-back,.envelope-note,.envelope-flap,.envelope-front{position:absolute;inset:0;border-radius:2px}
.envelope-back{border:1px solid #b2996d;background:repeating-linear-gradient(7deg,#98754308 0 1px,transparent 1px 4px),linear-gradient(135deg,#eed8ac,#c8aa76)}
.envelope-note{inset:10% 8%;background:#f3e5c9;border:1px solid #b59c76;transition:transform .44s ease;box-shadow:0 1px 3px #0002}
.envelope-flap{clip-path:polygon(0 0,100% 0,50% 65%);transform-origin:50% 0;backface-visibility:visible;background:linear-gradient(175deg,#f1dfb8,#d5b987);z-index:3;transition:transform .44s ease}
.envelope-front{clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);background:repeating-linear-gradient(15deg,#7b512508 0 1px,transparent 1px 3px),conic-gradient(from 236deg at 50% 55%,#dec597 0deg,#ead4ab 68deg,#c7aa7b 142deg,#e4cba0 215deg,#dec597 360deg);border:1px solid #c7ab7b;z-index:4;box-shadow:inset 0 -1px 2px #7a592d22}
.envelope-seal{position:absolute;left:43%;top:42%;width:16%;aspect-ratio:1;border-radius:48% 43% 47% 42%;z-index:5;background:radial-gradient(circle at 37% 30%,#ffffff30,transparent 45%),var(--seal);border:2px solid #ffffff17;box-shadow:0 2px 3px #3c1d1c50,inset 0 0 0 2px #35151626;transition:opacity .18s,transform .3s}
.envelope-seal::after{content:'И';position:absolute;inset:0;display:grid;place-items:center;font:bold clamp(8px,1.3vw,18px) Georgia,serif;color:#f4dfb988;text-shadow:0 1px 1px #0005}
.envelope-name{position:absolute;right:10%;bottom:11%;max-width:80%;z-index:6;font:italic clamp(11px,1.4vw,20px)/1.2 Georgia,'Times New Roman',serif;color:#56432d;text-shadow:0 1px #fff5;white-space:nowrap}
.envelope.is-opening .envelope-flap{transform:rotateX(180deg);z-index:2}
.envelope.is-opening .envelope-note{transform:translateY(-32%)}
.envelope.is-opening .envelope-seal{opacity:0;transform:translateY(-20%)}
.envelope:focus-visible{outline:2px solid #ffe4af;outline-offset:4px}
.envelope:focus-visible .envelope-art{filter:drop-shadow(0 0 7px #edc78888) drop-shadow(2px 8px 4px #1009069c)}
.radio-scene[data-lamp="off"] .envelope-art{filter:brightness(.72) drop-shadow(2px 8px 4px #1009069c)}
@media(hover:hover){.envelope:hover:not(:disabled) .envelope-art{filter:brightness(1.09) drop-shadow(2px 8px 4px #1009069c)}}
@keyframes envelope-arrive{from{opacity:0;translate:0 -13px}to{opacity:1;translate:0 0}}
/* Native modal supplies focus trapping, background inertness and Escape. */
.letter-dialog{color-scheme:light;position:fixed;inset:0;width:min(720px,calc(100vw - 32px));max-width:none;max-height:88svh;max-height:min(88svh,980px);margin:auto;padding:0;border:1px solid #d1b98f;border-radius:5px;background:#f3e6cb;color:#382d25;box-shadow:0 25px 100px #0009,0 3px 15px #0005;overflow:hidden;animation:letter-unfold .34s ease-out}
.letter-dialog::backdrop{background:#071219cc;backdrop-filter:blur(7px)}
.letter-scroll{max-height:min(88svh,980px);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#bda67e #efe0c1;padding:68px clamp(26px,6vw,72px) 36px;background:radial-gradient(ellipse at 15% 4%,#fff9e7a1,transparent 60%),repeating-linear-gradient(5deg,#8a5e2605 0 1px,transparent 1px 4px);outline-offset:-5px}
.letter-close{position:absolute;z-index:2;right:12px;top:10px;border:1px solid #b7a17d66;border-radius:4px;background:#f3e6cbf5;color:#655139;padding:6px 12px;min-height:44px;display:flex;align-items:center;gap:12px;font:13px Arial,sans-serif;box-shadow:0 3px 12px #392c1310}
.letter-close span{font:26px/1 Georgia,serif}.letter-close:hover{background:#fff3d9}
.letter-dialog :focus-visible{outline:2px solid #80603c;outline-offset:3px}
.letter-header{text-align:center;margin-bottom:29px}
.letter-header>p{font:9px/1.7 Arial,sans-serif;letter-spacing:3px;color:#917149;margin:0 0 14px}
.letter-header h2{font:normal clamp(27px,4.5vw,36px)/1.25 Georgia,'Times New Roman',serif;margin:0;color:#4c3826;outline:none}
.letter-rule{display:block;margin-top:22px;color:#ad8854;font-size:16px}
.letter-rule::before,.letter-rule::after{content:'';display:inline-block;width:52px;height:1px;background:#b999654f;vertical-align:middle;margin:0 14px}
.letter-body{font:18px/1.8 Georgia,'Times New Roman',serif;overflow-wrap:break-word}
.letter-body p{margin:0 0 1.1em;white-space:pre-line}
.letter-body p:first-child{color:#493323}
.letter-ornament{text-align:center;color:#9d7848;font-size:35px;margin:20px 0 0}
@keyframes letter-unfold{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){.envelope-name{font-size:12px}.letter-dialog{width:calc(100vw - 20px);max-height:92svh}.letter-scroll{max-height:92svh;padding:70px 25px 28px}.letter-body{font-size:17px;line-height:1.75}.letter-header{margin-bottom:23px}.letter-header>p{letter-spacing:2px}.letter-close{right:10px;top:8px}.prop-hint{font-size:11px;padding:5px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.dust{display:none}}
/* Anchored above the receiver, clear of the envelopes sitting on its top. */
.greeting-end{position:absolute;left:50%;bottom:calc(100% + 16px);transform:translateX(-50%);margin:0;z-index:4;font:normal clamp(26px,4vw,46px)/1.2 Georgia,'Times New Roman',serif;letter-spacing:.06em;color:#f4dca6;text-shadow:0 2px 7px #0b151be6,0 0 22px #a56d333d;pointer-events:none;animation:greeting-end-appear 1s ease-out both}
@keyframes greeting-end-appear{from{opacity:0}to{opacity:1}}
@font-face{font-family:Caveat;src:url('/assets/fonts/Caveat.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
.envelope-name{left:6%;right:6%;max-width:none;text-align:center;white-space:normal;font-size:clamp(10px,1.05vw,17px);line-height:1.05}
.birthday-glow{position:absolute;z-index:0;left:50%;top:2.5%;transform:translateX(-50%);width:65%;max-width:700px;text-align:center;pointer-events:none;color:#ffe6b8;font:600 clamp(34px,5vw,76px)/1.1 Caveat,cursive;text-shadow:0 0 4px #fff2cf,0 0 16px #ffb957,0 0 35px #f39d41b0}
.birthday-glow i{position:absolute;font:22px Georgia,serif;animation:secret-twinkle 3s ease-in-out infinite alternate}
.birthday-glow i:nth-child(2){left:3%;top:15%}.birthday-glow i:nth-child(3){right:1%;top:55%;animation-delay:-1s}.birthday-glow i:nth-child(4){right:14%;top:-18%;animation-delay:-2s}
@keyframes secret-twinkle{from{opacity:.3;transform:scale(.8)}to{opacity:.95;transform:scale(1.1)}}
.tck-note{position:absolute;z-index:3;left:24%;top:84%;width:126px;min-height:65px;border:1px solid #b8a178;border-radius:2px;transform:rotate(-8deg);background:linear-gradient(135deg,#efe0bc,#c8b58b);color:#54432b;font:600 26px/1 Caveat,cursive;padding:10px;box-shadow:3px 7px 12px #0007}
.tck-note small{font:12px Georgia,serif;letter-spacing:.04em}.tck-note:hover{filter:brightness(1.12)}
.secret-card{position:fixed;inset:auto;margin:0;width:320px;max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);overflow:auto;padding:40px 28px 24px;border:1px solid #c1a77b;border-radius:3px;background:linear-gradient(130deg,#fff1d1,#e2cda5);color:#503c29;box-shadow:0 12px 45px #0007;animation:secret-card-arrive .3s ease-out}
.secret-card::backdrop{background:#07121924}
.secret-card p{margin:0;font:500 29px/1.2 Caveat,cursive}
.secret-close{position:absolute;right:3px;top:3px;min-width:40px;min-height:40px;border:0;background:none;color:#715637;font:26px Georgia,serif}
@keyframes secret-card-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.secret-card{transform:translate(-50%,-50%);width:320px}.secret-card::backdrop{background:#07121977}.birthday-glow{left:55%;top:12%;width:76%;font-size:clamp(37px,10vw,55px)}.tck-note{left:12%;top:auto;bottom:11%;width:104px;min-height:58px;font-size:23px}.envelope-name{font-size:clamp(9px,2.7vw,12px)}}
@media(max-height:500px) and (min-width:701px){.birthday-glow{top:1%;font-size:36px}.tck-note{top:auto;bottom:5%;left:17%;width:108px;min-height:52px;font-size:23px}}
@media(prefers-reduced-motion:reduce){.birthday-glow i,.secret-card{animation:none}}


.envelope-name{transform:scaleY(2.2);transform-origin:bottom}

@media(max-width:700px){.tck-note{left:32%;bottom:7%}}

@media(max-width:700px){.birthday-glow{top:4%}.tck-note{left:32%;bottom:12%;width:100px;min-height:46px;font-size:20px;padding:6px}.tck-note small{font-size:10px}}