:root {
  color-scheme: light;
  --dock-height: clamp(66px, 3.72vw, 170px);
  --sand: #e0cfc1;
  --sand-highlight: #f0e3d7;
  --sand-shadow: #d2bdad;
  --sand-gradient: linear-gradient(180deg, var(--sand-highlight) 0%, var(--sand) 58%, var(--sand-shadow) 100%);
  --cream: #f5e9dd;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #8bb5b7;
  color: #302820;
  font-family: "Courier New", Courier, monospace;
}

a { color: inherit; text-decoration: none; }

.desktop {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #cbbdbd url('zuma-web-bg1.jpg') center / cover no-repeat;
}

.desktop::before,
.desktop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.desktop::before {
  display: none;
}

.desktop::after {
  display: none;
}

.wash {
  display: none;
}

.topbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 4.5rem) 0;
  color: #f6e9d8;
  text-shadow: 0 1px rgba(78, 64, 49, .25);
}

.wordmark { display: block; width: fit-content; }
.wordmark img { display: block; width: clamp(14rem, 17vw, 20rem); height: auto; filter: drop-shadow(0 1px 1px rgba(78,64,49,.18)); }

.homepage-rainwave {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: clamp(12rem, 25vh, 21rem);
  width: clamp(39rem, 55vw, 78rem);
  height: auto;
  transform: translate(-50%, -18%);
  pointer-events: none;
  user-select: none;
}

.nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.4vw, 2.8rem);
  padding-top: 0;
  font: 400 clamp(1.25rem, 1.9vw, 2rem)/1 Arial, sans-serif;
}
.nav a { transition: opacity .2s ease; }
.nav a:hover, .nav a:focus-visible { opacity: .58; }

.window-controls, .mini-controls { display: flex; align-items: center; gap: 3px; }
.window-controls img { display: block; width: 34px; height: 32px; image-rendering: pixelated; }

.notice-wrap { position: relative; z-index: 10; display: flex; justify-content: center; padding: clamp(7rem, 14vh, 11rem) 1.5rem calc(var(--dock-height) + 2rem); pointer-events: none; }

.notice-window {
  position: relative;
  z-index: 10;
  pointer-events: auto;
  width: min(800px, 100%);
  max-width: calc(100vw - 3rem);
  padding: 0 6px 28px;
  border: 1px solid #756b5f;
  background: var(--sand-shadow);
  box-shadow: 3px 5px 0 rgba(92,69,51,.22), 0 20px 42px rgba(74,59,47,.19);
}

.notice-window::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  background: linear-gradient(180deg, var(--sand-shadow) 0%, var(--sand) 48%, #c8b09f 100%);
  pointer-events: none;
}

