:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#050913}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;overflow:hidden}body{background:#050913;color:#eef8ff}button,a{-webkit-tap-highlight-color:transparent}.apartment{position:relative;width:100vw;height:100svh;min-height:480px;isolation:isolate;overflow:hidden;background:#07101d}.apartment-bg,.apartment-bg img,.time-layer,.weather-layer,.ambient{position:absolute;inset:0;width:100%;height:100%}.apartment-bg img{object-fit:cover;object-position:center}.time-layer{z-index:2;pointer-events:none;transition:background 1.2s ease}body[data-period=dawn] .time-layer{background:linear-gradient(180deg,rgba(248,141,94,.1),rgba(24,12,44,.16))}body[data-period=day] .time-layer{background:rgba(84,174,218,.035)}body[data-period=evening] .time-layer{background:linear-gradient(180deg,rgba(240,118,64,.09),rgba(17,13,42,.17))}body[data-period=night] .time-layer{background:rgba(2,8,28,.16)}.weather-layer{z-index:7;pointer-events:none;overflow:hidden}.rain,.snow,.fog{position:absolute;inset:-20%;opacity:0;transition:opacity .8s ease}body[data-weather=rain] .rain{opacity:.22;background-image:repeating-linear-gradient(104deg,transparent 0 16px,rgba(163,222,255,.72) 17px 18px,transparent 19px 32px);background-size:42px 72px;animation:rain 1.15s linear infinite}body[data-weather=snow] .snow{opacity:.45;background-image:radial-gradient(circle,#eaf8ff 0 1px,transparent 2px),radial-gradient(circle,#eaf8ff 0 1.5px,transparent 2.5px);background-size:53px 53px,79px 79px;animation:snow 12s linear infinite}body[data-weather=fog] .fog,body[data-weather=cloudy] .fog{opacity:.16;background:linear-gradient(90deg,transparent,#b7cee2 45%,transparent 80%);animation:fog 18s ease-in-out infinite alternate}.character{position:absolute;z-index:5;left:43.2%;top:20.5%;width:19.5vw;max-width:348px;aspect-ratio:3/4;pointer-events:none;filter:drop-shadow(0 18px 18px rgba(0,0,0,.28))}.character-sprite{position:absolute;inset:0;display:block;background:url("./assets/v4/working-spritesheet.webp") 0 0/400% 200% no-repeat;image-rendering:pixelated;transform-origin:50% 80%}body[data-state=waiting] .character-sprite{animation:breathe 3.8s ease-in-out infinite}body[data-state=idle] .character-sprite{animation:breathe 3s ease-in-out infinite}body[data-state=sleeping] .character{filter:saturate(.65) brightness(.72) drop-shadow(0 18px 18px rgba(0,0,0,.28))}body[data-state=sleeping] .character-sprite{animation:sleep-breathe 4.4s ease-in-out infinite}body[data-state=error] .character{filter:drop-shadow(0 0 16px rgba(255,74,87,.48))}.thought{position:absolute;z-index:9;left:58%;top:12%;max-width:min(310px,28vw);padding:13px 17px;color:#101826;background:rgba(255,255,255,.95);border:3px solid #132035;border-radius:24px;box-shadow:0 10px 36px rgba(0,0,0,.28);opacity:0;transform:translateY(9px) scale(.96);transition:opacity .25s ease,transform .25s ease;pointer-events:none}.thought.is-visible{opacity:1;transform:none}.thought p{margin:0;font-size:clamp(14px,1.15vw,18px);font-weight:750;line-height:1.25}.thought i{position:absolute;display:block;border-radius:999px;background:#fff;border:2px solid #132035}.thought i:nth-of-type(1){width:15px;height:15px;left:24px;bottom:-14px}.thought i:nth-of-type(2){width:8px;height:8px;left:13px;bottom:-25px}.hud{position:absolute;z-index:12;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 18px max(22px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(3,8,20,.74),transparent)}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.brand img{border-radius:14px;box-shadow:0 0 0 1px rgba(111,229,255,.24),0 8px 24px rgba(0,0,0,.28)}.brand span,.world-status{display:grid;gap:1px}.brand strong{font-size:16px;letter-spacing:.01em}.brand small,.world-status span{color:#a8c1d5;font-size:12px}.world-status{text-align:right}.world-status strong{font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:.05em}.debug-toggle{position:absolute;z-index:14;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:42px;height:42px;border:1px solid rgba(161,220,255,.18);border-radius:14px;color:#c5e7ff;background:rgba(5,13,26,.58);backdrop-filter:blur(12px);cursor:pointer;opacity:.38}.debug-toggle:hover,.debug-toggle:focus-visible{opacity:1}.debug-panel{position:absolute;z-index:15;right:max(16px,env(safe-area-inset-right));bottom:max(66px,calc(env(safe-area-inset-bottom) + 58px));width:min(300px,calc(100vw - 32px));padding:12px;border:1px solid rgba(151,216,255,.22);border-radius:18px;background:rgba(5,13,26,.9);box-shadow:0 20px 60px rgba(0,0,0,.4);backdrop-filter:blur(18px);display:none;grid-template-columns:repeat(2,1fr);gap:8px}.debug-panel.is-open{display:grid}.debug-title{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:2px 3px 6px}.debug-title button{border:0;background:transparent;color:#c7e8ff;font-size:24px;cursor:pointer}.debug-panel>button:not(#debug-close){padding:10px;border:1px solid rgba(121,199,245,.2);border-radius:11px;color:#c9eaff;background:rgba(27,61,88,.36);cursor:pointer}.debug-panel>button[aria-pressed=true]{color:#06101e;background:#75e7ff;border-color:#75e7ff}.ambient{z-index:3;pointer-events:none}.monitor-pulse{position:absolute;left:28%;top:23%;width:24%;height:28%;background:rgba(38,201,255,.09);filter:blur(18px);animation:monitor 4s ease-in-out infinite}.window-car{position:absolute;right:-8%;width:34px;height:4px;border-radius:50%;background:#83edff;box-shadow:-9px 1px 8px #2fbfff;opacity:.45}.car-one{top:34%;animation:traffic 17s linear infinite}.car-two{top:49%;animation:traffic 25s linear 7s infinite}.noscript{position:absolute;z-index:20;left:50%;bottom:20px;transform:translateX(-50%);padding:10px 16px;border-radius:10px;background:#111d2d}body[data-state=error] .time-layer{background:rgba(112,0,15,.24);animation:alarm 1.2s ease-in-out infinite}@keyframes rain{to{transform:translate3d(-42px,72px,0)}}@keyframes snow{to{transform:translate3d(-24px,79px,0)}}@keyframes fog{to{transform:translateX(18%)}}@keyframes traffic{from{transform:translateX(0)}to{transform:translateX(-55vw)}}@keyframes monitor{50%{opacity:.45;transform:scale(1.02)}}@keyframes breathe{50%{transform:translateY(2px) scaleY(.997)}}@keyframes sleep-breathe{50%{transform:translateY(3px) scaleY(.992)}}@keyframes alarm{50%{background:rgba(170,0,18,.34)}}
@media(max-width:720px){.apartment-bg img{object-position:center}.character{left:27%;top:29%;width:56vw;max-width:none}.thought{left:auto;right:8%;top:19%;max-width:72vw}.hud{padding-left:16px;padding-right:16px}.brand img{width:38px;height:38px}.world-status strong{font-size:20px}.monitor-pulse{left:5%;top:25%;width:58%;height:24%}.debug-toggle,.debug-panel{backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.thought{transition:none}}

/* Tuned against the fixed apartment layer. */
.character-sprite{background-image:url("./assets/v4/working-spritesheet-q80.webp")}
body[data-state=waiting] .character-sprite{background-image:url("./assets/v4/waiting-spritesheet-q80.webp")}
body[data-state=idle] .character-sprite{background-image:url("./assets/v4/idle-spritesheet-q80.webp")}
body[data-state=sleeping] .character-sprite{background-image:url("./assets/v4/sleeping-spritesheet-q80.webp")}
body[data-state=error] .character-sprite{background-image:url("./assets/v4/error-spritesheet-q80.webp")}
.character{left:40.8%;top:20%;width:25vw;max-width:450px}
@media(max-width:720px){.character{left:3%;top:25%;width:88vw;max-width:none}.thought{top:18%}}

/* Phone landscape uses the same 1600x674 coordinate system as the background. */
@media(orientation:landscape) and (max-height:560px){
  .apartment{height:100svh;min-height:0}
  .character{left:calc(50vw - 14.84svh);top:20.03svh;width:40.06svh;max-width:none}
  .thought{left:58%;top:14%;max-width:min(280px,32vw)}
  .hud{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px}
  .brand img{width:38px;height:38px}
  .world-status strong{font-size:21px}
  .monitor-pulse{left:28%;top:23%;width:24%;height:28%}
}

/* Office v4.1: living props share the background's object-fit coordinate plane. */
.scene-plane{position:absolute;z-index:3;pointer-events:none;overflow:hidden;transform:translateZ(0)}
.window-live{position:absolute;overflow:hidden;isolation:isolate}
.window-live-left{left:20.3%;top:0;width:13.2%;height:35.5%;clip-path:polygon(2% 7%,98% 0,98% 82%,2% 100%)}
.window-live-right{contain:paint}
.building-sign{position:absolute;display:block;mix-blend-mode:screen;transform:translateZ(0)}
.building-sign-cyan{left:55.7%;top:4%;width:5.5%;height:42%;background:linear-gradient(90deg,rgba(57,190,255,.02),rgba(93,226,255,.3),rgba(45,136,255,.06));box-shadow:0 0 7px rgba(54,193,255,.2);animation:sign-cyan 8.4s steps(2,end) infinite}
.building-sign-amber{left:81.2%;top:45%;width:4.5%;aspect-ratio:1;border:1px solid rgba(255,182,104,.25);border-radius:50%;box-shadow:0 0 6px rgba(255,132,62,.16),inset 0 0 4px rgba(255,211,144,.2);animation:sign-amber 11s ease-in-out infinite}
.building-sign-lower{left:34.7%;top:68%;width:3.2%;height:14%;background:linear-gradient(180deg,rgba(60,221,255,.24),rgba(36,111,255,.05));box-shadow:0 0 5px rgba(44,175,255,.15);animation:sign-lower 9.6s steps(2,end) infinite}

.monitor-screen{position:absolute;overflow:hidden;isolation:isolate;contain:paint;background:transparent;color:#7deaff;box-shadow:none}
.monitor-screen-left{left:27.1%;top:24.1%;width:10.35%;height:24.6%;clip-path:polygon(4% 30%,96% 4%,96% 86%,4% 98%)}
.monitor-screen-right{left:38.15%;top:23.25%;width:12.2%;height:20.15%;clip-path:polygon(4% 13%,96% 3%,96% 90%,4% 98%)}
.screen-chart{position:absolute;display:none}

.desk-lamp-glow{position:absolute;left:19.5%;top:35%;width:11%;height:22%;border-radius:50%;background:radial-gradient(circle,rgba(255,194,108,.16),transparent 68%);mix-blend-mode:screen;animation:lamp-breathe 7s ease-in-out infinite}
.server-life{position:absolute;left:52.6%;top:18.5%;width:2.6%;height:43%;opacity:.28;background:repeating-linear-gradient(180deg,transparent 0 8px,#48ddff 9px 11px,transparent 12px 22px);filter:drop-shadow(0 0 3px #20bfff);animation:server-blink 2.6s steps(4,end) infinite}
.cat-life{position:absolute;left:77.4%;top:66.2%;width:8.8%;height:14.5%;transform-origin:50% 80%;animation:cat-breathe 4.8s ease-in-out infinite}
.cat-visor{position:absolute;left:48%;top:48%;width:27%;height:14%;border-radius:40%;background:rgba(57,203,255,.22);box-shadow:0 0 8px rgba(53,204,255,.55);animation:cat-visor 3.2s ease-in-out infinite}
.cat-ear{position:absolute;top:26%;width:9%;height:12%;border-radius:60% 10% 40% 30%;background:rgba(82,83,103,.86);transform-origin:50% 100%}
.cat-ear-left{left:41%;animation:cat-ear 9s ease-in-out infinite}.cat-ear-right{left:68%;animation:cat-ear 11s ease-in-out 2.5s infinite}
.cat-tail{position:absolute;left:1%;top:53%;width:38%;height:22%;border-bottom:5px solid rgba(70,72,92,.78);border-radius:0 0 70% 60%;transform-origin:100% 50%;animation:cat-tail 10s ease-in-out infinite}
.cat-z{position:absolute;right:4%;top:15%;color:rgba(170,226,255,.76);font:700 11px/1 ui-monospace,monospace;text-shadow:0 0 6px #40bfff;opacity:0;animation:cat-z 8s ease-in-out infinite}
body[data-state=error] .cat-life{animation-duration:2.4s}body[data-state=error] .cat-z{display:none}

@keyframes sign-cyan{0%,62%,100%{opacity:.28}64%,69%{opacity:.12}71%,96%{opacity:.38}}
@keyframes sign-amber{0%,100%{opacity:.3}50%{opacity:.62}}
@keyframes sign-lower{0%,74%,100%{opacity:.22}76%,80%{opacity:.42}82%{opacity:.2}}
@keyframes lamp-breathe{0%,100%{opacity:.62}50%{opacity:1;transform:scale(1.035)}}
@keyframes server-blink{0%,100%{opacity:.2}35%{opacity:.5}63%{opacity:.27}}
@keyframes cat-breathe{50%{transform:translateY(-1px) scaleY(1.025)}}
@keyframes cat-visor{50%{opacity:.48;box-shadow:0 0 13px rgba(53,204,255,.74)}}
@keyframes cat-ear{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-16deg)}94%{transform:rotate(9deg)}}
@keyframes cat-tail{0%,78%,100%{transform:rotate(0)}84%{transform:rotate(-12deg)}91%{transform:rotate(7deg)}}
@keyframes cat-z{0%,66%,100%{opacity:0;transform:translate(0,5px) scale(.8)}72%,84%{opacity:.82}90%{opacity:0;transform:translate(8px,-12px) scale(1.1)}}

/* Desktop registration: hands now land on the keyboard; phone coordinates stay untouched. */
@media(min-width:721px) and (min-height:561px){.character{left:34.5%}}
@media(max-width:720px){.window-live,.cat-life,.desk-lamp-glow{display:none}.monitor-screen-left{left:0;top:25%;width:14%;height:24%;clip-path:polygon(0 9%,100% 0,100% 91%,0 100%)}.monitor-screen-right{left:13.5%;top:22.8%;width:40.5%;height:21.7%;clip-path:polygon(1% 4%,99% 0,99% 94%,1% 100%)}.server-life{left:78%;top:21%;width:4.3%;height:42%}}

@media(prefers-reduced-motion:reduce){.building-sign,.screen-chart,.desk-lamp-glow,.server-life,.cat-life,.cat-visor,.cat-ear,.cat-tail,.cat-z{animation:none!important}}

/* Office v5.1: every living object is registered to the background coordinate plane. */
.scene-plane .character{left:35.7%;top:30.7%;width:15.8%;max-width:none}
.scene-plane .thought{left:46.8%;top:13%;max-width:15%;padding:.8% 1%;border-width:2px;border-radius:18px}
.scene-plane .thought p{font-size:clamp(11px,.78vw,17px)}
.chair-shadow{position:absolute;z-index:4;left:38.6%;top:78.7%;width:14.6%;height:3.8%;border-radius:50%;background:radial-gradient(ellipse,rgba(2,5,10,.42) 0%,rgba(2,5,10,.2) 48%,transparent 74%);filter:blur(3px)}

/* The raster already contains glass and bezels. Every animated child stays inside a measured safe interior. */
.code-editor{position:absolute;left:10%;right:9%;top:18%;bottom:14%;display:grid;align-content:start;gap:7%;font:600 max(5px,.44vw)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;color:#8beaff;text-shadow:0 0 4px rgba(77,218,255,.55)}
.code-line{display:block;width:max-content;max-width:100%;overflow:hidden;white-space:nowrap;clip-path:inset(0 100% 0 0);animation:code-type 8s steps(24,end) infinite}
.code-line:nth-child(2){animation-delay:1.15s;color:#b6d7ff}.code-line:nth-child(3){animation-delay:2.3s;color:#8fffc1}.code-line:nth-child(4){animation-delay:3.45s;color:#ffd38a}.code-line:nth-child(5){animation-delay:4.6s}
.code-indent{padding-left:8%}.code-keyword{color:#c7a7ff}.code-cursor{display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.12em;background:#b9f7ff;animation:cursor-blink .72s steps(1,end) infinite}
body:not([data-state=working]) .code-editor{display:none}

/* The cat stays anchored to one couch cushion; sprite motion is added below as a sparse state-aware loop. */
.cat-character{position:absolute;z-index:4;left:76.6%;top:62.2%;width:8.2%;aspect-ratio:1;display:block;background:url("./assets/v5/cat-spritesheet.webp") 0 0/400% 200% no-repeat;filter:drop-shadow(0 5px 5px rgba(0,0,0,.24));transform-origin:50% 78%}
.cat-character::after{content:"";position:absolute;left:55%;top:46%;width:35%;height:14%;border-radius:40%;background:rgba(55,201,255,.08);box-shadow:0 0 7px rgba(53,204,255,.28);animation:cat-visor-rest 4.8s ease-in-out infinite}
body[data-state=sleeping] .cat-character{filter:saturate(.72) brightness(.76) drop-shadow(0 6px 7px rgba(0,0,0,.3))}

/* Cars live in the right-window coordinate system and disappear behind its real frame. */
.traffic-car{position:absolute;z-index:2;left:-11%;top:39%;width:9%;aspect-ratio:1;display:block;animation:road-trip 21s linear infinite;will-change:transform}
.traffic-car-b{left:102%;top:72%;width:7.5%;animation-name:road-trip-reverse;animation-duration:29s;animation-delay:-13s}
.traffic-car-sprite{position:absolute;inset:0;display:block;background:url("./assets/v5/hovercar-spritesheet.webp") 0 0/400% 200% no-repeat;transform:scaleX(-1);filter:brightness(1.18) drop-shadow(0 1px 4px rgba(45,189,255,.3));animation:vehicle-frames 1.9s steps(1,end) infinite}
.traffic-car-b .traffic-car-sprite{transform:none;filter:hue-rotate(24deg) brightness(1.12) drop-shadow(0 1px 3px rgba(255,161,89,.2))}

@keyframes code-type{0%,8%{clip-path:inset(0 100% 0 0)}32%,88%{clip-path:inset(0 0 0 0)}96%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes cursor-blink{50%{opacity:0}}
@keyframes cat-visor-rest{50%{opacity:.55;box-shadow:0 0 11px rgba(53,204,255,.4)}}
@keyframes vehicle-frames{0%,12%{background-position:0 0}13%,24%{background-position:33.333% 0}25%,36%{background-position:66.667% 0}37%,49%{background-position:100% 0}50%,61%{background-position:0 100%}62%,73%{background-position:33.333% 100%}74%,86%{background-position:66.667% 100%}87%,100%{background-position:100% 100%}}
@keyframes road-trip{0%{opacity:0;transform:translate3d(0,0,0) scale(.74)}5%{opacity:.82}93%{opacity:.72}100%{opacity:0;transform:translate3d(1320%,250%,0) scale(.5)}}
@keyframes road-trip-reverse{0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}6%{opacity:.7}92%{opacity:.65}100%{opacity:0;transform:translate3d(-1510%,-260%,0) scale(.72)}}

@media(max-width:720px){
  .scene-plane .character{left:20.5%;top:26%;width:54.2%;max-width:none}
  .chair-shadow{left:31%;top:72.5%;width:44%;height:3.2%}
  .scene-plane .thought{left:32%;right:auto;top:17%;max-width:45%;padding:2.2% 3%;border-radius:16px}
  .scene-plane .thought p{font-size:12px}
  .window-live,.cat-character,.desk-lamp-glow{display:none}
  .monitor-screen-left{left:0;top:25%;width:14%;height:24%}
  .monitor-screen-right{left:13.5%;top:22.8%;width:40.5%;height:21.7%}
  .code-editor{font-size:7px;gap:7%}
}

@media(orientation:landscape) and (max-height:560px){
  .scene-plane .character{left:43.1%;top:21.2%;width:16.85%;max-width:none}
  .chair-shadow{left:46.4%;top:70.9%;width:15.5%;height:3.8%}
  .scene-plane .thought{left:52%;top:9%;max-width:23%;padding:1.1% 1.5%}
}

@media(prefers-reduced-motion:reduce){.traffic-car{display:none}.cat-character::after,.code-line,.code-cursor{animation:none!important}.code-line{clip-path:none}}

/* Office v5.6: user-marked window edge, one monitor geometry and distinct state motion. */
.window-live-right{left:67.2%;top:0;width:29.4%;height:63%;clip-path:polygon(1.4% 0,96% 0,96% 100%,1.4% 80%);contain:paint}

body[data-state=working] .monitor-screen-left .screen-chart{display:block;left:17%;right:15%;top:28%;bottom:20%;overflow:hidden;border:0;background:transparent;box-shadow:none;clip-path:polygon(0 15%,100% 0,100% 88%,0 100%);-webkit-mask-image:none;mask-image:none;animation:matrix-glow 4.8s ease-in-out infinite alternate}
.matrix-rain{position:absolute;inset:0;display:none;overflow:hidden;color:#71ff98;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%)}
body[data-state=working] .monitor-screen-left .matrix-rain{display:block}
.matrix-rain i{position:absolute;top:-115%;width:1ch;color:#86ffa6;font:800 max(5px,.42vw)/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal;letter-spacing:.08em;overflow-wrap:anywhere;text-shadow:0 0 4px rgba(55,255,112,.9),0 0 8px rgba(18,214,79,.42);opacity:.78;animation:matrix-fall 3.8s linear infinite}
.matrix-rain i:nth-child(1){left:4%;animation-delay:-1.2s}.matrix-rain i:nth-child(2){left:15%;animation-duration:4.6s;animation-delay:-3.8s}.matrix-rain i:nth-child(3){left:27%;animation-duration:3.2s;animation-delay:-.7s}.matrix-rain i:nth-child(4){left:39%;animation-duration:5.1s;animation-delay:-4.4s}.matrix-rain i:nth-child(5){left:51%;animation-duration:3.5s;animation-delay:-2.1s}.matrix-rain i:nth-child(6){left:63%;animation-duration:4.3s;animation-delay:-1.6s}.matrix-rain i:nth-child(7){left:74%;animation-duration:3.1s;animation-delay:-2.7s}.matrix-rain i:nth-child(8){left:84%;animation-duration:4.9s;animation-delay:-.4s}.matrix-rain i:nth-child(9){left:94%;animation-duration:3.7s;animation-delay:-3.1s}

body[data-state=waiting] .screen-chart{display:block;inset:0;width:auto;height:auto;overflow:hidden;border:0;border-radius:0;background:repeating-linear-gradient(0deg,rgba(94,216,255,.06) 0 1px,transparent 1px 7px),linear-gradient(135deg,rgba(25,20,65,.92),rgba(2,17,38,.95) 54%,rgba(15,5,42,.92));box-shadow:none;-webkit-mask-image:none;mask-image:none;animation:none}
body[data-state=waiting] .screen-chart::before{content:"";position:absolute;inset:-14% -24%;background-image:linear-gradient(90deg,transparent 0 47%,rgba(75,217,255,.18) 48% 50%,transparent 51%),linear-gradient(0deg,transparent 0 47%,rgba(149,103,255,.12) 48% 50%,transparent 51%);background-size:18% 100%,100% 38%;opacity:.72;transform:skewY(-4deg);animation:standby-grid-shift 8s linear infinite}
body[data-state=waiting] .screen-chart::after{content:"";position:absolute;z-index:2;top:-18%;bottom:-18%;left:-42%;width:24%;background:linear-gradient(90deg,transparent,rgba(94,231,255,.28),transparent);transform:skewX(-13deg);animation:standby-sweep 5.8s ease-in-out infinite}
body[data-state=waiting] .monitor-screen-left .screen-chart,body[data-state=waiting] .monitor-screen-right .screen-chart{clip-path:none}
.standby-wave{position:absolute;z-index:1;inset:10% -3%;display:none;width:106%;height:78%;overflow:visible;fill:none}
body[data-state=waiting] .standby-wave{display:block}
body[data-state=waiting] .monitor-screen-left .standby-wave{transform:skewY(-5.5deg)}
body[data-state=waiting] .monitor-screen-right .standby-wave{transform:skewY(-2deg)}
.standby-wave-shadow{stroke:rgba(123,73,255,.42);stroke-width:5;filter:blur(2px)}
.standby-wave-line{stroke:#70eaff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9 4;filter:drop-shadow(0 0 3px rgba(69,222,255,.96));animation:standby-signal 4.6s linear infinite}
body[data-state=waiting] .monitor-screen-right .standby-wave-line{stroke:#b38aff;animation-direction:reverse;animation-duration:5.4s}

body[data-state=idle] .screen-chart{display:block;left:32%;right:32%;top:28%;bottom:22%;border:1px solid rgba(255,189,119,.46);border-radius:50%;clip-path:none;background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,185,111,.68) 88%,transparent 100%);box-shadow:inset 0 0 0 1px rgba(170,114,255,.14),0 0 8px rgba(154,83,255,.13);-webkit-mask-image:none;mask-image:none;animation:screen-orbit 10s linear infinite}
body[data-state=idle] .screen-chart::after{content:"";position:absolute;inset:27%;border:1px solid rgba(124,225,255,.32);border-radius:50%;box-shadow:0 0 5px rgba(84,208,255,.2)}
body[data-state=idle] .monitor-screen-right .screen-chart{animation-direction:reverse;animation-duration:13s}

body[data-state=sleeping] .screen-chart{display:none}
body[data-state=error] .screen-chart{display:block;left:10%;right:9%;top:39%;bottom:22%;border:0;border-radius:0;clip-path:polygon(0 45%,7% 45%,12% 12%,18% 86%,25% 45%,37% 45%,43% 19%,48% 74%,56% 45%,69% 45%,76% 5%,83% 92%,89% 45%,100% 45%,100% 53%,0 53%);background:#ff5d68;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center;animation:diagnostic-draw 3.8s steps(22,end) infinite}

@keyframes matrix-glow{0%{opacity:.76}100%{opacity:1}}
@keyframes matrix-fall{from{transform:translateY(0)}to{transform:translateY(225%)}}
@keyframes standby-grid-shift{to{background-position:18% 0,0 38%}}
@keyframes standby-sweep{0%,18%{left:-42%;opacity:0}34%,68%{opacity:.82}84%,100%{left:122%;opacity:0}}
@keyframes standby-signal{to{stroke-dashoffset:-52}}
@keyframes diagnostic-draw{0%{-webkit-mask-size:14% 100%;mask-size:14% 100%;opacity:.65}72%,100%{-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:1}}
@keyframes screen-orbit{to{transform:rotate(360deg)}}

@media(min-width:721px) and (min-height:561px){
  .scene-plane .character{left:37.2%;top:30.7%;width:15.8%}
  .chair-shadow{left:40.1%;top:78.7%;width:14.6%}
}

@media(prefers-reduced-motion:reduce){.screen-chart,.screen-chart::before,.screen-chart::after,.standby-wave-line{animation:none!important}.screen-chart{-webkit-mask-size:100% 100%;mask-size:100% 100%}.code-line{animation:none!important;clip-path:none}}

/* Office v5.7: calm character loop, game-style dialogue, denser traffic and sleeping cat cue. */
.character-sprite,
body[data-state=waiting] .character-sprite,
body[data-state=idle] .character-sprite,
body[data-state=sleeping] .character-sprite{animation:none}

.scene-plane .thought{left:47%;top:23.5%;display:flex;align-items:baseline;gap:.34em;max-width:30%;padding:0;border:0;border-radius:0;color:#f4fbff;background:transparent;box-shadow:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.92)) drop-shadow(0 0 6px rgba(49,191,255,.34));transform:translateY(5px);transition:opacity .18s ease,transform .18s ease}
.scene-plane .thought::before{content:"VADIMAI  ›";flex:none;color:#67ddff;font:800 clamp(8px,.55vw,12px)/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}
.scene-plane .thought.is-visible{transform:none}
.scene-plane .thought p{margin:0;color:#f4fbff;font:700 clamp(11px,.82vw,16px)/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.01em}
.thought-cursor{display:block;position:static;width:2px;height:1em;flex:none;border:0;border-radius:0;background:#7ae8ff;box-shadow:0 0 6px rgba(83,222,255,.85);animation:dialogue-cursor .72s steps(1,end) infinite}
@keyframes dialogue-cursor{50%{opacity:0}}

/* The visible graph sits well inside the painted glass; the monitor polygon remains the sole outer mask. */
body[data-state=working] .monitor-screen-left .screen-chart{left:18%;right:16%;top:42%;bottom:24%}

.traffic-car-c{left:-13%;top:57%;width:6.6%;animation-duration:26s;animation-delay:-7s}
.traffic-car-d{left:104%;top:27%;width:5.8%;animation-name:road-trip-reverse;animation-duration:34s;animation-delay:-22s}
.traffic-car-e{left:-12%;top:77%;width:5.4%;animation-duration:31s;animation-delay:-19s}
.traffic-car-f{left:103%;top:48%;width:7%;animation-name:road-trip-reverse;animation-duration:24s;animation-delay:-4s}
.traffic-car-c .traffic-car-sprite,.traffic-car-e .traffic-car-sprite{transform:scaleX(-1);filter:hue-rotate(-18deg) brightness(1.12) drop-shadow(0 1px 3px rgba(83,221,255,.24))}
.traffic-car-d .traffic-car-sprite,.traffic-car-f .traffic-car-sprite{transform:none;filter:hue-rotate(42deg) brightness(1.08) drop-shadow(0 1px 3px rgba(255,171,93,.22))}

.cat-sleep{position:absolute;z-index:5;left:84.4%;top:58.1%;width:3.6%;height:8%;display:block;color:#8de9ff;font:800 clamp(7px,.65vw,13px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-shadow:0 0 5px rgba(62,199,255,.92);filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}
.cat-sleep i{position:absolute;left:4%;bottom:3%;font-style:normal;opacity:0;animation:cat-sleep-float 5.4s ease-out infinite}
.cat-sleep i:nth-child(2){left:31%;animation-delay:1.8s;font-size:1.2em}
.cat-sleep i:nth-child(3){left:60%;animation-delay:3.6s;font-size:1.45em}
@keyframes cat-sleep-float{0%,12%{opacity:0;transform:translate3d(0,3px,0) scale(.72)}24%,62%{opacity:.78}78%,100%{opacity:0;transform:translate3d(7px,-15px,0) scale(1.08)}}

@media(max-width:720px){.scene-plane .thought{left:24%;right:auto;top:22%;max-width:60%;gap:.28em}.scene-plane .thought::before{font-size:7px}.scene-plane .thought p{font-size:10px}.cat-sleep{display:none}}
@media(orientation:landscape) and (max-height:560px){.scene-plane .thought{left:51%;top:16%;max-width:31%;padding:0}}
@media(prefers-reduced-motion:reduce){.thought-cursor,.cat-sleep i{animation:none!important}.cat-sleep i:first-child{opacity:.72}.traffic-car{display:none}}

/* Office v6.4: calibrated portrait pose and one exact monitor-glass mask per screen. */
.apartment::before{content:"";position:absolute;inset:-3%;z-index:0;pointer-events:none;opacity:0;background:url("./assets/v5/apartment-background-v5-mobile.webp") center/cover no-repeat}
.apartment-bg{z-index:1;overflow:hidden}
.apartment-bg img{object-fit:fill}
body[data-state=idle] .screen-chart{display:block;inset:0;width:auto;height:auto;overflow:hidden;border:0;border-radius:0;clip-path:none;background:linear-gradient(180deg,rgba(0,18,8,.2),rgba(0,8,4,.06));box-shadow:none;-webkit-mask-image:none;mask-image:none;animation:matrix-glow 5.8s ease-in-out infinite alternate}
body[data-state=idle] .screen-chart::after{content:none}
body[data-state=idle] .monitor-screen-left .screen-chart{clip-path:none}
body[data-state=idle] .monitor-screen-right .screen-chart{clip-path:none;animation-direction:alternate-reverse;animation-duration:7.2s}
body[data-state=idle] .matrix-rain{display:block;color:#72ff92;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
body[data-state=idle] .matrix-rain i{opacity:.7;animation-duration:6.4s;text-shadow:0 0 4px rgba(48,255,102,.88),0 0 9px rgba(14,190,67,.38)}
body[data-state=idle] .matrix-rain i:nth-child(2n){animation-duration:7.8s}
body[data-state=idle] .matrix-rain i:nth-child(3n){animation-duration:5.6s}
@media(max-width:720px) and (orientation:portrait){.apartment::before{opacity:.48;filter:blur(14px) brightness(.52) saturate(.78);transform:scale(1.08)}.apartment-bg{box-shadow:0 0 48px 18px rgba(0,0,0,.72)}.scene-plane .character{left:18.2%;top:27.8%;width:54.2%}.chair-shadow{left:28.7%;top:74.3%;width:44%}.world-status span{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* Office v6.5: project every animated plane into the painted monitor perspective. */
body[data-state] .monitor-screen-left .screen-chart{left:0;right:0;top:-20%;bottom:-20%;width:auto;height:auto;clip-path:none;transform:skewY(-16deg);transform-origin:center}
body[data-state] .monitor-screen-right .screen-chart{left:0;right:0;top:-8%;bottom:-8%;width:auto;height:auto;clip-path:none;transform:skewY(-4deg);transform-origin:center}
body[data-state=waiting] .screen-chart::before{transform:none}
body[data-state=waiting] .monitor-screen-left .standby-wave,body[data-state=waiting] .monitor-screen-right .standby-wave{transform:none}
.monitor-screen-right .code-editor{transform:skewY(-4deg);transform-origin:center}
body[data-state=error] .screen-chart{background:linear-gradient(180deg,rgba(72,4,18,.62),rgba(21,2,11,.34));-webkit-mask-image:none;mask-image:none;animation:none}
body[data-state=error] .screen-chart::before{content:"";position:absolute;inset:18% 5%;background:#ff5d68;clip-path:polygon(0 45%,7% 45%,12% 12%,18% 86%,25% 45%,37% 45%,43% 19%,48% 74%,56% 45%,69% 45%,76% 5%,83% 92%,89% 45%,100% 45%,100% 53%,0 53%);-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center;animation:diagnostic-draw 3.8s steps(22,end) infinite}
@media(max-width:720px){
  body[data-state] .monitor-screen-left .screen-chart{top:-12%;bottom:-12%;transform:skewY(-11.5deg)}
  body[data-state] .monitor-screen-right .screen-chart{top:-5%;bottom:-5%;transform:skewY(-2deg)}
  .monitor-screen-right .code-editor{transform:skewY(-2deg)}
}

/* Office v6.6: animations are intentional app windows, not simulated monitor glass. */
.screen-app{--app-accent:#58e7ff;position:absolute;display:block;overflow:hidden;isolation:isolate;border:0;border-radius:3px;background:rgba(3,9,24,.88);box-shadow:inset 0 0 0 1px rgba(210,247,255,.06),0 0 8px rgba(64,211,255,.18);transform-origin:center}
.monitor-screen-left .screen-app{left:20%;right:16%;top:35%;bottom:23%;transform:skewY(-19deg)}
.monitor-screen-right .screen-app{--app-accent:#b18aff;left:7%;right:7%;top:14%;bottom:13%;transform:skewY(-4deg)}
body[data-state=idle] .screen-app{--app-accent:#68ff91;box-shadow:inset 0 0 0 1px rgba(214,255,224,.05),0 0 8px rgba(65,255,117,.15)}
body[data-state=error] .screen-app{--app-accent:#ff6874;box-shadow:inset 0 0 0 1px rgba(255,222,225,.05),0 0 9px rgba(255,75,91,.2)}
body[data-state=sleeping] .screen-app{display:none}
.screen-app-bar{position:absolute;z-index:6;left:0;right:0;top:0;height:18%;min-height:5px;display:flex;align-items:center;gap:3%;padding:0 5%;border-bottom:1px solid color-mix(in srgb,var(--app-accent) 40%,transparent);background:linear-gradient(90deg,rgba(18,37,62,.96),rgba(9,17,37,.9));color:var(--app-accent)}
.screen-app-bar i{display:block;width:4%;max-width:5px;aspect-ratio:1;border-radius:50%;background:currentColor;box-shadow:0 0 4px currentColor;opacity:.9}
.screen-app-bar i:nth-child(2){opacity:.55}.screen-app-bar i:nth-child(3){opacity:.3}
.screen-app-bar b{margin-left:auto;color:currentColor;font:800 max(4px,.34vw)/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;opacity:.76}
body[data-state] .monitor-screen .screen-chart{left:0;right:0;top:18%;bottom:0;width:auto;height:auto;clip-path:none;transform:none;transform-origin:center}
.monitor-screen-right .code-editor{left:7%;right:7%;top:27%;bottom:8%;transform:none}
@media(max-width:720px){
  .monitor-screen-left .screen-app{left:11%;right:11%;top:21%;bottom:21%;transform:skewY(-11.5deg)}
  .monitor-screen-right .screen-app{left:6%;right:6%;top:10%;bottom:10%;transform:skewY(-2deg)}
  body[data-state] .monitor-screen .screen-chart{top:18%;bottom:0;transform:none}
  .monitor-screen-right .code-editor{top:27%;transform:none}
  .screen-app-bar b{font-size:4px}
}

/* Office v6.8: sequential code editor and tighter sleeping-cat cue. */
.code-editor{grid-template-rows:repeat(4,min-content) min-content;gap:5%;overflow:hidden}
.code-line{width:max-content;max-width:100%;overflow:hidden;white-space:pre;clip-path:none;animation:none;color:#b6d7ff}
.code-line:first-child{color:#c7a7ff}.code-line:nth-child(3){color:#8fffc1}.code-line:nth-child(4){color:#ffd38a}
.code-line.is-active::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-.12em;background:#b9f7ff;box-shadow:0 0 4px rgba(104,231,255,.85);animation:cursor-blink .72s steps(1,end) infinite}
.code-status{display:block;min-height:1em;margin-top:2%;color:#7fffb0;font-weight:800;letter-spacing:.04em;text-transform:lowercase;opacity:.9}
.code-editor[data-phase="saving"] .code-status{color:#ffd48a}.code-editor[data-phase="saved"] .code-status{color:#7fffb0}
.code-editor>.code-cursor{display:none}
.cat-sleep{left:82.9%;top:59.4%;width:3.1%;height:6.5%}
.cat-sleep i:nth-child(2){left:27%}.cat-sleep i:nth-child(3){left:54%}
@keyframes cat-sleep-float{0%,12%{opacity:0;transform:translate3d(0,2px,0) scale(.72)}24%,62%{opacity:.78}78%,100%{opacity:0;transform:translate3d(4px,-10px,0) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.code-line.is-active::after{animation:none}.code-line{clip-path:none}}

/* Office v7.0: one mid-distance neon airship replaces the foreground buildings. */
.city-airship{position:absolute;z-index:1;left:14%;top:27%;width:30%;aspect-ratio:3.25/1;display:block;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.46)) drop-shadow(0 0 6px rgba(60,210,255,.28));animation:airship-drift 18s steps(18,end) infinite}
.airship-body{position:absolute;z-index:2;inset:0 0 22%;display:block;clip-path:polygon(7% 24%,24% 5%,72% 0,91% 18%,100% 48%,91% 77%,70% 96%,24% 91%,7% 71%,0 48%);background:linear-gradient(180deg,rgba(28,49,76,.98),rgba(6,15,32,.98) 57%,rgba(13,31,54,.98));border:1px solid rgba(103,224,255,.36);box-shadow:inset 0 2px rgba(156,232,255,.13),inset 0 -2px rgba(0,0,0,.48)}
.airship-body::before{content:"";position:absolute;inset:15% 10%;background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(98,185,222,.1) 10% 11%);opacity:.8}
.airship-tail{position:absolute;z-index:1;right:-8%;top:13%;width:19%;height:63%;display:block;clip-path:polygon(0 35%,55% 35%,100% 0,91% 46%,100% 100%,54% 64%,0 64%);background:linear-gradient(90deg,#112945,#071326);border-right:1px solid rgba(96,217,255,.25)}
.airship-gondola{position:absolute;z-index:3;left:43%;bottom:0;width:22%;height:30%;display:block;clip-path:polygon(13% 0,86% 0,100% 75%,72% 100%,25% 100%,0 73%);background:#071426;border:1px solid rgba(92,216,255,.35);box-shadow:0 0 4px rgba(57,202,255,.2)}
.airship-gondola::before,.airship-gondola::after{content:"";position:absolute;top:31%;width:12%;aspect-ratio:1;border-radius:50%;background:#77eaff;box-shadow:0 0 4px #42d9ff}.airship-gondola::before{left:18%}.airship-gondola::after{right:18%}
.airship-ad{position:absolute;z-index:3;left:24%;right:18%;top:29%;height:39%;display:flex;align-items:center;justify-content:center;border:1px solid #ff70db;background:rgba(23,5,33,.8);color:#ff8be3;font:900 clamp(4px,.36vw,8px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal;letter-spacing:.13em;text-shadow:0 0 4px #ff5bd5;box-shadow:0 0 5px rgba(255,74,211,.55),inset 0 0 4px rgba(255,90,219,.22);animation:airship-ad-flicker 8.4s steps(1,end) infinite}
body[data-state=waiting] .airship-ad,body[data-state=idle] .airship-ad{filter:brightness(1.12)}
body[data-state=sleeping] .city-airship{opacity:.58}body[data-state=error] .city-airship{filter:hue-rotate(315deg) saturate(.75) drop-shadow(0 3px 5px rgba(0,0,0,.46))}
@keyframes airship-drift{0%,100%{transform:translate3d(-4%,1px,0)}50%{transform:translate3d(4%,-2px,0)}}
@keyframes airship-ad-flicker{0%,7%,9%,72%,75%,100%{opacity:.9}8%,73%{opacity:.35}74%{opacity:1}}
@media(max-width:720px){.city-airship{display:none}}
@media(prefers-reduced-motion:reduce){.city-airship,.airship-ad{animation:none!important}}

/* Office v7.1: weather lives behind the glass; the city airship gains a detailed neon hull. */
.window-weather{position:absolute;z-index:0;inset:0;display:block;overflow:hidden;pointer-events:none}
.window-weather .rain,.window-weather .snow,.window-weather .fog{position:absolute;inset:-24%;width:auto;height:auto}
body[data-weather=rain] .window-weather .rain{opacity:.32}
body[data-weather=snow] .window-weather .snow{opacity:.56}
body[data-weather=fog] .window-weather .fog,body[data-weather=cloudy] .window-weather .fog{opacity:.22}

/* Office v7.3: weather is clipped to the inner glass, not the whole exterior window. */
.window-weather{z-index:4;clip-path:polygon(1.8% 0,96% 0,96% 93%,1.8% 73%)}
body[data-weather=rain] .window-weather .rain{inset:-18%;opacity:.24;background-image:linear-gradient(104deg,transparent 0 47%,rgba(164,222,255,.48) 48% 49%,transparent 50% 100%),linear-gradient(104deg,transparent 0 48%,rgba(133,199,239,.28) 49% 50%,transparent 51% 100%);background-size:88px 126px,137px 183px;animation:window-rain 1.55s linear infinite}
@keyframes window-rain{to{transform:translate3d(-44px,63px,0)}}

/* Fog must dissolve before the glass mask ends; otherwise cloudy weather reveals a hard DOM edge. */
.window-weather .fog{inset:-18% -30% 0;filter:blur(13px);-webkit-mask-image:linear-gradient(180deg,#000 0 42%,rgba(0,0,0,.78) 58%,rgba(0,0,0,.3) 72%,transparent 88%);mask-image:linear-gradient(180deg,#000 0 42%,rgba(0,0,0,.78) 58%,rgba(0,0,0,.3) 72%,transparent 88%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
body[data-weather=fog] .window-weather .fog,body[data-weather=cloudy] .window-weather .fog{opacity:.3;background:radial-gradient(ellipse at 54% 28%,rgba(196,219,235,.72) 0,rgba(174,203,224,.36) 38%,rgba(145,180,207,.12) 61%,transparent 79%),radial-gradient(ellipse at 28% 46%,rgba(197,219,234,.34),transparent 63%)}

.city-airship{left:12%;top:23%;width:47%;aspect-ratio:3.45/1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.58)) drop-shadow(0 0 8px rgba(48,207,255,.3));animation-duration:20s}
.airship-body{z-index:4;inset:8% 4% 19% 3%;overflow:hidden;clip-path:polygon(2% 47%,7% 24%,21% 8%,65% 1%,83% 10%,95% 27%,100% 50%,94% 75%,80% 90%,60% 98%,20% 91%,7% 74%);background:radial-gradient(ellipse at 38% 5%,rgba(126,193,225,.34),transparent 34%),linear-gradient(180deg,#274767 0,#142b48 33%,#071528 58%,#0d233e 76%,#1b3c5d 100%);border:1px solid rgba(126,225,255,.44);box-shadow:inset 0 2px rgba(199,244,255,.18),inset 0 -3px rgba(0,5,16,.72),0 0 8px rgba(46,196,255,.16)}
.airship-body::before{inset:0;background:linear-gradient(90deg,transparent 0 17%,rgba(104,209,244,.15) 17.5% 18.4%,transparent 19% 35%,rgba(104,209,244,.13) 35.5% 36.4%,transparent 37% 55%,rgba(104,209,244,.13) 55.5% 56.4%,transparent 57% 73%,rgba(104,209,244,.12) 73.5% 74.4%,transparent 75%),linear-gradient(180deg,rgba(255,255,255,.08),transparent 38%,rgba(0,0,0,.24));opacity:1}
.airship-body::after{content:"";position:absolute;z-index:1;left:7%;right:7%;bottom:12%;height:2px;background:linear-gradient(90deg,transparent,#61dfff 16%,#61dfff 84%,transparent);box-shadow:0 0 5px #25c8ff;opacity:.62}
.airship-ribs{position:absolute;z-index:2;inset:6% 8%;display:block;border-top:1px solid rgba(162,226,255,.16);border-bottom:1px solid rgba(7,15,32,.85);clip-path:polygon(0 33%,100% 7%,100% 87%,0 68%)}
.airship-tail{z-index:2;right:-3%;top:27%;width:17%;height:51%;clip-path:polygon(0 27%,52% 30%,100% 2%,87% 48%,100% 98%,51% 69%,0 72%);background:linear-gradient(90deg,#183957,#08182d 72%);border-right:1px solid rgba(92,216,255,.34);box-shadow:inset 0 1px rgba(148,230,255,.14)}
.airship-fin{position:absolute;z-index:3;right:8%;width:20%;height:31%;display:block;background:linear-gradient(135deg,#244762,#0a1b31 76%);border:1px solid rgba(96,215,255,.3)}
.airship-fin-top{top:0;clip-path:polygon(0 100%,43% 13%,100% 0,80% 100%)}
.airship-fin-bottom{bottom:5%;clip-path:polygon(0 0,81% 0,100% 100%,43% 82%)}
.airship-nose{position:absolute;z-index:5;left:0;top:35%;width:7%;height:31%;display:block;border-radius:70% 18% 18% 70%;background:linear-gradient(90deg,#3c7092,#102b48);border-left:1px solid rgba(180,241,255,.7);box-shadow:-1px 0 5px rgba(78,221,255,.35)}
.airship-nose::after{content:"";position:absolute;left:13%;top:40%;width:2px;height:2px;border-radius:50%;background:#f1fcff;box-shadow:0 0 5px #5ce5ff}
.airship-ad{z-index:4;left:21%;right:25%;top:27%;height:45%;display:grid;align-content:center;justify-items:center;gap:2%;overflow:hidden;border:1px solid rgba(255,108,225,.92);border-radius:2px;background:linear-gradient(100deg,rgba(18,4,35,.94),rgba(43,8,50,.91) 47%,rgba(17,6,33,.94));color:#ff9bea;font:900 clamp(4px,.37vw,8px)/.95 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;text-shadow:0 0 4px #ff55d5,0 0 8px rgba(255,72,218,.68);box-shadow:0 0 7px rgba(255,74,211,.72),inset 0 0 7px rgba(255,90,219,.2)}
.airship-ad::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 22%,rgba(255,255,255,.23) 42%,transparent 57%);transform:translateX(-130%);animation:airship-ad-scan 6.8s ease-in-out infinite}
.airship-ad strong,.airship-ad small{position:relative;z-index:1;font:inherit;font-style:normal;white-space:nowrap}.airship-ad small{color:#77eaff;font-size:.44em;letter-spacing:.23em;text-shadow:0 0 4px #25d5ff}
.airship-ports{position:absolute;z-index:4;right:8%;top:38%;display:flex;gap:3px}.airship-ports>i{display:block;width:3px;height:3px;border:1px solid rgba(146,238,255,.78);border-radius:50%;background:#0b2943;box-shadow:inset 0 0 2px #5fe8ff,0 0 3px rgba(83,225,255,.7)}
.airship-gondola{z-index:6;left:38%;bottom:0;width:30%;height:32%;clip-path:polygon(10% 0,87% 0,100% 51%,84% 100%,21% 100%,0 54%);background:linear-gradient(180deg,#173450,#061426 77%);border:1px solid rgba(107,224,255,.43);box-shadow:0 2px 5px rgba(0,0,0,.52),inset 0 1px rgba(151,233,255,.14)}
.airship-gondola::before,.airship-gondola::after{display:none}
.airship-cabin{position:absolute;left:22%;right:20%;top:24%;height:30%;display:block;border:1px solid rgba(91,219,255,.5);background:repeating-linear-gradient(90deg,rgba(96,222,255,.54) 0 10%,rgba(7,27,45,.9) 11% 26%);box-shadow:0 0 4px rgba(59,209,255,.31)}
.airship-engine{position:absolute;z-index:7;bottom:7%;width:13%;height:18%;display:block;border:1px solid rgba(93,218,255,.42);border-radius:42% 17% 17% 42%;background:linear-gradient(180deg,#1e4865,#07182d);box-shadow:inset -3px 0 rgba(0,0,0,.38)}
.airship-engine::before{content:"";position:absolute;right:-17%;top:20%;width:24%;height:60%;border-radius:0 60% 60% 0;background:#77efff;box-shadow:0 0 5px #34d9ff,0 0 9px rgba(65,213,255,.72);animation:airship-thruster 1.9s steps(3,end) infinite}
.airship-engine-left{left:28%}.airship-engine-right{right:17%}
@keyframes airship-ad-scan{0%,58%{transform:translateX(-130%)}78%,100%{transform:translateX(145%)}}
@keyframes airship-thruster{50%{opacity:.55;transform:scaleX(.72)}}
@media(prefers-reduced-motion:reduce){.airship-ad::before,.airship-engine::before{animation:none!important}}

/* Office v7.1.2: local Moscow weekday and calendar date in the public HUD. */
.world-status .date-label{color:#d8e8f4;font-size:12px;font-weight:700;letter-spacing:.015em}
@media(max-width:720px){.world-status .date-label{font-size:11px}}

/* Office v7.1.6: regenerated cat frames share a measured paw baseline and visor anchor. */
.cat-character{background-image:url("./assets/v5/cat-spritesheet-v2.webp");animation:cat-life 24s steps(1,end) infinite}
body[data-state=sleeping] .cat-character{animation-name:cat-doze;animation-duration:18s}
body[data-motion=reduced] .cat-character{animation:none;background-position:0 0}
@keyframes cat-life{
  0%,40%{background-position:0 0}
  43%{background-position:33.333% 0}
  46%{background-position:66.667% 0}
  49%{background-position:100% 0}
  52%{background-position:66.667% 0}
  55%{background-position:33.333% 0}
  58%,70%{background-position:0 0}
  74%{background-position:33.333% 100%}
  78%{background-position:66.667% 100%}
  82%{background-position:100% 100%}
  86%,100%{background-position:0 0}
}
@keyframes cat-doze{
  0%,34%{background-position:0 0}
  40%{background-position:33.333% 0}
  46%{background-position:66.667% 0}
  52%,68%{background-position:0 0}
  74%{background-position:33.333% 100%}
  80%{background-position:66.667% 100%}
  86%{background-position:100% 100%}
  92%,100%{background-position:0 0}
}
@media(prefers-reduced-motion:reduce){.cat-character{animation:none!important;background-position:0 0}}

/* Office v7.1.4: reveal the scene only after its cover plane is registered, preventing cold-load jumps. */
.apartment-bg,.scene-plane{opacity:0}
body[data-scene-ready=true] .apartment-bg,body[data-scene-ready=true] .scene-plane{opacity:1}
@media(max-width:720px){.world-status{width:190px}}

/* Office v7.2: sourced philosophy lines and two distinct aerial taxi silhouettes. */
.scene-plane .thought[data-kind=philosophy]{max-width:36%;color:#f7fbff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.94)) drop-shadow(0 0 7px rgba(135,112,255,.42))}
.scene-plane .thought[data-kind=philosophy]::before{content:"МЫСЛЬ  ›";color:#bca2ff}
.scene-plane .thought[data-kind=philosophy] p{color:#fff7dc}

.sky-taxi,.sky-taxi *{position:absolute;display:block;box-sizing:border-box}
.sky-taxi{z-index:2;aspect-ratio:1;pointer-events:none;will-change:transform;filter:drop-shadow(0 2px 4px rgba(0,0,0,.64))}
.taxi-cab-a{left:-13%;top:17%;width:10.5%;animation:taxi-route-forward 34s linear -9s infinite}
.taxi-cab-b{left:104%;top:59%;width:8.7%;animation:taxi-route-reverse 28s linear -20s infinite}
.taxi-car-sprite{inset:0;background:url("./assets/v5/hovercar-spritesheet.webp") 0 0/400% 200% no-repeat;image-rendering:pixelated;filter:sepia(.95) saturate(3.2) hue-rotate(344deg) brightness(1.28) drop-shadow(0 1px 3px rgba(255,205,56,.42));animation:vehicle-frames 1.9s steps(1,end) infinite}
.taxi-cab-a .taxi-car-sprite{transform:scaleX(-1)}
.taxi-cab-b .taxi-car-sprite{transform:none;filter:sepia(.9) saturate(3.5) hue-rotate(350deg) brightness(1.2) drop-shadow(0 1px 3px rgba(255,174,49,.38))}
.taxi-checkers{z-index:3;left:31%;top:53%;width:36%;height:5%;background:repeating-linear-gradient(90deg,#171717 0 9%,#ffe061 9% 18%);box-shadow:0 0 2px rgba(255,214,71,.74);opacity:.92}
.taxi-roof-sign{z-index:4;left:40%;top:32%;width:23%;height:9%;display:grid;place-items:center;border:1px solid rgba(255,245,176,.82);border-radius:2px;background:#ffcc3f;color:#231708;font:900 clamp(3px,.22vw,5px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;box-shadow:0 0 4px #ffc52f,0 0 7px rgba(255,197,47,.52);animation:taxi-beacon 2.2s steps(1,end) infinite}

body[data-state=sleeping] .sky-taxi{opacity:.55}
body[data-weather=fog] .sky-taxi,body[data-weather=cloudy] .sky-taxi{filter:brightness(.76) blur(.2px) drop-shadow(0 2px 4px rgba(0,0,0,.7))}
@keyframes taxi-route-forward{0%{opacity:0;transform:translate3d(0,0,0) scale(.68)}6%{opacity:.9}48%{transform:translate3d(590%,16%,0) scale(.88)}93%{opacity:.82}100%{opacity:0;transform:translate3d(1210%,-10%,0) scale(.7)}}
@keyframes taxi-route-reverse{0%{opacity:0;transform:translate3d(0,0,0) scale(.68)}7%{opacity:.82}52%{transform:translate3d(-790%,-22%,0) scale(.86)}92%{opacity:.76}100%{opacity:0;transform:translate3d(-1510%,12%,0) scale(.7)}}
@keyframes taxi-beacon{0%,48%{opacity:1}49%,100%{opacity:.28}}
@media(max-width:720px){.scene-plane .thought[data-kind=philosophy]{max-width:58%}.sky-taxi{display:none}}
@media(orientation:landscape) and (max-height:560px){.scene-plane .thought[data-kind=philosophy]{max-width:38%}}
@media(prefers-reduced-motion:reduce){.sky-taxi{display:none}.scene-plane .thought[data-kind=philosophy]{transition:none}}

/* Office v7.4.2: a monumental pixel-art skycruiser, framed so its stern may disappear beyond the window. */
.city-airship{left:-5%;top:9%;width:72%;aspect-ratio:1600/534;filter:drop-shadow(0 7px 9px rgba(0,0,0,.62)) drop-shadow(0 0 9px rgba(53,205,255,.26));animation:airship-drift 26s ease-in-out infinite}
.airship-art{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto}
.airship-ad{z-index:3;left:31.2%;right:auto;top:31.7%;width:40%;height:23%;display:grid;align-content:center;justify-items:center;gap:3%;overflow:hidden;box-sizing:border-box;clip-path:polygon(0 0,100% 10%,100% 100%,0 89%);border:1px solid rgba(255,231,90,.92);border-radius:2px;background:linear-gradient(100deg,rgba(25,22,5,.88),rgba(37,35,6,.74) 52%,rgba(10,32,24,.86));color:#fffbd0;font:900 clamp(7px,.64vw,13px)/.9 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;text-shadow:0 0 2px #fff,0 0 6px #ffd43b,0 0 11px rgba(162,255,67,.94);box-shadow:0 0 4px #ffd83d,0 0 11px rgba(190,255,61,.72),inset 0 0 10px rgba(255,213,46,.28);transform:skewY(5deg);transform-origin:left center;animation:airship-ad-flicker 9.6s steps(1,end) infinite}
.airship-ad::before{content:"";position:absolute;inset:-20% -35%;background:linear-gradient(102deg,transparent 25%,rgba(255,129,24,.72) 41%,rgba(255,246,119,.96) 49%,rgba(133,255,67,.72) 57%,transparent 73%);transform:translateX(-85%);mix-blend-mode:screen;animation:airship-ad-scan 5.8s ease-in-out infinite}
.airship-ad::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px);opacity:.42;pointer-events:none}
.airship-ad strong,.airship-ad small{position:relative;z-index:2;font:inherit;font-style:normal;white-space:nowrap}.airship-ad strong{font-size:1.22em;letter-spacing:.18em}.airship-ad small{color:#dfff72;font-size:.43em;letter-spacing:.26em;text-shadow:0 0 4px #bfff45,0 0 8px rgba(111,255,60,.86)}
body[data-state=waiting] .airship-ad,body[data-state=idle] .airship-ad{filter:brightness(1.18) saturate(1.12)}
body[data-state=sleeping] .city-airship{opacity:.66}body[data-state=error] .city-airship{filter:hue-rotate(325deg) saturate(.82) drop-shadow(0 7px 9px rgba(0,0,0,.62))}
@keyframes airship-ad-scan{0%,18%{transform:translateX(-85%)}68%,100%{transform:translateX(85%)}}
@media(prefers-reduced-motion:reduce){.city-airship,.airship-ad,.airship-ad::before{animation:none!important}}

/* Office v7.4.5: clean police hovercar with a bright, compact alternating lightbar. */
.sky-police,.sky-police *{position:absolute;display:block;box-sizing:border-box}
.sky-police{z-index:3;left:-15%;top:45%;width:11.4%;aspect-ratio:1;pointer-events:none;will-change:transform;filter:drop-shadow(0 2px 5px rgba(0,0,0,.72));animation:police-route 31s linear -6s infinite}
.police-car-sprite{inset:0;background:url("./assets/v5/hovercar-spritesheet.webp") 0 0/400% 200% no-repeat;image-rendering:pixelated;transform:scaleX(-1);filter:saturate(.82) hue-rotate(158deg) brightness(1.42) contrast(1.12) drop-shadow(0 1px 5px rgba(61,167,255,.58));animation:vehicle-frames 1.9s steps(1,end) infinite}
.police-badge{z-index:4;left:44%;top:49%;width:12%;aspect-ratio:1;clip-path:polygon(50% 0,88% 18%,80% 72%,50% 100%,20% 72%,12% 18%);background:radial-gradient(circle at 50% 42%,#fff 0 18%,#72d7ff 21% 42%,#0b4c94 46% 100%);box-shadow:0 0 4px rgba(115,218,255,.86);transform:rotate(2deg)}
.police-flash{z-index:5;top:-4%;width:62%;aspect-ratio:1;border-radius:50%;pointer-events:none;filter:blur(1px)}
.police-flash-red{left:12%;background:radial-gradient(circle,rgba(255,255,255,1) 0 3%,rgba(255,20,62,1) 9%,rgba(255,0,55,.72) 24%,rgba(255,0,55,.28) 43%,transparent 68%);animation:police-red-glow .72s steps(1,end) infinite}
.police-flash-blue{right:12%;background:radial-gradient(circle,rgba(255,255,255,1) 0 4%,rgba(94,225,255,1) 10%,rgba(0,133,255,.96) 24%,rgba(0,94,255,.56) 43%,transparent 70%);animation:police-blue-glow .72s steps(1,end) infinite}
.police-beacon{z-index:6;left:36%;top:27%;width:31%;height:11%;border:1px solid rgba(225,246,255,.9);border-radius:2px;background:rgba(219,242,255,.52);box-shadow:0 0 5px rgba(185,230,255,.95)}
.police-beacon b{top:8%;bottom:8%;width:45%;border-radius:1px}.police-beacon b:first-child{left:3%;background:#fff;box-shadow:0 0 5px #fff,0 0 10px #ff1744,0 0 20px #ff003c,0 0 34px #ff003c;animation:police-red .72s steps(1,end) infinite}.police-beacon b:last-child{right:3%;background:#fff;box-shadow:0 0 5px #fff,0 0 10px #218cff,0 0 20px #006fff,0 0 34px #006fff;animation:police-blue .72s steps(1,end) infinite}
body[data-state=sleeping] .sky-police{opacity:.52}
body[data-weather=fog] .sky-police,body[data-weather=cloudy] .sky-police{filter:brightness(.74) blur(.2px) drop-shadow(0 2px 4px rgba(0,0,0,.72))}
@keyframes police-route{0%{opacity:0;transform:translate3d(0,0,0) scale(.7)}6%{opacity:.9}46%{transform:translate3d(610%,20%,0) scale(.88)}92%{opacity:.8}100%{opacity:0;transform:translate3d(1240%,-8%,0) scale(.72)}}
@keyframes police-red{0%,44%{opacity:1}45%,100%{opacity:.08}}
@keyframes police-blue{0%,44%{opacity:.08}45%,100%{opacity:1}}
@keyframes police-red-glow{0%,44%{opacity:1;transform:scale(1.08)}45%,100%{opacity:.05;transform:scale(.72)}}
@keyframes police-blue-glow{0%,44%{opacity:.05;transform:scale(.72)}45%,100%{opacity:1;transform:scale(1.08)}}
@media(max-width:720px){.sky-police{display:none}}
@media(prefers-reduced-motion:reduce){.sky-police{display:none}}

/* Office v7.5: the permanent desk mug becomes a state-aware AI module. */
.ai-module-pulse{position:absolute;z-index:7;left:32.15%;top:50.8%;width:4.2%;aspect-ratio:1;display:block;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(225,251,255,.9) 0 3%,rgba(75,225,255,.42) 7%,rgba(31,198,255,.16) 24%,transparent 58%);filter:blur(.35px);mix-blend-mode:screen;animation:ai-module-breathe 2.8s ease-in-out infinite}
body[data-state=waiting] .ai-module-pulse{background:radial-gradient(circle,rgba(255,255,255,.88) 0 3%,rgba(174,129,255,.5) 8%,rgba(129,77,255,.18) 26%,transparent 60%)}
body[data-state=idle] .ai-module-pulse{background:radial-gradient(circle,rgba(255,255,255,.88) 0 3%,rgba(255,191,80,.48) 8%,rgba(255,151,45,.16) 26%,transparent 60%)}
body[data-state=sleeping] .ai-module-pulse{opacity:.12;animation:none}
body[data-state=error] .ai-module-pulse{background:radial-gradient(circle,rgba(255,255,255,.95) 0 3%,rgba(255,61,88,.58) 8%,rgba(255,24,67,.2) 28%,transparent 62%);animation:ai-module-alert .8s steps(2,end) infinite}
body[data-embed=true] .hud,body[data-embed=true] .debug-toggle,body[data-embed=true] .debug-panel{display:none!important}
@keyframes ai-module-breathe{0%,100%{opacity:.48;transform:scale(.82)}50%{opacity:.86;transform:scale(1)}}
@keyframes ai-module-alert{50%{opacity:.25;transform:scale(.76)}}
@media(max-width:720px){.ai-module-pulse{left:-1.4%;top:79.8%;width:12%}}
@media(prefers-reduced-motion:reduce){.ai-module-pulse{animation:none!important;opacity:.5}}