:root {
  --page-bg: #f6f0e7;
  --page-w: 820px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #14110e;
    --bg: #14110e; --bg-2: #1c1815; --paper: #1a1613; --paper-2: #221d18;
    --ink: #ece2d4; --ink-2: #a2988a; --accent: #ff2a17; --accent-2: #d31200; --accent-ink: #fff;
    --stamp: #ff4a3a; --carbon: #c9c0b4;
    --line: rgba(236,226,212,0.28); --line-2: rgba(236,226,212,0.11);
    --quick-bg: #221d18; --quick-line: #ece2d4;
    --field-bg: #262019; --field-ink: #ece2d4; --field-line: rgba(236,226,212,0.34);
    --chip-bg: transparent; --chip-ink: #ece2d4; --chip-on-bg: #ece2d4; --chip-on-ink: #14110e;
    --btn-o-ink: #ece2d4; --btn-o-line: #ece2d4;
    --card-bg: #1c1815; --card-ink: #ece2d4; --dlg-bg: #1a1613; --dlg-ink: #ece2d4;
    --map-bg: #1b1714; --map-room: rgba(236,226,212,0.04); --map-line: #8d8478; --map-fix: rgba(236,226,212,0.12);
    --map-table: #2a2420; --map-table-line: #a2988a; --map-table-ink: #ece2d4;
    --map-busy: rgba(236,226,212,0.05); --map-busy-line: rgba(236,226,212,0.2); --map-on: #ff2a17; --map-on-ink: #fff;
    --smoke-rgb: 20,17,14;
    --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 18px 34px -12px rgba(0,0,0,0.7);
    --shadow-paper: 0 1px 1px rgba(0,0,0,0.45), 3px 12px 20px -10px rgba(0,0,0,0.55), -8px 18px 24px -18px rgba(0,0,0,0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page-bg: #14110e;
  --bg: #14110e; --bg-2: #1c1815; --paper: #1a1613; --paper-2: #221d18;
  --ink: #ece2d4; --ink-2: #a2988a; --accent: #ff2a17; --accent-2: #d31200; --accent-ink: #fff;
  --stamp: #ff4a3a; --carbon: #c9c0b4;
  --line: rgba(236,226,212,0.28); --line-2: rgba(236,226,212,0.11);
  --quick-bg: #221d18; --quick-line: #ece2d4;
  --field-bg: #262019; --field-ink: #ece2d4; --field-line: rgba(236,226,212,0.34);
  --chip-bg: transparent; --chip-ink: #ece2d4; --chip-on-bg: #ece2d4; --chip-on-ink: #14110e;
  --btn-o-ink: #ece2d4; --btn-o-line: #ece2d4;
  --card-bg: #1c1815; --card-ink: #ece2d4; --dlg-bg: #1a1613; --dlg-ink: #ece2d4;
  --map-bg: #1b1714; --map-room: rgba(236,226,212,0.04); --map-line: #8d8478; --map-fix: rgba(236,226,212,0.12);
  --map-table: #2a2420; --map-table-line: #a2988a; --map-table-ink: #ece2d4;
  --map-busy: rgba(236,226,212,0.05); --map-busy-line: rgba(236,226,212,0.2); --map-on: #ff2a17; --map-on-ink: #fff;
  --smoke-rgb: 20,17,14;
  --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 18px 34px -12px rgba(0,0,0,0.7);
  --shadow-paper: 0 1px 1px rgba(0,0,0,0.45), 3px 12px 20px -10px rgba(0,0,0,0.55), -8px 18px 24px -18px rgba(0,0,0,0.4);
  color-scheme: dark;
}
:root:not([data-theme="dark"]) { color-scheme: light; }

.hp-page { background: var(--page-bg); color: var(--ink); }
.hp-page::before { content: none; }

:root[data-theme="dark"] select.hp-field option { color: #ece2d4; background: #262019; }
:root[data-theme="dark"] .hp-bk .hp-icon-btn:hover, :root[data-theme="dark"] .hp-chap .hp-icon-btn:hover,
:root[data-theme="dark"] .hp-auth-dlg .hp-icon-btn:hover, :root[data-theme="dark"] .hp-sheet .hp-icon-btn:hover { background: rgba(236,226,212,0.09); }
:root[data-theme="dark"] .hp-bk-dots i { background: rgba(236,226,212,0.22); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select.hp-field option { color: #ece2d4; background: #262019; }
  :root:not([data-theme="light"]) .hp-bk .hp-icon-btn:hover, :root:not([data-theme="light"]) .hp-chap .hp-icon-btn:hover,
  :root:not([data-theme="light"]) .hp-auth-dlg .hp-icon-btn:hover, :root:not([data-theme="light"]) .hp-sheet .hp-icon-btn:hover { background: rgba(236,226,212,0.09); }
  :root:not([data-theme="light"]) .hp-bk-dots i { background: rgba(236,226,212,0.22); }
}

:root[data-theme="dark"] .hpn-panel,
:root[data-theme="dark"] .hp-book-inline,
:root[data-theme="dark"] .hp-bk,
:root[data-theme="dark"] .hp-auth-dlg,
:root[data-theme="dark"] .hp-sheet,
:root[data-theme="dark"] .hp-booksec .hp-map-stage { background-image: none; }
:root[data-theme="dark"] .hp-map .rname { fill: var(--ink-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hpn-panel,
  :root:not([data-theme="light"]) .hp-book-inline,
  :root:not([data-theme="light"]) .hp-bk,
  :root:not([data-theme="light"]) .hp-auth-dlg,
  :root:not([data-theme="light"]) .hp-sheet,
  :root:not([data-theme="light"]) .hp-booksec .hp-map-stage { background-image: none; }
  :root:not([data-theme="light"]) .hp-map .rname { fill: var(--ink-2); }
}
.hp-page .hp-cur-label { color: #f4ece2; }
.hp-page .hp-cur.box .hp-cur-blob rect { stroke: #f4ece2; }

.hp-page main { position: relative; z-index: 1; max-width: var(--page-w); margin: 0 auto; padding: calc(var(--top-h) + 54px) 20px 72px; }
.hp-page.wide { --page-w: 1120px; }
.hp-page.narrow { --page-w: 560px; }
.hp-page main .hp-sec { padding: 0; }
.hp-page main .hp-wrap { max-width: none; margin: 0; padding: 0; }
@media (max-width: 600px) { .hp-page main { padding-top: calc(var(--top-h) + 34px); } }

.hp-page .hp-top { color: #f4ece2; }
.hp-page .hp-top-in { display: flex; align-items: center; gap: 18px; }
.hp-page .hp-brand { margin-right: auto; }

.hp-page .hp-crumbs { margin: 0 0 26px; font-family: var(--font-type); font-weight: 700; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.hp-page .hp-crumbs a { color: inherit; text-decoration: none; }
.hp-page .hp-crumbs a:hover { color: var(--stamp); }
.hp-page .hp-crumbs span::before { content: " / "; opacity: 0.6; }

.hp-page .hp-sec-h { max-width: none; margin: 0 0 clamp(26px, 4vw, 44px); }
.hp-page .hp-sec-h h1, .hp-page main > h1 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 6vw, 72px); line-height: 0.95; letter-spacing: 0.012em; }
.hp-page .hp-eyebrow { display: block; margin: 0; }
.hp-page .hp-where { margin: 14px 0 0; }
.hp-page .hp-sec-h .hp-lede, .hp-page .hp-lede { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.hp-page .hp-where + .hp-lede { margin-top: 10px; }

.hp-page main h2 { margin: 34px 0 12px; font-family: var(--font-cn); font-weight: 400; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; }
.hp-page main h3 { margin: 24px 0 8px; font-family: var(--font-cn); font-weight: 400; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; }
.hp-page main p:not([class]) { font-size: 16px; line-height: 1.6; }
.hp-page main h2:first-child, .hp-page main h3:first-child { margin-top: 0; }

.hp-page .hp-plist { list-style: none; margin: 0 0 1em; padding: 0; }
.hp-page .hp-plist li { position: relative; padding: 4px 0 4px 22px; font-size: 16px; line-height: 1.55; }
.hp-page .hp-plist li::before { content: "—"; position: absolute; left: 0; color: var(--stamp); }

.hp-page .hp-nlist { list-style: none; margin: 0 0 1em; padding: 0; counter-reset: hpn; }
.hp-page .hp-nlist li { position: relative; padding: 9px 0 9px 44px; border-bottom: 1px solid var(--line-2); font-size: 16px; line-height: 1.5; counter-increment: hpn; }
.hp-page .hp-nlist li::before { content: counter(hpn, decimal-leading-zero); position: absolute; left: 0; top: 11px; font-family: var(--font-type); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; color: var(--stamp); }

.hp-page .hp-note { margin: 22px 0 0; padding: 12px 16px; border-left: 2px solid var(--stamp); font-family: var(--font-type); font-size: 13.5px; line-height: 1.5; letter-spacing: 0.02em; color: var(--ink); }

.hp-page .hp-cta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin: 32px 0 0; }
.hp-page .hp-page-src { margin: 26px 0 0; font-family: var(--font-type); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-2); }