/* Self-hosted faces (scripts/pull-fonts.mjs); nothing is fetched from Google. */
@import url('/font/fonts.css');

/* Display face. 124 glyphs: no `$`, `[` or `]`. Headings and the wordmark
   only, never body or money. Mapped at 400 and 800 so display headings can
   request 800 (the system-sans fallback) without faux-bolding Scoville. */
@font-face {
  font-family: "Scoville";
  src: url("/font/Scoville-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Scoville";
  src: url("/font/Scoville-Regular.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ===== brandkit, mirrors src/app/globals.css (dark) ===== */
  --ground: #161214;
  --ground-2: #1f191c;
  --surface: #282024;
  --surface-2: #31272c;
  --line: #403239;
  --line-2: #52444b;
  --oat: #f5f0f2;
  --oat-2: #d5ccd0;
  --muted-ink: #a2949a;
  --blaze: #EF3472;
  --blaze-rgb: 239 52 114;
  --blaze-ink: #ef3472;
  --blaze-dim: #cb2c61;
  --on-blaze: #1a0503;
  --loden: #a3c55c;
  --brass: #efc03c;
  --brass-dim: #8d640e;
  /* Saturated tile faces. Stay these values in both themes so the featured
     gold, blaze apps, and loden camp read the same on the desk and the hero. */
  --icon-gold: #efc03c;
  --icon-app: #ef3472;
  --icon-camp: #8f5f74;
  --danger: #e5484d;
  --blaze-soft: rgb(var(--blaze-rgb) / 0.16);
  --blaze-line: rgb(var(--blaze-rgb) / 0.34);
  --loden-soft: rgba(163, 197, 92, 0.16);
  --loden-line: rgba(163, 197, 92, 0.34);
  --brass-soft: rgba(239, 192, 60, 0.16);
  --brass-line: rgba(239, 192, 60, 0.34);
  --ink-soft: rgba(255, 255, 255, 0.06);
  --chrome: rgba(31, 25, 28, 0.72);
  --chrome-solid: #1f191c;
  --boot-glow: rgba(245, 240, 242, 0.85);

  /* ===== the survey layer (section 20) ===== */
  /* The lift on a raised surface. White in dark, because the ground is
     nearly black and light is what raises a thing off it. */
  --survey-lift: linear-gradient(165deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 36%, rgba(255, 255, 255, 0) 68%);
  /* The station dot. Same colour as the wallpaper grid, far quieter. */
  --survey-dot: rgb(var(--blaze-rgb) / 0.1);
  /* The fresnel: a lit limb, brightest at the top edge. */
  --survey-rim: rgb(var(--blaze-rgb) / 0.24);
  --survey-rim-soft: rgb(var(--blaze-rgb) / 0.07);
  /* The contact edge, the line where a raised thing meets what is under it. */
  --survey-contact: rgba(0, 0, 0, 0.5);
  /* Dark: the ground is nearly black, so a shadow cannot darken it further.
     The edge is won by lifting the rim instead. */
  --survey-edge: 0 0 0 1px rgb(var(--blaze-rgb) / 0.1), 0 2px 10px -2px rgba(0, 0, 0, 0.7);
  --survey-border: var(--line-2);

  /* ===== aliases the rest of this sheet already speaks ===== */
  --red: var(--blaze);
  --red-bright: var(--blaze);
  --red-dim: var(--blaze-dim);
  --red-glow: rgb(var(--blaze-rgb) / 0.45);
  --gold: var(--brass);
  --gold-dim: var(--brass-dim);
  --white: var(--oat);
  --bright: var(--oat);
  --gray: var(--oat-2);
  --dim: var(--muted-ink);
  --dark: var(--ground);
  --bg: var(--ground);
  --bg-desktop: var(--ground);
  --bg-window: var(--surface);
  --bg-titlebar: var(--ground-2);
  --border: var(--line);
  --border-light: var(--line-2);
  --close: var(--danger);
  --close-hover: #ef5f63;

  --font-mono: "Fira Code", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --font: var(--font-mono);
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Scoville", system-ui, sans-serif;
  --font-icons: "Oswald", system-ui, sans-serif;
  --tracking-display: 0.02em;
  --tracking-label: 0.16em;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --radius-badge: 6px;
  --shadow-window: 0 32px 64px -14px rgba(0, 0, 0, 0.7), 0 8px 20px -8px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 22px 44px -10px rgba(0, 0, 0, 0.66), 0 8px 16px -8px rgba(0, 0, 0, 0.46);
  --taskbar-h: 52px;
  /* Icon column occupancy (left offset + tile width). Wallpaper branding
     centers in the remaining desktop, not under the rail. */
  --desktop-icon-rail: 90px;
  color-scheme: dark;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden;
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app-glyph {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
  stroke: none;
  color: inherit;
  flex-shrink: 0;
}

/* ========== BOOT SCREEN ========== */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ground);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s;
  overflow: hidden;
}

.boot-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--ground);
}

.boot-gradient-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 0;
}

.boot-gas {
  position: absolute;
  inset: -22%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Haze in the brand's own colours: blaze, loden, brass over oat.
   Screen lifts them off the dark ground; on the cream one it has to be
   multiply or every cloud blows out to white. */
.boot-gas-cloud {
  position: absolute;
  mix-blend-mode: screen;
  will-change: transform, border-radius, opacity;
  transform-origin: 50% 50%;
}

html[data-theme="light"] .boot-gas-cloud {
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.boot-gas-cloud--a {
  width: 58vw;
  height: 42vh;
  left: 4%;
  top: 22%;
  filter: blur(88px);
  background: radial-gradient(ellipse at 42% 48%,
    rgb(var(--blaze-rgb) / 0.42) 0%,
    rgba(239, 192, 60, 0.22) 34%,
    rgba(245, 240, 242, 0.1) 58%,
    transparent 74%);
  border-radius: 58% 42% 48% 52% / 42% 58% 46% 54%;
  animation: gas-float-a 42s ease-in-out infinite;
}

.boot-gas-cloud--b {
  width: 50vw;
  height: 46vh;
  right: -4%;
  top: 18%;
  filter: blur(96px);
  background: radial-gradient(ellipse at 58% 44%,
    rgba(163, 197, 92, 0.36) 0%,
    rgba(120, 152, 66, 0.2) 40%,
    rgba(85, 112, 42, 0.08) 64%,
    transparent 78%);
  border-radius: 44% 56% 40% 60% / 52% 38% 62% 48%;
  animation: gas-float-b 51s ease-in-out infinite;
}

.boot-gas-cloud--c {
  width: 72vw;
  height: 36vh;
  left: 12%;
  bottom: 8%;
  filter: blur(110px);
  background: radial-gradient(ellipse at 50% 55%,
    rgba(245, 240, 242, 0.26) 0%,
    rgba(239, 192, 60, 0.2) 38%,
    rgb(var(--blaze-rgb) / 0.12) 60%,
    transparent 76%);
  border-radius: 48% 52% 62% 38% / 55% 45% 50% 50%;
  animation: gas-float-c 58s ease-in-out infinite;
}

.boot-gas-cloud--d {
  width: 34vw;
  height: 40vh;
  left: 28%;
  top: 6%;
  filter: blur(72px);
  background: radial-gradient(ellipse at 40% 50%,
    rgba(163, 197, 92, 0.3) 0%,
    rgba(245, 240, 242, 0.14) 46%,
    transparent 72%);
  border-radius: 62% 38% 55% 45% / 40% 60% 36% 64%;
  animation: gas-float-d 46s ease-in-out infinite;
}

.boot-gas-cloud--e {
  width: 40vw;
  height: 34vh;
  right: 8%;
  bottom: 18%;
  filter: blur(80px);
  background: radial-gradient(ellipse at 55% 42%,
    rgb(var(--blaze-rgb) / 0.3) 0%,
    rgba(239, 192, 60, 0.16) 36%,
    rgba(141, 100, 14, 0.08) 62%,
    transparent 78%);
  border-radius: 40% 60% 48% 52% / 58% 42% 52% 48%;
  animation: gas-float-e 54s ease-in-out infinite;
}

.boot-gas-cloud--f {
  width: 46vw;
  height: 28vh;
  left: 38%;
  top: 38%;
  filter: blur(120px);
  background: radial-gradient(ellipse at 50% 50%,
    rgba(245, 240, 242, 0.18) 0%,
    rgba(213, 204, 208, 0.1) 48%,
    transparent 74%);
  border-radius: 50% 50% 42% 58% / 46% 54% 48% 52%;
  animation: gas-float-a 63s ease-in-out infinite reverse;
}

.boot-gas-cloud--g {
  width: 28vw;
  height: 48vh;
  left: -4%;
  top: 40%;
  filter: blur(76px);
  background: radial-gradient(ellipse at 48% 46%,
    rgba(239, 192, 60, 0.26) 0%,
    rgb(var(--blaze-rgb) / 0.12) 44%,
    transparent 70%);
  border-radius: 46% 54% 38% 62% / 60% 40% 55% 45%;
  animation: gas-float-b 47s ease-in-out infinite reverse;
}

@keyframes gas-float-a {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 58% 42% 48% 52% / 42% 58% 46% 54%;
    opacity: 0.55;
  }
  40% {
    transform: translate3d(8%, -6%, 0) scale(1.12);
    border-radius: 42% 58% 40% 60% / 55% 40% 60% 45%;
    opacity: 0.78;
  }
  70% {
    transform: translate3d(-5%, 4%, 0) scale(0.94);
    border-radius: 62% 38% 55% 45% / 38% 62% 42% 58%;
    opacity: 0.5;
  }
}

@keyframes gas-float-b {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1.04);
    border-radius: 44% 56% 40% 60% / 52% 38% 62% 48%;
    opacity: 0.48;
  }
  35% {
    transform: translate3d(-9%, 5%, 0) scale(0.9);
    border-radius: 56% 44% 58% 42% / 40% 60% 45% 55%;
    opacity: 0.7;
  }
  65% {
    transform: translate3d(6%, -7%, 0) scale(1.16);
    border-radius: 38% 62% 48% 52% / 58% 42% 50% 50%;
    opacity: 0.42;
  }
}

@keyframes gas-float-c {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 48% 52% 62% 38% / 55% 45% 50% 50%;
    opacity: 0.5;
  }
  50% {
    transform: translate3d(-7%, -8%, 0) scale(1.18);
    border-radius: 60% 40% 38% 62% / 42% 58% 48% 52%;
    opacity: 0.72;
  }
}

@keyframes gas-float-d {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.96);
    border-radius: 62% 38% 55% 45% / 40% 60% 36% 64%;
    opacity: 0.4;
  }
  50% {
    transform: translate3d(10%, 6%, 0) scale(1.14);
    border-radius: 40% 60% 42% 58% / 62% 38% 55% 45%;
    opacity: 0.68;
  }
}

@keyframes gas-float-e {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 40% 60% 48% 52% / 58% 42% 52% 48%;
    opacity: 0.45;
  }
  45% {
    transform: translate3d(-8%, -5%, 0) scale(1.1);
    border-radius: 55% 45% 60% 40% / 42% 58% 40% 60%;
    opacity: 0.66;
  }
  75% {
    transform: translate3d(5%, 7%, 0) scale(0.92);
    border-radius: 46% 54% 38% 62% / 50% 50% 58% 42%;
    opacity: 0.38;
  }
}

/* Type roles. Display is the wordmark and page-level headings. Icon labels
   are Oswald — condensed like Scoville, full glyph set, readable at 12px.
   UI labels and data are mono, uppercase, wide. Body is system sans. */
.desktop-wallpaper-kicker,
.desktop-wallpaper-title,
.mobile-site-header-name,
.start-menu-brand,
.about-window .doc-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.start-menu-label,
.desk-tab,
.taskbar-item,
.taskbar-start-label,
.taskbar-ca-tag,
.taskbar-tray-lore,
.start-menu-item,
.start-menu-sub,
.start-menu-shutdown,
.docs-nav-link,
.about-window .guide-eyebrow,
.about-window .about-rail-title,
.about-window .doc-h2,
.desktop-ca-tag,
.desktop-ca-copy,
.boot-enter,
.pane-header .pane-title {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.desktop-icon-img img,
.desktop-icon-img svg,
.profile-avatar img,
.about-hero img,
.aim-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  color: var(--red-bright);
}

.profile-avatar,
.about-hero-img {
  background: var(--ground-2);
  color: var(--blaze);
}

.boot-screen.off { opacity: 0; pointer-events: none; }

.ascii-flood {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-family: var(--font);
  font-size: clamp(5px, 1.05vmin, 9px);
  line-height: 1.05;
  white-space: pre;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  pointer-events: none;
  background: transparent;
}

.ascii-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: transparent;
}

.ascii-flood .ascii-row {
  white-space: pre;
  letter-spacing: 0;
  line-height: 1.05;
}

.ascii-flood .ascii-cell {
  display: inline-block;
  text-align: center;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ascii-flood .ascii-cell--empty {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  text-shadow: none !important;
  filter: none !important;
}

.ascii-row--gap {
  height: 0.65em;
}

.ascii-flood .ascii-row--ansem .ascii-cell:not(.ascii-cell--empty) {
  color: var(--red-bright);
  -webkit-text-fill-color: var(--red-bright);
}

.ascii-flood .ascii-row--ai .ascii-cell:not(.ascii-cell--empty) {
  color: #a3c55c;
  -webkit-text-fill-color: #a3c55c;
}

/* One-shot left-to-right sweep on first boot load */
.ascii-flood .ascii-cell--sweep {
  opacity: 0;
  animation: ascii-ltr-sweep 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--col, 0) * 72ms + var(--row, 0) * 10ms);
}

.ascii-flood .ascii-row--ansem .ascii-cell--sweep {
  animation-name: ascii-ltr-sweep-red;
}

.ascii-flood .ascii-row--ai .ascii-cell--sweep {
  animation-name: ascii-ltr-sweep-ai;
}

.ascii-stack--sweep::after {
  content: "";
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: -20%;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(var(--blaze-rgb) / 0.08) 35%,
    var(--boot-glow) 50%,
    rgb(var(--blaze-rgb) / 0.08) 65%,
    transparent 100%
  );
  filter: blur(6px);
  opacity: 0;
  animation: ascii-sweep-glare 2.4s ease-out forwards;
}

