:root {
  --window-top: #3D3D3D;
  --window-bottom: #313131;
  --desktop-w: 1440px;
  --desktop-h: 900px;
  --menubar-h: 24px;
  --titlebar-h: 44px;
  --window-radius: 10px;
  --traffic-size: 12px;
  --traffic-gap: 8px;
  --dock-h: 64px;

  --bg-desktop: #000;
  /* One material for every Sonoma-like window.
     Do not recolor single windows anymore; tint only through content accents. */
  --glass-window-bg: rgba(66, 66, 64, 0.68);
  --glass-titlebar-bg: rgba(82, 82, 80, 0.56);
  --glass-panel-bg: rgba(66, 66, 64, 0.68);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-soft: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
  --glass-shadow-focus: 0 14px 34px rgba(0, 0, 0, 0.27), 0 0 0 1px rgba(255,255,255,.05) inset;
  --glass-blur: blur(44px) saturate(165%) brightness(0.96);

  --window-bg: var(--glass-window-bg);
  --titlebar-bg: var(--glass-titlebar-bg);

  --text-main: #f1f1f1;
  --text-muted: rgba(255, 255, 255, 0.64);
  --text-soft: rgba(255, 255, 255, 0.42);

  --accent: rgb(59, 130, 247);
  --accent-soft: rgba(59, 130, 247, 0.35);
  --accent-hover: rgba(59, 130, 247, 0.15);
  --accent-filter: brightness(0) saturate(100%) invert(49%) sepia(95%) saturate(1896%) hue-rotate(202deg) brightness(99%) contrast(96%);

  /* Single source of truth for every menu attached to the top bar.
     Keep this deliberately dense: the wallpaper may tint it, but content
     behind a menu must never remain legible through the material. */
  --top-menu-bg: rgba(72, 71, 76, 0.70);
  --top-menu-border: rgba(255, 255, 255, 0.17);
  --top-menu-shadow: 0 10px 26px rgba(0, 0, 0, 0.24), 0 1px 4px rgba(0, 0, 0, 0.16);
  --top-menu-filter: blur(38px) saturate(165%) brightness(0.94);

  --scroll-track: transparent;
  --scroll-thumb: rgba(59,130,247,0.86);
  --scroll-thumb-hover: rgba(59,130,247,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  background: var(--bg-desktop);
  -webkit-user-select: none;
  user-select: none;
}

input { -webkit-user-select: text; user-select: text; font-family: inherit; }
button { font-family: inherit; }
.no-select { -webkit-user-select: none; user-select: none; }
body.no-select { cursor: grabbing; }

#desktop {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--desktop-w);
  height: var(--desktop-h);
  overflow: hidden;
  background: url('../assets/images/desktop-garden.jpeg') center / cover no-repeat;
  transform-origin: top left;
}

#desktop:fullscreen,
#desktop:-webkit-full-screen {
  background: url('../assets/images/desktop-garden.jpeg') center / cover no-repeat;
}

/* Fullscreen can be entered on html or #desktop. Keep the fake OS clickable. */
:fullscreen #desktop,
:-webkit-full-screen #desktop {
  pointer-events: auto;
}

.system-note {
  position: absolute;
  right: 18px;
  bottom: 15px;
  color: rgba(255,255,255,.25);
  font-size: 10px;
  letter-spacing: .1px;
}