.caelestia-desktop {
  color: var(--sp-color-on-surface);
  background: var(--sp-color-shell-frame);
  font-family: var(--sp-font-sans);
  isolation: isolate;
}

.site-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--sp-layer-lock);
  width: 1px;
  height: 1px;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.98))
    drop-shadow(0 0 1.5px rgb(0 0 0 / 0.98));
  transform: translate3d(-999px, -999px, 0) translate3d(-50%, -50%, 0);
  transition:
    opacity var(--sp-duration-small) var(--sp-curve-standard),
    filter var(--sp-duration-small) var(--sp-curve-standard);
  will-change: transform;
}

.site-cursor::after {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 15px;
  height: 20px;
  background: #fff;
  clip-path: polygon(0 0, 100% 67%, 61% 72%, 78% 100%, 59% 100%, 43% 74%, 0 100%);
  content: "";
  transform-origin: 1px 1px;
  transition: transform var(--sp-duration-small) var(--sp-curve-standard);
}

.site-cursor.is-visible {
  opacity: 1;
}

.site-cursor.is-interactive {
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.98))
    drop-shadow(0 0 2px rgb(255 255 255 / 0.98));
}

.site-cursor.is-interactive::after {
  background: color-mix(in srgb, var(--sp-color-primary) 26%, #fff);
  transform: scale(1.12);
}

.site-cursor.is-pressed::after {
  transform: scale(0.9);
}

.site-cursor.is-heart {
  filter: none;
}

.site-cursor.is-heart::after {
  top: 50%;
  left: 50%;
  width: var(--sp-bar-inner);
  height: var(--sp-bar-inner);
  background: url("assets/love-heart-pink.png?v=2") center / contain no-repeat;
  clip-path: none;
  filter:
    drop-shadow(0 0 1px rgb(20 19 23 / 0.96))
    drop-shadow(0 0 3px rgb(255 255 255 / 0.9))
    drop-shadow(0 0 5px rgb(255 145 196 / 0.62));
  transform: translate(-50%, -50%);
}

html.has-site-cursor body.caelestia-desktop-active .caelestia-desktop[data-desktop-root],
html.has-site-cursor body.caelestia-desktop-active .caelestia-desktop[data-desktop-root] * {
  cursor: none;
}

html.has-native-fullscreen-cursor body.caelestia-desktop-active .caelestia-desktop[data-desktop-root],
html.has-native-fullscreen-cursor body.caelestia-desktop-active .caelestia-desktop[data-desktop-root] * {
  cursor: auto;
}

html.has-native-fullscreen-cursor .site-cursor {
  display: none;
}

body.caelestia-desktop-active .caelestia-desktop {
  pointer-events: auto;
}

.caelestia-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--sp-color-shell-frame);
}

.site-onboarding {
  --onboarding-stroke: 2px;
  --onboarding-progress: 0;
  --onboarding-scrim-progress: 0;
  --onboarding-surface-progress: 0;
  --onboarding-intro-progress: 0;
  --onboarding-guide-progress: 0;
  --onboarding-disclosure-progress: 0;
  --onboarding-actions-progress: 0;
  position: fixed;
  z-index: var(--sp-layer-modal);
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(var(--sp-padding-large), env(safe-area-inset-top, 0px))
    max(var(--sp-padding-large), env(safe-area-inset-right, 0px))
    max(var(--sp-padding-large), env(safe-area-inset-bottom, 0px))
    max(var(--sp-padding-large), env(safe-area-inset-left, 0px));
  background: color-mix(
    in srgb,
    var(--sp-color-scrim) calc(var(--onboarding-scrim-progress) * 38%),
    transparent
  );
  pointer-events: auto;
}

.site-onboarding[hidden] {
  display: none;
}

