/* retro.roodlesoft.com: the llmuse retro-PC look. A beige IBM-style computer with a phosphor CRT, ink outlines, a warm desk and a
   drifting sky behind it. Plain CSS, no build step, no inline styles (the CSP forbids them; JS sets styles through the CSSOM).
   Palette is copied from llmuse's scene.js. Sections: fonts, palette, sky, monitor, screen content, buttons, package boxes, desk, effects. */
@font-face { font-family: "DejaVu Mono"; src: url(/fonts/DejaVuSansMono.ttf); font-weight: normal; font-display: swap; }
@font-face { font-family: "DejaVu Mono"; src: url(/fonts/DejaVuSansMono-Bold.ttf); font-weight: bold; font-display: swap; }
@font-face { font-family: "Press Start"; src: url(/fonts/pressstart.woff2) format("woff2"); font-display: swap; }

:root {
  --ink: #1b0e08; --beige: #d8c79b; --beige-hi: #e8dcb8; --beige-lo: #8a7549; --paper: #f0e9b8;
  --screen: #03120a; --phos: #6dff7a; --phos-soft: #b8ffc4; --phos-dim: #5fae78; --cyan: #64ffd0; --yellow: #ffe14a; --amber: #ffb43a;
  --pink: #ff7ad9; --red: #c01818; --purple: #3a2a58; --wood: #6b4220; --wood-hi: #8a5a2c;
  --px: "Press Start", "DejaVu Mono", monospace; --mono: "DejaVu Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0d0710; color: var(--phos-soft); font: 15px/1.55 var(--mono); }
body { overflow-x: hidden; }
a { color: var(--cyan); }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
::selection { background: var(--phos); color: var(--ink); }

/* ── sky: three stacked gradients cross-fade (dusk / night / day); the sun is a button (egg) */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.sky .layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s; }
.sky .l-dusk { background: linear-gradient(#1d0c1b 0%, #2a1a4d 22%, #5a2a47 48%, #c8563a 78%, #ffb43a 100%); }
.sky .l-night { background: linear-gradient(#05030c 0%, #0b0620 40%, #1d1040 80%, #2a1a4d 100%); }
.sky .l-day { background: linear-gradient(#2a6ab0 0%, #5aa6e0 45%, #a8d8f0 80%, #f4fbff 100%); }
body.dusk .l-dusk, body.night .l-night, body.day .l-day { opacity: 1; }
.sky .star { position: absolute; width: 3px; height: 3px; background: #fff6d8; opacity: 0; animation: twinkle 3s ease-in-out infinite; }
body.dusk .star { opacity: .35; } body.night .star { opacity: .95; } body.day .star { display: none; }
@keyframes twinkle { 50% { transform: scale(.4); filter: brightness(.6); } }
.sun { position: absolute; right: 9vw; top: 18px; width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--ink); padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #ffd36a 45%, #ff9a1f); box-shadow: 0 0 40px 14px rgba(255,180,58,.45); transition: transform 1.2s, background .6s, box-shadow .6s; }
body.night .sun { background: radial-gradient(circle at 35% 30%, #fff, #d8dcf0 55%, #8890b0); box-shadow: 0 0 30px 8px rgba(200,210,255,.3); transform: translateY(-4px); }
body.day .sun { background: radial-gradient(circle at 35% 30%, #fffbe0, #ffe14a 50%, #ffb43a); box-shadow: 0 0 60px 24px rgba(255,240,150,.55); }
.sun::after { content: ""; position: absolute; inset: -14px; } /* bigger tap target */
.cloud { position: absolute; left: 0; width: 120px; height: 28px; border: 4px solid var(--ink); border-radius: 16px; background: var(--cloud, #c96a7a); animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 12px; background: inherit; border: 4px solid var(--ink); border-bottom: 0; border-radius: 30px 30px 0 0; }
.cloud::before { left: 14px; width: 44px; height: 24px; } .cloud::after { left: 52px; width: 36px; height: 34px; }
body.dusk { --cloud: #c96a7a; } body.night { --cloud: #3a2a58; } body.day { --cloud: #ffffff; }
@keyframes drift { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 200px)); } }
.city { position: absolute; left: 0; right: 0; bottom: 0; height: 38vh; display: flex; align-items: flex-end; justify-content: space-around; }
.city i { display: block; background: #1d0c1b; border: 3px solid var(--ink); border-bottom: 0; position: relative; }
body.day .city i { background: #4a5a6a; } body.night .city i { background: #0a0618; }
.city i::before, .city i::after { content: ""; position: absolute; left: 18%; right: 18%; top: 8%; bottom: 8%; opacity: 0; }
.city i::after { background: repeating-linear-gradient(0deg, transparent 0 14px, #ffd36a 14px 22px); }
.city i::before { z-index: 1; background: repeating-linear-gradient(90deg, var(--bld) 0 6px, transparent 6px 16px); }
body.night .city i::after, body.dusk .city i::after { opacity: .8; } body.night .city i::before, body.dusk .city i::before { opacity: 1; }
body.dusk { --bld: #1d0c1b; } body.night { --bld: #0a0618; } body.day { --bld: #4a5a6a; }

/* ── monitor */
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 96px 18px 0; pointer-events: none; min-height: 100vh; display: flex; flex-direction: column; }
.page-login .wrap { max-width: 520px; }
.monitor, .deck, footer { pointer-events: auto; }
.monitor { position: relative; background: linear-gradient(#e8dcb8, #d8c79b 40%, #cbb98a); border: 4px solid var(--ink); border-radius: 30px 30px 14px 14px; padding: 26px 26px 0; box-shadow: 0 8px 0 var(--ink), 0 0 0 4px var(--beige-lo), 0 20px 50px rgba(0,0,0,.5); }
.vents { position: absolute; top: 8px; left: 12%; right: 12%; height: 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 14px); opacity: .65; }
.screen { position: relative; background: var(--screen); border: 6px solid var(--ink); border-radius: 26px / 20px; overflow: hidden; box-shadow: inset 0 0 70px rgba(109,255,122,.16), inset 0 0 0 3px #0c2a18, 0 0 0 3px var(--beige-lo); }
.screen::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.5) 100%); }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.07) 0 14%, transparent 14.2%) , rgba(109,255,122,.03); animation: flicker 5s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 7% { opacity: .78; } 8% { opacity: 1; } 52% { opacity: .9; } 53% { opacity: 1; } 91% { opacity: .82; } 92% { opacity: 1; } }
.crt { position: relative; z-index: 2; padding: 22px 24px 28px; min-height: 280px; text-shadow: 0 0 6px rgba(109,255,122,.45); }
.chin { display: flex; align-items: center; gap: 14px; padding: 8px 6px 12px; }
.model { font: 10px var(--px); color: var(--beige-lo); text-shadow: 1px 1px 0 var(--beige-hi); flex: 1; letter-spacing: .05em; }
.knobs { display: flex; gap: 12px; } .knobs i { width: 22px; height: 22px; border-radius: 50%; background: #5a4a30; border: 3px solid var(--ink); position: relative; }
.knobs i::after { content: ""; position: absolute; left: 50%; top: 2px; width: 3px; height: 8px; margin-left: -1.5px; background: var(--yellow); }
.knobs i + i::after { transform: rotate(40deg); transform-origin: 50% 7px; }
.led { width: 48px; height: 48px; margin: -8px -6px -8px 0; background: none; border: 0; display: grid; place-items: center; }
.led b { width: 14px; height: 14px; border-radius: 50%; background: var(--phos); border: 3px solid var(--ink); box-shadow: 0 0 8px 3px rgba(109,255,122,.85); transition: .3s; }
body.poweroff .led b { background: #2a5a2a; box-shadow: none; }
.screen.poweroff .crt { animation: poweroff .7s ease-in forwards; }
.screen.poweron .crt { animation: poweron .8s ease-out; }
@keyframes poweroff { 0% { transform: none; filter: none; } 45% { transform: scaleY(.012); filter: brightness(4); opacity: 1; } 80% { transform: scale(.01); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes poweron { 0% { transform: scale(.01); filter: brightness(5); opacity: 1; } 40% { transform: scaleY(.012) ; filter: brightness(4); } 100% { transform: none; filter: none; } }
.screen.degauss .crt { animation: wobble .9s ease-out; }
@keyframes wobble { 0% { transform: skewX(8deg) scale(1.04); filter: hue-rotate(60deg) blur(1px); } 30% { transform: skewX(-5deg); filter: hue-rotate(-40deg); } 60% { transform: skewX(2deg); } 100% { transform: none; filter: none; } }
.screen.caffeine .crt { animation: jitter .09s steps(2) 40; }
@keyframes jitter { 50% { transform: translate(1px, -1px); } }

/* ── screen content */
h1, h2, h3 { font-weight: normal; }
h1 { font: 22px/1.3 var(--px); margin: 0 0 6px; background: linear-gradient(90deg, #5aa6ff, #c87aff 55%, #ff7ad9); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(3px 3px 0 #0b0a18); text-shadow: none; }
.sub { color: var(--phos-dim); margin: 0 0 18px; }
.top { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px dashed rgba(109,255,122,.35); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--yellow); }
.brand img, .login .logo { filter: drop-shadow(2px 2px 0 var(--ink)); cursor: pointer; user-select: none; -webkit-user-drag: none; }
.brand img { height: 48px; width: auto; }
.brand span { font: 14px/1.3 var(--px); letter-spacing: .04em; text-shadow: 2px 2px 0 var(--ink); }
.brand small { display: block; font-size: 9px; color: var(--cyan); margin-top: 3px; letter-spacing: .3em; text-transform: uppercase; }
nav { display: flex; gap: 6px; flex: 1; }
nav button { background: none; border: 2px solid transparent; padding: 10px 14px; min-height: 44px; color: var(--phos-dim); font: 10px var(--px); }
nav button::before { content: "> "; opacity: 0; } nav button.on::before { opacity: 1; }
nav button.on { color: var(--ink); background: var(--phos); border-color: var(--phos); text-shadow: none; box-shadow: 0 0 12px rgba(109,255,122,.5); }
nav button:not(.on):hover { color: var(--phos-soft); border-color: var(--phos-dim); }
#logout { background: none; border: 2px solid var(--phos-dim); padding: 10px 14px; min-height: 44px; color: var(--phos-dim); font: 10px var(--px); }
#logout:hover { color: var(--ink); background: var(--amber); border-color: var(--amber); text-shadow: none; }
main { max-width: 100%; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 22px; }
.toolbar input { flex: 1 1 240px; min-height: 46px; background: #00170c; border: 2px solid var(--phos-dim); color: var(--phos-soft); padding: 9px 12px; font: inherit; caret-color: var(--phos); caret-shape: block; border-radius: 0; }
.toolbar input:focus, .login input:focus { outline: 0; border-color: var(--phos); box-shadow: 0 0 14px rgba(109,255,122,.5); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: none; border: 2px solid var(--phos-dim); padding: 8px 12px; min-height: 40px; color: var(--phos-dim); font: 9px var(--px); }
.chip.on { background: var(--cyan); border-color: var(--cyan); color: var(--ink); text-shadow: none; }
.cursor { display: inline-block; width: .62em; height: 1.05em; margin-left: 4px; background: var(--phos); vertical-align: -.15em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.empty { color: var(--phos-dim); text-align: center; padding: 40px 0; }
.help h3 { margin: 24px 0 6px; font: 11px var(--px); color: var(--yellow); text-shadow: 2px 2px 0 var(--ink); }
.help code { background: #00170c; border: 1px solid var(--phos-dim); padding: 1px 6px; color: var(--cyan); font-size: 13px; }
.help pre { background: #00170c; border: 2px solid var(--phos-dim); padding: 12px 14px; overflow-x: auto; color: var(--cyan); }

/* ── buttons: ink outline, flat cel shading, hard drop edge */
.btn { display: inline-block; text-decoration: none; text-align: center; background: linear-gradient(#8dffa0 0 45%, #3fd36a 45%); color: var(--ink); text-shadow: none; font: 11px var(--px); border: 3px solid var(--ink); border-radius: 8px; padding: 14px 18px; min-height: 48px; white-space: nowrap; box-shadow: 0 4px 0 var(--ink); transition: transform .06s, box-shadow .06s; }
.btn:hover { filter: brightness(1.1); } .btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.btn.ghost { background: linear-gradient(#ffe9a0 0 45%, #ffb43a 45%); }
.btn:disabled { filter: grayscale(.8) brightness(.8); }

/* ── package boxes: each app is a boxed piece of retro software, each file a disk label */
.app { --c1: #2a6ad0; --c2: #1d4a98; background: var(--beige-hi); color: var(--ink); text-shadow: none; border: 4px solid var(--ink); border-radius: 6px; margin-bottom: 26px; box-shadow: 7px 7px 0 rgba(0,0,0,.55); overflow: hidden; }
.app--c1 { --c1: #d84a9a; --c2: #98206a; } .app--c2 { --c1: #f08a20; --c2: #b05a08; } .app--c3 { --c1: #1fb48a; --c2: #0c7a5a; }
.app > header { background: linear-gradient(var(--c1) 0 55%, var(--c2) 55%); border-bottom: 4px solid var(--ink); padding: 14px 18px 12px; position: relative; }
.app > header::after { content: ""; position: absolute; right: 14px; top: 12px; width: 46px; height: 12px; background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px); opacity: .5; }
.app h2 { margin: 0; font: 15px/1.3 var(--px); color: #fff; text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); overflow-wrap: anywhere; }
.app header p { margin: 6px 0 0; color: #fff6d8; font-size: 13px; text-shadow: 1px 1px 0 var(--ink); }
.row { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-top: 2px dashed rgba(27,14,8,.35); }
.row:first-of-type { border-top: 0; }
.row .ico { width: 44px; height: 44px; padding: 6px; background: var(--ink); border: 3px solid var(--ink); border-radius: 6px; color: var(--phos); box-shadow: inset 0 0 0 2px #0c2a18; }
.row .ico svg { width: 100%; height: 100%; fill: currentColor; display: block; shape-rendering: crispEdges; }
.row .t { font-weight: bold; } .row .meta { color: #5a4a2a; font-size: 13px; margin-top: 2px; word-break: break-word; }
.row .note { color: #5a4a2a; font-size: 13px; margin-top: 4px; }
.sha { font: 12px var(--mono); color: #6a4018; cursor: pointer; border: 0; background: none; padding: 6px 0; text-align: left; min-height: 32px; }
.sha:hover { color: var(--red); }
.tag { font: 8px var(--px); padding: 4px 6px; background: var(--ink); color: var(--yellow); margin-left: 6px; vertical-align: 2px; white-space: nowrap; }

/* ── login */
.login { max-width: 380px; margin: 0 auto; text-align: center; padding: 6px 0 4px; }
.login .logo { height: 130px; width: auto; margin-bottom: 8px; }
.login h1 { font-size: 18px; margin-bottom: 12px; }
.boot { color: var(--phos-dim); font-size: 12px; margin: 0 0 18px; } .boot.dim { margin: 16px 0 0; opacity: .7; }
.prompt { display: block; text-align: left; font: 10px var(--px); color: var(--yellow); margin-bottom: 6px; text-shadow: 2px 2px 0 var(--ink); }
.login input { width: 100%; min-height: 52px; margin: 0 0 14px; background: #00170c; border: 2px solid var(--phos-dim); color: var(--phos-soft); border-radius: 0; padding: 10px 12px; font: 17px var(--mono); caret-color: var(--phos); caret-shape: block; }
.login .btn { width: 100%; font-size: 12px; padding: 16px; }
.err { color: #ff7a6a; min-height: 1.5em; margin-top: 12px; font-size: 14px; }

/* ── desk and the computer's base unit */
.deck { display: flex; align-items: center; gap: 16px; margin: 0 14px; padding: 14px 18px; background: linear-gradient(#d8c79b, #bfae80); border: 4px solid var(--ink); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 6px 0 var(--ink); }
.plaque { flex: 1; background: #06210f; border: 3px solid var(--ink); padding: 8px 10px; text-align: center; font: 10px var(--px); color: var(--phos); text-shadow: 0 0 6px rgba(109,255,122,.8); border-radius: 4px; }
.plaque small { display: block; font-size: 6px; color: var(--cyan); margin-top: 5px; letter-spacing: .15em; }
.can { position: relative; width: 52px; height: 86px; flex: none; margin-right: 18px; border: 3px solid var(--ink); border-radius: 6px 6px 9px 9px; background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,0) 32%, rgba(0,0,0,.28)), linear-gradient(#c9d3d8 0 12%, #1d2f7a 12% 88%, #c9d3d8 88%); }
.can::after { content: ""; position: absolute; left: 10px; top: 14px; width: 24px; height: 46px; background: #d7ff3a; clip-path: polygon(60% 0, 8% 56%, 44% 56%, 28% 100%, 92% 40%, 55% 40%); }
.can::before { content: ""; position: absolute; left: 11px; top: -8px; width: 22px; height: 7px; background: #c9d3d8; border: 3px solid var(--ink); border-radius: 50%; }
.fizz { position: absolute; left: 10px; top: -30px; width: 5px; height: 5px; background: rgba(215,255,58,.85); border-radius: 50%; box-shadow: 10px 6px rgba(215,255,58,.65), 18px -3px rgba(215,255,58,.5); animation: fizz 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes fizz { 0% { transform: translateY(6px); opacity: .1; } 50% { opacity: 1; } 100% { transform: translateY(-10px); opacity: .1; } }
.drive { position: relative; width: 96px; height: 42px; flex: none; background: #bfae80; border: 3px solid var(--ink); border-radius: 4px; }
.drive::before { content: ""; position: absolute; left: 8px; right: 8px; top: 14px; height: 8px; background: var(--ink); }
.drive::after { content: ""; position: absolute; right: 8px; bottom: 5px; width: 16px; height: 6px; background: var(--red); border: 2px solid var(--ink); }
.drive span { position: absolute; left: 8px; bottom: 3px; font: 8px var(--px); color: var(--beige-lo); }
.drive.seek::before { animation: seek .12s steps(2) 8; }
@keyframes seek { 50% { background: var(--phos); } }
footer { margin: 0 14px; text-align: center; color: #d8c99c; text-shadow: 1px 1px 0 var(--ink); font-size: 12px; padding: 10px 0 0; }
.desk { margin: auto calc(50% - 50vw) 0; min-height: 90px; flex: 1 0 60px; position: relative; background: repeating-linear-gradient(180deg, var(--wood-hi) 0 18px, var(--wood) 18px 22px); border-top: 5px solid var(--ink); box-shadow: 0 -10px 0 -4px rgba(0,0,0,.35); }

/* ── easter-egg effects (see js/fx.js) */
.bubble { position: fixed; z-index: 50; transform: translate(-50%, -100%); background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 10px; padding: 10px 12px; font: 10px/1.5 var(--px); max-width: 80vw; text-align: center; pointer-events: none; text-shadow: none; animation: pop 2.4s forwards; }
@keyframes pop { 0% { transform: translate(-50%, -80%) scale(.2); opacity: 0; } 10% { transform: translate(-50%, -100%) scale(1.1); opacity: 1; } 15%, 80% { transform: translate(-50%, -100%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -150%); opacity: 0; } }
.bit { position: fixed; z-index: 49; width: 8px; height: 8px; border: 2px solid var(--ink); pointer-events: none; }
.spin { animation: spin .9s steps(8); } @keyframes spin { to { transform: rotate(360deg) scale(1.3); } }
.game { position: absolute; inset: 0; z-index: 6; background: rgba(0,10,4,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-shadow: none; }
.game canvas { width: min(92%, 480px); aspect-ratio: 4 / 3; border: 3px solid var(--phos); background: #001a0a; image-rendering: pixelated; touch-action: none; }
.game p { margin: 0; font: 9px/1.6 var(--px); color: var(--phos); text-align: center; }

/* ── phones */
@media (max-width: 700px) {
  html, body { font-size: 14px; }
  .wrap { padding: 70px 8px 0; }
  .monitor { padding: 12px 12px 0; border-radius: 22px 22px 10px 10px; }
  .vents { display: none; }
  .crt { padding: 14px 10px 20px; } .brand { flex: 1; }
  h1 { font-size: 16px; } .top { gap: 10px; } .brand img { height: 40px; } .brand span { font-size: 12px; }
  nav { order: 3; flex: 1 1 100%; } nav button { flex: 1; }
  #logout { margin-left: auto; }
  .row { grid-template-columns: 44px 1fr; gap: 10px; padding: 12px; } .row .act { grid-column: 1 / -1; } .row .act .btn { display: block; width: 100%; }
  .app h2 { font-size: 12px; } .tag { display: inline-block; margin: 4px 6px 0 0; }
  .deck { margin: 0 8px; gap: 10px; padding: 12px; } .drive { width: 64px; } .can { margin-right: 6px; width: 44px; height: 72px; }
  .plaque { font-size: 8px; } .model { font-size: 8px; }
  .sun { width: 52px; height: 52px; top: 10px; right: 6vw; }
}
@media (prefers-reduced-motion: reduce) { .cloud, .star, .fizz, .screen::after, .cursor { animation: none; } }

/* header shortcut to the web llmuse */
.top .btn { padding: 8px 12px; min-height: 0; font-size: 10px; box-shadow: 0 3px 0 var(--ink); margin-right: 8px; }

.btn .pc { width: 20px; height: 18px; vertical-align: -4px; margin-right: 8px; image-rendering: pixelated; }

/* ---------- Weather over the sky ---------- */
.weather { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.weather .drop, .weather .flake { position: absolute; display: none; top: -8vh; }
.weather .drop { width: 2px; height: 20px; background: linear-gradient(rgba(190,210,255,0), rgba(190,210,255,.75)); animation: rain .7s linear infinite; }
.weather .flake { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; animation: snow 8s linear infinite; }
@keyframes rain { to { transform: translate(-36px, 118vh); } }
@keyframes snow { 0% { transform: translate(0, 0); } 25% { transform: translate(18px, 28vh); } 50% { transform: translate(-14px, 56vh); } 75% { transform: translate(16px, 84vh); } 100% { transform: translate(0, 112vh); } }
body.w-rain .drop, body.w-storm .drop { display: block; }
body.w-drizzle .drop:nth-child(3n) { display: block; opacity: .6; }
body.w-snow .flake { display: block; }
.weather .fogband { position: absolute; left: 0; right: 0; bottom: 0; height: 75%; opacity: 0; transition: opacity 3s; background: linear-gradient(rgba(220,225,235,0), rgba(220,225,235,.55) 40%, rgba(220,225,235,.8)); }
body.w-fog .fogband { opacity: 1; }
.weather .flash { position: absolute; inset: 0; background: #e8f0ff; opacity: 0; }
body.w-storm .flash { animation: flash 9s infinite; }
@keyframes flash { 0%, 90%, 100% { opacity: 0; } 91% { opacity: .75; } 92% { opacity: .05; } 93% { opacity: .55; } 95% { opacity: 0; } }
.sky { --wf: none; filter: var(--wf); transition: filter 3s; }
body.w-clouds .sky { --wf: saturate(.6) brightness(.9); } body.w-rain .sky, body.w-drizzle .sky { --wf: saturate(.4) brightness(.72); }
body.w-storm .sky { --wf: saturate(.35) brightness(.55); } body.w-snow .sky { --wf: saturate(.35) brightness(.95) contrast(.9); } body.w-fog .sky { --wf: saturate(.3) brightness(.95); }
body.w-clouds .sun { opacity: .6; } body.w-rain .sun, body.w-drizzle .sun, body.w-snow .sun { opacity: .3; } body.w-storm .sun, body.w-fog .sun { opacity: .18; }
body.w-clouds .star { opacity: .35 !important; } body.w-rain .star, body.w-drizzle .star, body.w-storm .star, body.w-snow .star, body.w-fog .star { opacity: .08 !important; }
body.w-clouds { --cloud: #9aa0ac; } body.day.w-clouds, body.day.w-rain, body.day.w-drizzle, body.day.w-storm { --cloud: #9aa4b2; }
@media (prefers-reduced-motion: reduce) { .weather .drop, .weather .flake { animation: none; } body.w-storm .flash { animation: none; } }

.logo, #logo { cursor: pointer; }