@keyframes ascii-ltr-sweep {
  0% {
    opacity: 0;
    transform: translateX(-0.55em) scale(0.72);
  }
  55% {
    opacity: 1;
    transform: translateX(0.06em) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes ascii-ltr-sweep-red {
  0% {
    opacity: 0;
    transform: translateX(-0.55em) scale(0.72);
    text-shadow: 0 0 0 transparent;
  }
  45% {
    opacity: 1;
    text-shadow: 0 0 18px rgb(var(--blaze-rgb) / 0.95), 0 0 8px rgba(255, 140, 70, 0.7);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    text-shadow: none;
  }
}

@keyframes ascii-ltr-sweep-ai {
  0% {
    opacity: 0;
    transform: translateX(-0.55em) scale(0.72);
    text-shadow: 0 0 0 transparent;
  }
  45% {
    opacity: 1;
    text-shadow: 0 0 16px #a3c55c, 0 0 6px #a3c55c;
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    text-shadow: none;
  }
}

@keyframes ascii-sweep-glare {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(420%);
  }
}

/* ========== POST-SWEEP: ASCII TEXT ONLY ========== */
.ascii-stack--lit .ascii-cell--sweep {
  /* clear one-shot sweep so the new glyph anims can take over */
  animation: none;
  opacity: 1;
}

.ascii-stack--lit .ascii-row--ansem .ascii-cell:not(.ascii-cell--empty) {
  animation:
    ascii-glyph-ignite-red 0.85s cubic-bezier(0.16, 1, 0.3, 1) both,
    ascii-glyph-pulse-red 1.35s steps(1) infinite;
  animation-delay:
    calc(var(--col, 0) * 16ms + var(--row, 0) * 18ms),
    calc(0.85s + var(--col, 0) * 16ms + var(--row, 0) * 18ms);
}

.ascii-stack--lit .ascii-row--ai .ascii-cell:not(.ascii-cell--empty) {
  animation:
    ascii-glyph-ignite-ai 0.85s cubic-bezier(0.16, 1, 0.3, 1) both,
    ascii-glyph-pulse-ai 1.35s steps(1) infinite;
  animation-delay:
    calc(0.06s + var(--col, 0) * 16ms + var(--row, 0) * 18ms),
    calc(0.91s + var(--col, 0) * 16ms + var(--row, 0) * 18ms);
}

@keyframes ascii-glyph-ignite-red {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ascii-glyph-ignite-ai {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ascii-glyph-pulse-red {
  0%, 49% {
    color: var(--red-bright);
    -webkit-text-fill-color: var(--red-bright);
  }
  50%, 100% {
    color: #a3c55c;
    -webkit-text-fill-color: #a3c55c;
  }
}

@keyframes ascii-glyph-pulse-ai {
  0%, 49% {
    color: #a3c55c;
    -webkit-text-fill-color: #a3c55c;
  }
  50%, 100% {
    color: var(--red-bright);
    -webkit-text-fill-color: var(--red-bright);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ascii-flood .ascii-cell--sweep {
    animation-name: ascii-ltr-sweep-fade;
    animation-duration: 0.25s;
    animation-delay: calc(var(--col, 0) * 48ms + var(--row, 0) * 8ms);
    transform: none !important;
    text-shadow: none !important;
  }
  .ascii-stack--sweep::after {
    display: none;
  }
  .ascii-stack--lit .ascii-row--ansem .ascii-cell:not(.ascii-cell--empty),
  .ascii-stack--lit .ascii-row--ai .ascii-cell:not(.ascii-cell--empty) {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
  .ascii-flood .ascii-row--ansem .ascii-cell:not(.ascii-cell--empty) {
    color: var(--red-bright);
    -webkit-text-fill-color: var(--red-bright);
  }
  .ascii-flood .ascii-row--ai .ascii-cell:not(.ascii-cell--empty) {
    color: #a3c55c;
    -webkit-text-fill-color: #a3c55c;
  }
  .boot-enter {
    animation: blink 1.5s steps(1) infinite;
    color: #a3c55c;
    -webkit-text-fill-color: #a3c55c;
    text-shadow: none;
  }
  .boot-gas-cloud {
    animation: none !important;
  }

  .desk-loader-mark::before,
  .desk-loader-silhouette,
  .desk-loader-scan,
  .desk-loader-bar > span,
  .desk-loader-label::after {
    animation: none !important;
  }

  .desk-loader-scan {
    display: none;
  }

  .desk-loader-label::after {
    content: '…';
  }
}

@keyframes ascii-ltr-sweep-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.boot-enter {
  position: absolute;
  bottom: max(40px, calc(16px + env(safe-area-inset-bottom, 0px)));
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  z-index: 3;
  max-width: min(92vw, 560px);
  text-align: center;
  line-height: 1.45;
  padding: 0 12px;
  color: #a3c55c;
  -webkit-text-fill-color: #a3c55c;
  text-shadow: 0 0 12px rgba(163, 197, 92, 0.28);
  animation: boot-enter-flash 1.35s steps(1) infinite;
}

@keyframes boot-enter-flash {
  0%, 49% {
    color: #a3c55c;
    -webkit-text-fill-color: #a3c55c;
    text-shadow: 0 0 12px #a3c55c;
  }
  50%, 100% {
    color: var(--red-bright);
    -webkit-text-fill-color: var(--red-bright);
    text-shadow: 0 0 14px rgb(var(--blaze-rgb) / 0.55);
  }
}

@keyframes boot-red-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

/* Cursor click / shot ripple */
@keyframes shot-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

@keyframes shot-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

@keyframes shot-fade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
}

.shot-effect {
  position: fixed;
  pointer-events: none;
  z-index: 10050;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
  animation: shot-fade 0.3s ease-out forwards;
}

.shot-effect::before,
.shot-effect::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.shot-effect::before {
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.95);
  transform: translate(-50%, -50%);
  animation: shot-pulse 0.35s ease-out forwards;
}

.shot-effect::after {
  width: 32px;
  height: 32px;
  border: 2px solid rgb(var(--blaze-rgb) / 0.85);
  background: transparent;
  transform: translate(-50%, -50%);
  animation: shot-ripple 0.45s ease-out forwards;
}

/* ========== DESKTOP ========== */
.terminal-container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  transition: opacity 0.4s;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.terminal-container.live { opacity: 1; }

/* Desktop wallpaper: the mark, large */
.desktop-wallpaper {
  position: absolute;
  inset: 0;
  bottom: var(--taskbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.desktop-wallpaper-art-img {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: min(56vw, 520px);
  max-height: min(62vh, 480px);
  aspect-ratio: 702 / 780;
  /* Head/snout is the layout box; bandana ties paint outside to the left. */
  overflow: visible;
  opacity: 0.62;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wp-mark { fill: var(--blaze); }

.desktop-gas {
  display: none;
}

/* Phone home bar and iPhone dock. Desktop never shows them; mobile-shell turns them on. */
.mobile-site-header,
.phone-dock {
  display: none;
}

.desktop-wallpaper::after {
  display: none;
}

.terminal-container::before {
  display: none;
}

.terminal-container::after {
  display: none;
}

/* ===== DESKTOP AREA (the window) ===== */
.desktop-area {
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ===== DESKTOP ICONS ===== */
.desktop-icons {
  position: absolute;
  top: 20px;
  left: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 92px;
  user-select: none;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.desktop-icon {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 80px;
  min-height: 86px;
  padding: 8px 4px 6px;
  box-sizing: border-box;
  border: 1px solid transparent;
  outline: none;
  border-radius: 6px;
  background: transparent;
  color: var(--white);
  font-family: var(--font);
  cursor: default;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.desktop-icon:hover {
  background: transparent;
  border-color: transparent;
}

.desktop-icon.selected {
  background: transparent;
  border-color: transparent;
}

.desktop-icon:active {
  transform: scale(0.96);
}

.desktop-icon-img {
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  box-sizing: border-box;
}

.desktop-icon-img svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex-shrink: 0;
}

.desktop-icon-label {
  font-size: 0.72rem;
  line-height: 1.25;
  min-height: 2.5em;
  max-height: 2.5em;
  text-align: center;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  word-break: break-word;
  max-width: 100%;
  align-self: stretch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== DESKTOP CA STRIP ===== */
.desktop-ca-strip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  max-width: min(520px, calc(100% - 120px));
  pointer-events: none;
}

.desktop-ca-body {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 520px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--red-bright);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: left;
  white-space: nowrap;
}

.desktop-ca-body:hover:not(:disabled) {
  border-color: var(--red-bright);
  background: rgba(90, 0, 0, 0.22);
  box-shadow: 0 0 6px var(--red-glow);
}

.desktop-ca-body:disabled {
  cursor: default;
  opacity: 1;
}

.desktop-ca-body:disabled .desktop-ca-address,
.desktop-ca-body:disabled .desktop-ca-tag,
.desktop-ca-body:disabled .desktop-ca-sep,
.desktop-ca-body:disabled .desktop-ca-copy {
  color: #ffffff;
}

.desktop-ca-body.copied {
  border-color: var(--red);
  background: rgba(90, 0, 0, 0.28);
}

.desktop-ca-tag {
  flex-shrink: 0;
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  color: var(--red-bright);
  text-transform: uppercase;
}

.desktop-ca-sep {
  flex-shrink: 0;
  font-size: 0.42rem;
  color: var(--dim);
}

.desktop-ca-address {
  flex: 1;
  min-width: 0;
  font-size: 0.48rem;
  line-height: 1.35;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-ca-copy {
  flex-shrink: 0;
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  color: var(--dim);
}

.desktop-ca-body:hover:not(:disabled) .desktop-ca-copy {
  color: var(--red-bright);
}

/* Agent icon - portrait */
.icon-agent {
  background: linear-gradient(145deg, #1a0808, #0a0a0a);
  border-color: rgba(204, 0, 0, 0.35);
  padding: 0;
}

.icon-agent img,
.icon-agent video.agent-pfp {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* X icon */
.icon-x {
  background: linear-gradient(145deg, #111, #000);
  color: var(--bright);
  border-color: #333;
}

/* Gallery icon */
.icon-gallery {
  background: linear-gradient(145deg, #111, #000);
  color: var(--bright);
  border-color: #333;
}

.icon-gallery svg {
  width: 24px;
  height: 24px;
}

.icon-gallery video.icon-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.gallery-icon-badge {
  background: #111;
  border: 1px solid #333;
}

.app-window.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92) translateY(24px);
  /* opacity:0 does NOT stop a backdrop-filter. The element is still
     composited, so every window in the DOM ran a full blur pass whether or
     not anybody could see it, and five of them sit in this document.
     Measured at 1440x900 on the shell as it ships: 10 fps without these two
     lines, 58 fps with them, and the two frames are BYTE IDENTICAL (0
     differing pixels of 1,296,000, with the clock frozen so it could not be
     the difference). */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.gallery-window {
  left: 110px;
  right: 110px;
  top: 12px;
  bottom: 12px;
  z-index: 15;
  min-width: 0;
  min-height: 0;
}

.gallery-window::after { display: none; }

.gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.gallery-filter {
  font-family: var(--font);
  font-size: 0.48rem;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.gallery-filter:hover {
  color: var(--white);
  border-color: var(--border-light);
}

.gallery-filter.active {
  color: var(--bright);
  border-color: var(--border-light);
  background: rgba(255, 255, 255, 0.06);
}

.gallery-count {
  margin-left: auto;
  font-size: 0.46rem;
  color: var(--dim);
}

.gallery-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.gallery-grid {
  height: 100%;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-content: start;
}

.gallery-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gallery-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.gallery-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.5rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  border: none;
  padding: 0;
}

.gallery-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gallery-page-btn {
  font-family: var(--font);
  font-size: 0.42rem;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.gallery-page-btn:hover:not(:disabled) {
  color: var(--white);
  border-color: var(--border-light);
  background: rgba(255, 255, 255, 0.04);
}

.gallery-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.gallery-page-info {
  font-size: 0.42rem;
  color: var(--gray);
  min-width: 42px;
  text-align: center;
}

.gallery-section-count {
  color: var(--red-bright);
  font-size: 0.46rem;
}

.gallery-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.gallery-grid::-webkit-scrollbar { width: 4px; }
.gallery-grid::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

.gallery-image-slot {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

.gallery-image-slot.has-image {
  border-style: solid;
  border-color: var(--border-light);
}

.gallery-image-slot.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-image-slot.empty {
  color: var(--dim);
}

.gallery-image-pending {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.45;
}

.gallery-image-label {
  font-size: 0.36rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--dim);
}

.gallery-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.gallery-card.section-reply {
  border-color: rgba(204, 0, 0, 0.22);
}

.gallery-card-reply-to {
  font-size: 0.4rem;
  color: var(--dim);
  line-height: 1.3;
}

.gallery-card-reply-to span {
  color: var(--gray);
}

.gallery-card:hover {
  border-color: var(--border-light);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.gallery-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.gallery-card-channel {
  font-size: 0.42rem;
  color: var(--bright);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gallery-card-type {
  font-size: 0.4rem;
  color: var(--dim);
  text-transform: uppercase;
}

.gallery-card-title {
  font-size: 0.54rem;
  color: var(--bright);
  line-height: 1.35;
}

.gallery-card-preview {
  font-size: 0.48rem;
  color: var(--gray);
  line-height: 1.45;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gallery-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.4rem;
  color: var(--dim);
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.gallery-detail {
  position: absolute;
  inset: 0;
  background: var(--bg-window);
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-grid.hidden { display: none; }

.gallery-detail.hidden { display: none; }

.gallery-back {
  font-family: var(--font);
  font-size: 0.48rem;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  width: fit-content;
}

.gallery-back:hover { color: var(--bright); }

.gallery-detail-meta {
  font-size: 0.46rem;
  color: var(--dim);
  line-height: 1.6;
}

.gallery-detail-image-wrap,
.gallery-detail-image-slot {
  width: 100%;
  max-height: 220px;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}

.gallery-detail-image-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-style: dashed;
}

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

.gallery-detail-image-wrap.hidden,
.gallery-detail-image-slot.hidden {
  display: none;
}

.gallery-detail-content {
  font-size: 0.58rem;
  color: var(--white);
  line-height: 1.65;
  white-space: pre-wrap;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.35);
}

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  font-size: 0.52rem;
  color: var(--dim);
  line-height: 1.6;
}

/* Posts feed preview (explanation + single template card) */
.gallery-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-preview-note {
  border: 1px dashed var(--border-light);
  border-radius: 6px;
  background: rgba(204, 0, 0, 0.04);
  padding: 12px 14px;
}

.gallery-preview-kicker {
  font-size: 0.44rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bright);
  margin-bottom: 6px;
}

.gallery-preview-copy {
  font-size: 0.5rem;
  color: var(--gray);
  line-height: 1.55;
  margin: 0;
}

.backrooms-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.backrooms-template-wrap {
  position: relative;
  max-width: 340px;
}

.backrooms-template-wrap .backrooms-card {
  border-style: dashed;
  opacity: 0.92;
}

.gallery-template-wrap {
  position: relative;
  max-width: 240px;
}

.gallery-template-wrap .gallery-card {
  cursor: default;
  border-style: dashed;
  opacity: 0.92;
}

.gallery-template-wrap .gallery-card:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border);
}

.gallery-template-badge {
  position: absolute;
  top: -7px;
  left: 10px;
  z-index: 2;
  font-size: 0.4rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--bright);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ===== MEDIA VIEWER ===== */
.media-window {
  left: 110px;
  right: 110px;
  top: 12px;
  bottom: 12px;
  z-index: 14;
}

.media-icon-badge {
  background: #111;
  border: 1px solid #333;
}

.media-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.media-banner-tag {
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  color: var(--red-bright);
  text-transform: uppercase;
}

.media-banner-text {
  font-size: 0.46rem;
  color: var(--dim);
  letter-spacing: 0.06em;
}

.media-live {
  margin-left: auto;
  font-size: 0.46rem;
  color: var(--red-bright);
  letter-spacing: 0.08em;
}

.media-grid {
  height: 100%;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  align-content: start;
}

.media-grid::-webkit-scrollbar { width: 4px; }
.media-grid::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

.media-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}

.media-card:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
}

.media-card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
}

.media-card-thumb img,
.media-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.media-card-kind {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--red-bright);
  border: 1px solid rgb(var(--blaze-rgb) / 0.35);
}

.media-card-title {
  font-size: 0.5rem;
  color: var(--white);
  padding: 0 8px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card-meta {
  font-size: 0.42rem;
  color: var(--dim);
  padding: 0 8px 8px;
}

.media-detail {
  position: absolute;
  inset: 0;
  background: var(--bg-window);
  padding: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.media-detail.hidden { display: none; }

.media-detail-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.media-detail-stage .media-wmp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.media-wmp-surface {
  position: absolute;
  inset: 0;
  background: #000;
}

.media-wmp-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.media-wmp-controls {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 46px;
  background: rgba(20, 20, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  backdrop-filter: blur(4px);
}

.media-wmp[data-no-audio] .media-wmp-controls {
  grid-template-columns: auto auto auto 1fr auto;
}

.wmp-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: 0.52rem;
  height: 28px;
  width: 34px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: border-color 0.15s, transform 0.15s;
}

.wmp-btn:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
}

.wmp-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.wmp-play-icon {
  transform: translateX(1px);
}

.wmp-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.wmp-time {
  font-size: 0.44rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  width: 42px;
  text-align: center;
}

.wmp-volume {
  display: grid;
  grid-template-columns: auto 84px;
  align-items: center;
  gap: 10px;
}

.wmp-seek,
.wmp-vol {
  width: 100%;
  height: 4px;
}

.wmp-seek::-webkit-slider-thumb,
.wmp-vol::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red-bright);
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.wmp-seek::-webkit-slider-runnable-track,
.wmp-vol::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.media-detail-meta {
  font-size: 0.46rem;
  color: var(--dim);
  line-height: 1.6;
}

.media-detail-caption {
  flex-shrink: 0;
  max-height: 56px;
  overflow: hidden;
  font-size: 0.48rem;
  color: var(--white);
  line-height: 1.45;
  white-space: pre-wrap;
  border-top: 1px solid var(--border);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  padding: 10px 6px 0 6px;
  background: rgba(0, 0, 0, 0.28);
}

.media-grid.hidden { display: none; }

/* ===== BACKROOMS (X mortal layer) ===== */
.icon-backrooms {
  background: #000;
  border-color: #333;
  padding: 0;
}

.icon-backrooms video.icon-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.backrooms-icon-badge {
  background: #111;
  border: 1px solid #333;
}

/* ===== ABOUT / GUIDE WINDOW ===== */
.icon-about {
  background: linear-gradient(145deg, #111, #000);
  border-color: #333;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-about video.icon-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.about-icon-badge {
  background: linear-gradient(135deg, var(--red-dim), #111);
  border: 1px solid var(--border-light);
}

.icon-identity {
  background: linear-gradient(145deg, #1a120c, #0c0c0b);
  color: var(--white);
  border-color: rgb(var(--blaze-rgb) / 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-identity svg {
  width: 22px;
  height: 22px;
  display: block;
}

.identity-icon-badge {
  background: linear-gradient(135deg, var(--red-bright), #5a1c0a);
  border: 1px solid var(--border-light);
}

.icon-desk {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1a120c, #0c0c0b);
  color: var(--white);
  border-color: rgb(var(--blaze-rgb) / 0.4);
}

.icon-desk svg {
  width: 18px;
  height: 18px;
}

.desk-icon-badge {
  background: linear-gradient(135deg, var(--red-bright), #5a1c0a);
  border: 1px solid var(--border-light);
}

.desk-window {
  left: 110px;
  right: 110px;
  top: 12px;
  bottom: 12px;
  z-index: 16;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.desk-window::after { display: none; }

.desk-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.desk-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--gray);
  font-family: var(--font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.desk-tab .app-glyph {
  width: 14px;
  height: 14px;
}

.desk-tab:hover,
.desk-tab.active {
  color: var(--bright);
  border-color: var(--red-bright);
  background: rgb(var(--blaze-rgb) / 0.16);
}

.desk-frame-wrap {
  position: relative;
  z-index: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.desk-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  background: var(--bg-window, #0c0c0b);
}

.desk-frame-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.desk-frame-loader.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.desk-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: var(--oat);
}

.desk-loader-mark {
  position: relative;
  width: 4.75rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desk-loader-mark::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: var(--blaze-soft);
  filter: blur(18px);
  animation: desk-loader-glow 1.8s ease-in-out infinite;
  pointer-events: none;
}

.desk-loader-silhouette {
  position: relative;
  z-index: 1;
  display: block;
  width: 4.4rem;
  height: 4.4rem;
  background: var(--blaze);
  -webkit-mask: url('/favicon.svg') center / contain no-repeat;
  mask: url('/favicon.svg') center / contain no-repeat;
  animation: desk-loader-breathe 1.8s ease-in-out infinite;
}

.desk-loader-scan {
  position: absolute;
  /* Parked at the start of its travel; the movement is a transform, not a
     change of `top`. See the keyframes below. */
  top: 12%;
  left: 10%;
  right: 10%;
  height: 2px;
  will-change: transform;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--blaze), transparent);
  box-shadow: 0 0 10px var(--red-glow);
  animation: desk-loader-scan 1.65s ease-in-out infinite;
  pointer-events: none;
}

.desk-loader-bar {
  width: 7.5rem;
  height: 3px;
  margin-top: 1.35rem;
  overflow: hidden;
  border-radius: 99px;
  background: var(--line);
}

.desk-loader-bar > span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--blaze);
  box-shadow: 0 0 10px var(--red-glow);
  animation: desk-loader-bar 1.15s ease-in-out infinite;
}

.desk-loader-label {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.desk-loader-label::after {
  content: '';
  animation: desk-loader-dots 1.2s steps(4, end) infinite;
}

@keyframes desk-loader-glow {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes desk-loader-breathe {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50% { transform: scale(1.045); opacity: 1; }
}

/* `top` is a layout property, so animating it re-lays-out the loader on every
   frame of a loop that runs behind every app that uses the desk frame. The
   parent is a fixed 4.4rem, so 12% to 82% of it is 3.08rem, and a transform
   moves the line exactly as far for no layout at all. */
@keyframes desk-loader-scan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(3.08rem); opacity: 0; }
}

@keyframes desk-loader-bar {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(280%); }
}

@keyframes desk-loader-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

.doc-window,
.about-window {
  left: 110px;
  right: 110px;
  top: 12px;
  bottom: 12px;
  z-index: 14;
  min-width: 0;
  min-height: 0;
}

.doc-window::after { display: none; }

.link-window {
  left: 110px;
  right: 110px;
  top: 12px;
  bottom: 12px;
  z-index: 13;
  min-width: 0;
  min-height: 0;
}

.link-window::after { display: none; }

.link-icon-badge-x {
  background: linear-gradient(145deg, #111, #000);
  border: 1px solid #333;
}

.link-window-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-window);
  position: relative;
}

.link-window-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 20px;
  text-align: center;
}

.link-window-card.hidden { display: none; }

.link-window-preview {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #111, #000);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.link-window-preview svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  color: var(--bright);
}

.link-window-preview img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.link-window-heading {
  margin: 0;
  font-size: 0.72rem;
  color: var(--bright);
  letter-spacing: 0.04em;
}

.link-window-desc {
  margin: 0;
  max-width: 360px;
  font-size: 0.5rem;
  color: var(--dim);
  line-height: 1.55;
}

.link-window-cta {
  margin-top: 4px;
  font-family: var(--font);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: rgb(var(--blaze-rgb) / 0.12);
  color: var(--bright);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.link-window-cta:hover {
  background: rgb(var(--blaze-rgb) / 0.22);
  border-color: var(--red-bright);
  color: var(--bright);
}

.link-window-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  background: #000;
}

.link-window-frame.hidden { display: none; }

.doc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(90, 0, 0, 0.18) 0%, #000 45%);
  flex-shrink: 0;
}

.doc-banner-tag {
  font-size: 0.42rem;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.doc-banner-text {
  font-size: 0.42rem;
  color: var(--dim);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 24px;
  font-size: 0.62rem;
  line-height: 1.6;
  color: var(--white);
}

.doc-body::-webkit-scrollbar { width: 5px; }
.doc-body::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

.about-body {
  flex: 1;
  min-height: 0;
}

.about-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(108px, 130px) minmax(0, 1fr) minmax(148px, 188px);
}

.about-scroll {
  padding: 14px 18px 24px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  align-items: start;
}

.about-section--wide {
  grid-column: 1 / -1;
}

.about-rail {
  border-left: 1px solid var(--border);
  padding: 12px 10px 16px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.5rem;
  line-height: 1.45;
}

.about-rail::-webkit-scrollbar { width: 4px; }
.about-rail::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

.about-rail-block + .about-rail-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.about-rail-title {
  font-size: 0.44rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.about-rail-stat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.about-rail-label {
  color: var(--dim);
  flex-shrink: 0;
}

.about-rail-val {
  color: var(--white);
  text-align: right;
}

.about-rail-val.red { color: var(--red-bright); }

.about-rail-line {
  color: var(--gray);
  margin-bottom: 4px;
}

.about-rail-pipe {
  color: var(--white);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

.about-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.about-hero-img,
video.about-hero-img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  object-fit: cover;
  display: block;
  background: #000;
}

.doc-h1 {
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  font-weight: normal;
  line-height: 1.2;
}

.doc-lead {
  font-size: 0.58rem;
  color: var(--gray);
  margin-top: 4px;
}

.doc-h2 {
  font-size: 0.68rem;
  color: var(--red-bright);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-weight: normal;
}

.doc-section {
  margin-bottom: 20px;
}

.doc-section:last-child { margin-bottom: 0; }

.doc-p {
  margin: 0 0 10px;
  color: #d8d0c8;
}

.doc-p:last-child { margin-bottom: 0; }

.doc-list {
  margin: 0;
  padding-left: 16px;
  color: #d8d0c8;
}

.doc-list li { margin-bottom: 6px; }

.doc-dl {
  margin: 0;
  display: grid;
  gap: 10px;
}

.doc-dl dt {
  color: var(--gold);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}

.doc-dl dd {
  margin: 2px 0 0;
  color: #c8c0b8;
  padding-left: 0;
}

.doc-link {
  color: var(--red-bright);
  text-decoration: none;
}

.doc-link:hover { text-decoration: underline; }

.doc-ca-block {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px dashed var(--red-bright);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
}

.doc-ca-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.doc-ca-label {
  flex-shrink: 0;
  font-size: 0.44rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.doc-ca-sep {
  flex-shrink: 0;
  font-size: 0.44rem;
  color: var(--dim);
}

.doc-ca-btn:disabled {
  cursor: default;
  opacity: 1;
}

.doc-ca-btn:disabled .doc-ca-address,
.doc-ca-btn:disabled .doc-ca-label,
.doc-ca-btn:disabled .doc-ca-sep,
.doc-ca-btn:disabled .doc-ca-copy {
  color: #ffffff;
}

.doc-ca-btn:hover:not(:disabled) .doc-ca-copy {
  color: var(--red-bright);
}

.doc-ca-address {
  flex: 1;
  min-width: 0;
  font-size: 0.5rem;
  line-height: 1.45;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-ca-copy {
  flex-shrink: 0;
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  color: var(--dim);
}

.doc-foot {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.52rem;
  color: var(--dim);
}

.doc-code {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font);
  font-size: 0.56rem;
  color: var(--gray);
  overflow-x: auto;
}

.doc-inline {
  font-family: var(--font);
  font-size: 0.9em;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 4px;
  border-radius: 2px;
}

.docs-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(108px, 130px) minmax(0, 1fr);
}

.docs-nav {
  border-right: 1px solid var(--border);
  padding: 10px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.35);
}

.docs-nav-link {
  display: block;
  padding: 5px 8px;
  font-size: 0.5rem;
  color: var(--dim);
  text-decoration: none;
  border-radius: 3px;
  letter-spacing: 0.03em;
  line-height: 1.35;
}

.docs-nav-link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
}

.docs-nav-link.active {
  color: var(--gold);
  background: rgba(90, 0, 0, 0.2);
  border: 1px solid rgba(239, 192, 60, 0.2);
}

.docs-scroll {
  padding: 14px 16px 24px;
}

.about-window .doc-body,
.about-window .about-layout {
  flex: 1;
  min-height: 0;
}

.about-window {
  display: flex;
  flex-direction: column;
}

.about-window .about-layout {
  flex: 1;
  min-height: 0;
}

/* ===== FIELD GUIDE - desk-app tiles inside camp chrome ===== */
.about-window {
  --guide-text: var(--oat);
  --guide-muted: var(--oat-2);
  --guide-glass: linear-gradient(165deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 36%, rgba(255, 255, 255, 0) 68%);
}

.app-window.about-window {
  background: color-mix(in srgb, var(--ground) 90%, var(--surface));
}

.about-window .about-layout {
  grid-template-columns: 200px minmax(0, 1fr);
  background: color-mix(in srgb, var(--ground) 70%, var(--surface));
}

.about-window .about-scroll {
  min-height: 0;
  padding: 28px 32px 48px;
  overflow-y: auto;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--guide-muted);
}

.about-window .about-grid { display: contents; }

.about-window .doc-section {
  margin: 0;
  padding: 32px 0 4px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-margin-top: 20px;
}

.about-window .guide-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 24px;
  margin-bottom: 8px;
  padding-bottom: 28px;
}

.about-window .guide-hero-copy {
  min-width: 0;
  max-width: 40rem;
}

.about-window .guide-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted-ink);
}

.about-window .guide-kicker-mark {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--blaze);
  box-shadow: 0 0 0 3px var(--blaze-soft);
}