.site-onboarding-panel {
  display: grid;
  width: min(680px, 100%);
  max-height: min(720px, calc(100vh - var(--sp-padding-large) * 2));
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "message"
    "local"
    "status"
    "actions";
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  overflow: hidden;
  border: var(--onboarding-stroke) solid var(--sp-color-outline-variant);
  border-radius: calc(
    var(--sp-radius-large) +
    (var(--sp-radius-extra-large) - var(--sp-radius-large)) * var(--onboarding-surface-progress)
  );
  color: var(--sp-color-on-surface);
  background: var(--sp-color-surface-container-lowest);
  box-shadow: var(--sp-shadow-panel);
  clip-path: inset(
    calc((1 - var(--onboarding-surface-progress)) * 46%)
    calc((1 - var(--onboarding-surface-progress)) * 38%)
    round var(--sp-radius-extra-large)
  );
  opacity: var(--onboarding-surface-progress);
  transform: translateY(calc((1 - var(--onboarding-surface-progress)) * 22px))
    scale(calc(0.9 + var(--onboarding-surface-progress) * 0.1));
  transform-origin: center;
  will-change: clip-path, opacity, transform;
}

.site-onboarding-intro {
  grid-area: intro;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-space-normal);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
  border-bottom: var(--onboarding-stroke) solid var(--sp-color-outline-variant);
  background: var(--sp-color-surface-container-low);
  opacity: var(--onboarding-intro-progress);
  transform: translateY(calc((1 - var(--onboarding-intro-progress)) * 12px));
}

.site-onboarding :is(h2, p) {
  margin: 0;
}

.site-onboarding-kicker {
  color: var(--sp-color-on-surface-variant);
  font: var(--sp-type-label-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-onboarding h2 {
  margin-top: 3px;
  font: var(--sp-type-headline-medium);
  letter-spacing: -0.025em;
}

#site-onboarding-description {
  color: var(--sp-color-on-surface-variant);
  font: var(--sp-type-body-medium);
  line-height: 1.42;
}

.site-onboarding-message {
  grid-area: message;
  display: grid;
  align-content: start;
  gap: var(--sp-space-normal);
  margin: 0;
  padding: clamp(22px, 3vw, 30px);
  overflow: auto;
  color: var(--sp-color-on-surface-variant);
  background: transparent;
  font: var(--sp-type-body-medium);
  line-height: 1.5;
  opacity: var(--onboarding-guide-progress);
  transform: translateY(calc((1 - var(--onboarding-guide-progress)) * 14px));
}

.site-onboarding-message p {
  margin: 0;
}

.site-onboarding .site-onboarding-local {
  grid-area: local;
  margin: 0;
  padding: var(--sp-padding-small) clamp(22px, 3vw, 30px);
  border-top: var(--onboarding-stroke) solid var(--sp-color-outline-variant);
  color: var(--sp-color-on-surface-variant);
  background: var(--sp-color-surface-container-low);
  font: var(--sp-type-body-small);
  line-height: 1.45;
}

.site-onboarding-local[hidden] {
  display: none;
}

.site-onboarding .site-onboarding-status {
  grid-area: status;
  min-height: 1.25rem;
  margin: 0;
  padding: var(--sp-space-small) clamp(22px, 3vw, 30px);
  color: var(--sp-color-error);
  font: var(--sp-type-body-small);
}

.site-onboarding-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-space-small);
  margin: 0;
  padding: var(--sp-padding-normal) clamp(22px, 3vw, 30px) clamp(20px, 3vw, 26px);
  border-top: var(--onboarding-stroke) solid var(--sp-color-outline-variant);
  background: var(--sp-color-surface-container-low);
  opacity: var(--onboarding-actions-progress);
  transform: translateY(calc((1 - var(--onboarding-actions-progress)) * 8px));
}

.site-onboarding-actions button {
  min-height: 44px;
  padding: 0 var(--sp-padding-large);
  border: var(--onboarding-stroke) solid var(--sp-color-outline-variant);
  border-radius: var(--sp-radius-full);
  color: var(--sp-color-on-surface);
  background: var(--sp-color-surface-container-high);
  font: var(--sp-type-label-large);
  cursor: pointer;
}

.site-onboarding-actions [data-onboarding-guide] {
  color: var(--sp-color-on-primary);
  background: var(--sp-color-primary);
}

