:root {
	--color-black: #090d0e;
	--color-ink: #101719;
	--color-panel: #151e20;
	--color-steel: #263235;
	--color-mist: #a9b5b4;
	--color-paper: #e2e8e5;
	--color-cyan: #4fe1c1;
	--color-cyan-dim: #1c8f7d;
	--color-red: #e64c4c;
	--color-line: rgba(226, 232, 229, 0.19);
	--color-line-strong: rgba(79, 225, 193, 0.58);
	--font-main: "Noto Sans TC", sans-serif;
	--rail-width: 112px;
	--container: 1420px;
	--section-space: 150px;
	--side-space: clamp(28px, 5vw, 82px);
	--transition-fast: 220ms ease;
	--transition-main: 620ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-black); }
body { margin: 0; overflow-x: hidden; background: var(--color-black); color: var(--color-paper); font-family: var(--font-main); font-size: 17px; line-height: 1.8; }
body.is-menu-open { overflow: hidden; }

img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }

button { color: inherit; font: inherit; }

::selection { background: var(--color-cyan); color: var(--color-black); }

.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 9px 14px; background: var(--color-cyan); color: var(--color-black); transform: translateY(-160%); transition: transform var(--transition-fast); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; min-height: 900px; background: var(--color-black); border-bottom: 1px solid var(--color-line); }
.site-header::after { position: absolute; right: 0; bottom: 0; left: var(--rail-width); height: 1px; background: var(--color-cyan); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.2, 0.75, 0.25, 1); }
.site-header.is-active::after { transform: scaleX(1); }
.site-header-rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; display: flex; width: var(--rail-width); flex-direction: column; justify-content: space-between; padding: 25px 18px; background: rgba(9, 13, 14, 0.96); border-right: 1px solid var(--color-line); transition: background var(--transition-fast); }
.site-header.is-scrolled .site-header-rail { background: rgba(9, 13, 14, 0.99); }
.site-header-mark { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-header-symbol { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--color-cyan); color: var(--color-cyan); font-size: 15px; font-weight: 800; letter-spacing: 0.08em; }
.site-header-signal { display: flex; height: 34px; align-items: center; gap: 3px; }
.site-header-signal span { display: block; width: 2px; height: 20%; background: var(--color-cyan); transition: height 460ms ease; }
.site-header.is-active .site-header-signal span:nth-child(1) { height: 24%; transition-delay: 80ms; }
.site-header.is-active .site-header-signal span:nth-child(2) { height: 68%; transition-delay: 150ms; }
.site-header.is-active .site-header-signal span:nth-child(3) { height: 42%; transition-delay: 220ms; }
.site-header.is-active .site-header-signal span:nth-child(4) { height: 86%; transition-delay: 290ms; }
.site-header.is-active .site-header-signal span:nth-child(5) { height: 35%; transition-delay: 360ms; }
.site-header-nav { display: flex; flex-direction: column; gap: 4px; }
.site-header-nav a { position: relative; display: block; padding: 10px 0 10px 18px; color: var(--color-mist); font-size: 14px; line-height: 1.35; letter-spacing: 0.08em; writing-mode: vertical-rl; transition: color var(--transition-fast); }
.site-header-nav a::before { position: absolute; top: 50%; left: 0; width: 7px; height: 1px; background: var(--color-line); content: ""; transition: width var(--transition-fast), background var(--transition-fast); }
.site-header-nav a:hover, .site-header-nav a:focus-visible, .site-header-nav a.is-current { color: var(--color-cyan); }
.site-header-nav a.is-current::before { width: 13px; background: var(--color-cyan); }
.site-header-coordinate { color: var(--color-mist); font-size: 12px; line-height: 1.5; letter-spacing: 0.08em; writing-mode: vertical-rl; }
.site-header-menu { display: none; border: 0; background: transparent; cursor: pointer; }
.site-header-menu-line { display: block; width: 27px; height: 1px; margin: 6px 0; background: var(--color-paper); transition: transform var(--transition-fast), opacity var(--transition-fast); }
.site-header-hero { position: relative; min-height: 900px; margin-left: var(--rail-width); overflow: hidden; }
.site-header-map { position: absolute; inset: 0; }
.site-header-map img { height: 100%; object-fit: cover; object-position: 56% center; filter: grayscale(1) contrast(1.18) brightness(0.5); }
.site-header-map::after { position: absolute; inset: 0; background: rgba(4, 8, 9, 0.34); content: ""; }
.site-header-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(226, 232, 229, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(226, 232, 229, 0.07) 1px, transparent 1px); background-size: 8.333% 12.5%; opacity: 0.72; }
.site-header-grid::before { position: absolute; top: 0; bottom: 0; left: 41.666%; width: 1px; background: var(--color-cyan); content: ""; opacity: 0.48; }
.site-header-grid::after { position: absolute; top: 62.5%; right: 0; left: 0; height: 1px; background: var(--color-red); content: ""; opacity: 0.64; }
.site-header-wave { position: absolute; top: 19%; right: 4%; left: 7%; z-index: 2; height: 48%; overflow: visible; }
.site-header-wave polyline { fill: none; stroke: var(--color-cyan); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: bevel; vector-effect: non-scaling-stroke; stroke-dasharray: 1700; stroke-dashoffset: 1700; transition: stroke-dashoffset 1.9s cubic-bezier(0.2, 0.75, 0.25, 1) 300ms; }
.site-header.is-active .site-header-wave polyline { stroke-dashoffset: 0; }
.site-header-wave circle { fill: var(--color-black); stroke: var(--color-red); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 300ms ease 1.8s, transform 500ms ease 1.8s; transform: scale(1.8); }
.site-header.is-active .site-header-wave circle { opacity: 1; transform: scale(1); }
.site-header-primary { position: relative; z-index: 4; display: grid; min-height: 900px; grid-template-columns: minmax(320px, 0.82fr) minmax(480px, 1.7fr) minmax( 230px, 0.62fr ); grid-template-rows: auto 1fr auto; }
.site-header-brand { grid-column: 1 / 3; padding: 35px var(--side-space); border-bottom: 1px solid var(--color-line); }
.site-header-brandline { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header-name { color: var(--color-paper); font-size: 15px; font-weight: 700; letter-spacing: 0.16em; }
.site-header-status { display: flex; align-items: center; gap: 11px; color: var(--color-mist); font-size: 13px; letter-spacing: 0.08em; }
.site-header-status::before { display: block; width: 8px; height: 8px; background: var(--color-red); content: ""; }
.site-header-title { align-self: end; grid-column: 1 / 3; padding: 72px var(--side-space) 58px; }
.site-header-title h1 { max-width: 860px; margin: 0; font-size: clamp(38px, 5vw, 68px); font-weight: 700; line-height: 1.14; letter-spacing: -0.025em; }
.site-header-title h1 span { display: block; margin-top: 14px; color: var(--color-cyan); font-size: 0.39em; font-weight: 500; letter-spacing: 0.16em; line-height: 1.4; }
.site-header-title p { max-width: 670px; margin: 28px 0 0; color: var(--color-paper); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.85; }
.site-header-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.site-header-actions a { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid var(--color-cyan); background: var(--color-cyan); color: var(--color-black); font-size: 15px; font-weight: 700; letter-spacing: 0.05em; transition: background var(--transition-fast), color var(--transition-fast); }
.site-header-actions a:last-child { background: transparent; color: var(--color-paper); border-color: var(--color-line); }
.site-header-actions a:hover, .site-header-actions a:focus-visible { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-black); }
.site-header-legend { display: flex; grid-column: 3; grid-row: 1 / 4; flex-direction: column; justify-content: space-between; padding: 34px 28px; border-left: 1px solid var(--color-line); background: rgba(9, 13, 14, 0.72); }
.site-header-legend-title { margin: 0; color: var(--color-mist); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; }
.site-header-frequency { margin-top: 28px; }
.site-header-frequency-row { display: grid; grid-template-columns: 42px 1fr 32px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-line); color: var(--color-mist); font-size: 12px; }
.site-header-frequency-row strong { color: var(--color-paper); font-weight: 500; }
.site-header-frequency-meter { display: flex; height: 20px; align-items: center; gap: 3px; }
.site-header-frequency-meter i { display: block; width: 2px; height: 12%; background: var(--color-cyan); opacity: 0.2; transition: height 500ms ease, opacity 500ms ease; }
.site-header.is-active .site-header-frequency-row:nth-child(1) i:nth-child(2), .site-header.is-active .site-header-frequency-row:nth-child(1) i:nth-child(4), .site-header.is-active .site-header-frequency-row:nth-child(1) i:nth-child(7) { height: 82%; opacity: 1; }
.site-header.is-active .site-header-frequency-row:nth-child(2) i:nth-child(1), .site-header.is-active .site-header-frequency-row:nth-child(2) i:nth-child(5), .site-header.is-active .site-header-frequency-row:nth-child(2) i:nth-child(8) { height: 58%; opacity: 0.82; }
.site-header.is-active .site-header-frequency-row:nth-child(3) i:nth-child(3), .site-header.is-active .site-header-frequency-row:nth-child(3) i:nth-child(6), .site-header.is-active .site-header-frequency-row:nth-child(3) i:nth-child(9) { height: 92%; opacity: 1; background: var(--color-red); }
.site-header-alert { padding-top: 25px; border-top: 1px solid var(--color-red); }
.site-header-alert strong { display: block; margin-bottom: 8px; color: var(--color-red); font-size: 13px; letter-spacing: 0.08em; }
.site-header-alert p { margin: 0; color: var(--color-mist); font-size: 13px; line-height: 1.7; }

