/* RTX 5090 · BLACKWELL — 3D exhibition hall. Industrial, quiet UI that yields to the exhibit. */
:root {
  --u: 1;
  --bg: #050608;
  --ink: #e8eaed;
  --ink2: #9aa0a8;
  --ink3: #5d636c;
  --line: rgba(255, 255, 255, 0.09);
  --line2: rgba(255, 255, 255, 0.18);
  --glass: rgba(9, 11, 14, 0.72);
  --lime: #a6e05a;
  --cyan: #5cc8ff;
  --amber: #ffad4d;
  --red: #ff6a52;
  --violet: #a58bff;
  --f-dis: Bahnschrift, 'DIN Alternate', 'Segoe UI', 'Microsoft YaHei UI', sans-serif;
  --f-cn: 'Microsoft YaHei UI', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --f-mono: 'Cascadia Mono', Consolas, 'SFMono-Regular', monospace;
  --panelW: calc(372px * var(--u));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font-family: var(--f-dis); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; color: inherit; }
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
#gl:active { cursor: grabbing; }
#ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#titles { position: absolute; inset: 0; pointer-events: none; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

/* ---------------- brand + chapter heading ---------------- */
#brand { position: absolute; left: calc(28px * var(--u)); top: calc(22px * var(--u)); pointer-events: none; }
.b-mark { font-stretch: 75%; font-weight: 700; letter-spacing: 0.02em; line-height: 1; font-size: calc(26px * var(--u)); }
.b-rtx { color: var(--ink2); margin-right: 0.18em; font-weight: 600; }
.b-num { color: var(--ink); }
.b-sub { margin-top: calc(6px * var(--u)); font-size: calc(9.5px * var(--u)); letter-spacing: 0.32em; color: var(--ink3); }
#chap { position: absolute; left: calc(28px * var(--u)); top: calc(82px * var(--u)); pointer-events: none; }
.c-idx { font-family: var(--f-mono); font-size: calc(11px * var(--u)); color: var(--lime); letter-spacing: 0.1em; }
.c-of { color: var(--ink3); margin-left: 0.5em; }
.c-en { margin-top: calc(6px * var(--u)); font-size: calc(19px * var(--u)); font-weight: 600; font-stretch: 87%; letter-spacing: 0.08em; }
.c-cn { margin-top: calc(3px * var(--u)); font-family: var(--f-cn); font-size: calc(12px * var(--u)); color: var(--ink2); letter-spacing: 0.2em; }

/* ---------------- mode switch ---------------- */
#modes { position: absolute; right: calc(24px * var(--u)); top: calc(20px * var(--u)); display: flex; gap: 0; border: 1px solid var(--line); background: rgba(8, 10, 12, 0.55); backdrop-filter: blur(10px); }
#modes button { background: none; border: 0; padding: calc(8px * var(--u)) calc(13px * var(--u)); font-size: calc(10.5px * var(--u)); letter-spacing: 0.14em; color: var(--ink2); cursor: pointer; text-align: left; line-height: 1.25; border-right: 1px solid var(--line); position: relative; }
#modes button:last-child { border-right: 0; }
#modes button b { font-family: var(--f-mono); color: var(--ink3); margin-right: 0.6em; font-weight: 400; }
#modes button i { display: block; font-style: normal; font-family: var(--f-cn); font-size: calc(10px * var(--u)); letter-spacing: 0.2em; color: var(--ink3); }
#modes button:hover { color: var(--ink); }
#modes button.on { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
#modes button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lime); }
#modes button.on b { color: var(--lime); }

