body { font-family: system-ui, sans-serif; margin: 0; background: #101418; color: #e8ecef; }
header { padding: 16px 20px 8px; }
header h1 { margin: 0; font-size: 28px; }
.sub { color: #9fb0bd; margin: 4px 0 0; }
main { padding: 0 20px 24px; max-width: 1100px; }
.controls { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
.controls label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
select { background: #1c232b; color: #e8ecef; border: 1px solid #3a4653; border-radius: 6px; padding: 6px 8px; }
.viewerWrap { background: #000; border: 1px solid #2c3640; border-radius: 8px; }
#gl { width: 100%; height: 640px; display: block; cursor: crosshair; }
#fallback { text-align: center; padding: 8px; }
#sliceImg { max-width: 100%; max-height: 600px; background: #000; }
.sliceBar { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 8px; }
#sliceSlider { width: 60%; }
.planeBar { display: flex; gap: 8px; justify-content: center; padding: 8px; }
.planeBtn { background: #1c232b; color: #e8ecef; border: 1px solid #3a4653; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.planeBtn.on { border-color: #38bdf8; color: #38bdf8; }
.meta { color: #9fb0bd; font-size: 14px; }
.note { font-size: 13px; }