.titlebar {
  position: relative;
  z-index: 2;
  height: 39px;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .45rem;
  margin: 0 -6px;
  border-bottom: 0;
  background: var(--sand-gradient);
  font: 700 1rem Arial, sans-serif;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.titlebar:active { cursor: grabbing; }
.notice-window.is-dragging,
.notice-window.is-dragging * { user-select: none !important; }
.titlebar:focus-visible { outline: 2px solid #355f67; outline-offset: -3px; }

.mini-wave {
  flex: 0 0 auto;
  width: 27px;
  height: 18px;
  background: url('zuma-favicon.png') center / 58px 39px no-repeat;
}
.mini-controls { position: relative; z-index: 5; margin-left: auto; pointer-events: auto; }
.mini-controls img { display: block; width: 24px; height: 23px; image-rendering: pixelated; }
.mini-controls a { display: block; }

.notice-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(160px, 208px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: 2.55rem clamp(1.5rem, 4.5vw, 2.8rem) 3rem;
  border: 0;
  background: var(--cream);
  box-shadow: none;
}

.sunset-art {
  min-height: 228px;
  border: 1px solid rgba(94,77,61,.24);
  background-image: url('zuma-coming-soon-reference.png');
  background-repeat: no-repeat;
  background-size: 1536px 1024px;
  background-position: -403px -414px;
  box-shadow: inset 0 0 26px rgba(67,48,35,.2);
}

.message { min-width: 0; }
.message h1 { margin: 0 0 2.1rem; font: 400 clamp(2.25rem, 4vw, 3.25rem)/1 "Courier New", monospace; letter-spacing: -.12rem; }
.message p { margin: 0; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.42; }
.message .invite { margin-top: 1.8rem; max-width: 100%; overflow-wrap: anywhere; }

form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, 116px); gap: 1rem; width: 100%; max-width: 100%; margin-top: 1.1rem; }
input, button {
  min-width: 0;
  height: 43px;
  border: 1px solid #8a7b6c;
  background: rgba(239,229,217,.55);
  color: #372e27;
  font: 1.05rem Arial, sans-serif;
  box-shadow: inset 1px 1px 3px rgba(80,59,43,.17), 1px 1px rgba(255,255,255,.75);
}
input { padding: 0 .8rem; }
button { cursor: pointer; border-radius: 3px; background: var(--sand-gradient); box-shadow: inset 1px 1px rgba(255,255,255,.9), inset -1px -1px rgba(80,64,52,.35), 2px 2px 3px rgba(65,48,35,.3); }
button:hover { filter: brightness(1.04); }
button:disabled { cursor: wait; opacity: .7; }
button:active { transform: translate(1px, 1px); box-shadow: inset 1px 1px 3px rgba(65,48,35,.25); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #355f67; outline-offset: 3px; }

.success { margin-top: 1.2rem; padding: .75rem 1rem; border: 1px inset #a6927d; background: rgba(222,210,194,.55); font-size: 1rem; }
.form-error { margin-top: .75rem !important; color: #7b342e; font-size: .88rem !important; }
.resize-grip { position: absolute; z-index: 3; right: 5px; bottom: 2px; color: #786a5d; font: 13px Arial; transform: rotate(-45deg); }

.desktop-folders { position: absolute; z-index: 1; left: clamp(2.5rem, 5.5vw, 6rem); bottom: calc(var(--dock-height) + clamp(2rem, 4vh, 3.5rem)); display: grid; gap: 2.1rem; color: #f5eadc; font: 1.15rem Arial, sans-serif; text-shadow: 0 1px 2px rgba(56,47,38,.45); }
.desktop-folders a { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100px; text-align: center; }
.folder { display: block; width: 58px; height: auto; filter: drop-shadow(1px 2px 1px rgba(80,59,36,.28)); image-rendering: auto; }
.zuma-dock { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: var(--dock-height); overflow: hidden; pointer-events: none; }
.dock-menu-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dock-start-panel { position: absolute; z-index: 2; left: 0; top: 0; width: calc(var(--dock-height) * 3.965); height: 100%; }
.dock-start-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dock-rainwave { position: absolute; left: 4%; top: 50%; width: 27.9%; height: auto; transform: translateY(-50%); }
.dock-zuma-text { position: absolute; left: 34.7%; top: 50%; width: 51.8%; height: auto; transform: translateY(-50%); }
.dock-task-area { position: absolute; z-index: 3; top: 0; right: 0; width: calc(var(--dock-height) * 5.871); height: 100%; }
.dock-task-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dock-icons { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; width: 100%; height: 100%; padding: 0 12%; }
.dock-item { display: grid; place-items: center; width: 100%; height: 100%; }
.dock-item img { display: block; width: auto; max-width: 78%; height: 66.5%; object-fit: contain; image-rendering: auto; }
.dock-item.dock-sign { position: absolute; left: 0; top: 0; width: 24%; height: 100%; transform: translateX(-50%); }
.dock-item.dock-sign img { height: 74.7%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; align-items: start; }
  .wordmark { grid-row: 1; grid-column: 1; justify-self: start; }
  .nav { grid-row: 1; grid-column: 2; padding-top: 0; }
  .notice-wrap { padding-top: 12vh; }
  .desktop-folders { display: none; }
}

@media (max-width: 680px) {
  :root { --dock-height: calc(100vw / 9.836); }
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
    background: #8bb5b7;
  }
  .desktop {
    min-height: calc(100dvh + max(180px, 30vh));
    overflow-x: clip;
    overflow-y: visible;
  }
  .topbar { padding: 2.25rem 1.25rem 0; gap: .75rem; }
  .wordmark img { width: min(11rem, 39vw); }
  .nav { gap: 1rem; font-size: 1rem; }
  .homepage-rainwave {
    left: 50%;
    top: 24vh;
    width: clamp(28.5rem, 129vw, 34rem);
    transform: translate(-50%, -10%);
  }
  .window-controls { display: none; }
  .notice-wrap { padding: 14vh 1rem calc(var(--dock-height) + 2rem); }
  .notice-body { grid-template-columns: 108px minmax(0, 1fr); gap: .65rem .85rem; padding: 1.25rem; }
  .sunset-art {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 108px;
    min-height: 118px;
    background-size: 798px 532px;
    background-position: -209px -215px;
  }
  .message { display: contents; }
  .message h1 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-size: clamp(1.25rem, 5.7vw, 1.5rem);
    letter-spacing: -.06rem;
  }
  .message > p:not(.invite):not(.form-error) { grid-column: 2; grid-row: 2; font-size: .82rem; }
  .message .invite { grid-column: 2; grid-row: 3; align-self: start; margin-top: 0; white-space: normal; font-size: .82rem; }
  .message form,
  .message .success { grid-column: 1 / -1; grid-row: 4; margin-top: .35rem; }
  .message .form-error { grid-column: 1 / -1; grid-row: 5; }
  form { grid-template-columns: minmax(0, 1fr) 82px; gap: .7rem; }
  .dock-start-panel { width: 25vw; }
  .dock-rainwave { display: block; left: 5.5%; width: 30%; }
  .dock-zuma-text { left: 37.3%; width: 55%; }
  .dock-task-area { width: 48vw; }
  .dock-item img { height: 56%; }
  .dock-item.dock-sign img { height: 64%; }
}

@media (max-height: 500px) and (orientation: landscape) and (hover: none) {
  :root { --dock-height: clamp(42px, 11vh, 52px); }
  .notice-window {
    scale: .7;
    transform-origin: top center;
  }
  .homepage-rainwave {
    left: 50%;
    top: 34vh;
    width: min(64vw, 32rem);
    transform: translate(-50%, -8%);
  }
}

@media (max-width: 390px) {
  .dock-rainwave { display: none; }
  .dock-zuma-text { left: 24%; width: 68%; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }