@import url("module13.css");

.range-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.range-control input { width: 100%; accent-color: #0f6681; }
.range-control output { min-width: 64px; text-align: right; color: #0f6681; font-weight: bold; font-size: 14px; }
.chart-panel.wide { grid-column: 1 / -1; }
.chart { height: 280px; }
.chart-panel.wide .chart { height: 340px; }
.bit-input { letter-spacing: 1px; }
.experiment-detail { padding: 4px 2px 8px; }
.experiment-detail h2 { padding-bottom: 10px; border-bottom: 1px solid #cddde3; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 12px; }
.detail-grid > div { min-width: 0; }
.detail-grid h3 { margin: 0 0 8px; color: #18566b; font-size: 15px; }
.detail-grid p, .detail-grid li { margin: 0 0 8px; color: #334155; font-size: 13px; line-height: 1.7; }
.detail-grid ul { margin: 0; padding-left: 19px; }
.detail-grid code { overflow-wrap: anywhere; color: #115e72; }
.detail-grid .live-interpretation { margin-top: 10px; padding-left: 10px; border-left: 3px solid #c2410c; color: #7c3513; font-weight: bold; }
.data-panel { min-width: 0; padding: 18px 20px; }
.data-panel h2 { margin-bottom: 12px; font-size: 16px; }
.table-scroll { max-height: 340px; overflow: auto; }
.data-panel table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.data-panel th, .data-panel td { padding: 9px 10px; border-bottom: 1px solid #e1eaee; text-align: right; white-space: nowrap; }
.data-panel th { position: sticky; top: 0; background: #f1f7f9; color: #24566b; }
.data-panel td:first-child, .data-panel th:first-child { text-align: left; }
.data-panel tr.is-error td { color: #b42318; font-weight: bold; }
@media (max-width: 760px) { .chart-panel.wide .chart { height: 280px; } .detail-grid { grid-template-columns: 1fr; gap: 8px; } .data-panel { padding: 16px; } }