:root{--body:#2b2d2f;--body-light:#4a4d50;--body-dark:#1a1c1d;--lcd:#8ba8a0;--lcd-dim:#6f8a80;--lcd-text:#1a2420;--led:#ff2a2a;--btn:#3d4043;--btn-active:#606568;--accent:#f90;--white:#e8e6e3}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--white);-webkit-text-size-adjust:100%;touch-action:none;background:#101010;margin:0;padding:0;font-family:Courier New,Courier,monospace;overflow:hidden}#app{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;display:flex}#camera-body{background:linear-gradient(145deg, var(--body-light), var(--body));border:4px solid var(--body-dark);border-radius:24px;flex-direction:column;align-items:center;gap:.8rem;width:min(96vw,900px);max-width:100%;padding:1rem;display:flex;position:relative;box-shadow:inset 0 0 0 2px #0000004d,0 12px 30px #0009}#status-lcd{background:var(--lcd-dim);width:100%;color:var(--lcd-text);letter-spacing:1px;border:2px inset #00000040;border-radius:8px;justify-content:space-between;align-items:center;padding:.4rem .8rem;font-size:clamp(.7rem,2.2vw,1rem);font-weight:700;display:flex;box-shadow:inset 0 1px 2px #0000004d}.status-segment{text-align:center;min-width:2.4em}#shots-remaining{font-variant-numeric:tabular-nums}#viewfinder-housing{aspect-ratio:4/3;border:6px solid var(--body-dark);width:100%;box-shadow:inset 0 0 20px #000, 0 0 0 2px var(--body-light);background:#050505;border-radius:12px;position:relative;overflow:hidden}#viewfinder{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block}#menu-overlay,#playback-overlay,#osd{pointer-events:none;position:absolute;inset:0}#menu-overlay{color:var(--lcd-text);background:#0a140feb;flex-direction:column;padding:1rem;font-size:clamp(.75rem,2.2vw,1.1rem);display:flex}#menu-header{background:var(--lcd);text-transform:uppercase;border-radius:4px 4px 0 0;padding:.3rem .6rem;font-weight:700}#menu-body{background:#8ba8a026;flex:1;padding:.5rem;overflow-y:auto}#menu-body ul{margin:0;padding:0;list-style:none}#menu-body li{border-bottom:1px solid #8ba8a033;justify-content:space-between;padding:.35rem .6rem;display:flex}#menu-body li.selected{background:var(--lcd);color:#000;border-radius:3px}#menu-footer{text-align:center;background:#0006;padding:.3rem;font-size:.75em}#playback-overlay{background:#000;flex-direction:column;justify-content:center;align-items:center;padding:.5rem;display:flex}#playback-img{max-width:100%;max-height:88%;image-rendering:pixelated;image-rendering:crisp-edges;object-fit:contain}#playback-hud{width:100%;color:var(--accent);justify-content:space-between;padding:.3rem .6rem;font-size:.85rem;font-weight:700;display:flex}#osd{color:var(--accent);text-align:center;background:#0009;justify-content:center;align-items:center;font-size:clamp(1rem,3vw,1.6rem);font-weight:700;display:flex}#controls{grid-template-columns:1fr 1.2fr 1fr auto;place-items:center;gap:.6rem;width:100%;display:grid}#d-pad{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr 1fr;gap:.15rem;display:grid}#btn-up{grid-area:1/2}#btn-left{grid-area:2/1}#btn-right{grid-area:2/3}#btn-down{grid-area:2/2}button{background:var(--btn);color:var(--white);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:1px solid #111;border-radius:6px;padding:.5rem .7rem;font-family:inherit;font-size:clamp(.7rem,1.8vw,1rem);transition:transform 50ms,background 50ms;box-shadow:0 3px #111}button:active,button.pressed{background:var(--btn-active);transform:translateY(3px);box-shadow:0 0 #111}#btn-shutter{color:#fff;background:radial-gradient(circle at 30% 30%,#d44,#811);border:3px solid #400;border-radius:50%;justify-content:center;align-items:center;width:3.5rem;height:3.5rem;font-size:1.6rem;display:flex}#btn-shutter.primary:active{background:#f66}#aux-controls{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}#btn-mute{border-radius:6px;padding:.4rem;font-size:.9rem}#exif-panel{border:2px solid var(--body-light);z-index:100;background:#1a1a1a;border-radius:10px;width:min(90vw,520px);max-height:85vh;padding:1rem;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 10px 40px #000c}#exif-panel h2{color:var(--accent);margin:0 0 .6rem;font-size:1.1rem}#exif-panel table{border-collapse:collapse;width:100%;font-size:.85rem}#exif-panel td{border-bottom:1px solid #333;padding:.25rem .4rem}#exif-panel td:first-child{color:#aaa;width:45%}#exif-panel td:last-child{color:#eee}#exif-close{color:#aaa;box-shadow:none;background:0 0;border:none;font-size:1.4rem;position:absolute;top:.3rem;right:.4rem}#gallery-overlay{z-index:10;background:#0a0f14f2;flex-direction:column;padding:.75rem;display:flex;position:absolute;inset:0}#gallery-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));align-content:start;gap:.6rem;display:grid;overflow-y:auto}.gallery-thumb{aspect-ratio:4/3;object-fit:contain;border:2px solid var(--body-light);cursor:pointer;width:100%;image-rendering:pixelated;background:#151515;border-radius:4px}.gallery-thumb:hover{border-color:var(--accent)}#gallery-actions{justify-content:space-between;padding-top:.5rem;display:flex}#help{color:#999;text-align:center;max-width:90%;margin-top:.6rem;font-size:clamp(.65rem,1.6vw,.85rem)}#help p{margin:0}.hidden{display:none!important}.recording-led{background:#300;border-radius:50%;width:10px;height:10px;position:absolute;top:6px;right:6px;box-shadow:inset 0 0 2px #000}.recording-led.on{background:var(--led);box-shadow:0 0 8px var(--led)}@media (width<=600px){#camera-body{border-radius:16px;padding:.6rem}#controls{grid-template-columns:1fr 1fr;gap:.5rem}#d-pad{order:1}#btn-shutter{order:2}#aux-controls{order:3;grid-column:1/-1}#btn-mute{order:4;grid-column:2;justify-self:end}#help{display:none}}