.about-window .guide-wordmark {
  margin: 0;
  font-family: var(--font-display), var(--font-sans);
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  font-weight: 800;
  font-synthesis: none;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--oat);
}

.about-window .guide-wordmark span { color: var(--blaze-ink); }

.about-window .guide-lead {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--oat-2);
}

.about-window .guide-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.about-window .guide-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--oat) 14%, var(--line));
  border-radius: var(--radius-badge);
  background: var(--guide-glass), color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--oat);
}

.about-window .guide-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--loden);
  box-shadow: 0 0 0 3px var(--loden-soft);
}

.about-window .guide-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
}

.about-window .guide-num,
.about-window .guide-cell-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted-ink);
}

.about-window .guide-h2 {
  margin: 0;
  font-family: var(--font-display), var(--font-sans);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 800;
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--oat);
}

.about-window .guide-section-lead {
  margin: 0 0 20px;
  max-width: 52ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--oat-2);
}

.about-window .guide-bento {
  display: grid;
  gap: 12px;
  align-items: stretch;
}

.about-window .guide-bento + .guide-bento {
  margin-top: 12px;
}

.about-window .guide-bento--now {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "desk desk points account"
    "desk desk banners music"
    "x x contract contract";
}

.about-window .guide-bento--now[data-no-x] {
  grid-template-areas:
    "desk desk points account"
    "desk desk banners music"
    "contract contract contract contract";
}

.about-window .guide-bento--now > [data-area="desk"] { grid-area: desk; }
.about-window .guide-bento--now > [data-area="points"] { grid-area: points; }
.about-window .guide-bento--now > [data-area="account"] { grid-area: account; }
.about-window .guide-bento--now > [data-area="banners"] { grid-area: banners; }
.about-window .guide-bento--now > [data-area="music"] { grid-area: music; }
.about-window .guide-bento--now > [data-area="x"] { grid-area: x; }
.about-window .guide-bento--now > [data-area="contract"] { grid-area: contract; }

.about-window .guide-bento--rules {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "one one two two"
    "one one three four";
}

.about-window .guide-bento--rules > [data-area="one"] { grid-area: one; }
.about-window .guide-bento--rules > [data-area="two"] { grid-area: two; }
.about-window .guide-bento--rules > [data-area="three"] { grid-area: three; }
.about-window .guide-bento--rules > [data-area="four"] { grid-area: four; }

.about-window .guide-bento--apps,
.about-window .guide-bento--notes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-window .guide-bento--rates {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "cards cards volume volume"
    "cards cards posts posts"
    "tiers tiers tiers tiers";
}

.about-window .guide-bento--rates > [data-area="cards"] { grid-area: cards; }
.about-window .guide-bento--rates > [data-area="volume"] { grid-area: volume; }
.about-window .guide-bento--rates > [data-area="posts"] { grid-area: posts; }
.about-window .guide-bento--rates > [data-area="tiers"] { grid-area: tiers; }

.about-window .guide-bento--legend {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-window .guide-bento--legend:has(> :nth-child(6):last-child) {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.about-window .guide-bento--camp {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "guide guide menu taskbar"
    "guide guide theme theme";
}

.about-window .guide-bento--camp > [data-area="guide"] { grid-area: guide; }
.about-window .guide-bento--camp > [data-area="menu"] { grid-area: menu; }
.about-window .guide-bento--camp > [data-area="taskbar"] { grid-area: taskbar; }
.about-window .guide-bento--camp > [data-area="theme"] { grid-area: theme; }

.about-window .guide-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 16px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--oat) 14%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--guide-glass), color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 28px -18px rgba(0, 0, 0, 0.45);
  backdrop-filter: saturate(200%) blur(22px);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
}

.about-window .guide-tile--hero {
  justify-content: space-between;
  gap: 14px;
  padding: 22px 22px 18px;
}

.about-window .guide-bento--now .guide-tile--hero {
  min-height: 220px;
}

.about-window .guide-tile--spot {
  border-color: color-mix(in srgb, var(--icon-gold) 38%, var(--line));
  background: var(--guide-glass), color-mix(in srgb, var(--brass-soft) 70%, var(--surface));
}

.about-window .guide-tile--compact {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "mark tag"
    "copy copy";
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  padding: 14px 14px 12px;
}

.about-window .guide-tile--compact .guide-tile-mark { grid-area: mark; }
.about-window .guide-tile--compact .guide-tag { grid-area: tag; justify-self: end; margin-top: 0; align-self: center; }
.about-window .guide-tile--compact .guide-tile-copy { grid-area: copy; }

.about-window .guide-tile--warn {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 16px 20px;
  border-color: color-mix(in srgb, var(--brass) 34%, var(--line));
  background: var(--guide-glass), color-mix(in srgb, var(--brass-soft) 55%, var(--surface));
}

.about-window .guide-tile--warn .guide-tile-copy {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}

.about-window .guide-tile--warn h3 { flex-shrink: 0; }
.about-window .guide-tile--warn p:not(.guide-tag) { flex: 1; min-width: 18ch; }
.about-window .guide-tile--warn .guide-tag { margin-top: 0; }

.about-window .guide-tile--legend {
  gap: 6px;
  padding: 14px 14px 12px;
}

.about-window .guide-tile--stat {
  justify-content: flex-start;
}

.about-window .guide-tile-mark {
  --icon-face: var(--icon-app);
  --icon-lift: color-mix(in srgb, var(--icon-face) 68%, #ffffff);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(165deg, var(--icon-lift) 0%, var(--icon-face) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 16px -6px rgba(0, 0, 0, 0.28);
}

.about-window .guide-tile--hero .guide-tile-mark {
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
}

.about-window .guide-tile--hero .guide-tile-mark .app-glyph {
  width: 22px;
  height: 22px;
}

.about-window .guide-tile--hero .guide-tile-mark--num {
  font-size: 0.78rem;
}

.about-window .guide-tile-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 48%);
  pointer-events: none;
}

.about-window .guide-tile[data-tone="featured"] .guide-tile-mark { --icon-face: var(--icon-gold); }
.about-window .guide-tile[data-tone="camp"] .guide-tile-mark { --icon-face: var(--icon-camp); }

.about-window .guide-tile-mark .app-glyph {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18));
}

.about-window .guide-tile-mark--num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

.about-window .guide-tile-mark--num::after { display: none; }

.about-window .guide-tile-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.about-window .guide-tile h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--oat);
}

.about-window .guide-tile--hero h3 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.about-window .guide-tile--legend h3 {
  font-size: 0.92rem;
}

.about-window .guide-tile p:not(.guide-tag):not(.guide-stat):not(.guide-num) {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--oat-2);
}

.about-window .guide-tile--compact p:not(.guide-tag):not(.guide-num) {
  font-size: 0.78rem;
  line-height: 1.4;
}

.about-window .guide-tile .guide-num { color: var(--muted-ink); }

.about-window .guide-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.about-window .guide-chip-row li {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--oat) 14%, var(--line));
  border-radius: var(--radius-badge);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--oat);
}

.about-window .guide-stat {
  margin: 4px 0 2px;
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--oat);
}

.about-window .guide-stat span {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted-ink);
  vertical-align: 0.85em;
}

.about-window .guide-stat--sm {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.about-window .guide-tag {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 10px;
  border-radius: var(--radius-badge);
  background: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted-ink);
}

.about-window .guide-tag--live {
  background: var(--loden-soft);
  color: var(--loden);
}

.about-window .guide-tag--pending {
  background: var(--brass-soft);
  color: var(--brass);
}

/* A campaign that ran and ended: neither live nor pending. */
.about-window .guide-tag--closed {
  background: var(--ink-soft);
  color: var(--muted-ink);
  border: 1px solid var(--border);
}

.about-window .guide-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  margin: 28px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.about-window .guide-legal a {
  color: var(--oat-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.about-window .guide-legal a:hover {
  color: var(--blaze-ink);
  border-color: var(--blaze);
}

/* A page opened from the guide (the legal pages) takes the window over, with
   the guide one click back in the bar. The guide layout is hidden, not
   unmounted, so its scroll position survives the round trip. */
.about-window.showing-page .about-layout {
  display: none;
}

.about-window .guide-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--ground);
}

.about-window .guide-page.hidden {
  display: none;
}

.about-window .guide-page-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oat-2);
}

.about-window .guide-page-back {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  padding: 6px 10px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--oat);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.about-window .guide-page-back:hover {
  border-color: var(--blaze);
  color: var(--blaze);
}

.about-window .guide-page-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--ground);
}

.about-window .about-nav {
  padding: 18px 12px 24px;
  gap: 4px;
  background: color-mix(in srgb, var(--ground-2) 55%, transparent);
  border-right: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.about-window .guide-nav-kicker {
  margin: 0 10px 12px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted-ink);
}

.about-window .docs-nav-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted-ink);
  border: 0;
  border-radius: var(--radius-badge);
  background: transparent;
}

.about-window .docs-nav-num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--muted-ink);
}

.about-window .docs-nav-link:hover {
  color: var(--oat);
  background: var(--ink-soft);
}

.about-window .docs-nav-link.active {
  color: var(--oat);
  background: var(--blaze-soft);
  border: 0;
  box-shadow: none;
}

.about-window .docs-nav-link.active .docs-nav-num { color: var(--blaze-ink); }

@media (max-width: 1100px) {
  .about-window .guide-bento--now {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "desk desk"
      "points account"
      "banners music"
      "x x"
      "contract contract";
  }

  .about-window .guide-bento--rules {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "one one"
      "two two"
      "three four";
  }

  .about-window .guide-bento--rates {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "cards cards"
      "volume posts"
      "tiers tiers";
  }

  .about-window .guide-bento--legend:has(> :nth-child(6):last-child),
  .about-window .guide-bento--legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-window .guide-bento--camp {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "guide guide"
      "menu taskbar"
      "theme theme";
  }

  .about-window .guide-tile--hero h3 { font-size: 1.28rem; }
  .about-window .guide-stat { font-size: clamp(2rem, 6vw, 2.6rem); }
}

@media (max-width: 900px) {
  .about-window .about-layout { grid-template-columns: 180px minmax(0, 1fr); }
  .about-window .about-scroll { padding: 22px 18px 36px; }
  .about-window .guide-wordmark { font-size: clamp(2rem, 7vw, 2.8rem); }
  .about-window .guide-bento--apps,
  .about-window .guide-bento--notes { grid-template-columns: 1fr; }
  .about-window .doc-section { padding: 26px 0 4px; }
  .about-window .guide-tile--warn { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .about-window .about-layout { grid-template-columns: 1fr; }
  .about-window .guide-nav-kicker { display: none; }
  .about-window .about-nav {
    padding: 8px 10px;
    gap: 4px;
    background: color-mix(in srgb, var(--ground-2) 78%, transparent);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .about-window .about-scroll { padding: 18px 14px 32px; }
  .about-window .guide-bento--now,
  .about-window .guide-bento--rules,
  .about-window .guide-bento--rates,
  .about-window .guide-bento--camp {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .about-window .guide-bento--now > [data-area],
  .about-window .guide-bento--rules > [data-area],
  .about-window .guide-bento--rates > [data-area],
  .about-window .guide-bento--camp > [data-area] { grid-area: auto; }
  .about-window .guide-bento--legend:has(> :nth-child(6):last-child),
  .about-window .guide-bento--legend { grid-template-columns: 1fr; }
  .about-window .guide-masthead { padding-bottom: 20px; }
  .about-window .guide-tile--hero { padding: 18px 16px 16px; }
}

.backrooms-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.backrooms-filter {
  font-family: var(--font);
  font-size: 0.42rem;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.backrooms-filter:hover {
  color: var(--white);
  border-color: var(--border-light);
}

.backrooms-filter.active {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(90, 0, 0, 0.2);
}

.backrooms-count {
  margin-left: auto;
  font-size: 0.44rem;
  color: var(--dim);
}

.backrooms-toolbar-divider {
  width: 1px;
  height: 14px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}

.backrooms-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--blaze-rgb) / 0.72) transparent;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      rgba(255, 255, 255, 0.02) 23px,
      rgba(255, 255, 255, 0.02) 24px
    );
}

.backrooms-body::-webkit-scrollbar {
  width: 6px;
}

.backrooms-body::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(var(--blaze-rgb) / 0.04) 18%,
    rgba(0, 0, 0, 0.35) 50%,
    rgb(var(--blaze-rgb) / 0.04) 82%,
    transparent 100%
  );
  margin: 6px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.03);
}

.backrooms-body::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgb(var(--blaze-rgb) / 0.88) 42%,
    rgba(90, 0, 0, 0.95) 100%
  );
  border-radius: 3px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 8px rgb(var(--blaze-rgb) / 0.22);
}

.backrooms-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgb(var(--blaze-rgb) / 0.95) 48%,
    var(--red) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 12px rgb(var(--blaze-rgb) / 0.42);
}

.backrooms-body::-webkit-scrollbar-thumb:active {
  background: var(--red);
  border-color: rgba(255, 255, 255, 0.22);
}

.backrooms-body .gallery-detail {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--blaze-rgb) / 0.72) transparent;
}

.backrooms-body .gallery-detail::-webkit-scrollbar {
  width: 6px;
}

.backrooms-body .gallery-detail::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(var(--blaze-rgb) / 0.04) 18%,
    rgba(0, 0, 0, 0.35) 50%,
    rgb(var(--blaze-rgb) / 0.04) 82%,
    transparent 100%
  );
  margin: 6px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.03);
}

.backrooms-body .gallery-detail::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgb(var(--blaze-rgb) / 0.88) 42%,
    rgba(90, 0, 0, 0.95) 100%
  );
  border-radius: 3px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 8px rgb(var(--blaze-rgb) / 0.22);
}

.backrooms-body .gallery-detail::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgb(var(--blaze-rgb) / 0.95) 48%,
    var(--red) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 12px rgb(var(--blaze-rgb) / 0.42);
}

.backrooms-gallery-wrap,
.backrooms-interactions-wrap {
  flex-shrink: 0;
}

.backrooms-gallery-wrap.hidden,
.backrooms-interactions-wrap.hidden {
  display: none;
}

.backrooms-body .gallery-grid {
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 12px 12px 0;
}

.backrooms-body .gallery-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.backrooms-interactions-wrap {
  padding: 0 12px 14px;
}

.backrooms-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 0 4px;
}

.backrooms-pagination.hidden { display: none; }

.backrooms-page-btn {
  font-family: var(--font);
  font-size: 0.46rem;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.backrooms-page-btn:hover:not(:disabled) {
  color: var(--white);
  border-color: var(--border-light);
  background: rgba(255, 255, 255, 0.04);
}

.backrooms-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.backrooms-page-info {
  font-size: 0.46rem;
  color: var(--dim);
  letter-spacing: 0.08em;
}

.backrooms-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.backrooms-section-label {
  font-size: 0.46rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.backrooms-interactions-wrap:first-child .backrooms-section-label,
.backrooms-gallery-wrap:not(.hidden) + .backrooms-interactions-wrap .backrooms-section-label {
  border-top: 1px solid var(--border);
}

.backrooms-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s, background 0.2s;
}

.backrooms-card.fresh {
  border-color: var(--border-light);
  background: rgba(255, 255, 255, 0.04);
  animation: backrooms-fade-in 0.5s ease;
}

@keyframes backrooms-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.backrooms-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.backrooms-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: var(--bright);
  flex-shrink: 0;
}

.backrooms-meta { flex: 1; min-width: 0; }

.backrooms-user {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 0.48rem;
}

