:root {
  --ink: #f2f0e8;
  --muted: #9ba09a;
  --acid: #d9ff4f;
  --orange: #ff7048;
  --black: #07090a;
  --panel: rgba(9, 12, 12, .78);
  --line: rgba(242, 240, 232, .18);
  --ease: cubic-bezier(.22, .78, .18, 1);
  --sans: "Arial Narrow", "Roboto Condensed", "Microsoft YaHei", sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--black); color: var(--ink); }
body { overflow: hidden; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }

.loader {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: #080b0c; transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__grid {
  position: absolute; inset: 0; opacity: .16;
  background-image: linear-gradient(rgba(217,255,79,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(217,255,79,.22) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(circle at center, #000, transparent 72%);
}
.loader__inner { position: relative; width: min(560px, calc(100vw - 48px)); text-align: center; }
.micro { margin: 0; color: var(--acid); font: 10px/1.4 var(--mono); letter-spacing: .22em; }
.loader__mark { margin: 3vh 0 0; font: 900 clamp(100px, 22vw, 230px)/.8 var(--sans); letter-spacing: -.11em; }
.loader__status { margin: 38px 0 12px; color: #adb2aa; font: 11px var(--mono); letter-spacing: .16em; }
.loader__track { height: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.loader__track span { display: block; width: 0; height: 100%; background: var(--acid); box-shadow: 0 0 18px rgba(217,255,79,.7); transition: width .2s; }
.loader__number { margin: 10px 0 30px; display: flex; justify-content: flex-end; align-items: baseline; gap: 5px; }
.loader__number b { font: 700 27px var(--mono); }
.loader__number span { color: var(--muted); font: 11px var(--mono); }
.enter-button, .story-advance, .replay-button {
  border: 1px solid rgba(217,255,79,.7); background: rgba(217,255,79,.06); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-width: 220px;
  padding: 15px 18px; transition: .35s var(--ease); text-transform: uppercase;
}
.enter-button span, .story-advance span, .replay-button span { font: 11px var(--mono); letter-spacing: .12em; }
.enter-button i, .story-advance i, .replay-button i { color: var(--acid); font: normal 10px var(--mono); }
.enter-button:disabled { opacity: .28; cursor: wait; }
.enter-button:not(:disabled):hover, .story-advance:hover, .replay-button:hover { color: #080a08; background: var(--acid); }
.enter-button:not(:disabled):hover i, .story-advance:hover i, .replay-button:hover i { color: #080a08; }

.experience { position: fixed; inset: 0; overflow: hidden; opacity: 0; transition: opacity .7s; }
.experience.is-entered { opacity: 1; }
.visual, .sequence-frame, .visual__shade, .visual__grain, .visual__vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.visual { background: #050708; }
.sequence-frame { display: block; user-select: none; pointer-events: none; }
.sequence-frame--blur { object-fit: cover; filter: blur(30px) brightness(.42) saturate(.8); transform: scale(1.08); opacity: .75; }
.sequence-frame--main { object-fit: cover; z-index: 1; }
.visual__shade { z-index: 2; background: linear-gradient(90deg, rgba(5,7,8,.76) 0%, rgba(5,7,8,.08) 43%, rgba(5,7,8,.18) 68%, rgba(5,7,8,.52) 100%); transition: background .7s; }
.visual__vignette { z-index: 3; box-shadow: inset 0 0 16vw 3vw rgba(0,0,0,.64); }
.visual__grain { z-index: 4; opacity: .1; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.experience.is-playing .visual__shade { background: linear-gradient(90deg, rgba(5,7,8,.18), rgba(5,7,8,.02) 50%, rgba(5,7,8,.16)); }

.topbar {
  position: absolute; z-index: 50; left: max(24px, 3vw); right: max(24px, 3vw); top: max(20px, env(safe-area-inset-top));
  height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
}
.brand, .sound-button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.brand { display: flex; align-items: center; gap: 13px; justify-self: start; text-align: left; }
.brand b { color: var(--acid); font: 900 27px/.8 var(--sans); letter-spacing: -.08em; }
.brand span { width: 92px; color: #c7cac2; font: 8px/1.25 var(--mono); letter-spacing: .12em; }
.archive-code { text-align: center; display: grid; gap: 5px; }
.archive-code span { color: #747b76; font: 8px var(--mono); letter-spacing: .24em; }
.archive-code b { font: 9px var(--mono); letter-spacing: .15em; }
.sound-button { justify-self: end; display: flex; align-items: center; gap: 10px; color: #a5aaa4; }
.sound-button b { font: 8px var(--mono); letter-spacing: .13em; }
.sound-bars { height: 14px; display: flex; gap: 2px; align-items: end; }
.sound-bars i { display: block; width: 2px; height: 5px; background: currentColor; }
.sound-bars i:nth-child(2) { height: 11px; }.sound-bars i:nth-child(3) { height: 7px; }
.sound-button[aria-pressed="true"] { color: var(--acid); }
.sound-button[aria-pressed="true"] .sound-bars i { animation: bars .7s ease-in-out infinite alternate; }
.sound-button[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.25s; }
.sound-button[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.45s; }
@keyframes bars { to { height: 14px; } }

.stories { position: absolute; inset: 0; z-index: 10; }
.story {
  position: absolute; inset: 0; padding: 12vh 9vw 11vh; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(28px); transition: opacity .65s var(--ease), transform .8s var(--ease), visibility .65s;
}
.story.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.experience.is-playing .story.is-active { opacity: 0; visibility: hidden; transform: translateY(-22px); pointer-events: none; }
.eyebrow, .chapter { color: var(--acid); font: 10px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.eyebrow i { display: inline-block; width: 30px; height: 1px; margin: 0 10px 3px 0; background: currentColor; }
h1, h2, p { margin-top: 0; }
h2 { margin-bottom: 0; font-weight: 800; letter-spacing: -.065em; line-height: .92; }
h2 em { color: var(--acid); font-style: normal; }

.story--intro { display: flex; align-items: center; }
.intro-lockup { width: min(720px, 62vw); }
.intro-lockup .eyebrow { margin-bottom: 22px; }
h1 { margin: 0; display: flex; align-items: end; gap: 16px; font: 900 clamp(90px, 14vw, 220px)/.65 var(--sans); letter-spacing: -.11em; }
h1 small { margin-bottom: -.03em; color: var(--acid); font: 700 clamp(21px, 3.4vw, 52px)/1 var(--mono); letter-spacing: -.08em; }
.intro-lockup h2 { margin-top: 38px; font-size: clamp(39px, 5.7vw, 84px); }
.lede { width: min(540px, 100%); margin: 27px 0 0; color: #c3c6be; font-size: 14px; line-height: 1.9; }
.intro-stats { margin-top: 32px; display: flex; gap: clamp(24px, 4vw, 62px); }
.intro-stats div { display: grid; gap: 5px; }
.intro-stats b { font: 800 clamp(26px, 3.3vw, 48px)/1 var(--sans); letter-spacing: -.06em; }
.intro-stats span { color: var(--muted); font: 8px var(--mono); letter-spacing: .12em; }
.story-advance { margin-top: 31px; min-width: 205px; }
.intro-side-note { position: absolute; right: 9vw; bottom: 12vh; width: 260px; padding-left: 18px; border-left: 1px solid var(--acid); }
.intro-side-note span { color: var(--acid); font: 10px var(--mono); }
.intro-side-note p { margin: 10px 0 0; color: #aeb3ac; font-size: 12px; line-height: 1.75; }

.story-card { position: absolute; z-index: 2; }
.story-card--left { left: 9vw; top: 50%; width: min(570px, 48vw); transform: translateY(-48%); }
.story-card--right { right: 10vw; top: 50%; width: min(570px, 46vw); transform: translateY(-48%); }
.story-card--bottom { left: 9vw; bottom: 12vh; width: min(670px, 56vw); }
.story-card--wide { width: min(670px, 54vw); }
.chapter { margin: 0 0 24px; }
.chapter span { display: inline-grid; place-items: center; width: 31px; height: 31px; margin-right: 12px; border: 1px solid rgba(217,255,79,.5); }
.story-card h2 { font-size: clamp(50px, 6.4vw, 96px); text-shadow: 0 4px 35px rgba(0,0,0,.9); }
.body-copy { width: min(520px, 100%); margin: 28px 0 0; color: #d2d4ce; font-size: 14px; line-height: 1.95; text-shadow: 0 2px 16px #000; }
.body-copy--dim { margin-top: 11px; color: #9da29c; }
.fact-line { margin-top: 34px; width: min(430px,100%); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; }
.fact-line span, .fact-line b { font: 9px var(--mono); letter-spacing: .11em; }.fact-line span { color: var(--muted); }.fact-line b { color: var(--acid); }
.data-stamp { position: absolute; right: 10vw; bottom: 14vh; display: grid; grid-template-columns: auto auto; align-items: end; gap: 0 12px; }
.data-stamp b { color: transparent; -webkit-text-stroke: 1px var(--acid); font: 900 clamp(100px, 15vw, 210px)/.7 var(--sans); letter-spacing: -.1em; }
.data-stamp span { color: var(--acid); font: 700 12px/1.2 var(--mono); letter-spacing: .08em; }
.data-stamp small { grid-column: 1/3; margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font: 8px var(--mono); letter-spacing: .15em; }

.story--chassis .visual__shade { background: none; }
.technical-grid { position: absolute; inset: 16vh 6vw 10vh 44vw; opacity: .25; border: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; }
.component-list { margin-top: 31px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.component-list div { display: grid; grid-template-columns: 28px 130px 1fr; gap: 12px; align-items: center; min-height: 53px; border-bottom: 1px solid var(--line); }
.component-list span { color: var(--acid); font: 9px var(--mono); }.component-list b { font: 9px var(--mono); letter-spacing: .08em; }.component-list p { margin: 0; color: #aeb2ad; font-size: 11px; }
.mass-readout { position: absolute; left: 8vw; bottom: 12vh; display: grid; }
.mass-readout span { color: var(--muted); font: 8px var(--mono); letter-spacing: .15em; }
.mass-readout b { font: 900 clamp(80px, 13vw, 190px)/.78 var(--sans); letter-spacing: -.08em; }
.mass-readout i { color: var(--acid); font: normal 11px var(--mono); letter-spacing: .2em; text-align: right; }

.story--gun { background: radial-gradient(circle at 68% 45%, transparent 0, rgba(5,7,8,.08) 35%, rgba(5,7,8,.7) 78%); }
.gun-number { position: absolute; right: 7vw; top: 14vh; color: rgba(217,255,79,.08); -webkit-text-stroke: 1px rgba(217,255,79,.24); font: 900 clamp(170px, 31vw, 470px)/.72 var(--sans); letter-spacing: -.13em; }
.gun-tags { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.gun-tags span { padding: 8px 10px; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: #c6cac3; font: 8px var(--mono); letter-spacing: .09em; }
.calibre-mark { position: absolute; right: 9vw; bottom: 12vh; display: grid; text-align: right; }
.calibre-mark b { color: var(--acid); font: 800 41px/1 var(--sans); }.calibre-mark span { margin-top: 4px; color: var(--muted); font: 8px var(--mono); letter-spacing: .14em; }

.story--spade { background: linear-gradient(90deg, rgba(5,7,8,.84) 0, rgba(5,7,8,.45) 48%, transparent 78%); }
.spade-functions { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spade-functions div { padding: 17px 16px 17px 0; }
.spade-functions div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.spade-functions b { color: var(--acid); font: 9px var(--mono); }
.spade-functions span { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; }
.spade-functions p { margin: 8px 0 0; color: #979c96; font-size: 10px; line-height: 1.55; }
.force-diagram { position: absolute; right: 11vw; top: 43%; width: 230px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; transform: rotate(13deg); }
.force-diagram span, .force-diagram b { color: var(--acid); font: 8px var(--mono); letter-spacing: .12em; }
.force-diagram i { position: relative; height: 1px; background: var(--acid); box-shadow: 0 0 12px var(--acid); }
.force-diagram i::after { content: ""; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--acid); border-right: 1px solid var(--acid); transform: rotate(45deg); }

.story--outro { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at center, rgba(5,7,8,.08), rgba(5,7,8,.78) 76%); }
.outro-copy { position: relative; z-index: 2; width: min(850px, 76vw); }
.outro-copy h2 { font-size: clamp(48px, 7.2vw, 110px); }
.outro-copy > p:not(.eyebrow) { width: min(610px, 100%); margin: 30px auto 0; color: #c6c9c2; font-size: 14px; line-height: 1.9; }
.outro-meta { margin-top: 33px; display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.outro-meta span { padding: 8px 11px; border: 1px solid var(--line); color: #b6bbb4; font: 8px var(--mono); letter-spacing: .1em; }
.replay-button { margin-top: 32px; min-width: 190px; }
.outro-title { position: absolute; bottom: -5vh; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.025); font: 900 43vw/.6 var(--sans); letter-spacing: -.12em; white-space: nowrap; }

.chapter-rail { position: absolute; z-index: 60; top: 50%; right: max(22px, 3vw); transform: translateY(-50%); display: grid; gap: 12px; }
.rail-caption { position: absolute; right: -3px; bottom: calc(100% + 18px); writing-mode: vertical-rl; transform: rotate(180deg); color: #747a75; font: 7px var(--mono); letter-spacing: .18em; }
.chapter-rail button { position: relative; width: 29px; height: 29px; padding: 0; border: 0; background: transparent; color: #777d78; cursor: pointer; }
.chapter-rail button::after { content: ""; position: absolute; right: 1px; top: 11px; width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); transition: .3s; }
.chapter-rail button span { position: absolute; right: 17px; top: 8px; font: 7px var(--mono); }
.chapter-rail button b { position: absolute; display: none; right: 35px; top: 7px; white-space: nowrap; font: 8px var(--mono); letter-spacing: .1em; }
.chapter-rail button:hover b { display: block; }
.chapter-rail button.is-active { color: var(--acid); }
.chapter-rail button.is-active::after { background: var(--acid); box-shadow: 0 0 13px rgba(217,255,79,.75); }
.rail-line { position: absolute; right: 4px; top: 14px; bottom: 14px; width: 1px; background: rgba(255,255,255,.13); z-index: -1; }
.rail-line i { display: block; width: 1px; height: 0; background: var(--acid); transition: height .55s var(--ease); }

.shot-hud { position: absolute; z-index: 70; left: 50%; bottom: 9vh; width: min(620px, 60vw); opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: .35s; pointer-events: none; }
.experience.is-playing .shot-hud { opacity: 1; visibility: visible; transform: translate(-50%,0); pointer-events: auto; }
.experience.is-scrubbing .shot-hud { opacity: 1; visibility: visible; transform: translate(-50%,0); pointer-events: none; }
.experience.is-scrubbing .shot-hud button { display: none; }
.shot-hud > div:first-child { display: flex; justify-content: space-between; margin-bottom: 10px; }
.shot-hud span, .shot-hud b, .shot-hud button { font: 8px var(--mono); letter-spacing: .13em; }
.shot-hud span { color: var(--acid); }.shot-hud b { color: #d7dad4; }
.shot-hud button { float: right; margin-top: 13px; border: 0; border-bottom: 1px solid #838982; padding: 3px 0; background: transparent; color: #b0b4ae; cursor: pointer; }

.bottom-ui { position: absolute; z-index: 55; left: max(24px, 3vw); right: max(24px, 3vw); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; }
.coordinates { display: grid; gap: 5px; }.coordinates span { color: #747a74; font: 7px var(--mono); letter-spacing: .13em; }.coordinates b { font: 8px var(--mono); letter-spacing: .13em; }
.scroll-hint { display: flex; gap: 10px; align-items: center; color: #aeb3ad; font: 8px var(--mono); letter-spacing: .14em; }
.scroll-hint i { color: var(--acid); font: normal 14px var(--mono); animation: drift 1.6s ease-in-out infinite; }
@keyframes drift { 50% { transform: translateY(5px); } }
.stop-count { justify-self: end; display: flex; align-items: baseline; gap: 5px; }.stop-count b { color: var(--acid); font: 20px var(--mono); }.stop-count span { color: #777d77; font: 8px var(--mono); }
.experience.is-playing .bottom-ui, .experience.is-playing .chapter-rail { opacity: .25; transition: opacity .3s; }

@media (max-width: 900px) {
  .archive-code { display: none; }
  .topbar { grid-template-columns: 1fr 1fr; }
  .intro-lockup { width: min(690px, 78vw); }
  .intro-side-note, .data-stamp, .technical-grid, .mass-readout, .force-diagram, .calibre-mark { display: none; }
  .story-card--left, .story-card--right, .story-card--bottom { left: 8vw; right: auto; top: 50%; bottom: auto; width: min(650px, 77vw); transform: translateY(-48%); }
  .story--chassis, .story--gun, .story--spade { background: linear-gradient(90deg, rgba(5,7,8,.86), rgba(5,7,8,.3) 75%, transparent); }
  .gun-number { right: 2vw; top: 22vh; }
  .chapter-rail { right: 18px; }
}

@media (orientation: portrait) {
  .sequence-frame--main { object-fit: contain; }
  .sequence-frame--blur { opacity: .95; filter: blur(26px) brightness(.3); }
  .visual__shade { background: linear-gradient(0deg, rgba(5,7,8,.92) 0, rgba(5,7,8,.24) 52%, rgba(5,7,8,.58) 100%); }
}

@media (max-width: 620px) {
  .topbar { left: 18px; right: 18px; }
  .brand span { display: none; }
  .story { padding: 105px 58px 84px 22px; }
  .intro-lockup { width: 100%; }
  .intro-lockup .eyebrow { max-width: 240px; }
  h1 { font-size: clamp(82px, 30vw, 130px); }
  h1 small { font-size: 23px; }
  .intro-lockup h2 { margin-top: 28px; font-size: clamp(38px, 12vw, 57px); }
  .lede { font-size: 12px; line-height: 1.75; }
  .intro-stats { gap: 18px; }
  .intro-stats b { font-size: 27px; }.intro-stats span { font-size: 6px; }
  .story-advance { margin-top: 24px; }
  .story-card--left, .story-card--right, .story-card--bottom, .story-card--wide { left: 22px; top: 50%; width: calc(100vw - 80px); transform: translateY(-48%); }
  .chapter { margin-bottom: 17px; font-size: 8px; }
  .chapter span { width: 25px; height: 25px; }
  .story-card h2 { font-size: clamp(43px, 13vw, 64px); }
  .body-copy { margin-top: 20px; font-size: 12px; line-height: 1.75; }
  .body-copy--dim { display: none; }
  .component-list { margin-top: 22px; }
  .component-list div { grid-template-columns: 22px 90px 1fr; gap: 7px; min-height: 45px; }.component-list p { font-size: 9px; }
  .spade-functions { grid-template-columns: 1fr; margin-top: 22px; }
  .spade-functions div { display: grid; grid-template-columns: 25px 100px 1fr; gap: 5px; align-items: center; padding: 9px 0; }
  .spade-functions div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .spade-functions span { margin-top: 0; font-size: 11px; }.spade-functions p { margin: 0; font-size: 8px; }
  .gun-number { font-size: 50vw; top: 20vh; }
  .outro-copy { width: calc(100vw - 56px); }.outro-copy h2 { font-size: clamp(40px, 11.8vw, 58px); }.outro-copy > p:not(.eyebrow) { font-size: 12px; line-height: 1.75; }
  .chapter-rail { right: 10px; gap: 9px; }.chapter-rail button span, .rail-caption { display: none; }
  .bottom-ui { left: 18px; right: 18px; }.coordinates { display: none; }.bottom-ui { grid-template-columns: 1fr auto; }.scroll-hint { justify-self: start; }.stop-count { grid-column: 2; }
  .shot-hud { width: calc(100vw - 64px); bottom: 11vh; }
}

@media (max-height: 720px) and (min-width: 700px) {
  .story { padding-top: 90px; padding-bottom: 70px; }
  .intro-lockup h2 { margin-top: 22px; }
  .lede { margin-top: 18px; line-height: 1.65; }
  .intro-stats { margin-top: 21px; }.story-advance { margin-top: 21px; }
  .body-copy { margin-top: 18px; line-height: 1.65; }.component-list, .spade-functions { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
/* T92 revision: factual copy, steel/olive palette, and subject-safe type zones */
:root {
  --ink: #e9e5da;
  --muted: #9da19e;
  --acid: #b78d55;
  --orange: #8e4934;
  --black: #0b0d0e;
  --panel: rgba(10, 13, 14, .86);
  --line: rgba(214, 207, 190, .22);
}

body { background: var(--black); }
.visual__shade {
  background: linear-gradient(90deg, rgba(7, 10, 11, .38) 0%, rgba(7, 10, 11, .05) 52%, rgba(7, 10, 11, .2) 100%);
}
.experience.is-playing .visual__shade {
  background: linear-gradient(90deg, rgba(7, 10, 11, .08), rgba(7, 10, 11, .02) 52%, rgba(7, 10, 11, .1));
}
.visual__vignette { box-shadow: inset 0 0 12vw 2vw rgba(0, 0, 0, .48); }

.intro-lockup {
  width: min(390px, 34vw);
  padding: 26px 28px 28px;
  background: linear-gradient(90deg, rgba(8, 10, 11, .9), rgba(8, 10, 11, .6));
  border-left: 2px solid var(--acid);
}
.intro-lockup .eyebrow { margin-bottom: 18px; }
h1 { font-size: clamp(92px, 9vw, 138px); }
.intro-lockup h2 { margin-top: 28px; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.02; }
.intro-lockup .lede { margin-top: 20px; font-size: 13px; line-height: 1.75; }
.intro-stats { margin-top: 25px; gap: 25px; }
.intro-stats b { font-size: clamp(25px, 2.5vw, 37px); }
.story-advance { margin-top: 24px; min-width: 185px; border-color: rgba(183, 141, 85, .76); }
.intro-side-note { display: none; }

.story--history .story-card--left {
  left: 5vw;
  top: auto;
  bottom: 13vh;
  width: min(405px, 33vw);
  padding: 24px 27px;
  transform: none;
  background: linear-gradient(90deg, rgba(8, 10, 11, .93), rgba(8, 10, 11, .68));
  border-left: 2px solid var(--acid);
}
.story--spade .story-card--left {
  left: auto;
  right: 5vw;
  top: 15vh;
  bottom: auto;
  width: min(430px, 35vw);
  padding: 24px 27px;
  transform: none;
  background: linear-gradient(90deg, rgba(8, 10, 11, .88), rgba(8, 10, 11, .62));
  border-left: 0;
  border-right: 2px solid var(--acid);
}
.story--chassis .story-card--right {
  right: 5vw;
  top: 15vh;
  width: min(355px, 29vw);
  padding: 24px 27px;
  transform: none;
  background: linear-gradient(90deg, rgba(8, 10, 11, .88), rgba(8, 10, 11, .62));
  border-right: 2px solid var(--acid);
}
.story--gun .story-card--bottom {
  left: 5vw;
  bottom: 13vh;
  width: min(410px, 34vw);
  padding: 24px 27px;
  background: linear-gradient(90deg, rgba(8, 10, 11, .93), rgba(8, 10, 11, .68));
  border-left: 2px solid var(--acid);
}
.story--spade .story-card--wide { width: min(430px, 35vw); }
.story-card h2 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.body-copy { margin-top: 20px; font-size: 13px; line-height: 1.8; text-shadow: none; }
.body-copy--dim { margin-top: 10px; }
.chapter { margin-bottom: 17px; }
.chapter span { border-color: rgba(183, 141, 85, .65); }
.fact-line { margin-top: 22px; }
.technical-grid { opacity: .09; }
.component-list { margin-top: 22px; }
.component-list div { grid-template-columns: 25px 108px 1fr; min-height: 48px; }
.component-list b { color: var(--ink); font: 700 10px var(--mono); }
.component-list p { font-size: 10px; }
.gun-tags { margin-top: 20px; gap: 6px; }
.gun-tags span { padding: 7px 8px; border-color: rgba(214, 207, 190, .23); }
.spade-functions { margin-top: 22px; }
.spade-functions div { padding-top: 12px; padding-bottom: 12px; }
.force-diagram, .mass-readout, .calibre-mark, .gun-number, .data-stamp { display: none; }
.story--chassis .visual__shade,
.story--spade { background: none; }

.story--outro {
  display: block;
  padding-top: 18vh;
  text-align: left;
  background: linear-gradient(90deg, rgba(7, 10, 11, .48), transparent 62%);
}
.outro-copy {
  width: min(430px, 35vw);
  margin-left: 7vw;
  padding: 25px 28px;
  background: linear-gradient(90deg, rgba(8, 10, 11, .9), rgba(8, 10, 11, .58));
  border-left: 2px solid var(--acid);
}
.outro-copy h2 { font-size: clamp(38px, 4.4vw, 62px); }
.outro-copy > p:not(.eyebrow) { width: auto; margin: 20px 0 0; font-size: 13px; line-height: 1.8; }
.outro-meta { justify-content: flex-start; margin-top: 22px; gap: 6px; }
.outro-meta span { padding: 7px 8px; font-size: 7px; }
.replay-button { margin-top: 24px; min-width: 165px; }

@media (max-width: 900px) {
  .intro-lockup { width: min(430px, 52vw); }
  .story--history .story-card--left, .story--chassis .story-card--right, .story--gun .story-card--bottom, .story--spade .story-card--left {
    left: 6vw; right: auto; top: auto; bottom: 12vh; width: min(430px, 52vw); transform: none;
  }
  .story--spade .story-card--left { border-right: 0; border-left: 2px solid var(--acid); }
  .story--chassis .story-card--right { border-right: 0; border-left: 2px solid var(--acid); }
  .story--outro { padding-top: 17vh; }
  .outro-copy { width: min(430px, 52vw); margin-left: 6vw; }
}

@media (max-width: 620px) {
  .visual__shade { background: linear-gradient(0deg, rgba(7, 10, 11, .52), rgba(7, 10, 11, .06) 60%, rgba(7, 10, 11, .3)); }
  .intro-lockup { width: calc(100vw - 72px); padding: 18px 18px 20px; }
  h1 { font-size: clamp(72px, 24vw, 104px); }
  .intro-lockup h2 { margin-top: 20px; font-size: 36px; }
  .intro-lockup .lede { font-size: 11px; line-height: 1.7; }
  .intro-stats { margin-top: 19px; gap: 16px; }
  .intro-stats b { font-size: 24px; }
  .story--history .story-card--left, .story--chassis .story-card--right, .story--gun .story-card--bottom, .story--spade .story-card--left {
    left: 22px; right: 48px; top: auto; bottom: 12vh; width: auto; padding: 17px 18px; transform: none;
  }
  .story--spade .story-card--left { border-right: 0; border-left: 2px solid var(--acid); }
  .story-card h2 { font-size: 42px; }
  .body-copy { margin-top: 16px; font-size: 11px; line-height: 1.7; }
  .component-list div { grid-template-columns: 22px 90px 1fr; min-height: 42px; }
  .component-list p { font-size: 8px; }
  .spade-functions { margin-top: 16px; }
  .spade-functions div { padding: 8px 0; }
  .spade-functions span { font-size: 10px; }
  .spade-functions p { font-size: 8px; }
  .story--outro { padding: 18vh 22px 84px; }
  .outro-copy { width: calc(100vw - 70px); margin-left: 0; padding: 18px; }
  .outro-copy h2 { font-size: 42px; }
  .outro-copy > p:not(.eyebrow) { font-size: 11px; line-height: 1.7; }
}



/* Standalone chapter recall page: appended without changing the existing experience UI. */
.replay-page {
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow: hidden;
  background: #0a0d0e;
  color: #e9e5da;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity .55s var(--ease), visibility .55s, transform .7s var(--ease);
}
.replay-page.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.replay-page__grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(183,141,85,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(183,141,85,.18) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 52% 46%, #000, transparent 78%);
}
.replay-page__shell {
  position: relative;
  z-index: 1;
  width: min(1420px, calc(100vw - 96px));
  height: 100%;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 76px) 0 clamp(28px, 4vw, 54px);
  display: flex;
  flex-direction: column;
}
.replay-page__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.replay-page__eyebrow {
  margin: 0;
  color: var(--acid);
  font: 9px var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.replay-page__header h2 {
  margin: 14px 0 0;
  font: 900 clamp(36px, 5.5vw, 82px)/.88 var(--sans);
  letter-spacing: -.06em;
}
.replay-page__close,
.replay-viewer__back {
  border: 1px solid rgba(233,229,218,.34);
  background: rgba(10,13,14,.62);
  color: #d6d2c7;
  padding: 12px 14px;
  cursor: pointer;
  font: 9px var(--mono);
  letter-spacing: .13em;
  transition: .3s var(--ease);
}
.replay-page__close span,
.replay-viewer__back span { color: var(--acid); margin-left: 14px; font-size: 14px; }
.replay-page__close:hover,
.replay-viewer__back:hover { border-color: var(--acid); color: var(--acid); }
.replay-cards {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.1fr 1fr 1.3fr;
  align-items: end;
  gap: clamp(8px, 1vw, 18px);
  flex: 1;
  min-height: 0;
  padding: clamp(30px, 5vh, 68px) 0 20px;
}
.replay-card {
  position: relative;
  height: min(49vh, 450px);
  min-height: 230px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(233,229,218,.22);
  border-radius: 2px;
  background: #121617;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transform: translateY(0);
  transition: transform .55s var(--ease), border-color .35s, box-shadow .35s;
}
.replay-card--wide { height: min(56vh, 510px); }
.replay-card--raised { transform: translateY(-24px); }
.replay-card:hover,
.replay-card:focus-visible {
  z-index: 2;
  border-color: var(--acid);
  box-shadow: 0 22px 48px rgba(0,0,0,.42);
  transform: translateY(-18px) scale(1.025);
}
.replay-card--raised:hover,
.replay-card--raised:focus-visible { transform: translateY(-42px) scale(1.025); }
.replay-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .5s;
}
.replay-card:hover img,
.replay-card:focus-visible img { transform: scale(1.07); filter: saturate(1.12) contrast(1.04); }
.replay-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,7,8,.05) 32%, rgba(5,7,8,.86) 100%);
}
.replay-card__meta {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 17px;
  display: grid;
  gap: 7px;
}
.replay-card__meta b {
  color: var(--acid);
  font: 700 22px var(--mono);
}
.replay-card__meta small {
  color: #eee9dd;
  font: 10px var(--mono);
  letter-spacing: .08em;
}
.replay-page__hint {
  align-self: flex-end;
  margin: 0;
  color: #8d928b;
  font: 9px var(--mono);
  letter-spacing: .14em;
}
.replay-viewer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 30vw);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(28px, 5vw, 72px);
  background: rgba(7,9,10,.97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.97);
  transition: opacity .45s var(--ease), visibility .45s, transform .55s var(--ease);
}
.replay-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}
.replay-viewer__back {
  position: absolute;
  top: clamp(24px, 4vw, 54px);
  right: clamp(24px, 4vw, 54px);
  z-index: 2;
}
.replay-viewer__media {
  position: relative;
  width: 100%;
  height: min(78vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(233,229,218,.25);
  background: #050708;
}
.replay-viewer__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050708;
}
.replay-viewer__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 12vw 2vw rgba(0,0,0,.38);
}
.replay-viewer__info { align-self: end; padding-bottom: 6vh; }
.replay-viewer__info h3 {
  margin: 18px 0 34px;
  color: #eee9dd;
  font: 900 clamp(38px, 5vw, 74px)/.92 var(--sans);
  letter-spacing: -.07em;
}
.replay-viewer__play {
  min-width: 185px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  border: 1px solid var(--acid);
  background: rgba(183,141,85,.07);
  color: #e9e5da;
  padding: 14px 16px;
  cursor: pointer;
  font: 10px var(--mono);
  letter-spacing: .12em;
  transition: .3s var(--ease);
}
.replay-viewer__play i { color: var(--acid); font-style: normal; font-size: 16px; }
.replay-viewer__play:hover { background: var(--acid); color: #0b0d0e; }
.replay-viewer__play:hover i { color: #0b0d0e; }
.replay-viewer.is-playing .replay-viewer__play span::after { content: ' / 播放中'; color: var(--acid); }

@media (max-width: 900px) {
  .replay-page__shell { width: min(100% - 44px, 680px); }
  .replay-cards { grid-template-columns: repeat(2, 1fr); overflow: auto; padding-top: 34px; }
  .replay-card, .replay-card--wide { height: 32vh; min-height: 190px; }
  .replay-card--raised, .replay-card--raised:hover, .replay-card--raised:focus-visible { transform: none; }
  .replay-viewer { grid-template-columns: 1fr; padding: 80px 24px 28px; gap: 20px; overflow: auto; }
  .replay-viewer__media { height: 54vh; min-height: 260px; }
  .replay-viewer__info { padding-bottom: 0; }
  .replay-viewer__info h3 { margin: 12px 0 22px; }
}
@media (max-width: 520px) {
  .replay-page__header h2 { font-size: 38px; }
  .replay-page__close { padding: 10px; font-size: 8px; }
  .replay-cards { gap: 8px; }
  .replay-card, .replay-card--wide { min-height: 155px; height: 25vh; }
  .replay-card__meta { left: 11px; right: 11px; bottom: 11px; gap: 4px; }
  .replay-card__meta b { font-size: 16px; }
  .replay-card__meta small { font-size: 8px; }
}