:root {
  color-scheme: dark;
  --sky-top: #8fc7f0;
  --sky-mid: #f0d7b0;
  --sky-bottom: #0c4fd4;
  --blue-deep: #0637c8;
  --blue-bright: #0e92ff;
  --glass: rgba(220, 248, 255, 0.26);
  --glass-edge: rgba(255, 255, 255, 0.5);
  --text: #dff3ff;
  --georgeos-icon-size: 28px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 38%, #0e67db 54%, var(--sky-bottom) 100%);
}

body::before {
  display: none;
}

.scene > * {
  animation-fill-mode: both;
}

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.view {
  position: absolute;
  inset: 0;
  transition: opacity 420ms ease, transform 420ms ease;
}

.view[hidden] {
  display: none;
}

.desktop-view {
  opacity: 0;
  transform: scale(1.015);
}

.scene[data-view="desktop"] .welcome-view {
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
}

.scene[data-view="desktop"] .desktop-view {
  opacity: 1;
  transform: none;
}

.welcome-view {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: url("IMG_9084.jpg") center center / cover no-repeat;
}

.welcome-topbar {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 2;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.92);
}

.welcome-clock {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: rgba(255, 255, 255, 0.96);
}

.welcome-date {
  margin: 0 0 0.35rem;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.welcome-time {
  margin: 0;
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.055em;
}

.bottom-button {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  z-index: 2;
  min-width: 132px;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
  transition: transform 180ms ease, opacity 180ms ease;
}

.bottom-button:hover {
  transform: translateX(-50%) translateY(-2px);
  background: transparent;
  box-shadow: none;
}

.bottom-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 10px;
  border-radius: 22px;
}

.user-avatar {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  object-fit: cover;
}

.user-name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.unlock-caption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(173, 210, 240, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px);
}

