:root {
  --ink: #27343e;
  --muted: #607989;
  --blue: #2f78b2;
  --deep-blue: #174d78;
  --panel: #f7fafb;
  --paper: #f6efdb;
  --focus: #f1b632;
}

/* Narrative Ming text keeps only the faint white outer glow used at Jiayu's home. */
.home-arrival-caption {
  text-shadow:
    0 0 2px rgba(255, 255, 255, .55),
    0 0 .28em rgba(255, 255, 255, .32) !important;
}

/* Project-wide typography rule: text stays flat and shadow-free. */
*,
*::before,
*::after {
  text-shadow: none !important;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #7196ad;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(242, 251, 255, .62), transparent 26rem),
    linear-gradient(#77a4c0, #d0e0e5 47%, #91aab3);
  background-attachment: fixed;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

body::after {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, .001);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: -webkit-backdrop-filter 1s ease-in-out, backdrop-filter 1s ease-in-out;
}

body.is-page-transitioning::after {
  pointer-events: auto;
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
}

button { font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

.screen {
  min-height: 100vh;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 26px 18px 58px;
}

.screen > .chapter { width: min(1180px, 100%); }
.msn-stage {
  width: min(840px, 100%);
  height: calc(100dvh - 52px);
  min-height: 0;
}

.restart-corner {
  position: fixed;
  z-index: 20;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  color: #315d78;
  border: 1px solid #7f9daf;
  border-radius: 4px;
  background: rgba(242, 248, 251, .86);
  box-shadow: 0 2px 7px rgba(24, 53, 70, .24);
  font-size: 1.15rem;
}

.chapter {
  padding: clamp(17px, 3.5vw, 34px);
  border: 1px solid #6f8999;
  border-radius: 6px;
  background: rgba(248, 251, 252, .98);
  box-shadow: 0 15px 38px rgba(24, 50, 65, .32);
}

.chapter.narrow {
  width: min(840px, 100%);
  margin: auto;
}

.chapter h2 { margin: 0 0 14px; font-size: clamp(1.4rem, 3vw, 2rem); }
.chapter-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.chapter-heading h2 { margin: 2px 0 0; }
.eyebrow { margin: 0; color: #557284; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.date-stamp { margin: 0 0 12px; color: #657e8e; font-size: .76rem; font-weight: 700; letter-spacing: .06em; }
.narration { margin: 0 0 18px; color: #3b4f5c; line-height: 1.85; }
.instruction { margin: 18px 0 8px; text-align: center; font-weight: 700; }
.primary {
  display: block;
  min-width: 190px;
  margin: 19px auto 0;
  padding: 10px 18px;
  color: #fff;
  border: 1px solid #164d78;
  border-radius: 4px;
  background: linear-gradient(#4e99d1, #216aa4);
  box-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 2px 4px rgba(22, 54, 78, .25);
  font-weight: 700;
}
.primary:hover { filter: brightness(1.08); }

.status-note {
  min-height: 49px;
  margin: 15px 0 0;
  padding: 11px 13px;
  color: #3b5667;
  border: 1px solid #afc5d3;
  background: #edf7fd;
  line-height: 1.6;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.choice-grid button,
.dialogue-choices button {
  padding: 12px;
  color: #274a60;
  border: 1px solid #8eaabb;
  border-radius: 3px;
  background: linear-gradient(#fff, #e3eef4);
  box-shadow: inset 0 1px white;
}

.choice-grid button:hover,
.dialogue-choices button:hover { background: #d6edf9; }

.msn-window {
  height: 100%;
  max-height: 760px;
  overflow: hidden;
  color: #263b49;
  border: 1px solid #426e8d;
  border-radius: 8px 8px 2px 2px;
  background: #edf6fb;
  box-shadow: 0 8px 21px rgba(32, 66, 88, .28);
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  font-family: "Segoe UI", Tahoma, Arial, "Microsoft JhengHei", sans-serif;
}

.msn-stage.msn-intro-opening .msn-window {
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: filter, opacity;
  animation: msn-intro-focus 4s linear both;
}

@keyframes msn-intro-focus {
  0% {
    opacity: .06;
    filter: blur(32px);
  }
  45% {
    opacity: .9;
    filter: blur(5px);
  }
  68% {
    opacity: .94;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.msn-glass {
  position: relative;
  display: grid;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  min-height: 35px;
  padding: 4px 8px;
  color: #fff;
  background: linear-gradient(rgba(166, 218, 243, .98), rgba(49, 137, 190, .98) 62%, rgba(24, 96, 146, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .92), inset 0 -1px rgba(17, 76, 119, .42);
  font-size: 12px;
  text-shadow: 0 1px #174b70;
}

.msn-title { font-weight: 600; letter-spacing: .01em; }
.msn-butterfly { position: relative; display: block; width: 27px; height: 23px; filter: drop-shadow(0 1px 1px rgba(18, 70, 104, .35)); }
.msn-butterfly i { position: absolute; display: block; }
.msn-butterfly i:nth-child(1) { left: 3px; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(#b9e457, #6fb52e); box-shadow: inset 0 1px rgba(255,255,255,.7); }
.msn-butterfly i:nth-child(2) { right: 2px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(#80d9fb, #2e9ed4); box-shadow: inset 0 1px rgba(255,255,255,.72); }
.msn-butterfly i:nth-child(3) { left: 0; bottom: 1px; width: 14px; height: 11px; border-radius: 8px 8px 5px 5px; background: linear-gradient(#a8db48, #66aa27); transform: rotate(-7deg); }
.msn-butterfly i:nth-child(4) { right: 0; bottom: 0; width: 16px; height: 12px; border-radius: 9px 9px 5px 5px; background: linear-gradient(#69caf0, #278fc6); transform: rotate(7deg); box-shadow: inset 0 1px rgba(255,255,255,.35); }

.window-controls { display: flex; align-items: stretch; margin-left: auto; }
.window-controls button { width: 25px; height: 20px; padding: 0; color: #163c55; border: 0; border-left: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); font: 11px/20px Arial, sans-serif; }
.window-controls button:disabled { color: rgba(22, 60, 85, .58); }
.window-controls .window-close:not(:disabled):hover { color: #fff; background: #c7493e; }
.msn-menu { padding: 5px 9px; border-bottom: 1px solid #abc5d6; background: linear-gradient(#fbfdfe, #e6f0f6); font-size: 11px; }

.msn-contact-strip {
  display: block;
  align-items: center;
  min-height: 49px;
  padding: 7px 12px;
  border-bottom: 1px solid #b8cedb;
  background: linear-gradient(90deg, #e3f4fe, #fff 72%);
}

.msn-avatar {
  display: block;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 5px;
  background: #d8e8f1;
  box-shadow: 0 0 0 1px #6e94ad, 0 2px 4px rgba(44, 74, 91, .25);
}

.main-avatar { width: 52px; height: 52px; }
.contact-copy strong, .contact-copy span { display: block; }
.contact-copy strong { font-size: 15px; }
.contact-copy span { margin-top: 4px; color: #5e798b; font-size: 11px; }
.online-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #64b13c; box-shadow: 0 0 0 1px #fff, 0 0 0 2px #78a165; }

.msn-actionbar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 43px;
  padding: 3px 10px;
  border-bottom: 1px solid #a9c4d5;
  background: linear-gradient(#f7fdff, #dff2fa 72%, #c9e4f0);
  box-shadow: inset 0 1px #fff;
}

.msn-action {
  display: grid;
  width: 43px;
  height: 34px;
  padding: 1px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
}

.msn-action:hover,
.msn-action:focus-visible {
  border-color: #7ca8c2;
  background: linear-gradient(#fff, #dceef7);
  outline: none;
}

.msn-action-icon { position: relative; display: block; width: 26px; height: 25px; }
.icon-invite i, .icon-invite b { position: absolute; display: block; width: 8px; height: 8px; border: 1px solid rgba(37, 97, 121, .45); border-radius: 50%; }
.icon-invite i { left: 3px; top: 2px; background: linear-gradient(#c7ec67, #6bb02e); }
.icon-invite b { right: 3px; top: 5px; background: linear-gradient(#7ad9f6, #2c9ed1); }
.icon-invite i::after, .icon-invite b::after { content: ""; position: absolute; top: 8px; width: 11px; height: 9px; border-radius: 7px 7px 2px 2px; }
.icon-invite i::after { left: -3px; background: #77b82e; }
.icon-invite b::after { right: -3px; background: #309fd0; }
.icon-send-file i { position: absolute; display: block; width: 12px; height: 16px; border: 1px solid #5e7f91; background: linear-gradient(#fff, #d7e9f2); box-shadow: inset 0 0 0 2px #fff; }
.icon-send-file i { left: 4px; top: 4px; }
.icon-send-file::after { content: ""; position: absolute; right: 2px; top: 9px; width: 11px; height: 5px; border-top: 3px solid #409d37; transform: rotate(-20deg); }
.icon-send-file::before { content: ""; position: absolute; z-index: 2; right: 1px; top: 5px; border-left: 6px solid #409d37; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.icon-game::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 22px;
  height: 13px;
  border: 1px solid #557b91;
  border-radius: 5px 5px 8px 8px;
  background: linear-gradient(#fff, #bcd8e7);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 1px #fff;
}
.icon-game i,
.icon-game b { position: absolute; z-index: 2; display: block; }
.icon-game i { left: 6px; top: 12px; width: 8px; height: 2px; background: #2e6f99; }
.icon-game i::after { content: ""; position: absolute; left: 3px; top: -3px; width: 2px; height: 8px; background: #2e6f99; }
.icon-game b { right: 5px; top: 10px; width: 3px; height: 3px; border-radius: 50%; background: #df4b3e; box-shadow: -4px 4px 0 #65a93b; }
.icon-camera i { position: absolute; left: 2px; top: 7px; width: 22px; height: 14px; border: 1px solid #54798f; border-radius: 2px; background: linear-gradient(#e8f1f7, #7ca9c1); }
.icon-camera i::before { content: ""; position: absolute; left: 7px; top: 2px; width: 8px; height: 8px; border: 2px solid #2d6b91; border-radius: 50%; background: #bde4f5; }
.icon-camera i::after { content: ""; position: absolute; left: 2px; top: -4px; width: 8px; height: 4px; border: 1px solid #54798f; background: #c3dbe7; }
.icon-voice { color: #43788f; font: 26px/24px "Segoe UI Symbol", sans-serif; transform: rotate(-18deg); text-shadow: 0 1px #fff; }
.icon-upload i {
  position: absolute;
  left: 4px;
  top: 2px;
  display: block;
  width: 16px;
  height: 19px;
  border: 1px solid #5e7f91;
  border-radius: 1px;
  background: linear-gradient(#fff, #d7e9f2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .82), 0 1px #fff;
}
.icon-upload i::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  border-left: 5px solid transparent;
  border-bottom: 5px solid #90b0c1;
}
.icon-upload b {
  position: absolute;
  z-index: 2;
  left: 11px;
  top: 8px;
  display: block;
  width: 3px;
  height: 11px;
  border-radius: 1px;
  background: #409d37;
  box-shadow: 0 1px rgba(255, 255, 255, .7);
}
.icon-upload b::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -5px;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #409d37;
  border-left: 5px solid transparent;
}

.msn-chat-layout {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #fff;
}

.msn-conversation {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 17px;
  border-right: 1px solid #b8cedb;
  background: linear-gradient(90deg, #fff, #f4faff);
}

.chat-line { margin: 0 0 16px; line-height: 1.58; }
.chat-line b, .chat-line span { display: block; }
.chat-line span { padding-left: 16px; }
.chat-line .msn-message,
.msn-auto-text { white-space: pre-line; }
.chat-line .jiayu { color: #71409d; }
.chat-line .xinling { color: #167187; }
.chat-line .mengjie { color: #9a5c12; }
.system-line { padding: 5px 8px; color: #6b7f8c; border: 1px solid #d5e1e8; background: #f4f8fa; font-size: 11px; font-style: italic; }
.msn-font-default { font-family: "Segoe UI", Tahoma, Arial, "Microsoft JhengHei", sans-serif; }
.msn-font-mingliu { font-family: "PMingLiU", "MingLiU", serif; }
.msn-font-arial { font-family: Arial, sans-serif; }
.msn-font-bold { font-weight: 700; }
.msn-color-black { color: #263b49; }
.msn-color-blue { color: #244f9e; }
.msn-color-purple { color: #7c2b83; }
.msn-color-green { color: #25704b; }
.msn-color-red { color: #a62929; }

.msn-side { display: grid; place-items: start center; padding: 13px 11px; border-left: 1px solid #b8cedb; background: linear-gradient(#eef9fd, #dceef6); }
.msn-side > .msn-avatar { width: 108px; height: 108px; margin: auto; border-width: 5px; }
.msn-side-top { grid-column: 2; grid-row: 1; }
.msn-side-top > .msn-avatar { align-self: start; margin: 0 auto; }
.msn-side-bottom { grid-column: 2; grid-row: 2; align-content: center; border-top: 1px solid #b8cedb; }
.msn-side-bottom > .msn-avatar { width: 92px; height: 92px; border-width: 4px; }
.msn-avatar-picker {
  position: relative;
  width: 92px;
  height: 92px;
  margin: auto;
}
.msn-avatar-picker > .msn-avatar {
  width: 92px;
  height: 92px;
  border-width: 4px;
}
.xinling-avatar-upload-toggle {
  position: absolute;
  z-index: 2;
  right: -1px;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 15px;
  padding: 0;
  border: 1px solid #6e94ad;
  border-radius: 3px 0 4px 0;
  background: linear-gradient(#f8fcfe, #d9eaf3);
  box-shadow: inset 0 1px #fff;
}
.xinling-avatar-upload-toggle:hover { background: #fff; }
.xinling-avatar-upload-toggle span {
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 5px solid #3d6177;
}
.xinling-avatar-file { display: none; }

.msn-editor { grid-column: 1; grid-row: 2; min-width: 0; border-top: 1px solid #adc6d6; background: #f5fbfe; }

.group-pictures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.group-pictures .msn-avatar { width: 52px; height: 52px; border-width: 3px; }
.group-pictures .msn-avatar:first-child { grid-column: 1 / 3; width: 76px; height: 76px; justify-self: center; }

.msn-format {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 35px;
  padding: 3px 7px;
  border-top: 0;
  border-bottom: 1px solid #adc6d6;
  background: linear-gradient(#fff 0, #f3f8fb 45%, #e1edf4 100%);
}

.msn-format button { min-width: 28px; height: 27px; padding: 1px 3px; color: #345c75; border: 1px solid transparent; border-radius: 2px; background: transparent; }
.msn-toolbar-button { display: grid; place-items: center; }
.msn-toolbar-split { display: inline-flex; align-items: center; height: 29px; }
.msn-toolbar-split > .msn-toolbar-button:first-child { min-width: 26px; border-radius: 2px 0 0 2px; }
.msn-format .toolbar-caret-button { min-width: 12px; width: 12px; padding: 0; border-left-width: 0; border-radius: 0 2px 2px 0; font-size: 9px; line-height: 25px; }
.msn-toolbar-split:hover > .msn-toolbar-button:not(:disabled) { border-color: #79a4bf; background: #fff; }
.msn-format button:not(:disabled):hover, .msn-format button[aria-pressed="true"] { border-color: #79a4bf; background: #fff; }
.msn-format button:disabled { opacity: .42; cursor: default; }
.msn-format .toolbar-spacer { flex: 1; }
.toolbar-glyph {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: #224f6b;
  font-family: Tahoma, Arial, sans-serif;
}
.glyph-font {
  padding-top: 1px;
  font-size: 20px;
  font-weight: 700;
  line-height: 18px;
}
.glyph-font::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 2px;
  background: #2675a7;
}
.glyph-smile, .glyph-wink {
  width: 21px;
  height: 21px;
  border: 1px solid #b37b16;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4a2 0 8%, #ffd84e 40%, #edae19 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .65);
}
.glyph-smile::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 2px;
  height: 3px;
  border-radius: 50%;
  background: #65430c;
  box-shadow: 8px 0 #65430c;
}
.glyph-smile i, .glyph-wink i {
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #71490b;
  border-radius: 0 0 10px 10px;
}
.glyph-wink { overflow: hidden; }
.glyph-wink::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 2px;
  height: 3px;
  border-radius: 50%;
  background: #65430c;
}
.glyph-wink::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 7px;
  width: 6px;
  height: 3px;
  border-top: 2px solid #65430c;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.glyph-nudge {
  width: 21px;
  height: 17px;
  margin-top: 2px;
  color: #fff;
  border: 1px solid #507c99;
  border-radius: 2px;
  background: linear-gradient(#7fc3e9, #3b84b2);
  box-shadow: -3px 0 0 -2px #558aa8, 3px 0 0 -2px #558aa8;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.glyph-nudge::before, .glyph-nudge::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 2px;
  height: 9px;
  border-top: 1px solid #54859f;
  border-bottom: 1px solid #54859f;
}
.glyph-nudge::before { left: -5px; }
.glyph-nudge::after { right: -5px; }
.glyph-color {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  padding-bottom: 2px;
}
.glyph-color::before {
  content: "A";
  position: absolute;
  left: 1px;
  top: -1px;
  color: #244d66;
  font-size: 15px;
  font-weight: 700;
}
.glyph-color i {
  width: 5px;
  height: 5px;
  margin-bottom: 0;
  border: 1px solid rgba(0, 0, 0, .15);
}
.glyph-color i:nth-child(1) { margin-left: 9px; background: #dc4848; }
.glyph-color i:nth-child(2) { background: #3c86ce; }
.glyph-color i:nth-child(3) { background: #4ca667; }
.glyph-more {
  width: 0;
  height: 0;
  margin-top: 6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #315f79;
}
.msn-format button[aria-pressed="true"] {
  box-shadow: inset 0 1px 3px rgba(36, 75, 99, .18);
}
.msn-tool-panel {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 6px 9px;
  border-bottom: 1px solid #b8cedb;
  background: #f3f8fb;
  box-shadow: inset 0 1px #fff;
}
.msn-tool-panel button {
  min-height: 25px;
  padding: 3px 8px;
  color: #284f68;
  border: 1px solid #9bb6c7;
  border-radius: 2px;
  background: linear-gradient(#fff, #e3edf3);
  font-size: 11px;
}
.msn-tool-panel > span { margin-left: auto; color: #738895; font-size: 10px; }
.msn-tool-panel .tool-panel-caption { flex: 0 0 auto; margin: 0 4px 0 0; color: #405e70; font-size: 11px; font-weight: 700; }
.font-panel button { min-width: 62px; }
.wink-panel { flex-wrap: wrap; }
.wink-panel button { min-width: 68px; padding-inline: 7px; font-family: Tahoma, Arial, "Microsoft JhengHei", sans-serif; font-size: 13px; }
.emoticon-panel button { min-width: 36px; padding: 2px 5px; font-size: 20px; line-height: 24px; }
.color-panel .swatch { width: 25px; min-width: 25px; height: 25px; min-height: 25px; padding: 0; border: 3px solid #fff; border-radius: 1px; box-shadow: 0 0 0 1px #7893a4; }
.color-panel .black { background: #263b49; }
.color-panel .blue { background: #244f9e; }
.color-panel .purple { background: #7c2b83; }
.color-panel .green { background: #25704b; }
.color-panel .red { background: #a62929; }

.msn-compose { display: grid; grid-template-columns: 1fr 74px; gap: 8px; padding: 8px; }
.compose-field { width: 100%; height: 70px; padding: 8px 10px; color: #263b49; border: 1px solid #87a5b8; background: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); font: inherit; line-height: 1.55; }
textarea.compose-field { display: block; resize: none; overflow: auto; }
textarea.compose-field.msn-font-default { font-family: "Segoe UI", Tahoma, Arial, "Microsoft JhengHei", sans-serif; }
textarea.compose-field.msn-font-mingliu { font-family: "PMingLiU", "MingLiU", serif; }
textarea.compose-field.msn-font-arial { font-family: Arial, sans-serif; }
textarea.compose-field.msn-font-bold { font-family: "Segoe UI", Tahoma, Arial, "Microsoft JhengHei", sans-serif; font-weight: 700; }
textarea.compose-field.msn-color-black { color: #263b49; }
textarea.compose-field.msn-color-blue { color: #244f9e; }
textarea.compose-field.msn-color-purple { color: #7c2b83; }
textarea.compose-field.msn-color-green { color: #25704b; }
textarea.compose-field.msn-color-red { color: #a62929; }
textarea.compose-field:focus { outline: 1px solid #4f8db4; outline-offset: -2px; }
.compose-field.is-readonly { color: #71838e; }
.compose-field.is-auto-typing {
  overflow: auto;
  color: #263b49;
  cursor: wait;
  user-select: none;
}
.msn-auto-caret {
  display: inline-block;
  width: 1px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -.18em;
  background: #263b49;
  animation: msn-auto-caret-blink .72s steps(1, end) infinite;
}
.msn-window.is-auto-typing button:disabled { cursor: wait; }
@keyframes msn-auto-caret-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
.msn-compose button:not(:disabled) { color: #244c65; border: 1px solid #7d9cad; background: linear-gradient(#fff, #dcebf3); font-weight: 700; }
.msn-compose button { align-self: end; padding: 7px; }
.msn-status { padding: 5px 9px; color: #688092; border-top: 1px solid #c7d7e1; background: #f8fbfd; font-size: 10px; }

.page-badge {
  display: grid;
  width: 54px;
  height: 54px;
  flex: none;
  place-items: center;
  color: #705c40;
  border: 1px solid #9d8765;
  background: #eee3ca;
  font-family: Georgia, serif;
  font-size: 1.2rem;
}

.book-page {
  position: relative;
  overflow: hidden;
  width: min(780px, 100%);
  margin: auto;
  padding: clamp(27px, 6vw, 62px);
  border: 1px solid #b4a587;
  background:
    linear-gradient(rgba(120, 92, 47, .03), rgba(120, 92, 47, .03)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(123, 97, 57, .045) 32px),
    var(--paper);
  box-shadow: 0 8px 20px rgba(70, 55, 33, .24), inset 0 0 50px rgba(128, 101, 60, .08);
  font-family: Georgia, "DFKai-SB", "KaiTi", serif;
}

.book-page p {
  position: relative;
  z-index: 2;
  margin: 0 0 13px;
  line-height: 1.9;
  text-align: justify;
  transition: opacity .45s, background .45s;
}

.paper-fold {
  position: absolute;
  z-index: 4;
  width: 0;
  height: 0;
  filter: drop-shadow(2px 3px 2px rgba(70, 56, 34, .2));
  transition: all .55s ease;
}

.fold-top { left: 0; top: 0; border-top: 0 solid #ded0b2; border-right: 0 solid transparent; }
.fold-bottom { right: 0; bottom: 0; border-bottom: 0 solid #ddceb0; border-left: 0 solid transparent; }
.fold-step-1 .fold-top { border-top-width: 205px; border-right-width: 285px; }
.fold-step-2 .fold-top { border-top-width: 225px; border-right-width: 320px; }
.fold-step-2 .fold-bottom { border-bottom-width: 225px; border-left-width: 320px; }
.fold-step-2 p:not(.secret-line) { opacity: .12; }
.fold-step-2 .secret-line { padding: 7px 9px; color: #4c3500; background: rgba(255, 222, 92, .52); font-weight: 700; }
.printed-page-number { display: block; margin-top: 25px; color: #857459; text-align: center; }
.fold-result { width: min(780px, 100%); margin: 15px auto 0; padding: 13px; color: #5a4000; border: 1px solid #dcc26b; background: #fff7cf; text-align: center; }
.fold-result span, .fold-result strong { display: block; }
.fold-result span { margin-bottom: 6px; font-size: .78rem; }
.fold-result strong { line-height: 1.65; }

.old-browser { border: 1px solid #7c98a9; border-radius: 5px 5px 0 0; background: #e8eff3; }
.browser-title { padding: 7px 10px; color: #fff; background: linear-gradient(#7ba9c5, #396f92); font-size: .78rem; }
.browser-menu { padding: 4px 8px; border-bottom: 1px solid #b7c8d1; font-size: .7rem; }
.browser-nav { display: flex; gap: 5px; padding: 6px; }
.browser-nav button { width: 29px; border: 1px solid #9eafb8; background: #fff; }
.browser-nav span { flex: 1; padding: 5px 8px; border: 1px solid #9aadb8; background: #fff; font-size: .72rem; }

.map-layout { display: grid; grid-template-columns: 205px 1fr; min-height: 480px; border: 1px solid #7c98a9; border-top: 0; }
.map-panel { padding: 13px; background: #fff; font-size: .8rem; }
.google-word { margin-bottom: 15px; font-family: Arial, sans-serif; font-size: 1.25rem; letter-spacing: -.08em; }
.google-word b:first-child { color: #3273c5; }.google-word i { color: #d94535; font-style: normal; }.google-word em { color: #f2b421; font-style: normal; }.google-word b:nth-of-type(2) { color: #3273c5; }.google-word u { color: #47a34d; text-decoration: none; }
.map-panel label { display: block; margin-bottom: 4px; font-weight: 700; }
.search-fake { padding: 6px; border: 1px solid #9caeb7; }
.map-panel blockquote { margin: 8px 0 15px; padding: 8px; border-left: 3px solid #d8aa2f; background: #fff8dc; line-height: 1.7; }

.map-canvas {
  position: relative;
  overflow: hidden;
  background-color: #e6e5d4;
  background-image: linear-gradient(35deg, transparent 47%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, .9) 52%, transparent 53%), linear-gradient(-18deg, transparent 45%, rgba(255, 255, 255, .88) 46%, rgba(255, 255, 255, .88) 50%, transparent 51%);
  background-size: 270px 220px, 350px 250px;
}

.river { position: absolute; right: -45px; top: -20px; width: 28%; height: 120%; padding: 35px 20px; color: #5582a0; background: #b6daeb; transform: rotate(5deg); }
.road { position: absolute; z-index: 1; height: 27px; border: 1px solid #d0ae54; background: #fff4b7; box-shadow: 0 0 0 4px rgba(255, 255, 255, .9); }
.road-one { left: -4%; top: 34%; width: 90%; transform: rotate(-7deg); }
.road-two { left: 9%; top: 67%; width: 75%; transform: rotate(11deg); }
.road-three { left: 49%; top: -5%; width: 27px; height: 112%; transform: rotate(3deg); }
.street { position: absolute; z-index: 2; padding: 2px 5px; color: #6d6a5f; background: rgba(255, 255, 255, .74); font-size: .67rem; }
.s1 { left: 15%; top: 29%; }.s2 { left: 26%; top: 70%; }.s3 { left: 53%; top: 16%; }

.map-pin {
  position: absolute;
  z-index: 5;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d74835;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .38);
  font-weight: 700;
}
.p1 { left: 16%; top: 41%; }.p2 { left: 49%; top: 55%; }.p3 { left: 69%; top: 27%; }
.locations { margin-top: 12px; }
.locations b { display: inline-grid; width: 24px; height: 24px; margin-right: 5px; place-items: center; color: #fff; border-radius: 50%; background: #d74835; }

.safe-tag, .scene-count {
  padding: 6px 8px;
  color: #fff;
  background: #34739b;
  font-size: .72rem;
  font-weight: 700;
}

.image-frame { position: relative; overflow: hidden; border: 1px solid #506b7c; background: #1b2932; box-shadow: 0 7px 18px rgba(21, 43, 57, .28); }
.image-frame img { display: block; width: 100%; height: auto; }
.image-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 45px rgba(10, 28, 39, .16); }
.hotspot {
  position: absolute;
  z-index: 4;
  padding: 7px 9px;
  color: #153b53;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 4px;
  background: rgba(226, 246, 255, .92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
  font-weight: 700;
}
.hotspot:hover { color: #fff; background: rgba(28, 105, 157, .96); }

.plan-adult { right: 15%; top: 42%; }.plan-desk { left: 43%; bottom: 24%; }.plan-child { left: 13%; top: 29%; }.plan-restroom { right: 8%; top: 14%; }
.lobby-counter { left: 45%; top: 53%; }.lobby-child { left: 9%; top: 45%; }.lobby-stairs { right: 20%; top: 35%; }.lobby-return { left: 7%; bottom: 15%; }
.child-shelf { left: 10%; top: 48%; }.child-cushion { left: 45%; bottom: 18%; }.child-window { right: 8%; top: 39%; }.child-table { left: 62%; bottom: 24%; }
.nook-table { right: 9%; bottom: 18%; }.nook-bench { right: 4%; top: 44%; }.nook-panel { left: 48%; top: 41%; }.nook-aisle { left: 15%; bottom: 17%; }

.inventory {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
  padding: 9px;
  border: 1px solid #9eb5c3;
  background: #e8f1f6;
  font-size: .76rem;
}
.inventory span { margin-right: 4px; font-weight: 700; }
.inventory b { padding: 4px 7px; color: #385669; border: 1px solid #a8bfcc; border-radius: 12px; background: #fff; font-weight: 400; }

.found-banner { margin-bottom: 18px; padding: 15px; color: #fff; border: 1px solid #337653; background: linear-gradient(#5dad7c, #38835a); text-align: center; }
.found-banner span, .found-banner small { display: block; }.found-banner span { font-size: 1.75rem; font-weight: 800; }.found-banner small { margin-top: 3px; }
.three-dialogue { padding: 16px; border: 1px solid #c7b990; background: #fffdf3; }
.speaker-row { display: grid; grid-template-columns: 67px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.speaker-row:last-child { margin-bottom: 0; }
.speaker-row img { width: 67px; height: 67px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 1px #a99b78; }
.speaker-row p { margin: 0; line-height: 1.68; }
.safety-copy { margin: 14px 0; padding: 11px; color: #425d6e; border: 1px solid #b4c7d2; background: #edf7fb; line-height: 1.65; }
.dialogue-choices { display: grid; gap: 9px; }
.choice-reply { padding: 12px; border-left: 4px solid #25809b; background: #ebf8fc; line-height: 1.65; }

.word-page {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  padding: clamp(25px, 7vw, 58px);
  border: 1px solid #b5a687;
  background: var(--paper);
  box-shadow: 0 8px 19px rgba(70, 55, 33, .23);
}

.word-page button {
  padding: 18px 4px;
  color: #4e4537;
  border: 0;
  border-bottom: 1px solid #d5c8ac;
  background: transparent;
  font-family: Georgia, "DFKai-SB", serif;
  font-size: clamp(1rem, 3vw, 1.25rem);
}

.word-page button:not(:disabled):hover { background: rgba(255, 218, 79, .2); }
.word-page .word-picked { color: #8d2810; border: 2px solid #bd6c20; background: #ffe17a; font-weight: 800; transform: scale(1.08); }
.finger { position: absolute; left: 50%; top: 52%; font-size: 3.4rem; transform: translate(-50%, -10%); filter: drop-shadow(0 2px 1px #fff); }
.word-reveal { margin-top: 15px; padding: 16px; border: 1px solid #dbb54d; background: #fff4c2; text-align: center; }
.word-reveal p { margin: 0 0 8px; line-height: 1.65; }
.word-reveal strong { display: block; color: #8d2810; font-size: 1.7rem; }

.old-facebook {
  margin-top: 20px;
  color: #333;
  border: 1px solid #7183a1;
  background: #fff;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
  box-shadow: 0 7px 18px rgba(30, 50, 78, .22);
}

.old-facebook > header { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; color: #fff; background: #3b5998; }
.old-facebook > header b { font-family: Arial, sans-serif; font-size: 1.7rem; letter-spacing: -2px; }
.old-facebook > header div { font-size: .72rem; }
.fb-search { margin: 8px 14px; padding: 5px 8px; color: #888; border: 1px solid #9aa5ba; background: #fff; font-size: .72rem; }
.fb-profile { display: grid; grid-template-columns: 185px 1fr; gap: 18px; padding: 12px 14px 20px; }
.fb-profile aside img { display: block; width: 160px; height: 160px; object-fit: cover; border: 1px solid #999; }
.fb-profile aside button { width: 160px; margin-top: 7px; padding: 5px; border: 1px solid #999; background: #eee; font-size: .69rem; }
.fb-profile nav { margin-top: 12px; color: #3b5998; line-height: 1.9; font-size: .78rem; }
.fb-profile article h2 { margin: 0; font-size: 1.5rem; }
.fb-tabs { margin: 10px 0; padding: 7px; color: #3b5998; border-bottom: 1px solid #ccd3df; background: #f0f2f7; font-size: .78rem; }
.fb-profile h3 { margin: 15px 0 8px; padding-bottom: 5px; color: #555; border-bottom: 1px solid #ccc; font-size: .9rem; }
.fb-profile dl { display: grid; grid-template-columns: 90px 1fr; margin: 0; font-size: .82rem; }
.fb-profile dt, .fb-profile dd { margin: 0; padding: 7px 4px; border-bottom: 1px solid #eee; }
.fb-profile dt { color: #777; }
.fb-update { padding: 9px; border: 1px solid #d2d8e2; background: #f5f6f8; font-size: .78rem; }

.ending-card { margin-top: 18px; padding: 17px; border: 1px solid #b7a36e; background: #fff9dc; line-height: 1.72; }
.ending-card > strong { display: block; color: #2c6f4a; font-size: 1.45rem; }
.ending-card p { margin: 8px 0; }

.game-footer { margin-top: 14px; color: #35566b; text-align: center; font-size: .7rem; text-shadow: 0 1px rgba(255, 255, 255, .6); }

@keyframes msn-nudge-motion {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-10px, 2px); }
  24% { transform: translate(10px, -2px); }
  38% { transform: translate(-8px, -1px); }
  52% { transform: translate(8px, 2px); }
  68% { transform: translate(-5px, 0); }
  84% { transform: translate(5px, -1px); }
}

.msn-window.msn-nudge { animation: msn-nudge-motion .55s linear; }

.home-stage {
  position: fixed;
  z-index: 10;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  color: #fff;
  background: #111;
}

.home-arrival-caption {
  position: fixed;
  z-index: 48;
  top: 47%;
  right: clamp(34px, 7vw, 118px);
  max-width: min(52vw, 760px);
  padding: .36em .18em .44em .36em;
  border: 0;
  color: rgba(255, 255, 255, .96);
  background: transparent;
  font-family: "I.MingCP", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  font-size: clamp(23px, 2.45vw, 40px);
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: .16em;
  text-align: left;
  text-shadow:
    0 0 3px rgba(255, 255, 255, .82),
    0 0 10px rgba(244, 248, 255, .5),
    0 2px 8px rgba(0, 0, 0, .62);
  white-space: normal;
  cursor: default;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

.home-arrival-caption--intro {
  width: auto;
  max-width: min(72vw, 920px);
  text-align: right;
  white-space: nowrap;
}

.home-arrival-caption--object {
  top: clamp(72px, 16vh, 150px);
  width: min(43vw, 700px);
  max-width: calc(100vw - 54px);
  line-height: 1.82;
}

.home-arrival-caption span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(.22em);
  animation: home-arrival-character .72s cubic-bezier(.2, .72, .25, 1) forwards;
  animation-delay: calc(.35s + var(--character-index) * .12s);
}

.home-arrival-caption.is-ready {
  cursor: pointer;
  pointer-events: auto;
}

.home-arrival-caption.is-dismissing {
  pointer-events: none;
  animation: home-arrival-dismiss .85s ease-in-out forwards;
}

.home-arrival-caption:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .68);
  outline-offset: .18em;
}

@keyframes home-arrival-character {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes home-arrival-dismiss {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(7px); transform: translateX(16px); }
}

.panorama-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.panorama-viewport:focus-visible { outline: 4px solid rgba(241, 182, 50, .9); outline-offset: -4px; }
.panorama-viewport.is-dragging { cursor: grabbing; }

.panorama-transition-frame,
.panorama-canvas,
.panorama-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.panorama-transition-frame {
  z-index: 1;
  display: block;
  object-fit: fill;
  pointer-events: none;
}
.panorama-canvas {
  z-index: 2;
  display: block;
  opacity: 0;
}
.panorama-canvas.is-ready { opacity: 1; }
.panorama-fallback {
  display: grid;
  z-index: 3;
  place-items: center;
  padding: 24px;
  color: rgba(255, 255, 255, .88);
  background: #111;
  text-align: center;
}
.panorama-fallback[hidden] { display: none; }

.home-immersive-label {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.home-immersive-label strong { font-size: 17px; }
.home-immersive-label span { font-size: 11px; }

.panorama-drag-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 23px;
  padding: 6px 11px;
  color: rgba(255, 255, 255, .9);
  border-radius: 3px;
  background: rgba(15, 25, 30, .48);
  text-shadow: 0 1px 3px #000;
  transform: translateX(-50%);
  animation: panorama-hint-fade 5s forwards;
  pointer-events: none;
  font-size: 11px;
}
@keyframes panorama-hint-fade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

.home-toast {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 58px;
  width: min(560px, calc(100% - 34px));
  padding: 10px 14px;
  color: #f7fbfd;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 4px;
  background: rgba(18, 33, 40, .82);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .36);
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.6;
}

.home-hotspot {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.home-hotspot[hidden] { display: none; }
.home-hotspot::before,
.home-hotspot::after { display: none; }

.home-hotspot.spot-phone { width: 92px; height: 64px; }
.home-hotspot.spot-newspaper { width: 170px; height: 82px; }
.home-hotspot.spot-hair { width: 72px; height: 54px; }
.home-hotspot.spot-drawing { width: 178px; height: 132px; }
.home-hotspot.spot-novel {
  width: 92px;
  height: 52px;
  border-radius: 3px;
  background: transparent;
}
.home-hotspot.spot-novel span {
  display: block;
  padding: 3px 5px;
  color: rgba(77, 48, 25, .88);
  border-radius: 2px;
  background: rgba(238, 222, 174, .56);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  font-family: "PMingLiU", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  transform: rotate(2deg);
}
.home-hotspot:focus-visible { outline: none; }
.home-object-viewer {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  background: transparent;
  cursor: default;
  touch-action: none;
}
.home-object-viewer.is-waiting-for-panorama {
  visibility: hidden;
}
.home-object-drag {
  --object-x: 0px;
  --object-y: 0px;
  --object-scale: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(210px, 42vw, 620px);
  max-height: 82vh;
  transform: translate(calc(-50% + var(--object-x)), calc(-50% + var(--object-y))) scale(var(--object-scale));
  transform-origin: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: home-object-lift .22s ease-out both;
  outline: none;
}
.home-object-drag.is-dragging { cursor: grabbing; }
.home-object-drag.object-phone { width: min(clamp(210px, 42vw, 620px), 57.96vh); }
.home-object-drag.is-zooming { cursor: zoom-in; }
.home-object-drag:focus-visible img {
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)) drop-shadow(0 0 0 rgba(255, 255, 255, .7));
}
.home-object-drag img {
  display: block;
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5));
}
.home-object-drag.object-hair {
  left: 31%;
  top: 40%;
  width: clamp(90px, 11vw, 155px);
}
.home-object-drag.object-phone { width: clamp(130px, 18vw, 240px); }
.phone-map-screen {
  position: absolute;
  z-index: 3;
  left: 13.45%;
  top: 11.88%;
  width: 75.40%;
  height: 69.37%;
  padding: 0;
  overflow: hidden;
  color: #1d2b34;
  border: 0;
  background: #e7edf0;
  box-shadow: none;
  clip-path: polygon(-0.8% 0.9%, 69% 0, 100% 92%, 27% 100%);
  opacity: 0;
  cursor: pointer;
  transform: scale(.985);
  transform-origin: 50% 55%;
  transition: opacity 1s ease-out, transform 1s ease-out, filter 1s ease-out;
  filter: brightness(.35);
  touch-action: manipulation;
}
.phone-map-screen[hidden] { display: none; }
.phone-map-screen { overflow: visible; }
.phone-map-screen.is-on { opacity: 1; transform: scale(1); filter: brightness(1); }
.phone-map-perspective {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  transform-origin: 0 0;
  will-change: transform;
}
.phone-map-header {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  padding: 7% 5% 2% 14%;
  background: linear-gradient(#fefefe, #dce8ee);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  text-align: left;
}
.phone-map-header b { display: block; color: #526d86; font: 700 clamp(5px, .56vw, 8px)/1 Arial, sans-serif; white-space: nowrap; }
.phone-map-logo { font-family: Georgia, "Times New Roman", serif !important; font-weight: 400 !important; letter-spacing: -.08em; }
.phone-map-logo span { font-style: normal; }
.phone-map-logo span:nth-child(1) { color: #1b54b3; }
.phone-map-logo span:nth-child(2) { color: #c7352a; }
.phone-map-logo span:nth-child(3) { color: #d9a400; }
.phone-map-logo span:nth-child(4) { color: #1b54b3; }
.phone-map-logo span:nth-child(5) { color: #269044; }
.phone-map-logo span:nth-child(6) { color: #c7352a; }
.phone-map-logo small { margin-left: .32em; color: #59636b; font: 400 .72em/1 Arial, sans-serif; letter-spacing: 0; }
.phone-map-header em { display: block; margin-top: 4%; padding: 2% 4%; color: #8a949b; border: 1px solid #a9b4ba; background: #fff; font: normal clamp(4px, .42vw, 6px)/1 Arial, sans-serif; }
.phone-map-body { position: absolute; inset: 22% 0 0; overflow: hidden; background: #e9e4d7; container-type: size; }
.phone-map-body .sancheng-mini-world {
  width: max(100%, 125cqh);
  height: max(100%, 80cqw);
  aspect-ratio: 5 / 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.phone-map-body > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; filter: saturate(.9) contrast(1.03); }
.phone-map-label { position: absolute; z-index: 2; padding: 1px 2px; color: #65635e; background: rgba(255, 255, 255, .72); font: normal clamp(3px, .34vw, 5px)/1 Arial, sans-serif; }
.phone-map-label.label-dongan { left: 26%; top: 24%; }
.phone-map-label.label-nanrong { left: 54%; top: 56%; }
.phone-map-destination {
  position: absolute;
  z-index: 3;
  width: 8%;
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #cf4031;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  transform: translate(-50%, -100%) rotate(-45deg);
}
.phone-map-zoom { position: absolute; z-index: 3; left: 9%; top: 15%; padding: 2% 4%; color: #555; border: 1px solid #888; background: rgba(255, 255, 255, .92); font: normal clamp(5px, .55vw, 8px)/1.25 Arial, sans-serif; }
.phone-home-key {
  position: absolute;
  z-index: 4;
  left: 60.2%;
  top: 82.5%;
  width: 6.9%;
  height: 5.6%;
  padding: 0;
  border: 0;
  border-radius: 24%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.phone-home-key:hover,
.phone-home-key:focus,
.phone-home-key:focus-visible { outline: none; box-shadow: none; background: transparent; }
.home-object-drag.object-newspaper {
  left: 44%;
  top: 44%;
  width: clamp(300px, 55vw, 760px);
}
.home-object-drag.object-newspaper img {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .18));
}
.home-object-drag.object-drawing { width: clamp(260px, 40vw, 560px); }
.home-object-drag.object-novel {
  top: 50%;
  width: clamp(245px, 30vw, 370px);
  max-height: 82vh;
  cursor: pointer;
}
.novel-object-plane {
  position: relative;
  width: 100%;
}
.home-object-drag.object-novel img {
  max-height: 82vh;
  filter:
    drop-shadow(3px 7px 4px rgba(34, 18, 10, .3))
    drop-shadow(8px 18px 15px rgba(20, 12, 8, .36));
}
@keyframes home-object-lift {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--object-x)), calc(-46% + var(--object-y))) scale(calc(var(--object-scale) * .86));
  }
  to {
    opacity: 1;
    transform: translate(calc(-50% + var(--object-x)), calc(-50% + var(--object-y))) scale(var(--object-scale));
  }
}
@media (max-width: 760px) {
  .screen { padding: 4px 4px 40px; }
  .msn-stage { height: calc(100dvh - 44px); }
  .home-immersive-label { top: 12px; left: 12px; flex-direction: column; gap: 1px; }
  .panorama-drag-hint { bottom: 14px; }
  .home-toast { bottom: 48px; }  .toolbar-glyph {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: #224f6b;
  font-family: Tahoma, Arial, sans-serif;
}
.glyph-font {
  padding-top: 1px;
  font-size: 20px;
  font-weight: 700;
  line-height: 18px;
}
.glyph-font::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 2px;
  background: #2675a7;
}
.glyph-smile, .glyph-wink {
  width: 21px;
  height: 21px;
  border: 1px solid #b37b16;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4a2 0 8%, #ffd84e 40%, #edae19 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .65);
}
.glyph-smile::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 2px;
  height: 3px;
  border-radius: 50%;
  background: #65430c;
  box-shadow: 8px 0 #65430c;
}
.glyph-smile i, .glyph-wink i {
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #71490b;
  border-radius: 0 0 10px 10px;
}
.glyph-wink { overflow: hidden; }
.glyph-wink::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 2px;
  height: 3px;
  border-radius: 50%;
  background: #65430c;
}
.glyph-wink::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 7px;
  width: 6px;
  height: 3px;
  border-top: 2px solid #65430c;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.glyph-nudge {
  width: 21px;
  height: 17px;
  margin-top: 2px;
  color: #fff;
  border: 1px solid #507c99;
  border-radius: 2px;
  background: linear-gradient(#7fc3e9, #3b84b2);
  box-shadow: -3px 0 0 -2px #558aa8, 3px 0 0 -2px #558aa8;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.glyph-nudge::before, .glyph-nudge::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 2px;
  height: 9px;
  border-top: 1px solid #54859f;
  border-bottom: 1px solid #54859f;
}
.glyph-nudge::before { left: -5px; }
.glyph-nudge::after { right: -5px; }
.glyph-color {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  padding-bottom: 2px;
}
.glyph-color::before {
  content: "A";
  position: absolute;
  left: 1px;
  top: -1px;
  color: #244d66;
  font-size: 15px;
  font-weight: 700;
}
.glyph-color i {
  width: 5px;
  height: 5px;
  margin-bottom: 0;
  border: 1px solid rgba(0, 0, 0, .15);
}
.glyph-color i:nth-child(1) { margin-left: 9px; background: #dc4848; }
.glyph-color i:nth-child(2) { background: #3c86ce; }
.glyph-color i:nth-child(3) { background: #4ca667; }
.glyph-more {
  width: 0;
  height: 0;
  margin-top: 6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #315f79;
}
.msn-format button[aria-pressed="true"] {
  box-shadow: inset 0 1px 3px rgba(36, 75, 99, .18);
}
.msn-tool-panel { flex-wrap: wrap; }
  .restart-corner { right: 7px; bottom: 7px; }
  .game-header { padding: 11px; }
  .header-status { align-items: flex-end; flex-direction: column; gap: 5px; text-align: right; }
  .chapter { padding: 14px; }
  .choice-grid { grid-template-columns: 1fr; }
  .msn-chat-layout { grid-template-columns: minmax(0, 1fr) 92px; min-height: 390px; }
  .msn-side { padding: 11px 8px; }
  .msn-side > .msn-avatar { width: 68px; height: 68px; border-width: 3px; }
  .msn-avatar-picker { width: 68px; height: 68px; }
  .msn-avatar-picker > .msn-avatar { width: 68px; height: 68px; border-width: 3px; }
  .msn-ad { padding: 8px 2px; font-size: 8px; }
  .group-pictures { grid-template-columns: 1fr; }
  .group-pictures .msn-avatar, .group-pictures .msn-avatar:first-child { grid-column: auto; width: 58px; height: 58px; }
  .map-layout { grid-template-columns: 1fr; }
  .map-panel { border-bottom: 1px solid #9eafb9; }
  .map-canvas { min-height: 390px; }
  .book-page { padding: 28px 22px; }
  .book-page p { font-size: .9rem; line-height: 1.75; }
  .fold-step-1 .fold-top { border-top-width: 130px; border-right-width: 175px; }
  .fold-step-2 .fold-top { border-top-width: 155px; border-right-width: 205px; }
  .fold-step-2 .fold-bottom { border-bottom-width: 155px; border-left-width: 205px; }
  .hotspot { padding: 5px 6px; font-size: .68rem; }
  .speaker-row { grid-template-columns: 55px 1fr; }
  .speaker-row img { width: 55px; height: 55px; }
  .fb-profile { grid-template-columns: 115px 1fr; gap: 10px; }
  .fb-profile aside img, .fb-profile aside button { width: 105px; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .msn-stage.msn-intro-opening .msn-window { animation: none !important; }
  .home-arrival-caption span { opacity: 1; filter: none; transform: none; animation: none; }
  .home-arrival-caption.is-dismissing { animation: none; }
}

@media (max-width: 640px) {
  .home-arrival-caption {
    top: 37%;
    right: 18px;
    max-width: calc(100vw - 36px);
    font-size: clamp(19px, 5.8vw, 26px);
    letter-spacing: .11em;
    white-space: normal;
  }
  .home-arrival-caption--object {
    top: 15%;
    width: calc(100vw - 36px);
    line-height: 1.75;
  }
}

/* Page 52 book-cover trigger and 2011-style map surface */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-object-drag.object-novel { cursor: grab; }
.novel-open-hotspot {
  position: absolute;
  z-index: 3;
  left: 8.5%;
  top: 20%;
  width: 16%;
  height: 42%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: none;
  transform-origin: left center;
  cursor: pointer;
  touch-action: none;
}
.novel-open-hotspot:focus,
.novel-open-hotspot:focus-visible { outline: none; box-shadow: none; }

.screen.map-mode { padding: 0; display: block; }
.map-stage-full {
  position: fixed;
  z-index: 10;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  color: #333;
  background: #d9d9d9;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}
.map-ie-chrome {
  height: 78px;
  color: #202020;
  border-bottom: 1px solid #8a9ba8;
  background: linear-gradient(#e9f2f8, #d5e3ec);
  box-shadow: 0 1px 4px rgba(39, 56, 68, .28);
  font-size: 12px;
}
.map-ie-title {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  height: 25px;
  padding: 2px 7px;
  color: #fff;
  background: linear-gradient(#67a3ca, #286e9e);
  text-shadow: 0 1px #174c70;
}
.map-ie-icon {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: #f3c61b;
  border-radius: 50%;
  background: #1f79b7;
  font: italic 700 15px/1 Georgia, serif;
}
.map-ie-window { padding-right: 3px; word-spacing: 8px; }
.map-ie-menu { height: 22px; padding: 4px 9px; border-bottom: 1px solid #b9c8d2; background: #f7fafc; }
.map-ie-address { display: flex; align-items: center; gap: 8px; height: 31px; padding: 4px 8px; }
.map-ie-nav { color: #35647e; font-size: 17px; white-space: nowrap; }
.map-ie-url {
  flex: 1;
  min-width: 0;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid #8f9da7;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.map-app-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 55px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: #fff;
}
.map-app-bar {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 230px minmax(260px, 660px) minmax(120px, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 8px 14px;
  border-bottom: 1px solid #b4b4b4;
  background: linear-gradient(#fff, #f1f1f1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.map-brand-group {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
.map-back-button {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  color: #376fae;
  border: 1px solid #9ba9b4;
  border-radius: 3px;
  background: linear-gradient(#fff, #e9eef2);
  box-shadow: inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .14);
  font: 700 22px/1 Arial, sans-serif;
  cursor: pointer;
}
.map-back-button:hover { background: linear-gradient(#f8fbfd, #dde8f0); }
.map-back-button:focus-visible { outline: 2px solid rgba(67, 125, 190, .55); outline-offset: 1px; }
.qooqle-map-brand {
  display: flex;
  align-items: baseline;
  gap: 0;
  color: #1b54b3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  font-weight: 400;
  letter-spacing: -2.5px;
  line-height: 1;
  text-shadow: 0 1px rgba(255, 255, 255, .85);
  white-space: nowrap;
}
.qooqle-map-brand span:nth-child(2) { color: #c7352a; }
.qooqle-map-brand span:nth-child(3) { color: #d9a400; }
.qooqle-map-brand span:nth-child(4) { color: #1b54b3; }
.qooqle-map-brand span:nth-child(5) { color: #269044; }
.qooqle-map-brand span:nth-child(6) { color: #c7352a; }
.qooqle-map-brand b { margin-left: 8px; color: #555; font-family: Arial, "Microsoft JhengHei", sans-serif; font-size: 17px; font-weight: 400; letter-spacing: 0; }
.map-search-form { display: grid; grid-template-columns: minmax(0, 1fr) 92px; min-width: 0; }
.map-search-form input {
  min-width: 0;
  height: 34px;
  padding: 5px 9px;
  color: #222;
  border: 1px solid #888;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .13);
  font: 14px Arial, "Microsoft JhengHei", sans-serif;
}
.map-search-form input:focus { outline: 2px solid rgba(67, 125, 190, .42); outline-offset: -2px; }
.map-search-form button {
  height: 34px;
  padding: 0 10px;
  color: #fff;
  border: 1px solid #2c5e9b;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(#5d8fc9, #376fb2);
  box-shadow: inset 0 1px rgba(255, 255, 255, .35);
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 -1px rgba(0, 0, 0, .28);
}
.map-search-form button:hover { background: linear-gradient(#6b9bd0, #2f67a9); }
.map-app-links { justify-self: end; color: #356ca4; font-size: 12px; white-space: nowrap; }
.map-workspace {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}
.map-results-panel {
  position: relative;
  z-index: 5;
  min-width: 0;
  overflow: auto;
  border-right: 1px solid #999;
  background: #fff;
  box-shadow: 1px 0 4px rgba(0, 0, 0, .15);
  font-size: 13px;
}
.map-panel-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #b8b8b8; background: #ececec; }
.map-panel-tabs b,
.map-panel-tabs span { padding: 9px 8px; text-align: center; }
.map-panel-tabs b { color: #333; border-right: 1px solid #c1c1c1; background: #fff; }
.map-panel-tabs span { color: #777; font-weight: 400; }
.map-clue-card { margin: 14px 13px 10px; padding: 11px 12px; border: 1px solid #d3c184; background: #fffbea; }
.map-clue-card strong { color: #333; font-size: 13px; }
.map-clue-card p { margin: 8px 0 0; color: #555; line-height: 1.75; }
.map-search-status { min-height: 42px; margin: 0; padding: 10px 13px; color: #444; border-top: 1px solid #e2e2e2; line-height: 1.55; }
.map-destination-list {
  display: grid;
  gap: 7px;
  padding: 0 10px 12px;
}
.map-selected-place {
  padding: 10px;
  border: 1px solid #c7c7c7;
  border-radius: 2px;
  background: linear-gradient(#fff, #f4f4f4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.map-selected-place header {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 1px 7px;
  text-align: left;
}
.map-place-dot { grid-row: 1 / 3; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: #cf4031; box-shadow: 0 0 0 1px rgba(133, 29, 19, .18); }
.map-selected-place b { display: block; color: #275b94; font-size: 14px; }
.map-selected-place small { display: block; margin-top: 3px; color: #777; font-size: 11px; line-height: 1.35; }
.map-depart-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 76px;
  height: 30px;
  margin: 11px 0 0 22px;
  padding: 0 12px 0 9px;
  color: #345f91;
  border: 1px solid #a9b8c6;
  border-radius: 2px;
  background: linear-gradient(#fff, #e9eef3);
  box-shadow: inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .16);
  font: 700 12px/1 Arial, "Microsoft JhengHei", sans-serif;
  text-shadow: 0 1px #fff;
  cursor: pointer;
}
.map-depart-button i {
  display: block;
  width: 14px;
  height: 17px;
  background: linear-gradient(#5c9cda, #1d65aa);
  clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.map-depart-button:hover { color: #174f87; border-color: #7899b9; background: linear-gradient(#fff, #dce8f2); }
.map-depart-button:active { padding-top: 1px; background: linear-gradient(#dce8f2, #fff); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16); }
.map-depart-button:focus-visible { outline: 2px solid #477fbb; outline-offset: 2px; }
.map-results-panel > small { display: block; padding: 0 13px 14px; color: #888; line-height: 1.45; }
.map-viewer {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: #eee9dd;
}
.map-viewer.is-dragging { cursor: grabbing; }
.map-viewer:focus-visible { outline: 3px solid rgba(47, 112, 180, .7); outline-offset: -3px; }
.map-tile-layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.map-viewer:not(.is-dragging) .map-tile-layer { transition: transform .14s ease-out; }
.map-tile-layer > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.map-area-label {
  position: absolute;
  z-index: 2;
  padding: 2px 5px;
  color: #777168;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(169, 163, 152, .38);
  font-size: 12px;
  letter-spacing: .08em;
  box-shadow: 0 1px 1px rgba(255, 255, 255, .8);
}
.area-dongan { left: 28%; top: 23%; }
.area-nanrong { left: 52%; top: 53%; }
.area-beixing { left: 70%; top: 22%; }
.area-xihe { left: 18%; top: 68%; }
.map-destination-marker {
  position: absolute;
  z-index: 3;
  display: grid;
  justify-items: center;
  min-width: 92px;
  padding: 0;
  color: #333;
  border: 0;
  background: transparent;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28));
}
.map-destination-pin {
  position: relative;
  display: block;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #cf4031;
  box-shadow: 0 0 0 1px rgba(104, 27, 19, .55);
  transform: rotate(-45deg);
}
.map-destination-pin::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
.map-destination-marker b {
  margin-top: 3px;
  padding: 3px 7px;
  color: #333;
  border: 1px solid #999;
  border-radius: 2px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  font-size: 12px;
  white-space: nowrap;
}
.map-destination-marker:hover,
.map-destination-marker:focus-visible { z-index: 6; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .38)); }
.map-destination-marker:focus-visible { outline: 2px solid #356fae; outline-offset: 4px; }
.map-destination-marker.is-selected { z-index: 6; }
.map-destination-marker.is-selected .map-destination-pin { background: #356fae; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 4px rgba(53, 111, 174, .35); }
.map-destination-marker.is-selected b { color: #174f87; border-color: #6e93b8; background: #f4f9ff; }
.map-type-tabs {
  position: absolute;
  z-index: 4;
  top: 9px;
  right: 9px;
  display: flex;
  border: 1px solid #888;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  font-size: 12px;
}
.map-type-tabs b,
.map-type-tabs span { padding: 7px 12px; }
.map-type-tabs b { color: #fff; background: #4f78a7; }
.map-type-tabs span { color: #777; border-left: 1px solid #aaa; }
.map-zoom-control {
  position: absolute;
  z-index: 4;
  top: 48px;
  left: 12px;
  display: grid;
  width: 31px;
  border: 1px solid #858585;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
.map-zoom-control button {
  width: 29px;
  height: 31px;
  padding: 0;
  color: #555;
  border: 0;
  border-bottom: 1px solid #bbb;
  background: linear-gradient(#fff, #ececec);
  font: 700 18px/1 Arial, sans-serif;
}
.map-zoom-control button:last-child { border-bottom: 0; }
.map-zoom-control button:nth-child(2) { color: #7398b5; font-size: 15px; }
.map-scale {
  position: absolute;
  z-index: 4;
  left: 13px;
  bottom: 12px;
  color: #444;
  font-size: 10px;
  text-shadow: 0 1px #fff;
}
.map-scale i { display: block; width: 74px; height: 5px; border: 1px solid #333; border-top: 0; }
.map-scale span { display: block; margin-top: 2px; }

@media (max-width: 760px) {
  .map-ie-chrome { display: none; }
  .map-app-shell { inset: 0; grid-template-rows: 58px minmax(0, 1fr); }
  .map-app-bar { grid-template-columns: 126px minmax(0, 1fr); gap: 7px; padding: 8px; }
  .map-brand-group { gap: 5px; }
  .map-back-button { flex-basis: 32px; width: 32px; height: 38px; }
  .qooqle-map-brand { font-size: 22px; letter-spacing: -1.8px; }
  .qooqle-map-brand b { margin-left: 3px; font-size: 11px; }
  .map-search-form { grid-template-columns: minmax(0, 1fr) 56px; }
  .map-search-form input { height: 38px; padding: 6px 7px; font-size: 16px; }
  .map-search-form button { height: 38px; padding: 0 5px; font-size: 12px; }
  .map-app-links { display: none; }
  .map-workspace { position: relative; display: block; min-height: 0; }
  .map-viewer { position: absolute; inset: 0; }
  .map-results-panel {
    position: absolute;
    z-index: 7;
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-height: 190px;
    border: 1px solid #8c8c8c;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .32);
  }
  .map-panel-tabs { display: none; }
  .map-clue-card { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0; padding: 9px 10px; border: 0; border-bottom: 1px solid #ddd0a7; }
  .map-clue-card strong { padding-top: 2px; white-space: nowrap; }
  .map-clue-card p { margin: 0; line-height: 1.45; }
  .map-search-status { min-height: 0; padding: 7px 10px; font-size: 12px; }
  .map-destination-list { grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 8px 8px; }
  .map-selected-place { grid-column: 1 / -1; padding: 8px; }
  .map-selected-place small { display: none; }
  .map-depart-button { margin-top: 7px; }
  .map-results-panel > small { display: none; }
  .map-type-tabs { top: 8px; right: 8px; }
  .map-zoom-control { top: 48px; left: 8px; }
  .map-scale { left: 49px; bottom: 204px; }
  .map-area-label { font-size: 10px; }
  .map-destination-marker { min-width: 76px; }
  .map-destination-pin { width: 22px; height: 22px; }
  .map-destination-pin::after { top: 6px; left: 6px; width: 6px; height: 6px; }
  .map-destination-marker b { font-size: 10px; }
  .screen.map-mode ~ .restart-corner { z-index: 22; width: 32px; height: 32px; right: 10px; bottom: 202px; }
}

@media (max-width: 430px) {
  .map-app-bar { grid-template-columns: 94px minmax(0, 1fr); }
  .qooqle-map-brand b { display: none; }
  .map-search-form { grid-template-columns: minmax(0, 1fr) 50px; }
  .map-search-form input::placeholder { color: #777; }
  .map-clue-card { grid-template-columns: 1fr; gap: 3px; }
  .map-clue-card p { display: flex; flex-wrap: wrap; gap: 0 8px; }
  .map-clue-card p br { display: none; }
}

/* Straight-on Taiwanese print-book reader for the 100 imported puzzles. */
.ebook-chapter {
  width: min(1180px, 100%);
  padding: clamp(14px, 2.2vw, 26px);
  border-color: #5f4636;
  background: linear-gradient(#eee8dc, #d7c9b7);
  box-shadow: 0 18px 45px rgba(35, 24, 17, .42);
}
.ebook-masthead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  gap: 18px;
  margin: -1px -1px 13px;
  padding: 16px 22px 16px 70px;
  color: #f9f2df;
  border: 1px solid #432820;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 26%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px),
    #762f28;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 3px 9px rgba(40, 26, 17, .25);
}
.ebook-masthead h2 {
  margin: 1px 0 2px;
  font-family: "Microsoft JhengHei", sans-serif;
  font-size: clamp(1.65rem, 3.3vw, 2.55rem);
  font-weight: 900;
  letter-spacing: .08em;
}
.ebook-masthead p { margin: 0; color: #eadcc5; font-size: .78rem; letter-spacing: .08em; }
.ebook-masthead .ebook-imprint { color: #fff7e8; font-weight: 700; letter-spacing: .18em; }
.ebook-masthead .page-badge { color: #6c3029; border-color: #ead8b5; background: #fff9e8; }
.ebook-close {
  position: absolute;
  left: 17px;
  top: 50%;
  width: 37px;
  height: 37px;
  padding: 0;
  color: #fff9e8;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  background: rgba(39, 18, 15, .28);
  font-size: 25px;
  line-height: 1;
  transform: translateY(-50%);
}
.ebook-close:hover { background: rgba(39, 18, 15, .52); }

.ebook-toolbar {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 13px;
  width: min(1040px, 100%);
  margin: 0 auto 13px;
}
.ebook-toolbar > button {
  width: 46px;
  height: 46px;
  padding: 0 0 4px;
  color: #62372b;
  border: 1px solid #9f846c;
  border-radius: 50%;
  background: linear-gradient(#fffdf5, #e4d8c7);
  box-shadow: 0 2px 5px rgba(54, 37, 26, .22);
  font: 700 32px/1 Georgia, serif;
}
.ebook-toolbar > button:disabled { opacity: .35; cursor: default; }
.ebook-range-wrap { min-width: 0; }
.ebook-range-wrap label { display: flex; justify-content: space-between; margin-bottom: 5px; color: #583c2e; font-size: .76rem; font-weight: 700; letter-spacing: .08em; }
.ebook-range-wrap input {
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: #8c332a;
  cursor: ew-resize;
}
.ebook-range-wrap input { direction: rtl; }
.ebook-range-ticks { position: relative; height: 11px; margin-top: -2px; color: #755c4a; font: 10px/1 Georgia, serif; direction: ltr; }
.ebook-range-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.ebook-range-ticks span:first-child { transform: none; }
.ebook-range-ticks span:last-child { transform: translateX(-100%); }

.ebook-shell {
  width: min(1080px, 100%);
  margin: auto;
  padding: clamp(10px, 1.5vw, 17px);
  border: 1px solid #4e2f20;
  border-radius: 9px;
  background:
    linear-gradient(90deg, #5b3322, #70452f 48%, #512b1c),
    #5b3322;
  box-shadow: 0 15px 28px rgba(42, 26, 17, .36), inset 0 1px rgba(255, 255, 255, .13);
  perspective: 1600px;
}
.ebook-spread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 590px;
  overflow: hidden;
  border: 1px solid #b6a78c;
  border-radius: 4px 7px 7px 4px;
  background: #fffdf4;
  box-shadow: inset 0 0 32px rgba(91, 64, 35, .09), 0 2px 4px rgba(26, 18, 12, .4);
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: none;
}
.ebook-shell.is-dragging .ebook-spread { cursor: grabbing; }
.ebook-shell.is-dragging .ebook-page {
  user-select: none;
  -webkit-user-select: none;
}
.ebook-spine {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 26px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(72, 51, 31, .18) 42%, rgba(255, 255, 255, .72) 52%, rgba(71, 49, 29, .15) 63%, transparent);
  transform: translateX(-50%);
}
.ebook-page {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(29px, 4vw, 48px) clamp(27px, 4.3vw, 53px) 29px;
  color: #302c27;
  background:
    radial-gradient(circle at 20% 12%, rgba(171, 138, 77, .05), transparent 19rem),
    repeating-linear-gradient(0deg, rgba(92, 67, 35, .018) 0 1px, transparent 1px 4px),
    #fffdf4;
  font-family: "PMingLiU", "Songti TC", "Noto Serif TC", serif;
}
.ebook-page-left { border-right: 1px solid rgba(114, 91, 60, .18); box-shadow: inset -24px 0 28px -30px rgba(46, 30, 17, .8); }
.ebook-page-right { box-shadow: inset 24px 0 28px -30px rgba(46, 30, 17, .8); }
.ebook-page-heading { padding-bottom: 13px; border-bottom: 2px solid #84382f; }
.ebook-page-heading > span { color: #84382f; font: 800 .86rem/1 "Microsoft JhengHei", sans-serif; letter-spacing: .12em; }
.ebook-page-heading em { float: right; color: #6e6457; font: normal .72rem/1.25 "Microsoft JhengHei", sans-serif; }
.ebook-page-heading h3 { clear: both; margin: 13px 0 8px; color: #231f1c; font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: .08em; }
.ebook-page-heading p { margin: 0; color: #796e61; font: .66rem/1.55 "Microsoft JhengHei", sans-serif; }
.ebook-section { margin-top: 19px; }
.ebook-section h4,
.ebook-question h4,
.ebook-answer-heading h3 { margin: 0 0 8px; color: #713129; font-family: "Microsoft JhengHei", sans-serif; }
.ebook-section h4,
.ebook-question h4 { font-size: .82rem; letter-spacing: .16em; }
.ebook-section > p,
.ebook-question > p,
.ebook-answer-text { margin: 0; font-size: clamp(.93rem, 1.55vw, 1.08rem); line-height: 1.9; text-align: justify; }
.ebook-question { margin-top: 19px; padding: 13px 15px; border: 1px solid #d5c29e; background: rgba(246, 235, 207, .72); }
.ebook-answer-heading { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #84382f; }
.ebook-answer-heading span { color: #a88c69; font: 700 .72rem/1 Arial, sans-serif; letter-spacing: .22em; }
.ebook-answer-heading h3 { margin-top: 8px; font-size: clamp(1.25rem, 2.3vw, 1.75rem); letter-spacing: .12em; }
.ebook-answer-text { font-size: clamp(1rem, 1.7vw, 1.13rem); }
.ebook-page footer { display: flex; justify-content: space-between; align-items: end; margin-top: auto; padding-top: 25px; color: #8b7f6e; font-size: .67rem; letter-spacing: .08em; }
.ebook-page footer b { color: #6e6254; font: normal .76rem/1 Georgia, serif; }
.ebook-support-table { width: 100%; margin: 14px 0 0; border-collapse: collapse; color: #423b33; background: rgba(255, 255, 255, .5); font-size: .82rem; }
.ebook-support-table td { padding: 7px 9px; border: 1px solid #bfae91; text-align: center; white-space: pre-wrap; }

.ebook-turn-sheet {
  position: absolute;
  z-index: 10;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 50%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #e2d7c1, #fffdf4 14%, #f5eedf 88%, #cdbda2);
  box-shadow: -8px 0 18px rgba(55, 38, 23, .28);
  transform-origin: right center;
  backface-visibility: hidden;
}
.ebook-shell.turn-forward .ebook-turn-sheet { animation: ebook-turn-forward .58s ease-in-out both; }
.ebook-shell.turn-backward .ebook-turn-sheet { left: auto; right: 0; transform-origin: left center; animation: ebook-turn-backward .58s ease-in-out both; }
.ebook-shell.is-dragging .ebook-turn-sheet { display: none; }
.ebook-drag-fold {
  position: absolute;
  z-index: 11;
  inset: auto;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.ebook-drag-underleaf { fill: #f8f2e4; }
.ebook-drag-fold-shadow { fill: rgba(66, 43, 21, .22); filter: blur(4px); transform: translate(2px, 3px); }
.ebook-drag-fold-back { stroke: #b4a182; stroke-width: .65px; }
.ebook-drag-fold-edge { fill: none; stroke: rgba(106, 83, 53, .48); stroke-width: .8px; }
@keyframes ebook-turn-forward {
  0% { opacity: .98; transform: rotateY(0deg); }
  48% { opacity: 1; box-shadow: 22px 0 28px rgba(42, 28, 17, .34); }
  100% { opacity: 0; transform: rotateY(178deg); }
}
@keyframes ebook-turn-backward {
  0% { opacity: .98; transform: rotateY(0deg); }
  48% { opacity: 1; box-shadow: -22px 0 28px rgba(42, 28, 17, .34); }
  100% { opacity: 0; transform: rotateY(-178deg); }
}
.ebook-browse-hint { margin: 10px 0 0; color: #624b3a; font-size: .72rem; text-align: center; }

.ebook-fold-overlay { position: absolute; z-index: 7; inset: 0; overflow: hidden; pointer-events: none; }
.ebook-fold-corner { position: absolute; width: 0; height: 0; filter: drop-shadow(3px 4px 3px rgba(58, 39, 22, .24)); transition: border-width .55s ease; }
.ebook-fold-top { left: 0; top: 0; border-top: 0 solid #e5d8bd; border-right: 0 solid transparent; }
.ebook-fold-bottom { right: 0; bottom: 0; border-bottom: 0 solid #dfd0b3; border-left: 0 solid transparent; }
.fold-step-1 .ebook-fold-top { border-top-width: 180px; border-right-width: 245px; }
.fold-step-2 .ebook-fold-top { border-top-width: 200px; border-right-width: 275px; }
.fold-step-2 .ebook-fold-bottom { border-bottom-width: 200px; border-left-width: 275px; }
.ebook-fold-overlay p {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 48%;
  margin: 0;
  padding: 12px 16px;
  color: #5a3d08;
  border: 1px solid #d2b850;
  background: rgba(255, 235, 137, .94);
  box-shadow: 0 4px 13px rgba(74, 50, 19, .2);
  font: 800 clamp(.88rem, 1.6vw, 1.08rem)/1.7 "Microsoft JhengHei", sans-serif;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s, transform .4s;
}
.fold-step-2 .ebook-fold-overlay p { opacity: 1; transform: translateY(0); }
.ebook-fold-challenge { width: min(980px, 100%); margin: 12px auto 0; padding: 13px 16px 4px; border: 1px solid #bca78a; background: rgba(255, 250, 239, .74); }
.ebook-fold-challenge .instruction { margin-top: 2px; }

@media (max-width: 760px) {
  .ebook-chapter { padding: 10px; }
  .ebook-masthead { min-height: 78px; padding: 12px 12px 12px 55px; }
  .ebook-masthead h2 { font-size: 1.55rem; }
  .ebook-masthead .ebook-imprint { letter-spacing: .08em; }
  .ebook-close { left: 10px; width: 34px; height: 34px; }
  .ebook-toolbar { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 7px; }
  .ebook-toolbar > button { width: 38px; height: 38px; }
  .ebook-shell { padding: 7px; }
  .ebook-spread { grid-template-columns: 1fr; min-height: 0; }
  .ebook-spine { display: none; }
  .ebook-page { min-height: 520px; padding: 30px 24px 24px; }
  .ebook-page-left { border-right: 0; border-bottom: 1px solid #cabc9f; box-shadow: inset 0 -18px 24px -24px rgba(46, 30, 17, .6); }
  .ebook-page-right { box-shadow: inset 0 18px 24px -24px rgba(46, 30, 17, .6); }
  .ebook-turn-sheet { width: 100%; }
  .ebook-section > p, .ebook-question > p, .ebook-answer-text { font-size: 1rem; }
  .fold-step-1 .ebook-fold-top { border-top-width: 120px; border-right-width: 165px; }
  .fold-step-2 .ebook-fold-top { border-top-width: 135px; border-right-width: 185px; }
  .fold-step-2 .ebook-fold-bottom { border-bottom-width: 135px; border-left-width: 185px; }
  .ebook-fold-overlay p { top: 46%; left: 7%; right: 7%; }
}

@media (prefers-reduced-motion: reduce) {
  .ebook-shell.turn-forward .ebook-turn-sheet,
  .ebook-shell.turn-backward .ebook-turn-sheet { animation: none; }
}

/* A real floating Taiwanese book: vertical type, right page first, right-to-left turns. */
.ebook-chapter {
  width: min(1180px, 100%);
  padding: 0 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ebook-masthead {
  width: min(1080px, calc(100% - 20px));
  min-height: 42px;
  margin: 0 auto 1px;
  padding: 0;
  color: #fffaf0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ebook-close {
  left: 8px;
  width: 40px;
  height: 40px;
  color: #4d3024;
  border-color: rgba(103, 72, 50, .72);
  background: linear-gradient(#fffdf6, #ddceb9);
  box-shadow: 0 3px 9px rgba(28, 18, 11, .32);
}
.ebook-close:hover { background: #fffdf6; }
.ebook-toolbar {
  grid-template-columns: 40px 46px minmax(0, 1fr) 46px;
  width: min(780px, calc(100% - 24px));
  margin: 0 auto 5px;
}
.ebook-close.ebook-close-inline {
  position: static;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #4d3024;
  border: 1px solid #82664d;
  border-radius: 50%;
  background: linear-gradient(#fffdf6, #d8c7af);
  box-shadow: 0 3px 9px rgba(28, 18, 11, .34);
  font-size: 24px;
  line-height: 1;
  transform: none;
}
.ebook-range-wrap label,
.ebook-range-ticks {
  color: #fffaf0;
  text-shadow: 0 1px 4px rgba(24, 15, 9, .9), 0 0 2px #23170f;
}
.ebook-toolbar > button {
  border-color: #82664d;
  background: linear-gradient(#fffdf6, #d8c7af);
  box-shadow: 0 3px 9px rgba(28, 18, 11, .34);
}
.ebook-shell {
  position: relative;
  width: min(1080px, calc(100% - 12px));
  padding: clamp(12px, 1.7vw, 19px) clamp(12px, 1.8vw, 21px) 11px;
  border: 1px solid #3f271b;
  border-radius: 7px 13px 15px 8px;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, .18), transparent 43%),
    linear-gradient(90deg, #3e2116, #6d3e28 8%, #744832 48%, #61351f 92%, #321a12);
  box-shadow:
    0 34px 58px rgba(22, 13, 8, .5),
    0 7px 12px rgba(22, 13, 8, .38),
    inset 0 1px rgba(255, 255, 255, .18),
    inset 0 -5px 8px rgba(21, 11, 7, .4);
  perspective: 1700px;
}
.ebook-shell::after {
  display: none;
}
.ebook-spread {
  z-index: 1;
  min-height: 630px;
  border-color: #a79679;
  border-radius: 5px 9px 9px 5px;
  box-shadow: inset 0 0 34px rgba(91, 64, 35, .1), 0 3px 7px rgba(24, 15, 9, .58);
}
.ebook-spread::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 1.5%;
  right: 1.5%;
  bottom: 0;
  height: 5px;
  pointer-events: none;
  border-radius: 0 0 5px 5px;
  background: repeating-linear-gradient(0deg, rgba(185, 168, 137, .75) 0 1px, rgba(255, 250, 235, .9) 1px 2px);
  box-shadow: 0 1px 1px rgba(65, 45, 27, .24);
}
.ebook-page {
  box-sizing: border-box;
  display: block;
  min-height: 630px;
  height: 630px;
  overflow: hidden;
  padding: 35px 34px 48px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .055em;
}
.ebook-page-left {
  grid-column: 2;
  grid-row: 1;
  border-right: 0;
  border-left: 1px solid rgba(114, 91, 60, .18);
  box-shadow: inset 24px 0 28px -30px rgba(46, 30, 17, .8);
}
.ebook-page-right {
  grid-column: 1;
  grid-row: 1;
  box-shadow: inset -24px 0 28px -30px rgba(46, 30, 17, .8);
}
.ebook-page-heading {
  margin: 0 0 0 19px;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 2px solid #84382f;
}
.ebook-page-heading > span {
  display: inline-block;
  margin: 0 0 0 7px;
  line-height: 1.35;
}
.ebook-page-heading em {
  float: none;
  display: inline-block;
  margin: 10px 0 0;
  line-height: 1.5;
}
.ebook-page-heading h3 {
  clear: none;
  margin: 0 10px 0 12px;
  color: #241f1b;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  line-height: 1.35;
  letter-spacing: .13em;
}
.ebook-page-heading p {
  margin: 0 8px 0 0;
  line-height: 1.7;
}
.ebook-section {
  margin: 0 0 0 17px;
}
.ebook-section h4,
.ebook-question h4 {
  margin: 0 0 0 7px;
  font-size: .77rem;
  line-height: 1.55;
}
.ebook-section > p,
.ebook-question > p,
.ebook-answer-text {
  margin: 0;
  font-size: clamp(.86rem, 1.3vw, .98rem);
  line-height: 1.85;
  text-align: justify;
  white-space: pre-line;
}
.ebook-question {
  margin: 0;
  padding: 11px 10px;
  border-color: #d3bd94;
  background: rgba(246, 235, 207, .72);
}
.ebook-answer-heading {
  margin: 0 0 0 22px;
  padding: 0 0 0 13px;
  border: 0;
  border-left: 2px solid #84382f;
}
.ebook-answer-heading span { line-height: 1.3; }
.ebook-answer-heading h3 {
  margin: 10px 0 0;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
}
.ebook-answer-text { margin: 0 0 0 22px; }
.ebook-page footer {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 15px;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  writing-mode: horizontal-tb;
}
.ebook-support-table {
  display: inline-table;
  width: auto;
  max-width: 190px;
  margin: 0 0 0 14px;
  writing-mode: horizontal-tb;
  font-size: .72rem;
  vertical-align: top;
}
.ebook-support-table td { padding: 5px 6px; }
.ebook-fold-overlay p {
  left: 47%;
  right: auto;
  top: 16%;
  width: auto;
  height: 66%;
  padding: 13px 12px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.7;
}
.ebook-browse-hint {
  color: #fffaf0;
  text-shadow: 0 1px 4px rgba(24, 15, 9, .9), 0 0 2px #23170f;
}

@media (max-width: 760px) {
  .ebook-chapter { padding: 0 0 12px; }
  .ebook-masthead { min-height: 40px; padding: 0; }
  .ebook-close { left: 4px; width: 36px; height: 36px; }
  .ebook-toolbar { grid-template-columns: 34px 38px minmax(0, 1fr) 38px; gap: 6px; width: calc(100% - 8px); }
  .ebook-close.ebook-close-inline { width: 34px; height: 34px; font-size: 21px; }
  .ebook-shell { width: calc(100% - 6px); padding: 8px 8px 8px; }
  .ebook-spread { grid-template-columns: 1fr; min-height: 0; }
  .ebook-page {
    grid-column: 1;
    min-height: 555px;
    height: 555px;
    padding: 29px 23px 44px;
  }
  .ebook-page-left {
    grid-row: 1;
    border-left: 0;
    border-bottom: 1px solid #cabc9f;
    box-shadow: inset 0 -18px 24px -24px rgba(46, 30, 17, .6);
  }
  .ebook-page-right {
    grid-row: 2;
    box-shadow: inset 0 18px 24px -24px rgba(46, 30, 17, .6);
  }
  .ebook-page-heading h3 { font-size: 1.12rem; }
  .ebook-section > p,
  .ebook-question > p,
  .ebook-answer-text { font-size: .86rem; line-height: 1.72; }
  .ebook-turn-sheet { width: 100%; }
  .ebook-fold-overlay p { left: 38%; top: 15%; height: 34%; }
}

/* DOCX front matter and adaptive long-case composition. */
.ebook-cover-page,
.ebook-cover-inside,
.ebook-toc-page {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: normal;
}
.ebook-cover-page,
.ebook-cover-inside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ebook-cover-page {
  color: #fff8e8;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
    #77342d;
}
.ebook-cover-mark {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 28px;
  border: 2px solid rgba(255, 245, 219, .76);
  border-radius: 50%;
  font: 700 2.2rem/1 Georgia, serif;
}
.ebook-cover-page h2 { max-width: 360px; margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.35; letter-spacing: .12em; }
.ebook-cover-page p { margin: 24px 0 9px; color: #eadbc0; letter-spacing: .18em; }
.ebook-cover-page b { font-size: .78rem; letter-spacing: .2em; }
.ebook-cover-inside { color: #50392c; }
.ebook-cover-inside span { color: #9a6b52; font: 700 .74rem/1 "Microsoft JhengHei", sans-serif; letter-spacing: .22em; }
.ebook-cover-inside h3 { margin: 24px 0 18px; color: #713129; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: .1em; }
.ebook-cover-inside p { max-width: 300px; margin: 0; font-size: 1rem; line-height: 2; }
.ebook-cover-inside b { margin-top: 38px; color: #7f6a59; font-size: .75rem; letter-spacing: .14em; }

.ebook-front-heading {
  margin: 0 0 0 20px;
  padding: 0 0 0 13px;
  border-left: 2px solid #84382f;
}
.ebook-front-heading span { color: #a88c69; font: 700 .7rem/1 Arial, sans-serif; letter-spacing: .2em; }
.ebook-front-heading h3 { margin: 9px 0 0 10px; color: #713129; font-size: 1.45rem; line-height: 1.35; letter-spacing: .14em; }
.ebook-front-heading p { margin: 0; color: #5b4c40; font-size: .86rem; line-height: 1.75; }
.ebook-front-copy { margin: 0 0 0 18px; }
.ebook-front-copy p { margin: 0 0 0 13px; font-size: .88rem; line-height: 1.78; text-align: justify; }
.ebook-front-byline { margin: 0 0 0 18px; color: #6e5544; font: 700 .78rem/1.8 "Microsoft JhengHei", sans-serif; }

.ebook-toc-page { padding: 29px 34px 48px; }
.ebook-toc-heading { display: flex; align-items: baseline; gap: 13px; padding-bottom: 12px; border-bottom: 2px solid #84382f; }
.ebook-toc-heading span { color: #a88c69; font: 700 .68rem/1 Arial, sans-serif; letter-spacing: .2em; }
.ebook-toc-heading h3 { margin: 0; color: #713129; font-size: 1.55rem; letter-spacing: .15em; }
.ebook-toc-heading p,
.ebook-toc-range { margin: 0; color: #6e5d4e; font: 700 .72rem/1.5 "Microsoft JhengHei", sans-serif; letter-spacing: .05em; }
.ebook-toc-range { padding: 8px 0 11px; border-bottom: 1px solid #cdbb9c; }
.ebook-toc-list { margin: 12px 0 0; padding: 0; list-style: none; }
.ebook-toc-list li { margin: 0; border-bottom: 1px dotted rgba(126, 102, 73, .34); }
.ebook-toc-list button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 26px;
  padding: 2px 1px;
  color: #352d27;
  border: 0;
  background: transparent;
  font-family: "PMingLiU", "Songti TC", "Noto Serif TC", serif;
  text-align: left;
}
.ebook-toc-list button:hover { color: #7b3029; background: rgba(132, 56, 47, .06); }
.ebook-toc-list b { color: #84382f; font: 700 .72rem/1 Georgia, serif; }
.ebook-toc-list span { overflow: hidden; font-size: .84rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ebook-toc-list i { color: #756454; font: normal .72rem/1 Georgia, serif; text-align: right; }

.ebook-page-dense {
  padding: 27px 25px 44px;
  letter-spacing: .025em;
}
.ebook-page-dense .ebook-page-heading { margin-left: 12px; padding-left: 9px; }
.ebook-page-dense .ebook-page-heading > span { margin-left: 4px; font-size: .72rem; }
.ebook-page-dense .ebook-page-heading h3 { margin-right: 7px; margin-left: 8px; font-size: clamp(1.02rem, 1.5vw, 1.25rem); letter-spacing: .08em; }
.ebook-page-dense .ebook-page-heading p { margin-right: 4px; font-size: .58rem; }
.ebook-page-dense .ebook-section { margin-left: 10px; }
.ebook-page-dense .ebook-section h4,
.ebook-page-dense .ebook-question h4 { margin-left: 4px; font-size: .66rem; }
.ebook-page-dense .ebook-section > p,
.ebook-page-dense .ebook-question > p,
.ebook-page-dense .ebook-answer-text {
  font-size: clamp(.7rem, 1vw, .79rem);
  line-height: 1.55;
  letter-spacing: .015em;
}
.ebook-page-dense .ebook-question { padding: 7px 6px; }
.ebook-page-dense .ebook-answer-heading { margin-left: 13px; padding-left: 9px; }
.ebook-page-dense .ebook-answer-heading h3 { margin-top: 7px; font-size: 1.05rem; }
.ebook-page-dense .ebook-answer-text { margin-left: 12px; }

@media (max-width: 760px) {
  .ebook-cover-page h2 { font-size: 2rem; }
  .ebook-cover-page,
  .ebook-cover-inside,
  .ebook-toc-page { min-height: 555px; height: 555px; }
  .ebook-front-prose { padding: 25px 20px 42px; }
  .ebook-front-heading { margin-left: 13px; padding-left: 9px; }
  .ebook-front-heading h3 { font-size: 1.2rem; }
  .ebook-front-heading p,
  .ebook-front-copy p { font-size: .78rem; line-height: 1.62; }
  .ebook-front-copy { margin-left: 11px; }
  .ebook-front-copy p { margin-left: 8px; }
  .ebook-toc-page { padding: 23px 20px 42px; }
  .ebook-toc-heading { gap: 8px; }
  .ebook-toc-heading h3 { font-size: 1.3rem; }
  .ebook-toc-heading p,
  .ebook-toc-range { font-size: .64rem; }
  .ebook-toc-list { margin-top: 8px; }
  .ebook-toc-list button { min-height: 24px; }
  .ebook-toc-list span { font-size: .78rem; }
  .ebook-page-dense { padding: 23px 17px 40px; }
  .ebook-page-dense .ebook-section > p,
  .ebook-page-dense .ebook-question > p,
  .ebook-page-dense .ebook-answer-text { font-size: .69rem; line-height: 1.46; }
}

/* Lock every glyph to a fixed page coordinate system; only the whole book scales. */
.ebook-stage {
  position: relative;
  margin: 0 auto;
}
.ebook-shell {
  box-sizing: border-box;
  width: 1080px;
  margin: 0;
  transform: scale(var(--ebook-scale, 1));
  transform-origin: top left;
}
.ebook-spread {
  width: 100%;
  min-height: 630px;
  height: 630px;
  border-radius: 0;
}
.ebook-spread::after { border-radius: 0; }
.ebook-page {
  min-height: 630px;
  height: 630px;
  padding: 35px 40px 48px;
  border-radius: 0;
}
.ebook-page-heading h3 { font-size: 25px; }
.ebook-answer-heading h3 { font-size: 23px; }
.ebook-section > p,
.ebook-question > p { font-size: 15px; line-height: 1.85; }
.ebook-answer-text { font-size: 15.5px; line-height: 1.82; }
.ebook-page footer { left: 40px; right: 40px; }
.ebook-cover-page h2 { font-size: 46px; }
.ebook-cover-inside h3 { font-size: 29px; }
.ebook-page-dense { padding: 30px 34px 46px; }
.ebook-page-dense .ebook-page-heading h3 { font-size: 19px; }
.ebook-page-dense .ebook-section > p,
.ebook-page-dense .ebook-question > p,
.ebook-page-dense .ebook-answer-text { font-size: 12.5px; line-height: 1.5; }
.ebook-page-dense footer { left: 34px; right: 34px; }
.ebook-toc-page { padding: 31px 40px 48px; }

@media (max-width: 760px) {
  .ebook-shell { width: 540px; padding: 12px 12px 10px; }
  .ebook-spread { position: relative; display: block; width: 100%; min-height: 630px; height: 630px; }
  .ebook-page {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    min-height: 630px;
    height: 630px;
    padding: 35px 40px 48px;
    border: 0;
    box-shadow: inset 0 0 28px rgba(64, 45, 27, .1);
  }
  .ebook-shell[data-book-leaf="0"] .ebook-page-left,
  .ebook-shell[data-book-leaf="1"] .ebook-page-right { display: block; }
  .ebook-shell[data-book-leaf="0"] .ebook-page-left.ebook-cover-page,
  .ebook-shell[data-book-leaf="1"] .ebook-page-right.ebook-cover-inside { display: flex; }
  .ebook-page-heading h3 { font-size: 25px; }
  .ebook-answer-heading h3 { font-size: 23px; }
  .ebook-section > p,
  .ebook-question > p { font-size: 15px; line-height: 1.85; }
  .ebook-answer-text { font-size: 15.5px; line-height: 1.82; }
  .ebook-page-dense { padding: 30px 34px 46px; }
  .ebook-page-dense .ebook-page-heading h3 { font-size: 19px; }
  .ebook-page-dense .ebook-section > p,
  .ebook-page-dense .ebook-question > p,
  .ebook-page-dense .ebook-answer-text { font-size: 12.5px; line-height: 1.5; }
  .ebook-front-prose { padding: 31px 36px 46px; }
  .ebook-front-heading h3 { font-size: 23px; }
  .ebook-front-heading p,
  .ebook-front-copy p { font-size: 14px; line-height: 1.7; }
  .ebook-toc-page { padding: 31px 40px 48px; }
  .ebook-toc-heading h3 { font-size: 24px; }
  .ebook-toc-heading p,
  .ebook-toc-range { font-size: 11px; }
  .ebook-toc-list span { font-size: 13px; }
}

/* Deterministic physical leaves: source prose may continue across as many
   square-corner pages as it needs, while the whole 540px page scales intact. */
.ebook-puzzle-page {
  padding: 35px 40px 48px;
}
.ebook-case-copy,
.ebook-answer-copy,
.ebook-question-copy {
  margin: 0;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

/* A quiet, non-interactive readout outside the scaled/vertical book. */
.ebook-selection-count {
  position: fixed;
  z-index: 1600;
  padding: 3px 6px;
  border: 1px solid rgba(124, 112, 96, .3);
  border-radius: 4px;
  background: rgba(255, 253, 246, .96);
  color: #6b6257;
  box-shadow: 0 1px 4px rgba(54, 44, 30, .12);
  font: 400 11px/1.4 "Microsoft JhengHei", sans-serif;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.ebook-selection-count[hidden] { display: none; }
.ebook-case-copy p,
.ebook-answer-copy p,
.ebook-question-copy p {
  margin: 0 0 0 11px;
  font-size: 15px;
  line-height: 1.78;
  letter-spacing: .045em;
  text-align: justify;
  white-space: normal;
}
.ebook-question-on-answer {
  margin-left: 16px;
}
.ebook-answer-copy {
  margin: 0 0 0 18px;
}
.ebook-question-copy p {
  margin-left: 7px;
  font-weight: 700;
}
.ebook-continuation-heading {
  margin: 0 0 0 24px;
  padding: 0 0 0 12px;
  border-left: 2px solid #84382f;
}
.ebook-continuation-heading span {
  color: #84382f;
  font: 700 14px/1.5 "Microsoft JhengHei", sans-serif;
  letter-spacing: .08em;
}
.ebook-continuation-heading b {
  display: block;
  margin-right: 8px;
  color: #5f5044;
  font: 700 12px/1.7 "Microsoft JhengHei", sans-serif;
  letter-spacing: .035em;
}
.ebook-continuation-heading.is-page-52-hidden {
  visibility: hidden;
}
.ebook-case-page.is-continuation .ebook-continuation-heading > span {
  /* Remove the continuation label visually and from accessibility while
     retaining its exact column so no other text or rule moves. */
  visibility: hidden;
}
.ebook-case-copy.has-fixed-page-lead {
  position: relative;
}
.ebook-case-copy .ebook-fixed-page-lead {
  /* Use the already blank continuation-heading slot. The original text
     stays in flow at exactly the same coordinates, on desktop and mobile. */
  position: absolute;
  top: 0;
  right: calc(-1.5em - 11px);
  width: 1.5em;
  height: 100%;
  margin: 0;
}
.ebook-section.is-continuation {
  margin-left: 0;
}
.ebook-blank-page {
  display: grid;
  place-items: center;
}
.ebook-blank-mark {
  color: rgba(125, 97, 66, .12);
  font: 700 54px/1 Georgia, serif;
  writing-mode: horizontal-tb;
}
.ebook-page,
.ebook-spread,
.ebook-spread::after {
  border-radius: 0;
}

@media (max-width: 760px) {
  .ebook-puzzle-page { padding: 35px 40px 48px; }
  .ebook-case-copy p,
  .ebook-answer-copy p,
  .ebook-question-copy p { font-size: 15px; line-height: 1.55; }
}

/* One fixed leaf is 519 x 734px inside the open cover: the proportion is
   effectively ISO A4.  Narrower leading keeps vertical columns composed. */
.ebook-spread,
.ebook-page {
  min-height: 734px;
  height: 734px;
}
.ebook-case-copy p,
.ebook-answer-copy p,
.ebook-question-copy p {
  line-height: 1.5;
}
.ebook-front-copy p { line-height: 1.58; }

@media (max-width: 760px) {
  .ebook-spread,
  .ebook-page,
  .ebook-cover-page,
  .ebook-cover-inside,
  .ebook-toc-page {
    min-height: 734px;
    height: 734px;
  }
  .ebook-page { display: none; }
  .ebook-shell[data-book-leaf="0"] .ebook-page-left,
  .ebook-shell[data-book-leaf="1"] .ebook-page-right { display: block; }
  .ebook-shell[data-book-leaf="0"] .ebook-page-left.ebook-blank-page,
  .ebook-shell[data-book-leaf="1"] .ebook-page-right.ebook-blank-page { display: grid; }
.ebook-shell[data-book-leaf="0"] .ebook-page-left.ebook-cover-page,
  .ebook-shell[data-book-leaf="1"] .ebook-page-right.ebook-cover-inside { display: flex; }
}

/* The entire publication is composed vertically.  The TOC keeps one fixed
   column per entry, so scaling the book never reflows titles or page numbers. */
.ebook-cover-page,
.ebook-cover-inside,
.ebook-toc-page {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .06em;
}
.ebook-cover-page,
.ebook-cover-inside {
  flex-direction: column;
  gap: 54px;
}
.ebook-cover-mark {
  flex: 0 0 auto;
  margin: 0 0 0 26px;
  writing-mode: horizontal-tb;
}
.ebook-cover-page h2 {
  max-width: none;
  max-height: 565px;
  margin: 0;
  font-size: 42px;
  line-height: 1.4;
}
.ebook-cover-page p {
  max-height: 500px;
  margin: 0;
}
.ebook-cover-page b {
  max-height: 500px;
  color: #fff0d5;
  font-size: 16px;
  line-height: 1.8;
}
.ebook-cover-inside span,
.ebook-cover-inside h3,
.ebook-cover-inside p,
.ebook-cover-inside b {
  max-width: none;
  max-height: 540px;
  margin: 0;
}
.ebook-cover-inside h3 { font-size: 28px; }

.ebook-toc-page {
  position: relative;
  display: block;
  padding: 31px 40px 48px;
}
.ebook-toc-heading,
.ebook-toc-range {
  position: absolute;
  top: 31px;
  right: 40px;
  bottom: 48px;
  margin: 0;
  padding: 0 0 0 10px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  border: 0;
  border-left: 2px solid #84382f;
}
.ebook-toc-heading {
  display: flex;
  width: 62px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.ebook-toc-heading span {
  font-size: 10px;
  letter-spacing: .16em;
}
.ebook-toc-heading h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
}
.ebook-toc-heading p,
.ebook-toc-range {
  font-size: 11px;
  line-height: 1.45;
}
.ebook-toc-range {
  width: 34px;
  border-left-width: 1px;
  border-left-color: #cdbb9c;
}
.ebook-toc-list {
  position: absolute;
  top: 31px;
  bottom: 48px;
  left: 40px;
  right: 95px;
  display: flex;
  flex-direction: row-reverse;
  margin: 0;
  padding: 0;
  writing-mode: horizontal-tb;
  list-style: none;
}
.ebook-toc-heading + .ebook-toc-list { right: 122px; }
.ebook-toc-list li {
  min-width: 0;
  flex: 1 1 0;
  margin: 0;
  border: 0;
  border-left: 1px dotted rgba(126, 102, 73, .34);
}
.ebook-toc-list button {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 7px 3px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: start;
}
.ebook-toc-list b,
.ebook-toc-list i {
  flex: 0 0 auto;
  text-combine-upright: all;
}
.ebook-toc-list span {
  overflow: visible;
  flex: 0 1 auto;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}
.ebook-toc-list i { margin-top: auto; text-align: start; }

/* Page-block stripes meet the exact paper edges instead of ending early. */
.ebook-spread::after {
  left: 0;
  right: 0;
}

/* Physical creases on pages 51–52 follow the player's sketched guides.  Each
   crease is a fine paper highlight paired with a soft pressure shadow, not a
   flat black rule; broad clipped gradients make the sheet look gently bent. */
.ebook-physical-fold {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.ebook-paper-bend {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.ebook-physical-fold-52 .ebook-paper-bend {
  opacity: .56;
  clip-path: polygon(0 0, 41.5% 0, 30.8% 17.45%, 0 98.1%);
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255, 255, 250, .64), transparent 34%),
    linear-gradient(73deg, rgba(91, 66, 39, .17), rgba(255, 255, 248, .45) 9%, transparent 25%);
}
.ebook-paper-crease {
  position: absolute;
  display: block;
  width: var(--crease-length);
  height: 2px;
  border-radius: 50%;
  opacity: .92;
  background:
    linear-gradient(180deg, rgba(255, 255, 252, .94) 0 35%, rgba(118, 91, 57, .5) 46% 70%, rgba(255, 255, 255, .18) 100%);
  box-shadow:
    0 -3px 5px rgba(255, 255, 250, .34),
    0 3px 5px rgba(72, 50, 29, .19);
  transform: rotate(var(--crease-angle));
  transform-origin: 0 50%;
}
.ebook-paper-crease::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  bottom: -4px;
  left: 0;
  opacity: .34;
  background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(91, 67, 39, .2) 18px, transparent 21px);
  filter: blur(1.2px);
}
.crease-52-a { left: 215px; top: 0; --crease-length: 490px; --crease-angle: 116deg; }
.crease-52-b { left: 182px; top: 0; --crease-length: 743px; --crease-angle: 104.2deg; }
.crease-51-a { left: 320px; top: 732px; --crease-length: 446px; --crease-angle: -63.5deg; }
.ebook-fold-pressure {
  position: absolute;
  left: 151px;
  top: 123px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105, 78, 45, .17), rgba(255, 255, 250, .3) 42%, transparent 72%);
  filter: blur(2px);
}

.ebook-fold-thought-layer {
  position: fixed;
  z-index: 29;
  inset: 0;
  background: rgba(30, 43, 50, .48);
  animation: ebook-thought-layer-arrive .48s ease-out both;
}
.ebook-fold-thought-layer.is-dismissing {
  pointer-events: none;
  animation: ebook-thought-layer-dismiss .56s ease-in both;
}
.ebook-fold-thought {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 50%;
  display: block;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 8px 18px;
  color: #fff;
  border: 0;
  background: transparent;
  font-family: "I.MingCP", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  font-size: clamp(23px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .12em;
  text-shadow: 0 0 2px rgba(255, 255, 255, .58), 0 0 .32em rgba(255, 255, 255, .34) !important;
  cursor: default;
  pointer-events: none;
  animation: ebook-thought-arrive .66s ease-out both;
}
.ebook-fold-thought span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(.22em);
  animation: home-arrival-character .72s cubic-bezier(.2, .72, .25, 1) forwards;
  animation-delay: calc(.35s + var(--character-index) * .12s);
}
.ebook-fold-thought.is-ready {
  cursor: pointer;
  pointer-events: auto;
}
.ebook-fold-thought.is-dismissing {
  pointer-events: none;
  animation: ebook-thought-dismiss .56s ease-in both;
}
@keyframes ebook-thought-arrive {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes ebook-thought-dismiss {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(-50%, calc(-50% - 7px)); }
}
@keyframes ebook-thought-layer-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ebook-thought-layer-dismiss {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ebook-fold-thought-layer,
  .ebook-fold-thought-layer.is-dismissing,
  .ebook-fold-thought,
  .ebook-fold-thought.is-dismissing { animation-duration: .01ms; }
  .ebook-fold-thought span { opacity: 1; filter: none; transform: none; animation: none; }
}

/* After the folded-page thought is dismissed, the two responses sit outside
   the physical book. Their glass is the same neutral, feathered 18px frost as
   the current character-dialogue tile. */
.ebook-fold-thought-choices {
  position: fixed;
  z-index: 28;
  inset: 0;
  pointer-events: none;
}
.ebook-fold-choice-slot {
  position: fixed;
  top: var(--ebook-stage-center-y, 50vh);
  width: var(--ebook-choice-width, 210px);
  pointer-events: none;
  transform: translateY(-50%);
}
.ebook-fold-choice-slot-left { right: calc(50% + var(--ebook-stage-half-width, 540px) + 18px); }
.ebook-fold-choice-slot-right { left: calc(50% + var(--ebook-stage-half-width, 540px) + 18px); }
.ebook-fold-choice {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-height: 58px;
  padding: .72em .92em .78em;
  color: #fff;
  border: 0;
  border-radius: .72em;
  background: transparent;
  box-shadow: none;
  font-family: "I.MingCP", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: none !important;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  animation: ebook-fold-choice-arrive .52s cubic-bezier(.2, .74, .24, 1) forwards;
}
.ebook-fold-choice-slot-right .ebook-fold-choice { animation-delay: .12s; }
.ebook-fold-choice::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -.28em -.38em;
  border-radius: 1em;
  background: linear-gradient(135deg, rgba(132, 143, 149, .34), rgba(55, 64, 69, .38));
  -webkit-backdrop-filter: blur(18px) saturate(.7) contrast(.8) brightness(1.04);
  backdrop-filter: blur(18px) saturate(.7) contrast(.8) brightness(1.04);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-30%25' width='140%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='5' y='8' width='90' height='84' rx='12' fill='white' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-30%25' width='140%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='5' y='8' width='90' height='84' rx='12' fill='white' filter='url(%23b)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  pointer-events: none;
  transition: background .22s ease, transform .22s ease;
}
.ebook-fold-choice span { position: relative; z-index: 2; }
.ebook-fold-choice:hover::before,
.ebook-fold-choice:focus-visible::before { background: linear-gradient(135deg, rgba(154, 167, 174, .44), rgba(67, 77, 82, .48)); }
.ebook-fold-choice:focus-visible { outline: 2px solid rgba(255, 255, 255, .84); outline-offset: 6px; }
.ebook-fold-choice.is-selected::before { background: linear-gradient(135deg, rgba(120, 160, 169, .48), rgba(45, 72, 78, .54)); }
@keyframes ebook-fold-choice-arrive {
  to { opacity: 1; transform: translateY(0); }
}
.ebook-chapter.has-compact-fold-choices .ebook-fold-choice-slot {
  top: auto;
  bottom: max(13px, env(safe-area-inset-bottom));
  width: min(44vw, 210px);
  transform: none;
}
.ebook-chapter.has-compact-fold-choices .ebook-fold-choice-slot-left { right: auto; left: 10px; }
.ebook-chapter.has-compact-fold-choices .ebook-fold-choice-slot-right { right: 10px; left: auto; }
.ebook-chapter.has-compact-fold-choices .ebook-fold-choice {
  min-height: 50px;
  padding: .56em .62em .62em;
  font-size: clamp(15px, 4.3vw, 20px);
}
@media (prefers-reduced-motion: reduce) {
  .ebook-fold-choice { opacity: 1; transform: none; animation: none; }
}

.ebook-fold-clue-form {
  position: fixed;
  z-index: 31;
  left: 50%;
  top: 50%;
  isolation: isolate;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
  width: min(760px, calc(100vw - 28px));
  box-sizing: border-box;
  margin: 0;
  padding: 18px 20px;
  color: #fff;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  font-family: "I.MingCP", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 600;
  letter-spacing: .08em;
  writing-mode: horizontal-tb;
  transform: translate(-50%, -50%);
  animation: ebook-fold-clue-arrive .52s cubic-bezier(.2, .74, .24, 1) both;
}
.ebook-fold-clue-form::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -.42em -.55em;
  border-radius: 1.15em;
  background: linear-gradient(135deg, rgba(132, 143, 149, .42), rgba(55, 64, 69, .5));
  box-shadow: 0 12px 34px rgba(24, 31, 35, .2);
  -webkit-backdrop-filter: blur(18px) saturate(.72) contrast(.84) brightness(1.05);
  backdrop-filter: blur(18px) saturate(.72) contrast(.84) brightness(1.05);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-30%25' width='140%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='5' y='8' width='90' height='84' rx='12' fill='white' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-30%25' width='140%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='5' y='8' width='90' height='84' rx='12' fill='white' filter='url(%23b)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  pointer-events: none;
}
.ebook-fold-clue-form > span,
.ebook-fold-clue-form > input,
.ebook-fold-clue-form > button { position: relative; z-index: 2; }
@keyframes ebook-fold-clue-arrive {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 760px) {
  .ebook-shell[data-book-mode="fold-preview"] { width: 1080px; }
  .ebook-shell[data-book-mode="fold-preview"] .ebook-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .ebook-shell[data-book-mode="fold-preview"] .ebook-page {
    position: relative;
    inset: auto;
    display: block !important;
    width: auto;
    grid-row: 1;
  }
  .ebook-shell[data-book-mode="fold-preview"] .ebook-page-left { grid-column: 2; }
  .ebook-shell[data-book-mode="fold-preview"] .ebook-page-right { grid-column: 1; }
  .ebook-shell[data-book-mode="fold-preview"] .ebook-spine { display: block; }
  .ebook-fold-clue-form {
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) 42px;
    gap: 6px;
    width: calc(100vw - 18px);
    padding: 14px 12px;
    border-radius: 14px;
    font-size: clamp(15px, 4.35vw, 19px);
    letter-spacing: .03em;
  }
  .ebook-fold-clue-submit { width: 40px; height: 40px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .ebook-fold-clue-form { animation: none; }
}

/* The page controls float above the book and retract completely when idle, so
   the fixed A4 spread can use the height formerly reserved by the toolbar. */
.ebook-chapter .ebook-toolbar {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 50%;
  width: min(960px, calc(100vw - 18px));
  margin: 0;
  padding: 10px 16px 8px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-top: 0;
  border-radius: 0 0 19px 19px;
  background: rgba(116, 166, 191, .66);
  box-shadow: 0 8px 24px rgba(35, 55, 63, .24);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  transition: transform .3s ease, opacity .24s ease;
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  backdrop-filter: blur(9px) saturate(1.08);
}
.ebook-chapter.is-controls-visible .ebook-toolbar {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.ebook-chapter .ebook-toolbar > button,
.ebook-chapter .ebook-close.ebook-close-inline {
  background: rgba(255, 250, 239, .82);
  box-shadow: 0 2px 7px rgba(37, 30, 24, .24);
}
.ebook-chapter .ebook-range-ticks {
  color: rgba(255, 255, 255, .95);
}
.ebook-chapter .ebook-stage {
  margin-top: 0;
}
@media (max-width: 760px) {
  .ebook-chapter .ebook-toolbar {
    width: calc(100vw - 8px);
    padding: 7px 7px 6px;
    border-radius: 0 0 14px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ebook-chapter .ebook-toolbar { transition-duration: .01ms; }
}

/* Only one ephemeral reverse page is laid out during a paper drag. */
.ebook-shell .ebook-drag-verso .ebook-page {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0;
  transform: none !important;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.ebook-shell .ebook-drag-verso .ebook-cover-page { display: flex !important; background: #8c3028; }
@media (max-width: 760px) {
  /* The TOC display must not expose both leaves in single-page mode. */
  .ebook-shell[data-book-mode="single"] .ebook-spread > .ebook-toc-page { display: none; }
  .ebook-shell[data-book-mode="single"][data-book-leaf="0"] .ebook-spread > .ebook-page-left.ebook-toc-page,
  .ebook-shell[data-book-mode="single"][data-book-leaf="1"] .ebook-spread > .ebook-page-right.ebook-toc-page { display: block; }
}