.site-onboarding-intro .site-onboarding-close {
  display: grid;
  width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: var(--onboarding-stroke) solid var(--sp-color-outline-variant);
  border-radius: var(--sp-radius-full);
  color: var(--sp-color-on-surface-variant);
  background: var(--sp-color-surface-container-high);
  cursor: pointer;
}

.site-onboarding-intro .site-onboarding-close .sp-icon {
  font-size: 20px;
}

.site-onboarding :is(button, a):focus-visible {
  outline: 2px solid var(--sp-color-on-surface);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .site-onboarding {
    align-items: end;
    padding: max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
  }

  .site-onboarding-panel {
    max-height: calc(100dvh - 20px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "message"
      "local"
      "status"
      "actions";
    border-radius: var(--sp-radius-extra-large);
  }

  .site-onboarding-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-space-normal);
  }

  .site-onboarding h2 {
    font: var(--sp-type-title-large);
  }

  .site-onboarding-message {
    max-height: min(58dvh, 480px);
    align-content: start;
    padding: var(--sp-padding-large);
    border-radius: 4px;
  }

  .site-onboarding-actions {
    display: flex;
  }
}

.caelestia-workspace {
  position: absolute;
  inset:
    var(--sp-border-thickness)
    var(--sp-border-thickness)
    var(--sp-border-thickness)
    var(--sp-bar-outer);
  z-index: var(--sp-layer-wallpaper, 0);
  overflow: hidden;
  border: 0;
  border-radius: var(--sp-border-rounding);
  background: var(--sp-wallpaper-fallback);
  box-shadow: var(--sp-shadow-panel);
  isolation: isolate;
  transform: translateZ(0);
}

.shell-wallpaper {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--sp-wallpaper-fallback);
  pointer-events: none;
}

.shell-wallpaper-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: blur(var(--lock-background-blur, 0px))
    brightness(var(--lock-background-brightness, 1));
  transform: scale(var(--lock-background-scale, 1));
  transform-origin: center;
  will-change: filter, transform;
}

body.caelestia-lock-active {
  --lock-background-blur: 32px;
  --lock-background-scale: 1.045;
  --lock-background-brightness: 0.92;
}

html[data-visual-mode="balanced"] body.caelestia-lock-active {
  --lock-background-blur: 18px;
}

html[data-visual-mode="low"] body.caelestia-lock-active,
html[data-motion-policy="reduced"] body.caelestia-lock-active {
  --lock-background-blur: 0px;
  --lock-background-scale: 1;
}

.shell-wallpaper .caelestia-desktop-wallpaper {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: var(--wallpaper-fit, cover);
  object-position: var(--wallpaper-position-x, 50%) var(--wallpaper-position-y, 50%);
  opacity: 0;
  transition: opacity var(--sp-duration-wallpaper-profile) var(--sp-curve-standard);
}

.shell-wallpaper .caelestia-desktop-wallpaper.is-current {
  opacity: 1;
}

.shell-wallpaper-canvas,
.shell-wallpaper .caelestia-desktop-tone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shell-wallpaper-canvas {
  z-index: 2;
  display: block;
}

.shell-wallpaper-canvas[hidden] {
  display: none;
}

.shell-wallpaper .caelestia-desktop-tone {
  z-index: 3;
  background: linear-gradient(
    rgb(0 0 0 / var(--site-visual-dim, 0)),
    rgb(0 0 0 / var(--site-visual-dim, 0))
  );
}

html[data-visual-mode="low"] .shell-wallpaper-motion,
html[data-motion-policy="reduced"] .shell-wallpaper-motion {
  transform: none;
  will-change: auto;
}

.shell-application-host,
.shell-empty-desktop,
.shell-overlay-layer {
  position: absolute;
  inset: 0;
}

.shell-application-host {
  z-index: var(--sp-layer-workspace, 20);
  overflow: hidden;
}

.shell-empty-desktop {
  z-index: var(--sp-layer-wallpaper, 0);
}

.shell-overlay-layer {
  z-index: var(--sp-layer-workspace, 20);
  overflow: clip;
  pointer-events: none;
}

