/* ============================================
   FRUTIGER AERO / Windows 7 Aero — interests zone ONLY
   Linked from interests.html + favourite-furbies.html.
   Scoped to body.aero-page / body.aero-realm.
   Do not import into css/style.css.
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.aero-page,
body.aero-realm {
  /* Authentic Win7 Aero palette */
  --aero-sky: #6eb8e8;
  --aero-sky-deep: #1e6fb0;
  --aero-aqua: #4ec8d8;
  --aero-leaf: #7ecf8a;
  --aero-glass: rgba(180, 210, 235, 0.38);
  --aero-glass-edge: rgba(255, 255, 255, 0.72);
  --aero-ink: #1a1a1a;
  --aero-ink-soft: #3b4a56;
  --aero-link: #0066cc;
  --aero-glow: #fff8dc;
  --aero-orb: #3aa0e8;
  --aero-titlebar-top: rgba(210, 230, 250, 0.55);
  --aero-titlebar-bot: rgba(120, 170, 215, 0.45);
  --aero-radius: 8px;
  --aero-font: "Segoe UI", "Segoe UI Semilight", Tahoma, Geneva, Verdana, sans-serif;
  --aero-display: "Segoe UI", Tahoma, Geneva, sans-serif;
  --aero-content-bg: #ffffff;
  --aero-sidebar-bg: linear-gradient(180deg, #e8f2fa 0%, #d6e8f5 55%, #c8dff0 100%);
  --aero-frame-glow: rgba(100, 180, 240, 0.55);
}

body.aero-page,
body.aero-realm,
body.aero-page.theme-clown,
body.aero-page.theme-cookie,
body.aero-page.theme-midnight,
body.aero-page.theme-bubblegum,
body.aero-page.theme-sky,
body.aero-page.theme-berry,
body.aero-page.theme-enclave,
body.aero-page.theme-forest {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--aero-font);
  font-size: 13px;
  line-height: 1.45;
  color: var(--aero-ink);
  /* Real Win7 Harmony wallpaper crop */
  background-color: #1a6cb8 !important;
  background-image: url("../img/aero/wallpaper-harmony.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  /* Real Win7 Aero cursors from Joanna's pack */
  cursor: url("../cursors/aero/normal.cur"), auto;
  overflow-x: hidden;
  isolation: auto;
  position: relative;
  padding-bottom: 48px;
}

body.aero-page a,
body.aero-realm a,
body.aero-page button,
body.aero-realm button {
  cursor: url("../cursors/aero/link.cur"), pointer;
}

body.aero-page.aero-booting {
  overflow: hidden;
}

body.aero-page.aero-booting .aero-desktop {
  visibility: hidden;
  pointer-events: none;
}

body.aero-page.aero-booted .aero-desktop {
  visibility: visible;
  pointer-events: auto;
  animation: aero-desktop-in 0.45s ease-out;
}

@keyframes aero-desktop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Bokeh particles + soft cloud haze over wallpaper.
   Must beat css/style.css body::before (clown tile) + the aero kill-switch. */
