/* ================================================================
   IN_PRAISE_OF_TIME — Visual System v2.0
   Win95 aesthetic × macOS Liquid logic × chapter-reactive color
   ================================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Desktop shell */
  --desk-bg:         #323232;
  --desk-bg-dark:    #202020;
  --desk-bg-light:   #4A4A4A;
  --desk-dot:        rgba(245,232,200,0.16);

  /* Window surfaces */
  --win-bg:          #F5E8C8;
  --win-border:      #21190E;

  /* Button 3-D bevel */
  --btn-face:        #E8D4AE;
  --btn-hi:          #FFF9DF;
  --btn-sh:          #7E6743;

  /* Text */
  --text:            #1A1208;
  --text-dim:        #5A5040;
  --text-inv:        #FFF3C8;

  /* Chapter palette – overridden per chapter by JS */
  --chapter-primary:   #FFE66D;
  --chapter-secondary: #1A1208;
  --ch01-primary:   #FF2D8D;
  --ch01-secondary: #FFE9B0;
  --ch01-alert:     #FF5B43;
  --ch02-primary:   #FFCF21;
  --ch02-secondary: #0a0a0a;
  --ch03-primary:   #45D7D0;
  --ch03-secondary: #323232;
  --ch04-primary:   #F39A13;
  --ch04-secondary: #1A1208;
  --ch04-sun:       #D4A800;
  --int-primary:    #4D4DFF;

  /* Typography */
  --mono:     "IBM Plex Mono", monospace;
  --ui-font:  var(--mono);

  /* Font scale — single source of truth */
  --fs-display:   clamp(36px, 7.5vw, 104px);
  --fs-hero:      clamp(20px, 3vw, 32px);
  --fs-heading:   18px;
  --fs-ui:        14px;
  --fs-body:      14px;
  --fs-small:     12px;
  --fs-narrative: 18px;
  --fs-beishang:  20px;

  /* Weight system — heavier = more System 7 / Win95 */
  --fw-ui:        600;
  --fw-label:     700;
  --fw-body:      400;

  /* Layout zones */
  --chrome-h:  46px;
  --nav-w:     188px;
  --dock-h:    96px;

  /* Legacy dither patterns — kept for JS compat */
  --dither-bg:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='white'/%3E%3Crect width='1' height='1' fill='%23000' opacity='0.08'/%3E%3C/svg%3E");
  --dither-50:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='white'/%3E%3Crect width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
  --dither-25:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='white'/%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
  --subdermal-opacity: 0.03;
}

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { cursor: default !important; }
textarea, input[type="text"], input[type="search"] { cursor: text !important; }
input[type="range"] { cursor: default !important; }

html {
  font-size: 14px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}

body {
  background-color: var(--desk-bg);
  background-image:
    linear-gradient(rgba(245,232,200,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,232,200,0.055) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, var(--desk-dot) 1px, transparent 1.4px);
  background-size: 32px 32px, 32px 32px, 8px 8px;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-body);
  overflow: hidden;
  scroll-behavior: auto;
  letter-spacing: 0;
  line-height: 1.45;
  padding-bottom: 0;
}

/* film grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

button, input, select, textarea, video { font: inherit; }

button {
  appearance: none;
  border: 1px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text);
  padding: 3px 10px;
  font-family: var(--ui-font);
  font-size: var(--fs-ui);
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
}

button:active {
  box-shadow: inset 1px 1px 0 var(--btn-sh), inset -1px -1px 0 var(--btn-hi);
}

/* ── SCROLLBARS (Win95 style) ──────────────────────────────────── */
::-webkit-scrollbar            { width: 14px; height: 14px; }
::-webkit-scrollbar-track      { background: var(--dither-25); background-size: 4px 4px; border-left: 1px solid var(--win-border); }
::-webkit-scrollbar-thumb      { background: var(--btn-face); border: 1px solid var(--win-border); box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi); }
::-webkit-scrollbar-button     { height: 14px; width: 14px; background: var(--btn-face); border: 1px solid var(--win-border); box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi); }

/* ── EFFECTS LAYERS ────────────────────────────────────────────── */
#signal-texture { display: none; }

#subdermal-text {
  position: fixed;
  inset: -12px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  color: var(--text);
  font-size: 9px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
}

body.show-subdermal-text #subdermal-text { opacity: var(--subdermal-opacity); }

#noise-frame,
#white-flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
}

#noise-frame.is-active {
  visibility: visible;
  background: #000;
  animation: cutHide 120ms steps(1) forwards;
}

#white-flash.is-active {
  visibility: visible;
  background: var(--win-bg);
  animation: cutHide 80ms steps(1) forwards;
}

@keyframes cutHide { 100% { visibility: hidden; } }

/* ── BOOT / SHUTDOWN SCREENS ───────────────────────────────────── */
.boot-screen,
.shutdown-screen {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: none;
  align-items: center;
  justify-items: start;
  padding-left: clamp(40px, 18vw, 260px);
  background: #0A120E;
  color: #7ABCA0;
  font: var(--fs-ui) / 1.6 var(--mono);
  pointer-events: none;
}

.boot-screen.is-active { display: grid; }

.boot-screen pre {
  margin: 0;
  max-height: 78vh;
  overflow: hidden;
  white-space: pre-wrap;
}

.shutdown-screen {
  z-index: 170;
  justify-items: center;
  align-content: center;
  padding: 0;
  text-align: center;
}

.shutdown-screen.is-active { display: grid; }

.shutdown-screen > div {
  min-height: 1.6em;
  white-space: pre;
}

.shutdown-screen > div:nth-child(1) { font-size: var(--fs-heading); }
.shutdown-screen > div:nth-child(2),
.shutdown-screen > div:nth-child(3) { font-size: var(--fs-small); }

/* ── SYSTEM CHROME (top bar) ───────────────────────────────────── */
#system-chrome {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  font-family: var(--ui-font);
  font-size: var(--fs-small);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-inv);
}

#system-chrome::before { display: none; }

#system-chrome::after { display: none; }

.chrome-line { z-index: 61; }

.mac-menubar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 61;
  height: var(--chrome-h);
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(240px, max-content) minmax(230px, 0.8fr);
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 44%),
    #1E1E1E;
  border-top: 2px solid rgba(255,238,176,0.20);
  border-bottom: 3px solid var(--win-border);
  pointer-events: auto;
  box-shadow: 0 2px 0 rgba(0,0,0,0.32);
}

.mac-menu-left,
.mac-menu-right {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.mac-menu-left { justify-self: start; }
.mac-menu-right { justify-self: end; justify-content: flex-end; }

.mac-menu-items,
.mac-status-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,243,200,0.78);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: none;
}

.mac-status-icons {
  gap: 10px;
  font-size: 16px;
  color: rgba(255,243,200,0.70);
}

.chrome-top-left {
  position: static;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-inv);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.chrome-top-right {
  position: static;
  min-width: 0;
  padding-left: 14px;
  justify-self: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  color: var(--chapter-primary);
  letter-spacing: 0.08em;
  transition: color 0.4s ease;
}

#chapter-label { color: var(--chapter-primary); }

/* Clock — center of top bar */
.chrome-bottom-left {
  display: block;
  position: static;
  transform: none;
  font-size: 15px;
  color: rgba(255,243,200,0.70);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Coordinates — left of chapter label */
.chrome-bottom-right {
  display: block;
  position: static;
  min-width: 155px;
  font-size: 15px;
  color: rgba(255,243,200,0.62);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: right;
}

/* ── CHAPTER NAV (left sidebar) ────────────────────────────────── */
.chapter-nav {
  position: fixed;
  top: var(--chrome-h);
  left: 0;
  width: var(--nav-w);
  height: calc(100vh - var(--chrome-h));
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 calc(var(--dock-h) + 2px);
  border-right: 2px solid var(--win-border);
  border-bottom: 0;
  background:
    linear-gradient(rgba(245,232,200,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,232,200,0.055) 1px, transparent 1px),
    var(--desk-bg-dark);
  background-size: 24px 24px, 24px 24px, auto;
  pointer-events: auto;
  overflow: hidden;
}

.chapter-nav button {
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  border: 0;
  box-shadow: none;
  padding: 18px 20px;
  background: transparent;
  color: rgba(255,243,200,0.72);
  letter-spacing: 0.07em;
  transition: background 0.15s ease, color 0.15s ease;
  border-left: 3px solid transparent;
}

.chapter-nav button:hover {
  background: rgba(245,232,200,0.08);
  color: var(--text-inv);
}

.chapter-nav button.is-active {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  text-shadow: none;
  border-left: 3px solid var(--chapter-primary);
  font-weight: 700;
  box-shadow: inset 0 -1px 0 var(--win-border), inset 0 1px 0 rgba(255,255,255,0.20);
}

.nav-separator {
  color: rgba(240, 232, 212, 0.15);
  font-family: var(--mono);
  font-size: 10px;
  padding: 10px 14px;
  letter-spacing: -1px;
  user-select: none;
}

.nav-monitor-btn {
  margin-top: auto;
  display: block;
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  color: rgba(240, 232, 212, 0.40);
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: left;
}

.nav-monitor-btn.active {
  color: var(--chapter-primary);
}

.system-readout {
  display: none;
}

#os-launchers { display: none; }

/* ── MAIN APP CONTAINER ────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 10;
  min-height: 100vh;
}

.chapter {
  min-height: 100vh;
  display: none;
}

.chapter.is-active { display: block; }

/* ── CHAPTER 00 — LOCATING ─────────────────────────────────────── */
.chapter-00 {
  position: fixed;
  top: var(--chrome-h);
  left: var(--nav-w);
  right: 0;
  bottom: var(--dock-h);
  z-index: 20;
  background: var(--desk-bg);
  background-image:
    linear-gradient(rgba(245,232,200,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,232,200,0.055) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, var(--desk-dot) 1px, transparent 1.4px);
  background-size: 32px 32px, 32px 32px, 8px 8px;
}

.locating-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 8vw 6vw;
  gap: 4vw;
}

.scan-column {
  min-height: 30vh;
  display: grid;
  align-content: center;
  gap: 18px;
  color: var(--text-inv);
}

.scan-label {
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  color: rgba(240, 232, 212, 0.50);
}

.scan-label::before { content: "| "; }
.scan-label::after  { content: " |"; }

.scan-value {
  font-size: var(--fs-display);
  letter-spacing: -0.02em;
  color: var(--chapter-primary);
  line-height: 0.88;
  font-weight: 400;
  transition: color 0.4s ease;
}

.chapter-00 .locating-grid {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.chapter-00.is-coordinate-active .locating-grid {
  opacity: 1;
}

.chapter-00.is-scanning .scan-value {
  animation: ch00-coordinate-flicker 1.45s steps(2, end) infinite;
}

@keyframes ch00-coordinate-flicker {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 0 transparent;
  }
  50% {
    opacity: 0.72;
    text-shadow: 1px 0 0 rgba(255,230,109,0.10), -1px 0 0 rgba(255,45,141,0.08);
  }
}

.ios-scroll {
  position: absolute;
  left: 50%;
  bottom: 22vh;
  width: min(640px, 80vw);
  transform: translateX(-50%);
  overflow: hidden;
  white-space: nowrap;
  color: rgba(240, 232, 212, 0.35);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
}

.ios-scroll::before { content: "| "; }
.ios-scroll::after  { content: " |"; }

.ch00-boot-log {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 22;
  width: min(460px, 42vw);
  max-height: 62vh;
  margin: 0;
  overflow: hidden;
  white-space: pre;
  color: rgba(240, 232, 212, 0.45);
  background: transparent;
  font: var(--fs-small) / 1.55 var(--mono);
  pointer-events: none;
}

.ch00-monologue {
  position: absolute;
  left: calc(var(--nav-w) + 4vw);
  top: 12vh;
  z-index: 24;
  width: min(720px, 66vw);
  min-height: 1.4em;
  color: rgba(240, 232, 212, 0.46);
  font: clamp(20px, 2.4vw, 36px) / 1.4 var(--mono);
  letter-spacing: 0.02em;
  white-space: pre-wrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s linear, transform 0.45s linear;
}

.ch00-monologue.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ch00-location-panel {
  position: absolute;
  right: 5vw;
  top: 23vh;
  z-index: 23;
  width: min(340px, 30vw);
  color: rgba(240, 232, 212, 0.42);
  font: var(--fs-small) / 1.65 var(--mono);
  white-space: pre-wrap;
  pointer-events: none;
}

.ch00-location-panel.is-active::before {
  content: "LOCATION CACHE";
  display: block;
  margin-bottom: 10px;
  color: rgba(255,230,109,0.62);
  letter-spacing: 0.12em;
}