.caelestia-sidebar[data-shell-bar] {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: var(--sp-layer-bar, 30);
  display: flex;
  width: var(--sp-bar-outer);
  min-width: var(--sp-bar-outer);
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-small);
  padding:
    var(--sp-padding-large)
    var(--sp-border-thickness);
  color: var(--sp-color-on-surface);
  background: transparent;
  font-family: var(--sp-font-sans);
}

.caelestia-sidebar[data-shell-bar] :is(a, button) {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.caelestia-sidebar[data-shell-bar] :is(a, button)::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  content: "";
  opacity: 0;
  transition: opacity var(--sp-duration-normal) var(--sp-curve-standard);
}

.caelestia-sidebar[data-shell-bar] :is(a, button):hover::after,
.caelestia-sidebar[data-shell-bar] :is(a, button):focus-visible::after {
  opacity: var(--sp-opacity-hover);
}

.caelestia-sidebar[data-shell-bar] :is(a, button):active::after {
  opacity: var(--sp-opacity-pressed);
}

.shell-state-ripple {
  position: absolute;
  z-index: 3;
  border-radius: var(--sp-radius-full);
  background: currentColor;
  pointer-events: none;
  transform: scale(0);
  transform-origin: center;
}

.caelestia-sidebar[data-shell-bar]
  :is(.shell-brand, .shell-route, .shell-pinned a, .shell-pinned button, .shell-utilities a, .shell-utilities button, .shell-power) {
  display: grid;
  width: var(--sp-bar-inner);
  height: var(--sp-bar-inner);
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--sp-color-on-surface-variant);
  border: 0;
  border-radius: var(--sp-radius-full);
  background: transparent;
  box-shadow: none;
  font: var(--sp-type-label-medium);
  font-variation-settings: var(--sp-type-axis-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--sp-duration-normal) var(--sp-curve-standard),
    background-color var(--sp-duration-normal) var(--sp-curve-standard),
    transform var(--sp-duration-normal) var(--sp-curve-standard);
}

.caelestia-sidebar[data-shell-bar] .shell-brand {
  position: relative;
  width: var(--sp-bar-inner);
  height: var(--sp-bar-inner);
  margin: 0;
  overflow: hidden;
  color: var(--sp-color-tertiary);
  border-radius: var(--sp-radius-small);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-font-smaller);
  font-style: normal;
  line-height: 1;
  transform: none;
}

.caelestia-sidebar[data-shell-bar] .shell-brand img {
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: 30px;
  height: 30px;
  max-width: none;
  object-fit: contain;
  transform: none;
}

.caelestia-sidebar[data-shell-bar] .shell-brand img[data-shell-brand-variant="light"] {
  opacity: 0;
}

html[data-shell-frame-tone="dark"]
  .caelestia-sidebar[data-shell-bar]
  .shell-brand
  img[data-shell-brand-variant="dark"] {
  opacity: 0;
}

html[data-shell-frame-tone="dark"]
  .caelestia-sidebar[data-shell-bar]
  .shell-brand
  img[data-shell-brand-variant="light"] {
  opacity: 1;
}

.caelestia-sidebar[data-shell-bar] .shell-brand:is(:hover, :focus-visible) {
  transform: scale(1.06);
}

.caelestia-sidebar[data-shell-bar] .shell-workspaces {
  position: relative;
  display: flex;
  width: calc(var(--sp-bar-inner) + var(--sp-bar-group-padding) * 2);
  height: auto;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--sp-bar-group-padding);
  border: 0;
  border-radius: var(--sp-radius-full);
  background: var(--sp-color-surface-container);
  box-shadow: none;
  backdrop-filter: none;
}

.caelestia-sidebar[data-shell-bar] .shell-workspaces::before {
  position: absolute;
  top: calc(var(--sp-bar-group-padding) + var(--sp-padding-small) / 2);
  left: calc(var(--sp-bar-group-padding) + var(--sp-padding-small) / 2);
  z-index: 0;
  display: block;
  width: calc(var(--sp-bar-inner) - var(--sp-padding-small));
  height: calc(var(--sp-bar-inner) - var(--sp-padding-small));
  border-radius: var(--sp-radius-full);
  border: 1px solid var(--sp-color-active-indicator-outline);
  background: var(--sp-color-active-indicator);
  box-shadow: none;
  content: "";
  opacity: var(--sp-workspace-indicator-opacity, 1);
  transform: translate3d(0, var(--sp-workspace-indicator-y, 0), 0);
}