body.aero-page::before,
body.aero-realm::before {
  content: "" !important;
  display: block !important;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  filter: none !important;
  background:
    radial-gradient(circle 3px at 12% 28%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(circle 2px at 28% 42%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(circle 4px at 48% 18%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(circle 2px at 62% 35%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(circle 3px at 78% 48%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(circle 2px at 88% 22%, rgba(255, 255, 255, 0.8), transparent 70%),
    radial-gradient(circle 5px at 35% 65%, rgba(200, 240, 255, 0.35), transparent 70%),
    radial-gradient(circle 3px at 70% 72%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 220px 90px at 20% 88%, rgba(255, 255, 255, 0.28), transparent 70%),
    radial-gradient(ellipse 280px 100px at 65% 92%, rgba(180, 230, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 180px 70px at 90% 82%, rgba(255, 255, 255, 0.2), transparent 70%) !important;
  background-color: transparent !important;
  opacity: 1;
  animation: aero-bokeh-drift 18s ease-in-out infinite alternate;
}

@keyframes aero-bokeh-drift {
  from {
    transform: translateY(0);
    opacity: 0.85;
  }
  to {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* Soft lens flare (Frutiger Aero staple) */
body.aero-page::after,
body.aero-realm::after {
  content: "";
  position: fixed;
  top: 6%;
  right: 14%;
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, transparent 32%),
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255, 255, 220, 0.5) 2deg,
      transparent 7deg,
      transparent 88deg,
      rgba(255, 255, 220, 0.38) 90deg,
      transparent 95deg,
      transparent 178deg,
      rgba(255, 255, 220, 0.42) 180deg,
      transparent 185deg,
      transparent 268deg,
      rgba(255, 255, 220, 0.32) 270deg,
      transparent 275deg
    );
  filter: blur(0.4px);
  animation: aero-flare-pulse 7s ease-in-out infinite;
  opacity: 0.65;
}

@keyframes aero-flare-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.92) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.06) rotate(10deg);
  }
}

.aero-desktop {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

/* —— Classic Win7 desktop icons (left column) —— */
.aero-desk-icons {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 76px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

/* Maximized app covers the desk — hide icons (incl. Exit) like real Win7 */
.aero-desktop.is-window-maximized .aero-desk-icons,
.aero-desktop.is-window-maximized .aero-desk-icon--exit {
  visibility: hidden;
  pointer-events: none;
}

.aero-desk-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  padding: 4px 2px;
  border-radius: 3px;
  text-decoration: none;
  color: #fff !important;
  text-align: center;
  text-shadow:
    0 0 3px rgba(0, 30, 60, 0.95),
    0 1px 2px rgba(0, 20, 50, 0.9),
    1px 1px 0 rgba(0, 20, 50, 0.55);
  font-family: var(--aero-font);
  font-size: 11px;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: url("../cursors/aero/link.cur"), pointer;
}

.aero-desk-icon span {
  display: block;
  max-width: 70px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  color: #fff !important;
  text-shadow:
    0 0 3px rgba(0, 30, 60, 0.95),
    0 1px 2px rgba(0, 20, 50, 0.9),
    1px 1px 0 rgba(0, 20, 50, 0.55);
}

.aero-desk-icon:hover,
.aero-desk-icon:focus-visible {
  background: rgba(180, 220, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

.aero-desk-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 20, 50, 0.45));
  pointer-events: none;
}

/* Exit (was Recycle Bin) — top-right, clear of a11y FAB (bottom-right) + version badge (top-left) */
.aero-desk-icon--exit {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  bottom: auto;
  z-index: 2;
  width: 80px;
}

.aero-desk-icon--exit img {
  width: 56px;
  height: 40px;
  object-fit: contain;
}

.aero-wrap {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1rem 1.5rem;
  /* Leave room for desktop icons on wide screens */
  padding-left: max(1rem, 92px);
}

/*
  Phones: desk icons pile on the window (Exit covers close, IE floats on chrome).
  Hide the desktop icon column — Start menu + taskbar + in-window nav stay.
  Content window goes nearly full-bleed above the taskbar (Win7 maximized vibe).
*/
@media (max-width: 720px) {
  .aero-desk-icons,
  .aero-desk-icon--exit {
    display: none !important;
  }

  .aero-wrap {
    padding: 0;
    max-width: none;
    min-height: calc(100dvh - 48px);
  }

  .aero-wrap.is-window-floating {
    min-height: calc(100dvh - 48px);
  }

  /* Force phone layout to maximized-window chrome (JS also auto-maxes) */
  .aero-window,
  .aero-window.is-floating,
  .aero-window.is-maximized {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(100vh - 48px) !important;
    height: calc(100dvh - 48px) !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 40;
  }

  .aero-window .aero-chrome,
  .aero-window.is-floating .aero-chrome,
  .aero-window.is-maximized .aero-chrome {
    max-height: calc(100vh - 48px - 32px);
    max-height: calc(100dvh - 48px - 32px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Already full-bleed — restore glyph would lie; keep max as visual only */
  .aero-win-btn--max {
    pointer-events: none;
    opacity: 0.55;
  }

  body.aero-page .site-version-badge,
  body.aero-realm .site-version-badge {
    top: max(6px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    z-index: 50;
    font-size: 10px;
    padding: 2px 6px;
  }
}

.aero-wrap.is-window-floating {
  /* Window is position:fixed — keep wrap from collapsing layout oddly.
     Raise above desk icons (z-index 2) so Exit can't cover titlebar buttons. */
  z-index: 40;
  min-height: 40vh;
  pointer-events: none;
}

.aero-wrap.is-window-floating .aero-window {
  pointer-events: auto;
}

/* —— Win7 Aero window —— */
.aero-window {
  position: relative;
  border-radius: 8px 8px 4px 4px;
  overflow: hidden;
  /* frosted glass frame — wallpaper shows through */
  background:
    linear-gradient(
      180deg,
      rgba(200, 225, 245, 0.42) 0%,
      rgba(160, 200, 235, 0.32) 40%,
      rgba(140, 185, 225, 0.38) 100%
    );
  backdrop-filter: blur(22px) saturate(1.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(40, 100, 160, 0.35),
    0 0 1px 1px rgba(255, 255, 255, 0.35) inset,
    0 0 28px var(--aero-frame-glow),
    0 14px 42px rgba(10, 40, 80, 0.45),
    0 2px 8px rgba(10, 40, 80, 0.3);
  animation: aero-window-in 0.55s ease-out;
}

/* Specular sheen stripes across the glass frame */
.aero-window::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 28%,
      rgba(255, 255, 255, 0.12) 32%,
      rgba(255, 255, 255, 0.22) 36%,
      transparent 42%,
      transparent 58%,
      rgba(255, 255, 255, 0.08) 62%,
      transparent 68%
    );
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

/* Soft outer glow ring */
.aero-window::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px 10px 5px 5px;
  pointer-events: none;
  z-index: -1;
  background: transparent;
  box-shadow:
    0 0 18px rgba(120, 200, 255, 0.45),
    0 0 40px rgba(80, 160, 230, 0.25);
}

@keyframes aero-window-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.aero-window.is-floating {
  position: fixed;
  z-index: 40;
  margin: 0;
  max-width: min(960px, calc(100vw - 16px));
  max-height: calc(100vh - 56px);
  width: min(960px, calc(100vw - 16px));
  overflow: hidden;
}

.aero-window.is-floating .aero-chrome {
  max-height: calc(100vh - 56px - 42px);
  overflow: auto;
}

.aero-window.is-dragging {
  user-select: none;
  cursor: url("../cursors/aero/move.cur"), grabbing;
}

.aero-window.is-maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: calc(100vh - 48px) !important;
  height: calc(100dvh - 48px) !important;
  max-height: none !important;
  border-radius: 0;
}

.aero-window.is-maximized .aero-chrome {
  max-height: calc(100vh - 48px - 32px);
  max-height: calc(100dvh - 48px - 32px);
}

/* —— Title bar (frosted glass) —— */
.aero-titlebar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 5px 5px 5px 10px;
  min-height: 30px;
  cursor: url("../cursors/aero/move.cur"), move;
  touch-action: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(220, 235, 250, 0.28) 18%,
      rgba(170, 205, 235, 0.22) 55%,
      rgba(130, 180, 220, 0.32) 100%
    );
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(40, 90, 140, 0.15);
  color: #0a2030;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Glossy diagonal highlight on titlebar */
.aero-titlebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255, 255, 255, 0.35) 35%,
      rgba(255, 255, 255, 0.08) 42%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.45) 0%,
      transparent 45%
    );
  opacity: 0.9;
}

.aero-titlebar-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--aero-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aero-titlebar-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  background: transparent;
  box-shadow: none;
  border: none;
}

img.aero-titlebar-icon {
  width: 16px;
  height: 16px;
}