main { margin-left: var(--rail-width); }
section { position: relative; }

.section-shell { width: min(100%, var(--container)); margin: 0 auto; padding-right: var(--side-space); padding-left: var(--side-space); }
.section-index { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; color: var(--color-cyan); font-size: 13px; font-weight: 600; letter-spacing: 0.13em; }
.section-index::after { display: block; width: 60px; height: 1px; background: var(--color-cyan); content: ""; }
.section-heading { max-width: 780px; margin: 0; font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; line-height: 1.28; letter-spacing: -0.018em; }
.section-intro { max-width: 660px; margin: 24px 0 0; color: var(--color-mist); line-height: 1.85; }

.reveal-line { position: relative; }
.reveal-line::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--color-cyan); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.reveal-line.is-visible::after { transform: scaleX(1); }

#tracking-method { padding: var(--section-space) 0; background: var(--color-paper); color: var(--color-black); }
#tracking-method .section-index { color: var(--color-cyan-dim); }
#tracking-method .section-index::after { background: var(--color-cyan-dim); }
#tracking-method .section-intro { color: #4c5858; }
#tracking-method .tracking-layout { display: grid; grid-template-columns: minmax(260px, 0.7fr) minmax(520px, 1.6fr); gap: clamp(60px, 8vw, 130px); }
#tracking-method .tracking-sticky { position: sticky; top: 48px; align-self: start; }
#tracking-method .tracking-note { max-width: 310px; margin: 54px 0 0 auto; padding: 18px 0; border-top: 1px solid rgba(9, 13, 14, 0.35); border-bottom: 1px solid rgba(9, 13, 14, 0.35); color: #4c5858; font-size: 14px; line-height: 1.8; }
#tracking-method .signal-list { border-top: 1px solid rgba(9, 13, 14, 0.34); }
#tracking-method .signal-entry { display: grid; grid-template-columns: 86px minmax(190px, 0.78fr) minmax(220px, 1fr); gap: 28px; align-items: center; min-height: 205px; padding: 30px 0; border-bottom: 1px solid rgba(9, 13, 14, 0.34); }
#tracking-method .signal-code { align-self: start; color: var(--color-cyan-dim); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; }
#tracking-method .signal-copy h3 { margin: 0 0 13px; font-size: clamp(22px, 2vw, 29px); line-height: 1.35; }
#tracking-method .signal-copy p { margin: 0; color: #4c5858; font-size: 15px; }
#tracking-method .signal-graph { position: relative; display: flex; height: 96px; align-items: center; gap: 4px; padding: 12px 0; border-top: 1px solid rgba(9, 13, 14, 0.18); border-bottom: 1px solid rgba(9, 13, 14, 0.18); }
#tracking-method .signal-graph::before { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: rgba(9, 13, 14, 0.18); content: ""; }
#tracking-method .signal-graph span { position: relative; z-index: 1; display: block; width: 3px; height: 10%; background: var(--color-cyan-dim); transition: height 600ms cubic-bezier(0.2, 0.75, 0.25, 1); }
#tracking-method .signal-entry.is-visible:nth-child(1) .signal-graph span:nth-child(3n) { height: 74%; }
#tracking-method .signal-entry.is-visible:nth-child(1) .signal-graph span:nth-child(5n) { height: 42%; }
#tracking-method .signal-entry.is-visible:nth-child(2) .signal-graph span:nth-child(2n) { height: 58%; }
#tracking-method .signal-entry.is-visible:nth-child(2) .signal-graph span:nth-child(7n) { height: 88%; }
#tracking-method .signal-entry.is-visible:nth-child(3) .signal-graph span:nth-child(4n) { height: 82%; background: var(--color-red); }
#tracking-method .signal-entry.is-visible:nth-child(3) .signal-graph span:nth-child(3n) { height: 36%; }

