:root {
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  color:#292b27;background:#f5f4ef;
  --purple:#603775;--ink:#292b27;--line:#dddcd3;--yellow:#f5c62a;--paper:#fcfbf7;--muted:#665f69;
}
* {box-sizing:border-box}
[hidden] {display:none!important}
html {height:100%;overflow:hidden}
body {margin:0;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
button,a {color:inherit}
button {font:inherit;border:0;background:none;cursor:pointer;min-height:44px;padding:9px 12px;border-radius:5px;transition:background-color 120ms ease-out,color 120ms ease-out}
button:hover {background:#eae7e0}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible {outline:3px solid #b586c0;outline-offset:3px}
button.active,button[aria-pressed=true] {color:var(--purple);background:#eae1ee}
button:disabled {opacity:.35;cursor:default}
a {text-underline-offset:4px;overflow-wrap:anywhere}
::selection {background:#e5d9ec;color:#382342}
header {display:flex;align-items:center;gap:24px;padding:12px 24px;border-top:5px solid var(--purple);background:var(--paper);flex-shrink:0}
.school {padding-right:24px;border-right:1px solid #cbc5cd;flex-shrink:0}
.school>span {font-family:"Songti SC","STSong",serif;font-weight:700;font-size:31px;letter-spacing:5px;color:var(--purple)}
.school small {display:block;color:#78707c;font-size:12px;letter-spacing:1px;margin-top:3px}
.brand {display:flex;align-items:center;gap:20px;flex-shrink:0}
.brand img {width:126px;height:auto}
.brand b {font-size:16px;font-weight:500}
.header-actions {display:flex;gap:4px;margin-left:auto;font-size:14px;flex-wrap:wrap;justify-content:flex-end}
.header-actions button {white-space:nowrap}
#fullscreen {border:1px solid #ccc2cf}
#gates,#map,#cooperation {color:var(--purple)}
.map-basis {display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;padding:7px 24px;background:#eee8f1;color:#63536b;font-size:12px;line-height:1.6;flex-shrink:0}
.map-basis strong {font-weight:500;color:#553164}
#districts {display:flex;gap:5px;padding:6px 20px;border-block:1px solid var(--line);white-space:nowrap;overflow-x:auto;flex-shrink:0;scrollbar-width:thin}
#districts button {font-size:15px;padding-inline:15px}
#districts .active {background:var(--purple);color:white}
main {position:relative;display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-height:0;isolation:isolate}
body[data-info-open=true] main {grid-template-columns:minmax(0,1fr) clamp(360px,28vw,400px)}
#sidebar {display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--paper);min-width:0;min-height:0;overflow:hidden}
.sidebar-head {display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;border-bottom:1px solid var(--line);padding:5px 16px 5px 24px;color:var(--purple);font-size:13px}
.sidebar-head>span {letter-spacing:1px}
#close-intro {font-size:13px;white-space:nowrap}
#sidebar-content {overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9adbf transparent;scroll-padding-block:20px;min-height:0;padding:21px 24px 30px}
#sidebar-scrim {display:none}
#story h2:focus {outline:none}
.detail-media {margin:18px 0 23px}
.detail-image-link {display:block;background:#eeefe8;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.detail-media img {display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.detail-media figcaption {display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;font-size:12px;line-height:1.7;margin-top:8px;color:var(--muted)}
.detail-media figcaption a {color:var(--purple)}
#story .media-pending {border:1px solid var(--line);padding:20px 14px;border-radius:5px;color:var(--muted);font-size:13px}
.story-flow {margin:20px 0 24px}
.story-layout ul {padding-left:20px;font-size:14px;line-height:1.85;margin:10px 0 22px;color:var(--muted)}
#story .story-layout p {font-size:14px;color:var(--muted)}
.place-details {border-top:1px solid var(--line);margin-top:22px}
.gate-details {margin:18px 0;font-size:13px;line-height:1.8;border-block:1px solid var(--line)}
.gate-details>summary {cursor:pointer;min-height:44px;padding:11px 0;color:var(--purple)}
.gate-details>summary:focus-visible {outline:3px solid #b586c0;outline-offset:2px}
h2 {font-size:26px;line-height:1.45;font-weight:600;letter-spacing:-.5px;margin:0 0 14px}
#story p {font-size:16px;line-height:1.85;margin:0 0 17px;overflow-wrap:anywhere}
#story ol {padding-left:21px;margin:14px 0 18px;font-size:16px;line-height:1.8}
#story li {padding-left:3px;margin:8px 0}
#story ol li::marker {color:var(--purple);font-weight:600}
#story h3 {font-size:18px;line-height:1.6;margin:16px 0 10px;color:var(--purple)}
#story .scope {font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px;line-height:1.8}
.place-context {font-size:13px;color:#66546f;line-height:1.7;margin:-4px 0 17px}
.location {display:block;color:var(--purple);font-size:14px;line-height:1.75;margin:16px 0}
#story .coverage {font-size:15px;line-height:1.95;border-block:1px solid var(--line);padding:14px 0;color:var(--purple);margin:20px 0}
.render-link {font-size:13px;display:inline-block;margin:4px 0 18px}
.overview-actions {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.overview-actions button,.text-action {font-size:14px;color:var(--purple);border:1px solid #d4c6dc;text-align:left}
#related h3,#node-list h3 {font-size:13px;color:#716c73;font-weight:500;margin:24px 0 9px;line-height:1.65}
#related button {display:block;width:100%;text-align:left;border-bottom:1px solid var(--line);font-size:14px;padding-inline:0;line-height:1.7}
#related button::after {content:'↗';float:right;color:var(--purple);margin-left:6px}
.node-row {display:flex;align-items:center;width:100%;text-align:left;border-bottom:1px solid var(--line);border-radius:0;gap:9px;font-size:14px;line-height:1.65;padding:12px 0}
.node-row span:first-child {font-size:12px;color:var(--purple);width:20px;flex:none}
.node-row em {font-style:normal;color:#7a7870;margin-left:auto}
.node-row.active {padding-inline:8px}
.module-row {display:block;width:100%;text-align:left;border-bottom:1px solid var(--line);padding:14px 0;font-size:16px}
.module-row small {display:block;font-size:13px;color:#666057;line-height:1.7;margin-top:6px}
.module-row b {color:var(--purple);font-weight:500;margin-right:10px}
.gate-card {display:block;width:100%;padding:15px 0;text-align:left;border-bottom:1px solid var(--line);border-radius:0;line-height:1.65}
.gate-card.active {padding-inline:10px;border-radius:5px}
.gate-card-head {display:flex;align-items:center;gap:8px}
.gate-card-head b {font-size:17px;font-weight:600}
.gate-card-head small {font-size:12px;font-weight:400;color:#6b5376}
.gate-card-head em {font-size:14px;font-style:normal;margin-left:auto;color:var(--purple)}
.gate-direction,.gate-function,.gate-entry {display:block;font-size:13px;line-height:1.8;margin-top:5px}
.gate-direction {color:var(--purple)}
.gate-function,.gate-entry {color:var(--muted)}
.gate-entry {font-size:12px}
.gate-facts {margin:12px 0 20px;border-block:1px solid var(--line);display:grid;grid-template-columns:64px minmax(0,1fr);gap:9px 12px;padding:13px 0;font-size:13px;line-height:1.8}
.gate-facts dt {color:var(--muted)}
.gate-facts dd {margin:0;color:var(--purple);overflow-wrap:anywhere}
.selected-gate {border-bottom:1px solid var(--line);padding:0 0 18px}
#story .selected-gate>h3 {font-size:22px}
.route-summary {margin:10px 0 22px}
#story .route-summary h3 {font-size:14px}
.route-summary ul {list-style:none;padding:0;margin:0}
.route-summary li {font-size:13px;line-height:1.8;border-bottom:1px solid var(--line);padding:6px 0 9px!important}
.route-summary b {font-weight:500;color:#594361}
.route-summary span,.route-summary small {display:block;color:var(--muted)}
#story .route-summary .scope {border:0;font-size:12px;padding-top:8px;margin-bottom:0}
.rules {margin:17px 0;font-size:13px;line-height:1.8;border-block:1px solid var(--line)}
.rules summary {cursor:pointer;min-height:44px;padding:11px 0;color:var(--purple)}
.rules summary:focus-visible {outline:3px solid #b586c0;outline-offset:2px}
.rules ul {padding:0 0 0 18px;margin:0 0 14px}
.rules li {padding:0!important;margin:0 0 15px!important}
#story .rules p,.rules p {font-size:13px;line-height:1.85;margin:5px 0}
.rules small,.rules .rule-basis {color:var(--muted)}
.map-actions {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;margin:14px 0}
.map-actions button {border:1px solid #d4c6dc;font-size:13px;color:var(--purple)}
.map-figure {margin:0 0 18px}
#map-frame {max-height:52dvh;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);background:white;scrollbar-width:thin}
#map-image {display:block;width:100%;height:auto}
#map-frame.zoomed #map-image {width:780px;max-width:none}
.map-figure figcaption {font-size:12px;line-height:1.8;color:var(--muted);margin:9px 0}
#story .source-links {font-size:13px;line-height:2}
.part-buttons {display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 18px}
.part-buttons button {font-size:13px;border:1px solid #d4c6dc;color:var(--purple)}
#part-story h3 {font-size:19px;color:var(--purple);margin:10px 0}
#stage {position:relative;min-width:0;min-height:0;overflow:hidden;background:#eeefe8}
.stage-top {position:absolute;left:20px;top:16px;right:18px;z-index:4;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.stage-top h1 {font-size:19px;font-weight:500;line-height:1.5;display:inline-block;background:#f4f4edeb;padding:5px 8px;margin:0;max-width:430px;text-wrap:balance}
.stage-top>div {pointer-events:auto}
.view-tools {display:flex;flex-wrap:wrap;align-self:start;background:#faf9f3;border:1px solid var(--line);border-radius:6px;padding:1px;font-size:13px}
.view-tools button {padding-inline:10px;min-width:38px}
#intro {background:var(--purple);color:white;padding-inline:13px;font-weight:500}
#intro:hover {background:#754889}
#intro[aria-expanded=true] {background:#eae1ee;color:var(--purple)}
#viewport,#viewport canvas,#labels,#leaders {position:absolute;width:100%;height:100%;inset:0}
#labels,#leaders {pointer-events:none}
#leaders {z-index:1}
#labels {z-index:2}
#leaders line {stroke:#85768c;stroke-width:1;opacity:.6}
#leaders circle {fill:#735b7d}
#hover-hint {position:absolute;z-index:4;pointer-events:none;max-width:min(255px,calc(100% - 16px));padding:6px 9px;border:1px solid #d8cedd;border-radius:4px;background:#fcfbf7ed;color:#654b70;font-size:12px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-label {position:absolute;pointer-events:auto;min-height:34px;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;padding:6px 9px;background:#fffcf5ed;border:1px solid #ddd7c6;transform:translate(-50%,-50%);color:#3e3a36;border-radius:4px;box-shadow:none}
.scene-label.zone {color:var(--purple);padding:7px 10px;background:#fcfbf5}
.scene-label.zone b {display:block;font-size:14px;font-weight:600;color:#493053}
.scene-label.zone small {font-size:11px;display:block;line-height:1.4;margin-top:2px;color:#68615e}
.scene-label.service {border-color:#d4b944}
.scene-label.place {font-size:12px;background:#f7f8f0e6;min-height:28px;padding:4px 8px;border-color:#d3d5cc}
.scene-label.active {background:var(--purple);color:white;border-color:var(--purple)}
.stage-bottom {position:absolute;bottom:12px;left:20px;right:20px;display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.6;color:#585b50;pointer-events:none;z-index:3}
.stage-bottom>span {background:#eeefe8ed;padding:3px 5px}
#loading {position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#f4f2ecb8,#f4f2ecb8),url('./renders/overview.jpg') center/cover no-repeat;font-size:16px;line-height:1.8;padding:25px;text-align:center;color:var(--purple);z-index:5}
#loading::before {content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#f4f2ec80)}
#loading {font-weight:650;text-shadow:0 1px 0 #fff}
#loading:not(:empty) {isolation:isolate}
body[data-model-loaded=true] #loading {display:none}
footer {display:flex;align-items:center;padding:9px 20px;border-top:1px solid var(--line);gap:16px;background:var(--paper);flex-shrink:0}
#modules {display:flex;flex:1;justify-content:space-between;gap:5px}
#modules button {padding:10px 16px;font-size:16px;white-space:nowrap}
#modules button span {font-size:12px;margin-right:9px;color:#8e7a46}
#modules button.active {background:#f8e9a4;color:#37372f}
.tour {display:flex;align-items:center;gap:7px;padding-left:16px;border-left:1px solid var(--line);font-size:13px;white-space:nowrap}
#next {background:var(--purple);color:white;min-width:100px}
dialog {max-width:630px;width:calc(100vw - 32px);max-height:85dvh;overflow:auto;overscroll-behavior:contain;border:1px solid #d8d2d9;border-radius:8px;padding:25px;background:var(--paper);color:var(--ink);scrollbar-width:thin}
dialog::backdrop {background:#2a1c3544}
.dialog-head {display:flex;justify-content:space-between;align-items:center;gap:12px}
.dialog-head h2 {font-size:22px;margin:0}
.dialog-head button {font-size:25px;flex-shrink:0}
dialog p {line-height:1.85;font-size:15px}
.downloads {display:grid;gap:17px;padding-block:18px;font-size:14px}
dialog .version {font-size:12px;color:#777}
@media (min-width:1700px) {
  #sidebar-content {padding:25px 27px 30px}
  #story p,#story ol {font-size:18px} h2 {font-size:30px}
  .node-row {font-size:16px} .stage-top h1 {font-size:23px}
  .scene-label {font-size:14px} .scene-label.zone b {font-size:16px} .scene-label.zone small {font-size:12px}
  #districts button {font-size:17px} #modules button {font-size:19px}
}
@media (max-width:1400px) {
  .brand b {display:none} .stage-top {display:block}
  .view-tools {display:inline-flex;margin-top:9px} .stage-top h1 {font-size:17px}
  #modules button {padding-inline:12px;font-size:15px} .tour {gap:4px;padding-left:10px}
}
@media (max-width:1050px) {
  header {gap:16px;padding-inline:18px} .school {padding-right:15px}
  .school>span {font-size:27px} .brand img {width:108px}
  .header-actions {font-size:12px;gap:1px} .header-actions button {padding-inline:8px}
  .tour #tour-status {font-size:11px} #modules button span {display:none}
  footer {padding-inline:12px;gap:8px}
}
@media (max-width:850px) {
  header {flex-wrap:wrap;gap:5px;padding:8px 15px}
  .school {border:0;padding:0} .school>span {font-size:25px;letter-spacing:3px} .school small {font-size:10px}
  .brand {margin-left:auto} .brand img {width:105px} .header-actions {margin:0;width:100%;justify-content:flex-start;gap:3px}
  .header-actions button {font-size:12px;padding:8px} #fullscreen {margin-left:auto}
  .map-basis {padding:5px 15px;font-size:11px}
  #districts {padding:3px 10px} #districts button {font-size:14px;padding-inline:12px}
  main,body[data-info-open=true] main {grid-template-columns:minmax(0,1fr)}
  #sidebar {position:absolute;inset:0 0 0 auto;z-index:8;width:min(400px,calc(100% - 20px));box-shadow:-5px 0 20px #3928441a}
  #sidebar-scrim {display:block;position:absolute;inset:0;z-index:7;width:100%;height:100%;padding:0;border-radius:0;background:#39284420}
  #sidebar-content {padding:18px 21px 28px}
  .sidebar-head {padding-left:21px}
  #story p,#story ol {font-size:16px} .stage-top {left:14px;right:14px;top:12px}
  .stage-top h1 {font-size:16px;padding:4px 6px;max-width:100%}
  .view-tools {font-size:12px;max-width:100%;gap:0} .view-tools button {padding-inline:9px;min-width:36px}
  .scene-label {font-size:11px;max-width:205px;padding:5px 7px}
  .scene-label.zone b {font-size:12px} .scene-label.zone small {font-size:10px} .scene-label.place {font-size:10px}
  .stage-bottom {left:14px;right:14px;bottom:10px;font-size:11px}
  .stage-bottom>span:last-child {display:none}
  footer {position:relative;display:flex;flex-wrap:wrap;padding:4px 12px max(6px,env(safe-area-inset-bottom));gap:2px}
  #modules {width:100%;flex-basis:100%;gap:2px} #modules button {font-size:13px;padding:9px 6px;flex:1}
  .tour {display:flex;width:100%;justify-content:flex-end;border-left:0;border-top:1px solid var(--line);padding:3px 0 0;font-size:12px}
  .tour #tour-status {display:block;margin-right:auto;font-size:12px} #prev {order:-1}
  dialog {padding:20px;max-height:88dvh} .dialog-head h2 {font-size:20px}
}
@media (max-width:390px) {
  .header-actions {gap:0} .header-actions button {font-size:11px;padding:7px}
  #sidebar-content {padding-inline:17px} .view-tools button {padding-inline:8px}
  #story .coverage {font-size:14px}
}
@media (max-height:600px) {
  header {padding-block:5px} .school small {margin-top:0} .school>span {font-size:24px}
  #districts {padding-block:1px} .map-basis {padding-block:3px}
  footer {padding-block:3px}
  .stage-top {top:8px} .stage-top h1 {font-size:15px}
  .view-tools {margin-top:3px}
  .sidebar-head {padding-block:1px} #sidebar-content {padding-top:14px}
}
@media (max-width:850px) and (max-height:600px) {
  header {flex-wrap:nowrap;gap:10px} .school small {display:none}
  .school>span {font-size:21px;letter-spacing:2px} .brand {margin-left:0} .brand img {width:78px}
  .header-actions {width:auto;margin-left:auto;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
  footer {flex-wrap:nowrap} #modules {width:auto;flex-basis:auto}
  .tour {width:auto;border-top:0;padding:0} .tour #tour-status {display:none}
  #modules button {font-size:12px;padding-inline:5px} #next {min-width:76px}
}
@media (prefers-reduced-motion:reduce) {button {transition:none}}

.presentation-toast{position:fixed;top:100px;left:50%;transform:translateX(-50%);z-index:1000;padding:14px 22px;background:#603775;color:#fff;border-radius:8px;box-shadow:0 5px 25px #0002;font-size:16px}.presentation-toast[hidden]{display:none}