.aero-win-controls {
  position: relative;
  display: flex;
  gap: 0;
  flex-shrink: 0;
  align-items: stretch;
}

.aero-win-btn {
  position: relative;
  width: 28px;
  height: 20px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-left-color: rgba(255, 255, 255, 0.55);
  border-right-color: rgba(40, 90, 140, 0.25);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(200, 225, 245, 0.35) 40%,
      rgba(150, 190, 225, 0.4) 100%
    );
  color: rgba(20, 50, 80, 0.85);
  /* CSS glyphs only — never rely on Unicode squares (mojibake risk) */
  font-size: 0;
  line-height: 0;
  display: grid;
  place-items: center;
  cursor: default;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(40, 80, 120, 0.12);
  pointer-events: auto;
  overflow: hidden;
}

.aero-win-btn:first-child {
  border-radius: 0 0 0 0;
}

.aero-win-btn.is-close {
  width: 46px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(80, 0, 0, 0.55);
  border-color: rgba(180, 40, 40, 0.55);
  border-right-color: rgba(120, 20, 20, 0.45);
  background:
    linear-gradient(
      180deg,
      #f8a8a0 0%,
      #e06050 18%,
      #c02820 55%,
      #a01818 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 210, 0.85),
    inset 0 -1px 0 rgba(60, 0, 0, 0.25),
    0 0 6px rgba(200, 40, 40, 0.35);
}

.aero-win-btn.is-close::after {
  content: none;
}

button.aero-win-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Min / max / restore / close — pure CSS (no Unicode) */
.aero-win-btn--min::before {
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  margin-top: 5px;
  background: currentColor;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.aero-win-btn--max::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-top-width: 2.5px;
  box-sizing: border-box;
  background: transparent;
}

/* Win7 restore: two overlapping squares */
.aero-win-btn--max.is-restore::before,
.aero-win-btn--max.is-restore::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-top-width: 2px;
  box-sizing: border-box;
  background: rgba(210, 230, 250, 0.92);
}

.aero-win-btn--max.is-restore::before {
  top: 3px;
  right: 6px;
  display: block;
  margin: 0;
  box-shadow: none;
}

.aero-win-btn--max.is-restore::after {
  top: 6px;
  left: 7px;
}

.aero-win-btn.is-close {
  text-shadow: none;
}

.aero-win-btn.is-close::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(
      45deg,
      transparent 0 42%,
      currentColor 42% 58%,
      transparent 58% 100%
    ),
    linear-gradient(
      -45deg,
      transparent 0 42%,
      currentColor 42% 58%,
      transparent 58% 100%
    );
  background-repeat: no-repeat;
}

.aero-win-btn:hover {
  filter: brightness(1.06);
}

.aero-win-btn:active {
  filter: brightness(0.96);
}

/* —— Inner chrome: toolbar + body —— */
.aero-chrome {
  position: relative;
  z-index: 1;
  margin: 0 6px 6px;
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  background: var(--aero-content-bg);
  border: 1px solid rgba(80, 120, 160, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Address / breadcrumb toolbar (Win7 style) */
.aero-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background:
    linear-gradient(180deg, #f7fafc 0%, #e8eef4 100%);
  border-bottom: 1px solid rgba(160, 180, 200, 0.65);
  box-shadow: inset 0 1px 0 #fff;
}

.aero-nav-orbs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.aero-nav-orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95) 0%, transparent 40%),
    linear-gradient(180deg, #7ec8f0 0%, #2a7ec0 55%, #1a5a98 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 2px 4px rgba(20, 60, 100, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 4px rgba(10, 50, 90, 0.25);
  text-shadow: 0 1px 1px rgba(0, 40, 80, 0.45);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.aero-nav-orb:hover,
.aero-nav-orb:focus-visible {
  filter: brightness(1.12);
  transform: scale(1.05);
  outline: none;
}

.aero-nav-orb:focus-visible {
  outline: 2px solid #1e6fb0;
  outline-offset: 2px;
}

.aero-nav-orb.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.35);
}

.aero-breadcrumb {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 4px 10px;
  min-height: 28px;
  font-size: 12px;
  color: #2a3a48;
  background:
    linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
  border: 1px solid rgba(140, 165, 190, 0.75);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 2px rgba(40, 80, 120, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.8);
}

.aero-breadcrumb a {
  color: var(--aero-link);
  text-decoration: none;
  padding: 0 2px;
}

.aero-breadcrumb a:hover {
  text-decoration: underline;
}

.aero-breadcrumb .aero-crumb-sep {
  color: #7a8a98;
  padding: 0 4px;
  user-select: none;
}

.aero-breadcrumb .aero-crumb-current {
  color: #1a1a1a;
  font-weight: 600;
}

/* Body: sidebar + content */
.aero-body {
  display: grid;
  grid-template-columns: minmax(148px, 180px) minmax(0, 1fr);
  min-height: 280px;
}

.aero-sidebar {
  padding: 12px 14px 16px;
  background: var(--aero-sidebar-bg);
  border-right: 1px solid rgba(160, 185, 210, 0.7);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.5);
}

.aero-sidebar h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: #1a4a70;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aero-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aero-sidebar li {
  margin: 0 0 2px;
}

.aero-sidebar a {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 2px;
  color: var(--aero-link);
  text-decoration: none;
  font-size: 12px;
}

.aero-sidebar a:hover {
  background: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
}

.aero-sidebar a.is-active {
  background: rgba(255, 255, 255, 0.7);
  color: #0a3a60;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(120, 170, 210, 0.45);
}

.aero-sidebar .aero-side-note {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(140, 170, 200, 0.45);
  font-size: 11px;
  color: #4a6070;
  line-height: 1.4;
}

/* Main content (opaque white like Control Panel) */
.aero-content {
  padding: 14px 18px 20px;
  background: var(--aero-content-bg);
  color: var(--aero-ink);
}

.aero-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a7080;
}

.aero-hero-title {
  margin: 0 0 8px;
  font-family: var(--aero-display);
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  font-weight: 600;
  color: #0a3050;
  letter-spacing: -0.01em;
  text-shadow: none;
}

