/* Kapstone home — a 2000-era PC on a desk in a high-rise office.
   Scene colours/intensities are CSS custom properties set by app.js
   from the time of day (solar elevation) and the local weather. */

:root {
  /* monitor width: fit width on phones, ~70% of height elsewhere */
  --mw: min(94vw, calc(70svh / 0.925), 1000px);

  /* scene state (defaults = clear night) — overwritten by app.js */
  --sky-top: #05091a; --sky-mid: #0c1733; --sky-bot: #223157;
  --light: 0.1;        /* 0 night … 1 bright day */
  --stars: 1;          /* star opacity */
  --cityglow: 0.6;     /* orange light-pollution haze at the horizon */
  --overcast: 0;       /* flat grey cloud deck */
  --cloud-tint: 255,255,255;
  --fog: 0;            /* fog overlay */
  --haze: 0.3;
  --blur-far: 4px; --blur-near: 2.2px;
  --sun-x: 50%; --sun-y: 40%; --sun-a: 0; --sun-c: #ffd37a;
  --moon-x: 70%; --moon-y: 18%; --moon-a: 1; --moon-k: 0.5;
  --lamp: 1;           /* desk lamp on at night */
  --screenglow: 1;     /* monitor light spilling onto the desk */
  --warm: 0;           /* golden-hour tint */
  --sky-reflect: 0.08; /* daylight reflecting off the glass */
  --night: 0.9;        /* 1 - light: how dark it is outside (interior reflections show in the glass) */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: clip; }
body {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }

.scene { position: fixed; inset: 0; overflow: clip; background: var(--sky-bot); }

/* ---------- Photograph ---------- */
/* the canvas is .photo-canvas; .scene.photo is a STATE class (photo loaded) — keep them distinct or the blur hits the whole scene */
.photo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(var(--photo-blur, 1.6px)); transform: scale(1.01); }
.scene.photo .skyline, .scene.photo .beacons { display: none; }
.scene.photo .cityglow { opacity: calc(var(--cityglow) * .55); }

/* ---------- Sky ---------- */
.sky {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bot) 72%, var(--sky-bot) 100%);
}
.stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--stars); transition: opacity 2s; }

.sun {
  position: absolute; left: var(--sun-x); top: var(--sun-y); width: 9vmin; height: 9vmin;
  margin: -4.5vmin 0 0 -4.5vmin; border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, #fff 0%, var(--sun-c) 45%, transparent 72%);
  box-shadow: 0 0 6vmin 2vmin color-mix(in srgb, var(--sun-c) 55%, transparent), 0 0 24vmin 10vmin color-mix(in srgb, var(--sun-c) 22%, transparent);
  opacity: var(--sun-a); transition: opacity 2s;
  pointer-events: none;
}
.sun::after { /* glare across the whole window */
  content: ""; position: absolute; left: 50%; top: 50%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--sun-c) 45%, transparent) 0%, transparent 42%);
  mix-blend-mode: screen;
}
.moon {
  position: absolute; left: var(--moon-x); top: var(--moon-y); width: 5.2vmin; height: 5.2vmin; margin: -2.6vmin 0 0 -2.6vmin;
  border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fdfdf6 0%, #e8e9dc 55%, #c9ccbd 100%);
  box-shadow: 0 0 3vmin 1vmin rgba(240,244,255,.28), 0 0 12vmin 4vmin rgba(220,228,255,.10);
  opacity: var(--moon-a); transition: opacity 2s; overflow: hidden; pointer-events: none;
}
.moon::before { /* phase shadow */
  content: ""; position: absolute; inset: -12%; border-radius: 50%; background: var(--sky-mid); opacity: .94;
  transform: translateX(calc((var(--moon-k) - .5) * 210%));
}

