:root{color-scheme:light;--cream:#f5eedc;--ink:#29352c;--sage:#526046;--gold:#c09a4c;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;color:var(--ink);background:#ede7d9}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #c0953f;outline-offset:5px}button{transition:background .16s,transform .16s}button:active:not(:disabled){transform:scale(.97)}[hidden]{display:none!important}#app{max-width:1520px;margin:auto;padding:0 32px}.masthead{height:82px;display:flex;align-items:center;justify-content:space-between}.masthead a{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:26px;font-weight:700;letter-spacing:.12em;color:var(--ink);text-decoration:none}.masthead a span{font-family:inherit;font-size:11px;margin-left:22px;letter-spacing:.16em;font-weight:400}.quiet{border:1px solid currentColor;border-radius:50px;background:transparent;color:inherit;min-height:44px;min-width:44px;padding:8px 15px}.finder{background:#20221f;color:var(--cream);border-radius:25px;padding:0 20px;box-shadow:0 20px 50px #3c372331;overflow:hidden}.topbar{height:54px;display:flex;align-items:center;gap:25px;letter-spacing:.06em}.topbar #lensLabel{font-family:Georgia,serif;font-size:27px}.topbar #lensLabel span{font-size:17px}.topbar #bodyLabel{color:#d5d0c2;font-size:12px}.topbar #remaining{margin-left:auto;font-size:20px;font-variant-numeric:tabular-nums}.viewport{position:relative;overflow:hidden;border-radius:16px;line-height:0;touch-action:pan-y;isolation:isolate}canvas{width:100%;height:auto;display:block;aspect-ratio:16/9}.corners{position:absolute;inset:23px;border:0;pointer-events:none;background:linear-gradient(var(--cream),var(--cream)) 0 0/28px 3px no-repeat,linear-gradient(var(--cream),var(--cream)) 0 0/3px 28px no-repeat,linear-gradient(var(--cream),var(--cream)) 100% 0/28px 3px no-repeat,linear-gradient(var(--cream),var(--cream)) 100% 0/3px 28px no-repeat,linear-gradient(var(--cream),var(--cream)) 0 100%/28px 3px no-repeat,linear-gradient(var(--cream),var(--cream)) 0 100%/3px 28px no-repeat,linear-gradient(var(--cream),var(--cream)) 100% 100%/28px 3px no-repeat,linear-gradient(var(--cream),var(--cream)) 100% 100%/3px 28px no-repeat}.viewport:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 35px #161e1652;pointer-events:none}.controls{height:99px;display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;gap:15px}.controls #controlHint{font-size:14px;text-align:right;letter-spacing:.05em}.controls .quiet{justify-self:end;font-size:20px}.shutter{height:82px;width:82px;justify-self:center;border-radius:50%;border:3px double #33362d;outline:2px solid #ddcba5;outline-offset:3px;background:var(--cream);color:#222820;display:grid;align-content:center;justify-items:center;gap:5px;font-size:12px;font-weight:600}.shutter kbd{font-size:10px;font-weight:400;border:1px solid #8a8374;border-radius:4px;padding:1px 5px}.intro{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:35px 38px 24px}.eyebrow{font-size:12px;letter-spacing:.15em;color:#596648;margin:0 0 12px}h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(25px,3vw,42px);letter-spacing:.08em;margin:0 0 14px;line-height:1.5}p{line-height:1.8}.intro p:not(.eyebrow){font-size:14px;margin:0}.setup{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}label{font-size:11px;letter-spacing:.07em}select{display:block;width:100%;padding:10px 12px;background:#faf5e8;border:1px solid #b9b7a5;border-radius:8px;color:var(--ink);margin-top:5px;font-size:14px}.primary{background:var(--sage);color:#fffbee;border:1px solid #6c765d;box-shadow:inset 0 0 0 3px #ffffff13;padding:15px 24px;border-radius:50px;letter-spacing:.08em;font-weight:600}.primary:hover{background:#3f4e35}.setup .primary{grid-column:1/-1}.text-button{border:0;background:none;color:var(--ink);padding:10px;text-decoration:underline;text-underline-offset:5px;font-size:13px}.setup .text-button{grid-column:1/-1;padding:4px}.setup small{grid-column:1/-1;text-align:center;font-size:10px;color:#68705f}.demo-actions{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-size:14px}.demo-caption{position:absolute;left:50%;top:8%;transform:translateX(-50%);padding:13px 23px;line-height:1.5;border-radius:50px;background:#f6efdfed;color:#2b3929;box-shadow:0 6px 20px #0002;white-space:nowrap;font-size:clamp(12px,1.5vw,21px);pointer-events:none}.demo-caption:empty{display:none}.scene-message{position:absolute;inset:0;background:#e9e1d1;display:flex;align-items:center;justify-content:center;color:var(--ink);line-height:1.8;padding:30px;text-align:center}.play-help{text-align:center;padding:10px 0}.play-help p{font-size:12px;margin:5px;color:#606854}#blackout{position:absolute;inset:0;background:#151912;opacity:0;pointer-events:none;z-index:4}#blackout.shot{animation:shutter .16s linear}@keyframes shutter{0%,65%{opacity:1}100%{opacity:0}}footer{border-top:1px solid #cfc9b9;margin:15px 6px 0;padding:19px 0 24px;font-size:11px;color:#6f7566;display:flex;justify-content:space-between;gap:15px}.result{padding:30px;background:#f8f1df;border:1px solid #d3c6aa;box-shadow:0 18px 55px #544e3221;border-radius:8px}.result-heading{text-align:center;margin-bottom:25px}.result-heading p{font-size:12px;margin:0}.result-heading h1{margin:8px 0}.result-layout{display:grid;grid-template-columns:1.75fr 1fr;gap:30px;align-items:start}.contact{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;background:#252721;padding:15px 9px;border-radius:7px}.frame{position:relative;display:block;width:100%;border:0;padding:0;background:#111;line-height:0;border-top:8px dashed #c4ad79;border-bottom:8px dashed #c4ad79}.frame img{width:100%;display:block;aspect-ratio:16/9}.frame span{position:absolute;top:0;left:0;font-family:Georgia,serif;color:#fff6dd;background:#171916;font-size:11px;line-height:1.3;padding:2px 3px}.contact-hint{font-size:11px;color:#6b7160}.award{text-align:center}.medal{width:125px;height:125px;border-radius:50%;border:7px double #b28a35;background:radial-gradient(circle at 35% 25%,#f9e6a8,#c4a458 60%,#92702f);box-shadow:0 5px 0 #a18245,0 9px 14px #40301933;display:grid;place-items:center;margin:0 auto 23px}.medal span{font:80px Georgia,serif;color:#6e511f;text-shadow:1px 1px #fff5c5}.award h2{font-family:"Yu Mincho",serif;font-size:23px;margin:0 0 15px}.metrics{font-size:14px;font-variant-numeric:tabular-nums;line-height:1.9}.award #advice{font-size:12px}.best{background:#fffaf0;padding:12px 12px 7px;box-shadow:0 5px 15px #5b503d1a;margin:20px 0 0;transform:rotate(-1deg)}.best figcaption{font-family:serif;letter-spacing:.15em;margin-bottom:10px}.best img{width:100%;display:block;aspect-ratio:16/9}.best p{font-size:11px;margin:8px 0}.unlock{font-size:12px;color:#5a6c41}.result-actions{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap}.secondary{background:transparent;color:var(--ink);border:1px solid #737c62;padding:15px 24px;border-radius:50px}dialog{background:#f7f0df;color:var(--ink);border:1px solid #c9bda0;border-radius:18px;padding:35px;max-width:min(640px,92vw);box-shadow:0 30px 100px #0004}dialog::backdrop{background:#152013a6;backdrop-filter:blur(4px)}dialog .primary{display:block;width:100%;margin:20px 0 5px}dialog p{font-size:14px}#photoDialog{width:760px;max-width:94vw}#reviewImage{width:100%;margin-top:20px}.close{position:absolute;top:8px;right:8px;font-size:22px}.nojs{padding:30px;background:#fff}
@media(min-width:1200px){#app{max-width:1320px}.finder{max-height:none}}
@media(max-width:700px){#app{padding:0 12px}.masthead{height:67px}.masthead a{font-size:22px}.masthead a span{display:none}.finder{padding:0 8px;border-radius:15px}.topbar{height:45px;gap:10px}.topbar #lensLabel{font-size:21px}.topbar #bodyLabel{font-size:10px}.topbar #remaining{font-size:15px}.viewport{border-radius:8px}.corners{inset:10px}.controls{height:115px;grid-template-columns:1fr 90px 1fr;gap:5px}.controls #controlHint{font-size:11px;text-align:left;line-height:1.7}.shutter{width:72px;height:72px}.intro{grid-template-columns:1fr;padding:25px 7px 15px;gap:22px}.intro p:not(.eyebrow){font-size:13px}.intro h1{font-size:25px}.setup{gap:11px}.demo-actions{align-items:flex-start;gap:10px;padding:12px 5px}.demo-actions p{margin:0;font-size:12px}.demo-actions button{font-size:11px;min-width:110px;padding:4px}.demo-caption{padding:8px 13px;top:7%;font-size:12px}.play-help p{font-size:11px}footer{font-size:10px;line-height:1.7}.result{padding:22px 12px}.result-layout{display:flex;flex-direction:column-reverse;gap:20px}.award{width:100%}.medal{width:90px;height:90px;margin-bottom:16px}.medal span{font-size:58px}.award h2{font-size:22px}.best{max-width:320px;margin:15px auto}.contact{gap:7px;grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 6px}.frame{border-width:5px}.result-actions{gap:10px;margin-top:15px}.result-actions .primary,.result-actions .secondary{width:100%}dialog{padding:24px}#trackingHelp{padding:0 12px}}
@media(prefers-reduced-motion:reduce){button{transition:none}#blackout.shot{animation:none}.best{transform:none}}

/* Best full frame, then all twelve frames in a compact film contact sheet. */
.result{padding:24px}.result-heading{margin-bottom:22px}.result-heading h1{margin:4px 0}
.result-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);grid-template-areas:"best award" "film film";gap:24px;align-items:start}
.best{grid-area:best;transform:none;margin:0;padding:0;background:transparent;box-shadow:none;max-width:none}.best figcaption{font-size:17px;margin-bottom:10px}.best img{width:100%;aspect-ratio:16/9;height:auto}.best p{font-size:13px;margin:8px 0}.best canvas{width:100%;aspect-ratio:1.8;height:auto;margin-top:12px}.best-closeup summary{font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.best-closeup summary:focus-visible{outline:3px solid #c0953f;outline-offset:4px}
.award{grid-area:award}.medal{width:85px;height:85px;margin-bottom:17px}.medal span{font-size:54px}.metrics{font-size:15px}
.contact-roll{grid-area:film;min-width:0}.contact-roll h2{font-family:"Yu Mincho",serif;font-size:20px;font-weight:500;margin:0 0 12px}.contact{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:transparent;padding:0;border-radius:0}
.frame{border:3px solid #252721;border-radius:0;line-height:1.5;background:#252721;box-shadow:none;overflow:hidden;display:grid;grid-template-columns:24px minmax(0,1fr);text-align:left}.frame img{grid-column:1/-1;aspect-ratio:16/9}.frame span{position:static;align-self:center;font:12px monospace;color:#edcf83;background:transparent;padding:4px 2px}.frame strong{display:block;text-align:right;font-size:12px;font-weight:500;line-height:1.5;padding:4px 2px;background:transparent;color:#f8f1df}.frame strong.aligned{color:#cddfaa;background:transparent}.contact-hint{font-size:13px;color:#6b7160}
#photoDialog{width:1000px}#reviewDetail{width:100%;height:auto;aspect-ratio:1.81;margin-top:30px;border-radius:8px}#reviewImage{width:35%;display:block;margin:14px auto 0;border:5px solid #fffaf0}#reviewTitle{margin-top:20px}#reviewText{font-size:16px;line-height:1.8}
@media(max-width:700px){.result{padding:18px 10px}.result-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"award" "best" "film";gap:22px}.award .medal{width:64px;height:64px;margin-bottom:12px}.medal span{font-size:40px}.award h2{font-size:21px;margin-bottom:8px}.award #advice{font-size:13px;margin-bottom:0}.contact{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 6px}.frame{grid-template-columns:20px minmax(0,1fr);border-width:2px}.frame span{font-size:11px}.frame strong{font-size:10px;letter-spacing:0}.contact-hint{font-size:12px}.result-heading h1{font-size:30px}#reviewImage{width:55%}#reviewText{font-size:14px}}


.shutter span{white-space:nowrap}@media(max-width:700px){.shutter span{font-size:11px}}
/* Site links and sharing remain outside the finder. */
.site-identity{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.masthead .site-wordmark{font:600 13px/1.2 system-ui,sans-serif;letter-spacing:.02em}
.masthead .game-name{font-size:23px;line-height:1.3}.masthead .game-name span{font-size:10px;margin-left:15px}
.masthead-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.masthead-actions .quiet{font-size:12px;padding:8px 12px}
.site-menu-links{display:grid;gap:8px;margin-top:22px;min-width:min(260px,65vw)}.site-menu-links a{color:var(--ink);padding:12px 0;text-underline-offset:5px}#siteMenu h2{margin-right:35px;font-size:22px}
.footer-links{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:flex-end;gap:5px 16px}.footer-links a{color:inherit;line-height:1.7;padding:8px 0;text-underline-offset:4px}footer p{margin:6px 0 0}
.share-panel{margin-top:30px;padding-top:24px;border-top:1px solid #d3c6aa}.share-heading h2{font-family:"Yu Mincho",serif;font-size:22px;margin:0 0 6px}.share-heading p{font-size:13px;margin:0 0 18px}
.share-content{display:flex;align-items:flex-start;gap:24px}.share-preview-link{display:block;width:min(240px,100%);flex-shrink:0;color:var(--ink);font-size:12px;text-underline-offset:4px}.share-preview-link span{display:block;margin-top:8px}.share-preview{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:6px}
.share-options{flex:1;min-width:0}.share-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.share-actions .secondary{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:13px;text-decoration:none;min-height:44px;padding:12px 18px}.share-actions a:not([href]){opacity:.5;pointer-events:none}
.share-note,#shareStatus{font-size:12px;line-height:1.8}#shareStatus:empty{display:none}.share-copy{margin-top:14px;font-size:12px}.share-copy summary{cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:4px}.share-copy textarea{display:block;width:100%;margin:10px 0 0;padding:12px;border:1px solid #b9b7a5;border-radius:6px;background:#fffaf0;color:var(--ink);font:inherit;font-size:14px;line-height:1.7;resize:vertical}
.share-copy summary:focus-visible,.share-copy textarea:focus-visible{outline:3px solid #c0953f;outline-offset:4px}
@media(max-width:700px){.masthead{height:78px;gap:10px}.masthead .site-wordmark{font-size:12px}.masthead .game-name{font-size:18px;letter-spacing:.06em}.masthead-actions{gap:6px}.masthead-actions .quiet{font-size:11px;padding:8px 10px}footer{flex-direction:column;gap:8px}.footer-links{justify-content:flex-start}.share-panel{margin-top:24px;padding-top:22px}.share-content{flex-direction:column;gap:18px}.share-preview-link{align-self:center}.share-options{width:100%}.share-actions{gap:8px}.share-actions .secondary{flex:1;white-space:nowrap}}

/* In-flow preference controls never cover the finder or shutter. */
.analytics-settings{border-top:1px solid #cfc9b9;margin:0 6px 24px;padding:12px 0;color:var(--ink);font-size:12px;line-height:1.8}
.analytics-settings summary{cursor:pointer;min-height:44px;padding:10px 0;text-decoration:underline;text-underline-offset:4px}
.analytics-settings summary:focus-visible{outline:3px solid #c0953f;outline-offset:3px}
.analytics-settings p{margin:4px 0 10px;max-width:70ch}.analytics-settings a{color:inherit}
.analytics-actions{display:flex;gap:12px;flex-wrap:wrap}.analytics-actions button[aria-pressed="true"]{background:var(--sage);color:#fffbee}

/* Game-clock mirror phase, with a brief return after the real capture event. */
#blackout{transform:scaleY(0);transform-origin:bottom;opacity:0;background:#10120f}
.release-status{display:flex;justify-content:center;align-items:center;gap:9px;min-height:33px;padding-top:8px;font-size:11px;letter-spacing:.04em;color:#aaa99f}
.release-status span{padding:3px 10px;border-radius:4px;border:1px solid transparent}.release-status b{font-weight:400}
.release-status[data-phase="pressed"] [data-step="pressed"],.release-status[data-phase="mirror"] [data-step="mirror"],.release-status[data-phase="exposed"] [data-step="exposed"]{color:#fff2ce;background:#535a42;border-color:#bda76a}
.shutter.released{transform:scale(.94);background:#c6af75;box-shadow:inset 0 3px 7px #342e2855}
.sound-credit{font-size:11px;max-width:40ch;line-height:1.8;margin-top:24px}.sound-credit a{color:inherit}
@media(max-width:700px){.release-status{gap:6px;font-size:10px;min-height:30px}.release-status span{padding:3px 7px}.demo-caption{white-space:normal;width:max-content;max-width:94%;text-align:center}}
@media(prefers-reduced-motion:reduce){#blackout{opacity:0!important;transition:none!important}.shutter.released{transform:none}}