.aero-lead {
  margin: 0 0 1rem;
  max-width: 40rem;
  color: var(--aero-ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* Glossy theme-preview style tiles (like Personalization stacks) */
.aero-orb-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.aero-orb-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 12px 14px;
  text-decoration: none;
  color: var(--aero-ink);
  border-radius: 4px;
  background:
    linear-gradient(180deg, #ffffff 0%, #e8f4fc 55%, #d0e8f5 100%);
  border: 1px solid rgba(140, 175, 210, 0.65);
  box-shadow:
    0 2px 6px rgba(30, 70, 120, 0.18),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(100, 160, 200, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}

/* Glass overlay sheen on tiles */
.aero-orb-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), transparent);
  pointer-events: none;
  border-radius: 4px 4px 0 0;
}

.aero-orb-link:hover,
.aero-orb-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(60, 140, 200, 0.75);
  box-shadow:
    0 6px 16px rgba(30, 80, 140, 0.28),
    inset 0 1px 0 #fff,
    0 0 12px rgba(100, 200, 255, 0.35);
  outline: none;
}

.aero-orb-link:focus-visible {
  outline: 2px solid #1e6fb0;
  outline-offset: 2px;
}

.aero-orb-emoji {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0%, transparent 42%),
    linear-gradient(180deg, #a8e0ff 0%, #4aa8e0 60%, #2a78b8 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 2px 6px rgba(30, 80, 130, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 1px 2px rgba(40, 100, 150, 0.2));
  margin-bottom: 2px;
}

.aero-orb-link strong {
  position: relative;
  z-index: 1;
  font-family: var(--aero-display);
  font-size: 13px;
  font-weight: 600;
  color: #0a3a60;
}

.aero-orb-link > span:not(.aero-orb-emoji) {
  position: relative;
  z-index: 1;
  font-size: 11px;
  color: #4a6070;
  line-height: 1.35;
}

.aero-panel {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f8fbfe 0%, #eef5fa 100%);
  border: 1px solid rgba(160, 185, 210, 0.55);
  box-shadow: inset 0 1px 0 #fff;
}

.aero-panel h2 {
  margin: 0 0 6px;
  font-family: var(--aero-display);
  font-size: 13px;
  font-weight: 600;
  color: #0a3a60;
}

.aero-panel p {
  margin: 0 0 8px;
  color: var(--aero-ink-soft);
  font-size: 12px;
}

.aero-panel p:last-child {
  margin-bottom: 0;
}

.aero-panel code {
  font-size: 0.92em;
  padding: 0.1em 0.3em;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(160, 185, 210, 0.55);
  font-family: Consolas, "Courier New", monospace;
}

/* Pill subnav kept as secondary (mobile / fallback) */
.aero-subnav {
  display: none;
}

.aero-exit {
  margin: 16px 0 0;
  text-align: left;
  font-size: 12px;
}

.aero-exit a {
  color: var(--aero-link);
  font-weight: 600;
  text-decoration: none;
}

.aero-exit a:hover {
  text-decoration: underline;
}

/* —— Furby gallery —— */
.furby-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 12px 0 8px;
  list-style: none;
  padding: 0;
}

.furby-card {
  margin: 0;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #e8f4fc 100%);
  border: 1px solid rgba(140, 175, 210, 0.65);
  box-shadow:
    0 3px 10px rgba(30, 70, 120, 0.16),
    inset 0 1px 0 #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.furby-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 20px rgba(30, 80, 140, 0.26),
    0 0 14px rgba(120, 210, 255, 0.35);
}

.furby-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: linear-gradient(145deg, #b8e8ff, #e8fff4);
}

.furby-card figcaption {
  padding: 6px 8px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #0a3a60;
  line-height: 1.35;
}

.furby-card .furby-note {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: #5a7080;
}

.aero-hint {
  margin-top: 12px;
  font-size: 12px;
  color: #5a7080;
}

.aero-hint code {
  font-size: 0.92em;
  padding: 0.1em 0.3em;
  border-radius: 2px;
  background: #f0f6fa;
  border: 1px solid rgba(160, 185, 210, 0.55);
  font-family: Consolas, "Courier New", monospace;
}

/* —— Exact Win7 Aero glass taskbar —— */
.aero-taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above Aero windows + IE (120) so pins/Start stay usable */
  z-index: 130;
  display: flex;
  align-items: stretch;
  height: 40px;
  padding: 0 0 0 0;
  overflow: visible;
  background:
    linear-gradient(
      180deg,
      rgba(220, 235, 250, 0.55) 0%,
      rgba(90, 140, 190, 0.38) 8%,
      rgba(25, 55, 100, 0.62) 28%,
      rgba(12, 35, 75, 0.78) 70%,
      rgba(8, 25, 55, 0.88) 100%
    );
  backdrop-filter: blur(18px) saturate(1.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 20, 50, 0.35),
    0 -2px 18px rgba(5, 25, 55, 0.4);
}

.aero-start {
  position: relative;
  align-self: center;
  /* Orb sits INSIDE the 40px taskbar (small peek only) */
  width: 38px;
  height: 40px;
  margin: 0 6px 0 4px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  background: transparent;
  display: block;
  overflow: visible;
  cursor: url("../cursors/aero/link.cur"), pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 20, 50, 0.45));
  transition: filter 0.12s ease;
  z-index: 2;
}

.aero-start:hover,
.aero-start:focus-visible {
  filter: drop-shadow(0 2px 4px rgba(0, 20, 50, 0.5));
  outline: none;
}

.aero-start:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.aero-start[aria-expanded="true"] {
  filter: drop-shadow(0 0 8px rgba(120, 200, 255, 0.55));
}

.aero-start-orb-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 36px on 40px bar — fits in the taskbar */
  width: 36px;
  height: 36px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  display: block;
  max-width: 36px;
  max-height: 36px;
  transition: opacity 0.08s ease;
}