#city-layers { padding: var(--section-space) 0 0; background: var(--color-ink); }
#city-layers .city-heading-row { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 0.8fr); gap: 90px; align-items: end; padding-bottom: 64px; }
#city-layers .city-heading-row .section-intro { margin: 0; }
#city-layers .city-panorama { position: relative; min-height: 650px; overflow: hidden; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
#city-layers .city-panorama img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 45%; filter: grayscale(1) contrast(1.18) brightness(0.52); transition: object-position 900ms ease; }
#city-layers .city-panorama.is-visible img { object-position: center 52%; }
#city-layers .city-panorama::after { position: absolute; inset: 0; background: rgba(9, 13, 14, 0.29); content: ""; }
#city-layers .city-axis { position: absolute; inset: 0; z-index: 2; }
#city-layers .city-axis-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(226, 232, 229, 0.22); }
#city-layers .city-axis-line:nth-child(1) { left: 19%; }
#city-layers .city-axis-line:nth-child(2) { left: 48%; background: rgba(79, 225, 193, 0.6); }
#city-layers .city-axis-line:nth-child(3) { left: 76%; }
#city-layers .city-hotspot { position: absolute; z-index: 3; max-width: 230px; padding-left: 23px; color: var(--color-paper); }
#city-layers .city-hotspot::before { position: absolute; top: 9px; left: 0; width: 9px; height: 9px; border: 1px solid var(--color-cyan); background: var(--color-black); content: ""; }
#city-layers .city-hotspot::after { position: absolute; top: 13px; right: calc(100% - 1px); width: 0; height: 1px; background: var(--color-cyan); content: ""; transition: width 760ms cubic-bezier(0.2, 0.75, 0.25, 1); }
#city-layers .city-panorama.is-visible .city-hotspot::after { width: 68px; }
#city-layers .city-hotspot strong { display: block; font-size: 14px; letter-spacing: 0.08em; }
#city-layers .city-hotspot span { display: block; margin-top: 7px; color: var(--color-mist); font-size: 13px; line-height: 1.65; }
#city-layers .city-hotspot-a { top: 24%; left: 22%; }
#city-layers .city-hotspot-b { top: 55%; left: 51%; }
#city-layers .city-hotspot-c { top: 35%; left: 79%; }
#city-layers .city-alert { position: absolute; right: 4%; bottom: 8%; z-index: 3; padding: 12px 15px; border-left: 3px solid var(--color-red); background: rgba(9, 13, 14, 0.9); color: var(--color-mist); font-size: 13px; line-height: 1.6; }
#city-layers .layer-list { display: grid; grid-template-columns: repeat(4, 1fr); }
#city-layers .layer-entry { min-height: 230px; padding: 36px clamp(22px, 3vw, 48px); border-right: 1px solid var(--color-line); }
#city-layers .layer-entry:last-child { border-right: 0; }
#city-layers .layer-entry small { display: block; color: var(--color-cyan); font-size: 12px; letter-spacing: 0.12em; }
#city-layers .layer-entry h3 { margin: 20px 0 12px; font-size: 21px; line-height: 1.45; }
#city-layers .layer-entry p { margin: 0; color: var(--color-mist); font-size: 14px; line-height: 1.75; }

