/* A photographed camera. The LCD and its physical controls are real HTML. */
:root{--camera-bg:#020202}
html{min-height:100%;background:var(--camera-bg)}
body{min-height:100svh;background:var(--camera-bg);display:flex;flex-direction:column;overflow-x:hidden}
.masthead{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding:26px var(--gutter) 0;position:relative;z-index:2}
.brand{text-decoration:none;font-size:15px;font-weight:500;letter-spacing:-.025em;white-space:nowrap;line-height:1.2}
.brand span{display:block;margin-top:8px;font:8px/1.3 var(--mono);letter-spacing:.07em;color:var(--muted)}
.masthead nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 20px;max-width:65%;padding-top:3px}
.masthead nav a{font:9px/1.4 var(--mono);color:var(--muted);text-decoration:none;transition:color .2s}
.masthead nav a:hover{color:var(--ink)}
#archive{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 var(--gutter)}
.camera-object{position:relative;width:min(78vw,1180px,calc((100svh - 260px)*1.5));max-width:100%;aspect-ratio:3/2;margin:16px auto}
.camera-photo{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
/* Asset geometry: all values refer to the full photographic source canvas. */
.camera-object{--screen-x:11.5234%;--screen-y:32.8125%;--screen-w:53.0%;--screen-h:50.3906%;--pad-x:72.9167%;--pad-y:41.9922%}
.lcd{position:absolute;left:var(--screen-x);top:var(--screen-y);width:var(--screen-w);height:var(--screen-h);background:#080808;border-radius:1px;overflow:hidden;isolation:isolate}
.lcd-frame{display:block;width:100%;height:100%;position:absolute;inset:0;cursor:zoom-in}
.lcd-frame img{display:block;width:100%;height:100%;object-fit:contain}
.lcd-information{position:absolute;inset:0;pointer-events:none;padding:3.5%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:2px;font:clamp(5px,.67vw,10px)/1.3 var(--mono);color:#fff;text-shadow:0 1px 3px #000,0 0 8px #000}
.lcd-title{grid-column:1/-1;grid-row:3;max-width:95%;font-size:.95em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.lcd-information[hidden],.lcd-grid[hidden],.lcd-frame[hidden],.lcd-error[hidden]{display:none}
.lcd-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;padding:3px;background:#080808}
.lcd-grid button{position:relative;min-width:0;min-height:0;overflow:hidden;opacity:.7}
.lcd-grid button[aria-current=true]{opacity:1;outline:1px solid #fff;outline-offset:-1px}
.lcd-grid button:hover,.lcd-grid button:focus-visible{opacity:1;outline:1px solid #fff;outline-offset:-1px}
.lcd-grid img{width:100%;height:100%;object-fit:cover}
.lcd-error{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;margin:0;background:#080808;font:clamp(7px,.75vw,11px)/1.5 var(--mono);text-align:center;color:var(--muted)}
.camera-key{position:absolute;z-index:3;width:3.3%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;transition:box-shadow .18s,background .18s}
.camera-key:hover{background:#ffffff0c;box-shadow:0 0 0 1px #ffffff4d}
.camera-key:active{background:#ffffff20}
.camera-key:focus-visible{outline:2px solid #fff;outline-offset:3px}
.key-open{left:72.6563%;top:55.2734%;width:6.12%}
.key-previous{left:calc(var(--pad-x) - 3.125%);top:var(--pad-y)}
.key-next{left:calc(var(--pad-x) + 3.125%);top:var(--pad-y)}
.key-up{left:var(--pad-x);top:calc(var(--pad-y) - 4.6875%)}
.key-down{left:var(--pad-x);top:calc(var(--pad-y) + 4.6875%)}
.key-grid{left:72.5911%;top:66.2109%;width:6.12%}.key-info{left:72.7865%;top:77.2461%;width:6.12%}
.playback{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:0 var(--gutter);padding:18px 0 0;border-top:1px solid #ffffff24}
.playback-caption{min-width:0}.playback-caption .meta{font-size:9px}
.playback-caption h1{margin:7px 0 5px;font-weight:400;font-size:clamp(18px,2vw,28px);letter-spacing:-.04em;line-height:1.12;text-wrap:balance}
.playback-caption p{margin:0;font-size:11px;color:var(--muted)}
.playback-actions{display:flex;align-items:center;gap:18px;flex-shrink:0}
.playback-actions button{font:10px var(--mono);min-height:44px;color:#aaa89e;transition:color .2s}
.playback-actions button:hover,.playback-actions button[aria-pressed=true]{color:var(--ink)}
.playback-actions button:active{translate:0 1px}
.playback-actions #previousFrame,.playback-actions #nextFrame{font:26px var(--sans);min-width:44px}
.hint{margin:23px 0 17px;text-align:center;font:8px var(--mono);color:#68675f;letter-spacing:.055em}.hint span{padding:0 12px}
.viewer{max-width:none;max-height:none;width:100%;height:100dvh;margin:0;padding:24px var(--gutter);border:0;background:#080808;color:var(--ink)}
.viewer::backdrop{background:#080808}.viewer[open]{display:flex;flex-direction:column}
.viewer header,.viewer footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px}
.viewer header button{min-height:44px;font:11px var(--mono)}
.viewer-image{position:relative;flex:1;min-height:0;padding:20px 58px;display:flex;align-items:center;justify-content:center}
.viewer-image img{max-height:100%;max-width:100%;object-fit:contain;min-height:0}
.viewer-image button{position:absolute;top:50%;translate:0 -50%;font-size:26px;min-width:44px;min-height:54px}
#viewerPrevious{left:0}#viewerNext{right:0}.viewer footer{font-size:12px}.viewer footer .meta{white-space:nowrap}
.no-script{position:fixed;inset:auto 20px 20px;padding:25px;background:#111;z-index:10}
@media(max-width:820px){
 .masthead{padding-top:20px;gap:20px}.brand{font-size:13px}.brand span{font-size:7px}.masthead nav{gap:10px 14px;max-width:60%}.masthead nav a{font-size:8px}
 #archive{padding:0}.camera-object{width:100%;max-width:850px;margin:30px auto}
 .playback{align-items:flex-start;gap:12px;flex-direction:column;padding-top:16px}.playback-actions{width:100%;justify-content:space-between;gap:12px}.playback-actions button{font-size:9px}
 .playback-caption h1{font-size:23px}.playback-caption p{font-size:10px}.hint{font-size:7px;margin-top:19px}
 .viewer{padding:15px}.viewer-image{padding:18px 0 70px}.viewer-image button{top:auto;bottom:5px;translate:none}#viewerPrevious{left:calc(50% - 60px)}#viewerNext{right:calc(50% - 60px)}.viewer footer{font-size:10px;align-items:start}.viewer .meta{font-size:8px}
}
@media(max-width:480px){
 .masthead{flex-direction:column;gap:21px}.masthead nav{max-width:none;justify-content:flex-start;gap:11px 17px}.masthead nav a{font-size:8px}
 .camera-object{width:100%;max-width:none;flex-shrink:0;margin:35px auto}.lcd-information{font-size:5px}
 .playback-actions{gap:10px}.playback-actions #previousFrame,.playback-actions #nextFrame{min-width:34px}
 .playback-caption h1{font-size:22px}.hint span{padding:0 6px}
}
@media(max-height:650px) and (min-width:821px){.camera-object{width:min(68vw,calc((100svh - 200px)*1.5));margin:5px auto}.hint{margin:12px 0}.masthead{padding-top:18px}.playback{padding-top:12px}}
@media(max-height:650px) and (max-width:480px){.camera-object{width:100%;margin:20px auto}.masthead{gap:16px;padding-top:16px}.hint{margin-top:13px}}