.aero-start-orb-img--hover {
  opacity: 0;
}

.aero-start:hover .aero-start-orb-img--normal,
.aero-start:focus-visible .aero-start-orb-img--normal,
.aero-start[aria-expanded="true"] .aero-start-orb-img--normal {
  opacity: 0;
}

.aero-start:hover .aero-start-orb-img--hover,
.aero-start:focus-visible .aero-start-orb-img--hover,
.aero-start[aria-expanded="true"] .aero-start-orb-img--hover {
  opacity: 1;
}

.aero-task-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding: 3px 4px 3px 2px;
  overflow-x: auto;
}

.aero-task-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 170px;
  height: 34px;
  padding: 0 10px 0 6px;
  border-radius: 3px;
  text-decoration: none;
  color: #f4f8fc;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--aero-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(160, 200, 235, 0.12) 35%,
      rgba(40, 90, 150, 0.28) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 30, 60, 0.2),
    0 1px 2px rgba(0, 15, 40, 0.25);
  text-shadow: 0 1px 1px rgba(0, 25, 55, 0.65);
}

.aero-task-btn.is-active {
  background:
    linear-gradient(
      180deg,
      rgba(230, 245, 255, 0.55) 0%,
      rgba(140, 200, 245, 0.42) 40%,
      rgba(50, 130, 200, 0.5) 100%
    );
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 14px rgba(100, 190, 255, 0.45),
    0 1px 2px rgba(0, 15, 40, 0.25);
}

.aero-task-btn:hover {
  filter: brightness(1.1);
}

.aero-task-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 0;
  object-fit: contain;
  display: block;
  background: transparent;
  box-shadow: none;
}

img.aero-task-ico {
  width: 16px;
  height: 16px;
}

.aero-task-pin {
  width: 48px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: url("../cursors/aero/link.cur"), pointer;
  /* Win7 frosted pin button chrome */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(160, 200, 235, 0.1) 40%,
      rgba(40, 90, 150, 0.22) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 30, 60, 0.18),
    0 1px 2px rgba(0, 15, 40, 0.2);
}

.aero-task-pin:hover,
.aero-task-pin:focus-visible {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(180, 215, 245, 0.2) 40%,
      rgba(50, 110, 180, 0.32) 100%
    );
  border-color: rgba(255, 255, 255, 0.42);
  outline: none;
}

.aero-task-pin img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 15, 40, 0.55));
  pointer-events: none;
}

/* WMP asset has extra chrome/padding — scale up to match neighbors */
.aero-task-pin img[src*="media-player"] {
  width: 32px;
  height: 32px;
}

.aero-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 0 6px 0 10px;
  margin: 2px 0;
  color: #f0f6fa;
  font-size: 12px;
  font-weight: 400;
  text-shadow: 0 1px 1px rgba(0, 20, 50, 0.55);
  background: rgba(255, 255, 255, 0.06);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
}

.aero-tray-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.aero-tray-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #e8f2fa;
  font-size: 11px;
  line-height: 1;
  cursor: url("../cursors/aero/link.cur"), pointer;
  text-shadow: 0 1px 1px rgba(0, 20, 50, 0.65);
  opacity: 0.95;
}

.aero-tray-chevron:hover,
.aero-tray-chevron:focus-visible {
  opacity: 1;
  filter: brightness(1.15);
  outline: none;
}

.aero-tray-icons img,
.aero-tray-ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  opacity: 0.98;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}

.aero-tray-flag,
.aero-tray-net,
.aero-tray-vol {
  display: none;
}

.aero-tray-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  padding: 0 8px;
  min-width: 74px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.aero-tray-clock span {
  display: block;
  white-space: nowrap;
}

.aero-show-desktop {
  width: 10px;
  flex-shrink: 0;
  align-self: stretch;
  margin: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(40, 80, 130, 0.25));
  text-decoration: none;
}

.aero-show-desktop:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Hide old page-hop on aero pages — breadcrumbs + nav orbs replace it */
.aero-page .page-hop,
.aero-realm .page-hop {
  display: none !important;
}

/* Version badge — glassy, stays out of the way */
body.aero-page .site-version-badge,
body.aero-realm .site-version-badge {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(160, 210, 240, 0.65));
  border-color: rgba(255, 255, 255, 0.8);
  color: #0a3a60;
  box-shadow: 0 2px 8px rgba(20, 70, 120, 0.25), inset 0 1px 0 #fff;
  text-shadow: none;
}

/* Accessibility — icon-only FAB (no clowncore yellow pill / no black label text) */
body.aero-page .site-a11y,
body.aero-realm .site-a11y {
  top: auto !important;
  left: auto !important;
  right: max(0.7rem, env(safe-area-inset-right)) !important;
  bottom: calc(40px + 0.7rem) !important;
  z-index: 90;
}

body.aero-page .site-a11y__trigger,
body.aero-realm .site-a11y__trigger {
  width: 2.6rem !important;
  height: 2.6rem !important;
  min-width: 2.6rem !important;
  min-height: 2.6rem !important;
  padding: 0.35rem !important;
  gap: 0 !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(170, 215, 245, 0.85)) !important;
  border: 1px solid rgba(30, 90, 140, 0.55) !important;
  box-shadow: 0 2px 8px rgba(10, 50, 90, 0.28), inset 0 1px 0 #fff !important;
  color: transparent !important;
  font-size: 0 !important;
  font-family: var(--aero-font) !important;
}