.ch00-center-viz {
  position: absolute;
  left: 43%;
  top: 41%;
  z-index: 22;
  width: min(390px, 28vw);
  height: 240px;
  color: rgba(240,232,212,0.42);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.98);
  transition: opacity 0.55s linear, transform 0.55s linear;
}

.chapter-00.is-center-viz-active .ch00-center-viz {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ch00-viz-title {
  margin-bottom: 12px;
  color: rgba(255,230,109,0.58);
  font: 700 var(--fs-small) / 1.2 var(--mono);
  letter-spacing: 0.18em;
}

.ch00-viz-bars,
.ch00-viz-pie,
.ch00-viz-knot {
  display: none;
}

.ch00-center-viz[data-mode="bars"] .ch00-viz-bars,
.ch00-center-viz[data-mode="pie"] .ch00-viz-pie,
.ch00-center-viz[data-mode="knot"] .ch00-viz-knot {
  display: block;
}

.ch00-viz-bars {
  height: 168px;
  align-items: end;
  gap: 11px;
  padding: 14px 12px 0;
  border-left: 1px solid rgba(240,232,212,0.18);
  border-bottom: 1px solid rgba(240,232,212,0.22);
  background:
    linear-gradient(rgba(240,232,212,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,232,212,0.055) 1px, transparent 1px);
  background-size: 100% 32px, 32px 100%;
}

.ch00-center-viz[data-mode="bars"] .ch00-viz-bars {
  display: flex;
}

.ch00-viz-bars span {
  flex: 1;
  height: var(--h);
  min-height: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(10,10,10,0.22) 0 5px, transparent 5px 9px),
    rgba(255,230,109,0.44);
  transform-origin: bottom;
  animation: ch00-bar-pulse 2.6s steps(5, end) infinite;
}

.ch00-viz-bars span:nth-child(2n) { background-color: rgba(240,232,212,0.32); animation-delay: 0.25s; }
.ch00-viz-bars span:nth-child(3n) { background-color: rgba(255,45,141,0.22); animation-delay: 0.5s; }

@keyframes ch00-bar-pulse {
  0%, 100% { transform: scaleY(0.84); opacity: 0.46; }
  45% { transform: scaleY(1); opacity: 0.78; }
}

.ch00-viz-pie {
  position: relative;
  width: 178px;
  height: 178px;
  margin: 12px auto 0;
  border-radius: 50%;
  background: conic-gradient(
    rgba(255,230,109,0.60) var(--pie-a, 0deg),
    rgba(240,232,212,0.28) var(--pie-a, 0deg) var(--pie-b, 180deg),
    rgba(255,45,141,0.24) var(--pie-b, 180deg) 276deg,
    rgba(240,232,212,0.12) 276deg 360deg
  );
  box-shadow: inset 0 0 0 1px rgba(240,232,212,0.18);
  animation: ch00-pie-turn 5.4s linear infinite;
}

.ch00-viz-pie::before {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background: var(--desk-bg);
  box-shadow: inset 0 0 0 1px rgba(240,232,212,0.20);
}

.ch00-viz-pie span {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 1px;
  height: 198px;
  background: rgba(240,232,212,0.24);
  transform-origin: 50% 50%;
  animation: ch00-pie-hand 3.1s steps(10, end) infinite;
}

@keyframes ch00-pie-turn {
  to { transform: rotate(360deg); }
}

@keyframes ch00-pie-hand {
  to { transform: rotate(-360deg); }
}

.ch00-viz-knot {
  width: 100%;
  height: 190px;
  margin-top: 4px;
  overflow: visible;
}

.ch00-viz-knot path {
  fill: none;
  stroke-width: 1.6;
  stroke: rgba(255,230,109,0.42);
  stroke-dasharray: 220 80;
  animation: ch00-knot-flow 4.4s linear infinite;
}

.ch00-viz-knot path:nth-child(2) {
  stroke: rgba(240,232,212,0.30);
  animation-delay: 0.4s;
}

.ch00-viz-knot path:nth-child(3) {
  stroke: rgba(255,45,141,0.22);
  animation-delay: 0.8s;
}

.ch00-viz-knot path:nth-child(4) {
  stroke: rgba(240,232,212,0.18);
  animation-delay: 1.2s;
}

@keyframes ch00-knot-flow {
  to { stroke-dashoffset: -300; }
}

.ch00-instrument-panel {
  position: absolute;
  right: 5vw;
  bottom: 12vh;
  z-index: 23;
  width: min(420px, 34vw);
  min-height: 210px;
  color: rgba(240, 232, 212, 0.42);
  font: var(--fs-small) / 1.4 var(--mono);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.chapter-00.is-instrument-active .ch00-instrument-panel {
  opacity: 1;
  transform: translateY(0);
}

.ch00-load-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  color: rgba(255,230,109,0.62);
  letter-spacing: 0.12em;
}

.ch00-load-track {
  height: 10px;
  border: 1px solid rgba(240,232,212,0.32);
  background:
    repeating-linear-gradient(90deg, rgba(240,232,212,0.12) 0 2px, transparent 2px 8px),
    rgba(10,10,10,0.18);
  overflow: hidden;
}

.ch00-load-track > div {
  width: 0%;
  height: 100%;
  background: var(--chapter-primary);
  opacity: 0.62;
  transition: width 0.18s linear;
}

.ch00-axis {
  --axis-shift: 0px;
  display: flex;
  gap: 18px;
  margin: 16px 0 10px;
  padding-bottom: 9px;
  overflow: hidden;
  border-bottom: 1px solid rgba(240,232,212,0.20);
  white-space: nowrap;
}

.ch00-axis span {
  flex: 0 0 auto;
  transform: translateX(var(--axis-shift));
  transition: transform 0.22s steps(2, end);
}

.ch00-axis span::before {
  content: "|";
  margin-right: 7px;
  color: rgba(255,230,109,0.42);
}

.ch00-chart {
  width: 100%;
  height: 92px;
  margin-top: 6px;
  background:
    linear-gradient(rgba(240,232,212,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,232,212,0.08) 1px, transparent 1px);
  background-size: 32px 24px;
}

.ch00-chart-line {
  fill: none;
  stroke: rgba(255,230,109,0.52);
  stroke-width: 2;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: ch00-draw-line 5.6s linear infinite;
}

.ch00-chart-line.line-b {
  stroke: rgba(240,232,212,0.34);
  animation-delay: 0.8s;
}

.ch00-chart-line.line-c {
  stroke: rgba(255,45,141,0.26);
  animation-delay: 1.6s;
}

@keyframes ch00-draw-line {
  0% { stroke-dashoffset: 420; opacity: 0.08; }
  16% { opacity: 0.65; }
  70% { stroke-dashoffset: 0; opacity: 0.58; }
  100% { stroke-dashoffset: -120; opacity: 0.12; }
}

.ch00-clock {
  position: absolute;
  right: 2px;
  bottom: -4px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(240,232,212,0.36);
  border-radius: 50%;
  opacity: 0.72;
}

.ch00-clock::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dotted rgba(240,232,212,0.18);
  border-radius: 50%;
}

.ch00-clock span,
.ch00-clock i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  transform-origin: 50% 100%;
  background: rgba(255,230,109,0.70);
}

.ch00-clock span:first-child {
  height: 19px;
  margin-top: -19px;
  animation: ch00-clock-spin 7s linear infinite;
}

.ch00-clock span:nth-child(2) {
  height: 14px;
  margin-top: -14px;
  animation: ch00-clock-spin 18s linear infinite;
}

.ch00-clock i {
  height: 22px;
  margin-top: -22px;
  background: rgba(240,232,212,0.36);
  animation: ch00-clock-spin 2.4s steps(12, end) infinite;
}

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

.ch00-term {
  margin-top: 10px;
  width: calc(100% - 70px);
  color: rgba(240,232,212,0.54);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.ch00-shadow-note {
  position: absolute;
  left: calc(var(--nav-w) + 4vw);
  top: 66vh;
  z-index: 20;
  width: min(520px, 48vw);
  color: rgba(240, 232, 212, 0.38);
  font: var(--fs-ui) / 1.75 var(--mono);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.ch00-shadow-note i {
  color: rgba(240, 232, 212, 0.62);
  font-style: normal;
}

.signal-acquired {
  position: absolute;
  left: 50%;
  bottom: 14vh;
  transform: translateX(-50%);
  color: var(--chapter-primary);
  display: none;
  letter-spacing: 0.12em;
  font-size: var(--fs-small);
}

.signal-acquired.is-active { display: block; }

/* ── CHAPTER STAGE (ch01–ch04) ─────────────────────────────────── */
.chapter-stage {
  position: fixed;
  top: var(--chrome-h);
  left: var(--nav-w);
  right: 0;
  bottom: var(--dock-h);
  min-height: calc(100vh - var(--chrome-h) - var(--dock-h));
  z-index: 15;
  background: var(--desk-bg);
  background-image:
    linear-gradient(rgba(245,232,200,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,232,200,0.055) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, var(--desk-dot) 1px, transparent 1.4px);
  background-size: 32px 32px, 32px 32px, 8px 8px;
}

.chapter-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.video-layer { pointer-events: none; }

.chapter-media-archive { display: none; }

/* ── CRT VIDEO PLAYER ──────────────────────────────────────────── */
.crt-shell {
  position: fixed;
  left: calc(var(--nav-w) + (100vw - var(--nav-w)) / 2);
  top: calc(var(--chrome-h) + (100vh - var(--chrome-h) - var(--dock-h)) / 2);
  width: clamp(280px, 36vw, 480px);
  color: var(--text);
  pointer-events: auto;
  transform: translate(-50%, -50%);
  outline: 0;
}

.ascii-top,
.ascii-bottom { display: none; }

.crt-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0A0A0A;
  border: 2px solid var(--win-border);
  border-bottom: 1px solid var(--win-border);
  overflow: hidden;
  box-shadow: 3px 3px 0 rgba(10,10,10,0.5);
}

.crt-frame.is-holding video { visibility: hidden; }

.crt-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chapter-photo {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0A0A0A;
  opacity: 1;
  transition: opacity 220ms linear;
  will-change: opacity;
}

.crt-frame.is-photo {
  aspect-ratio: auto;
}

.crt-frame.is-photo video {
  display: none;
}

.crt-frame.is-photo .chapter-photo {
  display: block;
}

.crt-frame.is-photo-loading .chapter-photo {
  opacity: 0.76;
}

/* Scanlines */
.crt-frame::after,
.desktop-crt::after,
.interrupt-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    transparent 0px,
    transparent 1px,
    rgba(0,0,0,0.04) 1px,
    rgba(0,0,0,0.04) 2px
  );
}

.video-control-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  min-height: 30px;
  padding: 2px 6px;
  border: 2px solid var(--win-border);
  border-top: 0;
  background: var(--btn-face);
  color: var(--text);
  font-size: var(--fs-small);
  box-shadow: 3px 3px 0 rgba(10,10,10,0.5);
}

.video-control-bar button {
  width: 30px;
  height: 24px;
  text-align: center;
  padding: 0;
  font-size: 12px;
}

#video-time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted-indicator {
  position: absolute;
  left: 0;
  bottom: -22px;
  color: rgba(240, 232, 212, 0.55);
  background: transparent;
  font: var(--fs-small) / 1 var(--ui-font);
  letter-spacing: 0.04em;
}

body.is-unmuted .muted-indicator { display: none; }

/* ── DATA PANEL (SIGNAL MONITOR) ───────────────────────────────── */
.data-panel {
  position: fixed;
  z-index: 35;
  right: 20px;
  top: calc(var(--chrome-h) + 40px);
  background: var(--win-bg);
  color: var(--text);
  border: 1px solid var(--win-border);
  box-shadow: 2px 2px 0 rgba(10,10,10,0.35);
  padding: 10px 12px;
  font-size: var(--fs-small);
  line-height: 1.5;
  pointer-events: none;
  min-width: 200px;
}

.data-panel pre { margin: 0; font-size: var(--fs-small); }

/* Per-chapter data panel positions */
.chapter-stage[data-mode="ch01"] .data-panel {
  right: 24px;
  top: calc(var(--chrome-h) + 60px);
  transform: none;
}

.chapter-stage[data-mode="ch02"] .data-panel {
  right: 24px;
  top: calc(50vh - 80px);
  transform: none;
}

.chapter-stage[data-mode="ch03"] .data-panel {
  left: calc(var(--nav-w) + 24px);
  right: auto;
  top: auto;
  bottom: calc(var(--dock-h) + 24px);
  width: 260px;
  transform: none;
}

