/* β: the preview's face over the night view (src/beta/beta.js). Kalok 29 Oct, his boards: 「keep the other layout but only
   change the ui for the user」 — nothing over the picture but thin white lines and words, all lower case (「the all text
   use lowercase」), in 空明朝體 Ku Mincho (「default use kumincho for the web font. we have license」): 晴 陰 雨 · 日 暮 夜
   top left, the one on underlined, and 燈 with its switch; five rings top right, Google's Material Symbols in them (「please find google font icon to for
   all icons」), a line dropping from each as a bolt strikes and its word at the end (「when hover, ther will drop down
   vector line thunder and reveal the corresponding text」); prev · next at the sides; the bolts' switch and ▶ at the
   bottom; the state just picked in the middle, its letters cut out of a glow of one of the palette's colours at random;
   all of it gone when idle. The entry and info the face itself with each control's word struck to it (Kalok 29 Oct:
   「redesign the landing screen and start button to match … also for the map and camera and the info」), the camera
   hung from its ring on a hairline, the map the night's. The developer's dialogs keep their dark cards, square (Kalok
   28 Oct: 「唔好用 rounded corner」). The lab's own GUI (H › 開發者模式) as it was */
@font-face { font-family: "Ku Mincho β"; src: url("fonts/KuMincho-R-beta.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  /* the dialogs' body and words (the face over the picture is white on it) */
  --rm-body: rgba(14, 14, 13, .9); --rm-body2: #111110; --rm-key: #2c2c29; --rm-key-hi: #3a3a36; --rm-well: #000;
  --rm-ink: #f4f2ec; --rm-dim: rgba(244, 242, 236, .66); --rm-faint: rgba(244, 242, 236, .4); --rm-line: rgba(244, 242, 236, .16);
  --rm-acc: #f2f0ea; --rm-acc-hi: #ffffff; --rm-led-off: #4a4a46; --rm-knob: #9d9a92;
  --rm-ease: cubic-bezier(.2, .8, .2, 1); --rm-strike: cubic-bezier(.9, 0, .2, 1);
  /* (Ku Mincho for the Latin and the Chinese alike; a character it lacks from a Song face the system has) */
  --bx-font: "Ku Mincho β", "Songti TC", "STSong", "PMingLiU", "MingLiU", "Noto Serif TC", "Noto Serif CJK TC", serif;
  /* (the names the editor and the dialogs still use) */
  --bx-paper: var(--rm-ink); --bx-dim: var(--rm-dim); --bx-faint: var(--rm-faint); --bx-rule: var(--rm-line); --bx-ink: #111; --bx-panel: var(--rm-body); --bx-panel2: var(--rm-body2);
  --nx-ring: 40px; --nx-gap: 16px;
  /* (the entry's and info's words, by rank: the one thing to do · a control's word · what it does · the small print) */
  --nx-t1: 22px; --nx-t2: 17px; --nx-t3: 12.5px; --nx-t4: 11.5px;
}

/* ---------- the lab's GUI hidden behind the preview (html.betaui: index.html sets it before the first paint) ---------- */
html.betaui body { background: #000; }
html.betaui #app { display: block !important; height: 100vh; }
html.betaui #app > :not(#sheet) { display: none !important; }
html.betaui #sheet { position: fixed !important; inset: 0; border: 0 !important; background: #000; }
html.betaui #sheet > :not(#night):not(#mapv) { display: none !important; }
html.betaui #night .nbar, html.betaui #night .nhud, html.betaui #layers, html.betaui #safeBar, html.betaui #newer { display: none !important; }
html.betaui #mapv { z-index: 6; inset: 0; border-radius: 0; overflow: hidden; }   /* (full bleed, Kalok 31 Oct: 「將map變做full bleed overlay」 — over the rings and the switch, the sheet lifted over the GUI while it is up) */
html.betaui:has(#mapv:not([hidden])) #sheet { z-index: 30; }
html.betaui #toast { z-index: 40; left: 50%; right: auto; bottom: 92px; transform: translateX(-50%); max-width: calc(100vw - 32px); font: 15px/1.3 var(--bx-font); letter-spacing: .04em; text-transform: lowercase; background: rgba(0, 0, 0, .55); color: #fff; border: 0; border-radius: 0; box-shadow: none; padding: 6px 14px; text-align: center; }
/* (idle: the cursor away with the GUI) */
html.betaui.nx-idle, html.betaui.nx-idle * { cursor: none !important; }

/* ---------- the preview's own ---------- */
#beta { position: fixed; inset: 0; z-index: 20; pointer-events: none; font: 17px/1.2 var(--bx-font); color: #fff; letter-spacing: .02em; -webkit-font-smoothing: antialiased; }
#beta * { box-sizing: border-box; }
/* (the reset at no specificity, so every class below sets its own) */
:where(#beta) button, :where(#beta) a { pointer-events: auto; font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
#beta button:disabled { cursor: default; }
#beta button:focus-visible, #beta a:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
#beta input:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
html:not(.betaui) #beta .bx-ui { display: none !important; }
/* (every word of the visitor's face in lower case; the developer's dialogs as they were) */
#beta .bx-ui { text-transform: lowercase; }
.bx-cap { text-transform: uppercase; letter-spacing: .14em; font-size: .82em; }
/* (the lab inks its own pressed buttons, style.css button[aria-pressed=true], and fills any under the pointer: not these —
   the face's own below, each at the specificity that beats those two) */
#beta button[aria-pressed], #beta button:hover { color: inherit; border-color: transparent; }
#beta .nx-wx button, #beta .nx-wx button:hover, #beta .nx-wx button[aria-pressed], #beta .nx-side, #beta .nx-side:hover, #beta .nx-mode, #beta .nx-mode:hover, #beta .nx-mode[aria-pressed],
#beta .nx-pop .pr button, #beta .nx-pop .pr button:hover, #beta .bx-x, #beta .bx-x:hover, #beta .bx-h, #beta .bx-h:hover { background: none; }
#beta .nx-wx button { color: rgba(255, 255, 255, .72); }
#beta .nx-wx button:hover, #beta .nx-wx button[aria-pressed="true"] { color: #fff; }
#beta .nx-c, #beta .nx-c[aria-pressed] { background: none; color: #fff; }
#beta .nx-c:hover { background: rgba(255, 255, 255, .14); color: #fff; }
#beta .nx-c[aria-pressed="true"], #beta .nx-c[aria-pressed="true"]:hover { background: #fff; color: #111; }
#beta .nx-play[aria-pressed], #beta .nx-play[aria-pressed]:hover { background: #fff; color: #444; }
#beta .nx-play[aria-pressed]:hover { background: #ececec; }
#beta .nx-start, #beta .nx-start:hover { background: none; color: #fff; }
#beta .nx-explore, #beta .nx-explore:hover, #beta .nx-x, #beta .nx-x:hover { background: none; color: #fff; }
#beta .nx-explore { color: #fff; }
#beta .nx-x:hover { background: #fff; color: #111 !important; }

/* (the layers: the entry's and info's veils under the face, its controls showing through them with their words; the
   camera over the face; the developer's dialogs and the shots' editor over all of it) */
#beta .nx-land, #beta .bx-info { z-index: 1; }
#beta :is(.nx-wx, .nx-top, .nx-side, .nx-pad, .nx-dock, .nx-corner, .nx-say, .bx-h) { z-index: 2; }
#beta .nx-pop { z-index: 3; }
#beta .bx-menu, #beta .bx-signs, #beta .bx-shots { z-index: 5; }

/* the symbols: Material Symbols Outlined, thin to sit with the rings' hairline; a name not yet drawn clipped to a letter */
.ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none !important; display: inline-block; width: 1em; height: 1em; overflow: hidden; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 24; }

/* ---------- the GUI fading away when idle, back at a touch (the word in the middle left to finish) ---------- */
.nx-wx, .nx-top, .nx-side, .nx-pad, .nx-dock, .nx-corner, .nx-pop, .bx-h { transition: opacity .9s var(--rm-ease), visibility 0s; }
html.nx-idle #beta :is(.nx-wx, .nx-top, .nx-side, .nx-dock, .nx-corner, .bx-h) { opacity: 0; visibility: hidden; pointer-events: none !important; transition: opacity 1.4s var(--rm-ease), visibility 0s 1.4s; }
html.nx-idle #beta :is(.nx-wx, .nx-top, .nx-side, .nx-dock, .nx-corner, .bx-h) * { pointer-events: none !important; }
/* (the pads, a game's: faint when idle, never gone — a finger on one walks at once, beta.js lets that touch through) */
html.nx-idle #beta .nx-pad { opacity: .22; transition: opacity 1.4s var(--rm-ease); }

/* ---------- top left: 晴 陰 雨 · 日 暮 夜, the one on underlined; 燈 and its switch (the neon on or off) ---------- */
.nx-wx { position: absolute; left: 28px; top: 24px; display: flex; align-items: center; gap: 24px; pointer-events: auto; }
.nx-wx .g { position: relative; display: flex; gap: 2px; }
.nx-wx .g button { position: relative; padding: 4px 7px 7px; font-size: 18px; letter-spacing: 0; transition: color .3s; }
.nx-wx .g button:first-child { padding-left: 0; }
.nx-wx .g button::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 2px; height: 1px; background: #fff; transform: scaleX(0); transition: transform .45s var(--rm-ease); }
.nx-wx .g button:first-child::after { left: 0; }
.nx-wx .g button[aria-pressed="true"]::after { transform: none; }
/* (the switch: a hairline track, its knob left when off; on, the track white and the knob over to the right, dark) */
.nx-lit { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 0 7px; font-size: 18px; letter-spacing: 0; transition: color .3s; }
.nx-lit .sw { position: relative; display: block; width: 30px; height: 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px currentColor; transition: background .3s, box-shadow .3s; }
.nx-lit .sw i { position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transition: transform .35s var(--rm-ease), background .3s; }
#beta .nx-wx .nx-lit[aria-checked="true"] { color: #fff; }
.nx-lit[aria-checked="true"] .sw { background: #fff; box-shadow: inset 0 0 0 1px #fff; }
.nx-lit[aria-checked="true"] .sw i { transform: translateX(14px); background: #111; }

/* ---------- top right: the rings, a line struck down from each to its word ---------- */
.nx-top { position: absolute; right: 28px; top: 22px; display: flex; gap: var(--nx-gap); pointer-events: none; }
.nx-it { position: relative; width: var(--nx-ring); display: flex; flex-direction: column; align-items: center; }
.nx-c { position: relative; z-index: 1; display: grid; place-items: center; width: var(--nx-ring); height: var(--nx-ring); border-radius: 50%; box-shadow: inset 0 0 0 1px #fff; color: #fff; transition: background .3s, color .3s, transform .16s var(--rm-ease); }
.nx-c:active { transform: scale(.93); }
#beta .nx-c[aria-pressed="true"] { background: #fff; color: #111; }
.nx-c .ms { font-size: 21px; }
/* (the line: from under the ring, struck down fast, a flicker as it lands; the word after it) */
.nx-ln { position: absolute; left: 50%; top: var(--nx-ring); width: 1px; height: var(--drop, 60px); margin-left: -.5px; background: #fff; transform-origin: top; transform: scaleY(0); opacity: 0; transition: transform .1s ease-in, opacity .25s; pointer-events: none; }
.nx-lb { position: absolute; left: 50%; top: calc(var(--nx-ring) + var(--drop, 60px) + 5px); transform: translate(-50%, -4px); font-size: 17px; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .3s var(--rm-ease); pointer-events: none; }
.nx-sub { display: none; position: absolute; left: 50%; top: calc(var(--nx-ring) + var(--drop, 60px) + 27px); transform: translateX(-50%); font-size: var(--nx-t3); white-space: nowrap; color: rgba(255, 255, 255, .66); pointer-events: none; text-shadow: 0 0 6px rgba(0, 0, 0, .75); }
/* (a pointer that hovers, or the keyboard's own focus — not a tap's sticky hover, not a focus a script left) */
@media (hover: hover) {
  .nx-it:hover .nx-ln { transform: none; opacity: 1; transition: transform .16s var(--rm-strike); animation: nxstrike .34s steps(1, end); }
  .nx-it:hover .nx-lb { opacity: 1; transform: translate(-50%, 0); transition: opacity .3s .14s, transform .4s .14s var(--rm-ease); }
}
.nx-it:has(.nx-c:focus-visible) .nx-ln { transform: none; opacity: 1; transition: transform .16s var(--rm-strike); animation: nxstrike .34s steps(1, end); }
.nx-it:has(.nx-c:focus-visible) .nx-lb { opacity: 1; transform: translate(-50%, 0); transition: opacity .3s .14s, transform .4s .14s var(--rm-ease); }
/* (the camera's sliders open, or the map up: no line or word dropped over them; the sides off the map) */
#beta .nx-top:has(~ .nx-pop:not([hidden])) :is(.nx-ln, .nx-lb), html.betaui:has(#mapv:not([hidden])) #beta :is(.nx-side, .nx-ln, .nx-lb) { display: none; }
@keyframes nxstrike { 0% { opacity: 1; } 45% { opacity: .25; } 55% { opacity: 1; } 70% { opacity: .45; } 80% { opacity: 1; } }

/* ---------- the sides: prev · next ---------- */
.nx-side { position: absolute; top: 50%; transform: translateY(-50%); padding: 12px 0; font-size: 19px; color: #fff; pointer-events: auto; transition: opacity .9s var(--rm-ease), letter-spacing .3s var(--rm-ease); }
.nx-prev { left: 28px; } .nx-next { right: 28px; }
.nx-side:hover { letter-spacing: .08em; }
.nx-side .tv, .nx-pad { display: none; }

/* ---------- the middle: the state just picked, twice the buttons' size (the sides' 19 px), its letters cut out of a
   glow of its colour, the picture through them (beta.js GLOW: an SVG filter over the whole band the word sits in — the
   old blurred text-strokes were cut off square by the boxes the browser gave them) ---------- */
.nx-say { position: absolute; left: 0; right: 0; top: 50%; height: 240px; margin-top: -120px; opacity: 0; pointer-events: none; transition: opacity 1.3s ease-in-out; }
.nx-say svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nx-say text { font-family: var(--bx-font); font-size: 38px; letter-spacing: .03em; fill: #fff; }
.nx-say .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nx-say.on { opacity: 1; transition: opacity .55s ease-out; }

/* ---------- the bottom: the bolts' switch (its pill centred) and ▶ beside it ---------- */
.nx-dock { position: absolute; left: 0; right: 0; bottom: 22px; height: 64px; pointer-events: none; }
.nx-mode { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: auto; touch-action: none; }
.nx-mode .dots { display: flex; justify-content: space-between; width: 134px; padding: 0 19px 0 22px; }
.nx-mode .dots i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .55; transition: opacity .35s; }
.nx-mode[data-mode="lane"] .dots i:nth-child(1), .nx-mode[data-mode="stage"] .dots i:nth-child(2), .nx-mode[data-mode="performance"] .dots i:nth-child(3) { opacity: 1; }
.nx-mode .pill { position: relative; display: block; width: 134px; height: 44px; border-radius: 22px; background: rgba(176, 176, 176, .82); transition: background .3s; }
.nx-mode:hover .pill { background: rgba(196, 196, 196, .88); }
.nx-mode .knob { position: absolute; left: 3px; top: 3px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #3a3a3a; transform: translateX(calc(var(--pos, 0) * 45px)); transition: transform .42s var(--rm-ease), background .35s, color .35s; }
.nx-mode .knob .ms { font-size: 24px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
/* (1 normal: the bolt still · 2 stage: it flashes as the bolts do · 3 performance: the knob dark, the bolt flashing through
   the palette — beta.js sets --bolt every so often) */
.nx-mode[data-mode="stage"] .knob .ms, .nx-mode[data-mode="performance"] .knob .ms { animation: nxbolt 2.6s steps(1, end) infinite; }
.nx-mode[data-mode="performance"] .knob { background: #000; color: var(--bolt, #ff3b30); }
.nx-mode[data-mode="performance"] .knob .ms { text-shadow: 0 0 6px var(--bolt, #ff3b30); transition: color .12s; }
@keyframes nxbolt { 0% { opacity: 1; } 4% { opacity: .12; } 7% { opacity: 1; } 10% { opacity: .2; } 13% { opacity: 1; } 46% { opacity: .1; } 49% { opacity: 1; } 71% { opacity: .15; } 73% { opacity: 1; } 76% { opacity: .3; } 79% { opacity: 1; } }
.nx-play { position: absolute; left: calc(50% + 67px + 21px); bottom: 3px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #444; pointer-events: auto; transition: transform .16s var(--rm-ease), background .3s; }
.nx-play:hover { background: #f0f0f0; }
.nx-play:active { transform: scale(.92); }
.nx-play .ms { grid-area: 1 / 1; font-size: 26px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; transition: opacity .3s, transform .38s var(--rm-ease); }
.nx-play .pa { opacity: 0; transform: scale(.6) rotate(-90deg); }
.nx-play[aria-pressed="true"] .pl { opacity: 0; transform: scale(.6) rotate(90deg); }
.nx-play[aria-pressed="true"] .pa { opacity: 1; transform: none; }

/* ---------- the corner: the open call, the version, the data and its years (small, bottom left) ---------- */
.nx-corner .wk { font-size: 13px; letter-spacing: .04em; color: #fff; }   /* (the work's name, over the open call's line) */
.nx-work { margin: 14px 0 -26px; font-size: 17px; letter-spacing: .06em; color: #fff; } .nx-work span { margin-left: 6px; font-size: 14px; }
.nx-corner { position: absolute; left: 28px; bottom: 22px; max-width: calc(50vw - 140px); display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; line-height: 1.35; letter-spacing: .03em; color: rgba(255, 255, 255, .5); }

/* ---------- the camera: hung from its ring on a hairline, the sliders and words over the picture, a shade behind them
   only as dark as reading them needs ---------- */
.nx-pop { --pop-top: 100px; --top-y: 22px; position: absolute; right: 28px; top: var(--pop-top); width: min(300px, calc(100vw - 32px)); pointer-events: auto; padding: 12px 0 4px; font-size: 15px; border-top: 1px solid #fff;
  background: radial-gradient(130% 100% at 55% 30%, rgba(0, 0, 0, .52), rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, 0) 85%); text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
.nx-conn { position: absolute; bottom: 100%; right: calc(var(--nx-ring) / 2 + 3 * (var(--nx-ring) + var(--nx-gap)) - .5px); width: 1px; height: calc(var(--pop-top) - var(--top-y) - var(--nx-ring)); background: #fff; transform-origin: top; animation: nxdraw .2s var(--rm-strike) both, nxstrike .34s steps(1, end) both; }
.nx-pop[hidden] { display: none; }
.nx-pop:not([hidden]), .bx-veil:not([hidden]) .bx-card, .bx-shots:not([hidden]) { animation: bxrise .32s var(--rm-ease); }
.bx-veil:not([hidden]) { animation: bxfade .3s var(--rm-ease); }
@keyframes bxrise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes bxfade { from { opacity: 0; } to { opacity: 1; } }
.bx-sl { display: grid; grid-template-columns: 7.4em 1fr 4.2em; align-items: center; gap: 10px; margin: 6px 0; }
.bx-sl .k { font-size: 14px; color: rgba(255, 255, 255, .75); }
.bx-sl output { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.bx-sl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: none; cursor: ew-resize; pointer-events: auto; }
.bx-sl input[type=range]::-webkit-slider-runnable-track { height: 1px; background: rgba(255, 255, 255, .6); }
.bx-sl input[type=range]::-moz-range-track { height: 1px; background: rgba(255, 255, 255, .6); }
.bx-sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6.5px; border-radius: 50%; background: #fff; transition: transform .15s; }
.bx-sl input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.bx-sl input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.bx-sl input.wb::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #d07a40, #fff 45%, #8fb0ff); }
.nx-pop .pr { display: flex; gap: 4px; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .2); }
.nx-pop .pr button { font-size: 15px; padding: 4px 9px; color: rgba(255, 255, 255, .8); transition: color .2s, box-shadow .2s; }
.nx-pop .pr button:hover { color: #fff; box-shadow: inset 0 -1px 0 #fff; }
.nx-pop .pr button:first-child { margin-right: auto; padding-left: 0; }

/* ---------- the H (the hidden menu; the key H too): faint, bottom right ---------- */
.bx-h { position: absolute; right: 18px; bottom: 22px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px !important; letter-spacing: 0 !important; color: rgba(255, 255, 255, .5) !important; opacity: .35; transition: opacity .25s; }
.bx-h:hover { opacity: 1; color: #fff !important; }
html:not(.betaui) .bx-h { right: auto; left: 8px; bottom: 8px; z-index: 1; opacity: .9; background: #111 !important; }   /* (the developer GUI: out of its toolbar's way) */

/* ---------- the dialogs: info, the hidden menu, the signs ---------- */
/* (a newer build on the host, stale.js: one thin-lined word above the dock and the toast, over the face, under the menus) */
#beta .bx-newer, #beta .bx-newer:hover { position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); z-index: 4; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .75); background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; letter-spacing: .06em; white-space: nowrap; }
#beta .bx-newer span { color: var(--rm-dim); margin-left: 6px; }
#beta .bx-newer[hidden] { display: none; }
.bx-veil { position: absolute; inset: 0; z-index: 3; pointer-events: auto; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.bx-veil[hidden] { display: none; }
.bx-card { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: rgba(10, 10, 9, .94); border-radius: 0; padding: 28px 30px 24px; color: var(--rm-ink); }
.bx-card h2 { margin: 0 0 4px; font-weight: 400; font-size: 30px; letter-spacing: .04em; }
.bx-card h3 { margin: 0; font-weight: 400; font-size: 16px; letter-spacing: .12em; color: var(--rm-ink); }
.bx-card p { margin: 6px 0; font-size: 15.5px; line-height: 1.5; color: var(--rm-ink); }
.bx-card .dim { color: var(--rm-dim); }
.bx-card .small { font-size: 13px; line-height: 1.5; color: var(--rm-dim); }
.bx-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; margin: 8px 0 0; font-size: 15px; }
.bx-card dt { color: var(--rm-ink); white-space: nowrap; }
.bx-card dd { margin: 0; color: var(--rm-dim); line-height: 1.45; }
.bx-x { position: absolute; right: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%; font-size: 22px !important; line-height: 1; color: var(--rm-dim) !important; transition: color .2s, box-shadow .2s; }
.bx-x:hover { color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.bx-menu .bx-card { width: min(460px, 100%); }
.bx-list { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--rm-line); }
.bx-list button { display: flex; align-items: baseline; gap: 10px; padding: 12px 6px; border-bottom: 1px solid var(--rm-line) !important; text-align: left; font-size: 17px; transition: background .2s, padding .25s var(--rm-ease); }
.bx-list button small { margin-left: auto; font-size: 12px; color: var(--rm-dim); letter-spacing: .1em; text-transform: uppercase; }
.bx-list button:hover { background: rgba(244, 242, 236, .05); padding-left: 12px; }
.bx-list button[aria-pressed="true"] small { color: #fff; }
#beta .bx-list button[aria-pressed] { background: none; }
.bx-signs .bx-card { width: min(540px, 100%); }
.bx-sign { display: grid; grid-template-columns: 4.5em 1fr; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rm-line); }
.bx-sign .nm { font-size: 26px; letter-spacing: .06em; }
.bx-sign .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.bx-sign .acts button { padding: 7px 14px; border-radius: 0; background: var(--rm-key); font-size: 14px; transition: background .2s, color .2s; }
#beta .bx-sign .acts button:hover:not(:disabled) { background: var(--rm-acc); color: var(--rm-body2); }
.bx-sign .acts button:disabled { opacity: .35; }
.bx-sign .st { grid-column: 2; font-size: 12.5px; color: var(--rm-dim); }

/* ---------- the entry and info: each control's word struck to it — a line from it (down, or up from the bottom), the
   word, a few more small — one after another as a bolt runs, flickering as it lands ---------- */
.nx-hint, .nx-cap { display: none; position: absolute; z-index: 1; pointer-events: none; white-space: nowrap; text-align: center; line-height: 1.25; letter-spacing: .02em; color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, .8), 0 0 2px rgba(0, 0, 0, .6); }
.nx-hint b { display: block; font-weight: 400; font-size: var(--nx-t2); }
.nx-hint small { display: block; margin-top: 3px; font-size: var(--nx-t3); color: #fff; }
.nx-hint .l, .nx-cap .l { position: absolute; left: 50%; width: 1px; margin-left: -.5px; background: #fff; }
.nx-hint.dn { top: calc(100% - 2px); left: 50%; transform: translateX(-50%); padding-top: 22px; }
.nx-hint.dn .l { top: 0; height: 18px; transform-origin: top; }
.nx-hint.up { --up: 30px; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding-bottom: var(--up); }
.nx-hint.up .l { bottom: 0; height: calc(var(--up) - 6px); transform-origin: bottom; }
.nx-play .nx-hint.up { --up: 68px; bottom: calc(100% + 4px); }
.nx-hint.side { top: 100%; margin-top: -4px; }
.nx-hint.side .l { display: none; }
.nx-prev .nx-hint { left: 0; text-align: left; } .nx-next .nx-hint { right: 0; text-align: right; }
html:is(.nx-entry, .nx-guide) #beta :is(.nx-hint, .nx-it .nx-sub) { display: block; }
html:is(.nx-entry, .nx-guide) #beta :is(.nx-hint b, .nx-hint small, .nx-it .nx-lb, .nx-it .nx-sub) { opacity: 1; animation: nxin .45s ease-out both; animation-delay: calc(var(--i, 0) * 85ms + .5s); }
html:is(.nx-entry, .nx-guide) #beta :is(.nx-hint .l, .nx-it .nx-ln) { opacity: 1; transform: none; animation: nxdraw .22s var(--rm-strike) both, nxstrike .34s steps(1, end) both; animation-delay: calc(var(--i, 0) * 85ms + .32s); }
html:is(.nx-entry, .nx-guide) #beta .nx-it .nx-lb { transform: translate(-50%, 0); text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
html:is(.nx-entry, .nx-guide) #beta .nx-it > * { --drop: var(--drop-g); }   /* (the rings' drops for their words side by side) */
/* (the face out of reach behind them: beta.js sets it inert too) */
html:is(.nx-entry, .nx-guide) #beta :is(.nx-wx, .nx-top, .nx-side, .nx-pad, .nx-dock, .bx-h), html:is(.nx-entry, .nx-guide) #beta :is(.nx-wx, .nx-top, .nx-side, .nx-pad, .nx-dock, .bx-h) * { pointer-events: none !important; }
/* (the tutorial's words all white, the controls themselves dimmed under them — Kalok 29 Oct: 「for all the tutorial text
   and center box element, make it white in color. but all the button that control … make it dim … readability and
   legibility」; each control's word a child of it is kept out of its dimming) */
html:is(.nx-entry, .nx-guide) #beta :is(.nx-hint, .nx-hint small, .nx-it .nx-lb, .nx-it .nx-sub, .nx-cap) { color: #fff; }
html:is(.nx-entry, .nx-guide) #beta :is(.nx-c, .nx-wx .g button, .nx-lit > span:not(.nx-hint), .nx-lit .sw, .nx-mode .dots, .nx-mode .pill, .nx-side .tv, .nx-stick .ring, .nx-stick .knob, .nx-stick .nm, .bx-h) { opacity: .3; }
html:is(.nx-entry, .nx-guide) #beta .nx-side { color: rgba(255, 255, 255, .3); }
html:is(.nx-entry, .nx-guide) #beta .nx-play[aria-pressed] { background: rgba(255, 255, 255, .3); }
html:is(.nx-entry, .nx-guide) #beta .nx-corner { opacity: .45; }
/* (nor the state word over them) */
html:is(.nx-entry, .nx-guide) #beta .nx-say { visibility: hidden; }
@keyframes nxin { from { opacity: 0; } to { opacity: 1; } }
@keyframes nxdraw { from { transform: scaleY(0); } to { transform: none; } }

/* ---------- the entry: black, the face over it with its words (Kalok 29 Oct: 「use black screen … only show plain black
   screen with text tutorial with clear text size hierarchy」); the loading's hairline, ▶ start the one big key. Started,
   beta.js strike lets the night in as lightning does ---------- */
.nx-land { position: absolute; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center; padding: 16px 0; overflow: hidden auto; background: #000; }
.nx-mid { width: min(560px, calc(100% - 32px)); margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* (a title in neon: info's) */
.nx-title { display: block; flex: none; width: 100vw; height: 236px; margin: -66px 0 -74px; overflow: visible; pointer-events: none; animation: nxign 1.8s .3s steps(1, end) both; }
.nx-title text { font-family: var(--bx-font); font-size: 64px; letter-spacing: .14em; fill: #fff; }
@keyframes nxign { 0% { opacity: 0; } 6% { opacity: .85; } 10% { opacity: .08; } 18% { opacity: 1; } 22% { opacity: .2; } 38% { opacity: .2; } 42% { opacity: 1; } 47% { opacity: .5; } 51%, 100% { opacity: 1; } }
/* (the loading: a hairline filling, its stage and its share under it) */
.nx-load { width: min(280px, 72vw); animation: nxin .6s .9s ease-out both; }
.nx-bar { position: relative; height: 1px; background: rgba(255, 255, 255, .24); }
.nx-bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); box-shadow: 0 0 6px rgba(255, 255, 255, .9); }
.nx-ls { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; font-size: var(--nx-t4); letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-ls [data-r=ls] { overflow: hidden; text-overflow: ellipsis; }
.nx-land.ready .nx-bar i { box-shadow: none; }
.nx-land.failed .nx-ls { color: #fff; white-space: normal; text-align: left; }
/* (start: a plain word, the first of the entry's sizes, faded in once the bar is full — beta.js full — a hairline drawn
   under it at the pointer or the keyboard; walking on one's own with it) */
.nx-start { position: relative; margin-top: 30px; padding: 6px 4px 8px; font-size: var(--nx-t1); letter-spacing: .06em; opacity: 0; visibility: hidden; transition: opacity 1s var(--rm-ease), visibility 0s 1s; }
.nx-start::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 1px; background: #fff; transform: scaleX(0); transition: transform .45s var(--rm-ease); }
.nx-start:hover::after, .nx-start:focus-visible::after { transform: none; }
#beta .nx-start:focus-visible { outline: none; }
.nx-land.full :is(.nx-start, .nx-explore, .nx-tap) { opacity: 1; visibility: visible; transition: opacity 1s var(--rm-ease), visibility 0s; }
.nx-land.full .nx-explore { transition-delay: .25s; }
.nx-tap { margin: 30px 0 0; font-size: var(--nx-t3); letter-spacing: .08em; color: #fff; opacity: 0; visibility: hidden; transition: opacity 1s var(--rm-ease), visibility 0s 1s; }
.nx-tap .t { display: none; }
@media (hover: none) and (pointer: coarse) { .nx-tap .k { display: none; } .nx-tap .t { display: inline; } }
.nx-land.full .nx-tap { animation: nxtap 2.8s 1s ease-in-out infinite; }
@keyframes nxtap { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .nx-land.full .nx-tap { animation: none; } }
html.nx-entry #beta .nx-land.full { cursor: pointer; }
#beta .nx-mid:focus { outline: none; }
.nx-explore { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 2px; font-size: 15px; opacity: 0; visibility: hidden; transition: color .2s, box-shadow .2s, opacity 1s var(--rm-ease), visibility 0s 1s; }
.nx-explore .ms { font-size: 20px; }
#beta .nx-explore:hover:not(:disabled) { color: #fff; box-shadow: inset 0 -1px 0 #fff; }
.nx-walk { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 14px; font-size: var(--nx-t3); color: #fff; animation: nxin .6s 1.2s ease-out both; }
.nx-walk span { display: inline-flex; align-items: center; gap: 6px; }
.nx-walk .ms { font-size: 18px; }
.nx-walk .t { display: none; }
@media (hover: none) and (pointer: coarse) { .nx-walk .k { display: none; } .nx-walk .t { display: inline-flex; } }

/* ---------- the loading before it: Kalok's board (31 Oct, the open call's cover, 「please change the loading phase based
   on this layout」) — the whole screen the board: down the left one column 3 S wide, 大館里 in 空明朝體 at S, Thunder /
   of / the night under it, 賡續霓術 ｜ 當代山水 ｜ 藝蹟遊龍 set out across the column, 舞雷公 at S at its foot; written down
   the right edge Open Call: Tai Kwun Neon Connection 2026 and 大館霓虹提案徵集; the dot under 里 circled by the two signs
   (beta.js orbitRun). The board has no bar: the bar, its word and START in the black at the bottom right, the keys over
   them. S the most the screen's height and width allow, so it keeps its proportions at any size; a phone upright, the
   column and the bar under it, in the middle. The black lit from outside the frame as before (skyRun: 「keep the
   background as the current animation of the thunder」) ---------- */
html.nx-intro #beta :is(.nx-wx, .nx-top, .nx-side, .nx-pad, .nx-dock, .nx-corner, .nx-say, .bx-h) { visibility: hidden; }
html.nx-intro #beta .nx-land > .nx-mid { display: none; }
.nx-intro { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; transition: opacity .7s var(--rm-ease); }
.nx-intro.out { opacity: 0; pointer-events: none; }
.nx-intro[hidden] { display: none; }
.nx-sky, .nx-sky i { position: absolute; inset: 0; pointer-events: none; }
.nx-sky i { opacity: 0; mix-blend-mode: screen; will-change: opacity; }
.nx-sky .fx { z-index: 3; }   /* (the veil over the lockup: screen leaves the white words white; its height capped in beta.js, SKY_FX) */
.nx-lock { --pad: clamp(16px, 2vmin, 32px); --S: min(calc((100dvh - 2 * var(--pad)) / 3.85), calc((100vw - 2 * var(--pad)) / 3.7)); position: absolute; inset: 0; box-sizing: border-box; padding: var(--pad); display: grid; grid-template: 1fr auto / auto 1fr auto; column-gap: calc(var(--S) * .15); color: #fff; animation: nxin .8s .15s ease-out both; }
.nx-lock > :not(svg):not(.sr) { position: relative; z-index: 1; }
.nx-lock .col { grid-area: 1 / 1 / 3 / 2; align-self: center; width: calc(var(--S) * 3); font-size: var(--S); }
.nx-lock .zh { font-size: 1em; line-height: 1; letter-spacing: 0; font-kerning: auto; white-space: nowrap; text-transform: none; }
.nx-lock .en { margin: 0; font-size: .47em; line-height: 1.04; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.nx-lock .tag { display: flex; justify-content: space-between; align-items: center; margin: .8em 0 0; font-size: .15em; line-height: 1; white-space: nowrap; }
.nx-lock .tag span { margin-right: -.3em; letter-spacing: .3em; }   /* (tracked wide, its last letter's tracking hung out) */
.nx-lock .tag i { width: 1px; height: 1.15em; background: #fff; }
.nx-lock .r3 { margin-top: .08em; }
/* (written down: the open call's Latin turned on its side at the very edge, its Chinese upright inside it) */
.nx-lock .side { grid-area: 1 / 3 / 2 / 4; align-self: start; writing-mode: vertical-rl; white-space: nowrap; text-transform: none; }
.nx-lock .side > span { display: block; line-height: 1; }
.nx-lock .side .oc { font-size: calc(var(--S) * .115); letter-spacing: .02em; }
.nx-lock .side .zh { margin-block-start: calc(var(--S) * .03); font-size: calc(var(--S) * .18); letter-spacing: .05em; }
/* (the bar, its word and START in the black at the bottom right, the keys over them) */
.nx-lock .act { grid-area: 2 / 2 / 3 / 4; justify-self: end; align-self: end; width: min(300px, 100%); display: flex; flex-direction: column; font-size: 16px; }
.nx-lock .nx-load { width: 100%; animation: none; }
.nx-lock .nx-ls { font-size: clamp(10px, calc(var(--S) * .068), 13px); }
.nx-lock .go { align-self: flex-end; margin: calc(var(--S) * .1) -.32em 0 0; padding: 4px 0 4px .32em; font-size: clamp(12px, calc(var(--S) * .1), 21px); letter-spacing: .32em; text-transform: uppercase; text-decoration: underline 1px; text-underline-offset: .32em; color: #fff; opacity: 0; visibility: hidden; transition: opacity 1s var(--rm-ease), visibility 0s 1s; }
#beta .nx-lock .go, #beta .nx-lock .go:hover { background: none; color: #fff; }
#beta .nx-lock .go:focus-visible { outline: none; text-shadow: 0 0 8px rgba(255, 255, 255, .8); }
.nx-land.full .nx-lock .go { opacity: 1; visibility: visible; transition: opacity 1s var(--rm-ease), visibility 0s; }
.nx-lock .nx-walk { justify-content: flex-end; gap: 4px 18px; margin: 0 0 calc(var(--S) * .1); animation: nxin .6s .5s ease-out both; }
/* (a screen upright: the column and the bar under it, both in the middle, the open call still down the right edge) */
@media (orientation: portrait) {
  .nx-lock { --S: min(calc((100vw - 2 * var(--pad)) / 3.7), calc((100dvh - 2 * var(--pad) - 150px) / 3.85)); grid-template: auto auto / auto 1fr auto; align-content: center; }
  .nx-lock .col { grid-area: 1 / 1 / 2 / 2; align-self: start; }
  .nx-lock .act { grid-area: 2 / 1 / 3 / 2; justify-self: stretch; width: auto; margin-top: calc(var(--S) * .45); }
  .nx-lock .nx-walk { justify-content: flex-start; }
}
/* (the orbit, flat: a hairline, its far half behind the words, the near over them; the signs flat in their yellows) */
.nx-lock .orb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nx-lock .orb.back { z-index: 0; } .nx-lock .orb.front { z-index: 2; }
.nx-lock .orb .ring { fill: none; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.nx-lock .orb .ring { stroke-opacity: .85; stroke-linecap: round; shape-rendering: geometricPrecision; }   /* (Kalok 29 Oct: 「make the orbit line always the same thickness」: one weight and one strength, near half and far) */
.nx-lock .orb .dot { fill: #fff; }
@media (prefers-reduced-motion: reduce) { .nx-lock, .nx-lock .nx-walk { animation: none; } }
@media (max-height: 520px) { .nx-lock .nx-walk { display: none; } }

/* ---------- info: the face's words again over the picture, the keys and the data in the middle, no card ---------- */
#beta .bx-info { padding: 0; background: rgba(0, 0, 0, .62); }
.nx-gd { width: min(540px, calc(100% - 32px)); max-height: calc(100vh - 360px); max-height: calc(100dvh - 360px); min-height: 280px; overflow: hidden auto; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; scrollbar-width: thin; animation: bxrise .32s var(--rm-ease); }
.nx-x { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #fff; transition: background .25s, color .25s; }
#beta .nx-x { position: relative; right: auto; top: auto; color: #fff !important; }
.nx-x .ms { font-size: 22px; }
.nx-title-i { flex: none; height: 170px; margin: -48px 0 -60px; animation: nxign 1.2s .1s steps(1, end) both; }
.nx-title-i text { font-size: 44px; letter-spacing: .06em; }
.nx-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #fff; }
.nx-gd .zh { margin-left: 4px; color: #fff; }
.nx-keys { display: grid; grid-template-columns: max-content 1fr max-content 1fr; align-items: center; gap: 10px 12px; width: 100%; margin: 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .32); border-bottom: 1px solid rgba(255, 255, 255, .32); font-size: 14px; text-align: left; }
.nx-keys dt { display: flex; align-items: center; justify-content: flex-end; gap: 3px; white-space: nowrap; }
.nx-keys dt .ms { font-size: 18px; }
.nx-keys dd { margin: 0; white-space: nowrap; }
.nx-gd kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font: 12px/1 var(--bx-font); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72); }
.nx-cred { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: #fff; text-align: left; }
.nx-cred p { margin: 5px 0; }
/* (a touch screen: the controls and what each does, not keys it hasn't got) */
.nx-gd .tc { display: none; }
.nx-gd .pd { display: none; }
@media (hover: none) and (pointer: coarse) { .nx-gd .kb { display: none; } .nx-gd p.tc { display: block; } .nx-gd dl.tc { display: grid; } .nx-hint .kb { display: none; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the map: the night's (app.js BETA_MAP), hung in a hairline, struck open as the rings' lines are ---------- */
html.betaui #mapv { background: #060606; animation: nxmap .55s var(--rm-ease) both; }
@keyframes nxmap { 0% { clip-path: inset(-2px -2px 100% -2px); opacity: .4; } 40% { opacity: 1; } 52% { opacity: .45; } 62% { opacity: 1; } 100% { clip-path: inset(-2px); opacity: 1; } }   /* (ending outside its hairline: clip-path held on would cut it) */
html.betaui #mapv .mv-zoom { right: 14px; top: auto; bottom: 30px; gap: 8px; }   /* (clear of the compass the map draws top right) */
html.betaui #mapv .mv-zoom button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px #fff; color: #fff; transition: background .25s, color .25s; }
html.betaui #mapv .mv-zoom button:hover { background: #fff; color: #111; }
html.betaui #mapv .mv-zoom .ms { font-size: 20px; }
html.betaui #mapv .mv-zoom button:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
/* (the map's two tabs top left: map · floor plan, the one open underlined, as the weather is) */
html.betaui #mapv .nx-tabs { position: absolute; left: 14px; top: 10px; z-index: 3; display: flex; gap: 4px; font: 16px/1.2 var(--bx-font); text-transform: lowercase; }
html.betaui #mapv .nx-tabs button, html.betaui #mapv .nx-tabs button:hover, html.betaui #mapv .nx-tabs button[aria-pressed] { position: relative; padding: 5px 8px 8px; border: 0; border-radius: 0; background: none; color: rgba(255, 255, 255, .62); font: inherit; letter-spacing: .02em; cursor: pointer; text-shadow: 0 0 6px rgba(0, 0, 0, .9); }
html.betaui #mapv .nx-tabs button:hover, html.betaui #mapv .nx-tabs button[aria-pressed="true"] { color: #fff; }
html.betaui #mapv .nx-tabs button::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 1px; background: #fff; transform: scaleX(0); transition: transform .45s var(--rm-ease); }
html.betaui #mapv .nx-tabs button[aria-pressed="true"]::after { transform: none; }
html.betaui #mapv .nx-tabs button:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
html:not(.betaui) #mapv :is(.nx-tabs, .nx-plan, .nx-np) { display: none !important; }
/* ---------- the floor plan (plan.js): the night's world from above, black, its walls and their numbers in hairlines, the
   works on them white, the one under the pointer lit with its look beside it ---------- */
html.betaui #mapv .nx-plan { position: absolute; inset: 0; z-index: 2; background: #060606; overflow: hidden; font-family: var(--bx-font); color: #fff; animation: bxfade .3s var(--rm-ease); }
html.betaui #mapv .nx-plan[hidden] { display: none; }
.nx-plan svg.pl { position: absolute; inset: 0; display: block; }
.nx-plan .fl { fill: rgba(255, 255, 255, .045); stroke: rgba(255, 255, 255, .22); stroke-width: .75; }
.nx-plan .wl { stroke: rgba(255, 255, 255, .62); stroke-width: 1.4; stroke-linecap: square; }
.nx-plan .wn { fill: #fff; font-size: 12.5px; letter-spacing: .03em; paint-order: stroke; stroke: #060606; stroke-width: 3px; }
.nx-plan .wk { cursor: pointer; outline: none; }
.nx-plan .wk.dim, .nx-plan .me { pointer-events: none; }
.nx-plan .wk .hit { stroke: transparent; stroke-width: 22; stroke-linecap: round; }
.nx-plan .wk .ln { stroke: #fff; stroke-width: 4.5; stroke-linecap: butt; transition: stroke .2s, stroke-width .2s, filter .2s; }
.nx-plan .wk.sign .ln { stroke-width: 3; }
.nx-plan .wk.dim { cursor: default; } .nx-plan .wk.dim .ln { stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.nx-plan .wk.on .ln, .nx-plan .wk:focus-visible .ln { stroke: #ffe9a8; stroke-width: 6.5; filter: drop-shadow(0 0 4px #ffc23a) drop-shadow(0 0 10px rgba(255, 194, 58, .7)); }
.nx-plan .me circle { fill: #fff; } .nx-plan .me .cone { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .5); stroke-width: .75; }
.nx-plan .hint { position: absolute; left: 16px; right: 60px; bottom: 12px; margin: 0; font-size: 12.5px; color: #fff; text-transform: lowercase; pointer-events: none; }
.nx-plan .hint .zh { margin-left: 6px; }
/* (31 Oct: a card a lit work, its line to it — lit with its work; on a phone, stacked under the plan, the overlay scrolling) */
html.betaui #mapv .nx-plan.scroll { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.nx-plan.scroll svg.pl { position: relative; }
.nx-plan.scroll .hint { display: none; }
/* (scrolled, the tabs keep a dark band under them and the svg · close keys stay put) */
html.betaui #mapv:has(.nx-plan.scroll:not([hidden])) .nx-tabs { left: 0; right: 96px; top: 0; padding: 10px 14px 12px; background: linear-gradient(#060606 78%, rgba(6, 6, 6, 0)); }   /* (short of the keys at the right, which keep their own dark ring) */
html.betaui #mapv .nx-plan.scroll :is(.nx-pexp, .nx-pclose) { background: rgba(6, 6, 6, .85); }
html.betaui #mapv .nx-plan.scroll :is(.nx-pexp, .nx-pclose) { position: fixed; }
.nx-plan .cd { cursor: pointer; outline: none; }
.nx-plan .cd .fr, .nx-plan .cd .ib { transition: stroke .2s, filter .2s; }
.nx-plan .cd.on .fr, .nx-plan .cd:focus-visible .fr { stroke: #ffe9a8; filter: drop-shadow(0 0 6px rgba(255, 194, 58, .55)); }
.nx-plan .cd.on .ib, .nx-plan .cd:focus-visible .ib { stroke: #ffe9a8; }
.nx-plan .cd.on .no, .nx-plan .cd:focus-visible .no { fill: #ffe9a8; filter: drop-shadow(0 0 4px #ffc23a); }
/* (the strip of cards along the foot, held wide: dragged and wheeled sideways, ‹ › at its ends) */
.nx-plan.strip .hint { display: none; }
.nx-plan.strip svg.pl { touch-action: none; }
html.betaui #mapv :is(.nx-sl, .nx-sr), html.betaui #mapv :is(.nx-sl, .nx-sr):hover { position: absolute; z-index: 3; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px #fff; color: #fff; cursor: pointer; }
html.betaui #mapv .nx-sl { left: 10px; } html.betaui #mapv .nx-sr { right: 10px; }
html.betaui #mapv :is(.nx-sl, .nx-sr):hover { background: #fff; color: #111; }
html.betaui #mapv :is(.nx-sl, .nx-sr)[hidden] { display: none; }
html.betaui #mapv :is(.nx-sl, .nx-sr) .ms { font-size: 22px; }
.nx-plan .lk { pointer-events: none; }
.nx-plan .lk .ld { transition: stroke .2s, stroke-width .2s; }
.nx-plan .lk.on .ld { stroke: #ffe9a8; stroke-width: 1.5; filter: drop-shadow(0 0 3px #ffc23a); }
.nx-plan .lk.on .ldr { stroke: #ffe9a8; }
/* (⇩ svg: the plan as a file, beside the close key, top right) */
html.betaui #mapv .nx-pexp, html.betaui #mapv .nx-pexp:hover { position: absolute; right: 58px; top: 12px; z-index: 3; height: 34px; padding: 0 13px 0 9px; display: flex; align-items: center; gap: 5px; border: 0; border-radius: 17px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px #fff; color: #fff; font: 15px/1 var(--bx-font); letter-spacing: .04em; text-transform: lowercase; cursor: pointer; }
html.betaui #mapv .nx-pexp:hover { background: #fff; color: #111; }
html.betaui #mapv .nx-pexp .ms { font-size: 20px; }
html.betaui #mapv .nx-pexp.busy { opacity: .5; pointer-events: none; }
html.betaui #mapv .nx-pexp:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
@media (max-width: 520px) { html.betaui #mapv .nx-pexp, html.betaui #mapv .nx-pexp:hover { width: 34px; padding: 0; justify-content: center; } html.betaui #mapv .nx-pexp span:not(.ms) { display: none; } }
/* (its look: the frame from where one would stand, on a hairline card) */
.nx-peek { position: absolute; z-index: 3; pointer-events: none; padding: 0 0 6px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 8px 30px rgba(0, 0, 0, .6); animation: bxrise .2s var(--rm-ease); }
.nx-peek .im canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #111; }
.nx-peek .cap { padding: 6px 10px 0; font-size: 14px; color: #fff; text-transform: lowercase; }
html.betaui #mapv .nx-pclose, html.betaui #mapv .nx-pclose:hover { position: absolute; right: 14px; top: 12px; z-index: 3; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px #fff; color: #fff; cursor: pointer; }
html.betaui #mapv .nx-pclose:hover { background: #fff; color: #111; }
html.betaui #mapv .nx-pclose .ms { font-size: 20px; }
/* ---------- 霓虹招牌 the neon signs (neonpins.js, Kalok 31 Oct): the pins drawn on the map itself; down the left a column
   of words and hairlines on the dark — the numbers, the regions, the status, the trades' neon key, what it all says —
   and a pin's card as the plan's look is: black, a white hairline ---------- */
html.betaui #mapv .nx-np { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--bx-font); color: #fff; text-transform: lowercase; letter-spacing: .02em; }
html.betaui #mapv .nx-np[hidden] { display: none; }
.nx-np .zh { margin-left: .35em; }
.nx-np a { color: #fff; text-decoration: none; background: linear-gradient(#fff, #fff) left bottom / 100% 1px no-repeat; padding-bottom: 1px; pointer-events: auto; }
.nx-np a:hover { text-shadow: 0 0 6px rgba(255, 255, 255, .8); }
.nx-np a:focus-visible, html.betaui #mapv .nx-np button:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
/* (every key of it plain words: the lab's own buttons' ink and fill not on them — under the keys' own rules below) */
html.betaui #mapv .nx-np :where(button) { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.nx-npp { position: absolute; left: 14px; top: 48px; bottom: 46px; width: 318px; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; pointer-events: auto; padding: 12px 16px 14px; background: rgba(4, 4, 4, .76); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; font-size: var(--nx-t3); line-height: 1.35; animation: bxfade .3s var(--rm-ease); }
.nx-npp .np-ld { margin: 0; color: rgba(255, 255, 255, .7); }
.nx-npp .np-hd .np-t { margin: 0; font-weight: 400; font-size: var(--nx-t1); letter-spacing: .04em; line-height: 1.1; text-shadow: 0 0 5px rgba(255, 79, 216, .9), 0 0 14px rgba(255, 79, 216, .55), 0 0 30px rgba(255, 79, 216, .3); }   /* (its name lit, as the state words are) */
.nx-npp .np-hd .np-zh1 { margin: 4px 0 0; font-size: var(--nx-t2); letter-spacing: .12em; }
.nx-npp .np-src { margin: 8px 0 0; font-size: var(--nx-t4); color: rgba(255, 255, 255, .72); }
.nx-npp .np-src .zh { margin: 0; }
/* (the three numbers, big, a hairline over them) */
.nx-npp .np-kn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .35); }
.nx-npp .np-kn p { margin: 0; }
.nx-npp .np-kn b { display: block; font-weight: 400; font-size: 26px; line-height: 1.05; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.nx-npp .np-kn small { font-size: 14px; }
.nx-npp .np-kn span { display: block; margin-top: 3px; font-size: var(--nx-t4); color: rgba(255, 255, 255, .7); line-height: 1.25; }
.nx-npp .np-kn .np-dm b { color: #ffb3c1; text-shadow: 0 0 6px rgba(255, 59, 92, .85), 0 0 16px rgba(255, 59, 92, .45); }
.nx-npp .np-sec { margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .22); }
.nx-npp .np-h { display: flex; align-items: baseline; margin: 0 0 4px; font-size: var(--nx-t4); letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.nx-npp .np-h .np-r { margin-left: auto; letter-spacing: .02em; color: rgba(255, 255, 255, .5); }
/* (a region: its names, its pins and the share demolished, a hairline under it the share drawn — off, struck dim) */
html.betaui #mapv .nx-npp .np-rg { position: relative; display: grid; grid-template-columns: auto 1fr auto 3.6em; align-items: baseline; gap: 8px; width: 100%; padding: 4px 0 6px; font-size: 14px; }
.nx-npp .np-rg .zh { margin: 0; }
.nx-npp .np-rg .np-en { font-size: var(--nx-t4); color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-npp .np-rg .np-n, .nx-npp .np-tr .np-n, .nx-npp .np-nr .np-n { font-variant-numeric: tabular-nums; text-align: right; }
.nx-npp .np-rg .np-pc { text-align: right; font-size: var(--nx-t4); color: #ffb3c1; font-variant-numeric: tabular-nums; }
.nx-npp .np-rg .np-bar { position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: linear-gradient(90deg, rgba(255, 92, 122, .95) calc(var(--k) * 100%), rgba(255, 255, 255, .28) 0); }
.nx-npp .np-rg[aria-pressed="false"] { opacity: .32; }
.nx-npp .np-rg[aria-pressed="false"] .zh { text-decoration: line-through; text-decoration-thickness: 1px; }
/* (the status: three words, the one on underlined, as the weather's) */
.nx-npp .np-seg { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nx-npp .np-seg .zh { display: block; margin: 1px 0 0; font-size: var(--nx-t4); }   /* (each word its zh under it: the three in a row) */
html.betaui #mapv .nx-npp .np-seg button, html.betaui #mapv .nx-npp .np-ph { position: relative; padding: 3px 0 5px; font-size: 14px; color: rgba(255, 255, 255, .62); }
html.betaui #mapv .nx-npp .np-seg button[aria-pressed="true"], html.betaui #mapv .nx-npp .np-ph[aria-pressed="true"], html.betaui #mapv .nx-npp .np-seg button:hover, html.betaui #mapv .nx-npp .np-ph:hover { color: #fff; }
.nx-npp .np-seg button::after, .nx-npp .np-ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: #fff; transform: scaleX(0); transition: transform .45s var(--rm-ease); }
.nx-npp .np-seg button[aria-pressed="true"]::after, .nx-npp .np-ph[aria-pressed="true"]::after { transform: none; }
.nx-npp .np-seg button[data-st="demolished"][aria-pressed="true"] { color: #ffb3c1; text-shadow: 0 0 8px rgba(255, 59, 92, .7); }
html.betaui #mapv .nx-npp .np-ph { display: inline-block; margin-top: 4px; }
.nx-npp .np-ph .np-n { margin-left: .5em; font-size: var(--nx-t4); }
/* (the trades: each its neon, its words, its pins; the ones picked lit, a trade with none left dim) */
.nx-npp .np-lg { display: grid; gap: 0; }
html.betaui #mapv .nx-npp .np-tr { display: grid; grid-template-columns: 14px auto 1fr auto; align-items: baseline; gap: 6px; width: 100%; padding: 2px 0 3px; font-size: 13px; }
.nx-npp .np-tr .np-dt { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 5px var(--c), 0 0 10px var(--c); align-self: center; }
.nx-npp .np-tr .zh { margin: 0; white-space: nowrap; }
.nx-npp .np-tr .np-en { font-size: var(--nx-t4); color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nx-npp .np-lg:has([aria-pressed="true"]) .np-tr[aria-pressed="false"] { opacity: .38; }
.nx-npp .np-tr[aria-pressed="true"] .zh { text-shadow: 0 0 6px var(--c); }
.nx-npp .np-tr[aria-pressed="true"] .np-dt { width: 9px; height: 9px; margin-left: -1px; }
.nx-npp .np-tr.np-zero { opacity: .3; }
html.betaui #mapv .nx-npp .np-tr:hover .zh { text-shadow: 0 0 6px var(--c); }
.nx-npp .np-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 0 0; font-size: var(--nx-t4); color: rgba(255, 255, 255, .72); }
.nx-npp .np-keys .np-k { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: -.5px; }
.nx-npp .np-keys .np-k.np-lit { background: #fff; box-shadow: 0 0 6px #fff; }
.nx-npp .np-keys .np-k.np-ring { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
html.betaui #mapv .nx-npp .np-clr { margin-left: auto; font-size: var(--nx-t4); color: #fff; padding-bottom: 1px; background: linear-gradient(#fff, #fff) left bottom / 100% 1px no-repeat; }
.nx-npp .np-cnt { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: var(--nx-t4); color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
/* (what it says: folds, each line zh, its english small under it) */
.nx-npp .np-fold { margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .22); }
.nx-npp .np-fold summary { display: flex; align-items: baseline; padding: 7px 0 4px; font-size: 14px; cursor: pointer; list-style: none; }
.nx-npp .np-fold summary::-webkit-details-marker { display: none; }
.nx-npp .np-fold summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--rm-ease); }
.nx-npp .np-fold[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.nx-npp .np-fold summary:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.nx-npp .np-fold ol { margin: 2px 0 4px; padding: 0; list-style: none; counter-reset: q; }
.nx-npp .np-fold li { position: relative; padding: 5px 0 5px 18px; counter-increment: q; }
.nx-npp .np-fold li::before { content: counter(q); position: absolute; left: 0; top: 6px; font-size: 10px; color: rgba(255, 255, 255, .5); }
.nx-npp .np-fold li .zh { margin: 0; font-size: 13px; line-height: 1.45; }
.nx-npp .np-fold li .np-en { margin: 2px 0 0; font-size: var(--nx-t4); line-height: 1.35; color: rgba(255, 255, 255, .64); }
.nx-npp .np-meth { margin: 4px 0 6px; font-size: 10.5px; line-height: 1.4; color: rgba(255, 255, 255, .55); }
.nx-npp .np-fold .np-nr li { padding-left: 0; } .nx-npp .np-fold .np-nr li::before { content: none; }
html.betaui #mapv .nx-npp .np-nr button { display: flex; gap: 10px; width: 100%; font-size: 13px; }
html.betaui #mapv .nx-npp .np-nr button:hover { text-shadow: 0 0 6px rgba(255, 255, 255, .8); }
.nx-npp .np-nr .np-n { margin-left: auto; font-size: var(--nx-t4); color: rgba(255, 255, 255, .7); white-space: nowrap; }
.nx-npp .np-ft { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .35); font-size: var(--nx-t4); line-height: 1.6; }
.nx-npp .np-ft .np-idx { font-size: 14px; }
.nx-npp .np-ft .np-fine { color: rgba(255, 255, 255, .55); font-size: 10.5px; }
.nx-npp .np-ft .np-fine .zh { margin-left: .35em; }
/* (its card: black, a hairline; kept, its links live and a close) */
html.betaui #mapv .nx-npc { width: 288px; padding: 0 0 10px; pointer-events: none; text-transform: lowercase; }
html.betaui #mapv .nx-npc.np-kept { pointer-events: auto; }
html.betaui #mapv .nx-npc[hidden] { display: none; }
.nx-npc .np-fig { margin: 0; }
.nx-npc .np-fig img { display: block; width: 100%; height: auto; max-height: 190px; object-fit: cover; background: #111; }
.nx-npc .np-fig .np-cap { margin: 0; padding: 5px 12px 0; font-size: 10.5px; color: #ffd28a; }
.nx-npc .np-held { margin: 0; padding: 9px 12px; font-size: var(--nx-t4); color: rgba(255, 255, 255, .7); border-bottom: 1px solid rgba(255, 255, 255, .22); }
.nx-npc .np-bd { padding: 10px 14px 0; }
.nx-npc .np-nm { margin: 0; padding-right: 26px; font-size: 19px; line-height: 1.2; letter-spacing: .02em; }
.nx-npc .np-trd { margin: 6px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .86); }
.nx-npc .np-trd .np-dt { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 5px var(--c), 0 0 10px var(--c); vertical-align: 1px; }
.nx-npc .np-stt { margin: 4px 0 0; font-size: 12.5px; color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, .55); }
.nx-npc .np-stt.np-dem { color: #ffb3c1; text-shadow: 0 0 6px rgba(255, 59, 92, .8); }
.nx-npc dl { display: grid; grid-template-columns: 4.6em 1fr; gap: 2px 8px; margin: 8px 0 0; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: var(--nx-t4); }
.nx-npc dt { color: rgba(255, 255, 255, .55); }
.nx-npc dd { margin: 0; font-variant-numeric: tabular-nums; }
.nx-npc .np-inf { color: #ffd28a; font-size: 10.5px; }
.nx-npc .np-dup { margin: 6px 0 0; font-size: 10.5px; color: #ffd28a; }
.nx-npc .np-cr { margin: 5px 0 0; font-size: 10.5px; color: rgba(255, 255, 255, .55); }
.nx-npc .np-cr + .np-cr { margin-top: 1px; }
.nx-npc .np-tip { margin: 7px 0 0; font-size: 10.5px; color: rgba(255, 255, 255, .7); }
.nx-npc .np-lk { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 9px 0 0; font-size: 13px; }
html.betaui #mapv .nx-npc .np-x { position: absolute; right: 6px; top: 6px; z-index: 1; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px #fff; color: #fff; cursor: pointer; }
html.betaui #mapv .nx-npc .np-x:hover { background: #fff; color: #111; }
html.betaui #mapv .nx-npc .np-x .ms { font-size: 18px; }
/* (a phone upright: along the foot of the map, as wide as it, its own scroll) */
html.betaui #mapv .nx-npc.np-dock { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 62%; overflow: auto; overscroll-behavior: contain; }
html.betaui #mapv .nx-npc.np-dock .np-fig img { max-height: 150px; }
/* (its fold: a phone's, below) */
html.betaui #mapv .nx-npt { display: none; }

/* ---------- 鏡頭 the shots' editor (the hidden menu › 鏡頭): over the preview or the lab, its header drags it ---------- */
.bx-shots { position: fixed; left: 16px; bottom: 150px; width: min(600px, calc(100vw - 32px)); max-height: min(60vh, 560px); display: flex; flex-direction: column; pointer-events: auto; background: var(--rm-body2); border-radius: 0; z-index: 2; overflow: hidden; color: var(--rm-ink); }
.bx-shots[hidden] { display: none; }
html:not(.betaui) .bx-shots { left: 280px; bottom: 64px; }
.bx-shots .hd { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 12px 46px 10px 16px; border-bottom: 1px solid var(--rm-line); cursor: move; user-select: none; }
.bx-shots .hd b { font-weight: 400; font-size: 20px; }
.bx-shots .hd .st { font-size: 12px; color: var(--rm-dim); letter-spacing: .06em; }
.bx-shots .hd .bx-x { top: 6px; right: 8px; }
.bx-shots .tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--rm-line); }
.bx-shots .tools button { padding: 6px 12px; border-radius: 0; background: var(--rm-key); font-size: 14px; color: var(--rm-ink); transition: background .2s, color .2s; }
#beta .bx-shots .tools button:hover { background: var(--rm-acc); color: var(--rm-body2); }
.bx-shots .list { overflow: auto; flex: 1 1 auto; min-height: 0; }   /* (its own height, shrinking only past the panel's most) */
.bx-shots .shr { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid rgba(244, 242, 236, .07); font-size: 13px; transition: background .25s; }
.bx-shots .shr.cur { background: rgba(244, 242, 236, .08); }
.bx-shots .shr .hdl { flex: none; width: 12px; height: 18px; cursor: grab; touch-action: none; background: radial-gradient(circle, var(--rm-faint) 1.2px, transparent 1.6px) 0 0 / 6px 6px; opacity: .8; transition: opacity .2s; }
.bx-shots .shr .hdl:hover { opacity: 1; }
.bx-shots .shr.drag { background: rgba(244, 242, 236, .14); position: relative; z-index: 1; }
.bx-shots .shr.drag .hdl { cursor: grabbing; }
.bx-shots .shr .n { width: 1.6em; text-align: right; color: var(--rm-dim); font-variant-numeric: tabular-nums; }
.bx-shots .shr input { font: inherit; color: var(--rm-ink); background: var(--rm-well); border: 0; border-radius: 0; padding: 3px 6px; pointer-events: auto; }
.bx-shots .shr input.nm { flex: 1; min-width: 6em; }
.bx-shots .shr input[type=number] { width: 3.6em; margin-left: 4px; text-align: right; }
.bx-shots .shr label { display: inline-flex; align-items: center; color: var(--rm-dim); white-space: nowrap; font-size: 12px; }
.bx-shots .shr button { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 50%; background: var(--rm-key); color: var(--rm-ink); transition: background .2s, color .2s, transform .12s; }
#beta .bx-shots .shr button:hover:not(:disabled) { background: var(--rm-acc); color: var(--rm-body2); }
.bx-shots .shr button:active:not(:disabled) { transform: scale(.94); }
.bx-shots .shr button:disabled { opacity: .3; }
.bx-shots .note { margin: 0; padding: 8px 16px 12px; font-size: 11.5px; line-height: 1.38; color: var(--rm-dim); border-top: 1px solid var(--rm-line); }

/* ---------- a phone: the rings smaller, the corner's words left out (they are in info), the switch over ▶ ---------- */
@media (max-width: 760px) {
  :root { --nx-ring: 34px; --nx-gap: 9px; }
  .nx-wx { left: 16px; top: 18px; flex-direction: column; align-items: flex-start; gap: 0; }   /* (the weather, the time, 燈: a row each) */
  .nx-top { right: 16px; top: 16px; }
  .nx-c .ms { font-size: 18px; }
  .nx-lb { font-size: 14px; }
  .nx-prev { left: 16px; } .nx-next { right: 16px; }
  .nx-corner { display: none; }
  .nx-pop { --pop-top: 124px; --top-y: 16px; right: 16px; }   /* (under the three rows top left, as the map is) */
  .bx-h { right: 12px; bottom: 30px; }
  html.betaui #mapv { inset: 0; }   /* (full bleed, 31 Oct, as on a desk) */
  .bx-card { padding: 22px 18px 18px; }
  .bx-card dl { grid-template-columns: 1fr; gap: 2px; }
  .bx-card dd { margin-bottom: 6px; }
  /* (the entry: the top left's three rows named once under them, the rings' few words and the sides' left out) */
  .nx-wx .nx-hint, .nx-it .nx-sub, .nx-side .nx-hint { display: none !important; }
  html.nx-entry #beta .nx-cap { display: block; top: calc(100% + 4px); left: 0; padding-top: 16px; text-align: left; font-size: 13px; }
  html.nx-entry #beta .nx-cap .l { left: 12px; top: 0; height: 12px; animation: nxdraw .22s var(--rm-strike) .32s both, nxstrike .34s steps(1, end) .32s both; transform-origin: top; }
  /* (info: its words in the middle alone, all the height there is) */
  html.nx-guide #beta :is(.nx-hint, .nx-it .nx-ln, .nx-it .nx-lb, .nx-it .nx-sub, .nx-wx, .nx-top, .nx-side, .nx-pad, .nx-dock, .nx-corner, .bx-h) { display: none !important; }
  .nx-gd { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .nx-keys { grid-template-columns: max-content 1fr; }
  .bx-shots { left: 8px !important; right: 8px; width: auto; bottom: 8px; top: auto !important; }
  .bx-shots .shr { flex-wrap: wrap; }
}
/* (a short window: info's words in the middle alone, all the height there is, as on a phone) */
@media (min-width: 761px) and (max-height: 639px) {
  html.nx-guide #beta :is(.nx-hint, .nx-it .nx-ln, .nx-it .nx-lb, .nx-it .nx-sub, .nx-wx, .nx-top, .nx-side, .nx-dock, .nx-corner, .bx-h) { display: none !important; }
  .nx-gd { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); min-height: 0; }
}
/* (a phone on its side, a short window: the entry's middle into the band between the top's words, the bottom's few words
   and the rings' small ones left out) */
@media (max-height: 520px) {
  html.nx-entry #beta :is(.nx-it .nx-sub, .nx-dock .nx-hint, .nx-side .nx-hint) { display: none !important; }
  .nx-land { align-items: flex-start; padding-top: 18px; }
  .nx-mid { margin: 0 auto; }
  .nx-load { width: min(200px, 40vw); }
  .nx-start { margin-top: 14px; }
  .nx-explore { margin-top: 6px; }
  .nx-walk { margin-top: 6px; }
}
/* ---------- a phone held upright: a game's controls (Kalok 29 Oct: 「advanced game like control ui … only portrait mode
   … direction and walking control … group or dim or transparency to halfly hide other button … rearrange the layout」).
   Two pads at the bottom corners — walk left, look right (beta.js, NightView.drive) — ‹ ▶ › between them, the bolts'
   switch over; the tools a column of rings top right and the weather, the time and 燈 top left, each group half dimmed
   till a finger is on it ---------- */
@media (max-width: 760px) and (orientation: portrait) {
  .nx-pad { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
  .nx-stick { position: absolute; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 104px; height: 104px; border-radius: 50%; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }   /* (round: its corners leave ‹ › and H to their own) */
  .nx-stick[data-st="walk"] { left: 14px; } .nx-stick[data-st="look"] { right: 14px; }
  .nx-stick .ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); background: radial-gradient(closest-side, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12)); transition: box-shadow .2s, background .2s; }
  .nx-stick .knob { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .35); transition: transform .28s var(--rm-ease); pointer-events: none; }
  .nx-stick.on .knob { transition: none; }
  .nx-stick.on .ring { box-shadow: inset 0 0 0 1.5px #fff; background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(0, 0, 0, .1)); }
  .nx-stick .nm { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; text-align: center; font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .7); pointer-events: none; }
  .nx-stick .nx-hint.up { --up: 26px; }
  /* (‹ ▶ › between the pads, the bolts' switch over them) */
  .nx-dock { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .nx-play { left: 50%; margin-left: -22px; bottom: 6px; width: 44px; height: 44px; }
  .nx-play .ms { font-size: 28px; }
  .nx-mode { bottom: 64px; }
  .nx-mode .dots { width: 120px; padding: 0 17px 0 20px; }
  .nx-mode .pill { width: 120px; height: 40px; }
  .nx-mode .knob { width: 34px; height: 34px; transform: translateX(calc(var(--pos, 0) * 40px)); }
  .nx-side { top: auto; bottom: calc(31px + env(safe-area-inset-bottom, 0px)); transform: none; padding: 0; width: 36px; display: grid; justify-items: center; gap: 0; font-size: 10px; color: #fff; }
  .nx-side:hover { letter-spacing: 0; }
  .nx-side .tv { display: block; font-size: 28px; width: 1em; height: 1em; }
  .nx-side .tx { font-size: 10px; letter-spacing: .04em; color: rgba(255, 255, 255, .7); }
  .nx-prev { left: calc(50% - 22px - 10px - 36px); } .nx-next { right: calc(50% - 22px - 10px - 36px); }
  html.nx-entry #beta .nx-play .nx-hint { display: none !important; }
  /* (the tools: a column of rings top right; their words, on the entry, to the left of each) */
  .nx-top { flex-direction: column; gap: 9px; }
  .nx-it .nx-ln { left: auto; right: calc(100% + 4px); top: 50%; width: 16px; height: 1px; margin: 0; transform-origin: right; transform: scaleX(0); }
  .nx-it .nx-lb { left: auto; right: calc(100% + 26px); top: 50%; transform: translateY(-50%); text-align: right; }
  html:is(.nx-entry, .nx-guide) #beta .nx-it .nx-ln { animation: nxdrawx .22s var(--rm-strike) both, nxstrike .34s steps(1, end) both; animation-delay: calc(var(--i, 0) * 85ms + .32s); }
  html:is(.nx-entry, .nx-guide) #beta .nx-it .nx-lb { transform: translateY(-50%); }
  @media (hover: hover) { .nx-it:hover .nx-ln { transform: none; } .nx-it:hover .nx-lb { transform: translateY(-50%); } }
  .nx-it:has(.nx-c:focus-visible) .nx-ln { transform: none; } .nx-it:has(.nx-c:focus-visible) .nx-lb { transform: translateY(-50%); }
  /* (the groups not for walking half dimmed, whole again under a finger) */
  html:not(.nx-entry):not(.nx-guide):not(.nx-idle) #beta :is(.nx-wx, .nx-top, .nx-mode) { opacity: .5; transition: opacity .35s var(--rm-ease); }
  html:not(.nx-entry):not(.nx-guide):not(.nx-idle) #beta :is(.nx-wx, .nx-top, .nx-mode):is(:hover, :active, :focus-within) { opacity: 1; }
  html.betaui #toast { bottom: 196px; pointer-events: none; }   /* (over the bolts' switch, not on it) */
  #beta .bx-newer, #beta .bx-newer:hover { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); padding: 8px 12px; font-size: 12px; }   /* (over the sticks and the bolts' switch, under the toast) */
  .nx-gd .np { display: none; } .nx-gd dt.pd { display: flex; } .nx-gd dd.pd { display: block; }
  /* (the camera's panel under the top left's rows, left of the rings; the map clear of them, the pads away while it is up) */
  .nx-pop { --pop-top: 124px; right: 62px; width: min(280px, calc(100vw - 78px)); }
  .nx-conn { display: none; }
  html.betaui #mapv { inset: 0; }
  html.betaui:has(#mapv:not([hidden])) #beta :is(.nx-pad, .nx-dock) { display: none; }
  /* (the neon signs: the panel folded into a ring under the tabs, the map left to the fingers; open, it covers the map; a
     pin's card along the foot. The three tabs a size smaller, clear of the compass) */
  html.betaui #mapv .nx-tabs { left: 6px; font-size: 14px; gap: 0; }
  html.betaui #mapv .nx-tabs button, html.betaui #mapv .nx-tabs button:hover, html.betaui #mapv .nx-tabs button[aria-pressed] { padding: 5px 6px 8px; }
  html.betaui #mapv .nx-tabs button::after { left: 6px; right: 6px; }
  html.betaui #mapv .nx-np .nx-npt { display: grid; position: absolute; left: 10px; top: 44px; z-index: 2; width: 34px; height: 34px; padding: 0; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px #fff; color: #fff; pointer-events: auto; text-align: center; }
  html.betaui #mapv .nx-np .nx-npt .ms { font-size: 20px; }
  html.betaui #mapv .nx-np .nx-npt:hover { background: #fff; color: #111; }
  .nx-npp { display: none; left: 0; right: 0; top: 38px; bottom: 0; width: auto; padding: 48px 16px 16px; background: rgba(4, 4, 4, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
  .nx-np.np-open .nx-npp { display: block; }
}
@keyframes nxdrawx { from { transform: scaleX(0); } to { transform: none; } }
/* (the narrowest phones, 320 px: the rings clear of 雨, the H of ▶) */
@media (max-width: 340px) {
  :root { --nx-ring: 30px; --nx-gap: 6px; }
  .nx-c .ms { font-size: 16px; }
  /* (upright, 320 px: the pads smaller and nearer the edges, ‹ ▶ › closer, all clear of each other) */
  .nx-stick { width: 84px; height: 84px; } .nx-stick[data-st="walk"] { left: 10px; } .nx-stick[data-st="look"] { right: 10px; }
  .nx-stick .knob { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .nx-side { width: 34px; } .nx-prev { left: calc(50% - 22px - 6px - 34px); } .nx-next { right: calc(50% - 22px - 6px - 34px); }
  .nx-keys dd { white-space: normal; }   /* (info's rows wrap: 320 px) */
}
/* (a phone upright and short: the entry's walking line left to the pads' own words) */
@media (max-width: 760px) and (orientation: portrait) and (max-height: 640px) { .nx-walk { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #beta *, #beta *::before, #beta *::after { transition-duration: .01s !important; animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}

/* 錄影 · export mp4 (30 Oct): a thin line filling under the camera panel's buttons, the frames and the time left beside stop */
.bx-rec { margin-top: 10px; }
.bx-recbar { height: 1px; background: rgba(255, 255, 255, .25); position: relative; overflow: hidden; }
.bx-recbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); transition: width .25s linear; }
.bx-recrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
#beta .bx-recrow button { background: none; }