#missions { padding: var(--section-space) 0; background: #cfd7d4; color: var(--color-black); }
#missions .section-index { color: #176f61; }
#missions .section-index::after { background: #176f61; }
#missions .mission-layout { display: grid; grid-template-columns: minmax(460px, 1.25fr) minmax(310px, 0.72fr); gap: clamp(45px, 7vw, 110px); align-items: start; }
#missions .mission-visual { position: relative; min-height: 720px; overflow: hidden; background: var(--color-black); }
#missions .mission-visual img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.12) brightness(0.58); }
#missions .mission-visual::after { position: absolute; inset: 0; background-image: linear-gradient(rgba(79, 225, 193, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 225, 193, 0.16) 1px, transparent 1px); background-size: 25% 16.666%; content: ""; }
#missions .mission-target { position: absolute; z-index: 2; width: 76px; height: 76px; border: 1px solid var(--color-red); opacity: 0; transform: scale(1.35); transition: opacity 500ms ease 500ms, transform 650ms cubic-bezier(0.2, 0.75, 0.25, 1) 500ms; }
#missions .mission-target::before, #missions .mission-target::after { position: absolute; background: var(--color-red); content: ""; }
#missions .mission-target::before { top: 50%; right: -26px; left: -26px; height: 1px; }
#missions .mission-target::after { top: -26px; bottom: -26px; left: 50%; width: 1px; }
#missions .mission-visual.is-visible .mission-target { opacity: 1; transform: scale(1); }
#missions .mission-target-a { top: 25%; left: 29%; }
#missions .mission-target-b { right: 18%; bottom: 22%; width: 46px; height: 46px; border-color: var(--color-cyan); transition-delay: 760ms; }
#missions .mission-target-b::before, #missions .mission-target-b::after { background: var(--color-cyan); }
#missions .mission-caption { position: absolute; right: 0; bottom: 0; z-index: 3; width: min(370px, 70%); padding: 24px 28px; background: var(--color-black); color: var(--color-paper); }
#missions .mission-caption strong { display: block; margin-bottom: 9px; color: var(--color-cyan); font-size: 13px; letter-spacing: 0.1em; }
#missions .mission-caption span { color: var(--color-mist); font-size: 14px; line-height: 1.7; }
#missions .mission-copy { padding-top: 14px; }
#missions .mission-copy .section-intro { color: #44504f; }
#missions .case-list { margin-top: 55px; border-top: 1px solid rgba(9, 13, 14, 0.32); }
#missions .case-entry { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 21px; padding: 26px 0; border-bottom: 1px solid rgba(9, 13, 14, 0.32); }
#missions .case-entry::before { position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--color-red); content: ""; transition: width 700ms cubic-bezier(0.2, 0.75, 0.25, 1); }
#missions .case-entry.is-visible::before { width: 60px; }
#missions .case-entry small { color: #176f61; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
#missions .case-entry h3 { margin: 0 0 9px; font-size: 20px; line-height: 1.45; }
#missions .case-entry p { margin: 0; color: #44504f; font-size: 14px; line-height: 1.75; }

