:root {
  color-scheme: light;
  --ink: #111111;
  --muted: #626262;
  --faint: #8a8a8a;
  --paper: #ffffff;
  --canvas: #ffffff;
  --soft: #f7f7f7;
  --line: #dedede;
  --line-soft: #ededed;
  --danger: #7a1f1f;
  --danger-soft: #fff7f7;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
[hidden] { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.topbar-inner { width: min(1320px, calc(100% - 40px)); min-height: 62px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand strong { font-size: .96rem; letter-spacing: .01em; }
.brand-mark { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.brand-mark i { display: block; width: 3px; border-radius: 99px; background: #111; }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 18px; }.brand-mark i:nth-child(3) { height: 22px; }.brand-mark i:nth-child(4) { height: 12px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #aaa; }
.status-pill.is-live i { background: #111; }.status-pill.is-stale i { background: #777; }.status-pill.is-error i { background: #111; box-shadow: 0 0 0 3px #ddd; }

.page { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: clamp(34px, 5vw, 66px) 0 34px; }
.hero { display: block; max-width: 900px; }
.eyebrow { margin: 0 0 22px; color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .08em; }
h1 { margin: 0; font-size: clamp(3rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.055em; font-weight: 600; }
.hero-note { margin: 28px 0 0; color: var(--faint); font-size: .72rem; }

.range-controller { width: 100%; margin-top: clamp(34px, 5vw, 56px); padding: 0 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.control-strip { display: grid; grid-template-columns: minmax(150px,.72fr) minmax(280px,1.35fr) minmax(220px,.9fr) auto; gap: 8px; align-items: stretch; }
.range-select-button { width: 100%; min-height: 58px; padding: 9px 11px; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: left; cursor: pointer; }
.range-select-button:hover { background: var(--soft); }
.range-select-button span, .metric-control > span { color: var(--muted); font-size: .68rem; }
.range-select-button strong { overflow: hidden; font-size: .82rem; font-weight: 650; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.range-select-button small { color: var(--faint); font-size: .62rem; }
.interval-select strong { font-size: .72rem; }
.metric-control { min-width: 0; min-height: 58px; padding: 8px 10px; display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.metric-control select { width: 100%; min-width: 0; min-height: 36px; padding: 5px 30px 5px 8px; border: 0; background: #fff; color: #111; font-weight: 650; cursor: pointer; }
.realtime-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.realtime-panel { min-height: 58px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; white-space: nowrap; }
.control-options { min-height: 34px; padding: 9px 2px 0; display: flex; align-items: center; gap: 12px 20px; color: var(--muted); }
.compact-check { display: inline-flex; align-items: center; gap: 7px; font-size: .67rem; }
.compact-check input { accent-color: #111; }
.control-options .realtime-hint { margin-left: auto; }
.compact-refresh { min-height: 30px !important; padding: 4px 9px !important; }
.realtime-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.realtime-track { position: relative; width: 38px; height: 22px; border: 1px solid #aaa; border-radius: 999px; background: #fff; transition: .15s ease; }
.realtime-track i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #777; transition: .15s ease; }
.realtime-toggle input:checked + .realtime-track { border-color: #111; background: #111; }
.realtime-toggle input:checked + .realtime-track i { left: 19px; background: #fff; }
.realtime-toggle input:focus-visible + .realtime-track { outline: 2px solid #111; outline-offset: 2px; }
.realtime-copy { display: grid; gap: 1px; }
.realtime-copy strong { font-size: .72rem; font-weight: 650; }
.realtime-copy small, .realtime-hint { color: var(--faint); font-size: .61rem; }
.realtime-toggle input:checked ~ .realtime-copy small { color: #111; font-weight: 650; }

.section-heading { display: flex; align-items: center; min-height: 36px; margin-bottom: 8px; }
.section-heading.compact { margin: 10px 0 8px; }
.section-label { color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .06em; }
.info-heading { margin-top: 34px; margin-bottom: 0; }
.details-heading { margin-top: 34px; margin-bottom: 0; }

.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats article { min-width: 0; padding: 18px 20px 20px; border-right: 1px solid var(--line); }.stats article:first-child { padding-left: 0; }.stats article:last-child { border-right: 0; padding-right: 0; }
.stats span { display: block; color: var(--muted); font-size: .7rem; }
.stats strong { display: block; margin-top: 12px; overflow: hidden; color: var(--ink); font-size: clamp(1.45rem, 2.2vw, 2.05rem); font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.stats small { display: block; margin-top: 7px; overflow: hidden; color: var(--faint); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }

.chart-card { margin-top: 34px; padding: 0; }.chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.chart-heading p { margin: 0 0 4px; color: var(--faint); font-size: .66rem; }.chart-heading h2 { margin: 0; font-size: 1.08rem; font-weight: 650; }.chart-heading-actions { display: flex; align-items: center; gap: 10px; }.bucket-label { color: var(--faint); font-size: .65rem; white-space: nowrap; }.chart-latest-button { min-height: 34px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: .68rem; font-weight: 650; }.chart-latest-button:hover { background: var(--soft); }.chart-latest-button:disabled { color: #aaa; background: #fafafa; cursor: default; }
.chart-wrap { position: relative; width: 100%; min-height: 420px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chart-nav { position: absolute; z-index: 5; top: 50%; width: 46px; height: 72px; border: 1px solid rgba(17,17,17,.16); border-radius: 10px; background: rgba(255,255,255,.90); color: #111; box-shadow: 0 4px 18px rgba(0,0,0,.06); cursor: pointer; font-size: 2rem; line-height: 1; transform: translateY(-50%); backdrop-filter: blur(5px); }.chart-nav:hover { background: #fff; }.chart-nav:active { transform: translateY(-50%) scale(.96); }.chart-nav:disabled { opacity: .25; cursor: default; }.chart-nav-left { left: 8px; }.chart-nav-right { right: 8px; }
#chart { display: block; width: 100%; height: 420px; overflow: visible; touch-action: none; }
.grid-line { stroke: #ededed; stroke-width: 1; }.reference-line { stroke: #9b9b9b; stroke-width: 1; stroke-dasharray: 5 5; }.series-line { fill: none; stroke: #111; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.gap-area { fill: url(#gap-pattern); opacity: .55; }
.axis-text { fill: #777; font-size: 11px; font-variant-numeric: tabular-nums; }.axis-title { fill: #666; font-size: 10px; font-weight: 600; }.cursor-line { stroke: #111; stroke-width: 1; opacity: .28; }.cursor-dot { fill: #111; stroke: #fff; stroke-width: 2; }
.tooltip { position: absolute; z-index: 3; min-width: 138px; max-width: 220px; padding: 9px 11px; pointer-events: none; border: 1px solid #222; border-radius: 8px; background: rgba(255,255,255,.97); color: #111; box-shadow: 0 8px 24px rgba(0,0,0,.09); font-size: .7rem; line-height: 1.55; transform: translate(-50%, calc(-100% - 12px)); }.tooltip strong { display: block; font-size: .76rem; }
.empty-state { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .82rem; }
.chart-wrap[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.025), transparent); animation: loading 1.2s linear infinite; pointer-events: none; }@keyframes loading { from { transform: translateX(-45%); } to { transform: translateX(45%); } }
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-height: 42px; color: var(--muted); font-size: .66rem; }.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }.legend-line { width: 18px; height: 2px; background: #111; }.legend-gap { width: 14px; height: 9px; background: repeating-linear-gradient(135deg, #bbb, #bbb 1px, transparent 1px, transparent 4px); }

.error-box { margin: 14px 0; padding: 11px 13px; border: 1px solid #d9b8b8; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: .76rem; line-height: 1.55; }
.details-card { margin-top: 10px; border-top: 1px solid var(--line); }.details-card summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; list-style: none; color: var(--muted); font-size: .72rem; }.details-card summary::-webkit-details-marker { display: none; }.details-card summary::after { content: "+"; margin-left: auto; color: #888; font-size: 1rem; }.details-card[open] summary::after { content: "−"; }
.settings-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; padding: 4px 0 18px; }.settings-row label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .72rem; }.settings-row select { min-height: 36px; padding: 5px 30px 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #111; }.checkbox-label input { accent-color: #111; }
.text-button, .primary-button { min-height: 36px; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: .7rem; }.text-button { border: 1px solid var(--line); background: #fff; }.text-button:hover { background: var(--soft); }.primary-button { border: 1px solid #111; background: #111; color: #fff; }.primary-button:hover { background: #2b2b2b; }
.quality-grid, .data-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.quality-grid div, .data-detail-grid div { padding: 15px 18px; border-right: 1px solid var(--line-soft); }.quality-grid div:first-child, .data-detail-grid div:nth-child(4n+1) { padding-left: 0; }.quality-grid div:last-child, .data-detail-grid div:nth-child(4n) { border-right: 0; }
.quality-grid span, .data-detail-grid span { display: block; color: var(--faint); font-size: .64rem; }.quality-grid strong, .data-detail-grid strong { display: block; margin-top: 6px; font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.55; }
.quality-note { margin: 12px 0 18px; color: var(--faint); font-size: .66rem; line-height: 1.65; }
.data-detail-grid { grid-template-columns: repeat(3, 1fr); }.data-detail-grid div:nth-child(4n+1) { padding-left: 18px; }.data-detail-grid div:nth-child(3n+1) { padding-left: 0; }.data-detail-grid div:nth-child(4n) { border-right: 1px solid var(--line-soft); }.data-detail-grid div:nth-child(3n) { border-right: 0; }
.method-copy { padding: 16px 0 4px; max-width: 980px; }.method-copy p { margin: 0 0 12px; color: var(--muted); font-size: .7rem; line-height: 1.8; }.method-copy b { color: var(--ink); font-weight: 650; }
footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: .62rem; }footer p { margin: 0; }

.picker-dialog { width: min(620px, calc(100% - 28px)); max-height: min(86dvh, 760px); padding: 0; border: 1px solid #cfcfcf; border-radius: 14px; background: #fff; color: #111; box-shadow: 0 24px 80px rgba(0,0,0,.18); }.picker-dialog::backdrop { background: rgba(0,0,0,.22); backdrop-filter: blur(2px); }
.dialog-shell { padding: 22px; }.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }.dialog-heading small { color: var(--faint); font-size: .65rem; }.dialog-heading h2 { margin: 4px 0 0; font-size: 1.2rem; }.dialog-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 1.1rem; }
.preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }.preset-button { min-height: 40px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: .72rem; }.preset-button:hover, .preset-button.is-current { background: #111; color: #fff; border-color: #111; }
.custom-range { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }.custom-range > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: .68rem; }.custom-range-fields { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 8px; }.custom-range input, .custom-range select, .interval-fields input { width: 100%; min-height: 40px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #111; }.custom-range > small { display: block; margin-top: 8px; color: var(--faint); font-size: .62rem; }
.interval-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.interval-fields label { display: grid; gap: 7px; color: var(--muted); font-size: .68rem; }.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.dialog-error { margin: 10px 0 0; color: var(--danger); font-size: .68rem; }

@media (max-width: 900px) {
  .hero { display: block; }.stats { grid-template-columns: repeat(3, 1fr); }.stats article { border-bottom: 1px solid var(--line); }.stats article:nth-child(3) { border-right: 0; }.stats article:nth-child(4), .stats article:nth-child(5) { border-bottom: 0; }.stats article:first-child { padding-left: 20px; }.stats article:last-child { padding-right: 20px; }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }.quality-grid div:nth-child(2) { border-right: 0; }.quality-grid div:first-child, .quality-grid div:last-child { padding-inline: 18px; }
  .data-detail-grid { grid-template-columns: repeat(2, 1fr); }.data-detail-grid div { padding-inline: 14px !important; border-right: 1px solid var(--line-soft) !important; }.data-detail-grid div:nth-child(even) { border-right: 0 !important; }
}
@media (max-width: 650px) {
  .topbar-inner, .page { width: min(100% - 28px, 1320px); }.topbar-inner { min-height: 58px; }.page { padding-top: 28px; }.hero { display: block; }h1 { font-size: clamp(3.1rem, 16vw, 4.7rem); }.hero-note { margin-top: 20px; }.range-controller { margin-top: 30px; padding-bottom: 10px; }.control-strip { grid-template-columns: 1fr 1fr; gap: 7px; }.range-select-button { grid-template-columns: 62px minmax(0, 1fr) auto; min-height: 56px; }.interval-select strong { white-space: normal; }.metric-control { grid-column: 1 / -1; min-height: 50px; grid-template-columns: 58px minmax(0,1fr); }.realtime-panel { grid-column: 1 / -1; min-height: 46px; justify-content: flex-start; }.control-options { flex-wrap: wrap; gap: 8px 14px; }.control-options .realtime-hint { display: none; }.compact-refresh { margin-left: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; }.stats article { padding: 16px !important; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.stats article:nth-child(even) { border-right: 0; }.stats article:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }.stats article:nth-child(4) { border-bottom: 1px solid var(--line); }
  .chart-card { margin-top: 26px; }.chart-wrap, #chart { min-height: 330px; height: 330px; }.chart-nav { width: 42px; height: 62px; font-size: 1.8rem; }.chart-nav-left { left: 4px; }.chart-nav-right { right: 4px; }.chart-move-hint { width: 100%; margin-left: 0; }.chart-heading { align-items: start; }.bucket-label { white-space: normal; text-align: right; }.quality-grid, .data-detail-grid { grid-template-columns: 1fr; }.quality-grid div, .data-detail-grid div { border-right: 0 !important; border-bottom: 1px solid var(--line-soft); padding-inline: 0 !important; }.quality-grid div:last-child, .data-detail-grid div:last-child { border-bottom: 0; }footer { flex-direction: column; }
  .realtime-hint { display: none; } .preset-grid { grid-template-columns: repeat(3, 1fr); }.custom-range-fields { grid-template-columns: 1fr 92px; }.custom-range-fields .primary-button { grid-column: 1 / -1; }.interval-fields { grid-template-columns: 1fr; }.dialog-actions { align-items: stretch; flex-direction: column; }.dialog-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.chart-move-hint { margin-left: auto; color: var(--faint); }

@media (min-width: 901px) {
  html { font-size: 18px; }
  h1 { font-size: clamp(3rem, 5vw, 4.7rem); }
  .topbar-inner, .page { width: min(1380px, calc(100% - 56px)); }
  .eyebrow, .hero-note { font-size: .78rem; }
  .range-select-button span { font-size: .76rem; }
  .range-select-button strong { font-size: .94rem; }
  .interval-select strong { font-size: .82rem; }
  .range-select-button small { font-size: .70rem; }
  .realtime-copy strong { font-size: .80rem; }
  .realtime-copy small, .realtime-hint { font-size: .69rem; }
  .section-label { font-size: .80rem; }
  .stats span { font-size: .78rem; }
  .stats small { font-size: .70rem; }
  .chart-heading p, .bucket-label, .chart-legend { font-size: .73rem; }
  .chart-heading h2 { font-size: 1.18rem; }
  .chart-latest-button { font-size: .75rem; }
  .axis-text { font-size: 13px; }
  .axis-title { font-size: 12px; }
  .tooltip { font-size: .78rem; }
  .tooltip strong { font-size: .84rem; }
  .details-card summary, .metric-control, .compact-check { font-size: .80rem; }
  .text-button, .primary-button, .preset-button { font-size: .78rem; }
  .quality-grid span, .data-detail-grid span, .quality-note { font-size: .72rem; }
  .quality-grid strong, .data-detail-grid strong { font-size: .84rem; }
  .method-copy p { font-size: .78rem; }
  footer { font-size: .69rem; }
}


/* V6: synchronized system-environment monitoring */
.environment-heading { margin-top: 42px; }
.environment-section { margin-top: 10px; }
.environment-summary { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.environment-summary article { min-width: 0; padding: 17px 16px; border-right: 1px solid var(--line-soft); }
.environment-summary article:first-child { padding-left: 0; }
.environment-summary article:last-child { border-right: 0; padding-right: 0; }
.environment-summary span, .environment-chart-heading small { display:block; color:var(--faint); font-size:.64rem; }
.environment-summary strong { display:block; margin-top:7px; font-size:.9rem; font-weight:650; font-variant-numeric:tabular-nums; }
.environment-summary small { display:block; overflow:hidden; margin-top:4px; color:var(--faint); font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
.environment-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; }
.environment-toolbar > div { display:grid; gap:3px; }
.environment-toolbar strong { font-size:.78rem; }
.environment-toolbar small { color:var(--faint); font-size:.64rem; }
.environment-toggles { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.environment-toggle { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); cursor:pointer; font-size:.66rem; user-select:none; }
.environment-toggle:has(input:checked) { border-color:#111; background:#111; color:#fff; }
.environment-toggle input { position:absolute; opacity:0; pointer-events:none; }
.environment-charts { display:grid; gap:14px; margin-top:16px; }
.environment-chart-card { border:1px solid var(--line); border-radius:10px; padding:14px 14px 8px; overflow:hidden; }
.environment-chart-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.environment-chart-heading > div { display:grid; gap:3px; }
.environment-chart-heading strong { font-size:.78rem; }
.environment-latest { color:var(--muted); font-size:.64rem; font-variant-numeric:tabular-nums; text-align:right; }
.environment-chart-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px; color:var(--faint); font-size:.6rem; }
.environment-chart-legend span { display:inline-flex; align-items:center; gap:5px; }
.environment-chart-legend i { width:14px; height:2px; background:#111; }
.environment-chart-legend i[data-series="1"] { background:#555; }
.environment-chart-legend i[data-series="2"] { background:#888; }
.environment-chart-legend i[data-series="3"] { background:#aaa; }
.environment-chart-legend i[data-series="4"] { background:#ccc; }
.environment-svg { display:block; width:100%; height:220px; margin-top:5px; overflow:visible; touch-action:none; }
.environment-series { fill:none; stroke:#111; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.environment-series-1 { stroke:#555; stroke-dasharray:6 3; }
.environment-series-2 { stroke:#888; stroke-dasharray:2 3; }
.environment-series-3 { stroke:#aaa; stroke-dasharray:8 3 2 3; }
.environment-series-4 { stroke:#ccc; stroke-dasharray:1 3; }
.environment-empty { margin-top:16px; padding:16px; border:1px dashed var(--line); border-radius:8px; color:var(--faint); font-size:.68rem; text-align:center; }
.environment-details { margin-top:26px; }
.correlation-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:5px 0 12px; }
.correlation-heading p { max-width:800px; margin:0; color:var(--muted); font-size:.68rem; line-height:1.7; }
.correlation-heading span { color:var(--faint); font-size:.64rem; white-space:nowrap; }
.correlation-table-wrap { overflow:auto; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.correlation-table { width:100%; border-collapse:collapse; font-size:.68rem; font-variant-numeric:tabular-nums; }
.correlation-table th, .correlation-table td { padding:9px 10px; border-bottom:1px solid var(--line-soft); text-align:right; }
.correlation-table th:first-child, .correlation-table td:first-child { text-align:left; }
.correlation-table tbody tr:last-child td { border-bottom:0; }
.correlation-table th { color:var(--faint); font-weight:500; }
.correlation-r { font-weight:650; }
.legend-event { width:2px; height:11px; background:#777; }
.event-line { stroke:#777; stroke-width:1; stroke-dasharray:3 4; opacity:.55; vector-effect:non-scaling-stroke; }
.event-dot { fill:#777; }
.environment-event-line { opacity:.35; }

@media (max-width: 1000px) { .environment-summary { grid-template-columns:repeat(3,1fr); } .environment-summary article:nth-child(3n) { border-right:0; } .environment-summary article:first-child { padding-left:16px; } .environment-summary article:last-child { padding-right:16px; } }
@media (max-width: 650px) { .environment-heading { margin-top:34px; } .environment-summary { grid-template-columns:repeat(2,1fr); } .environment-summary article { padding:14px !important; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .environment-summary article:nth-child(even) { border-right:0; } .environment-summary article:nth-last-child(-n+2) { border-bottom:0; } .environment-toolbar { align-items:flex-start; } .environment-toolbar > div { max-width:70%; } .environment-toggle { font-size:.64rem; } .environment-chart-card { padding:12px 8px 6px; } .environment-chart-heading { display:grid; gap:6px; padding:0 4px; } .environment-latest { text-align:left; } .environment-svg { height:190px; } .correlation-heading { display:grid; gap:8px; } }