body.aero-page .site-a11y.is-open .site-a11y__trigger,
body.aero-realm .site-a11y.is-open .site-a11y__trigger {
  background: linear-gradient(180deg, #d8f0ff, #7eb8e8) !important;
}

body.aero-page .site-a11y__trigger-text,
body.aero-realm .site-a11y__trigger-text {
  display: none !important;
}

body.aero-page .site-a11y__icon,
body.aero-realm .site-a11y__icon {
  width: 1.4rem;
  height: 1.4rem;
}

body.aero-page .site-a11y__panel,
body.aero-realm .site-a11y__panel {
  top: auto;
  bottom: calc(100% + 0.45rem);
  left: auto;
  right: 0;
  width: min(17.5rem, calc(100vw - 1.4rem));
}

@media (max-width: 640px) {
  .aero-wrap {
    /* Phone full-bleed handled at 720px; keep body/sidebar rules below */
    padding: 0;
  }

  .aero-body {
    grid-template-columns: 1fr;
  }

  .aero-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(160, 185, 210, 0.7);
    padding: 10px 12px;
  }

  .aero-sidebar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .aero-sidebar .aero-side-note {
    display: none;
  }

  .aero-chrome {
    margin: 0 4px 4px;
  }

  .aero-content {
    padding: 12px 12px 16px;
  }

  .aero-titlebar-label {
    font-size: 11px;
  }

  .aero-win-btn {
    width: 24px;
    height: 18px;
  }

  .aero-win-btn.is-close {
    width: 36px;
  }

  .aero-task-label {
    display: none;
  }

  .aero-task-btn {
    max-width: 44px;
    padding: 0 8px;
    justify-content: center;
  }

  .aero-tray-icons img {
    width: 16px;
    height: 16px;
  }

  .aero-tray {
    font-size: 11px;
    padding: 0 4px;
    gap: 5px;
  }

  .aero-tray-clock {
    font-size: 11px;
    min-width: 64px;
    padding: 0 4px;
  }

  .aero-start-menu {
    width: min(100vw - 8px, 420px);
    max-height: min(70vh, 520px);
  }

  .aero-start-menu-frame {
    grid-template-columns: 1fr minmax(120px, 38%);
  }

  .aero-boot-welcome {
    font-size: 1.65rem;
  }

  body.aero-page::after,
  body.aero-realm::after {
    width: 70px;
    height: 70px;
    top: 4%;
    right: 6%;
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aero-window,
  .furby-card,
  .aero-orb-link,
  .aero-start,
  .aero-boot-ring,
  body.aero-page.aero-booted .aero-desktop,
  body.aero-page::before,
  body.aero-realm::before,
  body.aero-page::after,
  body.aero-realm::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   Welcome / boot splash (exact Win7 vibe)
   ============================================ */
.aero-boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a3a78;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.aero-boot[hidden] {
  display: none !important;
}

.aero-boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.aero-boot-bg {
  position: absolute;
  inset: 0;
  /* Clean Harmony wallpaper (no baked Welcome chrome) + soft blue wash */
  background:
    linear-gradient(
      135deg,
      rgba(10, 58, 120, 0.22) 0%,
      rgba(26, 122, 184, 0.08) 45%,
      rgba(78, 200, 232, 0.05) 100%
    ),
    url("../img/aero/wallpaper-harmony.jpg") center / cover no-repeat,
    linear-gradient(135deg, #0a3a78 0%, #1a7ab8 45%, #4ec8e8 100%);
}

.aero-boot-center {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: -6vh;
}

.aero-boot-welcome {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 30, 60, 0.35);
}

/* Win7 spinning glow ring */
.aero-boot-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(180, 230, 255, 0.15) 40deg,
      rgba(220, 245, 255, 0.95) 90deg,
      rgba(140, 210, 255, 0.35) 140deg,
      transparent 180deg,
      transparent 360deg
    );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 4px rgba(160, 220, 255, 0.85));
  animation: aero-boot-spin 1.05s linear infinite;
}

@keyframes aero-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

.aero-boot-brand {
  position: absolute;
  z-index: 1;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.95;
}

