:root{color-scheme:light;--ink:#223954;--blue:#234bb2;--muted:#526477;--line:#d9e1e7}*{box-sizing:border-box}body{margin:0;background:#fafbfc;color:var(--ink);font:14px/1.65 "Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif}main{height:100vh;display:flex;flex-direction:column}.viewport{position:relative;min-height:0;flex:1;overflow:hidden}#scene,#labels{position:absolute;inset:0}canvas{display:block;width:100%;height:100%}#labels{pointer-events:none}.node-label{position:absolute;left:0;top:0;transform:translate(-50%,0);font-size:12px;white-space:nowrap;text-align:center;color:#526477;padding:3px 6px;background:#fafbfce8;border-radius:2px}.node-label[data-active=true]{color:#234bb2;font-weight:550}.node-label small{display:none}.narrative{padding:0 16px 8px;flex:none}.readout{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding-top:12px;border-top:1px solid var(--line)}#counter{font-size:11px;color:#62768a;font-variant-numeric:tabular-nums;flex:none;padding-top:3px}#description{margin:0;flex:1;line-height:1.7;font-size:12px;min-height:40px}button{font:inherit;cursor:pointer}#play{background:transparent;color:#435c71;border:0;padding:3px 6px;min-width:40px;min-height:32px;white-space:nowrap;font-size:12px}#play:hover{background:#e8edf3}button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}#steps{display:flex;gap:12px;margin:4px 0 0}#steps button{flex:1;min-width:0;min-height:36px;background:transparent;border:0;border-bottom:1px solid transparent;color:#62768a;text-align:left;font-size:11px;line-height:1.5;padding:6px 0}#steps button[aria-current=step]{border-bottom-color:var(--blue);color:var(--blue);font-weight:550}#steps button:hover{color:var(--blue)}.note{font-size:11px;color:#62768a;margin:8px 0 0}#fallback{position:absolute;left:20px;right:20px;top:40%;text-align:center;color:#526477}#fallback[hidden]{display:none}::selection{background:#234bb2;color:white}@media(max-width:420px){.narrative{padding-inline:4px}.node-label{font-size:11px;padding:2px 4px}#description{font-size:12px}.readout{gap:8px}#counter{font-size:10px}#play{padding-inline:4px}#steps{gap:8px}#steps button{font-size:11px}.campus .node-label{font-size:11px}}
/* Long localized labels wrap within their own node's column. */
.node-label{max-width:28%;width:max-content;white-space:normal;line-height:1.45}.campus .node-label{max-width:40%}