.chapter-stage[data-mode="ch04"] .data-panel,
.chapter-stage[data-mode="ch05"] .data-panel {
  right: 24px;
  top: calc(var(--chrome-h) + 60px);
  transform: none;
}

/* ── NARRATIVE LAYER ───────────────────────────────────────────── */
.narrative-layer {
  position: fixed;
  top: var(--chrome-h);
  left: var(--nav-w);
  right: 0;
  bottom: var(--dock-h);
  z-index: 30;
  pointer-events: none;
}

.text-slot {
  position: absolute;
  display: none;
  max-width: min(400px, 36vw);
  min-height: 1em;
  font-size: var(--fs-narrative);
  line-height: 1.65;
  color: var(--chapter-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.text-slot.is-visible,
.boxed-text.is-visible,
.monologue-text.is-visible {
  display: block;
  opacity: 1;
  transition: opacity 0.8s linear;
}

.text-slot.is-entering,
.boxed-text.is-entering,
.monologue-text.is-entering { opacity: 0; }

.text-slot.is-fading,
.boxed-text.is-fading,
.monologue-text.is-fading {
  opacity: 0;
  transition: opacity 0.8s linear;
}

.text-slot-top    { top: 10vh;  left: 24vw; }
.text-slot-left   { top: 32vh;  left: 14px; writing-mode: vertical-rl; max-height: 44vh; }
.text-slot-bottom { bottom: 8vh; left: 30vw; }

.chapter-stage[data-mode="ch01"] .text-slot {
  font-size: 18px;
  line-height: 1.45;
}

.boxed-text {
  display: none;
  position: absolute;
  color: var(--chapter-primary);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  width: min(320px, 36vw);
  min-height: 0;
  font-size: var(--fs-narrative);
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.box-label {
  display: none; /* hidden — text floats free, no container labels */
}

.chapter-stage[data-mode="ch04"] .ch03-box.is-visible { display: block; }

.ch03-box-a { left: 26vw; top: 60vh; }
.ch03-box-b { left: 26vw; top: 32vh; }
.ch03-box-c { left: 26vw; top: 14vh; }

.chapter-stage[data-mode="ch05"] .ch04-box.is-visible,
.chapter-stage[data-mode="ch06"] .ch04-box.is-visible {
  display: block;
  right: 7vw;
  bottom: 16vh;
}

.chapter-stage[data-mode="ch05"] .ch04-box,
.chapter-stage[data-mode="ch06"] .ch04-box {
  font-size: 18px;
  line-height: 1.45;
}

.monologue-text {
  position: absolute;
  display: none;
  width: min(360px, 30vw);
  min-height: 1em;
  color: color-mix(in srgb, var(--chapter-primary) 72%, var(--text-inv) 28%);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  opacity: 0.72;
  filter: saturate(0.86);
}

.chapter-stage[data-mode="ch01"] .monologue-text,
.chapter-stage[data-mode="ch05"] .monologue-text {
  font-size: 14px;
  line-height: 1.5;
}

/* ── P5 LAYER ──────────────────────────────────────────────────── */
.p5-layer {
  position: fixed;
  top: var(--chrome-h);
  left: var(--nav-w);
  right: 0;
  bottom: var(--dock-h);
  z-index: 28;
  pointer-events: none;
  display: none;
}

.chapter-stage[data-mode="ch02"] .p5-layer { display: block; }

#gps-lost-line {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--chapter-primary);
  white-space: pre;
  font-size: var(--fs-narrative);
}

#gps-lost-line.is-active { display: block; }

/* ── CH02 GPS LOST TEXT ────────────────────────────────────────── */
.gps-lost-beishang {
  position: fixed;
  top: var(--chrome-h);
  left: var(--nav-w);
  right: 0;
  bottom: var(--dock-h);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 31;
  color: var(--chapter-primary);
  font-size: var(--fs-beishang);
  line-height: 1.7;
}

.gps-lost-one,
.gps-lost-two {
  position: absolute;
  display: none;
}

.gps-lost-beishang.show-one .gps-lost-one,
.gps-lost-beishang.show-two .gps-lost-two { display: block; }

/* ── CH03 GRID OVERLAY ─────────────────────────────────────────── */
.chapter-03-grid,
#brisbane-sun { display: none; }

.chapter-stage[data-mode="ch05"] #brisbane-sun {
  display: none;
  position: fixed;
  top: calc(var(--chrome-h) - 60px);
  right: -80px;
  z-index: 16;
  width: 360px;
  height: 360px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212,168,0,0.06) 0, rgba(212,168,0,0.06) 42%, transparent 70%);
}

.chapter-stage[data-mode="after"] .video-layer,
.chapter-stage[data-mode="after"] .data-panel,
.chapter-stage[data-mode="after"] .narrative-layer,
.chapter-stage[data-mode="after"] .p5-layer,
.chapter-stage[data-mode="after"] .chapter-03-grid,
.chapter-stage[data-mode="after"] .altitude-route,
.chapter-stage[data-mode="after"] .altitude-scale,
.chapter-stage[data-mode="after"] #brisbane-sun,
.chapter-stage[data-mode="after"] .beishang-fragment {
  display: none;
}

.chapter-after-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 35;
  padding: clamp(36px, 7vw, 84px);
  color: var(--text);
}

.chapter-stage[data-mode="after"] .chapter-after-page {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(220px, 360px);
  gap: clamp(28px, 5vw, 72px);
  align-content: center;
  justify-content: center;
}

.after-file {
  border: 2px solid var(--win-border);
  background: #FFF4D7;
  color: #1A1208;
  box-shadow: 4px 4px 0 rgba(10,10,10,0.35);
}

.after-file-title {
  padding: 9px 12px;
  border-bottom: 2px solid var(--win-border);
  background: var(--btn-face);
  font-weight: 700;
}

.after-file pre {
  min-height: 260px;
  margin: 0;
  padding: 20px;
  white-space: pre-wrap;
  font: 15px / 1.9 var(--mono);
}

.after-about {
  align-self: center;
  max-width: 360px;
  color: var(--chapter-primary);
  font: 18px / 1.4 var(--mono);
}

.after-about div {
  color: var(--chapter-primary);
  font-size: 18px;
  font-weight: 700;
}

.chapter-stage[data-mode="ch04"] .chapter-03-grid {
  display: block;
  position: fixed;
  top: var(--chrome-h);
  left: var(--nav-w);
  right: 0;
  bottom: var(--dock-h);
  z-index: 14;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(126,206,202,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,206,202,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── ALTITUDE ROUTE (ch04) ─────────────────────────────────────── */
.altitude-route {
  display: none;
  position: fixed;
  z-index: 34;
  left: calc(var(--nav-w) + 18px);
  right: auto;
  top: calc(var(--chrome-h) + 18px);
  bottom: auto;
  width: min(42vw, 560px);
  max-width: 560px;
  height: calc(100vh - var(--chrome-h) - var(--dock-h) - 42px);
  overflow: visible;
}

.chapter-stage[data-mode="ch04"] .altitude-route { display: block; }

.altitude-scale {
  display: none;
  position: fixed;
  z-index: 34;
  left: calc(var(--nav-w) + 12px);
  top: calc(var(--chrome-h) + 18px);
  height: calc(100vh - var(--chrome-h) - var(--dock-h) - 36px);
  color: rgba(240, 232, 212, 0.5);
  font-size: var(--fs-small);
}

.chapter-stage[data-mode="ch04"] .altitude-scale {
  display: none;
  align-content: space-between;
}

.route-line { fill: none; stroke: rgba(69,215,208,0.92); stroke-width: 2.2; }
.route-line-tai { fill: none; stroke: rgba(69,215,208,0.62); stroke-width: 1.7; stroke-dasharray: 4 4; }
.route-dot  { fill: var(--desk-bg); stroke: rgba(69,215,208,0.95); stroke-width: 1.9; }
.route-dot-tai { stroke: rgba(69,215,208,0.66); }
.route-dot.is-current { fill: var(--ch03-primary); stroke: var(--ch03-primary); }
.route-label          { fill: rgba(240,232,212,0.65); font: var(--fs-small) var(--mono); text-anchor: middle; }
.route-label-current  { fill: var(--ch03-primary); font-weight: 700; }
.route-axis-label     { fill: rgba(240,232,212,0.50); font: var(--fs-small) var(--mono); }
.route-title          { fill: rgba(126,206,202,0.55); font: 600 var(--fs-small) var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.route-place-label    { fill: rgba(240,232,212,0.48); font: 10px var(--mono); letter-spacing: 0.04em; }
.route-grid-line      { stroke: rgba(69,215,208,0.22); stroke-width: 1; stroke-dasharray: 3 4; }
.route-axis-line      { stroke: rgba(69,215,208,0.60); stroke-width: 1; }
.route-area           { display: none; } /* shadow removed per design */

/* ── BEISHANG FRAGMENTS ────────────────────────────────────────── */
.beishang-fragment {
  position: fixed;
  z-index: 24;
  pointer-events: none;
  color: var(--chapter-primary);
  font-size: var(--fs-beishang);
  line-height: 1.65;
  display: none;
}

.fragment-ch00 {
  display: block;
  z-index: 19;
  left: calc(var(--nav-w) + 4vw);
  top: 38vh;
  width: min(480px, 44vw);
  color: rgba(240, 232, 212, 0.30);
  font-size: var(--fs-body);
}

.chapter-stage[data-mode="ch01"] .fragment-ch01 {
  display: none;
  left: calc(var(--nav-w) + 36px);
  right: auto;
  bottom: calc(var(--dock-h) + 24px);
  width: min(320px, 24vw);
}
.chapter-stage[data-mode="ch02"] .fragment-ch02 { display: none; }
.chapter-stage[data-mode="ch04"] .fragment-ch03-right { display: none; }
.chapter-stage[data-mode="ch04"] .fragment-ch03-left  { display: none; }
.chapter-stage[data-mode="ch05"] .fragment-ch04 { display: none; }

.chapter-stage[data-mode="ch02"] .fragment-ch02 {
  left: 50%;
  top: 60%;
  width: min(560px, 70vw);
  transform: translateX(-50%);
  z-index: 25;
  text-align: left;
  font-size: var(--fs-beishang);
}

.chapter-stage[data-mode="ch05"] .fragment-ch04 {
  left: calc(var(--nav-w) + 48px);
  bottom: calc(var(--dock-h) + 44px);
  width: min(420px, calc(38vw - var(--nav-w) * 0.12));
  transform: none;
  font-size: var(--fs-beishang);
  text-align: left;
}

/* ── INTERRUPT STAGE ───────────────────────────────────────────── */
.interrupt-stage {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(26,18,8,0.88);
  place-items: center;
  backdrop-filter: blur(4px);
}

.interrupt-stage.is-active { display: grid; }

.interrupt-window {
  width: 540px;
  max-width: calc(100vw - 40px);
  border: 2px solid var(--win-border);
  background: var(--win-bg);
  box-shadow: 4px 4px 0 rgba(10,10,10,0.5);
}

.interrupt-titlebar {
  display: grid;
  grid-template-columns: 1fr 26px;
  align-items: center;
  height: 28px;
  border-bottom: 1px solid var(--win-border);
  background: var(--int-primary);
  color: #FFFFFF;
  font-size: var(--fs-ui);
  font-family: var(--ui-font);
  letter-spacing: 0.04em;
  padding: 0 6px;
}

.interrupt-titlebar button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);
  color: #FFFFFF;
  box-shadow: none;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.interrupt-titlebar button:hover { background: rgba(255,255,255,0.3); }

.interrupt-video-wrap {
  position: relative;
  background: #000;
}

.interrupt-stage video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.interrupt-panel {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 78;
  margin: 0;
  color: var(--text-inv);
  background: rgba(26,18,8,0.75);
  border: 1px solid rgba(240,232,212,0.25);
  padding: 10px 12px;
  font-size: var(--fs-small);
  line-height: 1.55;
  backdrop-filter: blur(4px);
}

.interrupt-beishang-text {
  position: absolute;
  z-index: 78;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(480px, 78vw);
  color: var(--text-inv);
  font-size: var(--fs-narrative);
  line-height: 1.7;
  text-align: left;
  white-space: pre-wrap;
}

.interrupt-coordinates { display: none; }

/* ── VISIBILITY OVERRIDES (interrupt / settings) ──────────────── */
body.is-interrupt .chrome-top-left,
body.is-interrupt .chrome-top-right,
body.is-interrupt .chrome-bottom-left,
body.is-interrupt .chrome-bottom-right,
body.is-interrupt .chapter-nav,
body.is-interrupt #system-chrome,
body.is-interrupt #desktop-object-layer,
body.is-interrupt #dock-bar { display: none; }

body.hide-signal-texture #signal-texture,
body.hide-subdermal-text #subdermal-text,
body.hide-data-panel .data-panel,
body.hide-system-chrome #system-chrome,
body.hide-coordinates #coordinates,
body.hide-clock #clock,
body.hide-scan-lines .crt-frame::after,
body.hide-scan-lines .desktop-crt::after,
body.hide-scan-lines .interrupt-video-wrap::after { display: none; }

/* ── DOCK BAR ──────────────────────────────────────────────────── */
#dock-bar {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0;
  z-index: 99999;
  height: var(--dock-h);
  width: max-content;
  max-width: calc(100vw - 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 22px 12px;
  background: var(--win-bg);
  border: 2px solid var(--win-border);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 4px 0 0 rgba(10,10,10,0.35), inset 1px 1px 0 var(--btn-hi);
  backdrop-filter: none;
  font-family: var(--ui-font);
  transform: translate(-50%, var(--dock-h));
  transition: transform 0.25s cubic-bezier(0.32, 0, 0.67, 0);
}

body.has-booted #dock-bar {
  transform: translate(-50%, 0);
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

body.is-booting #dock-bar,
body.is-booting #system-chrome { display: none; }

body.has-booted #system-chrome {
  animation: chromeAppear 0.3s linear;
}

@keyframes chromeAppear { from { opacity: 0; } to { opacity: 1; } }

.dock-apps,
.dock-minimized {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dock-divider {
  display: none;
  width: 1px;
  height: 58px;
  background: var(--win-border);
  align-self: center;
}

.dock-divider.has-items { display: block; }

/* Dock icon — controlled lift, no spring bounce */
.dock-app-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 2px solid var(--win-border);
  box-shadow: inset -2px -2px 0 var(--btn-sh), inset 2px 2px 0 var(--btn-hi);
  background: var(--btn-face);
  border-radius: 16px;
  transition: transform 0.12s ease, opacity 0.12s ease;
  transform-origin: bottom center;
}

.dock-app-icon:hover {
  transform: translateY(-5px);
  background: var(--btn-face);
  color: inherit;
  filter: none;
  opacity: 1;
}

.dock-app-icon:active {
  transform: translateY(-2px);
}

/* Subtle neighbor lift */
.dock-app-icon:hover + .dock-app-icon,
.dock-apps:has(.dock-app-icon:hover) .dock-app-icon:has(+ .dock-app-icon:hover) {
  transform: translateY(-2px);
}

.dock-svg,
.dock-svg i {
  display: grid;
  place-items: center;
  width: 66px;
  height: 58px;
  font-size: 38px;
  line-height: 1;
  color: var(--text);
}

.dock-app-icon.is-disabled { opacity: 0.3; }

.dock-label {
  position: absolute;
  left: 50%;
  bottom: 70px;
  display: none;
  transform: translateX(-50%);
  padding: 2px 6px;
  border: 1px solid var(--win-border);
  background: var(--win-bg);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 1px 1px 0 rgba(10,10,10,0.4);
}

.dock-app-icon:hover .dock-label,
.dock-tooltip.is-active { display: block; }

.dock-tooltip {
  position: absolute;
  left: 50%;
  bottom: 70px;
  display: none;
  width: max-content;
  max-width: 240px;
  transform: translateX(-50%);
  padding: 2px 6px;
  border: 1px solid var(--win-border);
  background: var(--win-bg);
  color: var(--text);
  font-size: var(--fs-small);
  white-space: nowrap;
  box-shadow: 1px 1px 0 rgba(10,10,10,0.4);
}

.dock-dot {
  position: absolute;
  left: 50%;
  bottom: 5px;
  display: none;
  width: 6px;
  height: 6px;
  margin-left: -1.5px;
  background: var(--win-border);
  border-radius: 50%;
}

.dock-app-icon.is-open .dock-dot { display: block; }

.cards-dock-icon {
  position: relative;
  width: 38px;
  height: 44px;
  display: block;
}

.cards-dock-icon b {
  position: absolute;
  display: grid;
  place-items: center;
  width: 28px;
  height: 38px;
  border: 2px solid var(--win-border);
  border-radius: 4px;
  background: #FFF4D7;
  color: var(--text);
  font: 22px / 1 var(--mono);
}

.cards-dock-icon b:first-child {
  left: 0;
  top: 4px;
  transform: rotate(-8deg);
}

.cards-dock-icon b:last-child {
  right: 0;
  top: 0;
  color: var(--text);
  transform: rotate(7deg);
}

.monitor-dock-icon {
  width: 44px;
  height: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--win-border);
  background: #F5E8C8;
}