.overcast {
  position: absolute; inset: 0; opacity: var(--overcast); transition: opacity 2s;
  background:
    radial-gradient(120% 60% at 30% 10%, rgba(var(--cloud-tint), .55), transparent 70%),
    radial-gradient(120% 70% at 80% 20%, rgba(var(--cloud-tint), .5), transparent 70%),
    linear-gradient(to bottom, rgba(var(--cloud-tint), .55) 0%, rgba(var(--cloud-tint), .35) 50%, rgba(var(--cloud-tint), .12) 72%, transparent 85%);
}
.clouds { position: absolute; inset: 0; overflow: clip; }
.cloud {
  position: absolute; border-radius: 50%; filter: blur(14px);
  background: radial-gradient(ellipse at 50% 60%, rgba(var(--cloud-tint), var(--ca, .8)) 0%, rgba(var(--cloud-tint), calc(var(--ca, .8) * .5)) 45%, transparent 72%);
  animation: drift var(--dur, 140s) linear infinite; animation-delay: var(--delay, 0s);
  will-change: transform;
}
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }

/* ---------- City ---------- */
.skyline { position: absolute; inset: 0; width: 100%; height: 100%; }
.skyline.far { filter: blur(var(--blur-far)); }
.skyline.near { filter: blur(var(--blur-near)); }
.cityglow {
  position: absolute; left: 0; right: 0; top: 30%; bottom: 0; opacity: var(--cityglow); transition: opacity 2s;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,150,70,.10) 55%, rgba(255,140,60,.28) 72%, rgba(255,130,60,.3) 100%);
}
.beacons { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--light) * .7); }
.beacon {
  position: absolute; width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%; background: #ff3b30;
  box-shadow: 0 0 6px 2px rgba(255,59,48,.7); animation: blink 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); filter: blur(.4px);
}
@keyframes blink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