.backrooms-handle {
  color: var(--white);
  font-weight: bold;
}

.backrooms-name {
  color: var(--dim);
}

.backrooms-type {
  font-size: 0.38rem;
  color: var(--dim);
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.4px;
}

.backrooms-card.type-reply .backrooms-type { color: #9ecfff; border-color: #2a4a66; }
.backrooms-card.type-retweet .backrooms-type { color: #7dffb2; border-color: #2a6644; }
.backrooms-card.type-quote .backrooms-type { color: #ffd27d; border-color: #66552a; }
.backrooms-card.type-mention .backrooms-type { color: #ff9ed4; border-color: #662a55; }
.backrooms-card.type-comment .backrooms-type { color: #c8c8c8; border-color: #444; }

.backrooms-source-post {
  font-size: 0.42rem;
  color: var(--dim);
  line-height: 1.35;
  margin-top: 3px;
}

.backrooms-source-post span {
  color: var(--red-bright);
}

.backrooms-reply-to {
  font-size: 0.42rem;
  color: var(--dim);
  margin-top: 4px;
}

.backrooms-reply-to span { color: var(--white); }

.backrooms-mood {
  font-size: 0.38rem;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--dim);
  flex-shrink: 0;
}

.backrooms-card.mood-fidelity .backrooms-mood {
  color: var(--bright);
  border-color: var(--border-light);
}

.backrooms-card.mood-cope .backrooms-mood {
  color: var(--gray);
  border-color: var(--border);
}

.backrooms-card.mood-ratio .backrooms-mood {
  color: var(--white);
  border-color: var(--border-light);
}

.backrooms-card.mood-unhinged .backrooms-mood {
  color: var(--bright);
  border-color: var(--border-light);
}

.backrooms-card.mood-doubt .backrooms-mood {
  color: var(--dim);
  border-color: var(--border);
}

.backrooms-text {
  font-size: 0.54rem;
  color: var(--bright);
  line-height: 1.55;
  padding-left: 36px;
}

.backrooms-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.4rem;
  color: var(--dim);
  margin-top: 8px;
  padding-left: 36px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.backrooms-empty {
  text-align: center;
  padding: 40px 20px;
  font-size: 0.52rem;
  color: var(--dim);
  line-height: 1.6;
}

/* ===== THE APP WINDOW ===== */
.app-window {
  position: absolute;
  top: 12px;
  left: 110px;
  right: 110px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 12px 60px rgba(0, 0, 0, 0.85),
    0 4px 16px rgba(90, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  resize: both;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: 100%;
  z-index: 10;
  transition: top 0.25s, left 0.25s, right 0.25s, bottom 0.25s, width 0.25s, height 0.25s, border-radius 0.25s, opacity 0.2s, transform 0.2s;
}

/* Resize handle visual */
.app-window::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(135deg, transparent 50%, var(--dim) 50%, var(--dim) 55%, transparent 55%),
    linear-gradient(135deg, transparent 65%, var(--dim) 65%, var(--dim) 70%, transparent 70%),
    linear-gradient(135deg, transparent 80%, var(--dim) 80%, var(--dim) 85%, transparent 85%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 10;
}

/* Window title bar */
.window-titlebar {
  background: var(--bg-titlebar);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
  position: relative;
  z-index: 20;
}

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

.window-titlebar .title-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.window-titlebar .app-icon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--red) 0%, var(--gold-dim) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

.window-titlebar .app-icon .app-glyph {
  width: 12px;
  height: 12px;
}

.window-titlebar .app-name {
  font-size: 0.78rem;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-titlebar .window-controls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  -webkit-app-region: no-drag;
}

.window-titlebar .win-btn {
  appearance: none;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 3px;
  border: 1px solid var(--border-light);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  position: relative;
  flex-shrink: 0;
  color: var(--dim);
  -webkit-tap-highlight-color: transparent;
}

/* larger hit target without changing visual size */
.window-titlebar .win-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.window-titlebar .win-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.window-titlebar .win-btn:hover {
  background: var(--border-light);
  color: var(--white);
}

.window-titlebar .win-btn.minimize {
  border-color: var(--dim);
}

.window-titlebar .win-btn.minimize::after {
  width: 7px;
  height: 1px;
  background: currentColor;
}

.window-titlebar .win-btn.maximize {
  border-color: var(--dim);
}

.window-titlebar .win-btn.maximize::after {
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  box-sizing: border-box;
}

.window-titlebar .win-btn.close {
  border-color: #7a1610;
  background: var(--close);
  color: #fff;
}

.window-titlebar .win-btn.close::after {
  width: 8px;
  height: 8px;
  background:
    linear-gradient(45deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%);
}

.window-titlebar .win-btn.close:hover {
  background: var(--close-hover);
  border-color: #5a0e0a;
  color: #fff;
}

/* Maximized state */
.app-window.maximized {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Window content area (the pane grid) */
.window-content {
  flex: 1;
  display: grid;
  --pane-rail-w: 180px;
  grid-template-columns: minmax(0, var(--pane-rail-w)) minmax(0, 1fr) minmax(0, var(--pane-rail-w));
  grid-template-rows: minmax(0, 1fr);
  gap: 1px;
  background: var(--border);
  min-height: 0;
  overflow: hidden;
}

/* Agent terminal */
#appWindow {
  min-width: 0;
  min-height: 0;
}

#appWindow .window-titlebar {
  padding: 8px 14px;
}

#appWindow .window-titlebar .app-name {
  font-size: 0.72rem;
}

#appWindow .window-content {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  background: var(--bg-window);
  overflow: auto;
}

.camp-home {
  padding: 28px 32px 36px;
  gap: 28px;
}

.camp-home-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 52rem;
}

.camp-home-mark {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  background: #141412;
  flex-shrink: 0;
}

.camp-home-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 6px;
}

.camp-home-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.camp-home-lead {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gray);
  max-width: 46ch;
}

.camp-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.camp-launch {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 16px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.camp-launch:hover,
.camp-launch:focus-visible {
  border-color: var(--red-bright);
  background: rgb(var(--blaze-rgb) / 0.12);
  outline: none;
}

.camp-launch .app-glyph {
  width: 26px;
  height: 26px;
  color: var(--red-bright);
}

.camp-launch-name {
  font-size: 1rem;
  color: var(--white);
}

.camp-launch-desc {
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.35;
}

#appWindow .pane-header {
  padding: 5px 10px;
  font-size: 0.56rem;
}

#appWindow .pane-header .pane-title {
  color: var(--white);
}

#appWindow .pane-header .pane-tag {
  font-size: 0.48rem;
  padding: 2px 6px;
}

#appWindow .pane-body {
  overflow: hidden;
  padding: 8px 10px;
  font-size: 0.7rem;
  line-height: 1.45;
  scrollbar-width: none;
}

#appWindow .pane-side .side-body,
#appWindow .pane-main .pane-body {
  overflow-y: auto;
}

#appWindow .pane-profile .pane-body,
#appWindow .pane-profile .profile-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 2px 6px 8px !important;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--blaze-rgb) / 0.72) transparent;
}

#appWindow .pane-profile .profile-body {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

#appWindow .profile-avatar {
  width: 100%;
  display: flex;
  justify-content: center;
}

#appWindow .avatar-img,
#appWindow video.avatar-img {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
  border-radius: 8px;
}

#appWindow .avatar-status {
  width: 9px;
  height: 9px;
  bottom: 3px;
  right: 3px;
}

#appWindow .profile-divider {
  margin: 4px 0;
}

#appWindow .profile-section-title {
  font-size: 0.5rem;
  margin-bottom: 3px;
}

#appWindow .profile-fold-summary {
  font-size: 0.5rem;
  padding: 5px 7px;
}

#appWindow .profile-fold-body {
  padding: 4px 7px 6px;
}

#appWindow .profile-fold-body .profile-desc {
  font-size: 0.52rem;
  line-height: 1.35;
}

#appWindow .profile-meta-compact .meta-row {
  padding: 1px 0;
  font-size: 0.52rem;
  line-height: 1.3;
}

#appWindow .profile-list-compact .list-item {
  font-size: 0.52rem;
  padding: 1px 0 1px 8px;
  line-height: 1.32;
}

#appWindow .profile-desc-clamp {
  font-size: 0.52rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#appWindow .profile-bag {
  margin: 0;
  padding: 8px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.4);
  border-radius: 6px;
  background:
    linear-gradient(165deg, rgba(90, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.62) 48%, rgba(8, 0, 0, 0.5) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgb(var(--blaze-rgb) / 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 6px 18px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

#appWindow .side-bag {
  margin: 8px 10px;
  flex-shrink: 0;
}

#appWindow .profile-bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

#appWindow .profile-bag-kicker {
  font-size: 0.42rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-bright);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appWindow .profile-bag-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 8px var(--red-glow);
  animation: taskbar-live-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

#appWindow .profile-bag-hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 8px;
  border-radius: 4px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.28);
  background:
    radial-gradient(ellipse at 20% 0%, rgb(var(--blaze-rgb) / 0.18) 0%, transparent 55%),
    rgba(0, 0, 0, 0.45);
  min-width: 0;
}

#appWindow .profile-bag-hero-label {
  font-size: 0.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

#appWindow .profile-bag-hero-val {
  font-size: clamp(0.85rem, 4.2vw, 1.05rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--bright);
  text-shadow: 0 0 18px rgb(var(--blaze-rgb) / 0.35);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

#appWindow .profile-bag-hero-sub {
  font-size: 0.42rem;
  color: var(--gray);
  letter-spacing: 0.04em;
}

#appWindow .profile-bag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 0;
}

#appWindow .profile-bag-tile {
  min-width: 0;
  padding: 6px 7px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#appWindow .profile-bag-tile--accent {
  border-color: rgb(var(--blaze-rgb) / 0.4);
  background: rgba(90, 0, 0, 0.22);
}

#appWindow .profile-bag-tile-label {
  font-size: 0.38rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

#appWindow .profile-bag-tile-val {
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--red-bright);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

#appWindow .profile-bag-tile--accent .profile-bag-tile-val {
  color: var(--bright);
}

#appWindow .profile-bag-tile-meta {
  font-size: 0.38rem;
  color: var(--gray);
  letter-spacing: 0.03em;
}

#appWindow .profile-bag-wallet {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border-radius: 3px;
  border: 1px dashed rgb(var(--blaze-rgb) / 0.28);
  background: rgba(0, 0, 0, 0.35);
}

#appWindow .profile-bag-wallet-tag {
  flex-shrink: 0;
  font-size: 0.36rem;
  letter-spacing: 0.12em;
  color: var(--dim);
}

#appWindow .profile-bag-wallet-addr {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.52rem;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

#appWindow a.profile-bag-wallet-addr:hover {
  color: var(--red);
  text-decoration: underline;
}

#appWindow .profile-bag-wallet-badge {
  flex-shrink: 0;
  font-size: 0.36rem;
  letter-spacing: 0.08em;
  color: var(--red-bright);
  border: 1px solid rgb(var(--blaze-rgb) / 0.45);
  border-radius: 2px;
  padding: 2px 5px;
  background: rgba(90, 0, 0, 0.25);
}

#appWindow .side-performance,
#appWindow .side-ledger {
  flex-shrink: 0;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

#appWindow .side-reasoning {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 10px 8px;
  background: rgba(255, 255, 255, 0.015);
}

#appWindow .side-reasoning-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--blaze-rgb) / 0.78) transparent;
}

#appWindow .side-reasoning-body::-webkit-scrollbar {
  display: block;
  width: 6px;
}

#appWindow .side-reasoning-body::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(var(--blaze-rgb) / 0.04) 18%,
    rgba(0, 0, 0, 0.35) 50%,
    rgb(var(--blaze-rgb) / 0.04) 82%,
    transparent 100%
  );
  margin: 6px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.03);
}

#appWindow .side-reasoning-body::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgb(var(--blaze-rgb) / 0.88) 42%,
    rgba(90, 0, 0, 0.95) 100%
  );
  border-radius: 3px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 8px rgb(var(--blaze-rgb) / 0.22);
}

#appWindow .side-reasoning-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgb(var(--blaze-rgb) / 0.95) 48%,
    var(--red) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 12px rgb(var(--blaze-rgb) / 0.42);
}

#appWindow .side-reasoning-body::-webkit-scrollbar-thumb:active {
  background: var(--red);
  border-color: rgba(255, 255, 255, 0.22);
}

#appWindow .side-performance {
  max-height: 38%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--blaze-rgb) / 0.6) transparent;
}

#appWindow .side-section-title {
  font-size: 0.5rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

#appWindow .side-metrics {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#appWindow .side-metrics .bar-fill--overflow {
  width: 100%;
  background: linear-gradient(90deg, var(--red-dim) 0%, var(--red) 55%, var(--red-bright) 100%);
  box-shadow: 0 0 8px rgb(var(--blaze-rgb) / 0.45);
}

#appWindow .metric-bar--long-dick .metric-label {
  width: 72px;
  font-size: 0.42rem;
  line-height: 1.15;
  color: var(--white);
}

#appWindow .metric-bar--long-dick .metric-val {
  color: var(--red-bright);
  font-weight: bold;
}

#appWindow .side-metrics .metric-bar {
  font-size: 0.5rem;
  gap: 4px;
}

#appWindow .side-metrics .metric-label {
  width: 58px;
  font-size: 0.48rem;
}

#appWindow .side-metrics .metric-val {
  width: 26px;
  font-size: 0.48rem;
}

#appWindow .side-metrics .bar-track {
  height: 3px;
}

#appWindow .side-ledger-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#appWindow .ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.5rem;
  min-width: 0;
}

#appWindow .ledger-row--hero {
  margin-top: 2px;
}

#appWindow .ledger-row--sub {
  margin-bottom: 4px;
}

#appWindow .ledger-row--wallet {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

#appWindow .ledger-label {
  flex-shrink: 0;
  width: 58px;
  font-size: 0.48rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#appWindow .ledger-val {
  flex: 1;
  text-align: right;
  font-size: 0.52rem;
  color: var(--bright);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

#appWindow .ledger-row--hero .ledger-val {
  font-size: 0.62rem;
  color: var(--red-bright);
  text-shadow: 0 0 12px rgb(var(--blaze-rgb) / 0.25);
}

#appWindow .ledger-val--accent {
  color: var(--red-bright);
}

#appWindow .ledger-sub {
  display: block;
  width: 100%;
  font-size: 0.42rem;
  color: var(--dim);
  letter-spacing: 0.03em;
  line-height: 1.3;
}

#appWindow .ledger-link {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 0.48rem;
  color: var(--red-bright);
  text-decoration: none;
  font-family: var(--mono, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appWindow .ledger-link:hover {
  text-decoration: underline;
}

#appWindow .ledger-badge {
  flex-shrink: 0;
  font-size: 0.38rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-bright);
  border: 1px solid rgb(var(--blaze-rgb) / 0.45);
  border-radius: 2px;
  padding: 1px 4px;
  background: rgba(90, 0, 0, 0.25);
}

#appWindow .pane-profile .pane-body::-webkit-scrollbar,
#appWindow .pane-profile .profile-body::-webkit-scrollbar {
  width: 5px;
}

#appWindow .pane-profile .pane-body::-webkit-scrollbar-track,
#appWindow .pane-profile .profile-body::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(var(--blaze-rgb) / 0.03) 12%,
    rgba(0, 0, 0, 0.28) 50%,
    rgb(var(--blaze-rgb) / 0.03) 88%,
    transparent 100%
  );
  margin: 8px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.02);
}

#appWindow .pane-profile .pane-body::-webkit-scrollbar-thumb,
#appWindow .pane-profile .profile-body::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgb(var(--blaze-rgb) / 0.75) 45%,
    rgba(70, 0, 0, 0.9) 100%
  );
  border-radius: 3px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#appWindow .pane-profile .pane-body::-webkit-scrollbar-thumb:hover,
#appWindow .pane-profile .profile-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgb(var(--blaze-rgb) / 0.9) 50%,
    var(--red) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 8px rgb(var(--blaze-rgb) / 0.28);
}

#appWindow .pane-profile .pane-body::-webkit-scrollbar-thumb:active,
#appWindow .pane-profile .profile-body::-webkit-scrollbar-thumb:active {
  background: var(--red);
  border-color: rgba(255, 255, 255, 0.18);
}

#appWindow .pane-side .side-body {
  overflow: hidden;
}

#appWindow .pane-side .side-body::-webkit-scrollbar {
  display: none;
}

#appWindow .pane-main .pane-body {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  min-height: 0;
  display: block;
  background: var(--bg-window);
}

#appWindow .pane-main .aim-chat-log {
  padding: 8px 12px 6px;
}

#appWindow .aim-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

#appWindow .aim-pane .pane-header {
  min-width: 0;
  gap: 8px;
  padding: 5px 12px;
}

#appWindow .aim-pane .pane-header .pane-title {
  min-width: 0;
  flex: 1;
}

#appWindow .aim-pane .pane-header .pane-tag {
  flex-shrink: 0;
}

#appWindow .aim-chat-sub {
  color: var(--dim);
  font-weight: normal;
  margin-left: 4px;
  letter-spacing: 0;
  max-width: min(100%, 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appWindow .aim-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#appWindow .aim-buddy-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--red);
  box-shadow: 0 0 6px var(--red-glow);
  animation: aim-pulse-dot 2s ease-in-out infinite;
}

@keyframes aim-pulse-dot {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

#appWindow .aim-chat-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-window);
}

#appWindow .activity-status-card {
  flex-shrink: 0;
  margin: 10px 12px 0;
  padding: 10px 12px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.32);
  border-radius: 6px;
  background:
    linear-gradient(165deg, rgba(90, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(8, 0, 0, 0.42) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#appWindow .activity-status-card.hidden {
  display: none;
}

#appWindow .activity-status-kicker {
  font-size: 0.42rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px;
}

#appWindow .activity-status-title {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--red-bright);
  text-shadow: 0 0 12px rgb(var(--blaze-rgb) / 0.22);
  margin-bottom: 6px;
}

#appWindow .activity-status-copy {
  margin: 0;
  font-size: 0.56rem;
  line-height: 1.45;
  color: var(--white);
}

#appWindow .activity-status-copy + .activity-status-copy {
  margin-top: 6px;
}

#appWindow .activity-roadmap,
.about-window .activity-roadmap {
  margin: 8px 0 0;
  padding: 0 0 0 1.05rem;
  list-style: decimal;
  font-size: 0.54rem;
  line-height: 1.5;
  color: var(--white);
}

#appWindow .activity-roadmap li,
.about-window .activity-roadmap li {
  margin-bottom: 7px;
  padding-left: 2px;
}

#appWindow .activity-roadmap li:last-child,
.about-window .activity-roadmap li:last-child {
  margin-bottom: 0;
}

#appWindow .activity-roadmap-phase,
.about-window .activity-roadmap-phase {
  display: inline-block;
  min-width: 3.6rem;
  margin-right: 4px;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-bright);
}

#appWindow .activity-backrooms-host.posts-coming-soon .backrooms-gallery-wrap,
#appWindow .activity-backrooms-host.posts-coming-soon .backrooms-interactions-wrap,
#appWindow .activity-backrooms-host.posts-coming-soon .gallery-detail {
  display: none !important;
}

#appWindow .activity-backrooms-host.posts-coming-soon .backrooms-body {
  overflow: hidden;
}

#appWindow .activity-backrooms-host {
  border-top: 1px solid var(--border);
  margin-top: 2px;
  max-height: clamp(220px, 36vh, 420px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.24);
}

#appWindow .activity-backrooms-host .backrooms-toolbar {
  border-bottom: 1px solid var(--border);
  border-top: none;
}

#appWindow .activity-backrooms-host .backrooms-body {
  flex: 1;
  min-height: 0;
}