#equipment { padding: var(--section-space) 0; background: var(--color-black); }
#equipment .equipment-heading { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(370px, 1fr); gap: 90px; align-items: end; margin-bottom: 70px; }
#equipment .equipment-heading .section-intro { margin: 0; }
#equipment .equipment-bench { display: grid; grid-template-columns: minmax(300px, 0.78fr) minmax(500px, 1.35fr); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
#equipment .equipment-image { position: relative; min-height: 680px; overflow: hidden; border-right: 1px solid var(--color-line); }
#equipment .equipment-image img { height: 100%; object-fit: cover; object-position: 58% center; filter: grayscale(1) contrast(1.18) brightness(0.62); }
#equipment .equipment-image::after { position: absolute; right: 0; bottom: 0; left: 0; height: 34%; background: rgba(9, 13, 14, 0.78); content: ""; }
#equipment .equipment-image-label { position: absolute; right: 25px; bottom: 25px; left: 25px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
#equipment .equipment-image-label strong { color: var(--color-cyan); font-size: 14px; letter-spacing: 0.08em; }
#equipment .equipment-image-label span { max-width: 260px; color: var(--color-mist); font-size: 13px; line-height: 1.65; text-align: right; }
#equipment .upgrade-list { display: flex; flex-direction: column; }
#equipment .upgrade-entry { display: grid; flex: 1; grid-template-columns: 74px minmax(180px, 0.75fr) minmax(220px, 1fr); gap: 26px; align-items: center; padding: 31px clamp(25px, 4vw, 56px); border-bottom: 1px solid var(--color-line); }
#equipment .upgrade-entry:last-child { border-bottom: 0; }
#equipment .upgrade-code { color: var(--color-cyan); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
#equipment .upgrade-entry h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.5; }
#equipment .upgrade-entry p { margin: 0; color: var(--color-mist); font-size: 14px; line-height: 1.75; }
#equipment .upgrade-state { display: flex; align-items: center; gap: 5px; margin-top: 18px; }
#equipment .upgrade-state i { display: block; width: 26px; height: 3px; background: var(--color-steel); transition: background 500ms ease; }
#equipment .upgrade-entry.is-visible .upgrade-state i:nth-child(-n + 2) { background: var(--color-cyan); }
#equipment .upgrade-entry:nth-child(2).is-visible .upgrade-state i:nth-child(-n + 3) { background: var(--color-cyan); }
#equipment .upgrade-entry:nth-child(3).is-visible .upgrade-state i:nth-child(-n + 4) { background: var(--color-red); }

#investigation { padding: var(--section-space) 0; background: #192225; }
#investigation .investigation-layout { display: grid; grid-template-columns: minmax(280px, 0.66fr) minmax(560px, 1.45fr); gap: clamp(55px, 8vw, 125px); }
#investigation .investigation-heading { align-self: start; }
#investigation .investigation-heading .section-intro { max-width: 440px; }
#investigation .investigation-sequence { border-top: 1px solid var(--color-line); }
#investigation .investigation-step { display: grid; grid-template-columns: 110px 1fr 145px; gap: 30px; align-items: start; padding: 33px 0; border-bottom: 1px solid var(--color-line); }
#investigation .investigation-step time { color: var(--color-cyan); font-size: 13px; letter-spacing: 0.09em; }
#investigation .investigation-step h3 { margin: 0 0 11px; font-size: 22px; line-height: 1.45; }
#investigation .investigation-step p { max-width: 560px; margin: 0; color: var(--color-mist); font-size: 15px; line-height: 1.8; }
#investigation .investigation-result { align-self: center; padding-left: 18px; border-left: 2px solid var(--color-cyan); color: var(--color-mist); font-size: 13px; line-height: 1.65; }
#investigation .investigation-step:last-child .investigation-result { border-color: var(--color-red); color: var(--color-paper); }

