:root {
  --bg-a: #143566;
  --bg-b: #0b1d40;
  --bg-c: #050d22;
  --cy: #a6e6ff;
  --cy-hi: #e6f8ff;
  --cy-dim: rgba(166, 230, 255, 0.5);
  --cy-faint: rgba(166, 230, 255, 0.28);
  --bar: #5cc4ff;
  --blue: #63a9ff;
  --cell: rgba(120, 170, 240, 0.16);
  --cell-hi: rgba(140, 190, 250, 0.34);
  --orange: #f2a43a;
  --magenta: #e48cff;
  --red: #d9343f;
  --tagblue: #2f6fd0;
  --glow: 0 0 5px rgba(90, 185, 255, 0.85), 0 0 14px rgba(60, 140, 255, 0.4);
  --ui: 'Saira', system-ui, sans-serif;
  --num: 'Share Tech Mono', ui-monospace, monospace;
  --m: clamp(24px, 5.2vw, 100px);   /* outer margin */
  --cw: clamp(290px, 21vw, 400px);  /* side column width */
  --top: 150px;
  --low: 300px;                     /* space reserved under the model */
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse 80% 75% at 50% 42%, var(--bg-a), var(--bg-b) 55%, var(--bg-c) 100%);
  color: var(--cy);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#gl.dragging { cursor: grabbing; }

.fx { position: fixed; inset: 0; pointer-events: none; }
.fx-scan { background: repeating-linear-gradient(0deg, rgba(0, 10, 30, 0.22) 0 1px, transparent 1px 3px); }
.fx-vig { background: radial-gradient(ellipse at center, transparent 50%, rgba(2, 7, 20, 0.8) 100%); }