.desktop-shell {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: linear-gradient(180deg, #bdd5ef 0%, #e9dfb9 22%, #4f83da 58%, #195ad1 100%);
}

.device-frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.device-frame::after {
  display: none;
}

.notch {
  display: none;
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 22% 52%, rgba(18, 91, 217, 0.42), transparent 18%),
    radial-gradient(circle at 70% 30%, rgba(193, 238, 255, 0.46), transparent 24%),
    linear-gradient(180deg, #b9d5ec 0%, #efe4be 20%, #4e7ed1 56%, #1552d3 100%);
}

.desktop-wallpaper,
.desktop-wallpaper::before,
.desktop-wallpaper::after {
  position: absolute;
  inset: 0;
  content: "";
}

.desktop-wallpaper {
  background: url("IMG_9084.jpg") center center / cover no-repeat;
}

.desktop-wallpaper.animated-space {
  background:
    radial-gradient(5px 5px at 20% 30%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(4px 4px at 40% 10%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(6px 6px at 60% 25%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(5px 5px at 75% 40%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(4px 4px at 90% 15%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(6px 6px at 10% 60%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(5px 5px at 30% 75%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(4px 4px at 50% 65%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(6px 6px at 65% 80%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(5px 5px at 85% 70%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(4px 4px at 8% 15%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(4px 4px at 28% 45%, rgba(214, 222, 255, 0.75), transparent 60%),
    radial-gradient(4px 4px at 45% 88%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(4px 4px at 58% 12%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(4px 4px at 80% 55%, rgba(214, 222, 255, 0.75), transparent 60%),
    radial-gradient(4px 4px at 95% 38%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(5px 5px at 33% 20%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(5px 5px at 70% 60%, rgba(255, 255, 255, 0.65), transparent 70%),
    radial-gradient(5px 5px at 15% 82%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(6px 6px at 55% 35%, rgba(190, 210, 255, 0.7), transparent 70%),
    radial-gradient(6px 6px at 88% 85%, rgba(255, 255, 255, 0.65), transparent 70%),
    radial-gradient(6px 6px at 5% 40%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(5px 5px at 68% 5%, rgba(214, 222, 255, 0.7), transparent 70%),
    radial-gradient(ellipse at 50% 100%, #2c1b5e 0%, transparent 55%),
    radial-gradient(ellipse at 72% 15%, #7a3ad1 0%, transparent 45%),
    radial-gradient(ellipse at 20% 25%, #1d3f9e 0%, transparent 50%),
    linear-gradient(180deg, #05060f 0%, #181a3d 55%, #0a0a1c 100%);
  background-size: 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 200vw 200vh, 150% 150%, 150% 150%, 150% 150%, 100% 100%;
  animation:
    space-drift 30s ease-in-out infinite alternate,
    space-twinkle 2.6s ease-in-out infinite;
}

.desktop-wallpaper.animated-space::before,
.desktop-wallpaper.animated-space::after {
  animation: none;
  opacity: 0;
}

@keyframes space-drift {
  0% {
    background-position:
      0% 0%, 10% 20%, 20% 30%, 30% 10%, 40% 40%, 50% 20%, 60% 30%, 70% 50%, 80% 20%, 90% 40%,
      5% 25%, 15% 55%, 25% 35%, 35% 65%, 45% 20%, 55% 75%, 65% 40%, 75% 60%, 85% 25%, 95% 55%,
      8% 45%, 18% 70%, 28% 15%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  100% {
    background-position:
      -15% 10%, -5% 30%, 5% 40%, 15% 20%, 25% 50%, 35% 30%, 45% 40%, 55% 60%, 65% 30%, 75% 50%,
      -10% 35%, 0% 65%, 10% 45%, 20% 75%, 30% 30%, 40% 85%, 50% 50%, 60% 70%, 70% 35%, 80% 65%,
      -7% 55%, 3% 80%, 13% 25%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

@keyframes space-twinkle {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

.desktop-wallpaper::before {
  background: linear-gradient(180deg, rgba(20, 35, 58, 0.08), rgba(8, 15, 28, 0.22));
  opacity: 0.55;
  animation: none;
}

.desktop-wallpaper::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
  opacity: 0.3;
  animation: none;
}

.desktop-clock {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.window-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.window-layer .app-window {
  pointer-events: auto;
}

.workspace-pill {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(207, 228, 246, 0.26);
  backdrop-filter: blur(22px) saturate(1.2);
  color: rgba(255, 255, 255, 0.96);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 8px 18px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
}

.workspace-pill:hover {
  transform: translateY(-1px);
  background: rgba(207, 228, 246, 0.4);
}

.workspace-pill-dots {
  display: grid;
  grid-template-columns: repeat(2, 4px);
  grid-template-rows: repeat(2, 4px);
  gap: 3px;
}

.workspace-pill-dots span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color 200ms ease, transform 200ms ease;
}

.workspace-pill-dots span.active {
  background: rgba(255, 255, 255, 0.98);
  transform: scale(1.25);
}

.overview {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 46px clamp(16px, 6vw, 64px) 24px;
  background: rgba(8, 12, 22, 0.68);
  backdrop-filter: blur(26px) saturate(1.1);
}

.overview[hidden] {
  display: none;
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 920px;
  margin: 0 auto 18px;
}

.overview-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.96);
}

.overview-close {
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
}

.overview-close:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.24);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  min-height: 0;
  flex: 1;
}

.workspace-cell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  cursor: pointer;
}

.workspace-preview {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #0d1524;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.workspace-cell.current .workspace-preview {
  border-color: rgba(14, 146, 255, 0.85);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 0 0 2px rgba(14, 146, 255, 0.35);
}

.workspace-cell.drop-target .workspace-preview {
  border-color: rgba(40, 200, 64, 0.9);
  transform: scale(1.02);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(40, 200, 64, 0.4);
}

.workspace-preview-inner {
  position: relative;
  transform-origin: top left;
}

.workspace-preview-wallpaper {
  position: absolute;
  inset: 0;
  background: url("IMG_9084.jpg") center center / cover no-repeat;
}

.preview-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(18, 24, 35, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
  cursor: grab;
  user-select: none;
}

.preview-window:active {
  cursor: grabbing;
}

.preview-window .preview-window-titlebar {
  height: 26px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.09);
  font-size: 0.7rem;
  font-weight: 700;
  pointer-events: none;
}

.preview-window .preview-window-body {
  flex: 1;
  min-height: 0;
  background: rgba(10, 15, 22, 0.55);
}

.preview-window.dragging {
  opacity: 0.45;
}

.workspace-cell-name {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.workspace-cell.current .workspace-cell-name {
  color: #7cc6ff;
}

.app-window {
  position: absolute;
  display: none;
  flex-direction: column;
  min-width: 280px;
  min-height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(18, 24, 35, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(22px) saturate(1.25);
}

.app-window.open {
  display: flex;
}

.app-window.maximized {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0;
}

.window-titlebar {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  cursor: grab;
  user-select: none;
}

.window-titlebar:active {
  cursor: grabbing;
}

.window-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.window-control {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 999px;
  padding: 0;
}

.window-control.close {
  background: #ff5f57;
}

.window-control.maximize {
  background: #febc2e;
}

.window-control.fullscreen {
  background: #28c840;
}

.window-title {
  font-size: 0.82rem;
  font-weight: 700;
}

.window-content {
  position: relative;
  flex: 1;
  overflow: auto;
  padding: 16px;
  background: rgba(10, 15, 22, 0.52);
}

.resize-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 40%, rgba(255, 255, 255, 0.45) 40% 50%, transparent 50% 60%, rgba(255, 255, 255, 0.35) 60% 70%, transparent 70%);
}

.taskbar {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 18px;
  background: rgba(207, 228, 246, 0.26);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.12);
  z-index: 8;
}

.taskbar-app {
  width: calc(var(--georgeos-icon-size) + 16px);
  height: calc(var(--georgeos-icon-size) + 16px);
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  color: #10202e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.taskbar-app img {
  width: var(--georgeos-icon-size);
  height: var(--georgeos-icon-size);
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.taskbar-app:hover {
  transform: translateY(-5px) scale(1.08);
  background: rgba(255, 255, 255, 0.3);
}

.taskbar-app.active {
  box-shadow: inset 0 0 0 2px rgba(14, 146, 255, 0.55), 0 10px 20px rgba(0, 0, 0, 0.14);
}

.taskbar-app {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
  cursor: grab;
}

.taskbar-app:active {
  cursor: grabbing;
}

.taskbar-app.dragging {
  opacity: 0.45;
  transform: scale(1.05);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

body.taskbar-reordering .taskbar-app {
  transition: none;
}

.desktop-icons {
  position: absolute;
  top: 58px;
  left: 12px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(auto-fill, 96px);
  justify-content: start;
  align-content: start;
  column-gap: 6px;
  row-gap: 8px;
  min-width: 198px;
  min-height: 104px;
  padding: 6px;
  border: 1.5px dashed transparent;
  border-radius: 16px;
  pointer-events: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

body.taskbar-reordering .desktop-icons {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.desktop-icon {
  width: 96px;
  height: 104px;
  padding: 8px 4px 6px;
  border: 0;
  border-radius: 14px;
  display: grid;
  grid-template-rows: 56px 1fr;
  justify-items: center;
  gap: 6px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: grab;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.desktop-icon:active {
  cursor: grabbing;
}

.desktop-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.desktop-icon-label {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  user-select: none;
  max-width: 88px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  align-self: start;
}

.desktop-icon:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.desktop-icon:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
}

.desktop-icon.dragging {
  opacity: 0.45;
  transform: scale(1.04);
}

body.taskbar-reordering .desktop-icon {
  transition: none;
}

body.taskbar-reordering .desktop-icon:hover {
  transform: none;
}

html[data-theme="windows11"] .desktop-icon {
  border-radius: 6px;
}

html[data-theme="windows11"] .desktop-icon:hover,
html[data-theme="windows11"] .desktop-icon:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  transform: none;
}

html[data-theme="windows11"] .desktop-icon-label {
  font-size: 0.74rem;
  font-weight: 500;
}

html[data-theme="windowsxp"] .desktop-icon {
  border-radius: 2px;
}

html[data-theme="windowsxp"] .desktop-icon:hover,
html[data-theme="windowsxp"] .desktop-icon:focus-visible {
  background: rgba(4, 120, 248, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.65);
  transform: none;
}

html[data-theme="windowsxp"] .desktop-icon img {
  filter: none;
}

html[data-theme="windowsxp"] .desktop-icon-label {
  font-weight: 400;
}

.taskbar-app span {
  font-size: 1.15rem;
  line-height: 1;
}

.app-shell {
  display: grid;
  gap: 12px;
  color: #eef6ff;
}

.holymoly-shell {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  align-content: start;
  color: #eef6ff;
}

.holymoly-banner {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.holymoly-shell h2 {
  margin: 0;
  font-size: 1.05rem;
}

.holymoly-description {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(238, 246, 255, 0.78);
}

.holymoly-launch {
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  background: rgba(14, 146, 255, 0.9);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.holymoly-launch:hover {
  transform: translateY(-2px);
  background: rgba(14, 146, 255, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.linkedin-shell {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  align-content: start;
  color: #eef6ff;
}

.linkedin-banner {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  object-fit: cover;
}

.linkedin-shell h2 {
  margin: 0;
  font-size: 1.05rem;
}

.linkedin-description {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(238, 246, 255, 0.78);
}

.linkedin-launch {
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  background: rgba(0, 119, 181, 0.9);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.linkedin-launch:hover {
  transform: translateY(-2px);
  background: rgba(0, 119, 181, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.youtube-shell {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  align-content: start;
  color: #eef6ff;
}

.youtube-banner {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  object-fit: cover;
}

.youtube-shell h2 {
  margin: 0;
  font-size: 1.05rem;
}

.youtube-description {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(238, 246, 255, 0.78);
}

.youtube-launch {
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  background: rgba(255, 0, 0, 0.85);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.youtube-launch:hover {
  transform: translateY(-2px);
  background: rgba(255, 0, 0, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.instagram-shell {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  align-content: start;
  color: #eef6ff;
}

.instagram-banner {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  object-fit: cover;
}

.instagram-shell h2 {
  margin: 0;
  font-size: 1.05rem;
}

.instagram-description {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(238, 246, 255, 0.78);
}

.instagram-launch {
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.instagram-launch:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.app-shell h2 {
  margin: 0;
  font-size: 1rem;
}

.calculator-display {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  text-align: right;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.calculator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.calculator-grid button {
  border: 0;
  border-radius: 14px;
  padding: 14px 0;
  font: inherit;
  font-weight: 700;
  color: #eef6ff;
  background: rgba(255, 255, 255, 0.12);
}

.calculator-grid button.operator {
  background: rgba(14, 146, 255, 0.8);
}

.calculator-grid button.equals {
  background: rgba(40, 200, 64, 0.85);
}

.weather-shell,
.camera-shell {
  display: grid;
  gap: 12px;
}

.mail-shell {
  display: grid;
  gap: 10px;
  color: #eef6ff;
  max-width: 560px;
}

.mail-to {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(14, 146, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.mail-to-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(238, 246, 255, 0.7);
}

.mail-to-address {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mail-field {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.mail-field span {
  color: rgba(238, 246, 255, 0.8);
}

.mail-field input,
.mail-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.09);
  color: inherit;
  font: inherit;
  resize: vertical;
}

.mail-field input:focus,
.mail-field textarea:focus {
  outline: 2px solid rgba(14, 146, 255, 0.6);
  outline-offset: 0;
  background: rgba(255, 255, 255, 0.13);
}

.mail-send {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: rgba(14, 146, 255, 0.9);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.mail-send:hover {
  transform: translateY(-2px);
  background: rgba(14, 146, 255, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.mail-hint,
.mail-status {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(238, 246, 255, 0.72);
}

.mail-status.error {
  color: #ffb4a8;
}

.projects-shell {
  display: grid;
  gap: 12px;
  color: #eef6ff;
}

.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.projects-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.projects-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.projects-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.projects-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: rgba(238, 246, 255, 0.68);
}

.projects-refresh {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font: inherit;
  font-weight: 700;
  flex: 0 0 auto;
}

.projects-status {
  font-size: 0.85rem;
  color: rgba(238, 246, 255, 0.78);
}

.projects-list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.projects-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}

.projects-item:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.projects-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.projects-item-name {
  font-size: 0.95rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.projects-fork {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.projects-item-desc {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(238, 246, 255, 0.78);
  overflow-wrap: anywhere;
}

.projects-item-meta {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(238, 246, 255, 0.6);
}

.photos-shell {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  min-height: 100%;
  color: #eef6ff;
}

.photos-sidebar {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.photos-sidebar-title {
  margin-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(238, 246, 255, 0.62);
}

.photos-album {
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  font-weight: 600;
}

.photos-album.active {
  background: rgba(255, 255, 255, 0.2);
}

.photos-upload {
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  background: rgba(14, 146, 255, 0.85);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}

.photos-upload:hover {
  transform: translateY(-1px);
  background: rgba(14, 146, 255, 1);
}

.photos-main {
  display: grid;
  gap: 12px;
}

.photos-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  aspect-ratio: 4 / 3;
}

.photos-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.photos-wallpaper-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 0;
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(14, 146, 255, 0.9);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 180ms ease, background-color 180ms ease;
}

.photos-wallpaper-btn:hover {
  transform: translateY(-1px);
  background: rgba(14, 146, 255, 1);
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.photos-thumb {
  border: 0;
  padding: 0;
  text-align: left;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.photos-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
}

.photos-thumb.active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.camera-shell h2 {
  margin: 0;
  font-size: 1rem;
}

.weather-status {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
}

.weather-city {
  font-size: 1rem;
  font-weight: 700;
}

.weather-temp {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
}

.weather-meta,
.weather-message,
.camera-message {
  color: rgba(238, 246, 255, 0.78);
}

.camera-view {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
  object-fit: cover;
}

.camera-preview {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.camera-preview video {
  width: 100%;
  display: block;
}

.camera-preview canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-status {
  color: rgba(238, 246, 255, 0.78);
}

.camera-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.camera-actions button,
.download-list a {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font: inherit;
  font-weight: 700;
}

.download-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.download-panel h3 {
  margin: 0;
  font-size: 0.85rem;
}

.download-list {
  display: grid;
  gap: 8px;
}

.download-list a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.breach-shell {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  color: #eef6ff;
  min-height: 100%;
}

.breach-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.breach-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.breach-desc,
.breach-hint {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(238, 246, 255, 0.76);
}

.breach-launch {
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  background: rgba(14, 146, 255, 0.9);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.breach-launch:hover {
  transform: translateY(-2px);
  background: rgba(14, 146, 255, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.camera-controls,
.weather-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.camera-controls button,
.weather-controls button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font: inherit;
  font-weight: 700;
}

.paint-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  color: #eef6ff;
}

.paint-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.paint-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.paint-field-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(238, 246, 255, 0.62);
}

.paint-color {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.paint-size {
  width: 84px;
  accent-color: #4aa8ff;
}

.paint-size-value {
  min-width: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
  color: rgba(238, 246, 255, 0.85);
}

.paint-tool {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.paint-tool:hover {
  transform: translateY(-1px);
}

.paint-tool.active {
  background: rgba(14, 146, 255, 0.9);
  color: #fff;
}

.paint-clear {
  color: rgba(238, 246, 255, 0.8);
}

.paint-save {
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  background: linear-gradient(180deg, #34d07a, #1fae5c);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(31, 174, 92, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.paint-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31, 174, 92, 0.45);
}

.paint-body {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.paint-gallery {
  width: 132px;
  flex: 0 0 132px;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
}

.paint-gallery-title {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(238, 246, 255, 0.62);
}

.paint-sources {
  display: grid;
  gap: 8px;
}

.paint-source {
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.paint-source img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

.paint-source.active {
  box-shadow: inset 0 0 0 2px rgba(14, 146, 255, 0.9);
}

.paint-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.paint-canvas-back,
.paint-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.paint-canvas {
  cursor: crosshair;
  touch-action: none;
}

.paint-empty {
  margin: 0;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  font-size: 0.88rem;
  color: rgba(238, 246, 255, 0.7);
  cursor: default;
  user-select: none;
}

.paint-empty[hidden] {
  display: none;
}

.dock {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(126, 183, 227, 0.33);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  z-index: 4;
}

.dock span {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

@keyframes button-bob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-3px);
  }
}

@keyframes wallpaper-flow {
  from {
    transform: translate3d(-1.5%, -0.5%, 0) scale(1.04);
  }

  to {
    transform: translate3d(1.2%, 1.2%, 0) scale(1.08);
  }
}

@media (max-width: 700px) {
  .bottom-button {
    bottom: 20px;
  }

  .desktop-shell {
    padding: 0;
  }

  .device-frame {
    width: 100%;
    height: 100%;
  }

  .widgets {
    top: 30px;
    left: 14px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 116px 88px;
    gap: 6px;
  }

  .dock {
    gap: 3px;
    padding: 5px 6px;
  }

  .dock span {
    width: 16px;
    height: 16px;
    border-radius: 5px;
  }

  .taskbar {
    bottom: 8px;
    gap: 6px;
    padding: 7px 8px;
  }

  .taskbar-app {
    width: calc(var(--georgeos-icon-size) + 12px);
    height: calc(var(--georgeos-icon-size) + 12px);
    border-radius: 11px;
  }

  .taskbar-app img {
    width: var(--georgeos-icon-size);
    height: var(--georgeos-icon-size);
  }

  .desktop-clock {
    top: 8px;
    right: 10px;
    font-size: 0.9rem;
  }

  .workspace-pill {
    top: 8px;
    left: 8px;
    padding: 5px 10px;
    gap: 6px;
  }

  .overview {
    padding: 42px 12px 16px;
  }

  .overview-grid {
    gap: 12px;
  }

  .workspace-cell-name {
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene > *,
  .bottom-button {
    animation: none !important;
    transition: none !important;
  }
}

.customize-shell {
  display: grid;
  gap: 12px;
  color: #eef6ff;
}

.customize-shell h2 {
  margin: 0;
  font-size: 1.05rem;
}

.customize-intro {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(238, 246, 255, 0.78);
}

.customize-themes {
  display: grid;
  gap: 10px;
}

.customize-settings {
  display: grid;
  gap: 10px;
}

.customize-setting {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
}

.customize-setting-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.customize-setting-label {
  font-size: 0.86rem;
  font-weight: 700;
}

.customize-setting-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(238, 246, 255, 0.72);
}

.customize-range {
  width: 100%;
  accent-color: #0e92ff;
  cursor: pointer;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.theme-option:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.theme-option.active {
  box-shadow: inset 0 0 0 2px rgba(14, 146, 255, 0.6);
  background: rgba(255, 255, 255, 0.16);
}

.theme-swatch {
  width: 34px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex: 0 0 auto;
}

.theme-swatch-macos {
  background: linear-gradient(180deg, #8fc7f0 0%, #f0d7b0 40%, #0c4fd4 100%);
}

.theme-swatch-windows11 {
  background: linear-gradient(135deg, #16264d 0%, #2a6df0 60%, #4ec9ff 100%);
}

.theme-swatch-windowsxp {
  background: linear-gradient(180deg, #2f7fe0 0%, #0653d1 100%);
}

html[data-theme="windows11"] .screen {
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 196, 92, 0.42), transparent 26%),
    radial-gradient(circle at 24% 28%, rgba(64, 148, 255, 0.5), transparent 30%),
    radial-gradient(circle at 55% 105%, rgba(122, 61, 190, 0.45), transparent 36%),
    linear-gradient(180deg, #1c1f3a 0%, #0d3b82 60%, #08122e 100%);
}

html[data-theme="windows11"] .taskbar {
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: rgba(31, 33, 50, 0.84);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.24);
}

html[data-theme="windows11"] .taskbar-app {
  position: relative;
  width: calc(var(--georgeos-icon-size) + 12px);
  height: calc(var(--georgeos-icon-size) + 12px);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

html[data-theme="windows11"] .taskbar-app:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="windows11"] .taskbar-app.active {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

html[data-theme="windows11"] .taskbar-app.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}

html[data-theme="windows11"] .app-window {
  border-radius: 8px;
  background: rgba(28, 30, 42, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(18px);
}

html[data-theme="windows11"] .window-titlebar {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="windows11"] .window-controls {
  gap: 0;
}

html[data-theme="windows11"] .window-control {
  width: 44px;
  height: 30px;
  border-radius: 4px;
  background: transparent;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 600;
}

html[data-theme="windows11"] .window-control::before {
  content: "";
  line-height: 1;
}

html[data-theme="windows11"] .window-control.close::before {
  content: "✕";
}

html[data-theme="windows11"] .window-control.maximize::before {
  content: "□";
}

html[data-theme="windows11"] .window-control.fullscreen::before {
  content: "⤢";
}

html[data-theme="windows11"] .window-control:hover {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="windows11"] .window-control.close:hover {
  background: rgba(224, 49, 49, 0.9);
}

html[data-theme="windowsxp"] .screen {
  background: linear-gradient(180deg, #16b9ff 0%, #2f7fe0 38%, #0653d1 100%);
}

html[data-theme="windowsxp"] .taskbar {
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #0a52c8 0%, #3c8ef4 10%, #1470e0 45%, #0a4fc9 100%);
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 -2px 6px rgba(0, 0, 0, 0.3);
}

html[data-theme="windowsxp"] .taskbar-app {
  min-width: 30px;
  width: auto;
  height: calc(var(--georgeos-icon-size) + 4px);
  padding: 0 9px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #6fb0f4 0%, #2f7fe0 50%, #1a5fd0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2);
}

html[data-theme="windowsxp"] .taskbar-app img {
  width: var(--georgeos-icon-size);
  height: var(--georgeos-icon-size);
}

html[data-theme="windowsxp"] .taskbar-app:hover {
  transform: none;
  background: linear-gradient(180deg, #7bb8ff 0%, #3f8cf0 50%, #2569dd 100%);
}

html[data-theme="windowsxp"] .taskbar-app.active {
  background: linear-gradient(180deg, #0a3d9e 0%, #1b62da 50%, #2b72e0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 2px 5px rgba(0, 0, 0, 0.35);
}

html[data-theme="windowsxp"] .app-window {
  border-radius: 8px 8px 0 0;
  background: #0d1626;
  border: 1px solid #002f91;
  box-shadow: inset 0 0 0 1px #9db6e8, 0 18px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
}

html[data-theme="windowsxp"] .window-titlebar {
  height: 28px;
  color: #ffffff;
  background: linear-gradient(90deg, #0a42b8 0%, #3d8ff5 55%, #3d8ff5 70%, #7bb8ff 100%);
}

html[data-theme="windowsxp"] .window-title {
  color: #ffffff;
  font-size: 0.78rem;
}

html[data-theme="windowsxp"] .window-controls {
  gap: 2px;
}

html[data-theme="windowsxp"] .window-control {
  width: 18px;
  height: 16px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f6f8fb 0%, #eff3f9 40%, #dce6f5 100%);
  border: 1px solid #003c74;
  color: #1a3c6d;
  font-size: 10px;
  font-weight: 800;
}

html[data-theme="windowsxp"] .window-control::before {
  content: "";
  line-height: 1;
}

html[data-theme="windowsxp"] .window-control.close::before {
  content: "×";
}

html[data-theme="windowsxp"] .window-control.maximize::before {
  content: "□";
}

html[data-theme="windowsxp"] .window-control.fullscreen::before {
  content: "▣";
}

html[data-theme="windowsxp"] .window-control:hover {
  filter: brightness(1.12);
}

html[data-theme="windowsxp"] .resize-handle {
  display: none;
}