.photo-reader{--pc-ink:#293e40;--pc-muted:#66706a;--pc-accent:#985043;--pc-paper:#f2eedf;--pc-line:#b8b8a5;--case-color:#b25849;box-sizing:border-box;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#172b2d;color:#ece6d3;font-family:"Microsoft YaHei","PingFang SC",sans-serif;overflow:hidden;color-scheme:light}
.photo-reader::backdrop{background:#132629}.photo-reader *{box-sizing:border-box}.photo-reader [hidden]{display:none!important}.photo-reader button{font:inherit;cursor:pointer}.photo-reader button:disabled{cursor:default}.photo-reader button:focus-visible,.photo-reader a:focus-visible,.photo-reader summary:focus-visible{outline:3px solid #db945f;outline-offset:4px}.photo-reader main:focus{outline:none}.photo-room{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 48% -20%,#55716b55,transparent 75%),repeating-linear-gradient(1deg,#132b2d00 0 38px,#061d2017 39px 41px),#203638}.photo-room:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#091e233d,transparent 13% 87%,#091e233d)}
.photo-shell{position:relative;display:flex;flex-direction:column;width:min(1510px,100%);height:100%;margin:auto;padding:0 34px 28px}.photo-toolbar{height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px}.photo-place{font-size:15px;font-weight:700;letter-spacing:.15em;display:flex;align-items:center;gap:13px}.photo-place i{width:10px;height:10px;background:#dc815e;box-shadow:4px 0 #dc815e,0 4px #dc815e,4px 4px #dc815e;margin-right:5px}.photo-toolbar button{background:transparent;border:1px solid #70847a;color:#e1e2ce;padding:9px 13px;font-size:13px;box-shadow:2px 2px #12272c}.photo-toolbar button:hover{background:#405a54}.photo-toolbar kbd{font-size:10px;opacity:.55;margin-left:8px}
.photo-counter{display:grid;grid-template-columns:226px minmax(0,1fr);gap:23px;min-height:0;flex:1}.photo-shelf{position:relative;display:flex;flex-direction:column;min-height:0;background:#203035;border:1px solid #67756a;padding:21px 16px 12px;box-shadow:5px 5px #0e2428,inset 0 0 0 5px #30433f}.photo-shelf-title{display:flex;align-items:center;justify-content:space-between;padding:0 4px;color:#e1d8bd;font-size:16px;font-weight:700}.photo-shelf-title b{font-family:monospace;font-size:13px;font-weight:400;color:#9ba896}.photo-cassette-art{font-family:"Cascadia Mono",Consolas,monospace;font-size:9.2px;line-height:1.13;color:#bac5ad;letter-spacing:-.25px;user-select:none;margin:24px auto 22px;transform:rotate(-3deg);text-shadow:1px 1px #12272c}.photo-case-index{display:flex;flex-direction:column;gap:10px;padding:3px 4px 12px;overflow:auto;scrollbar-width:thin;scrollbar-color:#758577 transparent}
.photo-case{width:100%;display:flex;align-items:center;gap:12px;min-height:60px;flex-shrink:0;position:relative;text-align:left;color:#d9decb;background:#283f40;border:1px solid #10282b;border-left:7px solid var(--tape-color);box-shadow:3px 3px #12272c;padding:10px 10px;transition:transform .16s,background .16s}.photo-case:before{content:"";position:absolute;inset:3px;border-top:1px solid #879b7f20;pointer-events:none}.photo-case:hover{background:#39544f;transform:translateX(2px)}.photo-case[aria-current=page]{background:#eee9d8;color:#243e40;border-color:var(--tape-color);box-shadow:inset 4px 0 var(--tape-color),4px 4px #0f2428;font-weight:750}.photo-case:active{filter:brightness(.87)}.photo-case-number{font-family:Consolas,monospace;font-size:12px;color:#9fae97}.photo-case[aria-current=page] .photo-case-number{color:var(--tape-color)}.photo-case strong{font-size:18px;line-height:1.35;letter-spacing:.04em}.photo-case-notch{width:9px;height:9px;border:1px solid currentColor;opacity:.5;margin-left:auto;flex-shrink:0}.photo-case[aria-current=page] .photo-case-notch{background:var(--tape-color);border-color:var(--tape-color);opacity:1}
.photo-shelf-foot{margin-top:auto;padding:20px 5px 3px;display:flex;align-items:center;justify-content:space-between;color:#a8b49b;font-size:10px;letter-spacing:.12em}
.photo-viewer{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background:#b5b49e;border:1px solid #091d22;box-shadow:7px 7px #0c2329,0 0 0 4px #4b5e52}.photo-page-well{position:relative;min-height:0;flex:1;background:var(--pc-paper);overflow:hidden}.photo-page-well:before,.photo-page-well:after{content:"";position:absolute;z-index:2;pointer-events:none;top:0;bottom:0;width:15px;background:repeating-linear-gradient(to bottom,#9d9f882e 0 11px,transparent 11px 26px);border-inline:4px solid var(--pc-paper)}.photo-page-well:before{left:2px}.photo-page-well:after{right:2px}.photo-scroll{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9ba58f #e4e2cf;scroll-padding-top:24px}.photo-page{padding:39px clamp(25px,4vw,70px) 55px;margin:0 auto;min-height:100%;max-width:1260px;--pc-accent:var(--case-color)}
.photo-page.portfolio-content{background:transparent}.photo-page :where(h2,h3,h4){text-wrap:balance}.photo-page :where(p,li){text-wrap:pretty}.photo-status{padding:40px 12px;color:#415b50;font-size:16px}.photo-status h2{font-size:22px}.photo-status button{background:#36584c;color:#f2e9cf;border:0;padding:10px 18px;margin-top:15px}
.photo-transport{flex-shrink:0;height:78px;display:grid;grid-template-columns:160px minmax(0,1fr) 160px;gap:16px;align-items:center;padding:10px 19px;background:linear-gradient(#405751 0 3px,#253b3d 3px 72px,#152c30 72px);border-top:2px solid #7b8b75;color:#d9dfc9;box-shadow:inset 0 1px #a4ad91}.photo-seek{height:47px;display:flex;justify-content:center;align-items:center;gap:12px;color:#e0dfc6;background:#38504b;border:1px solid #7b8d74;border-bottom:3px solid #122b2c;box-shadow:2px 2px #12272b;font-size:13px}.photo-seek>span:first-child,.photo-seek>span:last-child{display:block}.photo-seek>span[aria-hidden]{font-size:12px;letter-spacing:-5px;padding-right:4px}.photo-seek small{font-size:9px;color:#b7c1a7;display:block;margin-top:3px;max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo-seek:hover:not(:disabled){background:#51695b}.photo-seek:active:not(:disabled){transform:translateY(2px);box-shadow:none}.photo-seek:disabled{opacity:.3}.photo-deck{display:flex;align-items:center;gap:20px;justify-content:center;min-width:0}.photo-reels{display:flex;align-items:center;flex-shrink:0}.photo-reels i{position:relative;display:block;width:31px;height:31px;border:5px solid #99a68b;border-radius:50%;box-shadow:0 0 0 2px #132a2c,inset 0 0 0 4px #172d30;background:conic-gradient(#bac4a7 0 13%,#253b3d 13% 33%,#bac4a7 33% 46%,#253b3d 46% 66%,#bac4a7 66% 79%,#253b3d 79%);transform:rotate(var(--spool-turn,0deg))}.photo-reels span{width:43px;height:7px;background:#8c9982;border-block:2px solid #132a2c}.photo-tape-position{min-width:55px;width:110px;max-width:100%}.photo-position{font-family:"Cascadia Mono",Consolas,monospace;font-size:13px;letter-spacing:.09em;display:block;margin-bottom:7px;color:#d3cfa7}.photo-progress{height:4px;background:#12292b;width:100%;box-shadow:0 1px #55715d}.photo-progress i{height:100%;width:var(--read-progress,0%);background:#b7be8b;display:block}.photo-reader.is-seeking .photo-reels i{animation:photo-spool .24s linear}.photo-reader.is-seeking .photo-position{color:#e9a977}@keyframes photo-spool{to{transform:rotate(calc(var(--spool-turn,0deg) + 210deg * var(--seek-direction,1)))}}
@media(min-width:1650px){.photo-shell{padding-top:15px;padding-bottom:39px}.photo-counter{grid-template-columns:244px minmax(0,1fr);gap:30px}.photo-shelf{padding:27px 20px}.photo-cassette-art{font-size:10px;margin-block:28px}.photo-case{min-height:66px}.photo-case-index{gap:13px}}
@media(max-width:1100px){.photo-shell{padding:0 18px 19px}.photo-counter{grid-template-columns:190px minmax(0,1fr);gap:17px}.photo-shelf{padding-inline:11px}.photo-case strong{font-size:16px}.photo-cassette-art{font-size:8.2px}.photo-page{padding:30px 28px 40px}.photo-transport{grid-template-columns:125px minmax(0,1fr) 125px;gap:10px;padding-inline:12px}.photo-reels span{width:20px}.photo-deck{gap:12px}.photo-tape-position{width:74px}.photo-shelf-title{font-size:15px}}
@media(max-width:800px){.photo-shell{padding:0 10px 10px}.photo-toolbar{height:53px}.photo-place{font-size:13px}.photo-counter{grid-template-columns:1fr;gap:11px}.photo-shelf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:7px;padding:7px 8px;box-shadow:3px 3px #0e2428}.photo-shelf-title,.photo-cassette-art{display:none}.photo-case-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:1px 2px 3px;min-width:0;overflow:visible}.photo-case{min-height:40px;gap:6px;padding:7px 6px;min-width:0;border-left-width:4px}.photo-case-number{font-size:10px}.photo-case strong{font-size:14px}.photo-case:hover,.photo-case[aria-current=page]{transform:none}.photo-case-notch{width:6px;height:6px}.photo-shelf-foot{margin:1px 0 0;padding:0}.photo-reader .photo-shelf-foot button{min-height:40px;padding:5px 6px;font-size:12px;letter-spacing:0}.photo-page{padding:27px 26px 40px}.photo-transport{height:66px;grid-template-columns:108px minmax(0,1fr) 108px;padding:7px 9px;gap:8px}.photo-deck{gap:9px}.photo-reels i{width:24px;height:24px;border-width:4px}.photo-reels span{width:15px}.photo-seek{height:43px;gap:9px}.photo-seek small{max-width:72px}.photo-position{font-size:12px}.photo-toolbar button{padding:7px 10px}}
@media(max-width:520px){.photo-transport{grid-template-columns:94px minmax(0,1fr) 94px;gap:7px}.photo-reels{display:none}.photo-deck{padding-inline:9px}.photo-tape-position{width:74px}.photo-page{padding-inline:22px}.photo-toolbar kbd{display:none}.photo-place{letter-spacing:.06em}.photo-seek{font-size:12px}.photo-reader .portfolio-content{font-size:15px}}
/* The scene notes, relationships and evidence belong to the same ink-and-paper carrier. */
.photo-page.portfolio-content{--pc-ink:#293e40;--pc-muted:#687262;--pc-accent:var(--case-color,#985043);--pc-paper:#f2eedf;--pc-line:#b8b8a5;font-size:16px;line-height:1.95;letter-spacing:.018em}
.photo-page.portfolio-content .chapter>header{border-bottom:3px double #9ca58d;padding-bottom:24px;margin-bottom:33px;position:relative}
.photo-page.portfolio-content .chapter>header:before{content:"";display:block;width:62px;height:6px;margin-bottom:20px;background:repeating-linear-gradient(125deg,var(--case-color) 0 7px,transparent 7px 12px)}
.photo-page.portfolio-content .chapter h2{font-size:clamp(25px,2.2vw,33px);line-height:1.5;letter-spacing:.015em;font-weight:750}
.photo-page.portfolio-content .lead{font-size:16px;line-height:1.9;max-width:830px}
.photo-page.portfolio-content .block{padding-bottom:33px;margin-bottom:35px;scroll-margin-top:24px}
.photo-page.portfolio-content .block h3{font-size:21px;line-height:1.6;margin-bottom:20px}
.photo-page.portfolio-content .key.goal{border:0;border-left:4px solid var(--case-color);padding:6px 0 6px 22px;font-size:clamp(22px,1.95vw,28px);line-height:1.7;margin:26px 0 31px;max-width:850px;letter-spacing:.02em}
.photo-page.portfolio-content .key.decision,.photo-page.portfolio-content .key.bridge-to-evidence{font-size:20px;line-height:1.8;margin-bottom:25px}
.photo-page.portfolio-content .reading-segment.result{border-color:#a8b49a}.photo-page.portfolio-content .reading-segment.result .segment-prose{color:#596a5a}
.photo-page.portfolio-content .concept{background:#e3e4d3;border:1px solid #b8bfaa;border-top:3px solid var(--case-color);box-shadow:3px 3px 0 #87957f22;padding:22px 24px;margin:25px 0 30px}
.photo-page.portfolio-content .concept h4{font-size:16px;letter-spacing:.015em;margin-bottom:20px;color:#3a5c50}.photo-page.portfolio-content .concept h5{color:#506750}
.photo-page.portfolio-content .flow li,.photo-page.portfolio-content .relation-node,.photo-page.portfolio-content .stage-map section,.photo-page.portfolio-content .vertical-flow .vf-path>li,.photo-page.portfolio-content .rvt-tree .rvt-node{border-color:#a7b19b;background:#f3f0df;box-shadow:2px 2px #7e95791c;border-radius:0}
.photo-page.portfolio-content .rvt-tree{--rvt-line:#a5b297;--rvt-ink:#294d45;--rvt-card:#f3f0df}
.photo-page.portfolio-content .rvt-tree .rvt-root>.rvt-node{border-top-color:var(--case-color)}
.photo-page.portfolio-content .rvt-tree .rvt-node p{color:#61705d}.photo-page.portfolio-content .rvt-tree .rvt-edge{color:#56705d}
.photo-page.portfolio-content .concept th{background:#ccd5bf;color:#304f45}.photo-page.portfolio-content .concept th,.photo-page.portfolio-content .concept td{border-color:#adbca1}
.photo-page.portfolio-content .relation .edge-label{stroke:#e3e4d3;fill:#49644e}.photo-page.portfolio-content .flow li+li:before{color:#708368}
.photo-page.portfolio-content .media-button{background:#dce1cf;border:1px solid #a6b29e;box-shadow:3px 3px #75886d28}
.photo-page.portfolio-content .image-area{background:#dce1cf}.photo-page.portfolio-content .media figcaption{line-height:1.85;padding:13px 0 1px;font-size:14px}
.photo-page.portfolio-content .phase{color:#788271;font-size:12px}.photo-page.portfolio-content .source-details,.photo-page.portfolio-content .extra{font-size:13px}
.photo-page.portfolio-content .source-details summary,.photo-page.portfolio-content .extra summary{border-bottom:1px solid #b2bba7}
.photo-page.portfolio-content .clip-controls button{background:#d9deca;color:#334f44;border:1px solid #a8b69b;box-shadow:2px 2px #71816922;padding:8px 12px}
.photo-page.portfolio-content .clip-controls button:hover{background:#cbd4bc}.photo-page.portfolio-content .support{border-top-style:dashed}
.portfolio-content.pc-lightbox[data-theme=photo]{background:#eeecda;border-color:#9dab90;color:#2c443d}.portfolio-content.pc-lightbox[data-theme=photo]::backdrop{background:#102426ed}.portfolio-content.pc-lightbox[data-theme=photo] button{background:#dae0cb;border-color:#9cae91;color:#304c40}.portfolio-content.pc-lightbox[data-theme=photo] .pc-media-body{background:#d9decb}.portfolio-content.pc-lightbox[data-theme=photo] .pc-media-caption{color:#5b6e59}
@media(max-width:800px){.photo-page.portfolio-content .chapter h2{font-size:24px}.photo-page.portfolio-content .chapter>header:before{margin-bottom:15px}.photo-page.portfolio-content .block h3{font-size:19px}.photo-page.portfolio-content .concept{padding:18px 16px}.photo-page.portfolio-content .key.goal{font-size:22px;padding-left:16px}}
@media(prefers-reduced-motion:reduce){.photo-reader *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* The town music control is mounted directly in the native reader dialog. */
.photo-reader>.bgm-control{position:absolute;top:20px;left:50%;right:auto;transform:translateX(-50%)}
@media(min-width:1650px){.photo-reader>.bgm-control{top:35px}}
@media(max-width:800px){.photo-reader>.bgm-control{top:14px}}
@media(max-width:520px){.photo-reader>.bgm-control{left:auto;right:112px;transform:none}}
.photo-shelf-foot button {
 padding:6px 10px;font:inherit;font-size:13px;cursor:pointer;background:transparent;
 color:inherit;border:1px solid currentColor;white-space:nowrap;
}
.photo-reader .photo-seek {
 margin:0;font-size:13px;line-height:1.35;
}
.photo-reader .photo-seek small {
 margin-top:3px;font-size:10px;line-height:1.3;
}
@media(max-width:800px) {
 .photo-counter {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .photo-shelf,.photo-case-index {min-width:0}
 .photo-reader .photo-toolbar button,.photo-reader .photo-shelf button {margin:0}
 .photo-page {height:auto;min-width:0}
}
@media(max-width:520px) {
 .photo-reader .photo-seek {font-size:12px;gap:6px}
 .photo-reader .photo-seek small {font-size:9px;max-width:57px}
}

/* The two tapes begin with their case arguments; source figures stay beside those arguments. */
.photo-page .event-reading .evt-key {
 margin:24px 0 28px;padding:5px 0 5px 20px;font-size:21px;line-height:1.75;
}
.photo-page [data-block-id="living-shared-motivation"] .evt-key {
 font-size:25px;line-height:1.7;margin-top:30px;max-width:850px;
}
.photo-page .event-reading .evt-image-title {color:var(--pc-ink)}
.photo-page .event-reading .media-button::after {color:var(--pc-ink)}
.photo-page .evt-full-image-link {display:block;width:fit-content;max-width:100%;min-height:38px;margin-top:12px;padding:6px 0;border:0;border-bottom:1px solid var(--pc-line);background:transparent;color:var(--pc-accent);font:inherit;font-size:14px;text-align:left}
@media(max-width:800px) {
 .photo-page .event-reading .evt-key {padding-left:15px;font-size:20px}
 .photo-page [data-block-id="living-shared-motivation"] .evt-key {font-size:22px}
}