:root[data-weather] { --sky: linear-gradient(150deg, #a8d4e6, #e6efdd); --ambient: transparent; --cloud-opacity: 0; }
.page-weather { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }
:is([data-weather="snow"], [data-weather="snow-showers"]) .desk > .top,
:is([data-weather="snow"], [data-weather="snow-showers"]) .monitor > .top { box-shadow: inset 0 0 0 2px #e7eff0b0; }
:is([data-weather="freezing-rain"], [data-weather="freezing-drizzle"]) .stack > span,
:is([data-weather="freezing-rain"], [data-weather="freezing-drizzle"]) #weather-condition { box-shadow: inset 0 1px 3px #dae7ed; }
[data-weather="wind"] .plant-leaf { animation: leaf-sway 2s ease-in-out infinite alternate; }
@keyframes leaf-sway { from { transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(-8deg); } to { transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(8deg); } }
:root[data-weather="clear"] { --page: #f8f9f5; --ambient: linear-gradient(125deg, transparent 35%, #f1d79718 65%, transparent); }
:root[data-weather="mainly-clear"] { --cloud-opacity: .35; }
:root[data-weather="partly-cloudy"] { --cloud-opacity: .85; --sky: linear-gradient(150deg, #9abac8, #dce5dd); }
:root[data-weather="overcast"], :root[data-weather="fog"] { --page: #f0f2f0; --sky: linear-gradient(#b8c4c6, #d8ded9); --cloud-opacity: 1; --ambient: #adb9bd0d; }
:root[data-weather="fog"] { --sky: linear-gradient(#d4dedb, #e7ebe5); }
:root:is([data-weather="drizzle"], [data-weather="freezing-drizzle"], [data-weather="rain"], [data-weather="freezing-rain"], [data-weather="showers"]) { --page: #edf1f2; --sky: linear-gradient(#819ba8, #b4c5c9); --cloud-opacity: .8; --ambient: #7693ae12; }
:root:is([data-weather="snow"], [data-weather="snow-showers"]) { --page: #f2f5f6; --sky: linear-gradient(#acbfcd, #e1e8e8); --cloud-opacity: .65; --ambient: #cbdce512; }
:root:is([data-weather="thunderstorm"], [data-weather="hail"]) { --page: #e8edef; --sky: linear-gradient(#455968, #82919a); --cloud-opacity: .65; --ambient: #344c6625; }
:root[data-weather="wind"] { --sky: linear-gradient(#a0bdc9, #d9e3dc); --cloud-opacity: .85; }
[data-weather] .window { overflow: hidden; }
[data-weather] .window i { background: var(--sky); }
[data-weather] .window::before { content: ''; position: absolute; width: 78px; height: 24px; top: 12px; left: 12px; border-radius: 50%; background: #eff4f1; box-shadow: 23px 10px 0 -5px #eff4f1; opacity: var(--cloud-opacity); animation: cloud-drift 14s ease-in-out infinite alternate; pointer-events: none; }
[data-weather] .room-stage::after { content: ''; position: absolute; inset: 0; background: var(--ambient); mask-image: radial-gradient(ellipse at 50% 55%, #000 20%, transparent 72%); pointer-events: none; }
[data-weather="clear"] .room-shadow { opacity: .24; }
[data-weather="overcast"] .room-shadow, [data-weather="fog"] .room-shadow { opacity: .08; }
[data-weather="fog"] .window::after { inset: 0; background: #e4ebe4b0; opacity: 1; }
:is([data-weather="freezing-drizzle"], [data-weather="freezing-rain"]) .window { box-shadow: inset 0 0 13px 8px #eff6f5; }
.weather-effects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.weather-effects b { display: none; position: absolute; left: var(--x); top: -25px; animation-delay: var(--delay) !important; }
:is([data-weather="drizzle"], [data-weather="freezing-drizzle"], [data-weather="rain"], [data-weather="freezing-rain"], [data-weather="showers"], [data-weather="thunderstorm"]) .weather-effects b { display: block; width: 1px; height: 12px; background: #dae9efb0; animation: rain-fall 1.1s linear infinite; }
:is([data-weather="drizzle"], [data-weather="freezing-drizzle"]) .weather-effects b { height: 5px; opacity: .55; animation-duration: 1.8s; }
:is([data-weather="showers"], [data-weather="thunderstorm"]) .weather-effects b { height: 18px; animation-duration: .65s; }
:is([data-weather="snow"], [data-weather="snow-showers"], [data-weather="hail"]) .weather-effects b { display: block; width: 3px; height: 3px; border-radius: 50%; background: #f7faf8; animation: snow-fall 4s linear infinite; }
[data-weather="snow-showers"] .weather-effects b { animation-duration: 2.4s; width: 4px; height: 4px; }
[data-weather="hail"] .weather-effects b { border-radius: 1px; animation: rain-fall .8s linear infinite; }
[data-weather="wind"] .window::before { animation-duration: 2s; }
[data-weather="wind"] .weather-effects b:nth-child(4n) { display: block; top: var(--x); width: 18px; height: 1px; background: #edf2ee90; animation: wind-pass 1.8s linear infinite; }
[data-night="true"] .lamp-shade .front { border-bottom-color: #ffe4a8; box-shadow: inset 0 -10px 10px -3px #fce2a0; }
[data-night="true"] .lamp-light, [data-night="true"] .lamp-beam { opacity: 1; }
:root[data-night="true"] { --page: #232426; --ink: #eeefed; --muted: #afb1b3; --line: #424447; --accent: #aec3a2; --panel: #2b2d30; --sky: linear-gradient(#233745, #526c78); --ambient: #14243d20; color-scheme: dark; }
[data-night="true"] .wall-left .right { background: linear-gradient(90deg, #50645a, #7a8970); }
[data-night="true"] .wall-back .front { background: linear-gradient(110deg, #9b9c86, #7f8b78); }
[data-night="true"] .floor { --front: #8b7e6a; --right: #766b5d; }
[data-night="true"] .floor .top { background: radial-gradient(ellipse at 75% 25%, #d6b67725, transparent 65%), repeating-linear-gradient(90deg, transparent 0 49px, #5a614135 49px 50px), repeating-linear-gradient(0deg, #9b9275 0 79px, #928b71 79px 80px); }
[data-night="true"] .desk { --front: #876142; --right: #725136; }
[data-night="true"] .desk .top { background: radial-gradient(ellipse at 90% 20%, #e5ba6640, transparent 65%), repeating-linear-gradient(90deg, #9d7958 0 30px, #927052 31px 32px); }
[data-night="true"] .window::before { background: #6b7d88; box-shadow: 23px 10px 0 -5px #6b7d88; }
[data-night="true"] .screen { box-shadow: 0 0 12px #a7c08030; }
[data-night="true"] .window::after { opacity: .2; }
@keyframes rain-fall { to { transform: translate(-25px, 155px); } }
@keyframes snow-fall { 50% { transform: translate(8px, 75px); } to { transform: translate(-10px, 155px); } }
@keyframes wind-pass { from { transform: translateX(-40px); } to { transform: translateX(110px); } }
@keyframes cloud-drift { from { transform: translateX(-15px); } to { transform: translateX(20px); } }
@media (prefers-reduced-motion: reduce) {
  [data-weather] .weather-effects b { animation: none !important; top: var(--x); }
  [data-weather] .window::before, [data-weather="wind"] .plant-leaf { animation: none; }
}
@media print { .page-weather { display: none; } :root[data-weather] { --page: #fff; --ink: #000; --muted: #444; --line: #ccc; color-scheme: light; } }