
/* Complete camera mockup; all controls share one layout and never crop. */
.capture-preview{container-type:inline-size;position:relative;aspect-ratio:414/900;background:#121110;color:#eee9df;overflow:hidden;border-radius:inherit;display:flex;flex-direction:column;font-family:Barlow,Arial,sans-serif;text-align:left}
.cap-island{height:7.5%;flex:none;position:relative;background:#080808}
.cap-island:after{content:'';position:absolute;width:31%;height:48%;left:34.5%;top:22%;background:#000;border-radius:6cqw}
.cap-header{height:4.7%;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 4cqw;font-size:2.8cqw;letter-spacing:.1cqw}
.cap-header>span:first-child{padding:1.5cqw 2cqw;border-radius:5cqw;background:#28251b;font-weight:500}.cap-header svg{width:5cqw;height:5cqw}
.cap-photo{height:61.3%;flex:none;position:relative}.cap-photo>img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0!important}.cap-lenses{position:absolute;bottom:2%;left:24%;right:24%;display:flex;justify-content:space-around;align-items:center;background:#17151275;border-radius:9cqw;padding:1cqw;font-size:3cqw;color:#c0b7a7}.cap-lenses b{background:#f3b532;color:#171512;border-radius:50%;padding:1.7cqw}
.cap-films{height:9.5%;flex:none;display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:1.3cqw;padding:1.7cqw 1.5cqw}.cap-films>div{display:flex;flex-direction:column;justify-content:center;min-width:0;border:1px solid #39352e;border-radius:3cqw;padding:1.7cqw 2.2cqw;background:#191816}.cap-films b{font:600 4.8cqw/1.1 Condensed,Arial,sans-serif;white-space:nowrap}.cap-films small{font-size:2.15cqw;line-height:1.2;margin-top:1.4cqw;color:#aaa396;white-space:nowrap}.cap-films .selected{border:1.2px solid #f3b532;background:#2b251a;box-shadow:inset 1.1cqw 0 var(--stripe);padding-left:3cqw}.cap-films .selected b{color:#f3b532;font-size:5.2cqw}.cap-films .selected small{color:#eee9df;font-size:1.95cqw}
.cap-effects{height:6%;flex:none;display:flex;gap:1.1cqw;padding:.6cqw 1.5cqw}.cap-effects>span{flex:1;min-width:0;border:1px solid #f3b532;border-radius:3cqw;display:flex;flex-direction:column;justify-content:center;align-items:center;font:600 4cqw/1.1 Condensed,Arial,sans-serif}.cap-effects small{font-size:2.1cqw;letter-spacing:.1cqw;color:#a49b8b;margin-bottom:.7cqw}.cap-effects .off{border-color:#39352e}
.cap-bottom{height:11%;flex:none;display:flex;align-items:center;justify-content:space-between;padding:1cqw 5cqw 3cqw;gap:3cqw}.cap-bottom>img{width:13%;height:62%;object-fit:cover;border:1px solid #39352e;border-radius:3cqw!important}.cap-bottom>span{display:flex;align-items:center;justify-content:center;width:13cqw;height:13cqw;border-radius:50%;background:#26231c;font:600 3cqw Condensed,Arial,sans-serif}.cap-shutter{display:block;width:21cqw;height:21cqw;border:1cqw solid #f0ece3;border-radius:50%;padding:1.5cqw;background:#f0ece3;background-clip:content-box;flex:none}.cap-grid svg{width:7cqw;height:7cqw}

/* Emulsine 1.2.1: stacked exposure readouts and the current capture controls. */
.cap-header{height:7%;gap:1.5cqw;padding:0 3cqw;letter-spacing:0}
.cap-header>.cap-recording{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35cqw;width:23cqw;flex:none;padding:1.1cqw .8cqw;border-radius:6cqw;background:#28251b}
.cap-recording b{display:flex;align-items:center;gap:1cqw;font:600 3.1cqw/1.1 Condensed,Arial,sans-serif;white-space:nowrap}
.cap-recording i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:#f3b532;flex:none}
.cap-recording small{font:2.3cqw/1.1 ui-monospace,monospace;color:#99958a}
.cap-readouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:.65cqw;flex:1;min-width:0;color:#99958a}
.cap-readouts>span{display:flex;flex-direction:column;align-items:center;gap:1cqw;min-width:0;white-space:nowrap}
.cap-readouts small,.cap-readouts b{font:2.65cqw/1.1 ui-monospace,monospace;letter-spacing:-.08cqw}
.cap-settings{display:grid;place-items:center;flex:none;width:9.5cqw;height:9.5cqw;background:#26231c;border:1px solid #39352e;border-radius:50%}
.cap-settings svg{width:5.3cqw;height:5.3cqw}
.cap-photo{height:59%}
.cap-shutter{width:17cqw;height:17cqw;border-width:.9cqw;padding:1.6cqw}
.cap-bottom>.cap-frame{flex-direction:column;gap:.5cqw}
.cap-frame svg{width:4.6cqw;height:4.6cqw}
.cap-frame b{font:2.8cqw/1 ui-monospace,monospace;font-weight:400}
.cap-camera-switch svg{width:7cqw;height:6.5cqw}
