@font-face {
  font-family: RoomPixel;
  src: url("/assets/fonts/room-subset.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family:
    ui-monospace, "SFMono-Regular", "PingFang SC", "Microsoft YaHei", monospace;
  color: #e7e2ce;
  background: #141b2d;
  font-synthesis: none;
  --ink: #e7e2ce;
  --muted: #8b99ad;
  --paper: #1e2940;
  --green: #8fe0c3;
  --line: #3c4b63;
  --pixel-shadow: 4px 4px 0 #0c1120;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  touch-action: manipulation;
}
a {
  color: inherit;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #efba70;
  outline-offset: 5px;
}
button:disabled {
  cursor: default;
  opacity: 0.5;
}
[hidden] {
  display: none !important;
}
.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
svg {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex-shrink: 0;
}
.eyebrow {
  font:
    10px/1.5 ui-monospace,
    monospace;
  letter-spacing: 0.16em;
}
/* The game world is one contained canvas: art and click targets share coordinates. */
.room {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: #141b2d;
  isolation: isolate;
}
.room-stage {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(1010px, 92vw, 132svh);
  aspect-ratio: 3/2;
  transform: translate(-50%, -50%);
  transform-origin: 62% 42%;
  transition:
    transform 0.55s steps(10),
    filter 0.45s steps(5);
}
.room-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  object-fit: contain;
  transition: filter 0.4s steps(4);
}
.room-vignette { position:absolute; inset:0; pointer-events:none; z-index:1; border:12px solid #101726; }
.lamp-glow { display:none; }
.room-header {
  position: absolute;
  z-index: 3;
  left: 36px;
  right: 36px;
  top: max(30px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #dce4dc;
}
.wordmark {
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.brand-dot {
  height: 8px;
  width: 8px;
  background: #8fe0c3;
  box-shadow: 0 0 0 3px #8fe0c314;
}
.brand-com {
  color: #586a83;
  margin-left: 7px;
}
.small-caption {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #71839c;
}
.room-heading {
  position: absolute;
  top: 12%;
  left: 7%;
  z-index: 2;
  pointer-events: none;
}
.room-heading .eyebrow {
  font-size: 9px;
  color: #72839a;
}
.room-heading h1 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 13px 0 12px;
}
.room-heading p {
  font-size: 11px;
  color: #8b9ab0;
  letter-spacing: 0.03em;
}
.object-hotspot {
  position: absolute;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  z-index: 2;
}
.monitor-hotspot {
  left: 61%;
  top: 27%;
  width: 13%;
  height: 20%;
}
.lamp-hotspot {
  left: 72%;
  top: 32%;
  width: 8%;
  height: 17%;
}
.note-hotspot {
  left: 35%;
  top: 64%;
  width: 13%;
  height: 14%;
}
.window-hotspot {
  left: 16%;
  top: 16%;
  width: 22%;
  height: 24%;
}
.object-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #b3dfcf;
  font: bold 17px/1 monospace;
  background: #152339e0;
  border: 2px solid #759990;
  box-shadow: 2px 2px 0 #101622;
  transform: translateY(-16px);
  transition:
    color 0.15s,
    background 0.15s;
}
.monitor-hotspot .object-marker {
  background: #edb16a;
  color: #392d28;
  border-color: #ffdda2;
  box-shadow: 3px 3px 0 #473b38;
  animation: marker-bob 1.5s steps(2) infinite;
}
.object-hotspot:hover .object-marker,
.object-hotspot:focus-visible .object-marker {
  background: #c2ecd4;
  color: #1d2c33;
  animation: none;
}
.object-label {
  position: absolute;
  bottom: calc(50% + 31px);
  white-space: nowrap;
  background: #1a263b;
  border: 2px solid #a9c7c0;
  box-shadow: var(--pixel-shadow);
  padding: 9px 12px;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
}
.object-label kbd {
  margin-left: 9px;
  background: #33463f;
  color: #b4dfc8;
  font-size: 9px;
  padding: 3px;
}
.object-hotspot:hover .object-label,
.object-hotspot:focus-visible .object-label {
  opacity: 1;
  transform: none;
}
@keyframes marker-bob {
  50% {
    translate: 0 -5px;
  }
}
.game-dialogue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 105px;
  transform: translateX(-50%);
  width: min(590px, calc(100% - 64px));
  min-height: 104px;
  border: 2px solid #87958d;
  background: #192238;
  box-shadow:
    0 0 0 4px #111827,
    inset 0 0 0 3px #293349,
    5px 5px 0 4px #0c1321;
  display: flex;
  align-items: center;
  gap: 19px;
  padding: 20px 25px;
}
.dialogue-portrait {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 2px solid #53615f;
  background: #263c40;
  color: #b9e6c9;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 24px monospace;
}
.dialogue-portrait span {
  animation: blink 1.2s steps(1) infinite;
}
.dialogue-speaker {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #e5b777;
}
.dialogue-speaker > span {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #7e8ba1;
}
.game-dialogue p {
  font-size: 12px;
  line-height: 1.9;
  margin: 8px 0 0;
  color: #c8d0d7;
  min-height: 44px;
}
.dialogue-next {
  position: absolute;
  right: 17px;
  bottom: 15px;
  color: #8d9caa;
  font-size: 9px;
  animation: blink 1.8s steps(1) infinite;
}
.room-footer {
  position: absolute;
  z-index: 3;
  left: 36px;
  right: 36px;
  bottom: max(30px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #8d9bb1;
}
.room-status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
}
.room-status > span:first-child {
  width: 5px;
  height: 5px;
  background: #89baa6;
}
.room-controls {
  display: flex;
  gap: 4px;
}
.room-controls button {
  background: #1c283d;
  border: 1px solid #35435b;
  color: #a9b6c3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: 10px;
  min-height: 38px;
  box-shadow: 2px 2px 0 #0b1221;
}
.room-controls button:hover {
  background: #304357;
  color: #d8e3d6;
}
.room-controls button[aria-pressed="true"] {
  border-color: #768d7e;
  color: #bcdec2;
}
.room-controls svg {
  width: 15px;
  height: 15px;
}
.direct-entry {
  background: transparent;
  color: #c0cbbf;
  border-bottom: 1px dashed #5f7269;
  font-size: 11px;
  padding: 10px 0;
}
.direct-entry span {
  margin-left: 12px;
}
/* Pixel workstation: consistent square geometry, crisp edges and readable content. */
.computer {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  background: #17243a;
  isolation: isolate;
  animation: none;
}
.desktop-wallpaper {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: #17283b;
  background-image:
    linear-gradient(#7ab09505 1px, transparent 1px),
    linear-gradient(90deg, #7ab09505 1px, transparent 1px);
  background-size: 24px 24px;
}
.wallpaper-orbit {
  display: none;
}
.menubar {
  height: 48px;
  border-bottom: 2px solid #5d746f;
  background: #253b43;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 20px;
  box-shadow: 0 3px 0 #0f1927;
}
.leave-button {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  padding: 10px 0;
  font-size: 11px;
  color: #b5d7c5;
}
.leave-button svg {
  width: 15px;
  height: 15px;
}
.desktop-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #d5e5d2;
}
.os-version {
  font-size: 9px;
  color: #7d9f96;
  margin-left: 8px;
}
.menubar time {
  font:
    10px ui-monospace,
    monospace;
  min-width: 120px;
  text-align: right;
  color: #98b6ad;
}
.desktop-greeting {
  position: absolute;
  top: 14%;
  left: 10%;
  pointer-events: none;
}
.desktop-greeting .eyebrow {
  font-size: 10px;
  color: #678b96;
}
.desktop-greeting h2 {
  font-weight: 400;
  font-size: 30px;
  margin: 20px 0 13px;
  color: #c1decd;
  letter-spacing: 0.12em;
}
.terminal-cursor {
  color: #e4b67b;
  animation: blink 1s steps(1) infinite;
}
.desktop-greeting p {
  font-size: 12px;
  color: #7e9caa;
  line-height: 1.8;
}
.desktop-files {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 41%;
  display: grid;
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap: 14px;
  align-items: start;
}
.desktop-file {
  min-height: 152px;
  padding: 19px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: transparent;
  border: 1px solid transparent;
  position: relative;
}
.desktop-file:hover {
  background: #a3d7c00b;
  border: 1px dashed #71998f;
}
.desktop-file > span:not(.file-icon) {
  font-size: 11px;
  line-height: 1.7;
  word-break: break-word;
  max-width: 165px;
  text-align: center;
  color: #acbdc7;
}
.desktop-file small {
  font:
    9px ui-monospace,
    monospace;
  color: #597f91;
  margin-top: -6px;
}
.desktop-file b {
  font-weight: 400;
}
.file-icon {
  width: 48px;
  height: 48px;
  filter: drop-shadow(3px 3px 0 #071223);
  image-rendering: pixelated;
}
.x-tile {
  background: #89bcab;
  border: 3px solid #b0d4b9;
  outline: 2px solid #345d57;
  box-shadow: inset -4px -4px 0 #639c92;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #203f43;
}
.x-tile svg {
  width: 24px;
  height: 24px;
}
.twitter-file {
  background: #78b8960a;
  border: 1px dashed #426664;
}
.twitter-file > span:not(.file-icon) {
  color: #d1dbc4;
}
.folder-olive {
  color: #a9bc89;
}
.folder-rust {
  color: #cb9567;
}
.folder-slate {
  color: #7fa2ba;
}
.idle-icon {
  font: bold 26px/48px monospace;
  color: #afc0d2;
  text-align: center;
}
.desktop-corner {
  position: absolute;
  bottom: 18%;
  right: 10%;
  font:
    10px/2 ui-monospace,
    monospace;
  color: #507681;
  letter-spacing: 0.12em;
}
.desktop-corner span {
  color: #3e6070;
}
.dock {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  background: #263a47;
  border: 2px solid #607d7b;
  box-shadow: 4px 4px 0 #0d1728;
  z-index: 300;
}
.dock button {
  height: 40px;
  min-width: 40px;
  background: transparent;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  font-size: 10px;
  color: #bbccc7;
  border: 1px solid transparent;
}
.dock button:hover,
.dock button.active {
  background: #3d5a5e;
  border-color: #759689;
}
.dock-home svg {
  width: 23px;
  color: #adb985;
}
.dock-twitter svg {
  width: 17px;
}
.dock-divider {
  width: 1px;
  height: 25px;
  background: #516a73;
}
.dock-windows {
  display: flex;
  gap: 4px;
  overflow: auto;
  max-width: min(55vw, 480px);
}
.dock-windows button {
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
}
.dock-windows button:after {
  content: "";
  width: 3px;
  height: 3px;
  background: #bccea4;
  position: absolute;
  bottom: 2px;
}
.windows {
  position: absolute;
  inset: 48px 0 88px;
  pointer-events: none;
}
.app-window {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: 8%;
  width: min(600px, calc(100% - 40px));
  height: min(510px, 90%);
  min-height: 260px;
  transform: translateX(-50%);
  background: #e3e1c9;
  color: #263c42;
  border: 3px solid #70827a;
  box-shadow:
    7px 7px 0 #0b172ab3,
    inset 0 0 0 1px #fff7;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: none;
}
.app-window.inactive {
  filter: saturate(0.6);
}
.window-bar {
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  background: #436363;
  color: #dbe4cd;
  border-bottom: 3px solid #304c51;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.window-bar:active {
  cursor: grabbing;
}
.window-controls {
  display: flex;
  gap: 6px;
}
.window-controls button {
  width: 25px;
  height: 25px;
  border: 1px solid #8ea99a;
  background: #35565b;
  box-shadow: 2px 2px 0 #243e43;
  font: bold 17px monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8dfbb;
}
.window-controls button:hover {
  background: #78907b;
  color: #142d36;
}
.window-title {
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window-mark {
  width: 50px;
  text-align: right;
  font:
    9px ui-monospace,
    monospace;
  color: #98b1a2;
}
.window-body {
  overflow: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}
.window-path {
  padding: 12px 22px;
  font:
    10px ui-monospace,
    monospace;
  color: #758576;
  border-bottom: 1px dashed #b4bba5;
}
.document {
  padding: 26px 34px;
}
.document-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font:
    10px ui-monospace,
    monospace;
  color: #89917a;
}
.document h3 {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin: 23px 0 20px;
}
.document p {
  font-size: 13px;
  line-height: 2.1;
  color: #5a6c61;
  white-space: pre-line;
}
.document .signature {
  font: 12px monospace;
  color: #84907a;
  margin-top: 24px;
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 27px;
}
.social-link {
  padding: 12px 16px;
  text-decoration: none;
  background: #d0d7bf;
  border: 2px solid #95a48c;
  box-shadow: 3px 3px 0 #afbaa2;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.social-link.primary {
  background: #375951;
  color: #eef0d0;
  border-color: #577965;
  box-shadow: 3px 3px 0 #aeb79e;
}
.social-link:hover {
  background: #bbd3b8;
  color: #183d3b;
  transform: translate(-1px, -1px);
}
.social-link svg {
  height: 14px;
  width: 14px;
}
.profile-pane {
  padding: 30px 34px;
}
.profile-monogram {
  font: 32px monospace;
  color: #687d61;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 54px;
  background: #cfd5b8;
  border: 2px solid #a7b092;
  box-shadow: 3px 3px 0 #bac4a7;
}
.profile-pane h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin: 24px 0 12px;
}
.profile-pane p {
  font-size: 12px;
  line-height: 2;
  color: #6c7e6d;
  white-space: pre-line;
}
.profile-handle {
  font:
    11px ui-monospace,
    monospace;
  color: #82907c;
}
.profile-footer {
  border-top: 1px dashed #a8b69b;
  margin-top: 30px;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #8a947e;
}
.file-list {
  padding: 12px;
}
.file-list button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 17px 12px;
  background: transparent;
  text-align: left;
  border-bottom: 1px dashed #bdc5ac;
  color: #3f5b52;
}
.file-list button:hover {
  background: #c9d3b8;
}
.file-list svg {
  width: 33px;
  height: 38px;
}
.file-list strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
}
.file-list small {
  font-size: 10px;
  color: #819174;
}
.file-list .list-arrow {
  margin-left: auto;
  color: #859879;
}
.file-back {
  background: #d3d9bf;
  font-size: 11px;
  border-bottom: 1px solid #b5c0a6;
  padding: 12px 22px;
  width: 100%;
  text-align: left;
  color: #5c7767;
}
/* The park is an unhurried game viewport; keep the complete map on mobile. */
.app-window[data-id="idle"] { width:min(850px,calc(100% - 40px));height:min(680px,96%); }
.app-window[data-id="idle"] .window-body { background:#233c3b;display:flex; }
.park-app { width:100%;min-height:100%;display:flex;flex-direction:column;background:#e1dec4;color:#35554d; }
.park-picture { position:relative;flex:1;min-height:120px;display:flex;align-items:center;justify-content:center;background:#213a36;overflow:hidden; }
.park-canvas { display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:contain;image-rendering:pixelated; }
.park-loading { position:absolute;inset:0;display:grid;place-content:center;background:#233c3bea;color:#e4dfbd;font-size:12px;padding:24px;text-align:center; }
.park-loading[hidden] { display:none; }
.park-toolbar,.park-sound { display:flex;align-items:center;gap:14px;padding:12px 16px;flex-shrink:0; }
.park-toolbar { justify-content:space-between;border-top:3px solid #415c4c; }
.park-caption { display:flex;align-items:center;gap:8px;font-size:12px; }
.park-dot { width:5px;height:5px;background:#698c68; }
.park-toolbar button,.park-sound button { font-size:11px;background:transparent;color:#35554d;min-height:32px;white-space:nowrap; }
.park-toolbar button:hover,.park-sound button:hover { color:#192f32;text-decoration:underline;text-underline-offset:4px; }
.park-toolbar button:disabled { opacity:.5;cursor:wait; }
.park-sound { padding-top:0;gap:18px;flex-wrap:wrap; }
.park-sound label { display:flex;align-items:center;gap:8px;font-size:10px; }
.park-sound input { width:70px;accent-color:#4e7060; }
.park-sound button[aria-pressed="true"] { color:#875c37; }
@media(max-width:600px) {
  .app-window[data-id="idle"] { width:100%;height:auto;max-height:100%;top:50%!important;transform:translateY(-50%)!important; }
  .app-window[data-id="idle"] .window-body { flex:0 1 auto; }
  .park-app { min-height:0; }
  .park-picture { flex:none;aspect-ratio:3/2;min-height:0; }
  .park-toolbar { gap:8px;padding:10px; }
  .park-caption { font-size:11px; }
  .park-sound { gap:8px 14px;padding:0 10px 10px; }
  .park-sound button { min-height:40px; }
}
.paper-dialog {
  border: 3px solid #7d9e90;
  max-width: calc(100% - 44px);
  width: 420px;
  padding: 35px;
  background: #1e3445;
  color: #c5d9c3;
  box-shadow:
    7px 7px 0 #0e1829,
    inset 0 0 0 3px #2b4753;
}
.paper-dialog::backdrop {
  background: #0b1321c9;
}
.paper-dialog p {
  font-size: 15px;
  line-height: 2.1;
  margin: 25px 0;
}
.paper-close {
  position: absolute;
  right: 12px;
  top: 10px;
  background: #38575f;
  border: 1px solid #78968b;
  width: 30px;
  height: 30px;
  font-size: 21px;
  color: #c4dbc1;
}
.note-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #d9b783;
}
.note-signature {
  display: block;
  text-align: right;
  margin-top: 20px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #74988f;
}
.text-button {
  background: #3d5d61;
  border: 1px solid #85a18d;
  padding: 9px 13px;
  font-size: 11px;
  box-shadow: 2px 2px 0 #0d202e;
}
#note-back {
  font-size: 12px;
  color: #8faa9e;
}
.noscript {
  position: fixed;
  bottom: 0;
  background: #16293e;
  padding: 20px;
  z-index: 1000;
}
#toast {
  position: fixed;
  z-index: 1000;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, 10px);
  opacity: 0;
  pointer-events: none;
  background: #29494d;
  color: #dbe4c9;
  border: 2px solid #90a885;
  padding: 12px 18px;
  font-size: 12px;
  box-shadow: var(--pixel-shadow);
  transition: 0.15s steps(3);
  max-width: 90vw;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes desktop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes window-in {
  from {
    opacity: 0;
    translate: 0 5px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes light-drift {
  to {
    translate: 70px 30px;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@media (min-width: 1500px) {
  .room-stage {
    width: min(1200px, 135svh);
  }
  .room-heading {
    left: 12%;
    top: 15%;
  }
}
@media (max-width: 900px) {
  .room-heading {
    top: 12%;
    left: 6%;
  }
  .room-heading h1 {
    font-size: 22px;
  }
  .room-status {
    display: none;
  }
  .room-stage {
    width: 110vw;
    top: 47%;
  }
  .desktop-files {
    grid-template-columns: repeat(3, 1fr);
    top: 35%;
    left: 10%;
    right: 10%;
    gap: 8px;
  }
  .desktop-file {
    min-height: 132px;
  }
  .desktop-corner {
    display: none;
  }
  .desktop-greeting {
    top: 11%;
    left: 13%;
  }
}
@media (max-width: 600px) {
  .room {
    min-height: 0;
  }
  .room-vignette {
    border-width: 7px;
  }
  .room-header {
    left: 22px;
    right: 22px;
    top: max(26px, env(safe-area-inset-top));
  }
  .wordmark {
    font-size: 11px;
    gap: 8px;
    letter-spacing: 0.08em;
  }
  .small-caption {
    font-size: 8px;
    letter-spacing: 0.06em;
  }
  .brand-com {
    display: none;
  }
  .room-heading {
    left: 26px;
    top: 13%;
    right: 20px;
  }
  .room-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 0.08em;
  }
  .room-heading h1 {
    font-size: 24px;
    margin: 13px 0 10px;
  }
  .room-heading p {
    font-size: 10px;
  }
  .room-stage {
    width: 115vw;
    top: 47%;
    transform: translate(-50%, -50%);
  }
  .object-marker {
    width: 20px;
    height: 20px;
    font-size: 15px;
    transform: translateY(-6px);
  }
  .object-label {
    display: none;
  }
  .game-dialogue {
    bottom: 126px;
    width: calc(100% - 48px);
    padding: 19px 17px;
    gap: 14px;
    min-height: 111px;
  }
  .dialogue-portrait {
    width: 42px;
    height: 46px;
    font-size: 21px;
  }
  .dialogue-speaker {
    font-size: 9px;
  }
  .game-dialogue p {
    font-size: 11px;
    min-height: 42px;
    line-height: 1.95;
  }
  .room-footer {
    left: 24px;
    right: 24px;
    bottom: max(36px, env(safe-area-inset-bottom));
    gap: 12px;
    align-items: center;
  }
  .room-controls {
    gap: 6px;
  }
  .room-controls button {
    padding: 9px;
    min-width: 39px;
    min-height: 39px;
  }
  .room-controls button span {
    display: none;
  }
  .room-controls svg {
    width: 17px;
    height: 17px;
  }
  .direct-entry {
    font-size: 11px;
    white-space: nowrap;
  }
  .direct-entry span {
    margin-left: 6px;
  }
  .menubar {
    padding: env(safe-area-inset-top) 16px 0;
    height: calc(49px + env(safe-area-inset-top));
    gap: 8px;
  }
  .desktop-title {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .os-version {
    display: none;
  }
  .menubar time {
    min-width: 0;
    font-size: 9px;
  }
  .leave-button {
    font-size: 10px;
    gap: 4px;
  }
  .desktop-greeting {
    left: 26px;
    top: 12%;
    right: 20px;
  }
  .desktop-greeting .eyebrow {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .desktop-greeting h2 {
    font-size: 27px;
    margin: 17px 0 10px;
  }
  .desktop-greeting p {
    font-size: 11px;
  }
  .desktop-files {
    left: 14px;
    right: 14px;
    top: 34%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .desktop-file {
    min-height: 138px;
    padding: 16px 4px;
    gap: 11px;
  }
  .desktop-file > span:not(.file-icon) {
    font-size: 10px;
  }
  .desktop-file small {
    font-size: 8px;
  }
  .file-icon {
    width: 42px;
    height: 42px;
  }
  .idle-icon {
    font-size: 24px;
    line-height: 42px;
  }
  .x-tile svg {
    width: 21px;
    height: 21px;
  }
  .desktop-file b {
    display: none;
  }
  .dock {
    bottom: max(20px, env(safe-area-inset-bottom));
    gap: 2px;
    max-width: calc(100% - 28px);
    padding: 4px;
  }
  .dock button {
    font-size: 10px;
    min-width: 36px;
    height: 39px;
    padding: 0 8px;
  }
  .dock-windows {
    max-width: 52vw;
  }
  .dock-windows button {
    max-width: 115px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .windows {
    inset: calc(49px + env(safe-area-inset-top)) 0 81px;
  }
  .app-window {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-width: 0 0 2px;
    box-shadow: none;
  }
  .app-window.inactive {
    display: none;
  }
  .window-bar {
    height: 49px;
    cursor: default;
    padding: 0 16px;
  }
  .window-title {
    font-size: 11px;
  }
  .window-controls button {
    width: 29px;
    height: 30px;
  }
  .window-mark {
    display: none;
  }
  .window-controls {
    order: 2;
  }
  .window-path {
    font-size: 10px;
    padding: 13px 22px;
  }
  .document {
    padding: 24px;
  }
  .document h3 {
    font-size: 23px;
  }
  .document p {
    font-size: 13px;
    line-height: 2.1;
  }
  .profile-pane {
    padding: 29px 24px;
  }
  .profile-pane h3 {
    font-size: 23px;
  }
  .window-body {
    padding-bottom: 15px;
  }
  .social-links {
    gap: 12px;
  }
  .social-link {
    font-size: 11px;
  }
  .paper-dialog {
    padding: 29px;
  }
  .paper-dialog p {
    font-size: 14px;
  }
}
@media (max-height: 720px) and (max-width: 600px) {
  .room {
    min-height: 0;
  }
  .room-heading {
    top: 12%;
  }
  .room-heading h1 {
    font-size: 21px;
  }
  .room-heading p {
    display: none;
  }
  .room-stage {
    top: 45%;
  }
  .game-dialogue {
    bottom: 99px;
    min-height: 96px;
    padding: 14px;
  }
  .room-footer {
    bottom: 27px;
  }
  .desktop-greeting {
    top: 12%;
  }
  .desktop-greeting h2 {
    font-size: 23px;
  }
  .desktop-files {
    top: 34%;
    gap: 1px;
  }
  .desktop-file {
    min-height: 113px;
    padding: 10px 4px;
  }
  .file-icon {
    height: 36px;
    width: 36px;
  }
  .dock {
    bottom: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .room.departing .room-stage {
    transform: translate(-50%, -50%);
  }
}

/* One local CJK pixel font for both languages, using its native 12px grid. */
:root {
  font-family: RoomPixel, ui-monospace, "PingFang SC", monospace;
  font-weight: 400;
}
.eyebrow,
.dialogue-portrait,
.object-marker,
.desktop-file small,
.menubar time,
.window-mark,
.document-meta,
.profile-handle,
.profile-monogram,
.profile-pane,
.document,
.idle-time,
.desktop-corner,
.window-path,
.document .signature,
.idle-icon {
  font-family: RoomPixel, monospace;
}
.room-heading h1,
.desktop-greeting h2 {
  font-size: 24px;
  font-weight: 400;
}
.room-heading .eyebrow,
.room-heading p,
.wordmark,
.small-caption,
.dialogue-speaker,
.dialogue-speaker > span,
.game-dialogue p,
.room-status,
.room-controls button,
.direct-entry,
.desktop-greeting .eyebrow,
.desktop-greeting p,
.leave-button,
.desktop-title,
.menubar time,
.desktop-file > span:not(.file-icon),
.desktop-file small,
.dock button,
.window-title,
.window-path,
.document-meta,
.profile-handle,
.profile-pane p,
.profile-footer,
.file-list strong,
.file-list small,
.file-back,
.social-link,
.text-button,
.note-label {
  font-size: 12px;
  font-weight: 400;
}
.profile-pane h3,
.document h3 {
  font-size: 24px;
  font-weight: 400;
}
.document p,
.paper-dialog p {
  font-size: 12px;
}
.dialogue-portrait {
  font-size: 24px;
  letter-spacing: 0;
}
.dialogue-portrait > span {
  display: none;
}
.desktop-title {
  letter-spacing: 0;
}
.window-controls button {
  font-family: RoomPixel, monospace;
  font-weight: 400;
  font-size: 24px;
}
.small-caption {
  letter-spacing: 0;
}
.game-dialogue p {
  line-height: 2;
}
.profile-pane p {
  line-height: 2;
}
.wordmark {
  letter-spacing: 0.06em;
}
@media (max-width: 600px) {
  .game-dialogue {
    gap: 12px;
  }
  .game-dialogue p {
    font-size: 12px;
    line-height: 1.9;
  }
  .room-heading .eyebrow {
    font-size: 10px;
  }
  .small-caption {
    font-size: 10px;
  }
  .desktop-file > span:not(.file-icon) {
    font-size: 12px;
  }
  .desktop-file small {
    font-size: 10px;
  }
  .room-header {
    left: 24px;
    right: 24px;
  }
  .menubar time {
    font-size: 10px;
  }
  .leave-button {
    font-size: 12px;
  }
  .social-link {
    font-size: 12px;
  }
  .dock-windows button {
    font-size: 12px;
  }
  .desktop-greeting h2 {
    font-size: 24px;
  }
  .profile-pane h3 {
    font-size: 24px;
  }
}
.dock-home,
.dock-twitter {
  flex-shrink: 0;
  white-space: nowrap;
}
.dock-windows {
  min-width: 0;
}
.dock-home span {
  white-space: nowrap;
}

/* Live room: input is immediate; only the tiny sky and cat sprites animate. */
.room-stage { transition: none; }
.room-art { transition:none; }
#window-world { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; image-rendering:pixelated; }
.room {--room-lit:var(--ambient-lit,1);--room-unlit:var(--ambient-unlit,.78);--room-brightness:var(--room-lit);--room-saturation:var(--ambient-saturation,1);--lamp-opacity:var(--ambient-lamp,.28);}
.room.lamp-off {--room-brightness:var(--room-unlit);--lamp-opacity:0;}
.room .room-art {filter:brightness(var(--room-brightness)) saturate(var(--room-saturation));}
.lamp-glow {display:block;position:absolute;inset:0;z-index:1;opacity:var(--lamp-opacity);background:radial-gradient(ellipse at 74% 43%,#ffd38980 0%,#e5a24340 9%,#dc933019 20%,transparent 34%);clip-path:polygon(7% 20%,41.5% 0%,51.5% 8.5%,57% 3%,93% 25%,94% 74%,51% 99%,7% 68%);pointer-events:none;}
.lamp-glow::after {content:"";position:absolute;left:74%;top:39%;width:3%;height:2%;background:#ffdc9e;box-shadow:0 0 10px 4px #ffc76e88;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);}
.room #cat-sprite,.room .cat-food img {filter:brightness(var(--room-brightness)) saturate(var(--room-saturation));}
.room-controls [data-action="lamp"][aria-pressed="true"] {border-color:#d3b46f;color:#ffe2a5;background:#453d2c;}
.room-controls [data-action="lamp"][aria-pressed="false"] {border-color:#596b88;color:#9baccc;background:#192337;}
#room-cat, #cat-sprite { position:absolute; left:0; top:0; width:8%; aspect-ratio:1; min-width:44px; min-height:44px; padding:0; background:none; will-change:transform; }
#cat-sprite { z-index:3; height:auto; image-rendering:pixelated; pointer-events:none; }
#room-cat { z-index:6; }
.room-stage:has(#room-cat:hover) #cat-sprite,.room-stage:has(#room-cat:focus-visible) #cat-sprite { filter:drop-shadow(0 0 2px #dce8ca); }
.world-dialog { font-family:RoomPixel,monospace; width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - 40px); overflow:auto; padding:30px; background:#1e2940; color:#dce1ce; border:3px solid #8b9b90; box-shadow:7px 7px 0 #0c1321; }
.world-dialog::backdrop { background:#0a122a66; }
.world-dialog h2 {font-weight:400;font-size:24px;line-height:1.5;}
.world-dialog p {font-size:12px;line-height:2;}
.dialog-close {position:absolute;right:8px;top:8px;background:transparent;min-width:44px;min-height:44px;font-size:24px;}
.world-button {background:#34534f;border:2px solid #78968a;box-shadow:3px 3px 0 #111c2b;padding:12px;min-height:44px;font-size:12px;}
.world-button:hover {background:#436a60;}
.cat-actions {display:flex;gap:12px;flex-wrap:wrap;}
.weather-source {display:block;font-size:12px;color:#9baabd;line-height:1.8;margin-top:20px;}
.weather-dialog h2 {margin:0 44px 14px 0;}
.weather-dialog #weather-summary {font-size:22px;margin:0 0 12px;}
.weather-dialog .weather-updated {color:#aebbc5;margin:0 0 20px;}
.weather-dialog #weather-feedback {color:#efd0a0;}
.weather-dialog .world-button:disabled {opacity:.6;cursor:wait;}
@media(max-height:580px) {
 .room-heading {top:18%;} .room-heading p,.room-heading .eyebrow {display:none;}
 .room-stage {width:min(75vw,105dvh);top:48%;}
 .game-dialogue {left:auto;right:24px;bottom:75px;transform:none;width:230px;min-height:0;padding:10px;}
 .dialogue-portrait {display:none;} .game-dialogue p {font-size:12px;min-height:0;line-height:1.5;}
 .room-header {top:16px;} .room-footer {bottom:16px;}
 .desktop-greeting {display:none;} .desktop-files {top:65px;grid-template-columns:repeat(6,minmax(0,1fr));left:3%;right:3%;}
 .desktop-file {min-height:100px;padding:8px 2px;} .app-window {min-height:0;}
}

/* Keep the floor and cat clear of the dialogue box. */
.room-stage {width:min(960px,92vw,112dvh);top:43%;}
.game-dialogue {bottom:87px;min-height:80px;padding:13px 22px;}
.game-dialogue p {min-height:26px;}
@media(max-width:600px) and (min-height:581px) {
 .room-stage {width:115vw;top:45%;}
 .game-dialogue {bottom:115px;min-height:96px;padding:16px;}
}
@media(max-height:580px) {
 .room-stage {width:min(75vw,105dvh);top:48%;}
 .game-dialogue {bottom:75px;min-height:0;padding:10px;}
}
/* Isolate the room silhouette so night tint never darkens a rectangular backdrop. */
.room-art {clip-path:polygon(7% 20%,41.5% 0%,51.5% 8.5%,57% 3%,93% 25%,94% 74%,51% 99%,7% 68%);}

/* The room stays a single cached image. These foreground masks provide real table occlusion. */
.table-foreground { position:absolute; inset:0; z-index:4; pointer-events:none; visibility:hidden; }
.room-stage[data-cat-under="true"] .table-foreground { visibility:visible; }
.table-foreground .table-top { clip-path:polygon(29.7% 67.5%,36.7% 63.8%,54.1% 73.7%,54.1% 75.9%,46.6% 80.5%,29.7% 70.3%); }
.table-foreground .table-leg-left { clip-path:polygon(30% 69%,32.1% 70.5%,32.1% 75.1%,30.2% 75.8%); }
.table-foreground .table-leg-front { clip-path:polygon(44.7% 77.8%,47% 79%,46.9% 85.7%,45.1% 85.2%); }
.table-foreground .table-leg-right { clip-path:polygon(51.6% 75.7%,53.4% 75.6%,53.3% 81.2%,51.7% 81.7%); }
#room-cat[data-unavailable="true"]::after { content:'猫'; color:#d9dbc3; font-size:14px; }

.room-stage > .object-hotspot { z-index:5; }

/* Room shell: reserve separate rows for the title, scene and dialogue. */
[hidden] { display:none!important; }
.room { height:auto;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto minmax(180px,1fr) auto auto;gap:12px;padding:max(22px,env(safe-area-inset-top)) clamp(16px,4vw,64px) max(18px,env(safe-area-inset-bottom));overflow:visible; }
.room-heading {position:relative;top:auto;left:auto;grid-row:1;z-index:6;max-width:100%;pointer-events:none;}
.room-heading h1 {font-size:clamp(16px,2vw,23px);line-height:1.5;margin:0 0 4px;}
.room-heading p {display:block;font-size:12px;margin:0;color:#b6c3c2;}
.room-stage {position:relative;grid-row:2;left:auto;top:auto;transform:none;justify-self:center;align-self:center;width:min(850px,100%,calc((100svh - 260px)*1.5));min-width:270px;aspect-ratio:3/2;}
.room-vignette {pointer-events:none;position:absolute;inset:0;}
.game-dialogue {position:relative;grid-row:3;justify-self:center;left:auto;right:auto;bottom:auto;transform:none;width:min(590px,100%);min-height:74px;padding:10px 16px;z-index:6;}
.dialogue-portrait {display:block;object-fit:cover;width:52px;height:52px;flex:0 0 52px;border:2px solid #7a9a8c;background:#e1d2b0;image-rendering:pixelated;}
.game-dialogue p {font-size:12px;min-height:0;line-height:1.7;margin:4px 0 0;}
.dialogue-speaker {font-size:11px;}
.room-footer {position:relative;grid-row:4;left:auto;right:auto;bottom:auto;display:flex;flex-wrap:wrap;gap:12px;z-index:6;align-items:center;justify-content:space-between;}
.room-controls {gap:8px;flex-wrap:wrap;justify-content:center;}
.room-controls button {font-size:11px;padding:8px;min-height:36px;}
.room-controls button span {display:inline;}
.room-status {font-size:10px;max-width:220px;}
.direct-entry {font-size:12px;min-height:40px;}
.computer {height:100vh;height:100dvh;}
.desktop-browser {position:absolute;inset:72px max(22px,8vw) 88px;overflow:auto;scrollbar-width:thin;padding:12px;}
.desktop-browser-header {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px;}
.desktop-browser h2 {font-size:24px;margin:8px 0;}
.desktop-browser-header button,.category-tabs button {border:1px solid #9dbda844;background:#254640;color:#d5e7d9;padding:10px 15px;font:inherit;font-size:12px;min-height:40px;cursor:pointer;}
.category-tabs {display:flex;gap:6px;border-bottom:1px solid #98b6a344;margin-bottom:20px;}
.category-tabs button {background:transparent;border:0;border-bottom:2px solid transparent;}
.category-tabs [aria-selected=true] {color:#e8d5a8;border-bottom-color:#e8d5a8;}
.desktop-intro {display:flex;gap:18px;align-items:center;margin-bottom:16px;max-width:650px;}
.desktop-intro img,.about-avatar {image-rendering:pixelated;border:2px solid #a4b99a;}
.desktop-intro strong {font-size:16px;}.desktop-intro p {font-size:12px;line-height:1.8;margin:7px 0;color:#b9c8bf;}.desktop-intro a {font-size:12px;color:#d9c693;}
.desktop-files {position:relative;top:auto;left:auto;right:auto;transform:none;display:grid;grid-template-columns:repeat(4,minmax(0,160px));gap:16px;margin:0;justify-content:start;}
.desktop-file {min-height:124px;padding:12px 8px;gap:12px;}.desktop-file span {font-size:12px;}.desktop-file .file-icon {width:48px;height:48px;color:#c7b873;}
.desktop-footnote {font-size:11px;color:#90a99c;margin-top:16px;}
.windows {inset:54px 0 78px;}
.app-window {max-height:100%;}.window-body {overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.work-card {padding:18px 0;border-top:1px dashed #80988c;margin-top:28px;}.work-card a {color:inherit;}.work-card h4 {font-size:19px;margin:10px 0;}
.wallet-address,.demo-key {display:block;overflow-wrap:anywhere;word-break:break-all;font-family:monospace;font-size:13px;line-height:1.8;user-select:all;margin:12px 0;}
.donation section {padding:12px 0;border-bottom:1px dashed #879c90;}.donation h4 {margin:12px 0;}.quiet-copy {font-size:12px!important;opacity:.75;line-height:1.8;}
.puzzle-grid {display:grid;grid-template-columns:repeat(3,54px);gap:8px;margin:24px auto;width:max-content;}.puzzle-grid button {width:54px;height:54px;background:#30473f;color:#788f80;border:3px solid #637c6c;font-size:26px;cursor:pointer;}.puzzle-grid .lit {background:#dbce91;color:#fff6c2;border-color:#a29563;box-shadow:0 0 10px #dcce9140;}
.puzzle details {margin:16px 0;}.puzzle small {font-size:11px;}.x-timeline {margin:24px 0;min-height:40px;}.x-timeline iframe {max-width:100%!important;}
.boot-status {position:fixed;bottom:12px;left:12px;right:12px;padding:15px;background:#e7dcc5;color:#24382f;z-index:1000;font-size:13px;}.boot-status a {color:inherit;}
button,a {touch-action:manipulation;}
@media (max-width:600px) {
 .room {gap:14px;padding:24px 14px max(18px,env(safe-area-inset-bottom));min-height:100svh;grid-template-rows:auto 1fr auto auto;}
 .room-heading {text-align:left;}.room-heading h1 {font-size:17px;}.room-heading p {font-size:11px;}
 .room-stage {width:100%;min-width:0;max-width:540px;}
 .game-dialogue {padding:10px;gap:10px;min-height:76px;}.game-dialogue p {font-size:11px;}.dialogue-portrait {width:48px;height:48px;flex-basis:48px;}
 .room-footer {gap:8px;}.room-status {order:3;width:100%;max-width:none;text-align:center;justify-content:center;}.room-controls {justify-content:flex-start;gap:3px;}.room-controls button {padding:7px;font-size:10px;}
 .desktop-browser {inset:58px 10px 78px;padding:14px 8px 20px;}.desktop-browser-header {margin-bottom:16px;}.desktop-browser h2 {font-size:19px;}.desktop-browser .eyebrow {font-size:9px;}
 .desktop-intro {gap:12px;margin-bottom:18px;}.desktop-intro strong {font-size:13px;}.desktop-intro p {font-size:11px;}
 .desktop-files {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 3px;}.desktop-file {min-height:116px;}.desktop-file span {font-size:11px;}
 .windows {inset:54px 8px 76px;}.app-window,.app-window[data-id="idle"] {left:0!important;top:0!important;transform:none!important;width:100%;height:100%;max-height:100%;min-height:0;}
 .app-window[data-id="idle"] .window-body {flex:1;}.park-app {min-height:0;}.park-picture {flex:1;aspect-ratio:auto;min-height:100px;}.park-canvas {width:100%;height:auto;max-height:100%;object-fit:contain;}
 .document,.profile-pane {padding:22px 18px;}.document h3,.profile-pane h3 {font-size:20px;}.profile-pane p {font-size:13px;}.window-title {font-size:10px;}.window-mark {display:none;}
 .menubar time {font-size:10px;}.desktop-title {display:none;}.park-sound {gap:8px;flex-wrap:wrap;}.park-sound button {font-size:10px;}
}
@media (max-height:500px) and (min-width:601px) {
 .room {grid-template-columns:1fr 280px;grid-template-rows:auto 1fr auto;gap:8px 14px;padding:12px 18px;}
 .room-heading {grid-row:1;grid-column:2;}.room-heading h1 {font-size:16px;}.room-heading p {display:block;font-size:10px;}
 .room-stage {grid-column:1;grid-row:1/4;width:min(100%,calc((100svh - 30px)*1.5));min-width:0;}
 .game-dialogue {grid-column:2;grid-row:2;width:100%;align-self:center;}.room-footer {grid-column:2;grid-row:3;}.room-controls {gap:0;}.dialogue-portrait {display:block;}
 .desktop-browser {inset:54px 20px 68px;}.desktop-intro {display:none;}.desktop-browser-header {margin-bottom:6px;}.desktop-browser h2 {font-size:16px;}.category-tabs {margin-bottom:8px;}.desktop-files {grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}.desktop-file {min-height:90px;}.desktop-footnote {display:none;}
}

.room-heading {margin:0;right:auto;}
.room-status {display:flex;}
.window-body .world-button,.window-body .text-button {color:#ecedd9;}
@media(max-width:600px) {
 .app-window[data-id="idle"] {height:auto;top:50%!important;transform:translateY(-50%)!important;}
 .app-window[data-id="idle"] .window-body {flex:0 1 auto;}
 .park-picture {flex:none;aspect-ratio:3/2;min-height:0;}
 .park-canvas {height:100%;}
}

/* Window chrome uses geometric icons, independent of pixel font baselines. */
.window-controls {order:2;flex-shrink:0;gap:8px;align-items:center;}
.window-controls button,.dialog-close,.dock .dock-close {display:grid;place-items:center;padding:0;line-height:1;}
.window-controls button {width:34px;height:34px;min-width:34px;min-height:34px;}
.window-controls svg,.dialog-close svg,.dock-close svg {display:block;width:18px;height:18px;}
.window-title {min-width:0;flex:1;text-align:left;font-size:12px;}
.window-bar {min-height:48px;height:48px;padding:0 10px 0 16px;}
.object-hotspot {padding:0;}
.object-marker {transform:none;line-height:1;flex:none;}
.object-marker svg {display:block;width:16px;height:16px;}
.monitor-hotspot .object-marker {animation:none;}
.object-label {bottom:calc(50% + 20px);}
.bookshelf-hotspot {left:78%;top:41%;width:6%;height:11%;background:transparent;}
.book-spine {position:absolute;left:36%;top:32%;width:12%;height:42%;background:#dfefb7;transform:skewY(15deg);box-shadow:0 0 8px 3px #dceca980;pointer-events:none;}
.bookshelf-hotspot:hover .book-spine,.bookshelf-hotspot:focus-visible .book-spine {box-shadow:0 0 12px 5px #dceca9bd;}
.file-breadcrumb {display:flex;gap:10px;align-items:center;font:12px/1.6 ui-monospace,monospace;color:#a4bdad;}
.file-breadcrumb button {background:transparent;padding:4px;color:inherit;min-width:30px;min-height:30px;}
.desktop-intro {background:transparent;border:1px solid transparent;padding:10px;margin-left:-10px;text-align:left;color:inherit;cursor:pointer;}
.desktop-intro:hover,.desktop-intro:focus-visible {background:#63827521;border-color:#90ac833d;}
.desktop-intro .intro-caption {display:block;font-size:12px;line-height:1.8;margin:5px 0;color:#b9c8bf;}
.desktop-intro .intro-file {font:11px/1.5 monospace;color:#d1bd89;}
.contact-email a {overflow-wrap:anywhere;font-family:ui-monospace,monospace;}
.reward-actions {display:flex;align-items:stretch;flex-wrap:wrap;gap:16px;margin:24px 0;}
.reward-actions .world-button {margin:0;min-height:48px;flex:1 1 180px;display:flex;align-items:center;justify-content:center;font-size:12px;padding:12px 16px;}
.room-mailbox {width:min(550px,calc(100vw - 28px));max-height:calc(100svh - 48px);overflow:auto;padding:30px 0 0;}
.room-mailbox .document {padding:14px 24px 24px;}
.room-mailbox .world-button {color:#ecedd9;}
.room-mailbox .document h3 {font-size:22px;}
.dock {left:16px;right:16px;bottom:max(12px,env(safe-area-inset-bottom));transform:none;max-width:none;justify-content:flex-start;gap:8px;padding:6px;}
.dock-home {border-right:1px solid #758e7c!important;font-family:ui-monospace,monospace!important;}
.dock-windows {max-width:none;flex:1;gap:6px;}
.dock-tab {display:flex;align-items:center;flex-shrink:0;border:1px solid #66847666;}
.dock-tab.active {background:#3d5a5e;border-color:#a7b895;}
.dock-tab button[data-window] {font-family:ui-monospace,monospace;font-size:11px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.dock-windows button:after {display:none;}
.dock .dock-close {width:32px;min-width:32px;height:36px;padding:0;}
.dock-close:hover {background:#725456!important;}
@media(max-width:600px) {
 .room {overflow:hidden;grid-template-columns:minmax(0,1fr);}
 .room-stage {width:112vw;max-width:none;justify-self:center;min-width:0;}
 .object-hotspot:not(.bookshelf-hotspot) {min-width:44px;min-height:44px;}
 .object-marker {width:24px;height:24px;}
 .bookshelf-hotspot {min-width:0;min-height:0;}
 .bookshelf-hotspot:after {content:'';position:absolute;inset:-10px;}
 .desktop-intro .intro-caption {font-size:11px;}
 .dock {left:8px;right:8px;max-width:none;bottom:max(8px,env(safe-area-inset-bottom));gap:4px;}
 .dock .dock-home {padding:0 8px;font-size:11px;}
 .dock-tab button[data-window] {max-width:130px;padding:0 8px;font-size:11px;}
 .window-controls button {width:36px;height:36px;min-width:36px;min-height:36px;}
 .window-title {font-size:11px;}
 .room-mailbox .document {padding:14px 18px 22px;}
}
@media(prefers-reduced-motion:reduce) {.book-spine {animation:none;}}

.puzzle-grid button {padding:0;display:grid;place-items:center;}
.puzzle-grid svg {display:block;width:24px;height:24px;}

/* Desktop date, hidden configuration file, and its usable theme reward. */
#clock {display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap;line-height:1.5;font-variant-numeric:tabular-nums;}
.desktop-file.encrypted-file .file-icon,.desktop-file.encrypted-file > span {opacity:.45;}
.desktop-file.encrypted-file:hover .file-icon,.desktop-file.encrypted-file:focus-visible .file-icon {opacity:.7;}
.desktop-file small {font-size:10px;line-height:1.4;color:#a3aea8;}
.usb-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px dashed #829183;padding-bottom:14px;}
.usb-toolbar code {font:14px ui-monospace,monospace;}
.empty-directory {padding:48px 0;text-align:center;opacity:.6;}
.env-file {display:flex;flex-direction:column;align-items:center;gap:12px;width:128px;min-height:150px;margin:28px 0;padding:16px;background:transparent;border:1px dashed #627f6880;color:#344940;cursor:pointer;}
.env-file .env-icon {width:48px;height:48px;color:#9d946a;opacity:.5;}
.env-file strong {font:16px ui-monospace,monospace;opacity:.65;}
.env-file small {font-size:11px;}
.env-file:hover,.env-file:focus-visible {background:#a4b08930;border-color:#52725c;}
.env-file:hover .env-icon,.env-file:focus-visible .env-icon {opacity:.9;}
@media(max-width:600px) {
 #clock {flex-direction:column;gap:0;align-items:flex-end;font-size:10px;}
 .desktop-browser {padding-bottom:10px;}
 .desktop-file {min-height:106px;padding:10px 5px;gap:9px;}
 .desktop-footnote {margin-top:12px;}
}
@media(min-width:601px) and (min-height:501px) and (max-height:700px) {
 .desktop-browser {inset:60px max(22px,6vw) 76px;padding:8px;}
 .desktop-browser-header {margin-bottom:8px;}
 .desktop-browser h2 {font-size:20px;}
 .desktop-intro {margin-bottom:8px;}
 .desktop-files {row-gap:10px;}
 .desktop-file {min-height:100px;padding:8px;gap:8px;}
 .desktop-footnote {display:none;}
}

/* Small, grounded room props. The bowls remain reachable in the treasure room. */
.cat-food {position:absolute;z-index:7;left:78%;top:69%;width:8%;min-width:44px;min-height:44px;padding:0;background:none;display:grid;place-items:center;}
.cat-food img {position:absolute;left:0;top:0;display:block;width:100%;height:auto;image-rendering:pixelated;pointer-events:none;}
.cat-food:focus-visible,.cat-food:hover {filter:drop-shadow(0 0 2px #f0cd87);}
.food-spark {position:absolute;left:20%;top:0;color:#eac575;font-size:16px;opacity:0;pointer-events:none;}
.cat-food.refilled .food-spark {animation:food-refill .8s steps(5) both;}
@keyframes food-refill {0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-18px)}}
.bitcoin-treasure {position:absolute;inset:0;pointer-events:none;z-index:2;}
.coin-stack {position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-100%) scale(var(--fill));transform-origin:50% 100%;}
.coin-stack img {display:block;width:100%;height:auto;image-rendering:pixelated;}
.loose-coins {display:flex;align-items:end;}
.loose-coins svg {width:100%;min-width:0;filter:drop-shadow(1px 2px #322415);}
.loose-coins svg+svg {margin-left:-35%;transform:translateY(-15%);}
.room[data-period="night"] .coin-stack {filter:brightness(1.08) drop-shadow(0 0 5px #ffb82a80);}
.room[data-period="night"].lamp-off .coin-stack {filter:brightness(1.22) drop-shadow(0 0 7px #ffb82aaa);}
.room[data-period="night"] .coin-stack::before {content:"";position:absolute;inset:40% -20% -20%;background:radial-gradient(ellipse,#ef9f234a,transparent 70%);z-index:-1;}
.bitcoin-room .lamp-glow {filter:sepia(1);}
.bitcoin-desktop .desktop-wallpaper {background:#302716;}
.bitcoin-desktop .menubar,.bitcoin-desktop .dock {background:#443720;border-color:#ad8a46;color:#f0dfb3;}
.bitcoin-desktop .desktop-browser {color:#f5e5ba;}
.bitcoin-desktop .category-tabs button,.bitcoin-desktop #layout-toggle {background:#554125;color:#fff0c6;}
.bitcoin-desktop .desktop-file small {color:#cdb67c;}
.app-window[data-id="bitcoin"] {background:#d4d0c8;border:3px outset #e8e6df;box-shadow:6px 6px #0005;}
.app-window[data-id="bitcoin"] .window-bar {background:linear-gradient(90deg,#70501b,#b4863e);border:0;color:#fff5d5;min-height:42px;}
.app-window[data-id="bitcoin"] .window-controls button {background:#d4d0c8;color:#161616;border:2px outset #eee;box-shadow:none;}
.app-window[data-id="bitcoin"] .window-body {background:#d4d0c8;}
.bitcoin-wallet {font:14px/1.5 Tahoma,Arial,sans-serif;color:#252525;}
.bitcoin-brand {display:flex;align-items:center;gap:12px;padding:18px 22px;}
.bitcoin-brand .bitcoin-icon {width:42px;height:42px;flex:none;}
.bitcoin-brand strong {display:block;font:700 26px Georgia,serif;letter-spacing:-1px;}
.bitcoin-brand small {display:block;font:10px/1.5 ui-monospace,monospace;color:#645e54;letter-spacing:1px;}
.bitcoin-tabs {display:flex;gap:4px;padding:0 20px;border-bottom:1px solid #aaa;}
.bitcoin-tabs button {background:#c5c1b8;color:#333;padding:8px 20px;min-height:44px;border:2px outset #eee;border-bottom:0;font:13px Tahoma,Arial,sans-serif;}
.bitcoin-tabs button[aria-pressed="true"] {background:#f2f0e9;}
.bitcoin-body {background:#f2f0e9;margin:0 12px;padding:22px;}
.bitcoin-balance {display:flex;flex-direction:column;gap:5px;border-bottom:1px solid #d4cdbc;padding-bottom:18px;margin-bottom:20px;}
.bitcoin-balance > span:first-child {font-size:12px;color:#635b4d;}
.bitcoin-balance strong {font:700 clamp(24px,5vw,38px)/1.3 ui-monospace,monospace;letter-spacing:-1px;color:#70501b;white-space:nowrap;}
.bitcoin-balance strong small {font-size:16px;letter-spacing:0;}
.bitcoin-balance > span:last-child {font-size:12px;color:#72664e;}
.bitcoin-found {font-weight:bold;}
.bitcoin-wallet p {line-height:1.7;}
.bitcoin-button {border:2px outset #faf8f2;background:#ddd8ca;color:#252525;box-shadow:1px 1px #8f897b;min-height:44px;padding:10px 16px;font:13px Tahoma,Arial,sans-serif;}
.bitcoin-button.primary {background:#e7c889;}
.bitcoin-button:active {border-style:inset;}
#bitcoin-send label {display:block;font-weight:bold;margin-bottom:8px;}
#bitcoin-recipient {width:100%;min-height:44px;border:2px inset #ddd;background:#fff;color:#222;padding:10px;font:16px Tahoma,Arial,sans-serif;box-sizing:border-box;}
#bitcoin-privacy {margin:8px 0 20px;color:#5c6259;font-size:12px;}
.bitcoin-send-amount {font-size:13px;}
.bitcoin-ledger {margin-top:26px;border:1px solid #b4afa4;background:#fff;}
.bitcoin-ledger h4 {display:flex;justify-content:space-between;gap:10px;background:#ddd9ce;font-size:12px;margin:0;padding:7px 10px;}
.bitcoin-ledger h4 small {font-weight:400;color:#666;}
.ledger-row {display:flex;justify-content:space-between;gap:8px;padding:10px;font-size:12px;border-top:1px solid #e7e5df;}
.ledger-row b {font-family:ui-monospace,monospace;font-weight:400;}
.bitcoin-status {display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 14px;color:#615d54;font-size:10px;}
.bitcoin-receipt > strong {font-size:17px;}
@media(max-width:600px){
 .bitcoin-brand {padding:14px 12px;gap:8px;}
 .bitcoin-brand strong {font-size:23px;}
 .bitcoin-brand small {letter-spacing:0;font-size:9px;}
 .bitcoin-body {margin:0 6px;padding:16px 12px;}
 .bitcoin-tabs {padding:0 12px;}
 .bitcoin-wallet .reward-actions {gap:12px;}
 .bitcoin-send-amount strong {display:block;}
}
@media(prefers-reduced-motion:reduce){.cat-food.refilled .food-spark {animation:none;}}
@media(min-width:601px) and (min-height:581px){
 .desktop-files {grid-template-columns:repeat(5,minmax(0,150px));}
}

@media(min-width:601px) and (max-height:700px){
 .bitcoin-brand {padding:8px 16px;}
 .bitcoin-brand .bitcoin-icon {width:30px;height:30px;}
 .bitcoin-brand strong {font-size:21px;}
 .bitcoin-tabs button {padding:5px 16px;min-height:34px;}
 .bitcoin-body {padding:12px 16px;}
 .bitcoin-balance {padding-bottom:10px;margin-bottom:12px;gap:2px;}
 .bitcoin-balance strong {font-size:26px;}
 .bitcoin-wallet p {margin:8px 0;}
 #bitcoin-privacy {margin:5px 0 10px;}
 .bitcoin-ledger {margin-top:14px;}
}

.bitcoin-amount-row {display:flex;gap:10px;align-items:stretch;}
#bitcoin-amount {flex:1;min-width:0;min-height:44px;border:2px inset #ddd;background:#fff;color:#222;padding:10px;font:16px Tahoma,Arial,sans-serif;}
#bitcoin-amount-hint {margin:7px 0 14px;font-size:11px;color:#5c6259;}
#bitcoin-error {font-size:12px;color:#942f20;}
.bitcoin-success {color:#376038;font-size:13px;}
.ledger-row {gap:16px;align-items:flex-start;}
.ledger-row span {min-width:0;overflow-wrap:anywhere;}
.ledger-row b {flex-shrink:0;}
.ledger-row {display:grid;grid-template-columns:minmax(0,1fr) auto;}
.ledger-row b {text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* One language control shared by the room and desktop. */
.language-toggle {position:fixed;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:9000;min-width:42px;min-height:36px;padding:5px 9px;background:#263c45;color:#eeeccc;border:2px solid #819d8a;font:14px Arial,sans-serif;cursor:pointer;}
.language-toggle:focus-visible {outline:3px solid #f4cf7d;outline-offset:3px;}
.menubar {padding-right:72px;}
html[lang="en-US"] .window-title {font-size:clamp(12px,1.4vw,18px);}
html[lang="en-US"] .desktop-file span {overflow-wrap:anywhere;}
@media(max-width:600px){.language-toggle {top:max(8px,env(safe-area-inset-top));min-height:32px;}html[lang="en-US"] .room-controls button {font-size:11px;}.menubar {padding-right:74px;}}

/* Header, content and taskbar share real layout tracks. Safe-area padding and
   browser chrome can change the header height without covering files/windows. */
.computer {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
}
.computer .menubar {
  grid-area:1 / 1;
  height:auto;
  min-height:56px;
  padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));
  gap:12px;
}
.menubar .leave-button {flex-shrink:0;min-height:44px;}
.menubar .desktop-title {flex:1;text-align:center;}
.menubar #clock {min-width:0;margin-left:auto;}
.menubar .language-toggle {
  position:static;
  flex-shrink:0;
  min-width:44px;
  min-height:44px;
  z-index:auto;
}
.computer .desktop-browser {
  grid-area:2 / 1;
  position:relative;
  inset:auto;
  min-width:0;
  min-height:0;
  margin:8px max(22px,8vw) 0;
  padding:12px 12px 24px;
  overscroll-behavior:contain;
}
.desktop-browser-header > div {min-width:0;}
.desktop-browser-header #layout-toggle {flex-shrink:0;}
.computer .windows {
  grid-area:2 / 1;
  position:relative;
  inset:auto;
  min-width:0;
  min-height:0;
  margin:8px 8px 0;
}
.computer .dock {
  grid-area:3 / 1;
  position:relative;
  inset:auto;
  min-width:0;
  margin:8px max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
}
.dock-windows {min-width:0;}
/* A full window view, with glass and wooden mullions above the moving scene. */
#weather-dialog {width:min(1000px,calc(100vw - 32px));max-height:calc(100dvh - 24px);padding:18px;background:#1f343c;}
.window-view-header {display:flex;gap:18px;align-items:center;padding:0 52px 14px 2px;}
.window-view-header h2 {margin:0;font-size:24px;}
#window-clock {font:12px ui-monospace,monospace;color:#bccac0;}
.neighborhood-frame {position:relative;border:10px solid #6c6e5b;box-shadow:inset 0 0 0 3px #acaa85,0 5px 0 #142b31;background:#29424a;aspect-ratio:16/11;overflow:hidden;}
.neighborhood-frame canvas {width:100%;height:100%;display:block;image-rendering:pixelated;}
.window-glass {position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 6%,#e3eeea0b 6%,#e3eeea0b 9%,transparent 9%,transparent 55%,#e3eeea09 55%,#e3eeea09 60%,transparent 60%);box-shadow:inset 0 0 0 3px #172e3b55;}
.window-mullion {position:absolute;background:#75765f;box-shadow:3px 3px #273e4090,inset 2px 2px #ada985;pointer-events:none;}
.window-mullion.vertical {top:0;bottom:0;left:34%;width:9px;}
.window-mullion.horizontal {top:37%;left:0;right:0;height:8px;}
#weather-reading {display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:18px 2px 10px;}
#weather-reading p {margin:0;}
#weather-dialog #weather-summary {font-size:15px;}
#weather-reading .weather-updated {font-size:11px;color:#a9bdb9;}
#weather-feedback {width:100%;font-size:12px;}
.window-view-controls {display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12px;}
.window-view-controls .world-button {font-size:12px;padding:8px 12px;min-height:44px;}
.window-view-controls label {display:flex;align-items:center;gap:8px;}
.window-view-controls input {width:85px;accent-color:#b5bc97;}
@media(max-width:600px){
 #weather-dialog {padding:12px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px);}
 .window-view-header {gap:8px;flex-wrap:wrap;}
 .window-view-header h2 {font-size:20px;}
 #window-clock {font-size:11px;}
 .neighborhood-frame {border-width:7px;}
 .window-view-controls {gap:8px;}
}
/* Give the input and its scrollable form the available keyboard space. */
.computer.wallet-keyboard {top:var(--keyboard-top);bottom:auto;height:var(--keyboard-height);grid-template-rows:0 minmax(0,1fr) 0;}
.computer.wallet-keyboard .menubar,.computer.wallet-keyboard .dock {visibility:hidden;overflow:hidden;min-height:0;height:0;padding:0;margin:0;border:0;}
.wallet-keyboard .app-window[data-id="bitcoin"] {top:0!important;left:0!important;transform:none!important;width:100%;height:100%;min-height:0;}
.wallet-keyboard .bitcoin-brand {display:none;}
.wallet-keyboard .bitcoin-balance {padding-bottom:6px;margin-bottom:12px;}
.wallet-keyboard .bitcoin-balance strong {font-size:24px;}
.wallet-keyboard .bitcoin-body {padding-top:10px;}
@media(max-width:600px) {
  .computer .menubar {gap:8px;}
  .menubar .leave-button {font-size:12px;}
  .menubar #clock {font-size:10px;}
  .computer .desktop-browser {margin:0 8px;padding:12px 8px 20px;}
  .desktop-browser-header {align-items:flex-start;gap:8px;}
  .desktop-browser-header #layout-toggle {padding:8px;font-size:11px;min-height:44px;}
  .computer .windows {margin:4px 8px 0;}
  .computer .dock {margin:8px max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));}
}

/* Browser tabs already sit below browser chrome. Only standalone/fullscreen
   needs the physical notch inset added to the workstation header. */
@media (display-mode:standalone), (display-mode:fullscreen) {
  .computer:not(.wallet-keyboard) .menubar {padding-top:calc(6px + env(safe-area-inset-top,0px));}
}
#weather-city:focus {outline:none;}
.desktop-file > span {overflow-wrap:anywhere;}
/* A tap/click can still move focus for screen readers and navigation without
   Safari's first-use focus ring. Tab/Enter restores ordinary focus-visible. */
html[data-input-mode="pointer"] button:focus-visible,
html[data-input-mode="pointer"] a:focus-visible {outline:none;}