*{box-sizing:border-box}body{background:#211923;color:#f6ede5;margin:0;font:16px system-ui}main{max-width:1180px;margin:auto;padding:30px}header{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #755a6a;padding-bottom:25px;font-size:27px;letter-spacing:.15em}header span{font-size:10px;align-self:center}h1{font:clamp(40px,6vw,66px) Georgia;margin:30px 0 15px}.intro{max-width:900px;line-height:1.7;color:#d6c3cf}.workspace{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;margin-top:30px}.spectral,.detector{background:#302231;border:1px solid #745569;border-radius:14px;overflow:hidden}.spectral{padding:24px}h2{font:30px Georgia;margin-top:0}p{line-height:1.6}#bands{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}.band{height:124px;padding:9px 4px;background:#251a29;border:1px solid #88667a;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;font-size:13px}.band[aria-pressed=true]{outline:3px solid #f6bd6a;background:#574044}.bars{display:flex;align-items:end;height:48px;gap:6px}.bars i{width:12px;background:#f4be71}.bars i+ i{background:#bb87d1}.band small{font-size:10px}.legend{font-size:12px;color:#cfb4cc;line-height:1.5}label{display:flex;justify-content:space-between;margin-top:25px}input{width:100%;accent-color:#f5bd78;margin:22px 0}.view{position:relative;height:240px;overflow:hidden}.view img{width:100%;height:100%;object-fit:cover}.view-label{position:absolute;bottom:14px;left:15px;font:12px ui-monospace,monospace;background:#211923cc;padding:7px}#shutter{position:absolute;inset:0;background:#211923;opacity:.9;transition:opacity .4s}.readout{padding:24px}.readout small{color:#dfb98d;font-size:11px;letter-spacing:.12em}.readout h2{margin:16px 0}#requirements{font-size:14px;line-height:1.6;color:#dfb98d}dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:14px}dd{text-align:right;margin:0;font-family:ui-monospace,monospace}dt{color:#cbb6c6}button{font:inherit;color:#f8eee9;background:#4b3449;border:1px solid #a78395;border-radius:6px;min-height:46px;padding:11px;cursor:pointer}#expose{width:100%;background:#f4be71;color:#302231;font-weight:700}.buttons{display:flex;gap:12px;margin-top:16px}#feedback{border-left:3px solid #f4be71;padding-left:14px;min-height:90px}details{margin-top:26px;line-height:1.7;color:#d3bfcf}@media(max-width:650px){main{padding:16px}header span{max-width:130px}.workspace{grid-template-columns:1fr}.spectral{padding:18px}#bands{gap:8px}.band{font-size:12px}.band small{font-size:9px}.view{height:250px}}