/* ---------------- right dock ---------------- */
#dock { position: absolute; right: calc(24px * var(--u)); top: calc(78px * var(--u)); bottom: calc(96px * var(--u)); width: var(--panelW); display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px); overflow: hidden; }
#dock.hide { opacity: 0 !important; visibility: hidden; pointer-events: none; }
#dock.compact { bottom: auto; }
#dock::before, #dock::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--line2); border-style: solid; pointer-events: none; }
#dock::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
#dock::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
#dock-head { padding: calc(14px * var(--u)) calc(16px * var(--u)) calc(8px * var(--u)); border-bottom: 1px solid var(--line); }
#dock-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: calc(10px * var(--u)) calc(16px * var(--u)) calc(16px * var(--u)); scrollbar-width: thin; scrollbar-color: #2a2f36 transparent; }
.dk-t { font-size: calc(11px * var(--u)); letter-spacing: 0.22em; color: var(--ink2); }
.dk-h { margin-top: 4px; font-size: calc(17px * var(--u)); font-weight: 600; font-stretch: 87%; letter-spacing: 0.04em; }
.dk-cn { font-family: var(--f-cn); font-size: calc(12px * var(--u)); color: var(--ink2); }
.sec { margin-top: calc(14px * var(--u)); }
.sec-t { font-size: calc(9.5px * var(--u)); letter-spacing: 0.26em; color: var(--ink3); margin-bottom: calc(7px * var(--u)); display: flex; align-items: center; gap: 8px; }
.sec-t::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.txt { font-family: var(--f-cn); font-size: calc(12px * var(--u)); line-height: 1.65; color: #c3c7cd; }
.txt b { color: var(--ink); font-weight: 600; }
.note { font-family: var(--f-cn); font-size: calc(10.5px * var(--u)); line-height: 1.55; color: var(--ink3); margin-top: 8px; }
.note.warn { color: #c9a26a; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: calc(11.5px * var(--u)); }
.kv dt { color: var(--ink3); font-family: var(--f-cn); }
.kv dd { margin: 0; text-align: right; font-family: var(--f-mono); color: var(--ink); }
.big { font-size: calc(26px * var(--u)); font-weight: 600; font-stretch: 80%; letter-spacing: 0.01em; }
.big small { font-size: 0.45em; color: var(--ink2); margin-left: 0.3em; letter-spacing: 0.1em; }
svg.dg { width: 100%; display: block; overflow: visible; }

/* controls */
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button, .btn { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--ink2); padding: calc(6px * var(--u)) calc(9px * var(--u)); font-size: calc(10.5px * var(--u)); letter-spacing: 0.12em; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.seg button:hover, .btn:hover { color: var(--ink); border-color: var(--line2); }
.seg button.on, .btn.on { color: #0b0d10; background: var(--lime); border-color: var(--lime); }
.seg button.on.cy { background: var(--cyan); border-color: var(--cyan); }
.seg button.on.am { background: var(--amber); border-color: var(--amber); }
.btn.wide { width: 100%; }
.row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.row label { font-family: var(--f-cn); font-size: calc(11px * var(--u)); color: var(--ink2); min-width: 4.5em; }
.row .val { font-family: var(--f-mono); font-size: calc(11px * var(--u)); min-width: 4.6em; text-align: right; color: var(--ink); }
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 18px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--lime) var(--p, 50%), #2a2f36 var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; margin-top: -7px; background: var(--ink); border: 0; box-shadow: 0 0 0 3px rgba(166, 224, 90, 0.18); }
input[type=number], input[type=text] { width: 100%; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); color: var(--ink); font-family: var(--f-mono); font-size: calc(11px * var(--u)); padding: 4px 5px; outline: none; }
input[type=number]:focus { border-color: var(--lime); }
input[type=checkbox] { accent-color: var(--lime); }
.chk { display: flex; align-items: center; gap: 6px; font-family: var(--f-cn); font-size: calc(11px * var(--u)); color: var(--ink2); cursor: pointer; margin: 4px 0; }

/* part list */
.parts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.parts button { display: flex; gap: 6px; align-items: baseline; text-align: left; background: rgba(255, 255, 255, 0.02); border: 1px solid transparent; color: var(--ink2); padding: 5px 6px; font-family: var(--f-cn); font-size: calc(10.5px * var(--u)); cursor: pointer; }
.parts button span { font-family: var(--f-mono); color: var(--ink3); font-size: 0.92em; }
.parts button:hover { color: var(--ink); border-color: var(--line); }
.parts button.on { color: var(--ink); border-color: var(--lime); background: rgba(166, 224, 90, 0.08); }
.parts button.on span { color: var(--lime); }

/* matrix editor */
.mat { display: grid; gap: 2px; }
.mat input { text-align: center; padding: 3px 0; }
.mat .cell { font-family: var(--f-mono); font-size: calc(10.5px * var(--u)); text-align: center; padding: 4px 0; background: rgba(255, 255, 255, 0.03); border: 1px solid transparent; cursor: pointer; }
.mat .cell.sel { border-color: var(--lime); color: var(--lime); }
.mat .cell.hl { background: rgba(92, 200, 255, 0.12); }

/* ---------------- quick bar (left) ---------------- */
#quick { position: absolute; left: calc(28px * var(--u)); bottom: calc(108px * var(--u)); width: calc(250px * var(--u)); display: flex; flex-direction: column; gap: calc(8px * var(--u)); transition: opacity 0.3s; }
#quick.hide { display: none; }
.qk { background: var(--glass); border: 1px solid var(--line); padding: calc(10px * var(--u)) calc(12px * var(--u)); backdrop-filter: blur(12px); }
.views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.views button { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); padding: calc(6px * var(--u)) 0; font-size: calc(10px * var(--u)); letter-spacing: 0.12em; color: var(--ink2); cursor: pointer; }
.views button:hover { color: var(--ink); border-color: var(--line2); }
.views button i { display: block; font-style: normal; font-family: var(--f-cn); font-size: 0.9em; color: var(--ink3); letter-spacing: 0.1em; }