.aero-boot-flag {
  width: 28px;
  height: 28px;
  background:
    linear-gradient(90deg, #e06040 0 50%, #70c050 50% 100%) top / 100% 50% no-repeat,
    linear-gradient(90deg, #50a0e8 0 50%, #e0c040 50% 100%) bottom / 100% 50% no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 20, 50, 0.4));
  transform: skewX(-8deg);
}

.aero-boot-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-size: 13px;
}

.aero-boot-brand-text strong {
  font-weight: 600;
  font-size: 15px;
}

.aero-boot-brand-text em {
  font-style: normal;
  font-weight: 300;
  opacity: 0.9;
}

.aero-boot-click {
  position: absolute;
  z-index: 2;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.55rem 1rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(20, 60, 110, 0.55);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  cursor: url("../cursors/aero/link.cur"), pointer;
  backdrop-filter: blur(8px);
}

.aero-boot-click[hidden] {
  display: none !important;
}

/* ============================================
   Win7 Start menu
   ============================================ */
.aero-start-menu {
  position: fixed;
  left: 4px;
  bottom: 42px;
  /* Above taskbar + IE so Start never opens behind a browser window */
  z-index: 140;
  width: min(420px, calc(100vw - 12px));
  max-height: min(560px, calc(100vh - 56px));
  filter: drop-shadow(0 8px 28px rgba(0, 20, 50, 0.55));
}

.aero-start-menu[hidden] {
  display: none !important;
}

.aero-start-menu-frame {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  height: 100%;
  max-height: inherit;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(
      180deg,
      rgba(200, 220, 240, 0.35) 0%,
      rgba(120, 160, 200, 0.22) 100%
    );
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  box-shadow:
    0 0 0 1px rgba(30, 70, 120, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.aero-start-left {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%);
  border-right: 1px solid rgba(120, 150, 180, 0.35);
  min-height: 320px;
}

.aero-start-programs {
  list-style: none;
  margin: 0;
  padding: 6px 4px;
  flex: 1;
  overflow-y: auto;
}

.aero-start-programs a,
.aero-start-programs button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: #1a1a1a;
  text-decoration: none;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: url("../cursors/aero/link.cur"), pointer;
}

.aero-start-programs a:hover,
.aero-start-programs a:focus-visible,
.aero-start-programs button:hover,
.aero-start-programs button:focus-visible {
  background: linear-gradient(180deg, #fff0c8 0%, #ffd078 55%, #f0b050 100%);
  outline: none;
}

.aero-start-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 0;
  object-fit: contain;
  display: block;
  background: transparent;
  box-shadow: none;
}

img.aero-start-ico {
  width: 22px;
  height: 22px;
}

.aero-start-right > a {
  position: relative;
}

.aero-start-right > a::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.aero-start-right > a[data-ico="user"]::before {
  background-image: url("../img/aero/icons/user-32.png");
}
.aero-start-right > a[data-ico="documents"]::before {
  background-image: url("../img/aero/icons/documents-32.png");
}
.aero-start-right > a[data-ico="pictures"]::before {
  background-image: url("../img/aero/icons/pictures-32.png");
}
.aero-start-right > a[data-ico="music"]::before {
  background-image: url("../img/aero/icons/music-32.png");
}
.aero-start-right > a[data-ico="games"]::before {
  background-image: url("../img/aero/icons/games-32.png");
}
.aero-start-right > a[data-ico="computer"]::before {
  background-image: url("../img/aero/icons/computer-32.png");
}
.aero-start-right > a[data-ico="control-panel"]::before {
  background-image: url("../img/aero/icons/control-panel-32.png");
}
.aero-start-right > a[data-ico="devices"]::before {
  background-image: url("../img/aero/icons/drive-32.png");
}
.aero-start-right > a[data-ico="help"]::before {
  background-image: url("../img/aero/icons/help-32.png");
}

.aero-side-ico {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 6px;
}

.aero-orb-link .aero-orb-emoji {
  display: none;
}

.aero-orb-link .aero-orb-ico {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.35rem;
  filter: drop-shadow(0 2px 4px rgba(20, 60, 100, 0.35));
}

.aero-start-all {
  margin: 4px 8px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: #1a1a1a;
  display: flex;
  justify-content: space-between;
  border-radius: 3px;
  cursor: default;
}

.aero-start-all:hover {
  background: linear-gradient(180deg, #fff0c8 0%, #ffd078 100%);
}

.aero-start-search {
  display: block;
  margin: 4px 6px 8px;
  padding: 0;
}

.aero-start-search input {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #8aa0b4;
  border-radius: 2px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: #667;
}

.aero-start-right {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 42px 8px 44px;
  background:
    linear-gradient(
      180deg,
      rgba(40, 80, 130, 0.55) 0%,
      rgba(20, 50, 95, 0.72) 100%
    );
  color: #fff;
}

.aero-start-avatar {
  position: absolute;
  top: -10px;
  right: 12px;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background:
    radial-gradient(circle at 40% 35%, #ffe8a0, #e07030 55%, #804020);
  box-shadow: 0 4px 12px rgba(0, 20, 50, 0.45);
}

.aero-start-right a {
  display: block;
  /* left pad clears the ::before icon (16px @ 8px) + gap — Win7 places style */
  padding: 5px 8px 5px 30px;
  margin: 1px 0;
  border-radius: 3px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  text-shadow: 0 1px 1px rgba(0, 20, 50, 0.45);
}

.aero-start-right a.is-user {
  font-weight: 700;
  margin-bottom: 6px;
}

.aero-start-right a:hover,
.aero-start-right a:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.aero-start-power {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
}

.aero-start-shutdown {
  display: inline-block !important;
  padding: 4px 14px !important;
  border-radius: 3px;
  background: linear-gradient(180deg, #6aa8e0 0%, #2a68a8 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

/* Sticker toy — hidden on Aero / Win7 pages (clowncore pills clash) */
body.aero-page .sticker-toy,
body.aero-realm .sticker-toy,
body.aero-page .sticker-toy-show,
body.aero-realm .sticker-toy-show {
  display: none !important;
}

body.aero-page .aero-taskbar,
body.aero-realm .aero-taskbar {
  z-index: 130;
}

body.aero-page .aero-start-menu,
body.aero-realm .aero-start-menu {
  z-index: 140;
}

/* Clowncore .zone-tip must never appear on Aero (main.js also skips init) */
body.aero-page .zone-tip,
body.aero-realm .zone-tip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* —— Windows 7 Aero tooltips (replace native title) —— */
.aero-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: min(280px, calc(100vw - 16px));
  padding: 3px 8px 4px;
  pointer-events: none;
  font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 55%, #e4eaf0 100%);
  border: 1px solid #6d6d6d;
  border-radius: 2px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.06s ease;
}

.aero-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .aero-tooltip {
    transition: none;
  }
}

/* —— Internet Explorer floating window —— */
.aero-ie-window {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 72px));
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(190, 220, 245, 0.72) 0%,
    rgba(150, 190, 225, 0.55) 40%,
    rgba(120, 165, 210, 0.5) 100%
  );
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 12px 40px rgba(10, 40, 80, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
}

.aero-ie-window[hidden] {
  display: none !important;
}

.aero-ie-window.is-maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 48px) !important;
  height: calc(100dvh - 48px) !important;
  border-radius: 0;
}

.aero-ie-window.is-dragging {
  opacity: 0.96;
  user-select: none;
}

.aero-ie-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 2px 10px;
  cursor: url("../cursors/aero/move.cur"), move;
  min-height: 28px;
}

.aero-ie-titlebar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #0a2a48;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  min-width: 0;
}

.aero-ie-titlebar-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aero-ie-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(220, 235, 248, 0.75));
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(140, 170, 200, 0.55);
}

.aero-ie-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(80, 120, 170, 0.55);
  background: radial-gradient(circle at 35% 30%, #e8f4ff, #7eb0e0 55%, #3a7ab8);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: url("../cursors/aero/link.cur"), pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.aero-ie-nav-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.aero-ie-back {
  width: 34px;
  height: 34px;
  font-size: 22px;
}

.aero-ie-address-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 4px 0 6px;
  background: #fff;
  border: 1px solid #7a97b5;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 40, 80, 0.12);
}

.aero-ie-addr-ico {
  flex-shrink: 0;
}

.aero-ie-address {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font: 12px "Segoe UI", Tahoma, sans-serif;
  color: #1a1a1a;
  background: transparent;
}

