@font-face{font-family:'Nanum Brush Script';src:url('fonts/NanumBrushScript-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roh Hoe Chan';src:url('fonts/ROEHOE-CHAN.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Pretendard Variable';src:url('fonts/PretendardVariable.ttf') format('truetype');font-weight:45 930;font-style:normal;font-display:swap}
:root{color-scheme:dark;--ink:#26282b;--ivory:#e8e5dc;--green:#33574b;--phone-scale:.75;--view-x:50vw;--view-y:50vh;--ui-font:'Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-family:var(--ui-font);font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#1d1e20}
body{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 35%,#45464a 0%,#27282b 48%,#151619 100%);-webkit-tap-highlight-color:transparent}
button,input,a{font:inherit}button,a{touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #d1a567;outline-offset:3px}
button:disabled{cursor:default;opacity:.55}button svg{pointer-events:none}[hidden]{display:none!important}
.stage{position:fixed;inset:0;overflow:hidden}
/* One portrait surface, fitted as a whole: no scrolling and no hidden controls. */
.telephone{--red-level:0;--noise-level:0;position:absolute;left:var(--view-x);top:var(--view-y);transform:translate(-50%,-50%) scale(var(--phone-scale));transform-origin:center;isolation:isolate;width:720px;height:1000px;display:grid;grid-template-rows:36px minmax(0,1fr) 70px 72px 248px 52px 22px;gap:9px;padding:22px 28px 18px;border:2px solid #67686a;border-radius:27px;background:linear-gradient(102deg,#7e8185 0%,#c3c4c4 5%,#a7aaac 12%,#b4b6b6 47%,#999c9e 88%,#d0d0cc 96%,#74777b 100%);box-shadow:0 2px 1px #f0eee6 inset,0 -5px 1px #64666a inset,0 0 0 5px #36383b,0 25px 70px #0009;color:var(--ink);overflow:hidden}
.telephone>*{min-width:0;min-height:0}
.telephone:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.55;background:repeating-linear-gradient(0deg,#fff0 0px,#fff0 2px,#20242b0b 3px,#fff0 4px),repeating-linear-gradient(177deg,transparent 0px,transparent 150px,#e7e4dc1a 151px,transparent 152px),linear-gradient(155deg,#fff3,transparent 40%)}
.screw{position:absolute;width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,#474b50,#d1d1cd 42%,#5a5d61 75%);box-shadow:0 1px 2px #25272acc,inset 0 1px 1px #fff6}
.screw:after{content:'';position:absolute;inset:5px 2px;background:#3b3e42;transform:rotate(-28deg)}
.top-left{left:11px;top:12px}.top-right{right:11px;top:12px}.bottom-left{left:11px;bottom:12px}.bottom-right{right:11px;bottom:12px}
.brand{display:flex;align-items:center;padding:0 8px}
.brand-mark{display:flex;gap:10px;align-items:center}.brand-mark>svg{width:25px;height:25px;fill:#303d49;transform:rotate(-12deg)}
.brand-mark>span{font-size:25px;font-weight:800;letter-spacing:.1em;line-height:1.1;color:#29323c;text-shadow:0 1px #e7e7e2}
.guide-panel{display:flex;flex-direction:column;position:relative;overflow:hidden;border:7px solid #56595c;border-top-color:#75787a;border-bottom-color:#4b4e52;border-radius:13px;background:radial-gradient(ellipse at 48% 25%,#2e3c36,#192720 85%);box-shadow:0 1px 1px 2px #dddcd6aa,0 3px 8px #0009 inset;color:#d6dfca}
.guide-panel:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#0000000b 4px);pointer-events:none;z-index:2}
.status-row{height:32px;flex:0 0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b8c3b422;margin:0 18px;color:#96a38f;font-size:10px;font-weight:600;letter-spacing:.06em}
.status{display:flex;align-items:center;gap:7px}.status i{height:6px;width:6px;border-radius:50%;background:#7f8b77}.status i.active{background:#c4d2a5;box-shadow:0 0 8px #cadc9a70}.status i.ended{background:#c4987f}
.call-clock{font-family:var(--ui-font);font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.guide-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px 22px;text-align:center;min-height:0;overflow:hidden}
.guide-content>*{flex-shrink:0;max-width:100%}
.guide-panel[data-credits=true] .guide-content{padding:0 22px}
/* The complete credit list stays still and readable throughout the exit announcement. */
.staff-credits{width:100%;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.staff-credit-list{display:grid;gap:16px;margin:0;padding:16px 0}
.staff-credit-list>div{display:grid;grid-template-columns:110px 95px;gap:24px;align-items:baseline}
.staff-credit-list dt{font-size:15px;line-height:1.5;font-weight:400;letter-spacing:.03em;color:#a3b399;margin:0;text-align:right}
.staff-credit-list dd{font-size:25px;line-height:1.35;font-weight:600;letter-spacing:.05em;color:#dfe8d3;margin:0;text-align:left;text-shadow:0 0 14px #b8d29b22}
.eyebrow{margin:0 0 6px;font-size:11px;line-height:1.4;font-weight:600;letter-spacing:.13em;color:#98a992}.eyebrow:empty{display:none}
.guide-content h1{margin:0;color:#e0e8d5;font-size:28px;font-weight:600;line-height:1.4;letter-spacing:-.035em;white-space:pre-line;word-break:keep-all;text-shadow:0 0 18px #bdd7a21a}
.telephone[data-step=poster] #guideTitle{font-size:32px;font-weight:750;color:#edf1df;text-shadow:0 0 18px #bdd7a22a}
.redial-number{margin:18px 0 0;font-size:36px;line-height:1.2;font-weight:750;letter-spacing:.055em;font-variant-numeric:tabular-nums;white-space:nowrap;color:#edf1df;text-shadow:0 0 16px #bdd7a224}
.dialogue{font-size:25px;line-height:1.48;letter-spacing:-.025em;margin:0;white-space:pre-line;word-break:normal;overflow-wrap:anywhere;color:#e0e8d5;font-weight:500}
.dialogue.effect{color:#9da99b;font-size:18px;font-weight:400}
.intro-steps{display:flex;justify-content:center;gap:16px;margin-top:16px;font-size:12px;line-height:20px;color:#a4b19b}
.intro-steps span{display:flex;align-items:center;gap:5px}.intro-steps b{border:1px solid #77856d;border-radius:50%;width:18px;height:18px;flex:0 0 18px;padding:0;font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-variant-numeric:tabular-nums}
.guide-note{margin:10px 0 0;font-size:12px;color:#9ba991;line-height:1.4;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere}
.answer-example{margin-top:8px;padding:8px 12px;width:100%;background:#b8cab410;border:1px solid #b5c7a333;border-radius:4px}
.answer-example p{font-size:21px;line-height:1.4;font-weight:500;margin:0;color:#edf1e2;white-space:pre-line;word-break:keep-all}
.answer-example .answer-context{font-size:12px;font-weight:400;line-height:17px;color:#b8c7ac;margin:0 0 5px}
.telephone[data-mode=response] .guide-content h1{font-size:21px;line-height:1.3}
.telephone[data-mode=response] .eyebrow{font-size:26px;line-height:1.45;font-weight:850;letter-spacing:-.035em;color:#edf1df;margin-bottom:18px;text-shadow:0 0 18px #bdcf9c20}
.telephone[data-mode=response] .guide-note{font-size:12px;margin-top:6px}
.response-mic{display:flex;align-items:center;justify-content:center;gap:7px;margin:7px 0 0;color:#bdcfae;font-size:12px;line-height:17px}
.response-mic i{height:6px;width:6px;border-radius:50%;background:#b2c79d}
.telephone[data-voice=manual] .response-mic{color:#cdbd9c}.telephone[data-voice=manual] .response-mic i{background:#c6a676}
.cue-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#a2b18a22}.cue-progress i{display:block;transform:scaleX(0);transform-origin:left;background:#aaba97;height:100%}
.listening-wave{display:flex;align-items:center;gap:5px;height:30px;margin:17px 0 0}.listening-wave i{display:block;width:3px;background:#a0b490;border-radius:2px;animation:wave 1.7s ease-in-out infinite;height:8px}.listening-wave i:nth-child(2n){animation-delay:.18s;height:16px}.listening-wave i:nth-child(3n){animation-delay:.34s;height:25px}
@keyframes wave{50%{transform:scaleY(.4);opacity:.45}}
.resume-button{color:#e2ebd6;background:#45573f;border:1px solid #87997a;border-radius:4px;font-size:15px;padding:9px 22px;margin-top:9px}
.mic-dock{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:16px;padding:6px 12px;background:linear-gradient(#3b4146,#30363c);color:#e0e3dd;border:1px solid #5f6567;border-radius:6px;box-shadow:0 1px #e1e2d4aa inset,0 1px #dadbd4}
.mic-info{min-width:0}.mic-connection{display:flex;align-items:center;gap:7px;font-size:11px;line-height:15px}.mic-connection strong{font-weight:500}.mic-connection i{height:5px;width:5px;background:#a8aea2;border-radius:50%}
.mic-dock[data-state=ready] .mic-connection i{background:#b9d6a3;box-shadow:0 0 6px #badc8755}.mic-dock[data-state=error] .mic-connection i{background:#e9b683}.mic-dock[data-state=pending] .mic-connection i{background:#e0d08f}
.mic-wave{display:block;width:100%;height:21px;margin:1px 0;color:#bad1b3;overflow:hidden}.mic-wave polyline{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.wave-baseline{fill:none;stroke:#a9bd9c33;stroke-width:.8}
.mic-dock p{font-size:10px;line-height:13px;margin:0;color:#aab6b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mic-buttons{display:flex;flex-direction:column;gap:2px;justify-content:center}.mic-buttons button:first-child{height:32px;border:1px solid #b5c2c2;border-radius:4px;background:linear-gradient(#c5ceca,#a2ada8);color:#2b3b35;font-size:13px;font-weight:700}.mic-buttons button:last-child{height:19px;padding:0;border:0;background:none;color:#ccd7d3;font-size:10px;text-decoration:underline;text-underline-offset:3px}
.mic-buttons button:disabled{opacity:.65}
.lcd-frame{border:5px solid #747779;border-top-color:#595d60;border-bottom-color:#919593;border-radius:8px;padding:7px 15px;background:linear-gradient(110deg,#38463c,#25372e 70%,#304137);box-shadow:0 1px 1px #eeeae0,0 2px 7px #0008 inset;position:relative;overflow:hidden}
.lcd-meta{display:flex;justify-content:space-between;color:#9bab91;font-size:9px;font-weight:500;letter-spacing:.08em;margin-bottom:4px}
.number-display{display:block;color:#d0ddbd;font-size:29px;letter-spacing:.08em;line-height:1.1;font-family:var(--ui-font);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.number-display.empty{font-family:inherit;font-size:20px;font-weight:400;letter-spacing:.06em;padding-top:3px;color:#aabca0}
.keypad-assembly{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:minmax(0,1fr) 14px;gap:6px 30px;border:1px solid #85888b;border-radius:10px;background:linear-gradient(110deg,#b8b9b7,#a4a8a9 60%,#9ea2a5);box-shadow:0 1px #e1e1d8 inset,0 1px #deddd6;padding:12px 22px 10px}
.instruction-plate{grid-column:1;grid-row:1/3;position:relative;align-self:center;min-height:195px;border:2px solid #647784;border-radius:3px;background:linear-gradient(115deg,#aebfc5,#91aab6 80%);box-shadow:0 1px #e0e4df inset,0 1px 3px #373e4250;padding:15px 16px;color:#2b3f4b}
.instruction-plate:before,.instruction-plate:after{content:'';position:absolute;left:5px;right:5px;height:5px;background:radial-gradient(circle at 3px 2px,#424f55 0 1px,#cad0c9 2px,#73848b 3px,transparent 4px),radial-gradient(circle at calc(100% - 3px) 2px,#424f55 0 1px,#cad0c9 2px,#73848b 3px,transparent 4px)}
.instruction-plate:before{top:4px}.instruction-plate:after{bottom:3px}
.instruction-plate h2{font-size:15px;font-weight:800;letter-spacing:.03em;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #4f687955}
.instruction-plate ol{list-style:none;padding:0;margin:0;display:grid;gap:10px}.instruction-plate li{display:flex;align-items:flex-start;gap:12px;font-size:12px;line-height:1.5}.instruction-plate li b{font-family:var(--ui-font);font-size:14px;font-weight:400;color:#4a6371}
.keypad{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,minmax(0,1fr));justify-items:center;align-items:center;gap:6px 16px;min-height:0}
.dial-key{border:2px solid #797d80;border-bottom:3px solid #5c6064;border-radius:50%;width:46px;height:46px;color:#26303a;background:radial-gradient(circle at 35% 25%,#f1efdf,#e1dece 50%,#bdc0b9 76%,#888f91 100%);box-shadow:0 0 0 2px #c9cac7,0 0 0 3px #7a7f83,inset 0 1px #ffffffe6,0 3px 4px #25293250;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;transition:filter .1s,transform .07s}
.dial-key b{font-family:var(--ui-font);font-size:27px;font-weight:500;line-height:1}.dial-key small{display:none}
.dial-key:active:not(:disabled){transform:translateY(2px);filter:brightness(.85);box-shadow:0 0 0 2px #a9adaa,0 0 0 3px #7a7f83,inset 0 2px 4px #353d4255}.dial-key:disabled{color:#737c80;filter:saturate(.4) brightness(.95);opacity:.75}.dial-key.symbol b{font-size:23px}
.action-row{display:grid;grid-template-columns:1fr 1.62fr;gap:12px}.action-row button{border:1px solid #626b70;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:.03em;box-shadow:0 2px #464f53,0 1px #fff8 inset}.action-row button:active:not(:disabled){transform:translateY(2px)}
.utility-key{background:linear-gradient(#d1d3cb,#a9b1ad);color:#354047}.utility-key svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.utility-key.hangup{background:linear-gradient(#c7c8bf,#9ba3a0);color:#744d45}
.call-key{background:linear-gradient(#477663,#315847);color:#f2f0de;text-shadow:0 1px #152f1b}.call-key svg{width:19px;height:19px;fill:currentColor}.call-key:disabled{background:linear-gradient(#788880,#63756b);color:#bfc8bd;opacity:1}.telephone[data-mode=response] .call-key svg{display:none}.telephone[data-mode=response]:not([data-voice=manual]) .call-key{font-size:15px;font-weight:500;background:linear-gradient(#667e70,#50695c);color:#e1e8dc}
.bottom-plate{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#434e53;padding:0 2px}.bottom-plate button{border:0;padding:4px 0 4px 12px;color:#36434c;background:none;font-size:11px;white-space:nowrap}
.telephone.invalid .lcd-frame{animation:invalid .25s linear 2}@keyframes invalid{50%{transform:translateX(3px)}}
/* Media-timed, gradual corruption; the controls remain usable through the overlay. */
.signal-tint,.signal-noise{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:8;opacity:0}
.signal-tint{background:linear-gradient(130deg,#c6192c,#a70017 45%,#d62824);mix-blend-mode:multiply;opacity:calc(var(--red-level)*.88);transition:opacity .12s linear}
.signal-noise{z-index:9;background:repeating-linear-gradient(0deg,#0000 0px,#0000 3px,#e6a6a950 4px,#0008 5px,#0000 6px),repeating-linear-gradient(92deg,#fff1 0 1px,#0003 1px 2px,transparent 2px 7px);background-size:100% 7px,19px 13px;mix-blend-mode:screen;opacity:calc(var(--noise-level)*.42);transition:opacity .12s linear}
.telephone[data-reveal=active] .signal-noise{animation:signal-drift 7.4s steps(1,end) infinite}
.telephone[data-reveal=active] .guide-panel:after{content:'';position:absolute;inset:0;background:#d31029;opacity:calc(var(--red-level)*.43);mix-blend-mode:screen;pointer-events:none;z-index:3}
.telephone[data-reveal=active] .guide-content,.telephone[data-reveal=active] .status-row{position:relative;z-index:10}
.telephone[data-reveal=off] .signal-tint,.telephone[data-reveal=off] .signal-noise{transition:none}
@keyframes signal-drift{0%,18%,43%,71%,100%{transform:translate(0,0);background-position:0 0,0 0}19%{transform:translateX(2px);background-position:0 13px,6px 0}44%{transform:translateX(-2px);background-position:0 -17px,-7px 0}72%{transform:translateY(1px);background-position:0 23px,11px 0}}
.signal-tear{position:absolute;inset:0;z-index:11;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,transparent 0 109px,#b0d4c950 110px 113px,#700013aa 114px 123px,transparent 124px 211px);mix-blend-mode:screen}
.telephone[data-reveal-phase=intense] .signal-noise{animation:signal-breakup 1.6s steps(1,end) infinite}
.telephone[data-reveal-phase=intense] .signal-tear{opacity:.7;animation:tear-track 2.1s steps(1,end) infinite}
.telephone[data-reveal-phase=intense] .guide-content{animation:signal-displace 2.4s steps(1,end) infinite}
.telephone[data-reveal-phase=intense] .guide-content h1{text-shadow:-5px 0 #65b8a7aa,5px 1px #f7416177}
@keyframes signal-breakup{0%,30%,64%,100%{transform:translateX(0);background-position:0 0,0 0}14%{transform:translateX(5px);background-position:0 -51px,14px 0}31%{transform:translateX(-5px);background-position:0 37px,-13px 0}65%{transform:translateX(3px);background-position:0 -91px,7px 0}}
@keyframes tear-track{0%,100%{transform:translateY(-43px);clip-path:inset(12% 0 38%)}28%{transform:translateY(36px);clip-path:inset(52% 0 8%)}67%{transform:translateY(-16px);clip-path:inset(32% 0 48%)}}
@keyframes signal-displace{0%,22%,56%,88%,100%{transform:none}23%{transform:translateX(-6px) skewX(-2deg)}57%{transform:translateX(5px) skewX(1deg)}89%{transform:translateX(-3px)}}
/* Keep live labels and control semantics underneath; the possession layer is reversible. */
.telephone{--haunt-ink:#281d25}
.guide-panel,.lcd-frame,.mic-dock{--haunt-ink:#e2e7d6}
[data-haunt]{position:relative}
.telephone[data-haunted=true] [data-haunt]{color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important}
.telephone[data-haunted=true] [data-haunt]::after{content:attr(data-haunt);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--haunt-ink)!important;-webkit-text-fill-color:var(--haunt-ink)!important;font-family:var(--ui-font);font-size:1.15em;line-height:inherit;letter-spacing:-.03em;white-space:nowrap;text-shadow:1px 0 #a1002644,-1px 0 #68a69933;pointer-events:none}
.telephone[data-haunted=true] [data-haunt]:empty::after{content:none}
.telephone[data-haunted=true] #guideTitle::after{font-size:1em}
.telephone[data-haunted=true] #statusText::after,.telephone[data-haunted=true] #callClock::after{font-size:14px;font-weight:800;letter-spacing:.02em}
.telephone[data-haunted=true] .dial-key b[data-haunt]::after{font-size:14px;font-weight:800;overflow:visible;text-shadow:-2px 0 #681529,2px 1px #73908688;animation:key-letter-tear 1.8s steps(1,end) infinite}
.telephone[data-haunted=true] .dial-key:nth-child(3n+1) b::after{animation-delay:-.47s}
.telephone[data-haunted=true] .dial-key:nth-child(3n+2) b::after{animation-delay:-1.13s}
.telephone[data-haunted=true] .instruction-plate{--haunt-ink:#311a27}
.telephone[data-haunted=true] .instruction-plate [data-haunt]::after{justify-content:flex-start;font-weight:800;font-size:17px;line-height:1.4;overflow:visible;white-space:normal;text-shadow:2px 0 #8e142a66,-1px 1px #c1d8ce88;animation:plate-letter-tear 3.2s steps(1,end) infinite}
.telephone[data-haunted=true] .instruction-plate ol{display:none}
.telephone[data-haunted=true] .instruction-plate h2[data-haunt]::after{font-size:18px;white-space:nowrap;letter-spacing:-.02em}
.telephone[data-haunted=true] [data-haunt-hide]{visibility:hidden}
.telephone[data-haunted=true] .lcd-frame{overflow:visible;z-index:12}
.telephone[data-haunted=true] #numberDisplay::after{justify-content:flex-start;align-items:flex-start;top:-3px;bottom:auto;height:42px;font-size:42px;line-height:1;letter-spacing:.14em;--haunt-ink:#9b283d;text-shadow:2px 0 #370414,0 0 9px #62071a55}
.telephone[data-haunted=true] .haunt-blocks::after{text-shadow:-2px 0 #681529,2px 1px #73908655;animation:plate-letter-tear 2.2s steps(1,end) infinite}
.plate-swarm{position:absolute;left:10px;right:10px;top:48px;bottom:10px;overflow:hidden;contain:layout paint}
.plate-swarm span{position:absolute;line-height:1;white-space:nowrap;font-family:ui-monospace,"Courier New",monospace;font-weight:700;letter-spacing:-.08em;color:#23131a;transform:translate(-50%,-50%) rotate(var(--word-rotation));text-shadow:-1px 0 #82122a,1px 1px #b8cbc488;animation:plate-block-tear 2.6s steps(1,end) infinite;animation-delay:var(--block-delay,0s)}
@keyframes plate-block-tear{0%,28%,33%,71%,78%,100%{translate:0;clip-path:none}29%,32%{translate:-3px 1px;clip-path:inset(0 -6px 28%)}72%,77%{translate:3px -1px;clip-path:inset(22% -6px 0)}}
.telephone[data-playback-paused=true] .plate-swarm span{animation-play-state:paused}
.plate-swarm span[data-shade="1"]{color:#71122b}.plate-swarm span[data-shade="2"]{color:#b5a7a2;text-shadow:1px 1px #230b15}
@keyframes plate-letter-tear{0%,29%,61%,100%{transform:none}30%{transform:translate(-2px,1px) skewX(-4deg)}62%{transform:translate(2px,-1px) skewX(3deg)}}
@keyframes key-letter-tear{0%,17%,21%,63%,69%,100%{transform:none;clip-path:none}18%,20%{transform:translate(-2px,1px) skewX(-9deg);clip-path:inset(0 -12px 28%)}64%,68%{transform:translate(2px,-1px) skewX(7deg);clip-path:inset(18% -12px 0)}}
.telephone[data-playback-paused=true] [data-haunt]::after{animation-play-state:paused}
.reveal-message{position:absolute;inset:0;z-index:14;display:grid;place-items:center;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,#120307f2 0%,#17020bd9 55%,#12010880 100%);box-shadow:0 0 150px 30px #b6002840 inset}
.reveal-message p{position:relative;margin:0;width:92%;text-align:center;color:#9f5a61;font-family:"Roh Hoe Chan",var(--ui-font);font-size:72px;line-height:1.45;font-weight:400;letter-spacing:-.055em;text-shadow:3px 1px #410913,-2px -1px #602433,0 0 18px #5f061d88}
.reveal-message span,.reveal-message strong{position:relative;display:block;white-space:nowrap}
.reveal-message strong{margin-top:13px;color:#95414c;font-size:78px;font-weight:400;letter-spacing:-.065em}
.reveal-message [data-copy]:before,.reveal-message [data-copy]:after{content:attr(data-copy);position:absolute;inset:0;pointer-events:none}
.reveal-message [data-copy]:before{color:#69182c;transform:translateX(-4px);clip-path:inset(25% 0 58%);opacity:.6;animation:taunt-slice 2.9s steps(1,end) infinite}
.reveal-message [data-copy]:after{color:#6b404d;transform:translateX(3px);clip-path:inset(68% 0 20%);opacity:.5;animation:taunt-slice 3.7s steps(1,end) reverse infinite}
@keyframes taunt-slice{0%,36%,72%,100%{clip-path:inset(25% 0 58%);transform:translateX(-4px)}37%{clip-path:inset(67% 0 20%);transform:translateX(6px)}73%{clip-path:inset(46% 0 41%);transform:translateX(-6px)}}
.reveal-words{position:absolute;inset:0;z-index:14;overflow:hidden;border-radius:inherit;pointer-events:none;contain:layout paint;isolation:isolate}
.reveal-words:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 45% 67%,#17080b,#090709);opacity:var(--ink-depth,0);pointer-events:none;z-index:-1}
.swarm-canvas{display:block;width:100%;height:100%;pointer-events:none}
/* All tape movement is driven by the actual 08 media position, including pause/seek. */
.tape-rewind{position:absolute;inset:0;z-index:15;overflow:hidden;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 76px,#d3c7ba30 77px 79px,#060308cc 80px 88px,#8e7d8430 89px 91px,transparent 92px 226px,#c7bbbd30 227px 229px,transparent 230px 232px);background-size:100% 232px;mix-blend-mode:normal}
.tape-rewind:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#d1c1c317 3px,#0007 4px,transparent 5px 7px),linear-gradient(90deg,#09060977,transparent 9% 91%,#09060999);pointer-events:none}
.tape-grain{position:absolute;inset:0;background:repeating-linear-gradient(91deg,transparent 0 7px,#d0b8bc16 8px,transparent 9px 18px);background-size:89px 11px;background-position:calc(var(--tape-shift,0px)*7) var(--tape-roll,0px);opacity:.6;pointer-events:none}
.telephone[data-tape=active]>.guide-panel,.telephone[data-tape=active]>.mic-dock,.telephone[data-tape=active]>.lcd-frame,.telephone[data-tape=active]>.keypad-assembly,.telephone[data-tape=active]>.action-row{translate:var(--tape-shift,0px) 0}
@media(prefers-reduced-motion:reduce){.telephone[data-tape=active]>.guide-panel,.telephone[data-tape=active]>.mic-dock,.telephone[data-tape=active]>.lcd-frame,.telephone[data-tape=active]>.keypad-assembly,.telephone[data-tape=active]>.action-row{translate:none}.tape-rewind{background-position:0 0!important}.tape-grain{background-position:0 0}.reveal-words span[data-echo]:after{transform:none}}
.telephone[data-playback-paused=true] .signal-noise,.telephone[data-playback-paused=true] .signal-tear,.telephone[data-playback-paused=true] .guide-content,.telephone[data-playback-paused=true] .reveal-message *:before,.telephone[data-playback-paused=true] .reveal-message *:after,.telephone[data-playback-paused=true] .reveal-words span{animation-play-state:paused}
.orientation-note{display:none;position:fixed;top:3px;left:0;right:0;text-align:center;margin:0;color:#d4dfd7;font-size:12px;pointer-events:none}
@media(orientation:landscape) and (pointer:coarse){.orientation-note{display:block}}
dialog{position:fixed;inset:auto;left:var(--view-x);top:var(--view-y);margin:0;transform:translate(-50%,-50%) scale(var(--phone-scale));transform-origin:center;max-width:none;max-height:none;overflow:hidden;border:1px solid #65715e;color:#e5e7d8;background:#202b24;box-shadow:0 24px 100px #000a;border-radius:14px}
dialog::backdrop{background:#080d09d9;backdrop-filter:blur(6px)}
.operator-dialog{width:660px;height:880px;padding:24px}
.operator-header{display:flex;justify-content:space-between;align-items:center;gap:20px}.operator-header span{font-family:var(--ui-font);font-size:9px;letter-spacing:.17em;color:#98a48d}.operator-header h2{margin:6px 0 0;font-size:25px}.operator-header>button{border:1px solid #54614e;width:38px;height:38px;border-radius:50%;color:#d9dfcf;background:#344231;font-size:25px;flex-shrink:0}
.operator-intro,.operator-note{font-size:12px;line-height:1.5;color:#aab6a0;word-break:keep-all;overflow-wrap:anywhere}.operator-intro{margin:12px 0}.operator-note{margin:10px 0}
.operator-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.operator-stats>div{background:#2d392d;border:1px solid #495640;padding:10px 12px;border-radius:6px}.operator-stats dt{color:#95a58a;font-size:10px}.operator-stats dd{font-size:13px;margin:6px 0 0;line-height:1.4}
.operator-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:16px 0}.operator-tabs button{height:40px;border:1px solid #516149;background:#2d3a2b;color:#aebda2;border-radius:5px;font-size:13px}.operator-tabs button[aria-pressed=true]{background:#bdcba9;color:#2c3e27;border-color:#d1ddc1;font-weight:700}
.operator-section{border-top:1px solid #4b5842;padding-top:14px}.operator-section h3{margin:0 0 9px;font-size:15px;font-weight:600}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:8px 0}.setting-row b{font-size:13px;font-weight:500}.setting-row small{display:block;font-size:11px;line-height:1.5;margin-top:4px;color:#9eae93}.setting-row input{width:21px;height:21px;flex-shrink:0;accent-color:#98b884}
.operator-secondary{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #5c6e50;border-radius:5px;color:#d4e0c9;background:#364730;padding:10px 13px;font-size:12px;min-height:38px}
#micStatus{min-height:48px;margin:8px 0;font-size:12px;line-height:1.5}
.mic-meter-label{display:flex;align-items:center;gap:12px;font-size:12px;color:#a5b79b;margin:8px 0}.mic-meter-label meter{width:100%;height:18px;flex:1;accent-color:#99b97b}
.threshold-controls{display:flex;align-items:center;gap:12px;font-size:12px;color:#a5b79b;margin:10px 0}.threshold-controls>span{margin-right:auto}.threshold-controls button{width:38px;height:34px;border:1px solid #66795a;border-radius:5px;background:#3a4d32;color:#d7e4c8;font-size:19px}.threshold-controls output{min-width:26px;text-align:center}
.recording-row{padding:14px 0;border-bottom:1px solid #3d4b35}.recording-row>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.recording-row b{font-size:13px;font-weight:500}.recording-name{font-size:11px;color:#a0ae92;max-width:245px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recording-tools{display:flex;gap:8px;margin-top:10px}.recording-tools label,.recording-tools button{display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#c7d3bc;background:#34442e;border:1px solid #54654a;border-radius:4px;padding:10px 14px;cursor:pointer}.recording-tools input{position:absolute;width:1px;height:1px;opacity:0}.recording-tools button{color:#b8b6a3;background:#303a2b}
.recording-pages{display:flex;align-items:center;justify-content:space-between;margin:18px 0;font-size:12px;color:#b6c5a8}
.operator-actions{display:flex;gap:8px;flex-wrap:wrap}.operator-reset{width:100%;margin-top:20px;padding:14px;border-radius:5px;border:1px solid #927360;background:#634f40;color:#ece0c9;font-size:13px}
.reveal-test-times{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.reveal-test-times button{min-height:33px;padding:7px 5px;border:1px solid #4f5f46;border-radius:4px;background:#293a26;color:#c3cfb7;font-size:11px;font-variant-numeric:tabular-nums}
.end-dialog{width:440px;padding:25px}.end-dialog h2{font-size:21px;margin:0}.end-dialog p{color:#aebca2;font-size:13px;margin:12px 0 24px}.end-dialog>div{display:flex;gap:10px}.end-dialog button{flex:1;border:1px solid #5c7050;background:#344b2c;color:#e1e8d9;border-radius:5px;padding:12px;font-size:13px}.end-dialog button:last-child{background:#634a38;border-color:#8b6950}
.mic-help-dialog{width:650px;height:660px;padding:28px}.mic-help-dialog>p{font-size:14px;line-height:1.7;margin:20px 0;color:#c7d1bc}.permission-steps{margin:18px 0 22px;padding-left:24px;font-size:16px;line-height:1.6;color:#e0e7d7}.permission-steps li{padding-left:4px;margin:12px 0}.permission-help{padding:15px;background:#2c3a2b;border:1px solid #4b6041;border-radius:5px;font-size:13px;line-height:1.6;color:#b8c7aa}.permission-help>b{color:#d7e0c9}.permission-help p{margin:9px 0 0}.mic-help-dialog #micHelpStatus{font-size:12px;line-height:1.5;margin:17px 0}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}