:root { --red:#dc1f2a; --navy:#081d38; --navy2:#102e56; --blue:#2e6d9b; --paper:#fff; --muted:#67788c; --line:#d6dee7; }
* { box-sizing:border-box; }
body { margin:0; color:#13233b; background:linear-gradient(145deg,#eef3f8,#f8fafc); font-family:"IBM Plex Sans","Avenir Next","Segoe UI",sans-serif; }
.viewer-header { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:.8rem clamp(1rem,4vw,4rem); color:#fff; background:linear-gradient(100deg,#071c31,#153f68); border-bottom:5px solid #b5121b; }
.brand { display:flex; align-items:center; gap:1rem; color:inherit; text-decoration:none; }.brand img { width:102px; height:62px; object-fit:contain; }.brand span { display:grid; }.brand small { font-weight:800; letter-spacing:.13em; }.brand strong { font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-size:1.45rem; }
.back-link { padding:.65rem .85rem; color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:4px; text-decoration:none; font-weight:700; }
main { width:min(1680px,100%); margin:auto; padding:clamp(1rem,3vw,2.5rem); }
.intro { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1.2rem; }.intro > div:first-child { max-width:850px; }.eyebrow { margin:0 0 .25rem; color:#b5121b; font-size:.72rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }.intro h1 { margin:.2rem 0 .5rem; color:#0c2d4c; font:800 clamp(2.4rem,5vw,4.3rem)/.95 "Barlow Condensed","Arial Narrow",sans-serif; }.intro p { margin:.5rem 0 0; color:var(--muted); line-height:1.55; }
.filters { display:flex; gap:.7rem; }.filters label { display:grid; gap:.3rem; color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; }.filters select { min-width:140px; padding:.65rem; color:#13233b; background:#fff; border:1px solid var(--line); border-radius:4px; }
.viewer-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 20px 55px rgba(8,29,56,.13); }
.mode-bar { display:flex; gap:0; padding:.7rem; background:#0b2144; }.mode-bar button { padding:.7rem 1.05rem; color:#c7d5e5; background:#071a34; border:0; cursor:pointer; font-weight:800; }.mode-bar button:first-child { border-radius:5px 0 0 5px; }.mode-bar button:nth-child(3) { border-radius:0 5px 5px 0; }.mode-bar button.active { color:#10213c; background:#fff; }.mode-bar .layer-toggle { margin-left:.75rem; border:1px solid rgba(255,255,255,.3); border-radius:5px; background:transparent; }.mode-bar .layer-toggle.active { color:#10213c; border-color:#ffca55; background:#ffca55; }.mode-bar .plate-toggle.active { color:#fff; border-color:#8d7dff; background:#6559c7; }.mode-bar .layer-toggle:disabled { opacity:.4; cursor:not-allowed; }.mode-bar .reset { margin-left:auto; border:1px solid rgba(255,255,255,.28); border-radius:5px; background:transparent; }
.viewer-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; min-height:680px; background:#071a34; }.canvas-wrap { position:relative; min-width:0; background:radial-gradient(circle at 50% 20%,#153f75,#06152c 68%); }.canvas-wrap canvas { display:block; width:100%; height:100%; min-height:680px; touch-action:none; cursor:grab; }.canvas-wrap canvas:active { cursor:grabbing; }.scene-help { position:absolute; top:.7rem; right:1rem; margin:0; color:#b8c9dd; font-size:.78rem; }.loading { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); padding:.8rem 1rem; color:#fff; background:rgba(4,17,35,.85); border:1px solid rgba(255,255,255,.2); border-radius:4px; }
.scene-tooltip { position:absolute; z-index:4; display:grid; gap:.16rem; width:min(230px,calc(100% - 2rem)); padding:.7rem .8rem; color:#fff; background:rgba(4,19,37,.94); border:1px solid rgba(255,255,255,.26); border-left:4px solid #dc1f2a; border-radius:5px; box-shadow:0 10px 30px rgba(0,0,0,.28); pointer-events:none; }
.scene-tooltip[hidden] { display:none; }
.scene-tooltip strong { color:#fff; font-size:1rem; }.scene-tooltip span { font-size:.76rem; font-weight:720; line-height:1.25; }.scene-tooltip small { color:#b8c9dd; font-size:.68rem; }
.event-card { padding:1.5rem; color:#10213c; background:#fff; border-left:1px solid #d8e0e9; }.event-mag { display:flex; align-items:baseline; gap:.25rem; margin:.9rem 0 .2rem; color:#b5121b; }.event-mag span { font-weight:850; }.event-mag strong { font:850 4.4rem/.85 "Barlow Condensed","Arial Narrow",sans-serif; }.event-card h2 { margin:.8rem 0 1.3rem; font:800 1.55rem/1.1 "Barlow Condensed","Arial Narrow",sans-serif; }.event-card dl { margin:0; }.event-card dl div { padding:.75rem 0; border-top:1px solid #e0e6ec; }.event-card dt { color:var(--muted); font-size:.74rem; }.event-card dd { margin:.2rem 0 0; font-weight:760; }.event-id { color:var(--muted); font-size:.7rem; word-break:break-all; }.summary { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1.2rem; }.summary span { padding:.8rem; color:var(--muted); background:#f2f6f9; border-radius:4px; font-size:.7rem; }.summary strong { display:block; color:#b5121b; font-size:1.45rem; }
.legend { display:grid; grid-template-columns:1fr 1.25fr 1.1fr 1.8fr; gap:2rem; align-items:center; padding:1.3rem 1.5rem; background:#fff; border:1px solid var(--line); border-top:0; border-radius:0 0 8px 8px; }.legend > div { display:grid; gap:.6rem; }.legend span { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.76rem; }.legend i { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); }.legend i:nth-of-type(2) { width:16px; height:16px; }.legend i:nth-of-type(3) { width:26px; height:26px; }.legend b { width:11px; height:11px; display:inline-block; border-radius:50%; }.shallow{background:#ef3b45}.middle{background:#f5a623}.deep{background:#3f8ed0}.legend .fault-symbol,.legend .plate-symbol { width:28px; height:0; border-radius:0; }.legend .fault-symbol { border-top:3px dashed #e4a922; }.legend .plate-symbol { margin-left:.35rem; border-top:3px solid #6559c7; }.legend p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.5; }
@media(max-width:900px){.intro{align-items:flex-start;flex-direction:column}.viewer-grid{grid-template-columns:1fr}.event-card{border-left:0;border-top:4px solid #b5121b}.legend{grid-template-columns:1fr 1fr}.legend p{grid-column:1/-1}.canvas-wrap canvas{min-height:560px}.viewer-header{align-items:flex-start}.brand span{display:none}}
@media(max-width:560px){main{padding:.7rem}.filters{width:100%}.filters label{flex:1}.filters select{min-width:0;width:100%}.mode-bar{flex-wrap:wrap}.mode-bar button{flex:1}.mode-bar .reset{flex-basis:100%;margin:.5rem 0 0}.viewer-grid{min-height:0}.canvas-wrap canvas{min-height:480px}.legend{grid-template-columns:1fr}.legend p{grid-column:auto}.back-link{font-size:.72rem}}