.monitor-dock-icon i {
  display: block;
  width: 100%;
  background: var(--text);
}

.monitor-dock-icon i:nth-child(1) { height: 12px; }
.monitor-dock-icon i:nth-child(2) { height: 24px; }
.monitor-dock-icon i:nth-child(3) { height: 17px; }

.dock-thumb {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text);
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
  font-size: var(--fs-small);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.dock-utility-divider { display: block; }

/* ── DESKTOP ICONS ─────────────────────────────────────────────── */
#desktop-object-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.desktop-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 98px;
  border: 0;
  background: transparent;
  color: var(--text-inv);
  padding: 4px 3px;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  pointer-events: auto;
  font-family: var(--ui-font);
  box-shadow: none;
}

.desktop-icon svg {
  width: 46px;
  height: 46px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.desktop-icon svg path { fill: var(--btn-face); stroke: var(--win-border); stroke-width: 1.5; }

.desktop-icon-label {
  display: block;
  max-width: 98px;
  padding: 1px 3px;
  overflow-wrap: anywhere;
  color: var(--text-inv);
  background: transparent;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.desktop-icon.is-selected .desktop-icon-label {
  color: var(--text);
  background: rgba(100,160,140,0.75);
  text-shadow: none;
}

.desktop-icon.is-hidden { display: none; }

.desktop-icon-sabine { display: none; }
.chapter-stage[data-mode="ch01"] ~ #desktop-object-layer .desktop-icon-sabine { display: flex; }
.chapter-stage[data-mode="ch04"] ~ #desktop-object-layer .desktop-icon { display: none; }

/* ── DESKTOP WINDOWS ───────────────────────────────────────────── */
.desktop-window {
  position: fixed;
  z-index: 100;
  width: 300px;
  color: var(--text);
  background: var(--win-bg);
  border: 2px solid var(--win-border);
  box-shadow: 5px 5px 0 rgba(10,10,10,0.48);
  font-size: var(--fs-ui);
  line-height: 1.45;
  pointer-events: auto;
  resize: both;
  overflow: hidden;
}

/* Resize handle indicator */
.desktop-window::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: repeating-linear-gradient(-45deg, var(--win-border) 0, var(--win-border) 1px, var(--win-bg) 1px, var(--win-bg) 3px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.desktop-window.is-minimized { display: none; }

/* Window size variants */
.desktop-window-wide,
.desktop-window-eyu  { width: 520px; height: 520px; }
.desktop-window-eyu  { min-width: 500px; min-height: 400px; }
.desktop-window-control { width: 480px; }
.desktop-window-finder { width: 360px; }
.desktop-window-note { width: 430px; height: 420px; }
.desktop-window-calendar,
.desktop-window-puzzle { width: 330px; height: 520px; }
.desktop-window-chess   { width: 460px; height: 560px; }
.desktop-window-cards   { width: 520px; height: 430px; }
.desktop-window-profiler{ width: 620px; height: 460px; }
.desktop-window-maze    { width: 420px; }
.desktop-window-news    { width: 490px; max-width: calc(100vw - 32px); }
.desktop-window-map     { width: 410px; height: 370px; }
.desktop-window-readme  { width: 450px; height: 500px; }
.desktop-window-pdf     { width: 400px; }
.desktop-window-sabine  { width: 520px; height: 560px; }
.desktop-window-settings{ width: 760px; height: 560px; }
.desktop-window-search  { width: 980px; height: 620px; }

.desktop-window pre { margin: 0; }

/* Title bar — Win95 striped inactive / chapter-color active */
.desktop-titlebar {
  display: grid;
  grid-template-columns: 1fr 28px 28px;
  gap: 3px;
  align-items: center;
  height: 32px;
  padding-right: 4px;
  color: var(--text);
  background: var(--btn-face);
  background-image:
    repeating-linear-gradient(0deg, rgba(33,25,14,0.42) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(74,62,42,0.18) 0 1px, transparent 1px 5px);
  border-bottom: 2px solid var(--win-border);
  user-select: none;
  text-transform: uppercase;
  font-family: var(--ui-font);
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.desktop-window.is-focused .desktop-titlebar {
  background: var(--chapter-primary);
  background-image: none;
  color: var(--chapter-secondary);
}

.desktop-titlebar span {
  grid-column: 1;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 6px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.desktop-window.is-focused .desktop-titlebar span { color: var(--chapter-secondary); }

.desktop-close,
.desktop-minimize {
  width: 23px;
  height: 23px;
  min-width: 23px;
  min-height: 23px;
  border: 1px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text);
  padding: 0;
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
  line-height: 18px;
  text-align: center;
  font-size: 12px;
}

.desktop-close  { grid-column: 3; }
.desktop-minimize { grid-column: 2; }

.desktop-close:hover,
.desktop-minimize:hover { background: #E8A0A0; filter: none; }
.desktop-close:active,
.desktop-minimize:active { box-shadow: inset 1px 1px 0 var(--btn-sh); }

/* Window body */
.desktop-body {
  padding: 7px;
  background: var(--win-bg);
  color: var(--text);
  border-top: 0;
  font-size: var(--fs-ui);
}

.desktop-body > pre:first-child,
.desktop-body > pre:last-child { display: none; }

.desktop-window-map .desktop-body,
.desktop-window-readme .desktop-body,
.desktop-window-calendar .desktop-body {
  height: calc(100% - 32px);
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
}

.os-window-body {
  display: grid;
  gap: 10px;
  padding: 7px;
  background: var(--win-bg);
  color: var(--text);
  font-size: var(--fs-ui);
}

.desktop-window-control .desktop-body {
  max-height: none;
  height: calc(100% - 32px);
  overflow: auto;
}

/* ── SYSTEM DIALOG ─────────────────────────────────────────────── */
.system-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 220;
  width: 420px;
  max-width: calc(100vw - 24px);
  transform: translate(-50%, -50%);
  border: 2px solid var(--win-border);
  background: var(--win-bg);
  color: var(--text);
  font: var(--fs-ui) / 1.5 var(--mono);
  box-shadow: 4px 4px 0 rgba(10,10,10,0.45);
}

.system-dialog-title {
  height: 28px;
  border-bottom: 1px solid var(--win-border);
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  line-height: 28px;
  padding: 0 8px;
  font-size: var(--fs-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.system-dialog-body {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px;
}

.system-dialog pre { margin: 0; width: 100%; white-space: pre-wrap; }
.system-dialog button { min-width: 80px; }

/* ── HIDDEN INT BUTTON ─────────────────────────────────────────── */
#hidden-int-button {
  position: fixed;
  right: 8px;
  bottom: calc(var(--dock-h) + 4px);
  z-index: 66;
  width: 44px;
  height: 20px;
  border-color: transparent;
  background: transparent;
  color: transparent;
  box-shadow: none;
}

#hidden-int-button:hover,
#hidden-int-button:focus {
  border-color: var(--win-border);
  color: var(--text);
  background: var(--btn-face);
  filter: none;
}

/* ── SETTINGS WINDOW ───────────────────────────────────────────── */
.desktop-window-settings .desktop-body { padding: 0; height: calc(100% - 28px); overflow-y: auto; }

.settings-panel {
  gap: 0;
  padding: 0;
  border: 0;
}

/* Section header bar */
.settings-section-header {
  background: var(--btn-face);
  border-bottom: 1px solid var(--win-border);
  border-top: 1px solid var(--win-border);
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 8px;
}

.settings-section-header:first-child { margin-top: 0; }

.settings-top-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  border-bottom: 1px solid var(--win-border);
}

.settings-top-grid .os-section { padding: 10px 12px; }
.settings-top-grid .os-section:first-child { border-right: 1px solid var(--win-border); }
.settings-panel > .os-section { padding: 10px 12px; border-bottom: 1px solid var(--win-border); }
.settings-panel > .os-section:last-child { border-bottom: 0; }

.settings-layer-box {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--win-border);
}

.settings-checkbox {
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
  font-size: var(--fs-ui);
  background: transparent;
  color: var(--text);
}

.settings-opacity   { display: grid; gap: 6px; margin-top: 8px; }
.settings-panel .range-slider-row { grid-template-columns: 80px 1fr 48px; }

.settings-panel input[type="range"] {
  height: 12px;
  border: 1px solid var(--win-border);
  background: var(--win-bg);
}

.settings-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border: 1px solid var(--win-border);
  background: var(--win-bg);
}

.settings-panel input[type="range"]::-webkit-slider-thumb {
  width: 4px;
  height: 18px;
  margin-top: -8px;
  background: var(--text);
}

.settings-window-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.settings-window-toggle {
  box-shadow: 1px 1px 0 rgba(10,10,10,0.35);
}

.settings-window-toggle.is-active {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  box-shadow: none;
}

.settings-ref {
  display: grid;
  grid-template-columns: 104px 1fr 160px;
  grid-template-rows: 96px 96px 160px;
  gap: 4px;
  padding: 6px;
  background: var(--win-bg);
}

.settings-ref-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 2px solid var(--win-border);
  background: var(--win-bg);
  padding: 8px;
  overflow: hidden;
}

