/* Artwork, surfaces, and controls occupy distinct, stable planes. */
.scene[data-key="home"] .bg { overflow: hidden; }
.scene[data-key="home"].os-depth-active .bg > img,
.scene[data-key="home"].os-depth-active .bg > video {
  transform: translate3d(var(--os-depth-x, 0px), var(--os-depth-y, 0px), 0) scale(1.025);
}
#dock {
  display: flex; gap: 4px; padding: 8px;
  max-width: calc(100% - 24px);
  background: rgba(24, 26, 29, .82);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
}
#dock > span, #dock > span.on {
  box-sizing: border-box; flex: 0 0 98px; width: 98px; min-width: 0;
  height: 46px; padding: 8px; gap: 8px; justify-content: center;
}
#dock > span b, #dock > span.on b,
#dock > span:hover b, #dock > span:focus-visible b,
#dock > span.peek b, #dock > span.on:hover b, #dock > span.on.peek b {
  max-width: none; opacity: 1; margin: 0; overflow: visible;
  transform: none; transition: none; font-size: 10px; letter-spacing: 0;
  text-transform: none; white-space: nowrap;
}
#dock > span svg { flex: 0 0 18px; width: 18px; height: 18px; }
#dock .rule { top: 8px; bottom: 8px; }
#dock .os-display-launch {
  position: relative; display: grid; place-items: center; flex: 0 0 44px;
  width: 44px; height: 46px; padding: 0; color: #fff;
  border: 0; border-left: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0 8px 8px 0; background: transparent; cursor: pointer;
  transition: background 160ms ease;
}
#dock .os-display-launch:hover { background: rgba(255, 255, 255, .08); }
.os-display-launch img, .os-display-close img { filter: brightness(0) invert(1); pointer-events: none; }
#dock .os-display-launch:focus-visible, .os-display-close:focus-visible {
  outline: 2px solid #97d9ff; outline-offset: 2px;
}
#os-display {
  position: fixed; inset: auto 20px 100px auto; margin: 0;
  box-sizing: border-box; width: 320px; max-width: calc(100% - 32px);
  max-height: calc(100dvh - 120px); overflow: auto;
  padding: 20px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px;
  background: rgba(25, 27, 30, .96); color: #f7f8fa;
  font: 400 14px/1.5 var(--sans, sans-serif); letter-spacing: 0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
#os-display[open] { animation: os-display-arrive 180ms ease-out both; }
#os-display::backdrop { background: rgba(0, 0, 0, .16); }
#os-display header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
#os-display h2 { margin: 0; font-size: 17px; line-height: 1.4; letter-spacing: 0; }
.os-display-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .06); cursor: pointer; }
.os-display-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; border-top: 1px solid rgba(255, 255, 255, .08); cursor: pointer; }
.os-display-row span { min-width: 0; }
.os-display-row input { position: absolute; right: 0; width: 42px; height: 28px; opacity: 0; cursor: pointer; margin: 0; }
.os-display-row i { box-sizing: border-box; flex: 0 0 42px; width: 42px; height: 26px; border: 1px solid #72767b; border-radius: 20px; background: #44494d; pointer-events: none; transition: background 160ms ease; }
.os-display-row i::after { content: ''; display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%; background: #fff; transition: transform 160ms ease; }
.os-display-row input:checked + i { background: #278064; border-color: #48be97; }
.os-display-row input:checked + i::after { transform: translateX(16px); }
.os-display-row input:focus-visible + i { outline: 2px solid #97d9ff; outline-offset: 3px; }
.os-display-row:has(input:disabled) { opacity: .5; cursor: default; }
.os-display-row input:disabled { cursor: default; }
.os-display-system { color: #ced4d9; font-size: 12px; margin: 0 0 12px; }
@keyframes os-display-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.still *, body.still *::before, body.still *::after {
  animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important;
}
body.still .bgv, body.still .bgv2 { opacity: 0 !important; }
body.noambient [data-header-light] { visibility: hidden; }
body.still .scene[data-key="home"] .bg > img,
body.nodepth .scene[data-key="home"] .bg > img,
body.nodepth .scene[data-key="home"] .bg > video { transform: none !important; }
@media (max-width: 760px) {
  #dock { width: calc(100% - 24px); bottom: max(16px, env(safe-area-inset-bottom)); gap: 2px; padding: 6px; }
  #dock > span, #dock > span.on { flex: 1 1 0; width: 0; height: 46px; padding: 4px 0; gap: 5px; flex-direction: column; }
  #dock > span b, #dock > span.on b, #dock > span:hover b, #dock > span:focus-visible b,
  #dock > span.peek b, #dock > span.on:hover b, #dock > span.on.peek b {
    font: 500 9px/1.2 var(--sans, sans-serif);
  }
  #dock .os-display-launch { flex-basis: 36px; width: 36px; }
  #dock .rule { top: 6px; bottom: 6px; }
  #os-display { right: 16px; bottom: max(92px, calc(env(safe-area-inset-bottom) + 76px)); }
}
@media (prefers-reduced-motion: reduce) {
  #os-display, .os-display-row i, .os-display-row i::after { animation: none !important; transition: none !important; }
  .scene[data-key="home"] .bg > img, .scene[data-key="home"] .bg > video { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  #dock, #os-display { background: #1b1d20; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #a4a8ac; }
}
@media (forced-colors: active) {
  .os-display-row input { opacity: 1; appearance: auto; }
  .os-display-row i { visibility: hidden; }
  #dock, #os-display { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .os-display-launch img, .os-display-close img { display: none; }
  .os-display-launch::after, .os-display-close::after {
    content: ''; width: 20px; height: 20px; background: ButtonText;
    mask: url('/everside-community/display.svg') center / contain no-repeat;
  }
  .os-display-close::after { mask-image: url('/everside-community/close.svg'); }
}