.aero-ie-go {
  border: none;
  background: transparent;
  color: #1e6fb0;
  font-weight: 700;
  cursor: url("../cursors/aero/link.cur"), pointer;
  padding: 0 4px;
}

.aero-ie-open-tab {
  flex-shrink: 0;
  font-size: 11px;
  color: #0a4a7a;
  text-decoration: none;
  padding: 2px 6px;
  white-space: nowrap;
}

.aero-ie-open-tab:hover {
  text-decoration: underline;
}

.aero-ie-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 8px;
  background: linear-gradient(180deg, #d8e6f4, #c5d8ec);
  border-bottom: 1px solid #9bb4cc;
  min-height: 26px;
}

.aero-ie-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 180px;
  padding: 4px 12px 5px;
  font-size: 11px;
  color: #1a2a3a;
  background: linear-gradient(180deg, #f7fbff, #e4eef8);
  border: 1px solid #9bb4cc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.aero-ie-newtab {
  width: 22px;
  height: 18px;
  margin: 0 0 3px 2px;
  border: 1px solid #9bb4cc;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
  color: #567;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}

.aero-ie-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
  color: #222;
  font-family: Arial, Helvetica, sans-serif;
}

/* Classic Google home (in-IE, not real Google) */
.aero-g-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 2rem 1rem 3rem;
  box-sizing: border-box;
}

.aero-g-home[hidden],
.aero-g-results[hidden] {
  display: none !important;
}

.aero-g-logo {
  display: block;
  width: min(320px, 72vw);
  height: auto;
  margin: 0 auto 0.15rem;
  image-rendering: auto;
}

.aero-g-uk {
  margin: 0 0 1.1rem;
  margin-left: 9.5em;
  font-size: 12px;
  color: #c00;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.aero-g-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: min(420px, 92%);
}

.aero-g-q {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid #aaa;
  border-radius: 0;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
  color: #000;
}

.aero-g-q:focus {
  outline: 1px solid #4d90fe;
  border-color: #4d90fe;
}

.aero-g-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.55rem;
}

.aero-g-btn {
  padding: 3px 12px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: linear-gradient(180deg, #f8f8f8, #e8e8e8);
  color: #222;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  cursor: pointer;
}

.aero-g-btn:hover {
  border-color: #999;
  background: linear-gradient(180deg, #fff, #eee);
}

.aero-g-btn:active {
  background: #ddd;
}

.aero-g-hint {
  margin: 1.25rem 0 0;
  font-size: 11px;
  color: #777;
}

/* Results page */
.aero-g-results {
  padding: 0.65rem 1rem 1.25rem;
  box-sizing: border-box;
}

.aero-g-results-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 0.45rem;
}

.aero-g-mini-logo {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.aero-g-mini-logo img {
  display: block;
  width: 110px;
  height: auto;
}

.aero-g-search--inline {
  flex-direction: row;
  flex: 1;
  min-width: 180px;
  width: auto;
  align-items: stretch;
  gap: 0.4rem;
}

.aero-g-search--inline .aero-g-q {
  flex: 1;
  font-size: 14px;
}

.aero-g-stats {
  margin: 0 0 0.85rem;
  font-size: 12px;
  color: #808080;
}

.aero-g-result-list {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  max-width: 640px;
}

.aero-g-hit-title {
  display: inline-block;
  margin: 0 0 0.15rem;
  font-size: 17px;
  color: #1122cc;
  text-decoration: underline;
}

.aero-g-hit-title:hover {
  color: #c00;
}

.aero-g-hit-url {
  margin: 0 0 0.25rem;
  font-size: 12px;
  color: #009933;
}

.aero-g-hit-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.aero-g-hit-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid #ddd;
  background: #f4f4f4;
}

.aero-g-hit-snip {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #444;
}

@media (max-width: 560px) {
  .aero-g-uk {
    margin-left: 0;
    text-align: center;
  }

  .aero-g-hit-row {
    flex-direction: column;
  }
}

.aero-ie-status {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
  font-size: 11px;
  color: #2a3a4a;
  background: linear-gradient(180deg, #f0f4f8, #dce4ec);
  border-top: 1px solid #b0bec8;
}

.aero-ie-zone {
  white-space: nowrap;
}

/* —— Placeholder / empty folder panels —— */
.aero-coming-soon {
  margin: 1rem 0;
  padding: 1.25rem 1.1rem;
  text-align: center;
  border: 1px dashed rgba(80, 140, 190, 0.55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(210, 230, 245, 0.65));
  color: #2a4a60;
}

.aero-coming-soon strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  color: #0a3a60;
}

.aero-folder-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 2rem 1rem;
  text-align: center;
  color: #3a5568;
}

.aero-folder-empty img {
  width: 64px;
  height: 64px;
  opacity: 0.9;
}

.aero-folder-empty p {
  margin: 0;
  max-width: 28rem;
  line-height: 1.45;
}

/* Buttons need a UA reset, but must not outrank .aero-desk-icon:hover */
.aero-desk-icon[data-aero-open-a11y],
.aero-desk-icon[data-aero-open-ie],
button.aero-desk-icon {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  color: #fff !important;
  text-align: center;
  cursor: url("../cursors/aero/link.cur"), pointer;
}

.aero-desk-icon[data-aero-open-a11y]:hover,
.aero-desk-icon[data-aero-open-ie]:hover,
button.aero-desk-icon:hover,
.aero-desk-icon[data-aero-open-a11y]:focus-visible,
.aero-desk-icon[data-aero-open-ie]:focus-visible,
button.aero-desk-icon:focus-visible {
  background: rgba(180, 220, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

button.aero-desk-icon span {
  color: #fff !important;
}

@media (max-width: 640px) {
  .aero-ie-window,
  .aero-ie-window.is-maximized {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 48px) !important;
    height: calc(100dvh - 48px) !important;
    border-radius: 0 !important;
  }

  .aero-ie-open-tab {
    display: none;
  }
}