#appWindow .aim-chat-log {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--blaze-rgb) / 0.78) transparent;
  font-family: var(--font);
  font-size: 0.64rem;
  line-height: 1.45;
  color: var(--white);
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      rgba(255, 255, 255, 0.015) 23px,
      rgba(255, 255, 255, 0.015) 24px
    );
}

#appWindow .aim-chat-footer {
  flex-shrink: 0;
  padding: 5px 12px 6px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  min-height: 24px;
}

#appWindow .aim-typing {
  font-family: var(--font);
  font-size: 0.52rem;
  color: var(--dim);
  letter-spacing: 0.02em;
}

#appWindow .aim-typing.hidden {
  display: none;
}

#appWindow .aim-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

#appWindow .aim-msg.aim-kind-system {
  display: block;
  margin: 8px 0 12px;
  text-align: center;
}

#appWindow .aim-system-text {
  display: inline-block;
  max-width: 94%;
  padding: 2px 0;
  color: var(--dim);
  font-family: var(--font);
  font-size: 0.52rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

#appWindow .aim-system-text::before,
#appWindow .aim-system-text::after {
  content: ' ─ ';
  color: var(--border-light);
}

#appWindow .aim-system-strong {
  color: var(--gray);
}

#appWindow .aim-system-text .red {
  color: var(--red-bright);
}

#appWindow .aim-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#appWindow .aim-avatar-img,
#appWindow video.aim-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

#appWindow .aim-avatar-glyph {
  font-size: 0.72rem;
  font-weight: bold;
  font-family: var(--font);
}

#appWindow .aim-bubble {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 46px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-left: 2px solid var(--red-dim);
  border-radius: 3px;
  padding: 6px 9px 7px;
}

#appWindow .aim-from-openclaw .aim-bubble {
  border-left-color: var(--border-light);
  background: rgba(0, 0, 0, 0.28);
}

#appWindow .aim-bubble-whisper {
  background: rgba(204, 0, 0, 0.06);
  border-color: var(--red-dim);
  border-left-color: var(--red);
}

#appWindow .aim-bubble-tool {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--border);
  border-left-color: var(--gray);
}

#appWindow .aim-bubble-image {
  background: rgba(0, 0, 0, 0.28);
  padding: 6px 9px 8px;
}

#appWindow .aim-meta {
  margin-bottom: 4px;
  line-height: 1.2;
}

#appWindow .aim-name {
  font-family: var(--font);
  font-size: 0.54rem;
  font-weight: bold;
  letter-spacing: 0.03em;
}

#appWindow .aim-time {
  font-size: 0.46rem;
  color: var(--dim);
  margin-left: 6px;
}

#appWindow .aim-text {
  font-family: var(--font);
  font-size: 0.64rem;
  color: var(--white);
  line-height: 1.45;
  word-break: break-word;
}

#appWindow .aim-text .bold {
  color: var(--bright);
  font-weight: bold;
}

#appWindow .aim-text .dim {
  color: #9a9a9a;
}

#appWindow .aim-text .red {
  color: var(--red-bright);
}

#appWindow .aim-mono {
  font-family: var(--font);
  font-size: 0.58rem;
  color: var(--gray);
  word-break: break-word;
}

#appWindow .aim-whisper-label {
  color: var(--red);
  font-weight: bold;
}

#appWindow .aim-generated-image {
  display: block;
  width: 100%;
  max-width: 280px;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  margin-top: 6px;
  image-rendering: auto;
}

#appWindow .aim-image-caption {
  margin-top: 5px;
  font-size: 0.5rem;
  color: var(--dim);
  font-family: var(--font);
  letter-spacing: 0.04em;
}

#appWindow .aim-image-caption::before {
  content: 'â–¢ ';
  color: var(--gray);
}

#appWindow .aim-image-pending {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 10px;
  border: 1px dashed var(--border-light);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--dim);
  font-size: 0.52rem;
  font-family: var(--font);
  min-width: 180px;
}

#appWindow .aim-image-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: aim-spin 0.8s linear infinite;
}

@keyframes aim-spin {
  to { transform: rotate(360deg); }
}

#appWindow .aim-chat-log::-webkit-scrollbar {
  width: 6px;
}

#appWindow .aim-chat-log::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(var(--blaze-rgb) / 0.04) 18%,
    rgba(0, 0, 0, 0.35) 50%,
    rgb(var(--blaze-rgb) / 0.04) 82%,
    transparent 100%
  );
  margin: 6px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.03);
}

#appWindow .aim-chat-log::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgb(var(--blaze-rgb) / 0.88) 42%,
    rgba(90, 0, 0, 0.95) 100%
  );
  border-radius: 3px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 8px rgb(var(--blaze-rgb) / 0.22);
}

#appWindow .aim-chat-log::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgb(var(--blaze-rgb) / 0.95) 48%,
    var(--red) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 12px rgb(var(--blaze-rgb) / 0.42);
}

#appWindow .aim-chat-log::-webkit-scrollbar-thumb:active {
  background: var(--red);
  border-color: rgba(255, 255, 255, 0.22);
}

#appWindow #mainOutput .line {
  line-height: 1.42;
}

#appWindow #mainOutput .term-line {
  font-family: var(--font);
  font-size: 0.64rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#appWindow #mainOutput .term-line--prompt {
  margin-top: 3px;
}

#appWindow #mainOutput .term-line--prompt .cmd {
  color: var(--white);
}

#appWindow #mainOutput .term-line--action {
  margin-top: 6px;
  color: var(--white);
}

#appWindow #mainOutput .term-line--thought {
  color: #9a9a9a;
  padding-left: 2px;
}

#appWindow #mainOutput .term-line--warn {
  margin-top: 6px;
  color: var(--red-bright);
}

#appWindow #mainOutput .term-line--result {
  color: #b8b8b8;
  padding-left: 10px;
}

#appWindow #mainOutput .aim-msg + .term-line,
#appWindow #mainOutput .term-line + .aim-msg {
  margin-top: 10px;
}

#appWindow #mainOutput .term-line + .term-line--action {
  margin-top: 8px;
}

#appWindow #bottomOutput .term-line {
  font-family: var(--font);
  font-size: 0.64rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#appWindow #bottomOutput .term-line--prompt {
  margin-top: 3px;
}

#appWindow #bottomOutput .term-line--prompt .cmd {
  color: var(--white);
}

#appWindow #bottomOutput .term-line--action {
  margin-top: 6px;
  color: var(--white);
}

#appWindow #bottomOutput .term-line--thought {
  color: #9a9a9a;
  padding-left: 2px;
}

#appWindow #bottomOutput .term-line--warn {
  margin-top: 6px;
  color: var(--red-bright);
}

#appWindow #bottomOutput .term-line--result {
  color: #b8b8b8;
  padding-left: 10px;
}

#appWindow #bottomOutput .term-line + .term-line--action {
  margin-top: 8px;
}

#appWindow #mainOutput .line + .line {
  margin-top: 2px;
}

#appWindow .dim {
  color: #9a9a9a;
}

#appWindow .side-body {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}

#appWindow .side-identity {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(90, 0, 0, 0.12) 0%, #000 100%);
}

#appWindow .side-identity-name {
  font-size: 0.78rem;
  color: var(--red-bright);
  letter-spacing: 0.6px;
  line-height: 1.2;
  text-shadow: 0 0 12px rgb(var(--blaze-rgb) / 0.25);
}

#appWindow .side-identity-sub {
  font-size: 0.58rem;
  margin-top: 4px;
  line-height: 1.4;
  color: #9a9a9a;
}

#appWindow .profile-name {
  font-size: 0.88rem;
  letter-spacing: 0.5px;
}

#appWindow .profile-sub {
  font-size: 0.56rem;
  margin-top: 3px;
  line-height: 1.4;
  color: #9a9a9a;
}

#appWindow .profile-divider {
  margin: 6px 0;
}

#appWindow .meta-row {
  padding: 2px 0;
  font-size: 0.58rem;
  line-height: 1.4;
  gap: 8px;
}

#appWindow .meta-label {
  color: #888;
}

#appWindow .profile-section-title {
  font-size: 0.54rem;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
  color: #888;
}

#appWindow .list-item {
  font-size: 0.58rem;
  padding: 2px 0 2px 10px;
  line-height: 1.42;
}

#appWindow .profile-desc {
  font-size: 0.58rem;
  line-height: 1.45;
  color: #c8c8c8;
}

#appWindow .metric-bar {
  font-size: 0.54rem;
  gap: 5px;
}

#appWindow .metric-label {
  width: 68px;
  color: #888;
}

#appWindow .bar-track {
  height: 3px;
}

#appWindow .list-item::before {
  width: 4px;
  height: 4px;
}

#appWindow .profile-metrics {
  gap: 5px;
}

#appWindow .metric-val {
  width: 28px;
  font-size: 0.52rem;
}

/* ===== PANES (inside the window) ===== */
.pane {
  background: var(--bg-window);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pane-header {
  padding: 5px 12px;
  font-size: 0.5rem;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.01);
}

.pane-header .pane-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pane-header .pane-icon { color: var(--red); font-size: 0.5rem; }

.pane-header .pane-tag {
  font-size: 0.42rem;
  padding: 1px 5px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(239, 192, 60, 0.25);
  border-radius: 2px;
}

.pane-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px;
  font-size: 0.58rem;
  line-height: 1.45;
  min-height: 0;
}

.pane-body:not(.profile-body)::-webkit-scrollbar { width: 4px; }
.pane-body:not(.profile-body)::-webkit-scrollbar-track { background: transparent; }
.pane-body:not(.profile-body)::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

/* Profile (Black Bull) · Activity · Status */
.pane-profile { grid-row: 1 / -1; grid-column: 1; }
.pane-main { grid-row: 1; grid-column: 2; }
.pane-side { grid-row: 1; grid-column: 3; }

/* ========== PROFILE ========== */
.profile-body {
  padding: 10px 10px !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.profile-avatar {
  position: relative;
  margin-bottom: 8px;
  align-self: center;
}

.avatar-img,
video.avatar-img {
  width: 72px;
  height: 72px;
  max-width: 72px;
  max-height: 72px;
  min-width: 72px;
  min-height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--border-light);
  display: block;
  background: #000;
}

.avatar-status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background: var(--red-bright);
  border-radius: 50%;
  border: 2px solid var(--bg-window);
  box-shadow: 0 0 6px var(--red-glow);
  animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.profile-name-block {
  text-align: center;
  margin-bottom: 4px;
}

.profile-name {
  font-size: 0.78rem;
  color: var(--bright);
  letter-spacing: 1px;
}

.profile-sub {
  font-size: 0.44rem;
  color: var(--dim);
  margin-top: 2px;
  line-height: 1.35;
  word-break: break-word;
}

.profile-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.profile-meta { width: 100%; }

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 0;
  font-size: 0.48rem;
}

.meta-label {
  color: var(--dim);
  flex-shrink: 0;
}

.meta-value {
  color: var(--white);
  text-align: right;
  word-break: break-word;
  min-width: 0;
}
.meta-value.active { color: var(--red-bright); }

.profile-section-title {
  width: 100%;
  font-size: 0.45rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.profile-fold {
  width: 100%;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.015);
}

.profile-fold[open] {
  border-color: rgb(var(--blaze-rgb) / 0.32);
  background: rgba(90, 0, 0, 0.08);
}

.profile-fold-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
  padding: 5px 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--gray);
  transition: color 0.15s;
}

.profile-fold-summary::-webkit-details-marker {
  display: none;
}

.profile-fold-summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 0.55rem;
  line-height: 1;
  color: var(--red-bright);
  letter-spacing: 0;
}

.profile-fold[open] > .profile-fold-summary {
  color: var(--white);
  border-bottom: 1px solid rgb(var(--blaze-rgb) / 0.18);
}

.profile-fold[open] > .profile-fold-summary::after {
  content: "−";
}

.profile-fold-summary:hover {
  color: var(--white);
}

.profile-fold-body {
  padding: 4px 8px 6px;
}

.profile-fold-body .profile-desc {
  margin: 0;
}

/* Generated-image thumbnails (below The stack) */
.profile-gen {
  width: 100%;
}

.profile-gen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.profile-gen-count {
  font-size: 0.42rem;
  color: var(--red-bright);
  letter-spacing: 0.5px;
}

.profile-gen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.profile-gen-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s, transform 0.1s;
}

.profile-gen-thumb:hover {
  border-color: rgb(var(--blaze-rgb) / 0.5);
  transform: translateY(-1px);
}

.profile-gen-thumb img,
.profile-gen-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-gen-empty {
  grid-column: 1 / -1;
  font-size: 0.46rem;
  color: var(--dim);
  line-height: 1.4;
  padding: 8px 4px;
}

.profile-gen-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
}

.profile-gen-pager:empty {
  display: none;
}

.profile-gen-page-btn {
  font-family: inherit;
  font-size: 0.42rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bright);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.profile-gen-page-btn:hover:not(:disabled) {
  border-color: rgb(var(--blaze-rgb) / 0.5);
  color: var(--white);
}

.profile-gen-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.profile-gen-page-info {
  font-size: 0.42rem;
  color: var(--dim);
  letter-spacing: 0.5px;
}

.profile-list { width: 100%; }

.list-item {
  font-size: 0.46rem;
  color: var(--white);
  padding: 1px 0 1px 10px;
  position: relative;
  line-height: 1.35;
  word-break: break-word;
}

.list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--red);
  border-radius: 1px;
  transform: translateY(-50%);
}

.profile-desc {
  width: 100%;
  font-size: 0.46rem;
  color: var(--gray);
  line-height: 1.45;
  word-break: break-word;
}

/* Profile metric bars */
.profile-metrics {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.42rem;
}

.metric-label {
  color: var(--dim);
  width: 58px;
  flex-shrink: 0;
  line-height: 1.2;
}

.bar-track {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red-dim) 0%, var(--red) 55%, var(--gold-dim) 100%);
  border-radius: 1px;
  transition: width 1s ease;
}

.metric-val {
  color: var(--white);
  width: 28px;
  text-align: right;
  font-size: 0.46rem;
}

/* ========== TEXT STYLES ========== */
.line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.line + .line { margin-top: 1px; }

.side-stat {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.5rem;
  line-height: 1.35;
}

.side-stat .side-label {
  color: var(--dim);
  flex-shrink: 0;
}

.side-stat .side-val {
  color: var(--white);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

.side-section {
  font-size: 0.5rem;
  color: var(--dim);
  margin: 6px 0 3px;
  letter-spacing: 0.5px;
}

.prompt { color: var(--red-bright); }
.cmd { color: var(--bright); }
.dim { color: var(--dim); }
.bold { color: var(--bright); font-weight: normal; }
.red { color: var(--red-bright); }
.white { color: var(--white); }

.cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: var(--red-bright);
  animation: blink 1s steps(1) infinite;
  vertical-align: text-bottom;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: var(--red-bright);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--red-glow);
  animation: pulse-status 2s ease-in-out infinite;
  display: inline-block;
  vertical-align: middle;
}

/* ===== TASKBAR (bottom) ===== */
/* ===== MOBILE PANE TABS (agent window) ===== */
.mobile-pane-tabs {
  display: none;
  flex-shrink: 0;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: #000;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mobile-pane-tabs::-webkit-scrollbar {
  display: none;
}

.mobile-pane-tab {
  appearance: none;
  flex: 1 0 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--dim);
  font-family: var(--font);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.mobile-pane-tab.active {
  color: var(--red-bright);
  border-bottom-color: var(--red);
  background: rgba(90, 0, 0, 0.18);
}

.taskbar-ca {
  display: none;
  appearance: none;
  align-items: center;
  gap: 5px;
  max-width: 112px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  background: rgba(90, 0, 0, 0.2);
  color: var(--white);
  font-family: var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.taskbar-ca:disabled {
  cursor: default;
  opacity: 0.85;
}

.taskbar-ca-tag {
  flex-shrink: 0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--red-bright);
}

.taskbar-ca-text {
  min-width: 0;
  font-size: 0.7rem;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== TASKBAR ===== */
.taskbar-bottom {
  height: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: stretch;
  background: var(--bg-titlebar);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 100;
  font-family: var(--font);
}

.taskbar-start {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  flex-shrink: 0;
  border: none;
  border-right: 1px solid var(--border);
  background: #000;
  box-shadow: inset 0 -2px 0 var(--red);
  user-select: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.taskbar-start:hover {
  background: rgba(90, 0, 0, 0.22);
}

.taskbar-start.is-open {
  background: rgba(90, 0, 0, 0.38);
  box-shadow: inset 0 -2px 0 var(--red-bright);
}

.start-menu {
  position: fixed;
  left: 0;
  bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  width: min(272px, calc(100vw - 12px));
  margin: 0 0 4px 4px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.45);
  border-radius: 4px;
  background: linear-gradient(180deg, #120000 0%, #000 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 12px 32px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.start-menu.hidden {
  display: none;
}

.start-menu-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgb(var(--blaze-rgb) / 0.22);
  background: rgba(90, 0, 0, 0.18);
}

.start-menu-brand {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--white);
}

.start-menu-sub {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--gray);
  text-transform: uppercase;
}

.start-menu-items {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.start-menu-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.start-menu-item:hover,
.start-menu-item:focus-visible {
  background: rgb(var(--blaze-rgb) / 0.16);
  color: var(--bright);
  outline: none;
}

.start-menu-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid rgb(var(--blaze-rgb) / 0.28);
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-bright);
}

.start-menu-icon .app-glyph {
  width: 14px;
  height: 14px;
}

.start-menu-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(58, 40, 40, 0.85);
  padding: 8px;
  background: rgba(0, 0, 0, 0.35);
}

.start-menu-shutdown {
  appearance: none;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(58, 40, 40, 0.9);
  border-radius: 3px;
  background: rgba(12, 0, 0, 0.65);
  color: var(--gray);
  font-family: inherit;
  font-size: 0.46rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.start-menu-shutdown:hover {
  color: var(--white);
  border-color: rgb(var(--blaze-rgb) / 0.35);
  background: rgba(90, 0, 0, 0.25);
}

.taskbar-start-mark {
  color: var(--red-bright);
  font-size: 0.5rem;
  line-height: 1;
}

.taskbar-start-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--white);
  white-space: nowrap;
}

.taskbar-items {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.taskbar-items::-webkit-scrollbar {
  display: none;
}

/* A taskbar row exists only while its window does.
   These sat in the bar permanently, so the strip advertised three apps whether
   or not anything was open, and one of them (Banners) had no handler behind it
   at all and did nothing when clicked. A taskbar is a list of what is open and
   what is minimised, which is its one job and the only reason a minimised
   window is findable again.

   `.present` is added when the window opens and removed when it closes, and it
   deliberately SURVIVES minimise: a minimised window that vanishes from the
   taskbar cannot be got back.

   Only `display` is toggled here. Folding the rest of the styling into
   `.present` would raise it to two classes and beat the pill treatment that
   overrides `.taskbar-item` further down the file. */
.taskbar-item {
  display: none;
}

.taskbar-item.present {
  display: inline-flex;
}

.taskbar-item {
  appearance: none;
  font-family: inherit;
  height: calc(var(--taskbar-h) - 8px);
  padding: 0 12px;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.taskbar-item:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.taskbar-item.active {
  color: var(--bright);
  background: rgb(var(--blaze-rgb) / 0.14);
  border-color: var(--red-dim);
}

.taskbar-item .app-glyph {
  width: 14px;
  height: 14px;
}

.taskbar-tray {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 0 12px;
  border-left: 1px solid var(--border);
  background: #000;
}

.taskbar-tray-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.46rem;
  letter-spacing: 0.1em;
  color: var(--red-bright);
}

.taskbar-audio-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
}

.taskbar-audio-btn:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}

.taskbar-audio-btn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.65);
  outline-offset: 1px;
}

.taskbar-audio-icon {
  width: 13px;
  height: 13px;
  display: block;
}