.caelestia-sidebar[data-shell-bar] .shell-workspaces .shell-route {
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--sp-color-outline);
  border-radius: var(--sp-radius-full);
  font-size: var(--sp-bar-icon-size);
}

.caelestia-sidebar[data-shell-bar] .shell-workspaces .shell-route[aria-current="page"] {
  color: var(--sp-color-on-active-indicator);
  background: transparent;
}

.caelestia-sidebar[data-shell-bar] .shell-workspaces .shell-route > .sp-icon {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  line-height: 1;
  transform: translate3d(1px, 1px, 0);
}

.caelestia-sidebar[data-shell-bar] .shell-active-view {
  display: flex;
  min-height: 44px;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-small);
  overflow: hidden;
  color: var(--sp-color-primary);
}

.caelestia-sidebar[data-shell-bar] .shell-active-icon {
  display: grid;
  width: var(--sp-bar-inner);
  height: var(--sp-bar-inner);
  place-items: center;
  color: inherit;
  font-size: var(--sp-bar-icon-size);
}

.caelestia-sidebar[data-shell-bar] .shell-active-icon > .sp-icon {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.caelestia-sidebar[data-shell-bar] .shell-active-label {
  max-height: 100%;
  overflow: hidden;
  color: inherit;
  font: 500 var(--sp-font-smaller) / 1 var(--sp-font-workspace);
  font-variation-settings: normal;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.caelestia-sidebar[data-shell-bar] .shell-pinned {
  display: flex;
  width: var(--sp-bar-inner);
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-small);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.caelestia-sidebar[data-shell-bar] .shell-pinned > :is(a, button) {
  color: var(--sp-color-on-surface-variant);
  font-size: var(--sp-bar-icon-size);
}

.caelestia-sidebar[data-shell-bar] .shell-pinned > :is(a, button) .sp-icon {
  font-family: var(--sp-font-icon);
}

.caelestia-sidebar[data-shell-bar] .shell-pinned > button {
  border: 0;
  background: transparent;
}

.caelestia-sidebar[data-shell-bar] .shell-pinned > :is(a, button)[aria-current="page"],
.caelestia-sidebar[data-shell-bar] .shell-pinned > button[aria-expanded="true"] {
  color: var(--sp-color-primary);
  background: transparent;
}

.caelestia-shell > .shell-tray-popout {
  position: fixed;
  z-index: var(--sp-layer-drawer);
  top: var(--shell-tray-center, 68%);
  left: calc(var(--sp-bar-outer) + var(--sp-space-small));
  display: grid;
  width: 330px;
  gap: var(--sp-space-small);
  padding: var(--sp-padding-large);
  border: 0;
  border-radius: var(--sp-radius-large);
  background: color-mix(in srgb, var(--sp-color-surface-container) 92%, transparent);
  box-shadow: none;
  transform: translateY(-50%) scale(0.8);
  transform-origin: left center;
  backdrop-filter: none;
}

html.fx-blur .caelestia-shell > .shell-tray-popout {
  backdrop-filter: blur(var(--sp-blur-panel));
}

.caelestia-shell > .shell-tray-popout[hidden] {
  display: none;
}

.caelestia-shell > .shell-tray-popout a {
  display: grid;
  min-height: 44px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-space-normal);
  padding: var(--sp-padding-small) var(--sp-padding-normal);
  color: var(--sp-color-on-surface);
  border-radius: var(--sp-radius-full);
  background: transparent;
}

.caelestia-shell > .shell-tray-popout a:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--sp-color-on-surface) 8%, transparent);
}

.caelestia-shell > .shell-tray-popout a:focus {
  outline: 0;
}

.caelestia-shell > .shell-tray-popout a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--sp-color-on-surface);
}

.caelestia-shell > .shell-tray-popout .shell-social-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.caelestia-shell > .shell-tray-popout strong,
.caelestia-shell > .shell-tray-popout small {
  display: block;
}