.settings-ref-label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  text-align: center;
  font-size: var(--fs-heading);
}

.settings-video-panel {
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: 24px 1fr 24px 24px;
  gap: 2px;
}

.settings-speaker     { grid-column: 1 / -1; text-align: center; font-size: 20px; line-height: 1; }
.settings-speaker.bottom { grid-row: 3; }

.settings-video-scale {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 18px;
  line-height: 1;
}

.settings-vertical-slider {
  grid-row: 2;
  width: 120px;
  height: 22px;
  align-self: center;
  justify-self: center;
  transform: rotate(-90deg);
  transform-origin: center;
}

.settings-time-panel   { display: grid; place-items: center; }
.settings-time-display {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--win-border);
  text-align: center;
  font-size: 22px;
  line-height: 1;
  background: var(--win-bg);
  color: var(--text);
}

.settings-texture-panel,
.settings-subdermal-panel,
.settings-scan-panel {
  display: grid;
  align-content: center;
  justify-content: center;
  gap: 8px;
}

.settings-level-row { display: flex; justify-content: center; gap: 4px; }

.settings-level-box {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text);
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
}

.settings-level-box.is-active {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  box-shadow: none;
}

.settings-ambient-panel { display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.settings-ambient-row { display: grid; grid-template-columns: auto 1fr auto 58px; gap: 8px; align-items: center; }
.settings-layer-buttons,
.settings-window-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.settings-ref-button {
  background: var(--btn-face);
  border: 1px solid var(--win-border);
  box-shadow: 2px 2px 0 rgba(10,10,10,0.3);
  padding: 4px 8px;
  color: var(--text);
  font-size: var(--fs-heading);
}

.settings-ref-button.is-active {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  box-shadow: none;
}

/* ── SETTINGS v3 — System 7 Control Panel ──────────────────────── */
.desktop-window-settings { width: 500px; }
.desktop-window-settings .desktop-body { padding: 0; height: 360px; overflow: hidden; }

.ctrl-panel {
  display: grid;
  grid-template-columns: 72px 1fr;
  height: 100%;
  gap: 0;
  padding: 0;
}

.desktop-window-settings .os-window-body,
.desktop-window-settings .ctrl-panel {
  display: grid;
  grid-template-columns: 72px 1fr;
  height: 100%;
  gap: 0;
  padding: 0;
}

.ctrl-sidebar {
  border-right: 2px solid var(--win-border);
  background: var(--btn-face);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.ctrl-cat-btn {
  width: 100%;
  padding: 10px 4px 8px;
  border: 0;
  border-bottom: 1px solid rgba(46,37,22,0.18);
  background: transparent;
  box-shadow: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ctrl-cat-btn:hover { background: rgba(46,37,22,0.08); }
.ctrl-cat-btn.is-active { background: var(--chapter-primary); color: var(--chapter-secondary); }

.ctrl-cat-icon { font-size: 22px; line-height: 1; }
.ctrl-cat-label { font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; }

.ctrl-content {
  overflow-y: auto;
  background: var(--win-bg);
  display: flex;
  flex-direction: column;
}

/* Row inside content panel */
.ctrl-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--win-border);
  padding: 10px 14px;
  min-height: 44px;
}

.ctrl-row-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.ctrl-row-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ctrl-slider {
  width: 180px;
  height: 12px;
  border: 1px solid var(--win-border);
  background: var(--win-bg);
  padding: 0;
  appearance: none;
}

.ctrl-slider::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--text);
}

.ctrl-slider::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 18px;
  margin-top: -7px;
  background: var(--btn-face);
  border: 1px solid var(--win-border);
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
}

.ctrl-value {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-dim);
  min-width: 30px;
  text-align: right;
}

.ctrl-time-display {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 2px solid var(--win-border);
  padding: 5px 10px;
  background: var(--btn-face);
  color: var(--text);
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
}

/* Toggle rows (LAYERS panel) */
.ctrl-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--win-border);
}

.ctrl-toggle-label {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}

.ctrl-toggle-btn {
  padding: 3px 14px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--btn-face);
  border: 1px solid var(--win-border);
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
  color: var(--text);
}

.ctrl-toggle-btn.is-active {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  box-shadow: none;
  border-color: transparent;
}

/* Window toggle buttons (WINDOWS panel) */
.ctrl-win-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 6px 14px 0;
  padding: 6px 10px;
  text-align: left;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--btn-face);
  border: 1px solid var(--win-border);
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
  color: var(--text);
}

.ctrl-win-btn.is-active {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  box-shadow: none;
  border-color: transparent;
}

.ctrl-win-btn:last-child { margin-bottom: 10px; }

.desktop-window-settings { width: 760px; height: 560px; }
.desktop-window-settings .desktop-body { padding: 0; height: calc(100% - 32px); overflow: hidden; }
.desktop-window-settings .os-window-body,
.desktop-window-settings .ctrl-strip-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
}

.ctrl-strip-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 2px solid var(--win-border);
  background: #79CEC7;
  color: var(--text);
}

.ctrl-strip-header div {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ctrl-strip-header span {
  color: var(--text-dim);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
}

.ctrl-strip-grid {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  background: var(--win-bg);
}

.ctrl-strip-grid .ctrl-row,
.ctrl-strip-grid .ctrl-toggle-row {
  min-height: 64px;
  padding: 14px 22px;
  border-bottom: 2px solid rgba(33,25,14,0.30);
  background: linear-gradient(90deg, rgba(255,255,255,0.16), transparent);
}

.ctrl-strip-grid .ctrl-row-label,
.ctrl-strip-grid .ctrl-toggle-label {
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.ctrl-strip-grid .ctrl-row { grid-template-columns: 170px 1fr; }
.ctrl-strip-grid .ctrl-slider { width: min(360px, 44vw); height: 16px; }
.ctrl-strip-grid .ctrl-time-display { font-size: 31px; padding: 10px 18px; }
.ctrl-strip-grid .settings-level-box { width: 42px; height: 34px; line-height: 32px; }
.ctrl-strip-grid .ctrl-win-btn {
  width: calc(100% - 44px);
  margin: 8px 22px 0;
  padding: 10px 12px;
}

.settings-ref-button.is-active {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  box-shadow: none;
  transform: translate(2px, 2px);
}

.settings-dither-preview {
  width: 100%;
  height: 100%;
  border: 1px solid var(--win-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23F2E7D0'/%3E%3Crect width='4' height='4' fill='%234A3E2A' opacity='0.15'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%234A3E2A' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 8px 8px;
}

.settings-window-panel { padding: 10px; }

/* ── APP WINDOW BODIES ─────────────────────────────────────────── */
.desktop-window-finder .desktop-body,
.desktop-window-note .desktop-body {
  max-height: 270px;
  overflow: auto;
}

.os-section { display: grid; gap: 5px; }

.os-section-title,
.finder-title {
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
}

.os-section-title::before,
.finder-title::before { content: "──── "; }

.os-hr {
  color: var(--win-border);
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--win-border);
  height: 1px;
  text-indent: -999px;
}

.ascii-checkbox,
.finder-row,
.note-footer button,
.puzzle-footer button,
.chess-footer button,
.news-footer button,
.map-footer button,
.trash-list button,
.eyu-list button,
.gazetteer-result,
.gazetteer-unverified,
.gazetteer-clip-button {
  border: 1px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text);
  font: var(--fs-ui) / 1.2 var(--ui-font);
  padding: 2px 5px;
  text-align: left;
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
}

.ascii-checkbox:hover,
.finder-row:hover,
.note-footer button:hover,
.puzzle-footer button:hover,
.chess-footer button:hover,
.news-footer button:hover,
.map-footer button:hover,
.trash-list button:hover,
.eyu-list button:hover {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  filter: none;
}

/* Range sliders */
.ascii-slider-row,
.range-slider-row {
  display: grid;
  grid-template-columns: 74px 1fr 40px;
  align-items: center;
  gap: 7px;
}

.ascii-slider,
.range-slider-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border: 1px solid var(--win-border);
  outline: none;
  background: var(--win-bg);
}

.range-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 20px;
  margin-top: -3px;
  background: var(--text);
  border: 0;
}

.range-slider-row input[type="range"]::-webkit-slider-runnable-track { height: 14px; background: var(--win-bg); }
.range-slider-row input[type="range"]::-moz-range-track { height: 14px; background: var(--win-bg); border: 0; }
.range-slider-row input[type="range"]::-moz-range-thumb { width: 6px; height: 20px; background: var(--text); border: 0; border-radius: 0; }

.ascii-slider-value,
.range-slider-value { text-align: right; font-size: var(--fs-small); }

.layer-control { display: grid; gap: 3px; }

.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }

/* ── FINDER WINDOW ─────────────────────────────────────────────── */
.desktop-window-finder { width: 820px; height: 540px; }
.desktop-window-finder .desktop-body {
  height: calc(100% - 32px);
  max-height: none;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Override the generic os-window-body grid for finder + settings */
.desktop-window-finder .os-window-body,
.desktop-window-finder .finder-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  padding: 0;
}

.desktop-window-settings .os-window-body,
.desktop-window-settings .settings-new-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.finder-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.finder-layout {
  display: grid;
  grid-template-columns: 170px minmax(260px, 1fr) 230px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.finder-sidebar {
  border-right: 2px solid var(--win-border);
  background: var(--btn-face);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}

.finder-main {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--win-bg);
  display: flex;
  flex-direction: column;
}

.finder-preview {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-left: 2px solid var(--win-border);
  background: #E8D4AE;
  padding: 14px;
}

.finder-section-label {
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 8px 10px 3px;
}

.finder-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: var(--fs-ui) / 1.4 var(--mono);
  text-align: left;
  letter-spacing: 0.03em;
}

.finder-nav-btn:hover { background: rgba(74,62,42,0.08); }

.finder-nav-btn.is-active {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
}

.finder-item {
  display: grid;
  grid-template-columns: 20px minmax(120px, 1fr) 72px 58px 54px;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid rgba(74,62,42,0.06);
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: var(--fs-ui) / 1.3 var(--mono);
  text-align: left;
}

.finder-item:hover { background: rgba(74,62,42,0.07); }
.finder-item.is-selected { background: var(--chapter-primary); color: var(--chapter-secondary); }
.finder-item.is-selected .finder-item-meta,
.finder-item.is-selected .finder-item-size { color: inherit; opacity: 0.72; }

.finder-item-icon { text-align: center; opacity: 0.85; font-size: 18px; }
.finder-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-item-meta { color: var(--text-dim); font-size: var(--fs-small); white-space: nowrap; }
.finder-item-size { color: var(--text-dim); font-size: var(--fs-small); white-space: nowrap; text-align: right; }
.finder-row-action {
  width: 100%;
  min-height: 22px;
  min-width: 0;
  padding: 2px 5px;
  text-align: center;
  font: 700 10px / 1.2 var(--mono);
}
.finder-row-action.is-broken {
  background: #D8C39A;
  color: var(--text);
}
.finder-column-header {
  display: grid;
  grid-template-columns: 20px minmax(120px, 1fr) 72px 58px 54px;
  gap: 6px;
  padding: 6px 14px;
  border-bottom: 2px solid var(--win-border);
  background: rgba(255,255,255,0.18);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.finder-column-header span:last-child { text-align: right; }

.finder-readout-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(74,62,42,0.06);
  font-size: var(--fs-small);
}

