:root {
  color-scheme: dark;
  --bg: #050910;
  --panel: rgba(7, 15, 26, .28);
  --line: rgba(141, 190, 214, .22);
  --text: #edf4f2;
  --muted: #8a9ba8;
  --cyan: #3ce5e5;
  --acid: #e8f45e;
  --orange: #f05b36;
}

@font-face {
  font-family: "Alimama ShuHeiTi";
  src: url("./fonts/AlimamaShuHeiTi-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
button, a { font: inherit; }
button { color: inherit; }

.app { position: relative; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 58% 46%, #13283b 0, #09121e 29%, #050910 68%); }
.app::before { content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none; background-image: linear-gradient(rgba(67, 213, 220, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 213, 220, .18) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 58% 48%, black, transparent 70%); }
.app::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px rgba(0,0,0,.72); }
.app > .topbar, .app > .viewer, .app > .intro-panel, .app > .control-panel, .app > .pan-pad, .app > .model-data { transition: opacity .65s ease; }
.app > .viewer { transition-duration: .3s; }
.app.is-loading > .topbar, .app.is-loading > .viewer, .app.is-loading > .intro-panel, .app.is-loading > .control-panel, .app.is-loading > .pan-pad, .app.is-loading > .model-data { opacity: 0; pointer-events: none; }

.entry-overlay { position: fixed; z-index: 20; inset: 0; background: radial-gradient(circle at 50% 44%, #14283b 0%, #09121e 44%, #050910 100%); transition: opacity .45s ease, visibility .45s ease; }
.entry-overlay.is-revealing { opacity: 0; visibility: hidden; pointer-events: none; }
.entry-copy { position: absolute; top: calc(50% + clamp(145px, 18vw, 250px) / 2 + 21px); left: 50%; width: min(260px, 76vw); transform: translateX(-50%); text-align: center; transition: opacity .38s ease, transform .38s ease; }
.entry-overlay.is-revealing .entry-copy { opacity: 0; transform: translate(-50%, -12px); }
.entry-label { margin: 0 0 13px; color: #cce3eb; font-size: .7rem; font-weight: 700; letter-spacing: .28em; }
.entry-progress { height: 2px; width: 100%; background: rgba(141,190,214,.22); overflow: hidden; }
.entry-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ce5e5, #e8f45e); box-shadow: 0 0 14px #3ce5e5; transition: width .18s ease; }
.entry-percent { margin: 11px 0 24px; color: #d9f5f4; font-size: .76rem; font-variant-numeric: tabular-nums; letter-spacing: .15em; }
.entry-credit { margin: 0; color: #718b9b; font-size: .59rem; letter-spacing: .28em; }
.entry-button { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; min-height: 42px; margin-top: 28px; padding: 8px 25px; border: 1px solid rgba(60,229,229,.72); border-radius: 2px; background: rgba(60,229,229,.07); color: #dbffff; cursor: pointer; font-size: .83rem; font-weight: 700; letter-spacing: .24em; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, background .2s ease, box-shadow .2s ease; }
.entry-button[hidden] { display: none; }
.entry-overlay.is-ready .entry-button { opacity: 1; transform: translateY(0); }
.entry-button:hover, .entry-button:focus-visible { background: rgba(60,229,229,.17); box-shadow: 0 0 22px rgba(60,229,229,.18); outline: none; }
.brand-stamp { position: fixed; z-index: 21; left: 50%; top: 50%; width: clamp(145px, 18vw, 250px); transform: translate(-50%, -50%); pointer-events: none; opacity: 1; transition: left 2.5s cubic-bezier(.18,.72,.16,1), top 2.5s cubic-bezier(.18,.72,.16,1), width 2.5s cubic-bezier(.18,.72,.16,1), opacity 2.5s ease; }
.brand-stamp img { display: block; width: 100%; height: auto; }
.brand-stamp span { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); white-space: nowrap; color: #a9b9c3; font-size: .54rem; letter-spacing: .1em; opacity: 0; transition: opacity .3s ease 2.1s; }
.brand-stamp.is-docked { left: calc(100% - 54px); top: calc(100% - 53px); width: 56px; opacity: .28; pointer-events: auto; }
.brand-stamp.is-docked:hover { opacity: .55; }
.brand-stamp.is-docked span { opacity: 1; }

.topbar { position: absolute; z-index: 10; inset: 0 0 auto; height: 76px; padding: 0 clamp(22px, 3vw, 48px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: transparent; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font-weight: 800; letter-spacing: .15em; font-size: .78rem; }
.brand__mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--cyan); clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%); color: var(--cyan); }
.status { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--muted); font-size: .72rem; letter-spacing: .1em; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }
.help-button { justify-self: end; border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; background: transparent; cursor: pointer; font-size: .72rem; letter-spacing: .08em; }

.viewer { position: absolute; z-index: 1; inset: 76px 16% 0 0; }
#robot-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#robot-canvas:active { cursor: grabbing; }
.scanline { position: absolute; z-index: 3; left: 27%; right: 20%; top: 24%; height: 1px; opacity: .65; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 17px var(--cyan); pointer-events: none; animation: scan 5s ease-in-out infinite; }
.drag-hint { position: absolute; z-index: 5; left: 58%; bottom: 31px; transform: translateX(-50%); color: var(--muted); font-size: .72rem; letter-spacing: .12em; pointer-events: none; }

.intro-panel { position: absolute; z-index: 5; left: clamp(22px, 3.6vw, 58px); top: 50%; width: min(300px, 24vw); transform: translateY(-44%); pointer-events: none; }
.kicker { margin: 0 0 16px; color: var(--cyan); font-size: .67rem; font-weight: 700; letter-spacing: .17em; }
h1 { margin: 0; font-family: "Alimama ShuHeiTi", "Microsoft YaHei", sans-serif; font-size: clamp(2rem, 3.1vw, 3.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -.075em; white-space: nowrap; }
h1 em { color: var(--acid); font-style: normal; }
.intro-panel__body { width: min(320px, 100%); margin: 25px 0 0; color: var(--muted); font-size: .94rem; line-height: 1.65; }

.control-panel { position: absolute; z-index: 5; right: clamp(22px, 3vw, 48px); top: 42%; width: 238px; transform: translateY(-44%); padding: 18px; border: 1px solid rgba(141,190,214,.34); border-radius: 2px; background: transparent; box-shadow: 0 18px 48px rgba(0,0,0,.10), inset 0 1px 0 rgba(206,244,255,.06); }
.control-panel__head { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .68rem; letter-spacing: .13em; }
.index { color: var(--cyan); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 15px 0; padding: 3px; background: transparent; }
.segmented button { border: 0; padding: 9px 5px; color: var(--muted); background: transparent; cursor: pointer; font-size: .72rem; }
.segmented button.is-active { color: var(--cyan); background: transparent; box-shadow: inset 0 -1px 0 var(--cyan), 0 5px 14px -12px var(--cyan); }
.segmented button:focus-visible { outline: 1px solid var(--cyan); outline-offset: -2px; }
.control-row { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 13px 2px; border: 0; border-top: 1px solid var(--line); background: transparent; cursor: pointer; font-size: .78rem; }
.control-row span { display: flex; align-items: center; gap: 10px; }
.control-row b { color: var(--cyan); font-size: .65rem; }
.control-icon { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--muted); }
.control-icon--mesh { background: linear-gradient(45deg, transparent 45%, var(--muted) 46%, var(--muted) 54%, transparent 55%); }
.control-icon--orbit { border-radius: 50%; box-shadow: -3px 0 0 -2px var(--muted), 3px 0 0 -2px var(--muted); }
.control-icon--reset { border-radius: 50%; border-right-color: transparent; }
.control-icon--rail { width: 7px; border-color: var(--cyan); box-shadow: 5px 0 0 -1px var(--cyan); }
.control-icon--scan { width: 16px; height: 12px; border-color: var(--cyan); border-width: 1px 0; box-shadow: inset 0 5px 0 -4px var(--cyan); }
.control-icon--flame { position: relative; width: 12px; height: 16px; border: 1px solid #63849b; border-radius: 70% 20% 65% 35%; transform: rotate(45deg) scale(.78); }
.afterburner-toggle[data-level="1"] .control-icon--flame { border-color: #8edfff; box-shadow: 0 0 9px rgba(142,223,255,.5); }
.afterburner-toggle[data-level="2"] .control-icon--flame { border-color: #228aff; box-shadow: 0 0 11px rgba(34,138,255,.75); }
.afterburner-toggle[data-level="3"] .control-icon--flame { border-color: #c075ff; box-shadow: 0 0 13px rgba(174,78,255,.95); }
.afterburner-toggle[data-level="1"] b { color: #8edfff; }
.afterburner-toggle[data-level="2"] b { color: #3a9dff; }
.afterburner-toggle[data-level="3"] b { color: #cf8aff; text-shadow: 0 0 10px rgba(190,100,255,.6); }

.pan-pad { position: absolute; z-index: 6; right: clamp(22px, 3vw, 48px); bottom: 90px; display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); gap: 4px; padding: 7px; border: 1px solid rgba(141,190,214,.32); background: transparent; box-shadow: 0 18px 45px rgba(0,0,0,.10), inset 0 1px 0 rgba(206,244,255,.06); }
.pan-key { border: 1px solid rgba(141,190,214,.28); color: var(--cyan); background: transparent; cursor: pointer; font-size: .72rem; line-height: 1; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.pan-key:hover, .pan-key:focus-visible { border-color: var(--cyan); background: rgba(60,229,229,.18); outline: none; }
.pan-key:active { transform: scale(.92); }
.pan-key--up { grid-column: 2; grid-row: 1; }
.pan-key--left { grid-column: 1; grid-row: 2; }
.pan-key--center { grid-column: 2; grid-row: 2; color: var(--acid); }
.pan-key--right { grid-column: 3; grid-row: 2; }
.pan-key--down { grid-column: 2; grid-row: 3; }

.model-data { position: absolute; z-index: 5; left: clamp(22px, 3.6vw, 58px); bottom: 28px; display: flex; gap: 24px; color: var(--muted); font-size: .58rem; letter-spacing: .12em; }
.model-data b { color: var(--text); font-size: .78rem; }

dialog { width: min(430px, calc(100vw - 36px)); border: 1px solid var(--line); border-radius: 4px; padding: 28px; color: var(--text); background: transparent; box-shadow: 0 30px 100px rgba(0,0,0,.28), inset 0 1px 0 rgba(206,244,255,.06); }
dialog::backdrop { background: rgba(2,5,9,.72); backdrop-filter: blur(5px); }
dialog h2 { margin: 0; font-size: 2rem; }
dialog ul { margin: 22px 0 0; padding-left: 20px; color: var(--muted); line-height: 2; }
#help-close { position: absolute; right: 16px; top: 12px; border: 0; background: none; cursor: pointer; font-size: 1.6rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scan { 0%,100% { transform: translateY(-16vh); opacity: 0; } 18%,82% { opacity: .7; } 50% { transform: translateY(47vh); } }

@media (max-width: 840px) {
  .topbar { height: 64px; grid-template-columns: 1fr auto; }
  .status { display: none; }
  .intro-panel { top: 82px; left: 16px; width: min(58vw, 300px); transform: none; }
  .intro-panel .kicker { max-width: 100%; margin-bottom: 8px; font-size: clamp(.48rem, 1.7vw, .67rem); letter-spacing: .12em; white-space: nowrap; }
  .intro-panel h1 { font-size: clamp(1.35rem, 6vw, 2.5rem); letter-spacing: -.075em; white-space: normal; }
  .intro-panel__body { display: none; }
  .control-panel { left: 12px; right: 12px; top: auto; bottom: 80px; width: auto; transform: none; padding: 8px 10px; border: 0; background: transparent; box-shadow: none; }
  .control-panel__head { display: none; }
  .segmented { margin: 0 0 4px; padding: 0; background: transparent; }
  .segmented button { padding: 7px 3px; }
  .control-row { display: inline-flex; width: 19%; padding: 7px 2px; vertical-align: top; border-top-color: transparent; background: transparent; font-size: clamp(.53rem, 2vw, .7rem); }
  .control-row b, .control-icon { display: none; }
  .model-data, .drag-hint { display: none; }
  .pan-pad { right: 18px; top: 82px; bottom: auto; transform: scale(.88); transform-origin: top right; background: transparent; box-shadow: none; }
  .viewer { inset: 64px 0 0; }
}

@media (max-width: 420px) {
  .intro-panel { width: 55vw; }
  .intro-panel h1 { font-size: clamp(1.25rem, 5.8vw, 1.75rem); }
  .control-panel { left: 6px; right: 6px; bottom: 78px; padding-inline: 6px; background: transparent; }
  .control-row { width: 19.3%; letter-spacing: -.03em; }
  .pan-pad { right: 10px; top: 82px; bottom: auto; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); gap: 2px; padding: 4px; border-color: rgba(141,190,214,.2); transform: none; }
  .pan-key { border-color: rgba(141,190,214,.17); color: rgba(60,229,229,.68); font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Mech bay UI: concise instrument labels keep the 3D subject visually dominant. */
.topbar { height: 64px; border-bottom-color: rgba(107, 185, 205, .14); }
.brand { font-size: .68rem; color: #d9eff1; }
.brand__mark { width: 25px; height: 25px; color: var(--acid); border-color: rgba(232,244,94,.78); }
.status { font-size: .62rem; color: #718793; }
.status i { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.help-button { border-color: rgba(141,190,214,.24); padding: 8px 13px; color: #afc4cc; }
.help-button:hover, .help-button:focus-visible { color: var(--cyan); border-color: var(--cyan); outline: none; }
.viewer { inset: 64px 14% 0 0; }
.drag-hint { left: 55%; bottom: 22px; padding: 7px 11px; border-left: 1px solid rgba(60,229,229,.45); background: linear-gradient(90deg, rgba(5,9,16,.38), transparent); font-size: .6rem; }

.intro-panel { left: clamp(22px, 3.6vw, 58px); top: 39%; width: min(215px, 19vw); transform: translateY(-50%); padding-left: 15px; border-left: 1px solid rgba(60,229,229,.55); }
.intro-panel::before { content: ""; position: absolute; left: -3px; top: 0; width: 5px; height: 5px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.intro-panel__code { display: flex; align-items: baseline; gap: 9px; margin: 0 0 11px; color: #728b98; font-size: .51rem; font-weight: 700; letter-spacing: .16em; }
.intro-panel__code strong { color: #e6f0f1; font-size: 1.02rem; letter-spacing: .04em; }
.kicker { margin-bottom: 8px; color: var(--cyan); font-size: .53rem; letter-spacing: .18em; }
.intro-panel h1 { font-size: clamp(1.6rem, 2.25vw, 2.55rem); line-height: .98; letter-spacing: -.065em; }
.intro-panel__body { margin-top: 15px; color: #8598a4; font-size: .7rem; line-height: 1.65; }

.control-panel { right: clamp(22px, 3vw, 48px); top: 46%; width: 232px; transform: translateY(-50%); padding: 14px 15px 12px; border-color: rgba(107,185,205,.28); background: linear-gradient(135deg, rgba(9,19,31,.33), rgba(4,9,16,.12)); box-shadow: 0 18px 42px rgba(0,0,0,.12), inset 0 1px 0 rgba(206,244,255,.06); backdrop-filter: blur(3px); }
.control-panel::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border-top: 1px solid rgba(60,229,229,.13); border-right: 1px solid rgba(60,229,229,.1); }
.control-panel__head { position: relative; padding-bottom: 11px; font-size: .58rem; color: #9eb4be; }
.control-group { position: relative; }
.control-group__label { margin: 13px 0 7px; color: #617b89; font-size: .49rem; font-weight: 700; letter-spacing: .18em; }
.segmented { gap: 2px; margin: 0 0 8px; padding: 2px; border: 1px solid rgba(141,190,214,.14); background: rgba(1,5,10,.12); }
.segmented button { position: relative; padding: 8px 4px; font-size: .66rem; }
.segmented button.is-active { color: #061015; background: var(--cyan); box-shadow: 0 0 18px rgba(60,229,229,.14); }
.control-row { padding: 9px 2px; color: #d4e0e1; border-top-color: rgba(141,190,214,.15); font-size: .69rem; transition: color .2s ease, background .2s ease; }
.control-row:hover, .control-row:focus-visible { color: var(--cyan); background: rgba(60,229,229,.06); outline: none; }
.control-row span { gap: 9px; }
.control-row b { font-size: .57rem; }
.control-icon { width: 14px; height: 14px; border-color: #7894a0; }
.control-icon--scan { width: 14px; }
.control-group--drive { margin-top: 2px; padding-top: 1px; border-top: 1px solid rgba(141,190,214,.22); }
.afterburner-toggle { position: relative; display: grid; grid-template-columns: 1fr auto; width: 100%; min-height: 59px; padding: 10px 10px 8px; border: 1px solid rgba(104, 173, 201, .33); background: linear-gradient(100deg, rgba(27,67,86,.24), rgba(8,17,27,.12)); color: #edf5f3; cursor: pointer; text-align: left; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.afterburner-toggle:hover, .afterburner-toggle:focus-visible { border-color: rgba(60,229,229,.78); background: linear-gradient(100deg, rgba(27,88,104,.34), rgba(8,17,27,.16)); outline: none; }
.afterburner-toggle > span { display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 700; }
.afterburner-toggle em { font-style: normal; }
.afterburner-toggle b { align-self: center; color: var(--cyan); font-size: .72rem; letter-spacing: .08em; }
.afterburner-toggle small { grid-column: 1 / -1; margin-top: 4px; color: #6f8995; font-size: .49rem; letter-spacing: .1em; }
.afterburner-toggle[data-level="1"] { border-color: rgba(142,223,255,.68); box-shadow: inset 3px 0 0 #8edfff; }
.afterburner-toggle[data-level="2"] { border-color: rgba(34,138,255,.74); box-shadow: inset 3px 0 0 #228aff, 0 0 17px rgba(34,138,255,.11); }
.afterburner-toggle[data-level="3"] { border-color: rgba(239,90,90,.86); background: linear-gradient(105deg, rgba(113,17,20,.34), rgba(42,11,23,.22)); box-shadow: inset 3px 0 0 #ff5b4b, 0 0 20px rgba(244,54,63,.16); }
.afterburner-toggle[data-level="3"] b { color: #ff7665; text-shadow: 0 0 10px rgba(255,79,58,.62); }
.reset-view { position: relative; display: flex; align-items: center; width: 100%; gap: 8px; margin-top: 10px; padding: 5px 2px 0; border: 0; border-top: 1px solid rgba(141,190,214,.16); background: transparent; color: #8198a2; cursor: pointer; font-size: .61rem; text-align: left; }
.reset-view b { margin-left: auto; color: var(--cyan); font-size: .8rem; }
.reset-view:hover, .reset-view:focus-visible { color: var(--cyan); outline: none; }
.mobile-control-trigger { display: none; }

.pan-pad { right: clamp(22px, 3vw, 48px); bottom: 122px; padding: 6px; border-color: rgba(107,185,205,.28); background: rgba(5,12,21,.1); }
.pan-key { border-color: rgba(107,185,205,.26); }
.model-data { bottom: 20px; gap: 17px; color: #6f8591; }
.model-data b { font-size: .71rem; }

@media (max-width: 840px) {
  .viewer { inset: 64px 0 0; }
  .intro-panel { top: 95px; left: 16px; width: min(190px, 50vw); transform: none; padding-left: 11px; }
  .intro-panel__code { margin-bottom: 7px; }
  .intro-panel h1 { font-size: clamp(1.28rem, 5.6vw, 1.85rem); }
  .intro-panel .kicker { font-size: .46rem; }
  .intro-panel__body { display: none; }
  .mobile-control-trigger { position: absolute; z-index: 8; right: 16px; bottom: 28px; display: flex; align-items: center; justify-content: space-between; width: 112px; height: 36px; padding: 0 10px; border: 1px solid rgba(107,185,205,.35); background: rgba(5,12,21,.24); color: #a8c2cb; cursor: pointer; font-size: .56rem; font-weight: 700; letter-spacing: .12em; }
  .mobile-control-trigger b { color: var(--cyan); font-size: .95rem; font-weight: 400; transition: transform .25s ease; }
  .mobile-control-trigger[aria-expanded="true"] b { transform: rotate(45deg); }
  .control-panel { z-index: 9; left: 12px; right: 12px; top: auto; bottom: 74px; width: auto; max-height: min(440px, calc(100svh - 152px)); overflow: auto; transform: translateY(18px); padding: 14px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; background: rgba(5,12,21,.86); backdrop-filter: blur(14px); }
  .control-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .control-panel__head { display: flex; }
  .control-row { display: flex; width: 100%; padding: 10px 2px; font-size: .72rem; border-top-color: rgba(141,190,214,.15); }
  .control-row b, .control-icon { display: inline-block; }
  .control-icon--orbit, .control-icon--reset { display: inline-block; }
  .pan-pad { right: 16px; top: 82px; bottom: auto; transform: scale(.84); transform-origin: top right; }
  .model-data, .drag-hint { display: none; }
}

@media (max-width: 420px) {
  .intro-panel { top: 86px; left: 12px; }
  .intro-panel__code { font-size: .43rem; }
  .intro-panel__code strong { font-size: .83rem; }
  .mobile-control-trigger { right: 12px; bottom: 18px; }
  .control-panel { left: 8px; right: 8px; bottom: 63px; }
  .pan-pad { right: 7px; top: 77px; }
}