.caelestia-shell > .shell-tray-popout strong {
  font: var(--sp-type-title-small);
  font-variation-settings: var(--sp-type-axis-sans);
}

.caelestia-shell > .shell-tray-popout small {
  color: var(--sp-color-on-surface-variant);
  font: var(--sp-type-label-small);
  font-variation-settings: var(--sp-type-axis-sans);
}

.caelestia-sidebar[data-shell-bar] .shell-date-time {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  color: var(--sp-color-tertiary);
  font-family: var(--sp-font-clock);
  font-variation-settings: normal;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.caelestia-sidebar[data-shell-bar] .shell-date-time time:first-child {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
}

.caelestia-sidebar[data-shell-bar] .shell-date-time time:last-child {
  color: inherit;
  font-size: var(--sp-font-smaller);
  font-weight: 500;
  letter-spacing: 0;
}

.caelestia-sidebar[data-shell-bar] .shell-utilities {
  display: flex;
  width: calc(var(--sp-bar-inner) + var(--sp-bar-group-padding) * 2);
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-small);
  padding: var(--sp-bar-group-padding);
  border: 0;
  border-radius: var(--sp-radius-full);
  background: var(--sp-color-surface-container);
  box-shadow: none;
  backdrop-filter: none;
}

.caelestia-sidebar[data-shell-bar] .shell-utilities :is(a, button) {
  color: var(--sp-color-secondary);
  font-size: var(--sp-bar-icon-size);
}

.caelestia-sidebar[data-shell-bar] .shell-utilities a[aria-current="page"] {
  color: var(--sp-color-primary);
  background: transparent;
}

.caelestia-shell .caelestia-sidebar[data-shell-bar] .shell-power {
  margin: 0;
  color: var(--sp-color-error);
  font-size: var(--sp-font-normal);
}

.caelestia-sidebar[data-shell-bar] :is(a, button):focus-visible {
  outline: 2px solid var(--sp-color-on-surface);
  outline-offset: 2px;
  box-shadow: none;
}

.caelestia-sidebar[data-shell-bar] [data-shell-tray-toggle]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--sp-color-on-surface);
}

html[data-visual-mode="low"] .caelestia-workspace {
  box-shadow: 0 0 var(--sp-blur-slider-handle-shadow) rgb(0 0 0 / 0.32);
}

@media (max-height: 760px) and (min-width: 721px) {
  .caelestia-sidebar[data-shell-bar] {
    gap: 3px;
    padding-block: var(--sp-padding-smaller);
  }

  .caelestia-sidebar[data-shell-bar] .shell-pinned {
    gap: 2px;
  }

  .caelestia-sidebar[data-shell-bar] .shell-utilities {
    gap: 2px;
    padding-block: var(--sp-padding-smaller);
  }

  .caelestia-sidebar[data-shell-bar] .shell-active-view {
    min-height: var(--sp-bar-inner);
    flex: 0 0 var(--sp-bar-inner);
    gap: 0;
  }

  .caelestia-sidebar[data-shell-bar] .shell-active-label {
    display: none;
  }
}

