:root { color-scheme:light; font:16px/1.5 system-ui,-apple-system,sans-serif; color:#20252a; background:#fff; }
* { box-sizing:border-box; } body { margin:0; padding:16px; } main { max-width:600px; margin:auto; }
h1 { font-size:22px; line-height:1.25; margin:0 0 8px; } p { margin:0 0 12px; } .intro,.scene-caption { color:#59616a; }
svg { display:block; width:100%; height:auto; } .scene { margin-top:16px; }
.scene-caption { font-size:12px; text-align:center; margin:6px 0 12px; }
.inset-label { fill:#303b43; font:600 20px system-ui,sans-serif; }
.references { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:16px; font-size:13px; }
.references em { display:block; font-style:normal; font-weight:600; }
.references > span { border-top:3px solid #176eae; padding-top:5px; } .references b { display:block; font-weight:400; color:#59616a; }
.fog-control label { display:flex; justify-content:space-between; gap:8px; font-weight:600; }
output { color:#9f1030; } input[type=range] { display:block; width:100%; margin:0; min-height:44px; accent-color:#be1237; cursor:pointer; }
.range-labels { display:flex; justify-content:space-between; font-size:12px; color:#59616a; margin-top:-4px; }
fieldset { padding:0; margin:14px 0 0; border:0; min-width:0; } legend { padding:0; font-weight:600; margin-bottom:4px; }
.light-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.light-options label { display:flex; align-items:center; gap:7px; padding:9px; min-height:44px; border:1px solid #a6adb3; border-radius:4px; cursor:pointer; font-size:14px; }
.light-options label:has(:checked) { border-color:#be1237; background:#fff1f4; }
input { accent-color:#be1237; } input[type=checkbox],input[type=radio] { flex-shrink:0; margin:0; width:16px; height:16px; }
:focus-visible { outline:3px solid #245bba; outline-offset:3px; }
.guidance { margin:16px 0 0; padding-left:12px; border-left:3px solid #be1237; font-size:14px; min-height:4.5em; }
details { font-size:13px; color:#59616a; } summary { min-height:44px; padding:12px 0; cursor:pointer; color:#9f1030; }
a { color:#9f1030; text-underline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:420px) { body { padding:12px; } h1 { font-size:20px; } .light-options label { font-size:13px; padding:8px; } }