.finder-readout-heading {
  padding: 12px 12px 5px;
  border-bottom: 1px solid var(--win-border);
  background: rgba(255,255,255,0.16);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.finder-readout-label { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; padding-top: 1px; }
.finder-readout-value { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.finder-empty {
  padding: 20px 16px;
  color: var(--text-dim);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.finder-statusbar {
  padding: 6px 12px;
  border-top: 2px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text-dim);
  font-size: var(--fs-small);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.finder-object-doc {
  max-height: 360px;
  min-width: 320px;
  margin: 0;
  background: #FFF4D7;
  border: 2px solid var(--win-border);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.18);
}

.finder-object-broken {
  background:
    repeating-linear-gradient(-45deg, rgba(216,195,154,0.5) 0, rgba(216,195,154,0.5) 8px, transparent 8px, transparent 16px),
    #EFE0BC;
  border-style: dashed;
}

.finder-preview-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 4px auto 14px;
  border: 2px solid var(--win-border);
  background: var(--win-bg);
  box-shadow: inset -2px -2px 0 var(--btn-sh), inset 2px 2px 0 var(--btn-hi);
  font-size: 34px;
}

.finder-preview-title {
  text-align: center;
  font-weight: 700;
  overflow-wrap: anywhere;
  letter-spacing: 0.04em;
}

.finder-preview-meta {
  margin: 6px 0 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-small);
  text-transform: uppercase;
}

.finder-preview-info {
  display: grid;
  border-top: 1px solid var(--win-border);
  border-bottom: 1px solid var(--win-border);
}

.finder-preview-info div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(33,25,14,0.18);
}

.finder-preview-info div:last-child { border-bottom: 0; }
.finder-preview-info span { color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; }
.finder-preview-info b { font-weight: 600; overflow-wrap: anywhere; }
.finder-preview-open { width: 100%; margin-top: 14px; text-align: center; font-weight: 700; }

/* legacy aliases kept for safety */
.finder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: var(--fs-ui) / 1.3 var(--ui-font);
  text-align: left;
}
.finder-row:hover { background: var(--chapter-primary); color: var(--chapter-secondary); }
.finder-title { color: var(--text-dim); text-transform: uppercase; font-size: 10px; letter-spacing: 0.14em; padding: 5px 12px 3px; }
.readout-line { white-space: pre; font-size: var(--fs-small); padding: 2px 12px; color: var(--text-dim); font-family: var(--mono); }

/* ── SEARCH WINDOW — encyclopedia accordion ────────────────────── */
.desktop-window-search { width: 640px; height: 560px; }

.search-dict-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.search-dict-panel.os-window-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.search-dict-input-wrap {
  flex-shrink: 0;
  padding: 10px 12px;
  background: var(--btn-face);
  border-bottom: 2px solid var(--win-border);
}

.search-dict-input {
  width: 100%;
  border: 1px solid var(--win-border);
  background: var(--win-bg);
  color: var(--text);
  padding: 8px 10px;
  font: 600 var(--fs-heading) / 1.4 var(--mono);
  letter-spacing: 0.05em;
  outline: 0;
  text-transform: uppercase;
}

.search-dict-input::placeholder { color: var(--text-dim); font-weight: 400; text-transform: none; }
.search-dict-input:focus { border-color: var(--chapter-primary); }

.search-dict-list {
  flex: 1;
  overflow-y: scroll;  /* always show scrollbar — scroll support guaranteed */
  background: var(--win-bg);
}

.search-dict-entry {
  border-bottom: 1px solid rgba(46,37,22,0.14);
}

.search-dict-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: 600 var(--fs-ui) / 1.3 var(--mono);
  text-align: left;
  letter-spacing: 0.04em;
}

.search-dict-header:hover { background: rgba(46,37,22,0.06); }

.search-dict-entry.is-open .search-dict-header {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
}

.search-dict-arrow {
  font-size: 10px;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.search-dict-entry.is-open .search-dict-arrow { transform: rotate(90deg); }

.search-dict-name { flex: 1; }

.search-dict-body {
  display: none;
  padding: 0 14px 12px;
  background: var(--btn-face);
  border-top: 1px solid rgba(46,37,22,0.10);
}

.search-dict-entry.is-open .search-dict-body { display: block; }

.search-dict-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 4px 0;
  border-bottom: 1px solid rgba(46,37,22,0.07);
  font-size: var(--fs-small);
  gap: 8px;
}

.search-dict-row:last-child { border-bottom: 0; }
.search-dict-lbl { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.09em; font-size: 10px; padding-top: 2px; font-weight: 600; }
.search-dict-val { color: var(--text); line-height: 1.45; }

.search-dict-fact {
  margin-top: 8px;
  font-size: var(--fs-narrative);
  color: var(--chapter-primary);
  line-height: 1.5;
  font-weight: 600;
}

.search-dict-note {
  margin-top: 4px;
  font-size: var(--fs-ui);
  color: var(--text-dim);
  line-height: 1.65;
  font-style: italic;
}

.search-dict-footer {
  flex-shrink: 0;
  padding: 4px 14px;
  border-top: 2px solid var(--win-border);
  background: var(--btn-face);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Legacy selectors kept for any JS refs */
.search-panel { display: flex; flex-direction: column; height: 100%; }
.search-input { font: 600 var(--fs-heading) / 1.4 var(--mono); }

.desktop-window-search { width: 980px; height: 620px; }
.desktop-window-search .desktop-body {
  height: calc(100% - 32px);
  padding: 0;
  overflow: hidden;
}

.desktop-titlebar,
button {
  touch-action: manipulation;
}

.search-system-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
  background: var(--win-bg);
}

.search-system-toolbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--win-border);
  background: #D89413;
}

.search-system-scope {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: var(--fs-small);
}

.search-system-input {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--win-border);
  background: #FFF4D7;
  color: var(--text);
  padding: 12px 14px;
  outline: 0;
  font: 700 23px / 1.2 var(--mono);
  letter-spacing: 0.06em;
  box-shadow: inset 2px 2px 0 rgba(33,25,14,0.22);
}

.search-system-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 34%) 1fr;
  overflow: hidden;
}

.search-system-results {
  min-height: 0;
  overflow-y: scroll;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-right: 2px solid var(--win-border);
  background: var(--btn-face);
}

.search-system-result {
  display: grid;
  width: 100%;
  gap: 4px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid rgba(33,25,14,0.24);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.search-system-result:hover { background: rgba(255,255,255,0.22); }
.search-system-result.is-selected { background: var(--chapter-primary); color: var(--chapter-secondary); }

.search-result-name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.search-result-meta { color: var(--text-dim); font-size: var(--fs-small); line-height: 1.35; }
.search-result-preview {
  color: rgba(33,25,14,0.72);
  font-size: var(--fs-small);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-system-result.is-selected .search-result-meta { color: inherit; opacity: 0.72; }
.search-system-result.is-selected .search-result-preview { color: inherit; opacity: 0.82; }

.search-system-detail {
  min-width: 0;
  min-height: 0;
  overflow-y: scroll;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 30px 28px;
  background: #EFE0BC;
}

.search-detail-eyebrow {
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.search-detail-heading {
  margin: 8px 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--win-border);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: 0.03em;
}

.search-system-table {
  display: grid;
  border-top: 1px solid rgba(33,25,14,0.25);
}

.search-system-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(33,25,14,0.18);
}

.search-system-label {
  color: var(--text-dim);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
}

.search-system-value {
  color: var(--text);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.search-system-fact {
  margin: 22px 0 10px;
  color: #D89413;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.5;
}

.search-system-note {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 16px;
  font-style: italic;
  line-height: 1.65;
}

.search-more-button {
  margin-top: 12px;
  padding: 8px 12px;
  border: 2px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text);
  font: 700 var(--fs-small) / 1 var(--mono);
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
}

.search-more-button:hover {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
}

.search-system-footer {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-top: 2px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.search-empty { padding: 40px; color: var(--text-dim); font-weight: 700; letter-spacing: 0.12em; }

/* ── NOTE / FOOTER ELEMENTS ────────────────────────────────────── */
.desktop-window-note .desktop-body {
  height: calc(100% - 32px);
  max-height: none;
  overflow: hidden;
  padding: 0;
}

.note-panel {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  border: 0;
  background:
    linear-gradient(90deg, rgba(33,25,14,0.08) 1px, transparent 1px),
    var(--win-bg);
  background-size: 18px 100%, auto;
}

.note-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 13px 14px 10px;
  border-bottom: 2px solid var(--win-border);
  background: #FFF4D7;
}

.note-head div {
  color: var(--text);
  font: 700 28px / 1 var(--ui-font);
  letter-spacing: 0.04em;
}

.note-head span {
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.note-tools {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(74,62,42,0.25);
  background: #EFE0BC;
}

.note-tools button {
  padding: 4px 8px;
  font-size: var(--fs-small);
  line-height: 1.2;
}

.note-panel textarea {
  min-height: 0;
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: var(--fs-ui) / 1.5 var(--mono);
  padding: 14px;
  caret-color: var(--text);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.note-footer,
.puzzle-footer,
.news-footer,
.map-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
}

.note-footer {
  padding: 8px 12px;
  border-top: 2px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ── CALENDAR ──────────────────────────────────────────────────── */
.desktop-window-calendar { width: 430px; height: 560px; }

.calendar-panel { gap: 0; border: 0; padding: 0; height: 100%; display: flex; flex-direction: column; }

.calendar-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 40px 1fr 40px 40px;
  align-items: center;
  gap: 0;
  padding: 6px 4px;
  border-bottom: 2px solid var(--win-border);
  background: var(--chapter-primary);
  font-family: var(--ui-font);
  font-size: var(--fs-heading);
  font-weight: 700;
  text-align: center;
  color: var(--chapter-secondary);
  letter-spacing: 0.06em;
  transition: background 0.3s ease, color 0.3s ease;
}

.calendar-header button {
  width: 38px;
  height: 32px;
  min-width: 38px;
  min-height: 32px;
  padding: 0;
  font-size: 16px;
  text-align: center;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--chapter-secondary);
  box-shadow: none;
}

.calendar-header button:hover { background: rgba(255,255,255,0.28); }

.calendar-scroll { width: 100%; flex: 1; overflow-y: scroll; padding: 8px 12px 12px; }
.calendar-month { margin-bottom: 14px; scroll-margin-top: 28px; }

.calendar-month-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 4px 2px 6px;
}

.calendar-grid  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }

.calendar-weekday {
  color: var(--text-dim);
  font-family: var(--ui-font);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 4px;
}

.calendar-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  padding: 1px 0;
  font: var(--fs-ui) / 1 var(--mono);
  border-radius: 1px;
}

.calendar-date:hover:not(.is-today) { border-color: var(--win-border); background: rgba(74,62,42,0.06); }

.calendar-date small { min-height: 7px; font-size: 7px; line-height: 1; color: var(--chapter-primary); margin-top: 2px; }

.calendar-date.is-today {
  color: var(--chapter-secondary);
  background: var(--chapter-primary);
  border-color: var(--chapter-primary);
  font-weight: 700;
}

.calendar-date.is-today small { color: var(--chapter-secondary); opacity: 0.7; }

.calendar-inline-panel {
  display: none;
  border-top: 1px solid var(--win-border);
  border-bottom: 1px solid var(--win-border);
  padding: 6px 8px;
  margin-top: 4px;
  text-align: left;
  position: relative;
  white-space: normal;
  color: var(--text);
  font: var(--fs-small) / 1.5 var(--mono);
  background: var(--btn-face);
}

.calendar-inline-panel.is-active { display: block; }
.calendar-inline-panel pre { margin: 0; padding-right: 24px; white-space: pre-wrap; }
.calendar-inline-close {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  padding: 0;
  text-align: center;
  line-height: 18px;
}

#calendar-tooltip {
  position: fixed;
  z-index: 90;
  display: none;
  width: 260px;
  padding: 9px 12px;
  background: var(--win-bg);
  color: var(--text);
  font: var(--fs-small) / 1.5 var(--mono);
  white-space: pre-wrap;
  pointer-events: none;
  border: 1px solid var(--win-border);
  box-shadow: 2px 2px 0 rgba(10,10,10,0.3);
}

#calendar-tooltip.is-active { display: block; }

/* ── PUZZLE ────────────────────────────────────────────────────── */
.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  justify-content: center;
  gap: 0;
  margin: 8px auto 14px;
  border: 2px solid var(--win-border);
}

.puzzle-tile {
  width: 50px;
  height: 50px;
  border: 1px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text);
  font: 17px / 1 var(--mono);
  text-align: center;
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
}

.puzzle-tile.is-empty { background: #4A3E2A; color: #4A3E2A; box-shadow: none; }

/* ── CHESS ─────────────────────────────────────────────────────── */
.desktop-window-chess { width: 760px; height: 500px; }
.desktop-window-chess .desktop-body { height: calc(100% - 32px); padding: 0; overflow: hidden; }

.chess-panel {
  height: 100%;
  display: grid;
  grid-template-columns: 392px 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
  background: var(--win-bg);
}

.chess-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--win-border);
  background: var(--btn-face);
}

