.fx{position:absolute;inset:0;pointer-events:none;z-index:40}
.vignette{background:radial-gradient(ellipse at 50% 42%,#0000 42%,#000b 100%)}
.dust{background:var(--grain);opacity:.2;mix-blend-mode:overlay;filter:saturate(.7);overflow:hidden}
.dust::before,.dust::after{content:"";position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:#e8d9ad;box-shadow:
  8vw 14vh 0 0 #d8c897aa,17vw 66vh 0 0 #f0e4b477,24vw 31vh 0 0 #c9bd8a99,31vw 82vh 0 0 #e7d9a366,
  42vw 19vh 0 0 #eadca888,49vw 73vh 0 0 #d6c58b99,57vw 44vh 0 0 #f3e5b455,64vw 91vh 0 0 #c6b87e88,
  71vw 27vh 0 0 #e6d7a477,78vw 63vh 0 0 #f0e0a966,86vw 12vh 0 0 #d0bf8588,94vw 78vh 0 0 #eadca877;
  animation:dustFloat 15s linear infinite;filter:blur(.2px)}
.dust::after{left:3vw;top:9vh;width:2px;height:2px;opacity:.7;box-shadow:
  12vw 58vh 0 0 #f1e2ad88,21vw 8vh 0 0 #c4b47788,35vw 47vh 0 0 #e6d79a66,46vw 12vh 0 0 #f2e4b477,
  53vw 84vh 0 0 #cbbd8988,68vw 51vh 0 0 #eadca977,83vw 32vh 0 0 #d4c48677,91vw 6vh 0 0 #f1e2b366;
  animation:dustFloat 21s linear infinite reverse}
.sand{opacity:0;transform:translateY(-18%);background:radial-gradient(circle at 20% 12%,rgba(200,180,120,.2),transparent 26%),
 radial-gradient(circle at 68% 18%,rgba(170,150,100,.14),transparent 20%),
 radial-gradient(circle at 45% 62%,rgba(200,180,120,.12),transparent 24%);
 animation:sandFall 12s linear infinite alternate;
}
.cobweb{opacity:.15;background:
  radial-gradient(ellipse at 0 0,transparent 0 17%,rgba(224,231,214,.11) 17.2% 17.8%,transparent 18.1% 27%,rgba(224,231,214,.08) 27.2% 27.7%,transparent 28%),
  radial-gradient(ellipse at 100% 0,transparent 0 15%,rgba(224,231,214,.1) 15.2% 15.8%,transparent 16.1% 25%,rgba(224,231,214,.07) 25.2% 25.7%,transparent 26%);
  mix-blend-mode:screen;filter:blur(.35px)}
.cobweb::before,.cobweb::after{content:"";position:absolute;top:-3%;width:36%;height:44%;opacity:.8;background:
  repeating-radial-gradient(ellipse at 0 0,transparent 0 13px,rgba(232,238,222,.11) 14px 15px,transparent 16px 25px),
  repeating-conic-gradient(from 2deg at 0 0,rgba(232,238,222,.14) 0 .7deg,transparent 1deg 18deg);mask-image:radial-gradient(ellipse at 0 0,#000 0 68%,transparent 100%)}
.cobweb::before{left:-2%;transform:rotate(-3deg)}
.cobweb::after{right:-2%;transform:scaleX(-1) rotate(-3deg)}
.cycling #cycle-transition{opacity:1;visibility:visible;transform:none}
#cycle-transition{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;visibility:hidden;background:radial-gradient(circle at 50% 46%,rgba(34,66,45,.88),rgba(3,7,5,.98) 58%,rgba(1,2,2,1));transition:opacity .18s ease,visibility .18s ease;pointer-events:none;transform:scale(1.035)}
.transition-grid{position:absolute;inset:-20%;background:linear-gradient(rgba(150,220,165,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(150,220,165,.08) 1px,transparent 1px);background-size:42px 42px;transform:perspective(420px) rotateX(62deg) scale(1.4) translateY(22%);transform-origin:center bottom;animation:gridDrift 2s linear infinite;mask-image:linear-gradient(transparent 0%,#000 34%,#000 72%,transparent 100%)}
.transition-ring{position:absolute;width:min(50vw,360px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(205,239,210,.32);box-shadow:0 0 0 10px rgba(112,172,124,.04),0 0 70px rgba(131,201,146,.18),inset 0 0 46px rgba(131,201,146,.16);animation:ringThrob .9s cubic-bezier(.25,.75,.45,1) infinite}
.transition-ring::before,.transition-ring::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px dashed rgba(212,234,207,.35);animation:spin 5s linear infinite}.transition-ring::after{inset:28%;border-style:solid;border-color:rgba(211,148,73,.38) transparent rgba(211,148,73,.38) transparent;animation:spinReverse 3s linear infinite}
.transition-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;text-shadow:0 0 16px rgba(178,235,185,.55);transform:translateY(-2px);animation:copyLock 1s steps(2) both}.transition-copy span{font:600 clamp(18px,3vw,34px) var(--mono);letter-spacing:.24em;color:#d4ebd0}.transition-copy b{font:500 clamp(9px,1vw,12px) var(--stencil);letter-spacing:.3em;color:#d39a41}.cycling #cycle-transition .transition-copy::before{content:"// СИНХРОНИЗАЦИЯ //";position:absolute;top:-26px;font:700 8px var(--mono);letter-spacing:.25em;color:#6e9272}
@keyframes gridDrift{to{background-position:0 42px,42px 0}}@keyframes ringThrob{0%,100%{transform:scale(.78);opacity:.4}50%{transform:scale(1);opacity:1}}@keyframes spinReverse{to{transform:rotate(-360deg)}}@keyframes copyLock{0%{opacity:0;transform:translateY(8px);letter-spacing:.5em}35%{opacity:1}100%{opacity:1;transform:translateY(-2px)}}
.emergency{opacity:0;transition:opacity 1.2s;background:radial-gradient(ellipse at 50% 30%,rgba(192,40,29,.45),rgba(192,40,29,.12) 38%,rgba(92,15,10,.62) 100%);mix-blend-mode:screen;box-shadow:inset 0 0 30px rgba(168,32,23,.32)}
.emergency::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 8%,#ff3a2a66,#0000 22%);animation:beacon 1.5s linear infinite}
@keyframes beacon{0%,100%{opacity:.15}45%{opacity:1}}
@keyframes sandFall{0%{opacity:0;transform:translateY(-18%) scale(1.05)}20%{opacity:.18}50%{opacity:.35}100%{opacity:.12;transform:translateY(24%) scale(1.2)}}
@keyframes dustFloat{0%{transform:translate(-3vw,-8vh) rotate(0deg);opacity:.08}28%{opacity:.8}67%{opacity:.42}100%{transform:translate(7vw,18vh) rotate(12deg);opacity:.12}}

#room[data-power="low"] .emergency{opacity:.22}
#room[data-power="critical"] .emergency{opacity:.75}
#room[data-power="critical"] .sand{animation-duration:5s;opacity:.36}
#room[data-power="critical"] .dust{opacity:.42}
#room.last-act .emergency{opacity:1}
#room.last-act .wall{filter:brightness(.74) sepia(.18) saturate(.94)}
#room.last-act .tube{box-shadow:0 0 12px rgba(255,79,56,.2)}

#room[data-tone="human"] .observation-window i{background:#d6a05b;box-shadow:0 0 18px #d6a05b99}
#room[data-tone="human"] .wall-caption strong{color:#e1c99c}
#room[data-tone="grief"] .wall-caption strong{color:#bca2b7}
#room[data-tone="grief"] .observation-window{filter:hue-rotate(22deg) saturate(.65)}
#room[data-tone="panic"] .wall-caption strong{color:#e6604f;animation:captionPulse .95s steps(2) infinite}
@keyframes captionPulse{50%{opacity:.48}}

 
#room[data-wear="1"] .dust{opacity:.26} #room[data-wear="2"] .dust{opacity:.34} #room[data-wear="3"] .dust{opacity:.42}
#room[data-wear="1"] .sand{opacity:.12} #room[data-wear="2"] .sand{opacity:.2} #room[data-wear="3"] .sand{opacity:.26}
#room[data-wear="1"] .tube.t2,#room[data-wear="2"] .tube.t2,#room[data-wear="3"] .tube.t2{animation:flick 7s infinite}
#room[data-wear="2"] .tube.t3,#room[data-wear="3"] .tube.t3{animation:flick 5s infinite 1s}
#room[data-wear="3"] #screen{animation:jit 6s infinite}
@keyframes flick{0%,86%,100%{opacity:1}87%{opacity:.25}88%{opacity:1}90%{opacity:.4}91%{opacity:1}95%{opacity:.7}}
@keyframes jit{0%,93%,100%{transform:none}94%{transform:translateX(1.5px)}95%{transform:translateX(-1px) skewX(.4deg)}96%{transform:none}}

#room[data-pressure="0"] .cobweb{opacity:.08}
#room[data-pressure="1"] .cobweb{opacity:.18}
#room[data-pressure="2"] .cobweb{opacity:.28}
#room[data-pressure="3"] .cobweb{opacity:.42}
#room[data-pressure="4"] .cobweb{opacity:.58;animation:webTension 4s ease-in-out infinite}
#room[data-pressure="1"] .dust{opacity:.3}
#room[data-pressure="2"] .dust{opacity:.42}
#room[data-pressure="3"] .dust{opacity:.58}
#room[data-pressure="4"] .dust{opacity:.76}
#room[data-pressure="2"] .dust::before{animation-duration:11s}
#room[data-pressure="3"] .dust::before{animation-duration:8s}
#room[data-pressure="4"] .dust::before{animation-duration:5s}
#room[data-pressure="3"] .sand{opacity:.3;animation-duration:7s}
#room[data-pressure="4"] .sand{opacity:.48;animation-duration:4s}
@keyframes webTension{0%,100%{filter:blur(.35px) brightness(.9)}50%{filter:blur(.15px) brightness(1.45)}}

 
#room[data-power="low"]{--fan:1.9s}
#room[data-power="low"] .tube.t1,#room[data-power="low"] .lamp{animation:flick 3.2s infinite}
#room[data-power="low"] .tube.t2{animation:flick 2.1s infinite .4s}
#room[data-power="low"] .wall{filter:brightness(.88)}
#room[data-power="low"] #screen{animation:scrFlick 4s infinite}
@keyframes scrFlick{0%,90%,100%{filter:none}91%{filter:brightness(.6)}92%{filter:none}96%{filter:brightness(.8)}}

 
#room[data-power="critical"]{--fan:3.4s}
#room[data-power="critical"] .emergency{opacity:1}
#room[data-power="critical"] .tube{opacity:.08;animation:none;box-shadow:none}
#room[data-power="critical"] .wall{filter:brightness(.7) saturate(.7)}
#room[data-power="critical"] .digital{color:#e6604f;text-shadow:0 0 6px #c0281d}
#room[data-power="critical"] #screen{animation:scrFlick 1.8s infinite}
#room[data-power="critical"] .desk{animation:shake 5s infinite}
#room[data-power="critical"] .lamp{animation:lampFaze 0.9s steps(2) infinite alternate}
@keyframes shake{0%,94%,100%{transform:none}95%{transform:translate(1px,1px)}96%{transform:translate(-1px,0)}97%{transform:translate(1px,-1px)}98%{transform:none}}
@keyframes lampFaze{0%{opacity:1;filter:brightness(1)}50%{opacity:.6;filter:brightness(.7)}100%{opacity:1;filter:brightness(1.2)}}
#room.last-act .emergency{opacity:.72}
#room.last-act .lamp-row .lp:last-child span{color:#e6604f}
#room.last-act .wall{filter:brightness(.8) sepia(.12) saturate(.9)}

 
#room[data-power="dead"] .fan{animation-play-state:paused}
#room.blackout{transition:filter 2.6s ease-in;filter:brightness(0)}
 
#room.waking .wall,#room.waking .desk{filter:brightness(.55) sepia(.3) hue-rotate(-25deg)}
#room.waking .emergency{opacity:.7}
#room.waking{animation:wake 2.8s ease-out}
@keyframes wake{0%{opacity:0}30%{opacity:.6}45%{opacity:.3}100%{opacity:1}}
.wall,.desk{transition:filter 1.6s}
 
#room.cycling #cyc-flash{opacity:1}
#room.cycling .gauge-panel{animation:gaugeBump .8s}
#room.cycling .wall{filter:brightness(1.35) saturate(.82);animation:cycleLight .9s ease-in-out}
#room.cycling .desk{filter:brightness(.68);animation:cycleDesk .9s ease-in-out}
#room.cycling #screen{animation:cycleScreen .9s steps(2)}
#room.cycling .fan{animation-duration:.3s}
@keyframes gaugeBump{30%{transform:translateX(-50%) translateY(1px)}}
@keyframes cycleLight{0%,100%{filter:brightness(.78) saturate(.7)}38%{filter:brightness(1.55) saturate(.65)}70%{filter:brightness(1.02)}}
@keyframes cycleDesk{0%,100%{transform:none}35%{transform:translateY(2px)}55%{transform:translateY(-1px)}}
@keyframes cycleScreen{0%,100%{filter:none}18%{filter:brightness(2.4) sepia(.25)}25%{filter:brightness(.35)}42%{filter:brightness(1.6)}68%{filter:contrast(1.28)}80%{filter:none}}

  
#room.noise-1 #screen{animation:noiseStage1 .62s steps(3)}
#room.noise-2 .wall{animation:noiseStage2 .72s ease-in-out}
#room.noise-2 #screen{animation:noiseStage1 .7s steps(4) 2}
#room.noise-3 .wall{animation:noiseStage3 1.3s ease-in-out}
#room.noise-3 .desk{animation:noiseDesk3 1.3s ease-in-out}
#room.noise-3 #screen{animation:noiseStage3 .9s steps(5)}
#room.noise-3 .cobweb{animation:webTension 1.1s ease-in-out}
@keyframes noiseStage1{0%,100%{filter:none}40%{filter:brightness(1.3) contrast(1.1)}60%{filter:brightness(.82)}}
@keyframes noiseStage2{0%,100%{filter:none}30%{filter:brightness(1.22) saturate(.7) hue-rotate(-6deg)}65%{filter:brightness(.86)}}
@keyframes noiseStage3{0%,100%{filter:brightness(1) saturate(1)}12%{filter:brightness(1.9) saturate(.5)}24%{filter:brightness(.42)}48%{filter:brightness(1.35) saturate(.72)}72%{filter:brightness(.78)}}
@keyframes noiseDesk3{0%,100%{transform:none}16%{transform:translate3d(-2px,1px,0)}44%{transform:translate3d(2px,-1px,0)}68%{transform:translate3d(-1px,0,0)}}

 
#room[data-names="some"] .emergency{background:radial-gradient(ellipse at 82% 22%,#c98a2b0e,#0000 55%)}
#room[data-names="many"] .emergency{background:radial-gradient(ellipse at 82% 22%,#c98a2b1c,#0000 58%)}
#room[data-names="full"] .emergency{background:radial-gradient(ellipse at 82% 22%,#c98a2b2e,#0000 62%)}
#room[data-names="many"] .wall-caption,#room[data-names="full"] .wall-caption{animation:memorialGlow 4.4s ease-in-out infinite}
@keyframes memorialGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}

 
.beat-line{display:block;width:100%;margin:10px 0 2px;padding:8px 10px;text-align:left;background:linear-gradient(90deg,#141a1499,#10151033);border:0;border-left:2px solid #3d5a41;color:#7f9a80;font:inherit;font-size:.92em;letter-spacing:.06em;cursor:pointer;animation:beatIn .5s ease-out both;transition:color .2s,border-color .2s,background .2s}
.beat-line:hover{color:#b6cfb2;border-color:#6f9a72}
.beat-line.strong{border-left-color:var(--amber);color:#c9a463}
.beat-line.rare{border-left-color:#8a5a3a;color:#c98a5a;text-shadow:0 0 10px #c98a2b55}
.beat-line.read{color:#cdd6c8;border-color:#87ae88}
@keyframes beatIn{0%{opacity:0;transform:translateX(-6px)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .fan{animation:none!important}
}