@import url('/fonts.css');
:root{color-scheme:dark;font-family:'Google Sans',sans-serif;background:#080616}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a,output{font-family:inherit}button{touch-action:manipulation}body{background:radial-gradient(ellipse at 50% 65%,#251139,#080616 72%)}
.room{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate}.scene{position:absolute;left:50%;top:50%;width:min(100vw,1700px);aspect-ratio:2048/1143;transform:translate(-50%,-47%);container-type:inline-size;pointer-events:none}
.plate,.foreground{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.plate{z-index:0;mask-image:radial-gradient(ellipse 65% 65% at 50% 50%,#000 65%,transparent 100%)}.foreground{z-index:2}
.receiver{position:absolute;left:25.390625%;top:17.4978%;width:50.78125%;height:29.746%;z-index:4;pointer-events:auto;cursor:grab;transform-origin:54% 65%;transition:transform 1.1s cubic-bezier(.22,.7,.18,1),filter .4s;filter:drop-shadow(0 5px 3px #08030e66);-webkit-tap-highlight-color:transparent}.receiver svg{width:100%;height:100%;display:block;pointer-events:none}.receiver:hover,.receiver:focus-visible{outline:none;filter:drop-shadow(0 0 7px #d199ff99) drop-shadow(0 0 16px #9a4bd977)}
.room:not([data-state="idle"]) .receiver{transform:translate(5%,-40%) rotate(-9deg);cursor:grabbing;filter:drop-shadow(5px 22px 14px #03010b80)}
.phone{position:absolute;left:27%;top:20%;width:45%;height:24%;z-index:3;border:0;background:none;pointer-events:none}.phone:focus-visible{outline:1px solid #d4aaff;outline-offset:5px}
.smoke{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;filter:blur(3px);mask-image:linear-gradient(#000 0%,#000 47%,transparent 77%)}
.language-switch{position:fixed;right:max(24px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top));z-index:10;display:flex;padding:5px;gap:4px;border:1px solid #c9a0ea30;border-radius:99px;background:#10091dbb;backdrop-filter:blur(14px)}.language-switch a{display:grid;place-items:center;min-width:65px;min-height:42px;padding:0 16px;text-decoration:none;border-radius:99px;font-size:12px;font-weight:500;letter-spacing:.1em;color:#cbb8dc}.language-switch a[aria-current]{background:#c5a0df;color:#251431}.language-switch a:focus-visible,button:focus-visible{outline:2px solid #e7c4ff;outline-offset:3px}
.phone-console{position:absolute;left:42%;top:39%;width:19%;height:23%;z-index:5;pointer-events:none}.keypad{position:absolute;inset:0}.keypad button{position:absolute;width:clamp(20px,2.1cqw,36px);height:clamp(20px,2.1cqw,36px);transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:transparent;color:#180e25;font-size:clamp(11px,1.15cqw,19px);font-weight:500;line-height:1;text-shadow:0 1px 2px #ffffff75;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}.keypad button:disabled{cursor:default;color:#31263d}.keypad button:enabled:hover,.keypad button:enabled:active{background:#ba71eb77;box-shadow:0 0 12px #c988ff,0 0 25px #bc66e766;color:#fff;text-shadow:0 1px 3px #321245}.keypad button[data-digit="clear"]{display:none}.number-display{position:absolute;left:33%;top:42%;width:33%;height:15%;display:grid;place-items:center;color:#23142c;font-size:clamp(9px,1cqw,16px);font-weight:500;white-space:pre;pointer-events:none}.room[data-state="idle"] .number-display{visibility:hidden}.dial-rotor{display:none}.dial-hint{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:6;color:#d7c7e2;font-size:13px;white-space:nowrap;pointer-events:none}
.sound-notice{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:10px 10px 10px 20px;background:#160d24df;border:1px solid #bd95df40;border-radius:20px;color:#eadcf5;backdrop-filter:blur(16px);font-size:14px;line-height:1.4}.sound-notice button{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:#c391e51a;color:#e0c5f0;font-size:25px;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:767px){.scene{width:175vw;top:48%;transform:translate(-50%,-44%)}.language-switch{top:max(16px,env(safe-area-inset-top));right:16px}.receiver{transition-duration:1s}.room:not([data-state="idle"]) .receiver{transform:translate(1%,-45%) rotate(-8deg)}.dial-hint{bottom:122px;font-size:12px}.smoke{mask-image:linear-gradient(#000 0%,#000 43%,transparent 70%)}.phone-console{pointer-events:auto}.keypad button{font-size:12px}.dial-expanded{position:fixed;left:50%;top:auto;bottom:24px;width:300px;max-width:calc(100vw - 24px);height:203px;transform:translateX(-50%);z-index:12;border-radius:50%;background:url('/assets/october-base.webp') 51.85% 50.65% / 526.3158% 434.7826%;box-shadow:0 10px 40px #0008}.dial-expanded .keypad button{width:40px;height:36px;font-size:18px}.dial-expanded .number-display{font-size:14px}.is-entering-code .sound-notice{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.receiver{transition:none}}
.smoke{position:absolute;mask-image:radial-gradient(ellipse 65% 48% at 50% 22%,#000 25%,transparent 95%)}
.plate{mask-image:radial-gradient(ellipse 60% 56% at 50% 49%,#000 56%,transparent 95%)}
.dial-hint{bottom:3%;text-shadow:0 1px 5px #000}
.keypad button{color:#f9ebff;text-shadow:0 1px 3px #201027,0 0 4px #201027}
.keypad button:disabled{color:#eadcf5;text-shadow:0 1px 3px #201027}
.receiver img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.cradle{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

/* All expanded sizes retain exactly the same photographic coordinate system. */
.scene{transition:top .6s cubic-bezier(.2,.8,.2,1),left .6s cubic-bezier(.2,.8,.2,1)}
@media(max-width:1024px){
 .scene{width:min(175vw,135svh);top:46%;transform:translate(-50%,-44%)}
 .dial-expanded{position:fixed;left:50%;top:auto;bottom:max(22px,env(safe-area-inset-bottom));width:min(340px,calc(100vw - 32px));max-width:none;height:auto;aspect-ratio:389.12/262.89;transform:translateX(-50%);transform-origin:50% 100%;z-index:12;border-radius:50%;background:url('/assets/october-base.webp') 51.85% 50.65% / 526.3158% 434.7826% no-repeat;box-shadow:0 12px 45px #0008;pointer-events:auto}
 .dial-expanded .keypad button{width:clamp(30px,10vw,42px);height:clamp(28px,9vw,38px);font-size:clamp(16px,5vw,20px)}
 .dial-expanded .number-display{font-size:16px}
 .is-entering-code .sound-notice{visibility:hidden}
 .is-entering-code .dial-hint{position:fixed;left:50%;top:auto;bottom:calc(min(340px,100vw - 32px) * .6756 + 38px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:13px;z-index:13;text-align:center}
}
@media(max-width:1024px) and (max-height:720px) and (orientation:portrait){.scene{top:42%}.is-entering-code .scene{top:32%;width:155vw}}
@media(max-width:1024px) and (orientation:landscape){
 .scene{width:min(95vw,165svh);top:48%}
 .is-entering-code .scene{left:29%;width:min(92vw,155svh)}
 .dial-expanded{left:76%;bottom:12%;width:min(35vw,330px,72svh)}
 .is-entering-code .dial-hint{left:76%;bottom:calc(12% + min(35vw,330px,72svh) * .6756 + 14px);font-size:12px}
 .language-switch{top:12px;right:16px}
}
@media(prefers-reduced-motion:reduce){.scene{transition:none}}
/* Fade the canvas boundary at the top without changing its lower falloff. */
.dial-rotor{display:block;position:absolute;inset:0;pointer-events:none;opacity:0}
.dial-rotor.rotating{opacity:1}
.dial-rotor svg{display:block;width:100%;height:100%;overflow:visible}
.rotary-image{transform-origin:0 0}
.call-error{position:fixed;z-index:20;left:50%;top:max(90px,calc(env(safe-area-inset-top) + 80px));transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content;padding:16px 24px;border:1px solid #e6b8ff66;border-radius:18px;background:#20102eef;color:#f5e7ff;box-shadow:0 10px 45px #0008,0 0 25px #ab5de522;text-align:center;font-size:16px;backdrop-filter:blur(16px)}
.call-error[hidden]{display:none}
.smoke{transition:opacity .8s ease}
.room[data-smoke="red"] .smoke{opacity:.8}
.room[data-smoke="black"] .smoke{opacity:.96;mix-blend-mode:normal}
.room[data-smoke="green"] .smoke,.room[data-smoke="ice"] .smoke{opacity:.7}
.room[data-smoke="violet"] .smoke{opacity:.82}
.smoke{mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 100%),radial-gradient(ellipse 65% 48% at 50% 22%,#000 25%,transparent 95%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 100%),radial-gradient(ellipse 65% 48% at 50% 22%,#000 25%,transparent 95%);-webkit-mask-composite:source-in}