.taskbar-theme-icon {
  width: 13px;
  height: 13px;
  display: block;
}

.taskbar-theme-icon--moon {
  display: none;
}

html[data-theme="light"] .taskbar-theme-icon--sun {
  display: none;
}

html[data-theme="light"] .taskbar-theme-icon--moon {
  display: block;
}

.taskbar-audio-icon--off {
  display: none;
}

.taskbar-audio-btn.is-muted {
  color: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.16);
}

.taskbar-audio-btn.is-muted .taskbar-audio-icon--on {
  display: none;
}

.taskbar-audio-btn.is-muted .taskbar-audio-icon--off {
  display: block;
}

.taskbar-tray-lore {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 0.52rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--white);
  user-select: none;
  white-space: nowrap;
}

.taskbar-live-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 6px var(--red-glow);
  animation: taskbar-live-pulse 2.4s ease-in-out infinite;
}

@keyframes taskbar-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.taskbar-tray-time {
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.taskbar-tray-date {
  font-size: 0.46rem;
  letter-spacing: 0.05em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .desktop-icons {
    top: 12px;
    left: 8px;
    gap: 4px;
    max-width: 76px;
  }

  .desktop-icon {
    width: 68px;
    min-height: 76px;
    padding: 6px 2px 4px;
  }

  .desktop-icon-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }

  .desktop-icon-img svg {
    width: 20px;
    height: 20px;
  }

  .desktop-icon-label {
    font-size: 0.48rem;
    min-height: 2.5em;
    max-height: 2.5em;
  }

  .app-window,
  .gallery-window,
  .media-window,
  .link-window,
  .desk-window,
  .doc-window,
  .about-window {
    left: 88px;
    right: 12px;
    top: 8px;
    bottom: 8px;
    max-width: none;
    min-width: 0;
    resize: none;
  }

  .about-layout {
    grid-template-columns: minmax(96px, 118px) minmax(0, 1fr);
  }

  .about-rail {
    display: none;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .taskbar-item {
    padding: 0 8px;
    font-size: 0.5rem;
  }

  .taskbar-tray-live {
    display: none;
  }

  .window-content {
    --pane-rail-w: 148px;
    grid-template-columns: minmax(0, var(--pane-rail-w)) minmax(0, 1fr) minmax(0, var(--pane-rail-w));
    grid-template-rows: minmax(0, 1fr);
  }

  #appWindow .window-content {
    --pane-rail-w: 148px;
    grid-template-columns: minmax(0, var(--pane-rail-w)) minmax(0, 1fr) minmax(0, var(--pane-rail-w));
  }
  .pane-profile { grid-row: 1 / -1; grid-column: 1; }
  .pane-main { grid-row: 1; grid-column: 2; }
  .pane-side { grid-row: 1; grid-column: 3; }
}

@media (max-width: 600px) {
  :root {
    --taskbar-h: 36px;
  }

  .boot-enter {
    font-size: 0.68rem;
    max-width: min(94vw, 420px);
  }

  .desktop-area {
    padding: 0;
    overflow: hidden;
    min-width: 0;
  }

  .desktop-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(120, 0, 0, 0.22) 0%, transparent 42%),
      radial-gradient(ellipse at 80% 90%, rgba(90, 0, 0, 0.18) 0%, transparent 40%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 18%, transparent 78%, rgba(0, 0, 0, 0.35) 100%);
  }

  /* Same desktop metaphor as desktop: left icon column, not a top dock */
  .desktop-icons {
    flex-direction: column;
    flex-wrap: nowrap;
    top: 8px;
    left: 4px;
    right: auto;
    width: auto;
    max-width: 68px;
    max-height: calc(100% - 12px);
    gap: 0;
    justify-content: flex-start;
    overflow: hidden;
    scrollbar-width: none;
    z-index: 5;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .desktop-icons::-webkit-scrollbar {
    display: none;
  }

  .desktop-ca-strip {
    display: none;
  }

  .desktop-icon {
    width: 64px;
    min-width: 0;
    min-height: 64px;
    flex: 0 0 auto;
    padding: 4px 2px 2px;
    border-radius: 4px;
  }

  .desktop-icon.selected {
    background: rgb(var(--blaze-rgb) / 0.14);
    border-color: rgb(var(--blaze-rgb) / 0.32);
  }

  .desktop-icon-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .desktop-icon-label {
    font-size: 0.44rem;
    line-height: 1.15;
    min-height: 2.3em;
    max-height: 2.3em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  }

  .app-window:not(.window-compact),
  .gallery-window,
  .media-window,
  .link-window,
  .desk-window,
  .doc-window,
  .about-window {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 0;
    max-width: none;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    border: none;
    box-shadow: none;
    resize: none;
  }

  .app-window.maximized,
  .gallery-window.maximized,
  .media-window.maximized,
  .desk-window.maximized,
  .link-window.maximized,
  .doc-window.maximized,
  .about-window.maximized {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .app-window::after {
    display: none;
  }

  .app-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    border-radius: inherit;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.045) 2px,
      rgba(0, 0, 0, 0.045) 4px
    );
    opacity: 0.55;
  }

  .window-titlebar {
    padding: 11px 12px;
    min-height: 42px;
    background:
      linear-gradient(180deg, rgba(18, 0, 0, 0.95) 0%, #050505 100%);
    border-bottom: 1px solid rgb(var(--blaze-rgb) / 0.28);
    box-shadow: inset 0 -2px 0 rgb(var(--blaze-rgb) / 0.55);
  }

  .window-titlebar .app-name {
    font-size: 0.66rem;
    min-width: 0;
    letter-spacing: 0.04em;
  }

  .window-titlebar .app-icon {
    box-shadow: 0 0 10px rgb(var(--blaze-rgb) / 0.35);
  }

  .window-titlebar .window-controls {
    gap: 12px;
    padding-left: 8px;
  }

  .window-titlebar .win-btn {
    width: 16px;
    height: 16px;
  }

  .window-titlebar .win-btn::before {
    inset: -10px;
  }

  .mobile-pane-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 4px;
    padding: 6px 8px 0;
    background:
      linear-gradient(180deg, rgba(8, 0, 0, 0.95) 0%, #000 100%);
    border-bottom: 1px solid rgba(58, 40, 40, 0.9);
  }

  .mobile-pane-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 0 6px 6px;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 8px 8px 0 0;
    border-bottom-width: 2px;
  }

  .mobile-pane-tab.active {
    color: var(--red-bright);
    background: rgba(90, 0, 0, 0.28);
    border-bottom-color: var(--red);
    text-shadow: 0 0 10px rgb(var(--blaze-rgb) / 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  #appWindow,
  #appWindow .window-content,
  #appWindow .pane,
  #appWindow .aim-chat-wrap,
  #appWindow .aim-chat-log {
    min-width: 0;
    max-width: 100%;
  }

  #appWindow .window-content {
    display: block;
    overflow: hidden;
    position: relative;
    min-height: 0;
    width: 100%;
  }

  #appWindow .window-content > .pane {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none !important;
    overflow: hidden;
  }

  #appWindow .window-content[data-mobile-pane="main"] > .pane-main,
  #appWindow .window-content[data-mobile-pane="profile"] > .pane-profile,
  #appWindow .window-content[data-mobile-pane="side"] > .pane-side {
    display: flex;
    flex-direction: column;
  }

  #appWindow .aim-pane .pane-header {
    gap: 6px;
    padding: 7px 12px;
    background: linear-gradient(180deg, rgba(90, 0, 0, 0.16) 0%, transparent 100%);
    border-bottom: 1px solid rgba(58, 40, 40, 0.85);
  }

  #appWindow .aim-chat-sub {
    display: none;
  }

  #appWindow .aim-chat-log {
    padding: 10px 12px 8px;
  }

  #appWindow .aim-msg {
    max-width: 100%;
  }

  #appWindow .aim-bubble {
    max-width: 100%;
    min-width: 0;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }

  #appWindow .aim-text {
    font-size: 0.78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #appWindow .aim-name {
    font-size: 0.58rem;
  }

  #appWindow .aim-time {
    font-size: 0.5rem;
  }

  #appWindow .pane-title,
  #appWindow .pane-tag {
    font-size: 0.58rem;
  }

  #appWindow .aim-chat-wrap {
    flex: 1;
    min-height: 0;
    min-width: 0;
  }

  #appWindow .aim-chat-footer {
    background: rgba(90, 0, 0, 0.08);
    border-top: 1px solid rgba(58, 40, 40, 0.85);
  }

  #appWindow .pane-body,
  #appWindow .profile-desc,
  #appWindow .list-item,
  #appWindow .meta-row,
  #appWindow .side-identity-sub,
  #appWindow #bottomOutput .term-line {
    font-size: 0.68rem;
    overflow-wrap: anywhere;
  }

  #appWindow .meta-label,
  #appWindow .metric-label,
  #appWindow .side-section-title,
  #appWindow .profile-section-title {
    font-size: 0.54rem;
  }

  #appWindow .side-performance,
  #appWindow .side-ledger {
    max-height: none;
    background: rgba(255, 255, 255, 0.015);
  }

  #appWindow .side-identity {
    background: linear-gradient(180deg, rgba(90, 0, 0, 0.2) 0%, #000 100%);
  }

  #appWindow .side-identity-sub {
    word-break: break-word;
  }

  /* Icon dock switches apps — keep footer as status strip with desktop details */
  .taskbar-bottom {
    max-width: 100%;
    min-width: 0;
    height: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 10px env(safe-area-inset-bottom, 0px);
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border-top: 1px solid rgb(var(--blaze-rgb) / 0.35);
    background:
      linear-gradient(180deg, rgba(28, 0, 0, 0.55) 0%, #000 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .taskbar-items {
    display: none;
  }

  .taskbar-start {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px 0 2px;
    border: none;
    border-right: 1px solid rgb(var(--blaze-rgb) / 0.28);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--red);
    flex-shrink: 0;
    cursor: pointer;
  }

  .start-menu {
    width: min(260px, calc(100vw - 16px));
    margin: 0 0 6px 6px;
  }

  .start-menu-item {
    padding: 10px 12px;
    font-size: 0.58rem;
  }

  .taskbar-start-mark {
    font-size: 0.46rem;
    color: var(--red-bright);
  }

  .taskbar-start-label {
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--white);
  }

  .taskbar-tray {
    gap: 8px;
    padding: 0 2px 0 0;
    min-width: 0;
    max-width: none;
    overflow: visible;
    border-left: none;
    background: transparent;
    flex-shrink: 1;
    margin-left: auto;
  }

  .taskbar-ca,
  .taskbar-tray-date {
    display: none;
  }

  .taskbar-tray-live {
    display: none;
  }

  .taskbar-audio-btn {
    width: 20px;
    height: 20px;
  }

  .taskbar-audio-icon {
    width: 12px;
    height: 12px;
  }

  .taskbar-tray-lore {
    display: inline-flex;
    font-size: 0.52rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--white);
  }

  .taskbar-tray-time {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    min-width: 3.2em;
    text-align: right;
  }

  .backrooms-filter,
  .gallery-filter {
    font-size: 0.52rem;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 5px;
  }

  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-nav,
  .docs-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }

  .docs-nav-link {
    flex-shrink: 0;
    min-height: 40px;
    padding: 10px 12px;
    font-size: 0.58rem;
    white-space: nowrap;
  }

  .desktop-wallpaper-art-img {
    max-width: min(70vw, 420px);
    max-height: min(52dvh, 380px);
  }
}

@media (max-width: 600px) and (hover: none) {
  .desktop-icon:hover {
    background: transparent;
  }

  .desktop-icon.selected {
    background: rgb(var(--blaze-rgb) / 0.18);
  }
}

/* offgrid brand extras */
.desktop-wallpaper {
  background: var(--bg);
}

/* ===== LIGHT DESKTOP (warm canvas, never white) =====
   Only the brand tokens flip. Every alias in :root reads through to these. */
html[data-theme="light"] {
  --ground: #f3ecee;
  --ground-2: #faf4f5;
  --surface: #fffafb;
  --surface-2: #f5eef0;
  --line: #dfd1d6;
  --line-2: #cabcc1;
  --oat: #1c1417;
  --oat-2: #63565a;
  --muted-ink: #6e6065;
  --blaze: #D21151;
  --blaze-rgb: 210 17 81;
  --blaze-ink: #d21151;
  --blaze-dim: #b90f47;
  --on-blaze: #fff7f0;
  --loden: #55702a;
  --brass: #8d640e;
  --brass-dim: #6f4e0b;
  --danger: #c42b31;
  --blaze-soft: rgb(var(--blaze-rgb) / 0.1);
  --blaze-line: rgb(var(--blaze-rgb) / 0.28);
  --loden-soft: rgba(85, 112, 42, 0.1);
  --loden-line: rgba(85, 112, 42, 0.28);
  --brass-soft: rgba(141, 100, 14, 0.1);
  --brass-line: rgba(141, 100, 14, 0.28);
  --ink-soft: rgba(28, 20, 23, 0.05);
  --chrome: rgba(255, 250, 251, 0.72);
  --chrome-solid: #fffafb;
  --boot-glow: rgba(28, 20, 23, 0.28);

  /* ===== the survey layer (section 20) ===== */
  /* Light mode inverts the mechanism. A white wash on a near-white surface
     moves the composited colour by 1 of 255, measured, so the lift here has
     to END in ink: the surface stays bright at the top and settles into a
     shadow at the bottom. Same declaration, opposite physics. */
  --survey-lift: linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 38%, rgba(28, 20, 23, 0.045) 100%);
  --survey-dot: rgb(var(--blaze-rgb) / 0.085);
  --survey-rim: rgb(var(--blaze-rgb) / 0.28);
  --survey-rim-soft: rgb(var(--blaze-rgb) / 0.1);
  --survey-contact: rgba(28, 20, 23, 0.12);
  /* Light: nothing can be won from the fill, which is 1.08 against the
     canvas. The edge is a contact shadow, tight and just outside the
     border, the way paper sits on a desk. */
  --survey-edge: 0 0 0 1px rgba(28, 20, 23, 0.26), 0 3px 10px -2px rgba(28, 20, 23, 0.26);
  --survey-border: var(--line-2);

  --red-glow: rgb(var(--blaze-rgb) / 0.28);
  --close-hover: #a92026;

  --shadow-window: 0 32px 64px -14px rgba(28, 20, 23, 0.22), 0 8px 20px -8px rgba(28, 20, 23, 0.12);
  --shadow-pop: 0 22px 44px -10px rgba(28, 20, 23, 0.18), 0 8px 16px -8px rgba(28, 20, 23, 0.1);
  color-scheme: light;
}

html[data-theme="light"] .terminal-container {
  background: var(--bg);
}

html[data-theme="light"] .desktop-wallpaper {
  background: var(--bg);
}

html[data-theme="light"] .desktop-wallpaper-art-img {
  opacity: 0.7;
  filter: none;
}

html[data-theme="light"] .wp-mark { fill: var(--blaze); }

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .desktop-wallpaper,
html[data-theme="dark"] .terminal-container {
  background: var(--ground);
}

html[data-theme="dark"] .desktop-wallpaper-art-img {
  opacity: 0.78;
  filter: none;
}

html[data-theme="dark"] .wp-mark { fill: var(--blaze); }

html[data-theme="dark"] .desktop-wallpaper-title,
html[data-theme="dark"] .desktop-icon-label {
  color: var(--oat);
}

html[data-theme="dark"] .desktop-wallpaper-lead {
  color: var(--muted-ink);
}

/* =============================================
   DESKTOP CHROME
   Square outer frames, rounded-rectangle panels,
   hairline borders, layered shadows, glass fill.
   Both themes read from the tokens above.
   ============================================= */

/* The taskbar is the grid's auto row inside .terminal-container. Do not
   shrink the shell and then pin the bar: that left a gap under the icons. */
.desktop-wallpaper {
  bottom: var(--taskbar-h);
  padding-left: var(--desktop-icon-rail);
}

/* ---------- desktop icons: one column of identical tiles ---------- */
.desktop-icons {
  top: 10px;
  bottom: auto;
  max-height: calc(100% - 14px);
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 6px;
  max-width: 80px;
  scrollbar-width: none;
}

.desktop-icons::-webkit-scrollbar {
  display: none;
}

.desktop-icon {
  appearance: none;
  -webkit-appearance: none;
  width: 76px;
  height: 68px;
  min-height: 68px;
  gap: 4px;
  padding: 2px 4px 0;
  border: none;
  outline: none;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  transition: background 0.15s ease, transform 0.12s ease;
}

.desktop-icon:hover {
  background: transparent;
  border-color: transparent;
}

.desktop-icon.selected {
  background: transparent;
  border-color: transparent;
}

.desktop-icon:focus,
.desktop-icon:focus-visible {
  outline: none;
}

.desktop-icon .desktop-icon-img,
.desktop-icon .desktop-icon-img[class*="icon-"] {
  --icon-face: #ef3472;
  --icon-lift: color-mix(in srgb, var(--icon-face) 68%, #ffffff);
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(165deg, var(--icon-lift) 0%, var(--icon-face) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 16px -6px rgba(0, 0, 0, 0.28);
  color: #fff;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

.desktop-icon .desktop-icon-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 48%);
  pointer-events: none;
}

.desktop-icon:hover .desktop-icon-img {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 12px 20px -8px rgba(0, 0, 0, 0.5);
}

.desktop-icon:active .desktop-icon-img {
  transform: translateY(0) scale(0.96);
  filter: brightness(0.96);
}

.desktop-icon .desktop-icon-img svg,
.desktop-icon .desktop-icon-img .app-glyph {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18));
  color: inherit;
  position: relative;
  z-index: 1;
}

.desktop-icon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Tile faces stay saturated in both themes so the three groups
   stay distinct: gold featured, blaze apps, loden camp cluster. */
.desktop-icon[data-tone="featured"] .desktop-icon-img,
.start-menu-item[data-tone="featured"] .start-menu-icon {
  --icon-face: #efc03c;
}

.desktop-icon[data-tone="app"] .desktop-icon-img,
.start-menu-item[data-tone="app"] .start-menu-icon {
  --icon-face: #ef3472;
}

.desktop-icon[data-tone="camp"] .desktop-icon-img,
.start-menu-item[data-tone="camp"] .start-menu-icon {
  --icon-face: #ef3472;
}

/* Upcoming apps. A graphite face, the one tone on the desk that is not lit,
   so the four teasers read as switched off next to gold, blaze and loden;
   the brass tag is what says "soon" rather than "broken". */
.desktop-icon[data-tone="soon"] .desktop-icon-img,
.start-menu-item[data-tone="soon"] .start-menu-icon {
  --icon-face: #5a6470;
}

.desktop-icon[data-soon] {
  position: relative;
}

.desktop-icon[data-soon] .desktop-icon-img .app-glyph {
  opacity: 0.92;
}