#final-signal { min-height: 700px; overflow: hidden; background: var(--color-black); }
#final-signal .final-image { position: absolute; inset: 0; }
#final-signal .final-image img { height: 100%; object-fit: cover; object-position: center 54%; filter: grayscale(1) contrast(1.2) brightness(0.39); transition: object-position 900ms ease; }
#final-signal.is-visible .final-image img { object-position: center 48%; }
#final-signal .final-image::after { position: absolute; inset: 0; background: rgba(4, 8, 9, 0.39); content: ""; }
#final-signal .final-axis { position: absolute; top: 0; bottom: 0; left: 57%; z-index: 2; width: 1px; background: var(--color-cyan); }
#final-signal .final-axis::before { position: absolute; top: 38%; left: -6px; width: 11px; height: 11px; border: 1px solid var(--color-red); background: var(--color-black); content: ""; }
#final-signal .final-shell { position: relative; z-index: 3; display: flex; min-height: 700px; align-items: flex-end; }
#final-signal .final-copy { width: min(760px, 68%); padding: 72px 0 78px; }
#final-signal .final-copy h2 { max-width: 700px; margin: 0; font-size: clamp(34px, 4.3vw, 59px); line-height: 1.23; letter-spacing: -0.02em; }
#final-signal .final-copy p { max-width: 590px; margin: 25px 0 0; color: var(--color-mist); }
#final-signal .final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
#final-signal .final-actions a { display: inline-flex; min-height: 52px; align-items: center; padding: 10px 21px; border: 1px solid var(--color-cyan); background: var(--color-cyan); color: var(--color-black); font-size: 15px; font-weight: 700; transition: background var(--transition-fast), color var(--transition-fast); }
#final-signal .final-actions a:last-child { background: transparent; color: var(--color-paper); border-color: var(--color-line); }
#final-signal .final-actions a:hover, #final-signal .final-actions a:focus-visible { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-black); }

footer { margin-left: var(--rail-width); background: var(--color-cyan); color: var(--color-black); }
footer .footer-shell { width: min(100%, var(--container)); margin: 0 auto; padding: 48px var(--side-space) 35px; }
footer .footer-brand { display: grid; grid-template-columns: minmax(340px, 1.2fr) minmax(300px, 0.8fr); gap: 70px; align-items: end; padding-bottom: 45px; border-bottom: 1px solid rgba(9, 13, 14, 0.38); }
footer .footer-brand strong { display: block; font-size: clamp(30px, 4vw, 55px); line-height: 1.18; letter-spacing: -0.02em; }
footer .footer-brand p { max-width: 470px; margin: 0; font-size: 15px; line-height: 1.8; }
footer .footer-axis { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 28px; }
footer .footer-nav { display: flex; flex-wrap: wrap; gap: 12px 30px; }
footer .footer-nav a { font-size: 14px; font-weight: 600; border-bottom: 1px solid transparent; transition: border-color var(--transition-fast); }
footer .footer-nav a:hover, footer .footer-nav a:focus-visible { border-color: var(--color-black); }
footer .footer-note { font-size: 12px; letter-spacing: 0.07em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-red); outline-offset: 4px; }