/* ---------------------------------------------------------------- shared type */
.hud { text-shadow: var(--glow); }
.hdr { font: 500 17px var(--ui); color: var(--cy); margin: 18px 0 8px; white-space: nowrap; }
.num { font-family: var(--num); }
.reveal { animation: reveal 0.55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- title + nav */
.title { position: fixed; top: 46px; left: var(--m); }
.title h1 { margin: 0; font: 500 40px/1 var(--ui); color: var(--cy-hi); letter-spacing: 0.01em; }
.title div { margin-top: 6px; font: 15px var(--num); color: var(--cy-dim); }

.nav { position: fixed; top: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tabrow { display: flex; align-items: center; gap: 14px; }
.tabrow .div { width: 1px; height: 22px; background: var(--cell-hi); }
.tabs { display: flex; gap: 2px; }
.tabs button {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 4px 10px 4px;
  color: var(--cy-dim);
  font: 500 15px var(--ui);
  letter-spacing: 0.06em;
  text-shadow: var(--glow);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tabs button small { margin-left: 5px; font: 11px var(--num); opacity: 0.6; }
.tabs button:hover { color: var(--cy); }
.tabs button.active { color: var(--cy-hi); border-bottom-color: var(--orange); }
.tabs.era button { font-size: 16px; padding: 3px 14px; border: 1px solid var(--cell-hi); border-radius: 3px; }
.tabs.era button.active { background: var(--cy); color: var(--bg-b); border-color: var(--cy); text-shadow: none; box-shadow: 0 0 12px rgba(166, 230, 255, 0.5); }
.tabs button:focus-visible { outline: 1px solid var(--cy-hi); outline-offset: 2px; }

.chips { position: relative; display: flex; gap: 22px; }
.chips::before { content: ''; position: absolute; left: 20px; right: 20px; top: 50%; height: 1px; background: var(--cell-hi); }
.chips button {
  position: relative;
  appearance: none;
  width: 92px;
  height: 56px;
  padding: 5px 8px;
  text-align: left;
  background: rgba(14, 36, 76, 0.92);
  border: 1px solid var(--cell-hi);
  color: var(--cy-dim);
  font: 15px var(--num);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chips button svg { position: absolute; right: 8px; bottom: 6px; width: 24px; height: 24px; fill: currentColor; opacity: 0.5; }
.chips button:hover { color: var(--cy); border-color: var(--cy-dim); }
.chips button.active { border: 2px solid var(--orange); color: var(--cy-hi); background: rgba(40, 40, 90, 0.9); box-shadow: 0 0 14px rgba(242, 164, 58, 0.35); }
.chips button.active svg { fill: var(--magenta); opacity: 1; filter: drop-shadow(0 0 4px var(--magenta)); }
.chips button:focus-visible { outline: 1px solid var(--cy-hi); outline-offset: 3px; }

.usaf {
  position: fixed;
  top: 44px;
  right: var(--m);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--cell-hi);
  background: rgba(14, 36, 76, 0.85);
  color: var(--cy);
  font: 500 13px var(--ui);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-shadow: var(--glow);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.usaf b { font: 14px var(--num); color: var(--orange); text-shadow: none; }
.usaf:hover { border-color: var(--orange); box-shadow: 0 0 14px rgba(242, 164, 58, 0.35); }
.usaf:focus-visible { outline: 1px solid var(--cy-hi); outline-offset: 3px; }
.usaf-m { display: block; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--orange); color: var(--cy-hi); font: 500 13px var(--ui); text-decoration: none; text-align: center; }

/* ---------------------------------------------------------------- selection frame */
.select {
  position: fixed;
  top: var(--top);
  bottom: var(--low);
  left: calc(var(--m) + var(--cw) + 40px);
  right: calc(var(--m) + var(--cw) + 40px);
  pointer-events: none;
}
.select .c { position: absolute; width: 26px; height: 26px; border: 2px solid var(--orange); filter: drop-shadow(0 0 5px rgba(242, 164, 58, 0.6)); }
.select .c.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.select .c.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.select .c.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.select .c.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.select .lbl { position: absolute; top: 8px; left: 12px; font: 17px var(--num); color: var(--cy); text-shadow: var(--glow); }

.morph { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; font: 500 14px var(--ui); letter-spacing: 0.18em; color: var(--cy); text-shadow: var(--glow); opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
.morph.on { opacity: 1; }
.morph .pb { width: 220px; height: 3px; margin: 6px auto 0; background: var(--cell-hi); }
.morph .pb i { display: block; height: 100%; width: 0; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }

/* ---------------------------------------------------------------- throttle */
.thr-wrap {
  position: absolute;
  right: 18px;
  top: 52px;
  bottom: 20px;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  text-shadow: var(--glow);
}
.thr-wrap .h { font: 500 13px var(--ui); color: var(--cy); white-space: nowrap; }
.thr {
  position: relative;
  flex: 1;
  width: 46px;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
}
.thr .track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(166, 230, 255, 0.6);
  padding: 2px;
  background: rgba(8, 22, 50, 0.6);
}
.thr .fill {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 0;
  background: repeating-linear-gradient(0deg, var(--bar) 0 5px, transparent 5px 7px);
  box-shadow: 0 0 10px rgba(92, 196, 255, 0.6);
}
.thr.ab-on .fill { background: repeating-linear-gradient(0deg, var(--bar) 0 5px, transparent 5px 7px) bottom / 100% var(--dry, 100%) no-repeat, repeating-linear-gradient(0deg, var(--orange) 0 5px, transparent 5px 7px); }
.thr .detent { position: absolute; left: -4px; right: -4px; height: 0; border-top: 1px dashed var(--orange); }
.thr .detent span { position: absolute; left: calc(100% + 4px); top: -9px; font: 12px var(--num); color: var(--orange); text-shadow: none; }
.thr .knob {
  position: absolute;
  left: 50%;
  width: 46px;
  height: 14px;
  transform: translate(-50%, 50%);
  border: 2px solid var(--orange);
  background: rgba(30, 20, 10, 0.85);
  box-shadow: 0 0 10px rgba(242, 164, 58, 0.55);
}
.thr .knob::after { content: ''; position: absolute; inset: 3px 8px; background: var(--orange); }
.thr:focus-visible .knob { outline: 1px solid var(--cy-hi); outline-offset: 3px; }
.thr-wrap .v { font: 15px var(--num); color: var(--cy-hi); white-space: nowrap; }
.thr-wrap .note { font: 11px var(--num); color: var(--cy-dim); text-align: center; line-height: 1.3; }

/* ---------------------------------------------------------------- side columns */
.col {
  position: fixed;
  top: var(--top);
  width: var(--cw);
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  padding-bottom: 24px;
}
.col::-webkit-scrollbar { display: none; }
.col-left { left: var(--m); bottom: var(--low); }
.col-right { right: var(--m); bottom: calc(48px + var(--photo-h) + 24px); --photo-h: calc(var(--cw) * 0.56 + 30px); }
.col .hdr:first-child { margin-top: 0; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.facts li { display: grid; grid-template-columns: 34px 1fr; font: 400 16px/1.42 var(--ui); color: var(--cy); }
.tag {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 20px;
  margin-top: 2px;
  font: 13px var(--num);
  color: #fff;
  background: var(--tagblue);
  text-shadow: none;
}
.facts li:nth-child(even) .tag { background: var(--red); }

.ac-name { display: flex; align-items: center; gap: 10px; font: 500 clamp(22px, 1.7vw, 30px)/1.1 var(--ui); color: var(--cy-hi); }
.ac-name .ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; background: var(--magenta); box-shadow: 0 0 10px rgba(228, 140, 255, 0.6); }
.ac-name .ico svg { width: 20px; height: 20px; fill: #fff; }

.spec { display: grid; grid-template-columns: 1fr 52%; align-items: center; gap: 10px; font: 400 19px var(--ui); margin-bottom: 6px; }
.sbar { position: relative; height: 20px; border-bottom: 1px solid rgba(166, 230, 255, 0.7); border-right: 1px solid rgba(166, 230, 255, 0.7); }
.sbar i { position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; background: linear-gradient(90deg, #3aa6ff, #7fd4ff); box-shadow: 0 0 10px rgba(92, 196, 255, 0.55); transition: width 0.9s cubic-bezier(.2, .8, .2, 1); }
.sbar em { position: absolute; right: 6px; top: 0; font: normal 14px/20px var(--num); color: var(--cy-hi); opacity: 0.75; text-shadow: none; }

.rows > div { display: flex; justify-content: space-between; gap: 12px; font: 400 18px var(--ui); margin-bottom: 4px; }
.rows b { font: 400 15px/26px var(--num); color: var(--cy-hi); text-align: right; }
.arm { list-style: none; margin: 0; padding: 0; font: 400 16px/1.4 var(--ui); }
.arm li { margin-bottom: 4px; }
.arm li::before { content: '▸ '; color: var(--blue); }
.engine { margin: 0; font: 400 16px/1.4 var(--ui); }

/* ---------------------------------------------------------------- bottom block */
.bottom { position: fixed; left: var(--m); right: calc(var(--m) + var(--cw) + 40px); bottom: 96px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); gap: 4px 48px; }
.stats span { white-space: nowrap; }
.stats div { display: flex; justify-content: space-between; gap: 16px; font: 400 21px var(--ui); color: var(--cy); }
.stats b { font: 400 20px var(--num); color: var(--cy-hi); white-space: nowrap; }
.stats b.blue { color: var(--blue); }
.brief { margin: 20px 0 0; max-width: 1050px; font: 400 21px/1.5 var(--ui); color: var(--cy-hi); }

.hints { position: fixed; left: var(--m); bottom: 40px; display: flex; gap: 26px; font: 400 19px var(--ui); color: var(--cy); text-shadow: var(--glow); pointer-events: none; }
.hints span { display: flex; align-items: center; gap: 8px; }
.hints i { font: normal 11px var(--num); padding: 3px 6px; border-radius: 10px; background: var(--cy); color: var(--bg-b); text-shadow: none; box-shadow: 0 0 8px rgba(166, 230, 255, 0.6); }

/* ---------------------------------------------------------------- photo */
.photo {
  position: fixed;
  right: var(--m);
  bottom: 48px;
  width: var(--cw);
  margin: 0;
  padding: 26px 8px 8px;
  border: 1px solid var(--cell-hi);
  background: rgba(10, 28, 62, 0.85);
}
.photo .lbl { position: absolute; top: 4px; left: 8px; font: 14px var(--num); color: var(--cy); text-shadow: var(--glow); }
.photo .lbl::after { content: ' // REF. IMAGE'; color: var(--cy-dim); }
.photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.85) contrast(1.05); transition: opacity 0.35s; }
.photo img.swap { opacity: 0; }
.photo figcaption { margin-top: 5px; font: 11px var(--num); color: var(--cy-dim); letter-spacing: 0.03em; }
.photo::after { content: ''; position: absolute; inset: 26px 8px auto; aspect-ratio: 16 / 9; width: calc(100% - 16px); background: repeating-linear-gradient(0deg, rgba(5, 15, 40, 0.25) 0 1px, transparent 1px 3px); pointer-events: none; }

.m-only { display: none; }

/* ---------------------------------------------------------------- boot */
.boot { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: radial-gradient(ellipse at center, var(--bg-a), var(--bg-c) 75%); transition: opacity 0.6s, visibility 0.6s; }
.boot.done { opacity: 0; visibility: hidden; }
.boot-inner { width: min(520px, 86vw); font: 15px/1.9 var(--num); color: var(--cy); text-shadow: var(--glow); }
.boot-title { font: 500 34px var(--ui); color: var(--cy-hi); margin-bottom: 14px; }
.boot-line .ok { color: var(--cy-hi); }
.boot-bar { margin-top: 14px; height: 4px; border: 1px solid var(--cell-hi); }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--bar); box-shadow: 0 0 10px var(--bar); transition: width 0.2s; }

/* ---------------------------------------------------------------- responsive */
@media (max-height: 940px) and (min-width: 901px) {
  :root { --top: 128px; --low: 250px; }
  .title { top: 32px; } .title h1 { font-size: 32px; }
  .nav { top: 16px; gap: 8px; } .chips button { height: 48px; } .usaf { top: 30px; }
  .bottom { bottom: 80px; }
  .stats div { font-size: 18px; } .stats b { font-size: 17px; }
  .brief { font-size: 18px; margin-top: 12px; }
  .hints { bottom: 30px; font-size: 16px; }
  .photo { bottom: 30px; }
  .spec { font-size: 17px; } .rows > div { font-size: 16px; } .facts li { font-size: 15px; }
}
@media (max-width: 1500px) and (min-width: 901px) {
  .title h1 { font-size: 30px; }
  .tabs button { font-size: 13px; padding: 4px 7px; }
  .tabs.era button { font-size: 14px; padding: 3px 10px; }
  .tabrow { gap: 8px; }
  .chips { gap: 14px; }
  .chips button { width: 80px; }
  .usaf { font-size: 0; gap: 0; } .usaf b { font-size: 13px; }
  .brief { font-size: 17px; }
}

@media (max-width: 900px) {
  :root { --m: 14px; }
  .title, .hints, .col-left, .photo, .select .c, .select .lbl { display: none; }
  .nav { top: 8px; left: 10px; right: 10px; transform: none; gap: 6px; align-items: stretch; }
  .tabrow { gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .tabrow::-webkit-scrollbar { display: none; }
  .tabs button { font-size: 12px; padding: 4px 6px; }
  .tabs button small { display: none; }
  .tabs.era button { font-size: 12px; padding: 3px 8px; }
  .chips { gap: 5px; }
  .chips::before { display: none; }
  .chips button { flex: 1; width: auto; height: 38px; font-size: 13px; }
  .chips button svg { width: 16px; height: 16px; right: 5px; bottom: 4px; }
  .usaf { display: none; }
  .col-right { top: 100px; left: 14px; right: 14px; bottom: auto; width: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; }
  .col-right .hdr, .col-right .rows, .col-right .arm, .col-right .engine, .spec.x { display: none; }
  .ac-name { font-size: 22px; margin-bottom: 8px; }
  .spec { font-size: 14px; margin-bottom: 2px; grid-template-columns: 90px 1fr; }
  .sbar { height: 16px; } .sbar em { font-size: 12px; line-height: 16px; }
  .select { top: 240px; bottom: 36vh; left: 0; right: 0; }
  .thr-wrap { right: 8px; top: 0; bottom: 0; width: 70px; }
  .thr-wrap .note { display: none; }
  .bottom { left: 0; right: 0; bottom: 0; max-height: 34vh; overflow-y: auto; padding: 14px 14px 20px; background: linear-gradient(180deg, rgba(8, 22, 50, 0.92), rgba(5, 13, 34, 0.98)); border-top: 1px solid var(--cell-hi); text-shadow: none; }
  .stats { grid-template-columns: 1fr; }
  .stats div { font-size: 15px; } .stats b { font-size: 14px; }
  .brief { font-size: 15px; margin-top: 10px; }
  .m-only { display: block; }
  .bottom .facts li { font-size: 14px; }
  .bottom .hdr { font-size: 15px; }
  .bottom img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 14px; border: 1px solid var(--cell-hi); }
  .bottom small { display: block; font: 10px var(--num); color: var(--cy-dim); margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}