.fog {
  position: absolute; inset: 0; opacity: var(--fog); transition: opacity 2s; pointer-events: none;
  background: linear-gradient(to bottom, rgba(190,196,206,.35) 0%, rgba(190,196,206,.75) 60%, rgba(180,186,196,.9) 100%);
}
.flash { position: absolute; inset: 0; background: #e8f0ff; opacity: 0; pointer-events: none; }
.scene.zap .flash { opacity: .55; }
.scene.zap .skyline { filter: blur(var(--blur-far)) brightness(2.2) contrast(1.1); }

/* ---------- Glass ---------- */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.glass {
  position: absolute; inset: 0; pointer-events: none;
  background-color: rgba(120, 142, 150, .035);                      /* low-e glass tint */
  background:
    /* ceiling pot-lights reflected in the pane (only once it is dark outside) */
    radial-gradient(21% 5.5% at 22% 15%, rgba(255,228,186, calc(.26 * var(--night))), transparent 70%),
    radial-gradient(21% 5.5% at 50% 13%, rgba(255,228,186, calc(.2 * var(--night))), transparent 70%),
    radial-gradient(21% 5.5% at 78% 15%, rgba(255,228,186, calc(.26 * var(--night))), transparent 70%),
    /* the banker's lamp and the screen's glow bouncing off the glass */
    radial-gradient(18% 24% at 87% 60%, rgba(255,192,120, calc(.18 * var(--lamp))), transparent 70%),
    radial-gradient(26% 18% at 50% 62%, rgba(150,190,255, calc(.09 * var(--night))), transparent 70%),
    /* diagonal sheen bands */
    linear-gradient(108deg, transparent 0 33%, rgba(255,255,255,.055) 37%, rgba(255,255,255,.02) 40%, transparent 44%, transparent 59%, rgba(255,255,255,.04) 62%, transparent 67%),
    /* sky reflected by day */
    linear-gradient(to bottom, rgba(220,230,245, calc(var(--sky-reflect) * 1.1)) 0%, rgba(220,230,245, calc(var(--sky-reflect) * .3)) 45%, transparent 70%);
}
.glass::before { /* smudges and fingerprints */
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen; opacity: calc(.5 + .5 * var(--night));
  background:
    radial-gradient(140px 46px at 31% 41%, rgba(255,255,255,.045), transparent 70%),
    radial-gradient(90px 90px at 64% 28%, rgba(255,255,255,.035), transparent 70%),
    radial-gradient(200px 30px at 70% 70%, rgba(255,255,255,.03), transparent 70%),
    radial-gradient(60px 120px at 12% 60%, rgba(255,255,255,.03), transparent 70%),
    radial-gradient(110px 36px at 88% 36%, rgba(255,255,255,.035), transparent 70%),
    repeating-linear-gradient(112deg, rgba(255,255,255,0) 0 23px, rgba(255,255,255,.012) 23px 24px);
}
.glass::after { /* light catching the pane edges along the mullions */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - min(31vw, 520px) - 6px), rgba(255,255,255,.07) calc(50% - min(31vw, 520px) - 1px), transparent calc(50% - min(31vw, 520px) + 1px)),
    linear-gradient(90deg, transparent calc(50% + min(31vw, 520px) + clamp(10px, 1.1vw, 18px)), rgba(255,255,255,.07) calc(50% + min(31vw, 520px) + clamp(10px, 1.1vw, 18px) + 1px), transparent calc(50% + min(31vw, 520px) + clamp(10px, 1.1vw, 18px) + 6px)),
    linear-gradient(to bottom, transparent calc(9% + clamp(8px, 1vw, 14px)), rgba(255,255,255,.08) calc(9% + clamp(8px, 1vw, 14px) + 1px), transparent calc(9% + clamp(8px, 1vw, 14px) + 7px));
  opacity: calc(.35 + .65 * var(--night));
}
.mullions { position: absolute; inset: 0; pointer-events: none; }
.mullions i, .mullions b {
  position: absolute; background: linear-gradient(90deg, #06080c, #1b1f26 45%, #0b0d12);
  box-shadow: 0 0 18px rgba(0,0,0,.6);
}
.mullions i { top: 0; bottom: 20%; width: clamp(10px, 1.1vw, 18px); }
.mullions i:nth-child(1) { left: calc(50% - min(31vw, 520px)); }
.mullions i:nth-child(2) { left: calc(50% + min(31vw, 520px)); }
.mullions b { left: 0; right: 0; top: 9%; height: clamp(8px, 1vw, 14px); background: linear-gradient(to bottom, #06080c, #1b1f26 45%, #0b0d12); }

/* ---------- Interior ---------- */
.ceiling {
  position: absolute; left: 0; right: 0; top: 0; height: 10%; pointer-events: none;
  background:
    radial-gradient(40% 100% at 20% 0%, rgba(255,226,180, calc(.35 * var(--lamp))), transparent 70%),
    radial-gradient(40% 100% at 80% 0%, rgba(255,226,180, calc(.35 * var(--lamp))), transparent 70%),
    linear-gradient(to bottom, rgba(6,7,10,.95) 0%, rgba(6,7,10,.6) 45%, transparent 100%);
}
.plant { position: absolute; left: -2vw; bottom: 17%; width: clamp(110px, 16vw, 260px); height: 46vh; pointer-events: none; opacity: .95; }
.plant svg { width: 100%; height: 100%; filter: drop-shadow(0 0 12px rgba(0,0,0,.6)); }
.lamp { position: absolute; right: 4vw; bottom: 17%; width: clamp(60px, 7vw, 120px); height: 30vh; pointer-events: none; }
.lampbody { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; filter: brightness(calc(.45 + var(--light) * .6)); }
.lampglow {
  position: absolute; left: 50%; bottom: -16vh; width: 70vmin; height: 46vmin; margin-left: -35vmin; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,190,110,.55) 0%, rgba(255,170,90,.22) 40%, transparent 70%);
  opacity: var(--lamp); transition: opacity 2s;
}
.desk {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.18) 0, rgba(255,255,255,0) 2px),
    repeating-linear-gradient(97deg, rgba(0,0,0,0) 0 11px, rgba(0,0,0,.08) 11px 13px, rgba(0,0,0,0) 13px 29px),
    linear-gradient(to bottom, #4a3526 0%, #2f2118 35%, #1c1410 100%);
  filter: brightness(calc(.55 + var(--light) * .75));
  box-shadow: 0 -2px 0 rgba(0,0,0,.5);
}
.deskglow {
  position: absolute; left: 50%; bottom: 0; width: var(--mw); height: 20%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(120,170,255,.28), transparent 70%);
  opacity: var(--screenglow); transition: opacity 2s;
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.35) 80%, rgba(0,0,0,.7) 100%);
}

