:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111522;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
}

.os-shell, .desktop, .boot-screen {
  min-height: 100vh;
  width: 100%;
}

.desktop {
  align-items: flex-end;
  background: radial-gradient(circle at 18% 22%, #416da6 0, transparent 29%),
    radial-gradient(circle at 78% 72%, #563c85 0, transparent 32%),
    linear-gradient(135deg, #152d48 0%, #162135 48%, #251a42 100%);
  display: flex;
  isolation: isolate;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 34px;
  position: relative;
}

.desktop::after {
  background: linear-gradient(120deg, rgb(255 255 255 / 0.08), transparent 36% 62%, rgb(255 255 255 / 0.04));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.desktop-glow {
  border-radius: 50%;
  filter: blur(55px);
  opacity: .36;
  position: absolute;
  z-index: -1;
}

.glow-one { background: #7dccdf; height: 250px; left: -80px; top: 55%; width: 250px; }
.glow-two { background: #c174d0; height: 280px; right: -65px; top: -85px; width: 280px; }

.desktop-label {
  color: rgb(255 255 255 / .55);
  font-size: 12px;
  font-weight: 600;
  left: 28px;
  letter-spacing: .12em;
  margin: 0;
  position: absolute;
  text-transform: uppercase;
  top: 24px;
}

.dock {
  align-items: center;
  backdrop-filter: blur(22px) saturate(135%);
  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / .08));
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 23px;
  box-shadow: 0 16px 36px rgb(5 9 22 / .27), inset 0 1px rgb(255 255 255 / .14);
  display: flex;
  gap: 12px;
  height: 78px;
  justify-content: center;
  padding: 9px 12px;
  position: relative;
  z-index: 1;
}

.dock-group { align-items: flex-end; display: flex; gap: 9px; height: 58px; }

.dock-app {
  appearance: none;
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer;
  height: 58px;
  padding: 0 0 8px;
  position: relative;
  transform-origin: center bottom;
  transition: transform 160ms cubic-bezier(.2,.9,.25,1.4), filter 160ms ease;
  width: 48px;
}

.dock-app:hover { filter: brightness(1.1); transform: translateY(-8px) scale(1.25); }
.dock-app:focus-visible { outline: 2px solid #d5e5ff; outline-offset: 3px; }

.dock-app span {
  align-items: center;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 14px;
  box-shadow: inset 0 1px rgb(255 255 255 / .24), 0 5px 12px rgb(5 10 25 / .28);
  display: flex;
  font-size: 25px;
  font-weight: 620;
  height: 48px;
  justify-content: center;
  line-height: 1;
  text-shadow: 0 1px 2px rgb(0 0 0 / .2);
  width: 48px;
}

.dock-app b {
  background: #eaf2ff;
  border-radius: 50%;
  bottom: 0;
  display: block;
  height: 4px;
  left: calc(50% - 2px);
  opacity: 0;
  position: absolute;
  width: 4px;
}

.dock-app.is-running b { opacity: .72; }

finder span { background: linear-gradient(135deg, #67b8ee 0 48%, #367fc3 49%); }
.notes span { background: linear-gradient(145deg, #f9df82, #d9a44c); color: #704313; font-size: 31px; }
.terminal span { background: linear-gradient(145deg, #4d5363, #222632); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; }
.camera span { background: linear-gradient(145deg, #c991e9, #694da0); }
.settings span { background: linear-gradient(145deg, #9da4b0, #596270); font-size: 28px; }
.trash span { background: linear-gradient(145deg, #b5dfd7, #548f91); }

.dock-divider { background: rgb(255 255 255 / .22); height: 39px; width: 1px; }
.dock-clock { color: #f8fbff; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 620; min-width: 65px; text-align: center; }

.boot-screen {
  align-items: center;
  background: #101520;
  color: #f6f8ff;
  display: flex;
  justify-content: center;
  opacity: 1;
  position: fixed;
  transition: opacity 620ms ease, visibility 620ms ease;
  z-index: 20;
}

.boot-screen.is-leaving { opacity: 0; visibility: hidden; }

.boot-content { margin-top: -4vh; text-align: center; }

.logo-mark {
  display: flex;
  gap: 6px;
  height: 44px;
  justify-content: center;
  margin: 0 auto 16px;
  width: 60px;
}

.logo-mark span {
  animation: breathe 1.8s ease-in-out infinite;
  background: linear-gradient(180deg, #b9d8ff, #6e93e0);
  border-radius: 999px;
  box-shadow: 0 0 18px rgb(121 165 235 / .28);
  width: 11px;
}
.logo-mark span:nth-child(1) { animation-delay: -0.4s; height: 28px; margin-top: 10px; }
.logo-mark span:nth-child(2) { height: 44px; }
.logo-mark span:nth-child(3) { animation-delay: -0.8s; height: 28px; margin-top: 10px; }

.wordmark { font-size: 26px; font-weight: 520; letter-spacing: .14em; margin: 0; }
.boot-status { color: #9eabc0; font-size: 12px; letter-spacing: .04em; margin: 14px 0 54px; }
.boot-status i { animation: blink 1.5s ease-in-out infinite; background: #91dfa9; border-radius: 50%; display: inline-block; height: 7px; margin-right: 7px; width: 7px; }
.boot-prompt { animation: pulse 2.2s ease-in-out infinite; color: #c3cbda; font-size: 13px; margin: 0; }
kbd { border: 1px solid #6c7588; border-bottom-width: 2px; border-radius: 5px; color: #fff; font: inherit; margin: 0 3px; padding: 3px 7px; }

@keyframes breathe { 50% { opacity: .5; transform: translateY(2px); } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes pulse { 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

@media (max-width: 560px) {
  .desktop { padding-bottom: 18px; }
  .dock { gap: 5px; padding: 8px; transform: scale(.86); transform-origin: bottom center; }
  .dock-group { gap: 4px; }
  .dock-divider { display: none; }
}