.desktop-icon-soon,
.start-menu-soon {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a0c03;
  background: linear-gradient(180deg, #f6d36a 0%, #efc03c 100%);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

.desktop-icon-soon {
  position: absolute;
  top: 0;
  right: 8px;
  padding: 3px 5px;
  text-shadow: none;
  transform-origin: center;
}

.start-menu-soon {
  margin-left: auto;
  padding: 3px 6px;
}

/* One beat of the tag on a press: the tile was asked for something and this
   is its answer. Motion is a transform only, and off under reduced motion. */
@keyframes soon-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.is-teased .desktop-icon-soon,
.is-teased .start-menu-soon {
  animation: soon-pulse 0.55s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .is-teased .desktop-icon-soon,
  .is-teased .start-menu-soon {
    animation: none;
  }
}

/* The shelf the four teasers sit on: bottom right of the desk, clear of the
   icon column and of where a window opens. On the phone shell the start
   menu carries them instead. */
.desktop-soon {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* The tags ride above the tiles, so the kicker sits clear of them. */
  gap: 10px;
  user-select: none;
}

/* Wider tiles than the column's, because "Encrypted Messaging" and "Privacy
   Markets" are two words each and the column's one-line ellipsis would cut
   them to "Encrypted ..." (measured). Two lines, no truncation. */
.desktop-soon .desktop-icon {
  width: 92px;
  height: auto;
  min-height: 74px;
}

.desktop-soon .desktop-icon-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
  height: auto;
  min-height: 2.3em;
  max-height: 2.3em;
}

.desktop-soon-kicker {
  margin: 0 8px 1px 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* The label colour of the desk in each theme, a step quieter. */
  color: var(--white);
  opacity: 0.78;
  text-shadow: none;
}

html[data-theme="dark"] .desktop-soon-kicker {
  color: var(--oat);
}

.desktop-soon-row {
  display: flex;
  gap: 2px;
}

@media (max-width: 600px) {
  .desktop-soon {
    display: none;
  }
}

/* No tile is left untinted: the base face is var(--blaze) and the three tones
   override it, so every glyph stays white in both themes. An app added
   without a data-tone lands on the blaze face and still reads. */

.desktop-icon .desktop-icon-img img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: none;
  position: relative;
  z-index: 1;
}

.desktop-icon-label.x-handle-label,
.start-menu-label.x-handle-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.desktop-icon-label {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 1.2em;
  min-height: 1.2em;
  max-height: 1.2em;
  font-family: var(--font-icons);
  font-size: 0.68rem;
  font-weight: 500;
  font-synthesis: none;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktop-icon-label.x-handle-label {
  font-size: 0.56rem;
  letter-spacing: 0.03em;
}

/* ---------- windows: one size, one chrome ---------- */
.app-window,
.gallery-window,
.media-window,
.link-window,
.desk-window,
.doc-window,
.about-window {
  background: var(--chrome);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-window), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  min-width: 0;
  min-height: 0;
}

.app-window > .window-titlebar {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.window-titlebar,
.desk-tabs,
.doc-banner,
.guide-banner,
.media-banner,
.gallery-toolbar {
  background: color-mix(in srgb, var(--ground-2) 55%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

.desk-frame,
.link-window-body,
#appWindow .window-content,
#appWindow .pane-main .pane-body,
.pane {
  background: transparent;
}

.camp-launch {
  background: var(--chrome);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.camp-launch:hover,
.camp-launch:focus-visible {
  background: color-mix(in srgb, var(--blaze) 12%, var(--chrome));
}

.gallery-detail,
.media-detail {
  background: var(--chrome);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.window-titlebar .app-icon,
.window-titlebar .app-icon[class*="-badge"] {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--blaze);
}

.doc-banner,
.guide-banner,
.media-banner,
.gallery-toolbar {
  min-height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}

.window-titlebar {
  gap: 12px;
  padding: 0 14px;
  height: 42px;
  border-bottom: 1px solid var(--border);
}

/* Controls right, title left beside its icon.
   They were on the LEFT of a centred title, balanced by a 58px phantom spacer.
   That arrangement is macOS window furniture and it read as somebody else's
   operating system sitting on top of this one. Putting them back on the right
   also means the close button is no longer the first thing under the pointer
   when a window is dragged by its titlebar. */
.window-titlebar .window-controls {
  gap: 6px;
  align-items: center;
}

.window-titlebar .title-left {
  justify-content: flex-start;
  gap: 8px;
}

.window-titlebar .app-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: none;
  color: var(--blaze);
}

.window-titlebar .app-icon .app-glyph {
  width: 15px;
  height: 15px;
}

.window-titlebar .app-icon.link-icon-badge-x {
  color: var(--brass);
}

.window-titlebar .app-name {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

/* Window controls: glyph cells, not traffic lights.
   The three dots were literal Apple values (#ff5f57 / #febc2e / #28c840) on an
   oat-and-blaze palette, with the glyphs switched off underneath them, so the
   only thing telling you which button was which was having memorised the
   colour order. That says nothing at all to anyone who cannot separate red
   from green, and it is the single most recognisable piece of another
   platform's chrome.
   Now: the shape carries the meaning and the cell only appears under the
   cursor, so a titlebar at rest is a title and three quiet marks. */
.window-titlebar .win-btn {
  width: 20px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dim);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* Undoes the `display: none` that suppressed the glyphs for the dots. */
.window-titlebar .win-btn::after { display: block; }

.window-titlebar .win-btn:hover {
  background: var(--line-2);
  border-color: var(--line-2);
  color: var(--white);
  filter: none;
}

.window-titlebar .win-btn:focus-visible {
  outline: 2px solid var(--blaze-ink);
  outline-offset: 1px;
}

/* Minimise, maximise, close. Close is last: destructive actions go at the end
   of a row, not at the head of it where the pointer arrives first. */
.window-titlebar .win-btn.minimize {
  order: 1;
  background: transparent;
  border-color: transparent;
}

.window-titlebar .win-btn.maximize {
  order: 2;
  background: transparent;
  border-color: transparent;
}

.window-titlebar .win-btn.close {
  order: 3;
  background: transparent;
  border-color: transparent;
  color: var(--dim);
}

/* The only control that takes the brand colour, and it earns it by being the
   one you cannot undo. */
.window-titlebar .win-btn.close:hover {
  background: var(--blaze-ink);
  border-color: var(--blaze-ink);
  color: var(--oat);
  filter: none;
}

#appWindow .window-titlebar {
  height: 42px;
  padding: 0 14px;
}

#appWindow .window-titlebar .app-name {
  font-size: 0.8rem;
}

/* ---------- desk tabs: segmented control ---------- */
.desk-tabs {
  gap: 2px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.desk-tab {
  border: none;
  border-radius: var(--radius-badge);
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray);
  transition: background 0.14s ease, color 0.14s ease;
}

.desk-tab:hover {
  background: var(--ink-soft);
  border-color: transparent;
  color: var(--white);
}

.desk-tab.active {
  background: var(--blaze);
  border-color: transparent;
  color: var(--on-blaze);
}

/* ---------- wallpaper mark ---------- */
/* The mark sits in .desktop-wallpaper (flex-centered, icon-rail padded) so
   the face is the canvas centerpiece. Copy and CTAs used to live in a hero
   overlay; those CTAs now live in the start-menu footer. */

/* camp-launch is the desk home-card face. Reset it for the menu CTAs. */
.camp-launch.start-menu-cta {
  appearance: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.camp-launch.start-menu-cta:hover,
.camp-launch.start-menu-cta:focus-visible {
  background: none;
  border-color: transparent;
  outline: none;
}

.camp-launch.start-menu-cta:focus-visible {
  outline: 2px solid var(--blaze);
  outline-offset: 2px;
}

.camp-launch.start-menu-cta--primary {
  background: var(--icon-gold);
  border-color: transparent;
  color: #1a0c03;
}

.camp-launch.start-menu-cta--primary:hover,
.camp-launch.start-menu-cta--primary:focus-visible {
  background: color-mix(in srgb, var(--icon-gold) 88%, #000000);
  border-color: transparent;
  color: #1a0c03;
}

.camp-launch.start-menu-cta--primary:focus-visible {
  outline-color: var(--icon-gold);
}

.camp-launch.start-menu-cta--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--white);
}

.camp-launch.start-menu-cta--ghost:hover,
.camp-launch.start-menu-cta--ghost:focus-visible {
  background: var(--ink-soft);
  border-color: var(--blaze-line);
  color: var(--white);
}

/* ---------- dock ---------- */
.taskbar-bottom {
  gap: 6px;
  align-items: center;
  padding: 0 10px;
  background: var(--chrome);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
}

.taskbar-start {
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: none;
  border-right: none;
  border-radius: 0;
  background: var(--blaze-soft);
  box-shadow: none;
  color: var(--blaze);
}

.taskbar-start:hover,
.taskbar-start.is-open {
  background: var(--blaze);
  box-shadow: none;
  color: var(--on-blaze);
}

.taskbar-start-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.taskbar-items {
  gap: 2px;
  padding: 0 4px;
}

.taskbar-item {
  height: 34px;
  padding: 0 12px;
  gap: 8px;
  border: none;
  border-radius: var(--radius-badge);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray);
}

.taskbar-item:hover {
  background: var(--ink-soft);
  border-color: transparent;
  color: var(--white);
}

.taskbar-item.active {
  background: var(--blaze-soft);
  border-color: transparent;
  color: var(--blaze);
}

.taskbar-tray {
  gap: 10px;
  padding: 0 6px 0 10px;
  border-left: 1px solid var(--border);
  background: none;
}

.taskbar-audio-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-badge);
  background: none;
  color: var(--dim);
}

.taskbar-audio-btn:hover {
  background: var(--ink-soft);
  border-color: transparent;
  color: var(--white);
}

.taskbar-tray-lore {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}

.taskbar-tray-time,
.taskbar-tray-date {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--gray);
}

/* The floating strip sat under whatever window was open, so the contract
   lives in the dock tray instead, the way a status item would. */
.desktop-ca-strip { display: none; }

.taskbar-ca {
  display: inline-flex;
  max-width: 160px;
  min-height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  background: none;
  font-family: var(--font);
}

.taskbar-ca:not(:disabled):hover {
  border-color: var(--blaze-line);
  background: var(--blaze-soft);
}

.taskbar-ca-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--blaze);
}

.taskbar-ca-text {
  font-size: 0.68rem;
  color: var(--gray);
}

@media (max-width: 600px) {
  .taskbar-ca { display: none; }
}

/* ---------- start menu ---------- */
.start-menu {
  margin: 0 0 8px 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--chrome);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-pop);
}

.start-menu-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: none;
}

.start-menu-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--blaze);
}

.start-menu-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}

.start-menu-items {
  padding: 6px;
}

.start-menu-sep {
  height: 1px;
  margin: 6px 8px;
  background: var(--border);
  pointer-events: none;
}

.start-menu-item {
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.start-menu-item:hover,
.start-menu-item:focus-visible {
  background: var(--blaze-soft);
  color: var(--blaze);
}

.start-menu-icon {
  --icon-face: #ef3472;
  --icon-lift: color-mix(in srgb, var(--icon-face) 68%, #ffffff);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(165deg, var(--icon-lift) 0%, var(--icon-face) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 2px 6px rgba(0, 0, 0, 0.14);
}

.start-menu-icon .app-glyph {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.16));
}

.start-menu-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  background: none;
}

.start-menu-shutdown {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}

.start-menu-shutdown:hover {
  border-color: var(--blaze-line);
  color: var(--blaze);
}

/* ---------- contract pill ---------- */
.desktop-ca-body {
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  padding: 8px 14px;
  background: var(--chrome);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-pop);
  color: var(--white);
}

.desktop-ca-body:hover:not(:disabled) {
  border-color: var(--blaze-line);
  background: var(--chrome);
  box-shadow: var(--shadow-pop);
}

.desktop-ca-tag,
.desktop-ca-copy {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.desktop-ca-address {
  font-family: var(--font);
  font-size: 0.72rem;
}

@media (max-width: 900px) {
  :root {
    --desktop-icon-rail: 82px;
  }

  .desktop-icons {
    max-width: 72px;
    gap: 4px;
  }

  .desktop-icon {
    width: 68px;
    height: 62px;
    min-height: 62px;
    padding: 2px 2px 0;
  }

  .desktop-icon .desktop-icon-img,
  .desktop-icon .desktop-icon-img[class*="icon-"] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .desktop-icon .desktop-icon-img svg,
  .desktop-icon .desktop-icon-img .app-glyph,
  .desktop-icon .desktop-icon-img img {
    width: 18px;
    height: 18px;
  }

  .desktop-icon-label {
    font-size: 0.62rem;
  }
}

@media (max-width: 600px) {
  :root {
    --desktop-icon-rail: 68px;
  }

  .desktop-icons {
    top: 8px;
    left: 4px;
    max-width: 62px;
    max-height: calc(100% - 12px);
    gap: 4px;
    overflow: hidden;
  }

  .desktop-icon-group {
    gap: 1px;
  }

  .desktop-icon {
    width: 58px;
    height: 54px;
    min-height: 54px;
    gap: 3px;
    padding: 1px;
  }

  .desktop-icon .desktop-icon-img,
  .desktop-icon .desktop-icon-img[class*="icon-"] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .desktop-icon .desktop-icon-img svg,
  .desktop-icon .desktop-icon-img .app-glyph,
  .desktop-icon .desktop-icon-img img {
    width: 16px;
    height: 16px;
  }

  .desktop-icon-label {
    font-size: 0.56rem;
  }
}

/* ==========================================================================
   MUSIC
   The camp radio. Colours come entirely from the theme tokens, so light and
   dark are handled by the same rules that handle every other window rather
   than by a second palette that has to be kept in step.
   ========================================================================== */

.music-window {
  width: min(420px, calc(100vw - 32px));
}

.music-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  background: var(--bg-window);
}

.music-now {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.music-art {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--blaze-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Five bars that move only while something is playing. A still equaliser is a
   clearer "paused" signal than any icon, and it costs no layout. */
.music-art-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}

.music-art-bars i {
  display: block;
  width: 4px;
  height: 30%;
  border-radius: 1px;
  background: var(--blaze);
  transition: height 0.2s ease;
}

.music-window.is-playing .music-art-bars i {
  animation: music-bar 900ms ease-in-out infinite;
}

.music-window.is-playing .music-art-bars i:nth-child(2) { animation-delay: 120ms; }
.music-window.is-playing .music-art-bars i:nth-child(3) { animation-delay: 240ms; }
.music-window.is-playing .music-art-bars i:nth-child(4) { animation-delay: 80ms; }
.music-window.is-playing .music-art-bars i:nth-child(5) { animation-delay: 300ms; }

@keyframes music-bar {
  0%, 100% { height: 26%; }
  50% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .music-window.is-playing .music-art-bars i { animation: none; height: 62%; }
}

.music-meta { min-width: 0; }

.music-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}

.music-title {
  margin: 4px 0 0;
  font-family: var(--font-display), var(--font-sans);
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-artist {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--dim);
}

.music-scrub { display: flex; flex-direction: column; gap: 6px; }

.music-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}

/* One appearance for both sliders. `appearance: none` on the track plus an
   explicit thumb, because the native control ignores the palette entirely and
   renders as the operating system's blue in light mode. */
.music-seek,
.music-vol {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}

.music-seek::-webkit-slider-thumb,
.music-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--blaze);
  border: 2px solid var(--bg-window);
  cursor: grab;
}

.music-seek::-moz-range-thumb,
.music-vol::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 2px solid var(--bg-window);
  border-radius: 50%;
  background: var(--blaze);
  cursor: grab;
}

.music-seek:focus-visible,
.music-vol:focus-visible {
  outline: 2px solid var(--blaze);
  outline-offset: 3px;
}

.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.music-btn {
  appearance: none;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  border-radius: var(--radius-badge);
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.music-btn svg { width: 18px; height: 18px; }

.music-btn-skip { width: 34px; height: 34px; }

.music-btn-skip:hover {
  color: var(--white);
  background: var(--ink-soft);
}

.music-btn-skip[aria-pressed='true'] { color: var(--blaze); }

.music-btn-play {
  width: 52px;
  height: 52px;
  background: var(--blaze);
  color: var(--oat);
  border-color: var(--blaze);
}

.music-btn-play svg { width: 22px; height: 22px; }

.music-btn-play:hover { filter: brightness(1.06); }

.music-btn:focus-visible {
  outline: 2px solid var(--blaze);
  outline-offset: 2px;
}

.music-volume {
  display: flex;
  align-items: center;
  gap: 10px;
}

.music-vol-glyph {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--dim);
}