/* ---------- The computer (WebGL) + projected desktop ---------- */
/* NB: never animate or zero the opacity of the WebGL canvas itself — a canvas whose layer starts at opacity 0
   blacks out the whole page in Chromium (macOS, ANGLE Metal). The canvas is transparent until the model renders. */
.gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
body.gl .overlay { opacity: 1; }
.overlay .crt { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: auto; border-radius: 9px; }
.led-gl { display: none; position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px; }
body.gl .led-gl { display: block; }
.badge-gl { display: none; position: absolute; transform: translate(-50%, -50%); color: #8a8372; opacity: .9; filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)); }
.badge-gl svg { width: 100%; height: 100%; display: block; }
body.gl .badge-gl { display: block; }
.rig { display: none; }
body.nogl .rig { display: block; }
body.nogl .gl, body.nogl .overlay { display: none; }
.screen .crt { position: absolute; inset: 1cqw; width: auto !important; height: auto !important; transform: none !important; border-radius: 1.3cqw; }
body.gl .desk, body.gl .deskglow { display: none; }   /* the 3D desk replaces them */

/* ---------- Monitor (CSS fallback) ---------- */
.rig {
  position: absolute; left: 50%; bottom: 3.5svh; width: var(--mw); transform: translateX(-50%);
  container-type: inline-size;
}
.monitor { position: relative; width: 100%; }
.bezel {
  position: relative; border-radius: 4cqw 4cqw 3.2cqw 3.2cqw; padding: 5cqw 6.5cqw 0;
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.35), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #ebe6d8 0%, #d8d2c2 45%, #c4bdaa 100%);
  box-shadow:
    0 2cqw 5cqw rgba(0,0,0,.6), 0 .4cqw 1cqw rgba(0,0,0,.35),
    inset 0 .35cqw .6cqw rgba(255,255,255,.65), inset 0 -.5cqw 1cqw rgba(0,0,0,.18);
  filter: brightness(calc(.72 + var(--light) * .3));
}
.screen {
  position: relative; aspect-ratio: 4 / 3; border-radius: 1.6cqw; background: #0a0a0a; overflow: clip;
  box-shadow:
    0 0 0 .55cqw #b6af9d, 0 0 0 .9cqw #a69f8d, 0 0 0 1.1cqw rgba(0,0,0,.25),
    inset 0 0 0 .5cqw #1a1917, inset 0 0 2.5cqw rgba(0,0,0,.9),
    0 0 4cqw rgba(120,170,255, calc(var(--screenglow) * .25));
  filter: brightness(calc(1 / (.72 + var(--light) * .3))); /* cancel the bezel dimming: the screen emits light */
}
.crt {
  overflow: clip; background: #000;
  container-type: size; container-name: crt;
}
.tube { position: absolute; inset: 0; border-radius: inherit; overflow: clip; background: #000; box-shadow: inset 0 0 14px rgba(0,0,0,.95); }
.scanlines {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.12) 2px 3px);
}
.glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(60% 45% at 18% 8%, rgba(255,255,255,.16), transparent 70%),
    linear-gradient(115deg, transparent 0 30%, rgba(255,255,255,.05) 44%, transparent 56%);
  box-shadow: inset 0 0 12px rgba(0,0,0,.7);
}
.chin { height: 9cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 .4cqw 0 1.5cqw; }
.chin-badge { display: flex; align-items: center; width: 100%; justify-content: center; margin-left: 10cqw; }
.chin-wm { width: 22cqw; height: 3.8cqw; color: #8f8878; filter: drop-shadow(0 .14cqw 0 rgba(255,255,255,.65)); }
.chin-btns { display: flex; align-items: center; gap: .9cqw; }
.chin-btns i {
  width: 2.2cqw; height: 1.3cqw; border-radius: .3cqw;
  background: linear-gradient(#d7d1c1, #b7b09e); box-shadow: inset 0 .1cqw 0 rgba(255,255,255,.7), 0 .12cqw .12cqw rgba(0,0,0,.35);
}
.led { width: 1cqw; height: 1cqw; border-radius: 50%; margin-left: .8cqw; background: #39e24a; box-shadow: 0 0 .8cqw #39e24a, 0 0 .2cqw #fff inset; }
.led.amber { background: #f0a21b; box-shadow: 0 0 .8cqw #f0a21b; }
.led.off { background: #4a4a44; box-shadow: none; }
.neck {
  width: 24cqw; height: 5cqw; margin: 0 auto; clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #a9a28f, #e2dccd 50%, #a9a28f);
  filter: brightness(calc(.6 + var(--light) * .4));
}
.base {
  width: 50cqw; height: 4.6cqw; margin: -.6cqw auto 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 20%, #e9e4d6, #c6bfac 65%, #a59e8c);
  box-shadow: 0 .8cqw 2cqw rgba(0,0,0,.55); filter: brightness(calc(.6 + var(--light) * .4));
}
.keyboard {
  position: relative; width: 72cqw; height: 6.2cqw; margin: -1.4cqw auto 0; border-radius: .9cqw .9cqw .6cqw .6cqw;
  background: linear-gradient(to bottom, #e6e1d3 0 55%, #cdc7b5 55%, #b3ac99 100%);
  box-shadow: 0 .7cqw 1.6cqw rgba(0,0,0,.55), inset 0 .15cqw 0 rgba(255,255,255,.7);
  filter: brightness(calc(.6 + var(--light) * .4));
}
.keys {
  position: absolute; left: 1.4cqw; right: 1.4cqw; top: .6cqw; height: 2.6cqw;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 .16cqw, transparent .16cqw 1.75cqw),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 .16cqw, transparent .16cqw .86cqw);
  border-radius: .3cqw; opacity: .9;
}

/* ---------- Boot / power ---------- */
.boot { position: absolute; inset: 0; background: #000; display: grid; place-items: center; z-index: 5; transition: opacity .4s; }
.boot-inner { display: grid; justify-items: center; gap: 7cqh; opacity: 0; transition: opacity .3s; }
.boot.logo .boot-inner { opacity: 1; }
.boot-wm { width: 42%; max-width: 420px; height: 6.5cqh; color: #fff; }
.ldr { width: 26%; max-width: 160px; height: 9px; border: 1px solid #6b6b6b; border-radius: 3px; overflow: hidden; position: relative; }
.ldr i {
  position: absolute; top: 1px; bottom: 1px; width: 36%;
  background: repeating-linear-gradient(90deg, #4b7cf7 0 25%, transparent 25% 33.3%);
  animation: ldr 1.1s linear infinite;
}
@keyframes ldr { from { left: -40%; } to { left: 110%; } }
.crt-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #dfe8ff; box-shadow: 0 0 12px 4px rgba(200,220,255,.9); opacity: 0; }
.crt.on .crt-line { animation: crton .55s ease-out forwards; }
@keyframes crton {
  0% { opacity: 1; transform: scaleX(0); } 35% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); }
}
.boot.done { opacity: 0; pointer-events: none; }
.crt.off .desktop { visibility: hidden; }
.crt.off .tube { animation: crtoff .45s ease-in forwards; }
@keyframes crtoff {
  0% { transform: scale(1, 1); filter: brightness(1); }
  55% { transform: scale(1, .006); filter: brightness(3); }
  100% { transform: scale(0, .006); filter: brightness(0); }
}
.crt.off .boot { opacity: 1; }
.crt.off .boot .boot-inner { opacity: 0; }

/* ---------- Windows XP desktop ---------- */
.desktop { position: absolute; inset: 0; overflow: clip; user-select: none; -webkit-user-select: none; cursor: default; }
.desktop.busy, .desktop.busy * { cursor: wait; }
.wallpaper {
  position: absolute; inset: 0;
  background: #3a7bd5 url(assets/xp-wallpaper.jpg) center / cover no-repeat;
}

.icons {
  position: absolute; top: 6px; left: 6px; bottom: 36px;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px 2px;
}
.icon {
  width: 76px; height: 72px; padding: 2px; border: 1px solid transparent; background: none;
  display: flex; flex-direction: column; align-items: center; color: #fff; cursor: pointer;
  font: 11px/1.2 Tahoma, Verdana, "Segoe UI", sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.7);
}
.icon:focus-visible { outline: none; }
.icon .ico { width: 32px; height: 32px; filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.45)); flex: none; }
.icon .label { margin-top: 3px; text-align: center; padding: 0 3px 1px; border-radius: 1px; }
.icon.selected .label, .icon:focus-visible .label { background: rgba(49,106,197,.78); outline: 1px dotted rgba(255,255,255,.75); outline-offset: -1px; }
.icon.selected .ico { opacity: .72; }
@container crt (max-height: 300px) {
  .icons { gap: 2px 0; top: 4px; left: 4px; }
  .icon { height: 62px; width: 70px; }
  .icon .ico { width: 28px; height: 28px; }
}

/* taskbar */
.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: stretch; z-index: 3;
  background: linear-gradient(to bottom, #3b7cf0 0%, #4a8df3 5%, #2a63d9 9%, #245edb 55%, #1f52c7 94%, #183f9f 100%);
  border-top: 1px solid #0d3ea8;
}
.start {
  display: flex; align-items: center; gap: 6px; padding: 0 16px 2px 9px; border: 0; margin-right: 3px; cursor: pointer;
  border-radius: 0 11px 11px 0; color: #fff; font: italic bold 16px/1 "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 2px rgba(0,0,0,.6);
  background: linear-gradient(to bottom, #4fa94f 0%, #2f8a2f 15%, #3faf3f 45%, #2f8a2f 80%, #1f6b1f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset -4px 0 6px rgba(0,0,0,.2), 2px 0 3px rgba(0,0,0,.25);
}
.start:hover, .start.open { filter: brightness(1.12); }
.start .flag { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.tasks { flex: 1; display: flex; gap: 3px; padding: 3px 4px; min-width: 0; overflow: hidden; }
.task {
  flex: 0 1 160px; min-width: 0; padding: 0 8px; border: 0; border-radius: 3px; display: flex; align-items: center; gap: 6px;
  background: linear-gradient(#5f94f2, #3b7bed 10%, #2f69e0 55%, #2460d6); color: #fff; font: 11px Tahoma, Verdana, sans-serif;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset -1px -1px 0 rgba(0,0,0,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task.active { background: linear-gradient(#1a46b3, #2b5fd2); box-shadow: inset 1px 1px 3px rgba(0,0,0,.55); }
.task svg { width: 16px; height: 16px; flex: none; }
.tray {
  display: flex; align-items: center; gap: 7px; padding: 0 10px 0 11px; color: #fff; font: 11px Tahoma, Verdana, sans-serif;
  background: linear-gradient(to bottom, #1b9bf8 0%, #22a7ff 6%, #0f8be9 32%, #0b7fd8 100%);
  border-left: 1px solid #0a62b9; box-shadow: inset 2px 0 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.tray-ico { width: 16px; height: 16px; flex: none; }
.tray-wx { display: flex; align-items: center; gap: 4px; border: 0; background: none; color: #fff; padding: 2px 3px; border-radius: 3px; cursor: pointer; }
.tray-wx:hover { background: rgba(255,255,255,.15); }
.wx-ico { width: 16px; height: 16px; display: inline-flex; }
.wx-ico svg { width: 16px; height: 16px; }
.clock { padding-left: 2px; white-space: nowrap; }
@container crt (max-width: 340px) {
  .tray-ico { display: none; }
  .start { padding: 0 12px 2px 8px; font-size: 15px; }
  .tray { gap: 5px; padding: 0 7px 0 8px; }
}

/* windows */
.windows { position: absolute; inset: 0 0 30px; pointer-events: none; z-index: 2; }
.win {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(360px, 88%); pointer-events: auto;
  background: #ece9d8; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); font: 11px Tahoma, Verdana, sans-serif; color: #000;
  animation: winin .18s ease-out;
}
@keyframes winin { from { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
.win .title {
  height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 5px 0 8px; color: #fff;
  font: bold 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 1px rgba(0,0,0,.55);
  background: linear-gradient(to bottom, #0a5fef 0%, #3d8bf8 8%, #0855e3 22%, #0e5fe9 60%, #0a4fd0 92%, #0845b8 100%);
}
.win .title svg { width: 16px; height: 16px; }
.win .title span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .close {
  width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; cursor: pointer; color: #fff; font: bold 14px/1 Tahoma, sans-serif;
  background: radial-gradient(circle at 35% 30%, #f0a28c, #d6563a 50%, #b73719); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.win .close:hover { filter: brightness(1.15); }
.win .body { padding: 12px 14px 14px; display: grid; gap: 10px; }
.win .row { display: flex; align-items: center; gap: 12px; }
.win .row svg { width: 32px; height: 32px; flex: none; }
.win .row p { margin: 0; line-height: 1.35; }
.win .status { color: #333; min-height: 1.3em; }
.progress { height: 16px; border: 1px solid #a7a6aa; background: #fff; box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); padding: 2px; }
.progress .bar {
  height: 100%; width: 0%;
  background: linear-gradient(to bottom, #a8f5a8 0%, #2fd12f 35%, #1fb51f 100%);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
}
.win .btns { display: flex; justify-content: flex-end; gap: 6px; }
.xpbtn {
  min-width: 72px; height: 23px; padding: 0 12px; cursor: pointer; border-radius: 3px; border: 1px solid #003c74; color: #000;
  background: linear-gradient(to bottom, #fff, #ecebe5 85%, #d6d2c2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); font: 11px Tahoma, Verdana, sans-serif;
}
.xpbtn:hover { box-shadow: inset 0 0 0 1px #ffe29a, inset 0 0 0 2px #f5c86b; }
.win .msg { display: flex; gap: 12px; align-items: flex-start; }
.win .msg svg { width: 32px; height: 32px; flex: none; }
.win .msg p { margin: 0; line-height: 1.4; }
.win .sys dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.win .sys dt { color: #444; }
.win .sys dd { margin: 0; }

/* start menu */
.startmenu {
  position: absolute; left: 0; bottom: 30px; width: min(300px, 94%); z-index: 4; background: #fff; border: 1px solid #0831d9; border-bottom: 0;
  border-radius: 6px 6px 0 0; overflow: hidden; box-shadow: 3px -3px 10px rgba(0,0,0,.35); font: 11px Tahoma, Verdana, sans-serif; color: #000;
  animation: smin .14s ease-out;
}
@keyframes smin { from { opacity: 0; transform: translateY(6px); } }
.sm-head {
  height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #fff; font: bold 14px "Trebuchet MS", Tahoma, sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5); border-bottom: 2px solid #f0a21b;
  background: linear-gradient(to bottom, #1c5ad8 0%, #3d85f5 40%, #1b56d4 100%);
}
.sm-avatar { width: 36px; height: 36px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.sm-body { padding: 6px 4px; display: grid; gap: 2px; background: #fff; }
.sm-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 2px; width: 100%;
}
.sm-item:hover, .sm-item:focus-visible { background: #316ac5; color: #fff; outline: none; }
.sm-item svg { width: 28px; height: 28px; flex: none; }
.sm-item span { display: grid; line-height: 1.25; }
.sm-item small { font-size: 10px; color: #6b6b6b; }
.sm-item:hover small { color: #dfe8ff; }
.sm-foot { height: 36px; display: flex; justify-content: flex-end; align-items: center; padding: 0 8px; background: linear-gradient(to bottom, #3b78e8, #2358cf); color: #fff; }
.sm-off { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: #fff; cursor: pointer; padding: 3px 6px; border-radius: 3px; }
.sm-off:hover { background: rgba(255,255,255,.18); }
.sm-off i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff9d8a, #e3462c 55%, #9e2410); position: relative; display: inline-block; }
.sm-off i::after { content: ""; position: absolute; left: 7px; top: 3px; width: 2px; height: 6px; background: #fff; border-radius: 1px; }

/* balloon tip */
.balloon {
  position: absolute; right: 6px; bottom: 44px; width: min(280px, calc(100% - 12px)); z-index: 4; padding: 8px 26px 9px 10px;
  background: #ffffe1; border: 1px solid #000; border-radius: 7px; box-shadow: 2px 3px 8px rgba(0,0,0,.35); font: 11px Tahoma, Verdana, sans-serif; color: #000;
  animation: smin .18s ease-out;
}
.balloon::after {
  content: ""; position: absolute; right: 22px; bottom: -12px; border: 6px solid transparent; border-top-color: #000; border-bottom: 0;
}
.balloon::before {
  content: ""; position: absolute; right: 23px; bottom: -10px; border: 5px solid transparent; border-top-color: #ffffe1; border-bottom: 0; z-index: 1;
}
.bl-close { position: absolute; right: 5px; top: 5px; width: 15px; height: 15px; border: 1px solid #666; background: #fff; font: bold 11px/1 Tahoma, sans-serif; cursor: pointer; padding: 0; }
.bl-title { font-weight: bold; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.bl-title::before { content: "i"; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #2b5fd2; color: #fff; font: bold 10px Georgia, serif; }
.bl-body { line-height: 1.4; }
.bl-body a { color: #0645ad; }

.noscript { position: absolute; inset: auto 0 0; display: flex; gap: 16px; justify-content: center; padding: 12px; background: #000; }
.noscript a { color: #fff; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 640px) {
  .cityglow { top: 18%; background: linear-gradient(to bottom, transparent 0%, rgba(255,150,70,.10) 50%, rgba(255,140,60,.28) 66%, rgba(255,130,60,.3) 100%); }
  .plant { width: 34vw; height: 36vh; bottom: 16%; left: -8vw; }
  .lamp { right: -2vw; height: 24vh; width: 16vw; }
  .mullions i { display: none; }
  .mullions b { top: 7%; }
  .ceiling { height: 8%; }
  .rig { bottom: 3svh; }
  .bezel { border-radius: 5cqw 5cqw 4cqw 4cqw; padding: 5cqw 6cqw 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud, .beacon, .ldr i { animation: none; }
}

/* ---------- intro curtain + office mode ---------- */
.curtain { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-items: center; transition: opacity 1.4s ease; }
.curtain.gone { opacity: 0; pointer-events: none; }
.curtain-inner { display: grid; justify-items: center; gap: 28px; width: min(72vw, 420px); }
.curtain-wm { width: 100%; height: 56px; color: #fff; opacity: .92; }
.curtain .ldr { width: 60%; max-width: 220px; height: 10px; border: 1px solid #5a5a5a; border-radius: 3px; overflow: hidden; position: relative; background: #0a0a0a; }
.curtain .ldr i { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 0%; animation: none; background: repeating-linear-gradient(90deg, #4b7cf7 0 7px, transparent 7px 9px); transition: width .3s ease; }
.curtain-msg { color: #9a9a9a; font: 12px Tahoma, Verdana, sans-serif; letter-spacing: .04em; min-height: 1.2em; }
.curtain-skip { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #666; font: 11px Tahoma, Verdana, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
body.nogl .curtain { display: none; }
/* the 3D room replaces the drawn interior */
body.office .mullions, body.office .ceiling, body.office .plant, body.office .lamp, body.office .desk, body.office .deskglow { display: none; }
body.office .glass { opacity: .55; }
body.office .vignette { background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.25) 85%, rgba(0,0,0,.55) 100%); }
body.gl .overlay .crt { will-change: transform; }
.skip-hint { position: fixed; right: 18px; bottom: 14px; z-index: 40; color: rgba(255,255,255,.55); font: 11px Tahoma, Verdana, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none; animation: hintin 1.2s ease 1.5s both; }
@keyframes hintin { from { opacity: 0; } to { opacity: 1; } }

/* ---------- debug switches (?noglass etc.) ---------- */
body.noglass .glass { display: none; }
body.noblend .glass::before, body.noblend .scanlines { mix-blend-mode: normal; }
body.noblur .photo-canvas { filter: none; transform: none; }
body.novig .vignette { display: none; }
body.noclouds .clouds, body.noclouds .overcast { display: none; }
body.nooverlay .overlay { display: none; }
body.noanim .overlay { transition: none; }
body.nofx .fx { display: none; }
html.noclip, html.noclip body { overflow: hidden; }
html.noclip .scene { overflow: hidden; }
body.nosun .sun, body.nosun .moon { display: none; }
body.nosky .sky { display: none; }
body.nostars .stars { display: none; }
body.nointerior .mullions, body.nointerior .ceiling, body.nointerior .plant, body.nointerior .lamp, body.nointerior .cityglow, body.nointerior .fog, body.nointerior .flash, body.nointerior .beacons { display: none; }