@media (max-width: 720px), (max-height: 480px) and (orientation: landscape) {
  .caelestia-workspace {
    inset:
      max(var(--sp-border-thickness), env(safe-area-inset-top, 0px))
      max(var(--sp-border-thickness), env(safe-area-inset-right, 0px))
      calc(78px + env(safe-area-inset-bottom, 0px))
      max(var(--sp-border-thickness), env(safe-area-inset-left, 0px));
    border-radius: var(--sp-border-rounding);
  }

  .caelestia-sidebar[data-shell-bar] {
    inset:
      auto
      max(var(--sp-padding-normal), env(safe-area-inset-right, 0px))
      max(var(--sp-padding-normal), env(safe-area-inset-bottom, 0px))
      max(var(--sp-padding-normal), env(safe-area-inset-left, 0px));
    width: auto;
    min-width: 0;
    height: 58px;
    flex-direction: row;
    gap: var(--sp-padding-small);
    padding: var(--sp-padding-smaller);
    border: 0;
    border-radius: var(--sp-radius-large);
    background: var(--sp-color-surface);
    box-shadow: var(--sp-shadow-panel);
  }

  .caelestia-shell .caelestia-sidebar[data-shell-bar] .shell-brand,
  .caelestia-shell .caelestia-sidebar[data-shell-bar] .shell-power,
  .caelestia-sidebar[data-shell-bar] .shell-workspaces .shell-route {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .caelestia-sidebar[data-shell-bar] .shell-workspaces {
    width: auto;
    height: 44px;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    padding: 0;
    border-radius: var(--sp-radius-full);
  }

  .caelestia-sidebar[data-shell-bar] .shell-workspaces::before {
    display: none;
  }

  .caelestia-sidebar[data-shell-bar] .shell-workspaces .shell-route {
    width: min(44px, 12vw);
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .caelestia-sidebar[data-shell-bar]
    .shell-workspaces
    .shell-route[aria-current="page"] {
    color: var(--sp-color-on-active-indicator);
    background: var(--sp-color-active-indicator);
    box-shadow: inset 0 0 0 1px var(--sp-color-active-indicator-outline);
  }

  .caelestia-sidebar[data-shell-bar]
    :is(.shell-active-view, .shell-pinned, .shell-date-time) {
    display: none;
  }

  .caelestia-sidebar[data-shell-bar] .shell-pinned {
    display: contents;
  }

  .caelestia-sidebar[data-shell-bar] .shell-pinned > a {
    display: none;
  }

  .caelestia-sidebar[data-shell-bar]
    .shell-pinned
    > [data-shell-tray-toggle],
  .caelestia-shell .caelestia-sidebar[data-shell-bar] .shell-power {
    position: fixed;
    z-index: var(--sp-layer-controls);
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    margin: 0;
    color: var(--sp-color-on-surface-variant);
    border-radius: var(--sp-radius-full);
    background: var(--sp-color-surface);
    box-shadow: var(--sp-shadow-panel);
  }

  .caelestia-sidebar[data-shell-bar]
    .shell-pinned
    > [data-shell-tray-toggle] {
    left: calc(max(var(--sp-padding-large), env(safe-area-inset-left, 0px)) + 52px);
  }

  .caelestia-shell .caelestia-sidebar[data-shell-bar] .shell-power {
    right: calc(max(var(--sp-padding-large), env(safe-area-inset-right, 0px)) + 52px);
    color: var(--sp-color-error);
  }

  .caelestia-shell > .shell-tray-popout {
    --shell-tray-translate-y: -100%;
    top: calc(var(--shell-tray-center, 50%) - 30px);
    right: max(var(--sp-padding-small), env(safe-area-inset-right, 0px));
    left: max(var(--sp-padding-small), env(safe-area-inset-left, 0px));
    width: auto;
    transform-origin: bottom center;
  }

  body.caelestia-desktop-active
    .caelestia-shell
    .caelestia-sidebar[data-shell-bar]
    .shell-utilities {
    display: none;
  }

  body.caelestia-desktop-active
    .caelestia-shell
    .caelestia-sidebar[data-shell-bar]
    [data-shell-terminal-launcher] {
    display: none;
  }
}

@media (max-width: 390px) {
  .caelestia-sidebar[data-shell-bar] {
    gap: 2px;
    padding-inline: 4px;
  }

  .caelestia-sidebar[data-shell-bar] .shell-workspaces .shell-route {
    width: 44px;
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-policy="standard"]) .shell-wallpaper .caelestia-desktop-wallpaper {
    transition-duration: 1ms;
  }

  html:not([data-motion-policy="standard"]) .shell-wallpaper-canvas {
    display: none;
  }
}

html[data-shell-motion-debug="true"] .shell-wallpaper-canvas {
  display: block;
}

html[data-shell-motion-debug="true"] .shell-wallpaper-motion {
  will-change: transform;
}

html[data-visual-mode="low"] .shell-wallpaper-canvas {
  display: none;
}

html[data-visual-mode="low"] .shell-wallpaper-motion {
  will-change: auto;
}