@media (max-width: 1280px) {
	:root { --rail-width: 88px; --section-space: 125px; }
	.site-header-rail { padding-right: 13px; padding-left: 13px; }
	.site-header-symbol { width: 38px; height: 38px; }
	.site-header-primary { grid-template-columns: minmax(300px, 0.82fr) minmax(380px, 1.5fr) 225px; }
	.site-header-legend { padding-right: 20px; padding-left: 20px; }
	.site-header-title h1 { max-width: 720px; }
	#tracking-method .tracking-layout { gap: 70px; }
	#city-layers .city-panorama { min-height: 590px; }
	#missions .mission-visual { min-height: 650px; }
	#equipment .equipment-bench { grid-template-columns: minmax(285px, 0.72fr) minmax(470px, 1.28fr); }
	#equipment .upgrade-entry { grid-template-columns: 64px minmax(150px, 0.7fr) minmax(200px, 1fr); gap: 20px; }
	#investigation .investigation-layout { gap: 70px; }
}
@media (max-width: 960px) {
	:root { --rail-width: 0px; --section-space: 105px; }
	body { font-size: 16px; }
	.site-header { min-height: 820px; }
	.site-header-rail { position: fixed; right: 0; bottom: auto; width: 100%; height: 72px; flex-direction: row; align-items: center; padding: 14px 24px; border-right: 0; border-bottom: 1px solid var(--color-line); }
	.site-header-mark { justify-content: flex-start; }
	.site-header-signal, .site-header-coordinate { display: none; }
	.site-header-menu { display: block; margin-left: auto; padding: 6px; }
	.site-header-nav { position: fixed; top: 72px; right: 0; bottom: 0; left: 0; display: flex; visibility: hidden; flex-direction: column; justify-content: center; gap: 0; padding: 30px; background: rgba(9, 13, 14, 0.98); opacity: 0; transform: translateX(30px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); }
	.site-header-nav.is-open { visibility: visible; opacity: 1; transform: translateX(0); }
	.site-header-nav a { padding: 14px 0; border-bottom: 1px solid var(--color-line); font-size: 20px; writing-mode: horizontal-tb; }
	.site-header-nav a::before { display: none; }
	.site-header-menu[aria-expanded="true"] .site-header-menu-line:first-child { transform: translateY(7px) rotate(45deg); }
	.site-header-menu[aria-expanded="true"] .site-header-menu-line:nth-child(2) { opacity: 0; }
	.site-header-menu[aria-expanded="true"] .site-header-menu-line:last-child { transform: translateY(-7px) rotate(-45deg); }
	.site-header-hero { min-height: 820px; margin-left: 0; padding-top: 72px; }
	.site-header-primary { min-height: 748px; grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: auto 1fr; }
	.site-header-brand { grid-column: 1; padding-top: 26px; padding-bottom: 26px; }
	.site-header-title { grid-column: 1; padding-top: 50px; padding-bottom: 45px; }
	.site-header-legend { grid-column: 2; grid-row: 1 / 3; }
	.site-header-wave { top: 22%; right: 3%; left: 4%; }
	main, footer { margin-left: 0; }
	#tracking-method .tracking-layout { grid-template-columns: 1fr; gap: 60px; }
	#tracking-method .tracking-sticky { position: static; display: grid; grid-template-columns: 1fr minmax(230px, 0.55fr); gap: 40px; align-items: end; }
	#tracking-method .tracking-note { margin: 0; }
	#city-layers .city-heading-row { grid-template-columns: 1fr; gap: 30px; }
	#city-layers .city-panorama { min-height: 540px; }
	#city-layers .layer-list { grid-template-columns: repeat(2, 1fr); }
	#city-layers .layer-entry:nth-child(2) { border-right: 0; }
	#city-layers .layer-entry:nth-child(-n + 2) { border-bottom: 1px solid var(--color-line); }
	#missions .mission-layout { grid-template-columns: 1fr; }
	#missions .mission-copy { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(380px, 1.2fr); gap: 55px; order: -1; }
	#missions .case-list { margin-top: 0; }
	#missions .mission-visual { min-height: 570px; }
	#equipment .equipment-heading { grid-template-columns: 1fr; gap: 30px; }
	#equipment .equipment-bench { grid-template-columns: 1fr; }
	#equipment .equipment-image { min-height: 520px; border-right: 0; border-bottom: 1px solid var(--color-line); }
	#investigation .investigation-layout { grid-template-columns: 1fr; }
	#investigation .investigation-heading { display: grid; grid-template-columns: 1fr minmax(280px, 0.7fr); gap: 45px; align-items: end; }
	#investigation .investigation-heading .section-intro { margin: 0; }
	footer .footer-brand { grid-template-columns: 1fr; gap: 25px; }
}
@media (max-width: 768px) {
	:root { --section-space: 88px; --side-space: 25px; }
	.site-header { min-height: 940px; }
	.site-header-rail { height: 66px; padding: 12px 18px; }
	.site-header-nav { top: 66px; }
	.site-header-symbol { width: 36px; height: 36px; }
	.site-header-hero { min-height: 940px; padding-top: 66px; }
	.site-header-map img { object-position: 66% center; }
	.site-header-primary { min-height: 874px; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
	.site-header-brand { grid-column: 1; grid-row: 1; }
	.site-header-name { font-size: 13px; letter-spacing: 0.11em; }
	.site-header-status { font-size: 11px; }
	.site-header-title { grid-column: 1; grid-row: 2; align-self: end; padding-top: 160px; }
	.site-header-title h1 { font-size: clamp(36px, 9vw, 50px); }
	.site-header-title p { max-width: 540px; font-size: 17px; }
	.site-header-legend { grid-column: 1; grid-row: 3; padding: 23px var(--side-space); border-top: 1px solid var(--color-line); border-left: 0; }
	.site-header-legend-title, .site-header-alert { display: none; }
	.site-header-frequency { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; }
	.site-header-frequency-row { grid-template-columns: 35px 1fr; padding: 0; border: 0; }
	.site-header-frequency-row > span:last-child { display: none; }
	.site-header-wave { top: 21%; height: 36%; }
	.section-heading { font-size: clamp(29px, 6.5vw, 41px); }
	#tracking-method .tracking-sticky { grid-template-columns: 1fr; }
	#tracking-method .tracking-note { max-width: none; }
	#tracking-method .signal-entry { grid-template-columns: 55px 1fr; gap: 18px; }
	#tracking-method .signal-graph { grid-column: 2; }
	#city-layers .city-panorama { min-height: 650px; }
	#city-layers .city-hotspot { max-width: 190px; }
	#city-layers .city-hotspot-a { top: 19%; left: 12%; }
	#city-layers .city-hotspot-b { top: 50%; left: 39%; }
	#city-layers .city-hotspot-c { top: 68%; left: 58%; }
	#city-layers .city-panorama.is-visible .city-hotspot::after { width: 34px; }
	#missions .mission-copy { grid-template-columns: 1fr; gap: 15px; }
	#missions .case-list { margin-top: 35px; }
	#missions .mission-visual { min-height: 590px; }
	#equipment .upgrade-entry { grid-template-columns: 55px 1fr; }
	#equipment .upgrade-entry p, #equipment .upgrade-state { grid-column: 2; }
	#equipment .equipment-image { min-height: 480px; }
	#investigation .investigation-heading { grid-template-columns: 1fr; gap: 15px; }
	#investigation .investigation-heading .section-intro { margin-top: 20px; }
	#investigation .investigation-step { grid-template-columns: 82px 1fr; gap: 20px; }
	#investigation .investigation-result { grid-column: 2; margin-top: 10px; }
	#final-signal { min-height: 670px; }
	#final-signal .final-shell { min-height: 670px; }
	#final-signal .final-axis { left: 82%; }
	#final-signal .final-copy { width: 86%; }
	footer .footer-axis { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 500px) {
	:root { --section-space: 72px; --side-space: 18px; }
	body { font-size: 15px; }
	.site-header { min-height: 900px; }
	.site-header-rail { height: 62px; padding-right: 14px; padding-left: 14px; }
	.site-header-nav { top: 62px; padding: 22px; }
	.site-header-nav a { font-size: 18px; }
	.site-header-hero { min-height: 900px; padding-top: 62px; }
	.site-header-primary { min-height: 838px; }
	.site-header-brand { padding: 21px 18px; }
	.site-header-status span { display: none; }
	.site-header-title { padding: 180px 18px 34px; }
	.site-header-title h1 { font-size: 36px; line-height: 1.22; }
	.site-header-title h1 span { margin-top: 12px; font-size: 0.35em; letter-spacing: 0.11em; }
	.site-header-title p { margin-top: 21px; font-size: 16px; line-height: 1.75; }
	.site-header-actions { flex-direction: column; align-items: stretch; }
	.site-header-actions a { width: 100%; }
	.site-header-frequency { gap: 8px; }
	.site-header-frequency-row { display: block; }
	.site-header-frequency-row strong { display: block; margin-bottom: 6px; }
	.site-header-frequency-meter { height: 18px; }
	.site-header-wave { top: 20%; right: -14%; left: -13%; height: 31%; }
	.section-index { font-size: 11px; }
	.section-heading { font-size: 31px; }
	.section-intro { margin-top: 18px; }
	#tracking-method .tracking-note { margin-top: 12px; }
	#tracking-method .signal-entry { grid-template-columns: 1fr; min-height: 0; padding: 25px 0; }
	#tracking-method .signal-code, #tracking-method .signal-graph { grid-column: 1; }
	#tracking-method .signal-graph { height: 75px; }
	#city-layers .city-heading-row { padding-bottom: 45px; }
	#city-layers .city-panorama { min-height: 680px; }
	#city-layers .city-axis-line:nth-child(1) { left: 12%; }
	#city-layers .city-axis-line:nth-child(2) { left: 52%; }
	#city-layers .city-axis-line:nth-child(3) { left: 89%; }
	#city-layers .city-hotspot { max-width: 155px; padding-left: 17px; }
	#city-layers .city-hotspot span { font-size: 12px; }
	#city-layers .city-hotspot-a { top: 17%; left: 9%; }
	#city-layers .city-hotspot-b { top: 45%; left: 32%; }
	#city-layers .city-hotspot-c { top: 69%; left: 48%; }
	#city-layers .city-alert { right: 18px; bottom: 22px; left: 18px; }
	#city-layers .layer-list { grid-template-columns: 1fr; }
	#city-layers .layer-entry { min-height: 0; border-right: 0; border-bottom: 1px solid var(--color-line); }
	#city-layers .layer-entry:last-child { border-bottom: 0; }
	#missions .mission-visual { min-height: 530px; }
	#missions .mission-caption { width: 86%; padding: 20px; }
	#missions .case-entry { grid-template-columns: 45px 1fr; gap: 13px; }
	#equipment .equipment-image { min-height: 420px; }
	#equipment .equipment-image-label { right: 18px; bottom: 18px; left: 18px; align-items: flex-start; flex-direction: column; }
	#equipment .equipment-image-label span { max-width: none; text-align: left; }
	#equipment .upgrade-entry { grid-template-columns: 1fr; gap: 12px; padding: 25px 18px; }
	#equipment .upgrade-entry p, #equipment .upgrade-state { grid-column: 1; }
	#investigation .investigation-step { grid-template-columns: 1fr; }
	#investigation .investigation-result { grid-column: 1; }
	#final-signal { min-height: 650px; }
	#final-signal .final-shell { min-height: 650px; }
	#final-signal .final-copy { width: 100%; padding-bottom: 55px; }
	#final-signal .final-copy h2 { font-size: 34px; }
	#final-signal .final-actions { flex-direction: column; }
	#final-signal .final-actions a { width: 100%; justify-content: center; }
	#final-signal .final-axis { left: 92%; }
	footer .footer-shell { padding-top: 38px; }
	footer .footer-brand strong { font-size: 34px; }
	footer .footer-nav { gap: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; scroll-behavior: auto; transition-duration: 0.01ms; }
	.site-header-wave polyline { stroke-dashoffset: 0; }
	.site-header-wave circle { opacity: 1; transform: none; }
}