@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');*{box-sizing:border-box}body{margin:0;background:#272b30;background-image:radial-gradient(ellipse at 50% 0,#555a63,transparent 65%);color:#ddd9ce;font-family:'DM Sans',sans-serif;min-height:100vh}main{max-width:1100px;margin:auto;padding:35px 40px}.topline,footer{display:flex;justify-content:space-between;font:10px 'IBM Plex Mono',monospace;letter-spacing:1.5px;color:#aaaeb3}.camera{margin:35px auto 28px;background:linear-gradient(135deg,#dadce0 0,#a3a6ad 30%,#c4c6cd 48%,#8e929b 100%);padding:28px 35px 20px;border-radius:38px 46px 46px 38px;box-shadow:inset 0 3px 2px #fff9,inset 0 -7px 9px #42464f,0 25px 45px #0008,0 0 0 2px #777c85;color:#333943;position:relative}.branding{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.branding strong{font-size:25px;letter-spacing:-1px;text-shadow:0 1px #fffa;font-style:italic}.branding strong span{font-weight:400}.branding small{display:block;font-size:11px;font-style:italic;letter-spacing:1.3px}.spec{font:bold 10px 'IBM Plex Mono',monospace;letter-spacing:2px;margin-left:auto;margin-right:30px}.flash{width:88px;height:30px;border:4px solid #858993;border-radius:7px;background:repeating-linear-gradient(90deg,#ddd9c7 0 3px,#c3bcab 3px 4px);box-shadow:0 1px 1px #eee}.camera-body{display:grid;grid-template-columns:1fr 160px;gap:30px}.screen-frame{padding:16px 16px 12px;background:linear-gradient(130deg,#3a3e45,#15181c);border-radius:14px;box-shadow:0 2px 2px #e7e9ee,inset 0 2px 6px #000}.screen{position:relative;background:#101712;aspect-ratio:1.5;overflow:hidden;border:2px solid #030605;box-shadow:inset 0 0 15px #000;color:#edf7e9;font:11px 'IBM Plex Mono',monospace}.screen:after{content:'';pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#0000000b 3px 4px);box-shadow:inset 0 0 35px #0004}.photo{position:absolute;inset:0;background-image:url('montage.png');background-size:300% 200%;background-position:0% 0%;transition:filter .15s}.photo.index{background-size:100% 100%;background-position:center!important}.photo.zoomed{transform:scale(1.3)}.screen-top,.screen-bottom{position:absolute;left:0;right:0;z-index:2;display:flex;justify-content:space-between;padding:12px;text-shadow:1px 1px 2px #000,0 0 3px #000;background:linear-gradient(#0005,transparent)}.screen-bottom{bottom:0;background:linear-gradient(transparent,#0005)}.screen-brand{color:#969b9d;font-size:9px;letter-spacing:2px;margin-top:11px;text-align:center}.screen-brand span{margin-left:20px}.controls{text-align:center}.light{font:8px 'IBM Plex Mono',monospace;letter-spacing:1px;margin:7px 0 22px}.light i{display:inline-block;width:7px;height:7px;background:#a8db56;border-radius:50%;box-shadow:0 0 5px #b3ef53;margin-right:5px}button{cursor:pointer;color:#343a43;border:1px solid #707680;background:linear-gradient(#e4e6ea,#a6aab2);box-shadow:0 3px 3px #545963,inset 0 1px #fff;font:12px 'IBM Plex Mono',monospace}button:active,button.active{background:linear-gradient(#8e959f,#bcc2cc);box-shadow:inset 0 2px 3px #555}.zoom{width:124px;border-radius:17px;padding:9px;display:flex;justify-content:space-between;margin:auto}.mode{font-size:8px;letter-spacing:1px;margin:27px 0 12px}.dpad{width:125px;height:125px;margin:auto;border-radius:50%;background:linear-gradient(135deg,#e2e4e8,#969ba4);box-shadow:0 3px 4px #50545d,inset 0 2px #fff;position:relative;border:1px solid #747983}.dpad button{position:absolute;border:0;box-shadow:none;background:none;padding:8px}.dpad .up{left:47px;top:2px}.dpad .down{left:47px;bottom:2px}.dpad .left{left:1px;top:47px}.dpad .right{right:1px;top:47px}.dpad .ok{left:40px;top:40px;width:43px;height:43px;background:linear-gradient(#babfc8,#d5d9e0);border:1px solid #7f8790;border-radius:50%;font-size:10px;box-shadow:0 1px 3px #666}.small-buttons{display:flex;justify-content:center;gap:20px;margin-top:22px}.small-buttons button{width:42px;height:32px;border-radius:12px}.small-buttons small{display:block;font-size:7px;margin-top:12px}.sheet-link{display:block;font:8px 'IBM Plex Mono',monospace;margin-top:31px;color:#414854}.grip{margin:18px 10px 0;height:30px;background:repeating-linear-gradient(0deg,transparent 0 5px,#757b863d 5px 7px);border-radius:8px}.camera-footer{display:flex;justify-content:space-between;align-items:center;font:8px 'IBM Plex Mono',monospace;letter-spacing:1px;margin-top:18px}.screw{font-size:17px;color:#767b84}.caption{display:flex;align-items:center;gap:20px;padding:10px 15px 25px}.caption>#number{font:38px 'IBM Plex Mono',monospace;color:#8f969e}h1{font-size:23px;margin:0 0 7px;letter-spacing:-.5px}p{font-size:13px;color:#acb1b7;margin:0}.handwritten{font-family:Georgia,serif;font-style:italic;color:#d8b76f;margin-left:auto;transform:rotate(-6deg)}.filmstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:18px 15px;background:#191c20;border:1px solid #444950;border-radius:8px}.thumb{aspect-ratio:1.3;padding:0;border:3px solid #53575e;border-radius:3px;position:relative;background-image:url('montage.png');background-size:300% 200%;box-shadow:none}.thumb.active{border-color:#dfbd70;box-shadow:0 0 0 1px #dfbd70}.thumb span{position:absolute;bottom:3px;left:5px;font:9px 'IBM Plex Mono',monospace;color:white;text-shadow:0 1px 3px black}footer{padding:25px 0;letter-spacing:.8px}a:focus-visible,button:focus-visible{outline:3px solid #eac679;outline-offset:4px}@media(max-width:700px){main{padding:20px 15px}.topline span:last-child{display:none}.camera{margin-top:25px;padding:20px 17px;border-radius:25px}.camera-body{grid-template-columns:1fr;gap:16px}.controls{display:flex;align-items:center;justify-content:space-around;gap:10px}.controls .light,.controls .mode,.controls .grip,.controls .sheet-link{display:none}.dpad{width:96px;height:96px;flex-shrink:0}.dpad .up{left:33px;top:0}.dpad .down{left:33px;bottom:0}.dpad .left{top:33px;left:0}.dpad .right{top:33px;right:0}.dpad .ok{left:29px;top:29px;width:36px;height:36px}.zoom{width:80px;margin:0}.small-buttons{margin:0;gap:10px}.small-buttons small{margin-top:9px}.spec{font-size:7px;margin-right:12px;letter-spacing:0}.flash{width:50px;height:23px}.branding strong{font-size:21px}.screen-frame{padding:10px}.screen-top,.screen-bottom{font-size:9px;padding:8px}.caption{padding:8px 0 20px;gap:12px}.handwritten{display:none}h1{font-size:19px}.filmstrip{grid-template-columns:repeat(3,1fr);padding:12px;gap:10px}footer{gap:20px;font-size:8px}.camera-footer{font-size:7px}}
.thumb.active{background-image:url('montage.png');background-size:300% 200%}