.chess-header div {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.chess-header span {
  color: var(--text-dim);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 45px);
  grid-template-rows: repeat(8, 45px);
  width: 360px;
  height: 360px;
  border: 2px solid var(--win-border);
  margin: 16px;
  box-shadow: 4px 4px 0 rgba(10,10,10,0.25);
}

.chess-square {
  width: 45px;
  height: 45px;
  border: 0;
  box-shadow: none;
  background: var(--win-bg);
  color: var(--text);
  padding: 0;
  text-align: center;
  font: 28px / 45px "Times New Roman", serif;
}

.chess-square.is-dark    { background: var(--btn-face); }
.chess-square.is-selected{ background: #D7D7D7; outline: 3px solid var(--win-border); outline-offset: -3px; color: var(--text); }

.chess-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 16px 0;
}

.chess-captured {
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  white-space: pre-wrap;
  border: 2px solid var(--win-border);
  background: #EFE0BC;
  font: var(--fs-small) / 1.55 var(--mono);
}

.chess-footer   { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chess-message {
  min-height: 88px;
  padding: 12px;
  border: 2px solid var(--win-border);
  background: #FFF4D7;
  color: var(--text);
  font: var(--fs-ui) / 1.55 var(--mono);
}

.desktop-window-monitor { width: 620px; height: 500px; }
.desktop-window-monitor .desktop-body { height: calc(100% - 32px); padding: 0; overflow: auto; }

.monitor-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--win-bg);
  overflow: auto;
}

.monitor-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--win-border);
  background: var(--btn-face);
}

.monitor-head div { font-size: 26px; font-weight: 700; letter-spacing: 0.08em; }
.monitor-head span { color: var(--text-dim); font-size: var(--fs-small); letter-spacing: 0.08em; }

.monitor-readout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-bottom: 2px solid var(--win-border);
}

.monitor-big,
.monitor-stack div {
  display: grid;
  gap: 8px;
  padding: 14px 18px;
}

.monitor-big { border-right: 2px solid var(--win-border); }
.monitor-stack div { border-bottom: 1px solid rgba(33,25,14,0.25); }
.monitor-stack div:last-child { border-bottom: 0; }
.monitor-readout span,
.monitor-meter span { color: var(--text-dim); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
.monitor-big b { font-size: 30px; overflow-wrap: anywhere; }
.monitor-stack b { font-size: 16px; overflow-wrap: anywhere; }

.monitor-meter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.monitor-meter {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--win-border);
  background: #FFF4D7;
}

.monitor-meter div { display: flex; justify-content: space-between; gap: 10px; }
.monitor-meter i {
  height: 18px;
  border: 1px solid var(--win-border);
  background:
    linear-gradient(90deg, var(--text) 0 var(--meter), transparent var(--meter)),
    var(--btn-face);
}

.monitor-log {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 12px 16px;
  overflow: auto;
  border-top: 2px solid var(--win-border);
  background: #EFE0BC;
  color: var(--text);
  font: var(--fs-small) / 1.55 var(--mono);
}

.desktop-window-cards .desktop-body,
.desktop-window-chart .desktop-body { height: calc(100% - 32px); padding: 0; overflow: hidden; }
.desktop-window-cards { width: 680px; height: 610px; }

.cards-panel {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  padding: 0;
  background: var(--win-bg);
}

.cards-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 2px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.cards-toolbar span { color: var(--text-dim); font-size: var(--fs-small); font-weight: 700; }

.cards-table {
  position: relative;
  display: grid;
  grid-template-rows: 92px 1fr 110px;
  gap: 14px;
  padding: 18px;
  min-height: 0;
  overflow: auto;
  background:
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px),
    #D7D7D7;
  background-size: 24px 24px;
}

.cards-piles {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 18px;
}

.cards-pile {
  width: 94px;
  display: grid;
  place-items: center;
  border: 2px solid var(--win-border);
  border-radius: 5px;
  background: repeating-linear-gradient(45deg, #FFF4D7 0, #FFF4D7 4px, #EFE0BC 4px, #EFE0BC 8px);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.22);
  color: var(--text);
  font: 10px / 1 var(--mono);
}

.cards-pile span {
  font-size: 24px;
  font-weight: 700;
}

.cards-hand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  min-height: 170px;
}

.playing-card {
  position: relative;
  width: 96px;
  height: 142px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: stretch;
  padding: 6px;
  border: 2px solid var(--win-border);
  border-radius: 5px;
  background: #FFF4D7;
  color: var(--text);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.28);
  font-weight: 700;
  text-align: left;
}

.playing-card .card-corner { font-size: 16px; line-height: 1; }
.playing-card strong {
  min-width: 0;
  justify-self: center;
  align-self: center;
  font: 46px / 1 var(--mono);
  overflow-wrap: anywhere;
}

.playing-card em {
  font: 9px / 1.1 var(--mono);
  opacity: 0.6;
  font-style: normal;
  text-align: center;
}

.playing-card.is-red { color: #8F1D12; }
.playing-card.is-selected,
.playing-card.is-held { outline: 3px solid var(--win-border); transform: translateY(-8px); background: #FFFFFF; }
.playing-card.is-held::after {
  content: "HELD";
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 2px 4px;
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
  font: 8px / 1 var(--mono);
}
.playing-card.is-cleared { visibility: hidden; pointer-events: none; }

.cards-log {
  min-height: 0;
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  border: 2px solid var(--win-border);
  background: #EFE0BC;
  color: var(--text-dim);
  font: var(--fs-small) / 1.45 var(--mono);
  white-space: pre-wrap;
}

.cards-footer {
  display: grid;
  grid-template-columns: 1fr 260px auto;
  align-items: stretch;
  border-top: 2px solid var(--win-border);
  background: var(--btn-face);
}

.cards-status {
  min-height: 54px;
  padding: 9px 14px;
  color: var(--text-dim);
  font-size: var(--fs-small);
  white-space: pre-wrap;
}

.cards-meters {
  display: grid;
  gap: 3px;
  padding: 8px 12px;
  border-left: 2px solid var(--win-border);
  border-right: 2px solid var(--win-border);
  color: var(--text);
  font: 9px / 1.1 var(--mono);
}

.cards-meters div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cards-controls {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 122px;
}

.cards-controls button,
.chart-tabs button {
  border: 0;
  border-bottom: 1px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text);
  font: 9px / 1 var(--mono);
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
}

.cards-controls button:last-child { border-bottom: 0; }
.cards-controls button:hover,
.chart-tabs button:hover,
.chart-tabs button.is-active {
  background: var(--chapter-primary);
  color: var(--chapter-secondary);
}

/* ── HIDDEN CHART ─────────────────────────────────────────────── */
.desktop-window-chart { width: 610px; height: 430px; }
.chart-panel {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  background: var(--win-bg);
  padding: 0;
}

.chart-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 2px solid var(--win-border);
  background: var(--btn-face);
  font-weight: 700;
}

.chart-toolbar span { color: var(--text-dim); font-size: var(--fs-small); }
.chart-canvas { width: 100%; height: 100%; display: block; background: #FFF4D7; }
.chart-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--win-border);
}
.chart-tabs button { height: 28px; border-right: 1px solid var(--win-border); }
.chart-tabs button:last-child { border-right: 0; }
.chart-caption {
  min-height: 42px;
  margin: 0;
  padding: 8px 12px;
  border-top: 2px solid var(--win-border);
  background: var(--btn-face);
  color: var(--text-dim);
  font: var(--fs-small) / 1.35 var(--mono);
}

/* ── STICKY NOTES ──────────────────────────────────────────────── */
.sticky-note {
  position: fixed;
  z-index: 300;
  width: 200px;
  height: 180px;
  border: 1px solid var(--win-border);
  background: #FFF9D6;
  color: var(--text);
  pointer-events: auto;
  box-shadow: 3px 3px 0 rgba(10,10,10,0.3);
}

.sticky-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
  padding: 0 4px;
  background: #C8A800;
  color: var(--text);
  font: var(--fs-small) / 18px var(--mono);
  user-select: none;
}

.sticky-strip button {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  line-height: 14px;
}

.sticky-note textarea {
  width: 100%;
  height: calc(100% - 18px);
  resize: none;
  border: 0;
  outline: 0;
  background: #FFF9D6;
  color: var(--text);
  padding: 6px;
  font: var(--fs-ui) / 1.45 var(--mono);
}

/* ── PROFILER / MAZE ───────────────────────────────────────────── */
.desktop-window-profiler .desktop-body { height: calc(100% - 32px); padding: 0; overflow: hidden; }
.profiler-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 0;
  padding: 0;
}

.profiler-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 2px solid var(--win-border);
  background: #79CEC7;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.profiler-head div { font-size: 24px; }
.profiler-head span { color: var(--text-dim); font-size: var(--fs-small); }

.profiler-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.profiler-meter {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--win-border);
  background: #FFF4D7;
  box-shadow: inset -1px -1px 0 var(--btn-sh), inset 1px 1px 0 var(--btn-hi);
}

.profiler-meter div { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.profiler-meter i {
  display: block;
  height: 18px;
  border: 1px solid var(--win-border);
  background:
    linear-gradient(90deg, var(--chapter-primary) 0 var(--meter), transparent var(--meter)),
    var(--btn-face);
}
.profiler-meter code { color: var(--text-dim); font: var(--fs-small) / 1 var(--mono); }

.profiler-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--win-border);
  border-bottom: 2px solid var(--win-border);
}

.profiler-process div {
  display: grid;
  gap: 5px;
  padding: 10px 14px;
  border-right: 1px solid rgba(33,25,14,0.28);
  background: var(--btn-face);
}

.profiler-process span { color: var(--text-dim); font-size: 10px; letter-spacing: 0.10em; }
.profiler-process b { font-size: 18px; }
.profiler-log {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 14px 18px;
  overflow: auto;
  white-space: pre;
  font-size: var(--fs-ui);
  background: var(--win-bg);
}

.maze-panel   { text-align: left; }
.maze-canvas  { display: block; margin: 0; background: var(--win-bg); border: 1px solid var(--win-border); }
.maze-message { min-height: 1.4em; color: var(--text); text-align: center; font-size: var(--fs-ui); }
.maze-footer  { color: var(--text); font-size: var(--fs-small); }

/* ── NEWS WINDOW ───────────────────────────────────────────────── */
.desktop-window-news { width: 620px; max-width: calc(100vw - 32px); height: 560px; }
.desktop-window-news .desktop-body { padding: 0; height: calc(100% - 28px); overflow: hidden; display: flex; flex-direction: column; }

.news-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(33,25,14,0.05) 1px, transparent 1px),
    var(--win-bg);
  background-size: 9px 100%, auto;
}

/* Masthead strip */
.news-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 4px double var(--text);
  padding: 12px 16px 8px;
  background: var(--win-bg);
  flex-shrink: 0;
}

.news-kicker {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.news-logo {
  color: var(--text);
  font-weight: 700;
  font-family: var(--ui-font);
  font-size: 54px;
  line-height: 0.9;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.news-issue {
  color: var(--text);
  background: var(--chapter-primary);
  border: 0;
  padding: 4px 8px;
  font-size: var(--fs-small);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: none;
  color: var(--chapter-secondary);
}

.news-subtitle {
  color: var(--text-dim);
  font-style: italic;
  font-size: var(--fs-small);
  padding: 0 16px 8px;
  border-bottom: 1px solid var(--win-border);
  flex-shrink: 0;
}

.news-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
}

.news-body {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 92px;
  gap: 16px;
  padding-top: 12px;
}

.news-figure { color: var(--text); text-align: center; }

.news-figure-image {
  width: 100%;
  height: 90px;
  border: 1px solid var(--win-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23DDD0B0'/%3E%3Crect width='4' height='4' fill='%234A3E2A' opacity='0.15'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%234A3E2A' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 8px 8px;
}

.news-figure span { display: block; margin-top: 6px; color: var(--text-dim); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }

.news-copy h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--ui-font);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--win-border);
  padding-bottom: 8px;
}

.news-meta {
  margin: -6px 0 12px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-columns {
  column-count: 2;
  column-gap: 18px;
  column-rule: 1px solid rgba(33,25,14,0.22);
}

.news-columns p {
  margin: 0;
  break-inside: avoid;
  white-space: pre-wrap;
  text-align: justify;
  font-size: var(--fs-ui);
  line-height: 1.65;
  color: var(--text);
}

.news-columns p + p { margin-top: 10px; }

.news-rail {
  border-left: 1px solid var(--win-border);
  padding-left: 10px;
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.news-rail div {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--win-border);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.news-rail p { margin: 0 0 10px; }

.news-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--win-border);
  padding: 8px 16px;
  flex-shrink: 0;
  font-size: var(--fs-small);
  background: var(--btn-face);
}

