@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --navy:#071d2d; --ink:#17242d; --red:#d71920; --ash:#e9edef; --line:#cbd5da; --muted:#63737e; --white:#fff; --green:#38aa67; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ash); font-family:"DM Sans",sans-serif; }
button,a { font:inherit; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:50; padding:.7rem; background:#fff; }
.topbar { min-height:86px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 clamp(1.25rem,5vw,6rem); color:#fff; background:var(--navy); border-bottom:5px solid var(--red); }
.brand { display:flex; align-items:center; gap:.8rem; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border:2px solid #fff; border-radius:50%; font-family:"Archivo Black"; }
.brand span:last-child { display:grid; }
.brand small { opacity:.65; }
.system-state { display:flex; align-items:center; gap:.65rem; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.system-state i { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 7px rgba(56,170,103,.15); }
.portal-link { justify-self:end; color:#fff; font-weight:700; text-underline-offset:4px; }
main { max-width:1700px; margin:auto; background:#fff; }
.hero { min-height:500px; display:grid; grid-template-columns:1.25fr .75fr; gap:5rem; align-items:end; padding:clamp(3rem,7vw,7rem) clamp(1.25rem,5vw,6rem); color:#fff; background:radial-gradient(circle at 82% 25%,rgba(215,25,32,.22),transparent 28%),linear-gradient(115deg,#071d2d 15%,#102f3e 70%,#173947); }
.eyebrow { margin:0 0 .8rem; color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.17em; }
h1,h2 { font-family:"Archivo Black",sans-serif; }
h1 { margin:0; font-size:clamp(3.4rem,7.2vw,7.8rem); line-height:.84; letter-spacing:-.055em; }
h1 em { color:var(--red); font-style:normal; }
.hero-copy { max-width:39rem; font-size:1.06rem; line-height:1.7; }
.notice { padding-left:1rem; border-left:3px solid var(--red); color:rgba(255,255,255,.7); font-size:.88rem; }
.instrument-summary { display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border-bottom:1px solid var(--line); }
.instrument-summary article { position:relative; min-height:180px; padding:2rem clamp(1.25rem,3vw,3rem); border-right:1px solid var(--line); }
.instrument-summary article:last-child { border:0; }
.instrument-summary article>span { position:absolute; right:1.5rem; top:1rem; color:#d5dde1; font-family:"Archivo Black"; font-size:2rem; }
.instrument-summary strong { display:block; margin-bottom:.7rem; font-family:"Archivo Black"; font-size:1.18rem; }
.instrument-summary p { max-width:24rem; margin:0; color:var(--muted); line-height:1.55; }
.viewer-section { padding:clamp(3.5rem,6vw,6rem) clamp(1rem,4vw,4rem); background:var(--ash); }
.section-head { display:grid; grid-template-columns:1fr .65fr; align-items:end; gap:4rem; margin:0 auto 2rem; max-width:1520px; }
.section-head h2,.interpretation h2 { margin:0; font-size:clamp(2rem,4vw,4.5rem); line-height:.95; }
.section-head>p { margin:0; color:var(--muted); line-height:1.65; }
.viewer-shell { max-width:1520px; margin:auto; background:#fff; box-shadow:0 25px 70px rgba(7,29,45,.12); }
.viewer-tabs { display:grid; grid-template-columns:1fr 1fr; background:#dce3e7; gap:1px; }
.viewer-tabs button { display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:center; padding:1.2rem 1.5rem; border:0; color:var(--muted); background:#fff; text-align:left; cursor:pointer; }
.viewer-tabs button>span { grid-row:1/3; align-self:stretch; display:grid; place-items:center; min-width:72px; padding:.5rem; color:var(--red); border-right:1px solid var(--line); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.viewer-tabs strong { font-family:"Archivo Black"; font-size:1.25rem; }
.viewer-tabs small { font-size:.78rem; }
.viewer-tabs button.active { color:#fff; background:var(--navy); }
.viewer-tabs button.active>span { border-color:rgba(255,255,255,.22); }
.viewer-toolbar { min-height:72px; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem 1.25rem; color:#fff; background:#102b3b; }
.viewer-toolbar>div:first-child { display:grid; grid-template-columns:auto auto; column-gap:.65rem; align-items:center; }
.viewer-toolbar i { grid-row:1/3; width:9px; height:9px; border-radius:50%; background:#dba91d; }
.viewer-toolbar i.ready { background:var(--green); }
.viewer-toolbar span { color:#9eafb9; font-size:.72rem; }
.viewer-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.viewer-actions button,.viewer-actions a { padding:.6rem .8rem; border:1px solid #4e6572; color:#fff; background:transparent; text-decoration:none; font-size:.76rem; font-weight:700; cursor:pointer; }
.viewer-actions a { background:var(--red); border-color:var(--red); }
.frame-wrap { width:100%; min-height:760px; overflow:auto; background:#f4f6f7; }
#gas-frame { display:block; width:100%; min-width:1050px; height:1040px; border:0; background:#fff; }
.mobile-note { display:none; margin:0; padding:.8rem 1rem; color:var(--muted); background:#fff8e2; font-size:.78rem; }
.interpretation { display:grid; grid-template-columns:.8fr 1.2fr; gap:6rem; padding:clamp(4rem,7vw,7rem) clamp(1.25rem,5vw,6rem); }
.interpretation-list p { display:grid; grid-template-columns:180px 1fr; gap:1rem; margin:0; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.interpretation-list span { color:var(--muted); line-height:1.55; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem clamp(1.25rem,5vw,6rem); color:#fff; background:var(--navy); }
.frame-wrap:fullscreen { background:#fff; }
.frame-wrap:fullscreen #gas-frame { width:100%; height:100vh; }
@media (max-width:1000px) { .topbar { grid-template-columns:1fr auto; } .system-state { display:none; } .hero,.section-head,.interpretation { grid-template-columns:1fr; gap:2rem; } .instrument-summary { grid-template-columns:1fr; } .instrument-summary article { min-height:0; border-right:0; border-bottom:1px solid var(--line); } }
@media (max-width:700px) { .portal-link { display:none; } .viewer-tabs { grid-template-columns:1fr; } .viewer-tabs button { padding:.8rem; } .viewer-toolbar { align-items:flex-start; flex-direction:column; } .frame-wrap { min-height:600px; } #gas-frame { height:900px; } .mobile-note { display:block; } .interpretation-list p { grid-template-columns:1fr; gap:.4rem; } footer { display:grid; } }