/* ---------------- caption ---------------- */
#caption { position: absolute; left: calc(28px * var(--u)); bottom: calc(104px * var(--u)); max-width: calc(560px * var(--u)); pointer-events: none; transition: opacity 0.4s; }
.cap-shot { font-family: var(--f-mono); font-size: calc(10px * var(--u)); letter-spacing: 0.16em; color: var(--lime); }
.cap-note { margin-top: calc(6px * var(--u)); font-family: var(--f-cn); font-size: calc(10.5px * var(--u)); line-height: 1.5; color: #b9965f; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
.cap-txt { margin-top: calc(6px * var(--u)); font-family: var(--f-cn); font-size: calc(13px * var(--u)); line-height: 1.7; color: #cfd3d8; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }

/* ---------------- transport / timeline ---------------- */
#transport { position: absolute; left: calc(24px * var(--u)); right: calc(24px * var(--u)); bottom: calc(26px * var(--u)); height: calc(52px * var(--u)); display: flex; align-items: center; gap: calc(14px * var(--u)); background: rgba(8, 10, 12, 0.6); border: 1px solid var(--line); backdrop-filter: blur(12px); padding: 0 calc(12px * var(--u)); }
.tp-btns { display: flex; gap: 4px; }
.tp-btns button { width: calc(34px * var(--u)); height: calc(30px * var(--u)); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--ink); cursor: pointer; font-size: calc(10px * var(--u)); letter-spacing: -0.1em; }
.tp-btns button:hover { border-color: var(--line2); }
.tp-btns button.on { color: var(--lime); border-color: var(--lime); }
#tp-speed { width: calc(40px * var(--u)); letter-spacing: 0; font-family: var(--f-mono); }
#timeline { position: relative; flex: 1; height: calc(36px * var(--u)); cursor: pointer; }
#tl-track { position: absolute; inset: 0; display: flex; gap: 2px; }
.tl-seg { position: relative; height: 100%; flex: 1 1 0; border-left: 1px solid var(--line); padding: calc(3px * var(--u)) 0 0 calc(6px * var(--u)); overflow: hidden; }
.tl-seg .n { font-family: var(--f-mono); font-size: calc(9px * var(--u)); color: var(--ink3); }
.tl-seg .t { font-size: calc(9.5px * var(--u)); letter-spacing: 0.12em; color: var(--ink2); white-space: nowrap; }
.tl-seg.on .n { color: var(--lime); }
.tl-seg.on .t { color: var(--ink); }
.tl-seg .bar { position: absolute; left: 0; right: 0; bottom: calc(5px * var(--u)); height: 2px; background: #22272e; }
.tl-seg .fill { position: absolute; left: 0; bottom: calc(5px * var(--u)); height: 2px; background: var(--lime); width: 0; }
.tl-seg .tick { position: absolute; bottom: calc(5px * var(--u)); width: 1px; height: 6px; background: #3a414a; }
#tl-head { position: absolute; top: -3px; bottom: calc(2px * var(--u)); width: 1px; background: var(--ink); pointer-events: none; }
#tl-head::after { content: ''; position: absolute; left: -3px; bottom: 0; width: 7px; height: 7px; background: var(--ink); transform: rotate(45deg); }
.tp-time { font-family: var(--f-mono); font-size: calc(11px * var(--u)); color: var(--ink2); white-space: nowrap; }
.tp-sep { margin: 0 0.4em; color: var(--ink3); }
#disclaimer { position: absolute; right: calc(26px * var(--u)); bottom: calc(8px * var(--u)); font-family: var(--f-cn); font-size: calc(9.5px * var(--u)); color: #4c525a; letter-spacing: 0.04em; pointer-events: none; }
#hint { position: absolute; left: 50%; top: calc(24px * var(--u)); transform: translateX(-50%); font-family: var(--f-cn); font-size: calc(11px * var(--u)); color: var(--ink2); background: rgba(8, 10, 12, 0.7); border: 1px solid var(--line); padding: 6px 12px; opacity: 0; transition: opacity 0.4s; pointer-events: none; white-space: nowrap; }
#hint.on { opacity: 1; }

/* ---------------- SVG overlay vocabulary ---------------- */
#ov text { font-family: var(--f-dis); fill: var(--ink); }
.an-line { fill: none; stroke: rgba(232, 234, 237, 0.7); stroke-width: 1; }
.an-dot { fill: var(--ink); }
.an-ring { fill: none; stroke: rgba(232, 234, 237, 0.55); stroke-width: 1; }
.an-t { font-size: calc(13px * var(--u)); letter-spacing: 0.06em; font-weight: 600; font-stretch: 87%; }
.an-s { font-size: calc(10.5px * var(--u)); fill: var(--ink2) !important; font-family: var(--f-cn) !important; letter-spacing: 0.08em; }
.an-n { font-family: var(--f-mono) !important; font-size: calc(10px * var(--u)); fill: var(--lime) !important; }
.an.occ .an-line { stroke-dasharray: 2 3; stroke: rgba(232, 234, 237, 0.35); }
.an.occ .an-dot { fill: none; stroke: var(--ink2); }
.an.sel .an-line { stroke: var(--lime); }
.an.sel .an-dot { fill: var(--lime); }
.an.sel .an-t { fill: var(--lime) !important; }
.spec-v { font-size: calc(34px * var(--u)); font-weight: 600; font-stretch: 75%; letter-spacing: 0.01em; }
.spec-u { font-size: calc(11px * var(--u)); letter-spacing: 0.22em; fill: var(--ink2) !important; }
.dim-l { stroke: rgba(232, 234, 237, 0.55); stroke-width: 1; fill: none; }
.dim-t { font-family: var(--f-mono) !important; font-size: calc(11px * var(--u)); fill: var(--ink) !important; }
.outline { fill: none; stroke: rgba(166, 224, 90, 0.75); stroke-width: 1.2; }
.mono { font-family: var(--f-mono) !important; }
.cn { font-family: var(--f-cn) !important; }

/* ---------------- titles (HTML typography driven by the timeline) ---------------- */
.ttl { position: absolute; will-change: opacity, transform; }
.ttl-hero { right: 4.5%; top: 50%; text-align: left; }
.ttl-hero .k { font-family: var(--f-mono); font-size: calc(11px * var(--u)); letter-spacing: 0.3em; color: var(--lime); }
.ttl-hero .h { margin-top: calc(10px * var(--u)); font-size: calc(54px * var(--u)); line-height: 0.92; font-weight: 700; font-stretch: 75%; letter-spacing: 0.0em; }
.ttl-hero .h span { color: var(--ink2); font-weight: 400; }
.ttl-hero .s { margin-top: calc(12px * var(--u)); font-size: calc(13px * var(--u)); letter-spacing: 0.34em; color: var(--ink2); }
.ttl-hero .c { margin-top: calc(10px * var(--u)); font-family: var(--f-cn); font-size: calc(13px * var(--u)); letter-spacing: 0.2em; color: var(--ink2); }

/* ---------------- showcase ---------------- */
#showbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(10px); display: none; flex-direction: column; gap: 4px; background: rgba(8, 10, 12, 0.82); border: 1px solid var(--line); padding: 8px; opacity: 0; transition: opacity 0.3s, transform 0.3s; }
#showbar.vis { opacity: 1; transform: translateX(-50%); }
.sb-row { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.sb-row button { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--ink2); padding: 5px 8px; font-size: 10px; letter-spacing: 0.1em; cursor: pointer; }
.sb-row button:hover { color: var(--ink); }
.sb-row button.on { color: #0b0d10; background: var(--lime); }
#safe916 { position: absolute; inset: 0; pointer-events: none; display: none; }
#safe916 div { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 16; height: 100%; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); outline: 1px dashed rgba(166, 224, 90, 0.6); }
body.safe #safe916 { display: block; }

body.mode-showcase #modes, body.mode-showcase #transport, body.mode-showcase #quick, body.mode-showcase #brand .b-sub { display: none; }
body.mode-showcase #showbar { display: flex; }
body.mode-showcase #dock { pointer-events: none; }
body.exporting #modes, body.exporting #transport, body.exporting #quick, body.exporting #showbar, body.exporting #hint { display: none !important; }
body.exporting #dock { pointer-events: none; }
body.exporting #gl { cursor: default; }
body.exporting *, body.exporting *::before, body.exporting *::after { transition: none !important; animation: none !important; }

/* ---------------- loading ---------------- */
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); z-index: 10; transition: opacity 0.6s; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-mark { font-size: 34px; font-weight: 700; font-stretch: 75%; letter-spacing: 0.06em; }
.ld-bar { margin-top: 18px; width: 220px; height: 1px; background: #1d2228; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 40%; background: var(--lime); animation: ld 1.1s infinite ease-in-out; }
.ld-txt { margin-top: 12px; font-family: var(--f-cn); font-size: 11px; color: var(--ink3); letter-spacing: 0.2em; }
@keyframes ld { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---- deploy build only: quality button + phone layout (desktop layout is unchanged) ---- */
#q-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--ink2); height: calc(30px * var(--u)); padding: 0 calc(10px * var(--u)); font-family: var(--f-cn); font-size: calc(10.5px * var(--u)); letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; }
#q-btn:hover { color: var(--ink); border-color: var(--line2); }
body { touch-action: manipulation; }

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  #brand { left: 12px; top: 10px; }
  .b-mark { font-size: 20px; }
  .b-sub { display: none; }
  #chap { left: 12px; top: 36px; }
  .c-idx { font-size: 10px; }
  .c-en { font-size: 14px; margin-top: 2px; }
  .c-cn { font-size: 11px; }
  /* mode switch: full-width strip, letter + Chinese name */
  #modes { left: 8px; right: 8px; top: 98px; }
  #modes button { flex: 1 1 0; font-size: 0; padding: 6px 2px; text-align: center; }
  #modes button b { display: block; margin: 0; font-size: 10px; }
  #modes button i { display: block; font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink2); }
  #disclaimer { left: 12px; right: 12px; top: 146px; bottom: auto; font-size: 9px; line-height: 1.4; color: #5a6068; }
  /* transport: compact, chapter numbers only */
  #transport { left: 6px; right: 6px; bottom: 8px; height: 48px; gap: 6px; padding: 0 6px; }
  .tp-btns button { width: 30px; height: 30px; }
  #tp-speed { width: 34px; }
  .tl-seg { padding: 4px 0 0 3px; }
  .tl-seg .t { display: none; }
  .tl-seg .n { font-size: 9px; }
  .tp-time { font-size: 10px; }
  .tp-sep, #tp-tot { display: none; }
  #q-btn { height: 30px; padding: 0 6px; font-size: 10px; }
  /* dock becomes a collapsible bottom sheet above the transport */
  #dock { left: 6px; right: 6px; width: auto; top: auto; bottom: 64px; max-height: 46vh; }
  #dock.compact { bottom: 64px; }
  #dock-head { padding: 9px 12px 7px; cursor: pointer; position: relative; }
  #dock-head::after { content: '▴ 展开'; position: absolute; right: 12px; top: 12px; font-family: var(--f-cn); font-size: 10.5px; color: var(--lime); }
  #dock:not(.collapsed) #dock-head::after { content: '▾ 收起'; }
  #dock.collapsed #dock-body { display: none; }
  .dk-h { font-size: 14px; }
  .dk-cn { font-size: 11px; }
  #dock-body { padding: 8px 12px 12px; }
  /* free / lab quick bar: one horizontal scroller above the dock header; hidden while the sheet is open */
  #quick { left: 6px; right: 6px; width: auto; bottom: 128px; flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  #quick .qk { flex: 0 0 auto; width: 250px; padding: 8px 10px; }
  body.dock-open #quick { display: none; }
  /* captions sit above the collapsed sheet */
  #caption { left: 12px; right: 12px; max-width: none; bottom: 126px; }
  .cap-txt { font-size: 12px; line-height: 1.6; }
  .cap-note { font-size: 10px; }
  /* reveal title moves to the upper area instead of the card's right side */
  .ttl-hero { right: auto; left: 14px; top: 30%; }
  .ttl-hero .h { font-size: 34px; }
  .ttl-hero .s, .ttl-hero .c { font-size: 10px; letter-spacing: 0.16em; }
  #hint { top: 172px; white-space: normal; width: 88vw; text-align: center; }
  #showbar { bottom: 62px; width: 96vw; }
  #showbar .sb-row button { padding: 5px 6px; font-size: 9.5px; }
  .ld-mark { font-size: 28px; }
}