.analysis-deck {
  padding: 29px 0 34px;
  border-bottom: 1px solid var(--line);
}

.analysis-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 21px;
}

.analysis-heading h2 {
  margin: 7px 0 4px;
  color: #ecf2ed;
  font-size: 25px;
  font-weight: 580;
  letter-spacing: .035em;
}

.analysis-heading p,
.analysis-heading > span {
  margin: 0;
  color: #819ca1;
  font-size: 11px;
  line-height: 1.5;
}

.analysis-heading > span { padding-bottom: 3px; white-space: nowrap; }
.analysis-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plot-panel { min-width: 0; padding: 22px 29px 18px 0; border-right: 1px solid var(--line); }
.analysis-side { min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.range-panel { min-width: 0; padding: 22px 0 18px 28px; border-bottom: 1px solid var(--line); }
.hist-panel { min-width: 0; padding: 19px 0 13px 28px; }
.analysis-panel-head { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
.analysis-panel-head h3 { margin: 5px 0 3px; font-size: 19px; font-weight: 570; letter-spacing: .025em; }
.analysis-panel-head p { margin: 0; color: #829ca0; font-size: 11px; line-height: 1.5; }
.panel-count { color: #829ca0; font-size: 10px; white-space: nowrap; padding-top: 4px; }

.plot-graphic { position: relative; margin-top: 14px; padding: 11px 0 18px; background: radial-gradient(ellipse at 52% 43%, rgba(58, 109, 116, .1), transparent 65%); }
.relationship-plot { display: block; width: 100%; height: auto; overflow: visible; }
.plot-grid-line { stroke: rgba(145, 183, 186, .13); stroke-width: 1; }
.plot-reference { stroke: rgba(233, 185, 105, .55); stroke-width: 1; stroke-dasharray: 5 5; }
.plot-tick { fill: #77949a; font-size: 10px; font-family: inherit; font-variant-numeric: tabular-nums; }
.plot-point { fill: var(--chart-accent); stroke: #0a2530; stroke-width: 1.5; opacity: .76; cursor: pointer; transition: opacity .2s, stroke-width .2s, filter .2s; }
.plot-point:hover, .plot-point:focus-visible { opacity: 1; stroke: #fff0ce; stroke-width: 3; filter: drop-shadow(0 0 5px var(--chart-accent)); outline: none; }
.plot-point.is-selected { fill: #f8e2b5; stroke: var(--chart-accent); stroke-width: 3; opacity: 1; filter: drop-shadow(0 0 6px var(--chart-accent)); }
.plot-y-label, .plot-x-label { position: absolute; font-size: 10px; color: #a6bbbc; pointer-events: none; }
.plot-y-label { top: 0; left: 8%; }
.plot-x-label { right: 3%; bottom: 0; }
.plot-readout { min-height: 37px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; align-items: baseline; gap: 14px; }
.plot-readout strong { color: #e8d0a4; font-size: 12px; font-weight: 590; white-space: nowrap; }
.plot-readout span { color: #8da6a9; font-size: 10px; }

.range-list { margin-top: 17px; }
.range-row { margin-bottom: 10px; opacity: .84; }
.range-row.is-emphasis { opacity: 1; }
.range-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: #aec2c2; }
.range-top strong { color: var(--range-color); font-size: 14px; font-weight: 590; }
.range-track { position: relative; height: 19px; border-bottom: 1px solid rgba(153, 188, 189, .16); margin-top: 2px; }
.range-baseline { position: absolute; top: 2px; height: 15px; border-left: 1px dashed rgba(191, 214, 211, .4); }
.range-span { position: absolute; top: 8px; height: 3px; background: var(--range-color); box-shadow: 0 0 10px color-mix(in srgb, var(--range-color) 25%, transparent); }
.range-mean { position: absolute; top: 4px; width: 11px; height: 11px; border: 2px solid var(--range-color); background: #071821; border-radius: 50%; transform: translateX(-50%); }
.range-current { position: absolute; top: 4px; width: 10px; height: 10px; border: 2px solid #f4eddc; background: #162e36; transform: translateX(-50%) rotate(45deg); }
.range-ends { display: flex; justify-content: space-between; color: #6f8d93; font-size: 9px; margin-top: 3px; }
.range-key { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: #809ba0; font-size: 9px; margin-top: 2px; }
.range-key span { display: inline-flex; align-items: center; gap: 5px; }
.key-mean { width: 8px; height: 8px; border: 2px solid #adbfbd; border-radius: 50%; }
.key-current { width: 8px; height: 8px; border: 1.5px solid #f4eddc; transform: rotate(45deg); }
.key-baseline { width: 1px; height: 10px; border-left: 1px dashed #8ea7a9; }

.histogram { display: flex; height: 92px; gap: 14px; align-items: end; margin-top: 13px; }
.hist-col { flex: 1; min-width: 0; display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: end; gap: 4px; }
.hist-col strong { color: #a6bcbd; font-size: 10px; font-weight: 550; }
.hist-track { width: 100%; max-width: 56px; height: 61px; display: flex; align-items: end; justify-content: center; border-bottom: 1px solid rgba(153, 188, 189, .28); }
.hist-track span { display: block; width: 72%; height: 0; background: linear-gradient(0deg, #31525e, #7aa7ad); transform-origin: center bottom; }
.hist-col.is-selected .hist-track span { background: linear-gradient(0deg, #8b704f, #eed09a); box-shadow: 0 0 13px rgba(233, 185, 105, .22); }
.hist-col small { color: #718f95; font-size: 9px; white-space: nowrap; }
.hist-note { color: #7d999d; font-size: 10px; margin: 12px 0 0; }
.analysis-detail-grid { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.17fr); border-bottom: 1px solid var(--line); }
.bridge-panel, .matrix-panel { min-width: 0; padding-top: 23px; padding-bottom: 16px; }
.bridge-panel { padding-right: 28px; border-right: 1px solid var(--line); }
.matrix-panel { padding-left: 28px; }
.bridge-total { font-size: 32px; line-height: 1; font-weight: 550; color: var(--lantern); }
.bridge-scroll { overflow-x: auto; }
.bridge-chart { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; font-family: inherit; }
.bridge-guide { stroke: rgba(233, 185, 105, .36); stroke-width: 1; stroke-dasharray: 5 5; }
.bridge-connector { stroke: rgba(171, 196, 194, .48); stroke-width: 1; stroke-dasharray: 3 3; }
.bridge-bar.is-baseline { fill: #42616a; }
.bridge-bar.is-total { fill: #e9b969; filter: drop-shadow(0 0 12px rgba(233,185,105,.24)); }
.bridge-step.is-positive { fill: var(--bridge-color); }
.bridge-step.is-negative { fill: var(--danger); }
.bridge-value { fill: #d6e5df; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bridge-value.is-total { fill: #f2cf95; }
.bridge-label { fill: #aec4c3; font-size: 11px; }
.bridge-axis { fill: #a7a780; font-size: 10px; }
.bridge-note { margin: -1px 0 0; color: #91abae; font-size: 11px; }

.matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.matrix-column { min-width: 0; }
.matrix-colhead, .matrix-row { display: grid; grid-template-columns: minmax(87px, 1fr) repeat(3, minmax(42px, 52px)); gap: 4px; align-items: center; }
.matrix-colhead { color: #96afb1; font-size: 11px; padding: 0 3px 7px; text-align: center; }
.matrix-colhead span:first-child { text-align: left; }
.matrix-row { width: 100%; min-height: 31px; padding: 2px 3px; border: 1px solid transparent; background: transparent; text-align: left; }
.matrix-row:hover { background: rgba(122, 166, 169, .09); }
.matrix-row.is-selected { border-color: rgba(233, 185, 105, .66); background: rgba(233, 185, 105, .08); }
.matrix-row:focus-visible { outline: 2px solid #f4d79c; outline-offset: 1px; }
.matrix-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b8cac8; font-size: 12px; }
.matrix-row.is-selected .matrix-name { color: #f2d2a0; font-weight: 600; }
.matrix-cell { display: block; padding: 5px 0; color: #e5f0e9; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.matrix-cell.is-below { color: #ffe7de; }
.matrix-readout { min-height: 34px; margin-top: 13px; padding-top: 9px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.matrix-readout strong { color: #e8d0a4; font-size: 12px; font-weight: 600; }
.matrix-readout span { color: #91a9ab; font-size: 11px; }

.category-list .category-body { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 8px; }
.category-ring { width: 78px; height: 78px; border-radius: 50%; position: relative; display: grid; place-items: center; flex: none; }
.category-ring::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; background: var(--ink); }
.category-list .category-ring span { position: relative; color: #d9e6df; font-size: 13px; font-weight: 600; }
.category-legend { min-width: 0; flex: 1; }
.category-list .category-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 2px 0; font-size: 10px; }
.category-list .category-legend span { display: flex; align-items: center; gap: 4px; white-space: nowrap; color: #a7bcbc; }
.category-list .category-legend i { width: 6px; height: 6px; flex: none; }
.category-list .category-legend strong { font-size: 10px; }
.category-list > small { margin-top: 5px; }

@media (max-width: 1100px) {
  .analysis-grid { grid-template-columns: 1fr; }
  .plot-panel { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .analysis-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .range-panel { padding: 20px 23px 17px 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .hist-panel { padding: 20px 0 17px 23px; }
  .analysis-detail-grid { grid-template-columns: 1fr; }
  .bridge-panel { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .matrix-panel { padding-left: 0; }
}

@media (max-width: 760px) {
  .analysis-deck { padding: 24px 0 28px; }
  .analysis-heading { display: block; margin-bottom: 17px; }
  .analysis-heading h2 { font-size: 22px; }
  .analysis-heading > span { display: block; margin-top: 10px; }
  .analysis-side { grid-template-columns: 1fr; }
  .range-panel { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .hist-panel { padding-left: 0; }
  .plot-readout { display: block; }
  .plot-readout span { display: block; margin-top: 4px; }
  .bridge-chart { min-width: 570px; }
  .matrix-grid { grid-template-columns: 1fr; gap: 13px; }
  .matrix-colhead, .matrix-row { grid-template-columns: minmax(103px, 1fr) repeat(3, minmax(46px, 56px)); }
  .matrix-row { min-height: 35px; }
}