/* ── MAP WINDOW ────────────────────────────────────────────────── */
.map-panel {
  grid-template-rows: 1fr auto;
  height: 100%;
  min-height: 0;
  gap: 8px;
  padding: 0;
}

.map-canvas {
  height: 290px;
  min-height: 290px;
  background: var(--win-bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--win-border);
}

.map-panel .leaflet-tile,
.map-panel .leaflet-tile-pane { filter: grayscale(100%) brightness(0.55) contrast(1.3) sepia(0.2); }

.map-panel .leaflet-container { background: var(--win-bg); font: 9px / 1 var(--mono); }
.map-panel .leaflet-control-attribution { background: var(--win-bg); color: var(--text-dim); font-size: 7px; opacity: 0.5; }
.map-panel .leaflet-control-attribution a { color: var(--text-dim); }

.map-footer     { padding: 0 2px; font-size: var(--fs-small); }
.map-coordinates{ margin-left: auto; color: var(--text-dim); font-size: var(--fs-small); }

.map-city-label {
  color: var(--text);
  background: transparent;
  border: 0;
  font: 9px / 1 var(--mono);
  white-space: nowrap;
}

/* ── README / TRASH / EYU READER ───────────────────────────────── */
.readme-file {
  height: 430px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: var(--fs-ui);
  line-height: 1.6;
  padding: 10px;
  background: var(--win-bg);
  color: var(--text);
  border: 1px solid var(--win-border);
}

.trash-doc {
  max-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 10px;
  background: var(--win-bg);
  color: var(--text);
  border: 1px solid var(--win-border);
  font-size: var(--fs-ui);
}

.desktop-window-wide .desktop-body,
.desktop-window-eyu .desktop-body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  height: calc(100% - 28px);
  padding: 0;
}

.desktop-crt {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0A0A0A;
  border: 2px solid var(--win-border);
  overflow: hidden;
  margin: 0;
}

.desktop-crt video { width: 100%; height: 100%; display: block; object-fit: cover; }

.black-signal { display: grid; place-items: center; color: var(--text); background: var(--win-bg); }
.black-signal pre { position: absolute; left: 12px; top: 12px; color: var(--text-dim); font-size: var(--fs-small); }
.black-signal .center-line { color: var(--text); white-space: pre; font-size: var(--fs-ui); }

.desktop-signal,
.desktop-text-slot { color: var(--text); white-space: pre-wrap; font-size: var(--fs-ui); }

.desktop-text-slot { min-height: 2.8em; padding-top: 4px; }

.trash-empty-file {
  width: 100%;
  min-height: 96px;
  resize: none;
  border: 1px solid var(--win-border);
  outline: 0;
  background: var(--win-bg);
  color: var(--text);
  font: inherit;
  padding: 8px;
}

.trash-status { min-height: 1.5em; color: var(--text-dim); padding-top: 7px; font-size: var(--fs-small); }
.trash-list button { display: block; width: 100%; margin-bottom: 7px; }

/* ── EYU READER ────────────────────────────────────────────────── */
.eyu-shell { display: flex; width: 100%; height: 100%; min-height: 0; background: var(--win-bg); }

.eyu-list {
  flex: 0 0 170px;
  width: 170px;
  padding: 8px;
  background: var(--btn-face);
  border-right: 1px solid var(--win-border);
  overflow-y: auto;
}

.eyu-list button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 5px;
  border: 0;
  border-bottom: 1px solid var(--win-border);
  background: transparent;
  box-shadow: none;
  color: var(--text);
  text-align: left;
  white-space: normal;
  font: inherit;
}

.eyu-list button.is-active { background: var(--chapter-primary); color: var(--chapter-secondary); }
.eyu-list button:hover:not(.is-active) { background: rgba(74,62,42,0.10); }

.eyu-list-date  { display: block; margin-bottom: 3px; opacity: 0.45; font-size: 9px; }
.eyu-list-title { display: block; overflow-wrap: anywhere; font-size: var(--fs-small); }

.eyu-content { flex: 1 1 auto; min-width: 0; padding: 12px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }

.eyu-header { margin-bottom: 1rem; border-bottom: 1px solid var(--win-border); }
.eyu-title  { font-weight: 600; font-size: var(--fs-heading); line-height: 1.5; color: var(--text); }
.eyu-meta   { margin-top: 0.5rem; font-size: 9px; opacity: 0.5; color: var(--text); }
.eyu-footer,
.eyu-comment{ margin-top: 1rem; font-size: 9px; opacity: 0.5; color: var(--text); }
.eyu-section{ margin-bottom: 20px; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }
.eyu-redact { width: 100%; background: var(--text); }
.eyu-strike { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ── GAZETTEER ─────────────────────────────────────────────────── */
#gazetteer-db-button { margin-top: 8px; }
#gazetteer-db-button.is-open { background: var(--chapter-primary); color: var(--chapter-secondary); }

#gazetteer-window {
  position: fixed;
  left: calc(var(--nav-w) + 10px);
  top: calc(var(--chrome-h) + 10px);
  width: 580px;
  height: 560px;
  min-width: 400px;
  min-height: 360px;
  z-index: 58;
  display: none;
  resize: both;
  overflow: hidden;
  background: var(--win-bg);
  color: var(--text);
  font: var(--fs-small) / 1.5 var(--mono);
  pointer-events: auto;
  border: 2px solid var(--win-border);
  box-shadow: 4px 4px 0 rgba(10,10,10,0.4);
}

#gazetteer-window.is-open { display: block; }

.gazetteer-frame { height: 100%; display: grid; grid-template-rows: 28px 1fr; min-height: 0; }
.gazetteer-ascii,
.gazetteer-footer-ascii { display: none; }

.gazetteer-titlebar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  color: var(--chapter-secondary);
  background: var(--chapter-primary);
  cursor: move;
  user-select: none;
  text-transform: uppercase;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  transition: background 0.3s ease;
}

.gazetteer-close {
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.15);
  color: var(--chapter-secondary);
  padding: 0 5px;
  box-shadow: none;
  font-size: 12px;
}

.gazetteer-body {
  display: grid;
  grid-template-columns: 165px minmax(240px, 1fr);
  min-height: 0;
  border-top: 1px solid var(--win-border);
}

.gazetteer-left,
.gazetteer-right { min-height: 0; min-width: 0; }

.gazetteer-left {
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto auto;
  gap: 8px;
  padding: 8px;
  background: var(--btn-face);
  border-right: 1px solid var(--win-border);
}

.gazetteer-search-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px;
  color: var(--text);
}

.gazetteer-search-row input,
.gazetteer-browse select {
  width: 100%;
  min-width: 0;
  appearance: none;
  border: 1px solid var(--win-border);
  background: var(--win-bg);
  color: var(--text);
  font: inherit;
  padding: 4px 5px;
  outline: none;
}

.gazetteer-search-row input:focus,
.gazetteer-browse select:focus { background: var(--chapter-primary); color: var(--chapter-secondary); }

.gazetteer-results { overflow-y: auto; display: grid; align-content: start; gap: 5px; padding-right: 2px; }

.gazetteer-result.is-selected,
.gazetteer-unverified.is-active { background: var(--chapter-primary); color: var(--chapter-secondary); box-shadow: none; }

.gazetteer-result-key { display: block; font-size: 9px; margin-top: 2px; overflow-wrap: anywhere; color: var(--text-dim); }
.gazetteer-sparse-dot { color: var(--text-dim); margin-right: 4px; }

.gazetteer-browse { display: grid; gap: 6px; }
.gazetteer-browse label,
.gazetteer-unverified { color: var(--text); }

.gazetteer-right { overflow-y: auto; padding: 12px; }

.gazetteer-entry-header {
  color: var(--text);
  font-size: var(--fs-ui);
  text-transform: uppercase;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--win-border);
  letter-spacing: 0.06em;
}

.gazetteer-sparse-banner {
  color: var(--text);
  background: var(--btn-face);
  border: 1px solid var(--win-border);
  padding: 6px 8px;
  margin-bottom: 12px;
  font-size: var(--fs-small);
}

.gazetteer-section-title { color: var(--text-dim); margin: 16px 0 8px; white-space: pre; font-size: var(--fs-small); }

.gazetteer-row { display: grid; grid-template-columns: 104px 1fr; gap: 9px; padding: 2px 0; }
.gazetteer-row-label { color: var(--text-dim); text-transform: uppercase; font-size: var(--fs-small); }
.gazetteer-row-value,
.gazetteer-env-value { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-ui); }

.gazetteer-clip-list { display: grid; gap: 5px; }

.gazetteer-note { color: var(--text); white-space: pre-wrap; line-height: 1.6; font-size: var(--fs-ui); }
.gazetteer-term { text-decoration: underline; text-underline-offset: 3px; }

#gazetteer-tooltip {
  position: fixed;
  z-index: 59;
  display: none;
  width: 240px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--win-bg);
  font: var(--fs-small) / 1.5 var(--mono);
  pointer-events: none;
  border: 1px solid var(--win-border);
  box-shadow: 2px 2px 0 rgba(10,10,10,0.3);
}

#gazetteer-tooltip.is-active { display: block; }
.gazetteer-tooltip-coords { color: var(--text-dim); margin-bottom: 6px; font-size: 9px; }
.gazetteer-tooltip-note { white-space: pre-wrap; font-size: var(--fs-small); }

/* ── CH03 STYLED TEXT BOXES ────────────────────────────────────── */
.chapter-stage[data-mode="ch04"] .ch03-box {
  left: calc(var(--nav-w) + 520px) !important;
  right: 28px !important;
  width: auto !important;
  max-width: calc(100vw - var(--nav-w) - 560px) !important;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ch03-primary);
  font-size: 18px;
  line-height: 1.48;
  box-shadow: none;
  text-shadow: none;
}

.chapter-stage[data-mode="ch04"] .ch03-box .box-label { display: none; }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root {
    --nav-w:    0px;
    --chrome-h: 44px;
    --dock-h:   88px;
  }

  .mac-menubar {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 0 10px;
  }

  .mac-menu-items,
  .mac-status-icons,
  .chrome-bottom-right { display: none; }

  .chrome-top-right {
    justify-self: start;
    font-size: 15px;
  }

  .mac-menu-right { justify-content: flex-end; }

  .chapter-nav {
    display: none;
  }

  .chrome-bottom-left {
    font-size: 12px;
  }

  .data-panel {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(var(--dock-h) + 8px);
    transform: translateX(-50%);
    width: min(320px, 84vw);
  }

  .crt-shell {
    left: 50%;
    top: calc(var(--chrome-h) + (100vh - var(--chrome-h) - var(--dock-h)) / 2);
    width: min(340px, 80vw);
    transform: translate(-50%, -50%);
  }

  .text-slot,
  .boxed-text { max-width: 72vw; width: 72vw; }
  .text-slot-left { display: none; }

  .ch00-boot-log {
    width: calc(100vw - 28px);
    max-height: 44vh;
  }

  .ch00-monologue {
    left: 20px;
    top: 15vh;
    width: calc(100vw - 40px);
    font-size: 22px;
  }

  .ch00-location-panel {
    right: 20px;
    top: auto;
    bottom: 26vh;
    width: calc(100vw - 40px);
  }

  .ch00-center-viz {
    left: 50%;
    top: 47%;
    width: min(330px, calc(100vw - 48px));
    height: 190px;
  }

  .ch00-viz-bars { height: 128px; }
  .ch00-viz-pie { width: 132px; height: 132px; }
  .ch00-viz-pie span { height: 148px; }
  .ch00-viz-knot { height: 142px; }

  .ch00-instrument-panel {
    right: 20px;
    bottom: 8vh;
    width: calc(100vw - 40px);
    min-height: 170px;
  }

  .ch00-chart { height: 68px; }
  .ch00-clock { width: 44px; height: 44px; }

  .ch00-shadow-note {
    left: 20px;
    top: auto;
    bottom: 24vh;
    width: calc(100vw - 40px);
  }

  .chapter-stage[data-mode="after"] .chapter-after-page {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 24px;
    overflow-y: auto;
  }

  .after-file pre {
    min-height: 180px;
    font-size: 13px;
  }

  .altitude-route { left: 4px; width: 56vw; }
  .altitude-scale { left: 2px; }

  .fragment-ch00 { left: 4vw; }

  #desktop-object-layer { display: none; }
}

@media print {
  body { background: #FFFFFF; color: #000000; }
  #system-chrome, .desktop-window, .data-panel,
  .text-slot, .boxed-text, .beishang-fragment {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}