.music-tracklist {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.music-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.music-track:hover { background: var(--ink-soft); color: var(--white); }

.music-track[aria-current='true'] { color: var(--blaze); background: var(--blaze-soft); }

.music-track-num {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  flex-shrink: 0;
}

.music-track-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The play/pause swap.
   `.hidden` matched NO rule in this stylesheet: the windows use it via
   `.app-window.hidden`, so putting a bare `hidden` on an inner element does
   nothing at all and BOTH glyphs rendered inside the button, stacked. Measured
   before fixing: play display block, pause display block. */
.music-btn svg.hidden {
  display: none;
}

/* Fixed size. A player has nothing that benefits from more room, and the
   corner grip invited a resize that only ever made it worse. */
.music-window {
  resize: none;
  min-width: 0;
  min-height: 0;
}

/* Docked bottom-right at a fixed size.
   `.window-compact` tells fitWindow to leave this one alone; without it every
   aux window is pinned to the viewport insets and the player opened at
   2153x1131 for 340px of controls. Bottom-right keeps it clear of the desktop
   icon column on the left, at every width. */
.music-window {
  top: auto;
  left: auto;
  right: 20px;
  bottom: calc(var(--taskbar-h) + 18px);
  width: min(340px, calc(100vw - 40px));
  height: auto;
  max-width: none;
  max-height: none;
}

/* Account: a status card, docked top-right.
   Compact for the same reason as the player, and top-right rather than
   bottom-right so they start apart. They CAN still overlap: measured at a
   1280x820 viewport the two cards want 729px of a 784px column and cross by
   51px. That is fine and deliberate rather than worked around, because they
   are windows on a desktop and windows overlap; both are draggable and both
   raise on pointerdown, verified by z-index.
   Height follows content, because the card is three rows signed in and one
   button signed out, and a fixed height would leave a void in the shorter. */
.account-window {
  top: 20px;
  right: 20px;
  left: auto;
  bottom: auto;
  width: min(340px, calc(100vw - 40px));
  height: auto;
  max-width: none;
  max-height: none;
  resize: none;
  display: flex;
  flex-direction: column;
}

.account-frame {
  display: block;
  width: 100%;
  height: 330px;
  max-height: calc(100vh - var(--taskbar-h) - 80px);
  border: 0;
  background: var(--bg-window);
}

/* ==========================================================================
   PHONE SHELL — last word
   Camp on a phone is not a miniature desktop. trollface.io is the reference:
   the canvas is the device, apps sit in a home grid, and tapping one opens a
   full-screen sheet with a close control. The left icon rail, window gutters,
   and min/max chrome are desktop-only.
   ========================================================================== */
@media (max-width: 600px) {
  html.mobile-shell,
  html.mobile-shell body {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }

  html.mobile-shell {
    --desktop-icon-rail: 0px;
    --phone-dock-icon: 60px;
    --taskbar-h: 100px;
    --mobile-header-h: 48px;
    --mobile-sheet-top: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px));
  }

  html.mobile-shell .terminal-container {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    grid-template-rows: 1fr;
    /* Header owns the notch. Extra padding here pushed sheets off-canvas. */
    padding-top: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  html.mobile-shell .mobile-site-header {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-sizing: border-box;
    height: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--chrome);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    pointer-events: auto;
    touch-action: manipulation;
  }

  html.mobile-shell .mobile-site-header-brand {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  html.mobile-shell .mobile-site-header-close {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--oat);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html.mobile-shell .mobile-site-header-close span {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 4px;
    background: var(--blaze-ink);
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
    pointer-events: none;
  }

  html.mobile-shell .mobile-site-header-close span::before,
  html.mobile-shell .mobile-site-header-close span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1.5px;
    margin: -0.75px 0 0 -5px;
    background: var(--oat);
    border-radius: 1px;
  }

  html.mobile-shell .mobile-site-header-close span::before {
    transform: rotate(45deg);
  }

  html.mobile-shell .mobile-site-header-close span::after {
    transform: rotate(-45deg);
  }

  html.mobile-shell .mobile-site-header-mark {
    display: block;
    width: 28px;
    height: 26px;
    flex-shrink: 0;
    background: var(--blaze);
    -webkit-mask: url("/logos/offgrid-mark.svg") center / contain no-repeat;
    mask: url("/logos/offgrid-mark.svg") center / contain no-repeat;
  }

  html.mobile-shell .mobile-site-header-name {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    color: var(--blaze);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html.mobile-shell .mobile-site-header-tools {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }

  html.mobile-shell .mobile-site-header-wifi,
  html.mobile-shell .mobile-site-header-theme {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--dim);
  }

  html.mobile-shell .mobile-site-header-theme {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  html.mobile-shell .mobile-site-header-theme .taskbar-theme-icon {
    width: 18px;
    height: 18px;
  }

  html.mobile-shell .mobile-site-header-wifi svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  /* Reachable: three solid arcs and no slash. */
  html.mobile-shell .mobile-site-header-wifi .wifi-slash {
    display: none;
  }

  /* Unreachable: the outer two arcs drop back AND the slash comes in, so the
     state survives being read by someone who cannot see the colour change. */
  html.mobile-shell .mobile-site-header-wifi.is-offline {
    color: var(--blaze-ink);
  }

  html.mobile-shell .mobile-site-header-wifi.is-offline .wifi-arc--far,
  html.mobile-shell .mobile-site-header-wifi.is-offline .wifi-arc--mid {
    opacity: 0.3;
  }

  html.mobile-shell .mobile-site-header-wifi.is-offline .wifi-slash {
    display: block;
  }

  html.mobile-shell .desktop-wallpaper {
    padding-left: 0;
    padding-top: var(--mobile-sheet-top);
    bottom: 0;
  }

  html.mobile-shell .desktop-wallpaper-art-img {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    /* Cropped viewBox centers the face; the bandana paints ~22% past the
       left edge. Keep the box small enough that the tail stays on-canvas. */
    max-width: min(58vw, 230px);
    max-height: min(40dvh, 280px);
    opacity: 0.5;
  }

  html.mobile-shell .desktop-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  html.mobile-shell .camp-launch.start-menu-cta {
    min-height: 44px;
    font-size: 0.88rem;
  }

  html.mobile-shell .start-menu {
    width: min(320px, calc(100vw - 16px));
  }

  html.mobile-shell .desktop-icons {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 4;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: calc(var(--mobile-sheet-top) + 8px) 8px calc(var(--taskbar-h) + 8px);
    gap: 4px 0;
    -webkit-overflow-scrolling: touch;
  }

  html.mobile-shell .desktop-icon-group {
    display: contents;
  }

  html.mobile-shell .desktop-icon {
    flex: 0 0 25%;
    width: 25%;
    max-width: 25%;
    min-width: 0;
    height: auto;
    min-height: 88px;
    padding: 6px 8px 4px 8px;
    gap: 6px;
    /* Tiles stay packed to the left of each 25% cell so columns share one
       edge, including the short last row. Labels are the same width as the
       56px tile so the name sits centred under the icon, not the cell. */
    align-items: flex-start;
  }

  html.mobile-shell .desktop-icon .desktop-icon-img,
  html.mobile-shell .desktop-icon .desktop-icon-img[class*="icon-"] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
  }

  html.mobile-shell .desktop-icon .desktop-icon-img svg,
  html.mobile-shell .desktop-icon .desktop-icon-img .app-glyph,
  html.mobile-shell .desktop-icon .desktop-icon-img img {
    width: 26px;
    height: 26px;
  }

  html.mobile-shell .desktop-icon-label {
    width: 56px;
    max-width: 56px;
    height: auto;
    font-size: 0.68rem;
    line-height: 1.2;
    min-height: 1.2em;
    max-height: 2.4em;
    color: var(--white);
    text-align: center;
    white-space: normal;
  }

  /* These three already live in the phone dock. Keep them off the home grid
     so the same app is not launched from two places on a small screen. */
  html.mobile-shell .desktop-icon[data-app="about"],
  html.mobile-shell .desktop-icon[data-app="desk"],
  html.mobile-shell .desktop-icon[data-app="x"] {
    display: none;
  }

  html.mobile-shell .app-window.hidden,
  html.mobile-shell .gallery-window.hidden,
  html.mobile-shell .media-window.hidden,
  html.mobile-shell .link-window.hidden,
  html.mobile-shell .desk-window.hidden,
  html.mobile-shell .doc-window.hidden,
  html.mobile-shell .about-window.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  html.mobile-shell .app-window:not(.window-compact):not(.hidden),
  html.mobile-shell .gallery-window:not(.hidden),
  html.mobile-shell .media-window:not(.hidden),
  html.mobile-shell .link-window:not(.hidden),
  html.mobile-shell .desk-window:not(.hidden),
  html.mobile-shell .doc-window:not(.hidden),
  html.mobile-shell .about-window:not(.hidden) {
    top: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    /* Desktop windows animate in with scale(0.92). That inset is the cut-off
       on a 390px phone: the sheet must sit flush under the site header. */
    transform: none !important;
    opacity: 1 !important;
    transition: none;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--ground) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    resize: none;
  }

  html.mobile-shell.os-app-open .desktop-icons {
    display: none;
  }

  /* Sheets live in .desktop-area. Keep them under the site header: an iframe
     inside a sheet will steal taps from in-window chrome on iOS, so CAMP and
     the close X live in this header instead of the window titlebar. */
  html.mobile-shell.os-app-open {
    --taskbar-h: 0px;
  }

  html.mobile-shell.os-app-open .taskbar-bottom {
    display: none;
  }

  html.mobile-shell.os-app-open .mobile-site-header-wifi,
  html.mobile-shell.os-app-open .mobile-site-header-theme {
    display: none;
  }

  html.mobile-shell .mobile-site-header-close[hidden] {
    display: none !important;
  }

  html.mobile-shell.os-app-open .mobile-site-header-close:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  html.mobile-shell.os-app-open .app-window:not(.window-compact):not(.hidden) .window-titlebar {
    display: none;
  }

  html.mobile-shell .window-titlebar .win-btn.minimize,
  html.mobile-shell .window-titlebar .win-btn.maximize {
    display: none;
  }

  html.mobile-shell .app-window::after,
  html.mobile-shell .app-window::before {
    display: none;
  }

  /* Home grid is the app switcher. Desk tabs overflow a 390px sheet. */
  html.mobile-shell .desk-tabs {
    display: none;
  }

  html.mobile-shell .window-titlebar {
    height: auto;
    min-height: 52px;
    padding: 4px 4px 4px 14px;
    background: var(--chrome);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    overflow: visible;
    position: relative;
    z-index: 20;
  }

  html.mobile-shell .window-titlebar:active {
    cursor: pointer;
  }

  html.mobile-shell .window-titlebar .window-controls {
    gap: 0;
    z-index: 21;
    pointer-events: auto;
    -webkit-app-region: no-drag;
    min-width: 52px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  html.mobile-shell .window-titlebar .win-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  html.mobile-shell .window-titlebar .win-btn::before {
    inset: 0;
  }

  html.mobile-shell .window-titlebar .win-btn.close {
    background: var(--blaze-ink);
    border-color: var(--blaze-ink);
    color: var(--oat);
  }

  html.mobile-shell .window-titlebar .win-btn.close:hover,
  html.mobile-shell .window-titlebar .win-btn.close:active {
    background: var(--blaze);
    border-color: var(--blaze);
    color: var(--oat);
    filter: none;
  }

  html.mobile-shell .mobile-pane-tab,
  html.mobile-shell .docs-nav-link,
  html.mobile-shell .about-window .docs-nav-link,
  html.mobile-shell .backrooms-filter,
  html.mobile-shell .gallery-filter {
    min-height: 44px;
  }

  html.mobile-shell .desk-frame-wrap,
  html.mobile-shell .desk-frame,
  html.mobile-shell .link-window-body,
  html.mobile-shell .link-window-frame,
  html.mobile-shell .window-content,
  html.mobile-shell .about-layout,
  html.mobile-shell .about-scroll {
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }

  html.mobile-shell .desk-frame-wrap,
  html.mobile-shell .desk-frame,
  html.mobile-shell .link-window-body,
  html.mobile-shell .link-window-frame {
    background: var(--ground);
  }

  html.mobile-shell .desk-frame-wrap,
  html.mobile-shell .window-content,
  html.mobile-shell .about-layout,
  html.mobile-shell .link-window-body {
    flex: 1 1 auto;
  }

  html.mobile-shell .desk-frame,
  html.mobile-shell .link-window-frame {
    flex: 1 1 auto;
    height: auto;
  }

  html.mobile-shell .about-window .about-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  html.mobile-shell .guide-nav-kicker {
    display: none;
  }

  html.mobile-shell .about-window .about-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  html.mobile-shell .about-window .guide-bento,
  html.mobile-shell .about-window .guide-bento--now,
  html.mobile-shell .about-window .guide-bento--rules,
  html.mobile-shell .about-window .guide-bento--rates,
  html.mobile-shell .about-window .guide-bento--camp,
  html.mobile-shell .about-window .guide-bento--legend {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    justify-items: stretch;
  }

  html.mobile-shell .about-window .guide-bento--now > [data-area],
  html.mobile-shell .about-window .guide-bento--rules > [data-area],
  html.mobile-shell .about-window .guide-bento--rates > [data-area],
  html.mobile-shell .about-window .guide-bento--camp > [data-area] {
    grid-area: auto;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  html.mobile-shell .about-window .about-scroll {
    padding: 16px 16px 32px;
    scrollbar-width: none;
  }

  html.mobile-shell .about-window .about-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  html.mobile-shell .about-window .guide-masthead {
    align-items: flex-start;
    justify-content: flex-start;
  }

  html.mobile-shell .about-window .guide-hero-copy,
  html.mobile-shell .about-window .guide-lead {
    max-width: none;
  }

  html.mobile-shell .gallery-toolbar {
    flex-wrap: wrap;
  }

  html.mobile-shell .camp-home {
    padding: 16px 14px 24px;
    gap: 16px;
  }

  html.mobile-shell .music-window,
  html.mobile-shell .account-window {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-window);
  }

  html.mobile-shell .music-window {
    top: auto !important;
    /* Same clearance as the start menu. `bottom: 10px` parked the player
       inside the dock: compact windows do not set `os-app-open`, so the
       dock stays up and painted at z-index 100 over the player. */
    bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    max-height: calc(100dvh - var(--mobile-sheet-top) - var(--taskbar-h) - env(safe-area-inset-bottom, 0px) - 16px) !important;
    overflow: hidden;
  }

  html.mobile-shell .music-window .music-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.mobile-shell .account-window {
    top: calc(var(--mobile-sheet-top) + 10px) !important;
    bottom: auto !important;
  }

  html.mobile-shell .account-frame {
    width: 100%;
    max-height: calc(100dvh - var(--taskbar-h) - 80px);
  }

  html.mobile-shell .taskbar-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: flex-end;
    height: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 22px env(safe-area-inset-bottom, 0px);
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    pointer-events: none;
    grid-row: 1;
  }

  html.mobile-shell .taskbar-start,
  html.mobile-shell .taskbar-items,
  html.mobile-shell .taskbar-tray {
    display: none;
  }

  /* iOS 26 liquid glass: a clear lens, not a frosted tray. Wallpaper
     has to read through it, and the rim catches light like a real edge. */
  html.mobile-shell .phone-dock {
    --dock-glass: rgba(255, 255, 255, 0.14);
    --dock-rim: rgba(255, 255, 255, 0.28);
    position: relative;
    isolation: isolate;
    display: flex;
    pointer-events: auto;
    align-items: center;
    justify-content: space-evenly;
    gap: 16px;
    width: 100%;
    max-width: 348px;
    margin: 0 auto 20px;
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    background: var(--dock-glass);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--dock-rim);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
  }

  html[data-theme="dark"].mobile-shell .phone-dock {
    --dock-glass: rgba(255, 255, 255, 0.1);
    --dock-rim: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  }

  html.mobile-shell .phone-dock-item {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  html.mobile-shell .phone-dock-icon {
    --icon-face: #ef3472;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--phone-dock-icon);
    height: var(--phone-dock-icon);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%),
      color-mix(in srgb, var(--icon-face) 88%, #ffffff);
    border: 0;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
    color: #fff;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.mobile-shell .phone-dock-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 36%);
    pointer-events: none;
  }

  html.mobile-shell .phone-dock-item[data-tone="featured"] .phone-dock-icon {
    --icon-face: #efc03c;
  }

  html.mobile-shell .phone-dock-item[data-tone="app"] .phone-dock-icon {
    --icon-face: #ef3472;
  }

  html.mobile-shell .phone-dock-item[data-tone="camp"] .phone-dock-icon {
    --icon-face: #ef3472;
  }

  html.mobile-shell .phone-dock-item[data-tone="plain"] .phone-dock-icon {
    --icon-face: #ffffff;
    color: #161214;
    box-shadow:
      0 6px 14px -6px rgba(0, 0, 0, 0.35),
      inset 0 0 0 1px rgba(22, 18, 20, 0.1);
  }

  html.mobile-shell .phone-dock-item[data-tone="plain"] .phone-dock-icon .app-glyph {
    filter: none;
  }

  html.mobile-shell .phone-dock-icon .app-glyph {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
    position: relative;
    z-index: 1;
  }

  html.mobile-shell .phone-dock-item:active .phone-dock-icon {
    transform: scale(0.9);
  }

  html.mobile-shell .phone-dock-item.is-open .phone-dock-icon {
    filter: brightness(1.06);
  }

  html.mobile-shell .start-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px) + 4px);
    width: min(340px, calc(100vw - 24px));
    margin: 0;
    border-radius: var(--radius);
    max-height: calc(100dvh - var(--taskbar-h) - env(safe-area-inset-bottom, 0px) - var(--mobile-sheet-top) - 12px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.mobile-shell .taskbar-tray-time {
    display: none;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  html.mobile-shell .phone-dock-icon,
  html.mobile-shell .phone-dock-item:active .phone-dock-icon {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   20. THE SURVEY LAYER

   The chosen wallpaper is a survey globe over a charted plane. Three of its
   ideas are chrome rather than scenery, and all three are free in CSS: the
   fresnel rim that gives the sphere volume, the station dot at every grid
   intersection that stopped the grid reading as a floor, and depth that
   works in BOTH themes rather than only the dark one.

   Measured before writing any of it, at 1440x900:
     window against the desktop it floats on   1.09 dark, 1.15 light
     the tile wash in light mode               1 of 255
   A UI boundary wants 3.0. The window was being held by its 1px border
   alone, which is why light mode read as a hole cut in the page.
   ========================================================================== */

/* The station lattice. One declaration; every surface that carries it is
   visibly the same drawing as the wallpaper behind the windows. */
:root {
  /* The wallpaper grid is turned 45 degrees so perspective reads as
     diamonds rather than a square mesh pointing at the viewer. Two
     staggered gradients are that same lattice, and unlike a rotation they
     tile without a transform or an extra element. */
  --survey-lattice:
    radial-gradient(circle at 0 0, var(--survey-dot) 1px, transparent 1.7px),
    radial-gradient(circle at 13px 13px, var(--survey-dot) 1px, transparent 1.7px);
  --survey-lattice-size: 26px 26px;
}

/* ---------- windows: volume, and an edge that exists in both themes ---------- */
.app-window,
.gallery-window,
.media-window,
.link-window,
.desk-window,
.doc-window,
.about-window {
  /* The rim is the fresnel. A hairline inset ring puts light all the way
     round the limb, and a brighter top edge says where it is lit from,
     which is what a fill alone cannot say. */
  border-color: var(--survey-border);
  box-shadow:
    var(--survey-edge),
    var(--shadow-window),
    inset 0 1px 0 var(--survey-rim),
    inset 0 0 0 1px var(--survey-rim-soft);
}

/* A hidden window is still composited. It gets no rim and, more to the
   point, no blur: see .app-window.hidden above, which is worth 10 fps to 58. */
.app-window.hidden {
  box-shadow: none;
}

/* ---------- chrome carries the lattice ---------- */
/* Small chrome only. The taskbar and the index rail are large fields, and
   a lattice across a large field stops being a detail and becomes noise;
   both had it on the first pass and both lost it by looking at them. */
.window-titlebar,
.desk-tabs {
  background-image: var(--survey-lattice);
  background-size: var(--survey-lattice-size);
  background-position: 0 0;
}

/* The titlebar is the lit edge of the window, so it also carries the rim. */
.window-titlebar {
  box-shadow: inset 0 -1px 0 var(--survey-rim-soft);
}

/* ---------- raised surfaces lift in BOTH themes ---------- */
.about-window {
  --guide-glass: var(--survey-lift);
}

.about-window .guide-tile {
  box-shadow:
    inset 0 1px 0 var(--survey-rim-soft),
    0 1px 0 var(--survey-contact),
    0 14px 28px -18px rgba(0, 0, 0, 0.45);
}

/* The hero tile is the one thing on the page that should read as a place
   rather than a card, so it is the one that carries the lattice. Everything
   else stays plain, or the lattice stops meaning anything. */
.about-window .guide-tile--hero {
  background-image: var(--survey-lattice), var(--survey-lift);
  background-size: var(--survey-lattice-size), var(--survey-lattice-size), auto;
}

/* ---------- the beacon ---------- */
/* One lit station off the wire. The mark is already a ring with a gap in it,
   and the wallpaper lights exactly one point; on the desk that beat belongs
   to whatever is live right now, and nothing else. */
.guide-pill .guide-pill-dot,
.desktop-ca-tag::before {
  box-shadow: 0 0 0 3px rgb(var(--blaze-rgb) / 0.16);
}

/* ---------- the survey wallpaper ---------- */
/* Sits above the flat ground and below everything else on the desktop. It
   is empty until the scene mounts, so a browser without WebGL simply keeps
   the mark and nothing about the desktop changes. */
.desktop-survey {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* The mark is the wallpaper until the scene takes over, at which point it
   would be a second subject competing with the globe. */
.desktop-wallpaper.has-survey .desktop-wallpaper-art-img {
  display: none;
}

/* And it is hidden from the FIRST PAINT when the scene is going to mount at
   all. Without this the mark, which is inline SVG, painted at 109ms and was
   hidden again at 219ms: 110ms of a 500px logo appearing and vanishing on
   every load. theme-boot.js sets this before anything paints; app.js takes it
   off again if the scene fails to build, and then the mark is the wallpaper. */
html.survey-pending .desktop-wallpaper-art-img {
  display: none;
}

/* ---------- labels over the wallpaper ---------- */
/* The wallpaper is a survey grid now rather than a flat field, so a label
   can have anything behind it. Measured glyph against its immediate ground
   across all thirteen: the worst is 7.11 in light and 12.06 in dark, so
   nothing is failing. The scrim is here because the wallpaper can change and
   a label should carry its own guarantee rather than depend on where the
   horizon happens to fall. On a flat part of the wallpaper it is invisible.

   Worth recording: the first measurement of this sampled a ring OUTSIDE each
   label box and reported "Field Guide" at 3.70, which read as a real
   regression. It was measuring the grid passing behind the gap between two
   labels, not anything a reader looks at. Field Guide is in fact the
   HIGHEST of the thirteen at 13.7. */
.desktop-icon-label,
.desktop-wallpaper-kicker,
.desktop-wallpaper-title,
.desktop-wallpaper-lead {
  text-shadow:
    0 0 3px var(--ground),
    0 0 7px var(--ground),
    0 1px 2px var(--ground);
}

/* ---------- the X surfaces, when there is no account ---------- */
/* app.js REMOVES these when no handle is configured, which is the right
   thing and is not fast enough on its own: the icon is in the markup, so it
   painted at 66ms and was removed at 179ms, and 113ms of an app that does
   not exist reads as a glitch. sync-camp stamps data-x on the served shell
   from the same environment variable that fills in the handle, so they
   cannot disagree. Hidden here, removed there. */
html[data-x="off"] [data-app="x"],
html[data-x="off"] [data-x-surface] {
  display: none;
}