.screen-bottom{justify-content:flex-end}.branding strong{font-size:22px}@media(max-width:700px){.branding strong{font-size:16px}}
/* Full-viewport camera surface. */
html,body{height:100%;min-height:100%;overflow:hidden}
main{width:100%;height:100dvh;max-width:none;margin:0;padding:0;display:flex;align-items:stretch;justify-content:center}
.topline,.caption,.filmstrip,main>footer{display:none}
.camera{width:100%;height:100%;margin:0;padding:clamp(16px,3vh,35px) clamp(16px,3vw,40px);border-radius:0;display:flex;flex-direction:column;box-shadow:inset 0 3px 2px #fff9,inset 0 -7px 9px #42464f}
.branding{flex-shrink:0;margin-bottom:clamp(12px,3vh,23px)}
.camera-body{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 160px;align-items:center}
.screen-frame{height:100%;min-height:0;display:flex;flex-direction:column}
.screen{flex:1;min-height:0;aspect-ratio:auto}
.photo{background-size:300% 200%}
.screen-brand,.camera-footer{flex-shrink:0}
.controls{align-self:center}
@media(max-width:700px){
.camera{padding:16px;border-radius:0}
.camera-body{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.screen-frame{flex:1;height:auto;min-height:0}
.controls{flex-shrink:0;width:100%;align-self:auto}
.camera-footer{margin-top:16px}
}

.social-links{display:flex;gap:10px;margin-left:24px;align-items:center}.social-links button,.social-links a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:10px 14px;border:1px solid #707680;border-radius:12px;background:linear-gradient(#e4e6ea,#a6aab2);box-shadow:0 3px 3px #545963,inset 0 1px #fff;color:#343a43;font:10px 'IBM Plex Mono',monospace;text-decoration:none;white-space:nowrap}.social-links button:first-child,.social-links a:first-child{font-size:18px;min-width:40px}.social-links button:disabled{cursor:default;opacity:.65}@media(max-width:700px){.branding{flex-wrap:wrap;gap:12px}.social-links{margin-left:0}.spec{margin-left:auto}.flash{display:none}.social-links button,.social-links a{padding:8px 10px;min-height:32px;font-size:9px}}