body { font-family: Georgia, "Times New Roman", serif; max-width: 960px; margin: 0 auto;
       padding: 0 20px 60px; color: #222; background: #fdfdfa; line-height: 1.55; }
header { border-bottom: 3px double #222; margin-bottom: 24px; padding-top: 12px; }
h1 { font-size: 30px; margin: 0 0 4px; font-weight: normal; }
.sub { color: #555; margin-top: 0; }
h2 { font-size: 21px; font-weight: normal; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
.explainer p { max-width: 70ch; }
.note, .fine { color: #666; font-size: 14px; }
.thumbs { display: flex; gap: 12px; flex-wrap: wrap; }
.thumb { border: 1px solid #999; background: #000; cursor: pointer; padding: 0; width: 150px; }
.thumb img { width: 100%; display: block; }
.thumb span { display: block; font-size: 13px; padding: 4px 6px; background: #fff; color: #222; text-align: left; }
.thumb.active { outline: 3px solid #b3352b; }
.viewer { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.imagebox { flex: 1 1 420px; }
.imagebox img { width: 100%; background: #000; display: block; }
.toggle { margin-top: 8px; }
.toggle button { font-family: inherit; font-size: 15px; padding: 6px 14px; border: 1px solid #666;
                 background: #fff; cursor: pointer; }
.toggle button.active { background: #222; color: #fff; }
.result { flex: 1 1 260px; border: 1px solid #999; padding: 16px 20px; background: #fff; align-self: flex-start; }
.result h2 { border: none; margin: 0 0 8px; padding: 0; }
.big { font-size: 44px; }
.big .unit { font-size: 15px; color: #555; margin-left: 8px; }
.ci { margin: 6px 0; font-size: 15px; }
.cibar { position: relative; height: 10px; background: #eee; border: 1px solid #bbb; margin: 4px 0 14px; }
#cifill { position: absolute; top: 0; bottom: 0; background: #b3352b; opacity: 0.55; }
#cidot { position: absolute; top: -3px; width: 3px; height: 16px; background: #222; }
.result table { border-collapse: collapse; font-size: 14px; width: 100%; }
.result td { padding: 3px 0; border-top: 1px dotted #ccc; }
.result td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.upload-result { margin-top: 12px; }
.upload-result img { max-width: 420px; background: #000; display: block; }
ol li { margin-bottom: 10px; max-width: 75ch; }
a { color: #1a4f8a; }

/* Added sections: pipeline overlays, across-patients histogram. */
.overlays { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.overlays figure { margin: 0; width: 170px; }
.overlays img { width: 100%; display: block; background: #000; border: 1px solid #999; }
.overlays figcaption { font-size: 13px; color: #555; margin-top: 4px; }
.statrow { display: flex; gap: 28px; flex-wrap: wrap; margin: 16px 0; }
.stat { display: flex; flex-direction: column; }
.statnum { font-size: 32px; }
.statlbl { font-size: 13px; color: #666; }
#hist { width: 100%; height: 280px; border: 1px solid #ccc; background: #fff; }

/* Production pipeline section. */
nav { margin-top: 10px; }
nav a { margin-right: 18px; font-size: 15px; }
h3 { font-size: 18px; font-weight: normal; margin: 28px 0 6px; }
section p, section ol { max-width: 78ch; }
code { font-size: 13px; }
.flow { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.fbox { border: 1px solid #999; background: #fff; padding: 8px 10px; font-size: 14px;
        text-align: center; flex: 1 1 0; min-width: 100px; }
.fbox span { display: block; font-size: 12px; color: #666; margin-top: 2px; }
.farrow { align-self: center; color: #666; }
.datatable { border-collapse: collapse; font-size: 14px; margin: 12px 0; max-width: 100%; }
.datatable th, .datatable td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; vertical-align: top; }
.datatable th { background: #f0ede6; font-weight: normal; }
.datatable td.num, .datatable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: 2px 10px; font-size: 13px; border: 1px solid; white-space: nowrap; }
.badge.present { color: #8a1f16; border-color: #8a1f16; background: #fbeeea; }
.badge.absent { color: #2f6b2f; border-color: #2f6b2f; background: #eef5ee; }
.sweepfig { margin: 16px 0; }
.sweepfig img { max-width: 100%; border: 1px solid #ccc; background: #fff; }
.sweepfig figcaption { font-size: 13px; color: #555; margin-top: 4px; }

/* Slice viewer: stacked CT + overlay, controls, stepper, sweep explorer. */
.stack { position: relative; background: #000; }
.stack img { width: 100%; display: block; }
.stack img.overlay { position: absolute; top: 0; left: 0; display: none; pointer-events: none; }
.vcontrols { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.vcontrols input[type="range"] { flex: 1; }
.ghostbtn { font-family: inherit; font-size: 16px; padding: 4px 12px; border: 1px solid #666;
            background: #fff; cursor: pointer; }
.ghostbtn:hover { background: #f0ede6; }

.stepper { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.stepbtn { font-family: inherit; font-size: 15px; padding: 8px 16px; border: 1px solid #999;
           background: #fff; cursor: pointer; }
.stepbtn.active { background: #222; color: #fff; border-color: #222; }
.stagepanel { display: none; border: 1px solid #999; background: #fff; padding: 16px 20px; margin-top: 8px; }
.stagepanel.active { display: block; }
.stagepanel h3 { margin-top: 0; }

#sweep-chart-wrap { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin: 12px 0; }
#sweep-chart { flex: 1 1 480px; background: #fff; border: 1px solid #ccc; }
.sweepdetail { flex: 1 1 260px; border: 1px solid #999; background: #fff; padding: 12px 16px; }
.sweepdetail h3 { margin-top: 0; font-size: 16px; }

/* Analyze-your-own-scan section. */
.cloudbar { height: 12px; background: #eee; border: 1px solid #bbb; margin: 10px 0; max-width: 480px; }
#cloud-fill { height: 100%; width: 0; background: #1a4f8a; }
#cloud-result .overlays figure { width: 220px; }
#cloud-start:disabled { opacity: 0.5; cursor: wait; }