/* A director's storybook: four real experiences, read scene by scene. */
body{padding-bottom:82px}
.view-switch{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:3px;padding:5px;border:1px solid #52614966;border-radius:40px;background:#fcf9f1f5;box-shadow:0 5px 24px #10251526;backdrop-filter:blur(12px);max-width:calc(100% - 20px)}
.view-switch>button{border:0;background:transparent;color:#26372c;border-radius:30px;font:500 12px var(--sans);min-height:42px;padding:10px 17px;white-space:nowrap}
.view-switch>button[aria-pressed=true]{background:#26372c;color:#fcf9f1}
.screenplay{--script-paper:#eee9df;--script-ink:#242923;--script-muted:#5b6358;background:var(--script-paper);color:var(--script-ink)}
.screenplay [id]{scroll-margin-top:28px}
.screenplay :is(button,a):focus-visible{outline:2px solid currentColor;outline-offset:5px}
.script-wrap{width:min(1220px,calc(100% - 96px));margin-inline:auto}
.script-meta,.scene-slug,.scene-index,.scene-page,.scene-rail,.frame-number,.script-note-label{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.7}
.script-cover{background:#171d18;color:#f2eee4;padding:45px 0 60px}
.script-cover-meta{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #c4c6b24d;padding-top:17px;color:#c5c9bb}
.script-cover-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:7%;align-items:center;padding-block:53px 30px}
.script-cover h1{font-size:clamp(45px,5.1vw,76px);line-height:1.09;letter-spacing:-.04em;margin:0 0 28px;max-width:9em}
.script-cover h1 em{color:#d8c49a}
.script-cover-copy>p{font-size:15px;line-height:1.8;max-width:32em;color:#c5c9bb;margin-bottom:27px}
.script-cover a.script-enter{display:inline-flex;gap:40px;align-items:center;border-bottom:1px solid #d8c49a;padding:14px 0;color:#e5d5af;font-size:13px}
.cover-frames{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;transform:rotate(1deg);padding:15px 0;border-block:1px solid #c4c6b24d}
.cover-frames a{display:block;min-width:0}
.cover-frames img{width:100%;aspect-ratio:1.6;object-fit:cover;display:block;filter:saturate(.8)}
.cover-frames span{display:block;font-family:'Courier New',monospace;font-size:10px;color:#d9d9ce;line-height:1.5;padding-top:9px}
.script-cover-foot{display:flex;justify-content:space-between;align-items:center;gap:28px;padding-top:25px;border-top:1px solid #c4c6b24d;margin-top:22px;color:#aeb7a7}
.script-cover-foot p{margin:0;font-size:12px;max-width:48em;line-height:1.7}
.scene-rail{position:sticky;top:0;z-index:18;background:#eee9dff5;backdrop-filter:blur(12px);border-bottom:1px solid #46513d40;padding:14px 0}
.scene-rail>div{display:flex;align-items:center;gap:28px;overflow-x:auto;scrollbar-width:thin}
.scene-rail a{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:5px 0;border-bottom:2px solid transparent;letter-spacing:.015em;color:#666b61;min-height:38px}
.scene-rail a[aria-current=true]{border-color:#26372c;color:#26372c}
.scene-rail a>span:first-child{font-size:inherit;opacity:1}

.script-scene{padding-block:58px 42px;border-bottom:1px solid #46513d40;scroll-margin-top:90px!important}
.scene-heading{display:flex;gap:30px;align-items:flex-start;justify-content:space-between;margin-bottom:25px}
.scene-heading h2{font-size:clamp(31px,3.2vw,45px);line-height:1.15;letter-spacing:-.03em;margin:8px 0 0}
.scene-slug{color:#66715b;margin:0}
.scene-index{font-size:48px;line-height:1;letter-spacing:-.08em;color:#a5ac98;padding-top:5px}
.scene-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:23px 5%;align-items:start}
.scene-lead{grid-column:1;grid-row:1;margin:0;min-width:0}
.scene-lead button{display:block;position:relative;width:100%;padding:0;border:0;background:#151b17;cursor:pointer;overflow:hidden;text-align:left}
.scene-lead img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:filter .2s}
.scene-lead button:hover img{filter:brightness(.86)}
.scene-play{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:13px;padding:34px 20px 18px;background:linear-gradient(transparent,#131a15e8);color:#fff;font-size:12px;line-height:1.5}
.scene-play svg{width:32px;height:32px;flex-shrink:0}
.scene-lead figcaption{display:flex;gap:15px;padding-top:10px;font-size:11px;line-height:1.6;color:var(--script-muted)}
.frame-number{font-size:10px;white-space:nowrap;color:#7a806e}
.scene-copy{grid-column:2;grid-row:1 / span 2;padding-top:4px}
.scene-copy h3{font-size:clamp(28px,2.6vw,37px);line-height:1.2;margin:0 0 27px;letter-spacing:-.035em}
.scene-copy dl{margin:0}
.scene-copy dt{font:600 10px 'Courier New',monospace;text-transform:uppercase;letter-spacing:.09em;color:#66715b;margin:0 0 8px}
.scene-copy dd{margin:0 0 21px;font-size:13px;line-height:1.85;color:#414b3e}
.scene-actions{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:2px}
.scene-actions :is(a,button){font:500 12px var(--sans);line-height:1.6;padding:10px 0;border:0;border-bottom:1px solid #52614988;background:transparent;color:#26372c}
.scene-privacy{font-size:10px;line-height:1.7;color:#68725e;margin:17px 0 0}
.scene-strip{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:18px;min-width:0}
.scene-strip figure{margin:0;min-width:0}
.scene-strip img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.scene-strip figcaption{font-size:11px;line-height:1.7;padding-top:10px;color:#56614e}
.scene-strip .frame-number{display:block;margin-bottom:2px}
.scene-footer{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid #46513d30;margin-top:28px;padding-top:18px}
.scene-footer a{font-size:12px;line-height:1.7;padding-block:9px}
.scene-footer a:last-child{text-align:right}
.scene-page{font-size:10px;color:#68725e}
.script-ending{padding:65px 0 72px}
.script-ending>div{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}
.script-ending h2{font-size:clamp(36px,4vw,54px);line-height:1.15;margin:0}
.script-ending p{font-size:14px;line-height:1.9;margin:0 0 22px;color:#56614e}
.script-ending .text-link{color:#26372c;border-color:#52614988}
.process-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:9%;align-items:center;margin-bottom:32px}
.process-intro h2{margin-bottom:0}
.process-art{margin:0;max-width:430px;justify-self:end}
.process-art img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.process-art figcaption{font-size:11px;line-height:1.7;color:#a8b4a0;margin-top:10px}
html[lang=zh-Hans] .screenplay .script-cover h1{font-size:clamp(42px,4.6vw,66px);line-height:1.4}
html[lang=zh-Hans] .screenplay :is(.scene-slug,.scene-rail,.script-meta,.scene-copy dt){font-family:var(--sans);letter-spacing:.04em}
html[lang=zh-Hans] .scene-copy h3{font-size:31px;line-height:1.45}
@media(max-width:1000px){.script-wrap{width:calc(100% - 64px)}.scene-rail>div{gap:20px}.scene-grid{grid-template-columns:minmax(0,1.2fr) minmax(240px,1fr);gap:20px 4%}.script-cover-grid{gap:5%}.scene-copy dd{font-size:12px}}
@media(max-width:760px){.script-cover-grid{grid-template-columns:1fr;gap:38px;padding-top:35px}.script-cover h1{font-size:59px;max-width:11em}.cover-frames{transform:none;max-width:580px}.script-cover-copy>p{max-width:42em}.scene-grid{grid-template-columns:1fr;gap:24px}.scene-lead,.scene-copy,.scene-strip{grid-column:1;grid-row:auto}.scene-copy{max-width:650px}.scene-copy dd{font-size:14px;margin-bottom:20px}.scene-copy h3{font-size:35px}.scene-strip{gap:20px}.script-ending>div{grid-template-columns:1fr;gap:25px}.process-intro{gap:30px;grid-template-columns:1fr}.process-art{max-width:550px;justify-self:start;width:100%}}
@media(max-width:600px){.script-wrap{width:calc(100% - 40px)}.script-cover{padding:27px 0 35px}.script-cover-meta{font-size:9px;gap:15px}.script-cover h1{font-size:clamp(42px,10.4vw,59px)}.script-cover-copy>p{font-size:14px}.script-cover-grid{padding-bottom:10px}.script-cover-foot{align-items:flex-start;flex-direction:column;gap:12px}.script-cover-foot p{font-size:11px}.cover-frames{gap:16px 12px}.cover-frames span{font-size:9px}.scene-rail{padding-block:8px}.scene-rail>div{width:calc(100% - 28px);gap:22px}.scene-rail a{font-size:10px}.scene-rail a:last-child{margin-left:0}.script-scene{padding-block:36px 28px;scroll-margin-top:75px!important}.scene-heading{gap:15px;margin-bottom:22px}.scene-heading h2{font-size:32px}.scene-slug{font-size:9px}.scene-index{font-size:37px}.scene-lead img{aspect-ratio:4/3}.scene-play{padding:32px 14px 14px}.scene-copy h3{font-size:31px;max-width:16em}.scene-copy dd{font-size:13px}.scene-strip{gap:12px}.scene-strip img{aspect-ratio:4/3}.scene-strip figcaption{font-size:10px}.scene-footer{gap:14px;margin-top:22px}.scene-footer a{font-size:11px;max-width:44%}.scene-page{display:none}.script-ending{padding-block:40px 48px}.view-switch>button{font-size:11px;padding:9px 12px}.process-art figcaption{font-size:10px}html[lang=zh-Hans] .screenplay .script-cover h1{font-size:clamp(37px,9.5vw,52px)}}
@media(prefers-reduced-motion:reduce){.screenplay *{scroll-behavior:auto;transition:none}}

.storyboard-mode .header{position:relative}.storyboard-mode .audience-switch{position:relative;top:auto;right:auto;margin:20px 4% 0 auto;width:max-content;max-width:calc(100% - 40px)}
.credits-title,.story-process-title{display:none}
.storyboard-mode #voices{background:#101612;color:#f5f0e6;padding-block:64px 48px}
.storyboard-mode #voices .section-kicker,.storyboard-mode #voices .section-heading{display:none}
.storyboard-mode .credits-title{display:block;text-align:center;margin-bottom:42px}
.credits-title .script-meta{color:#bba675;margin-bottom:16px}
.credits-title h2{font-size:clamp(34px,3.6vw,49px);line-height:1.2;letter-spacing:-.035em;margin:0 0 20px}
.credits-title h2 em{color:#d6c59f}
.credits-title>p:last-child{font-size:12px;color:#aeb9a7;margin-bottom:0}
.storyboard-mode #voices .voices-grid{display:block;max-width:840px;margin-inline:auto;border:0;margin-top:0}
.storyboard-mode #voices .voice{display:block;background:transparent;color:#f5f0e6;border:0;border-top:1px solid #aeb9a739;padding:29px 20px;text-align:center;margin:0}.storyboard-mode #voices .voice:first-child{border-top:0;padding-top:0}.storyboard-mode #voices .voice:last-child{padding-bottom:0}
.storyboard-mode #voices .voice .eyebrow{font:10px 'Courier New',monospace;letter-spacing:.12em;color:#aeb9a7;margin:0 0 15px}
.storyboard-mode #voices .voice blockquote{font-size:clamp(27px,3.1vw,40px);line-height:1.25;margin:0 auto 19px;min-height:0;max-width:790px;color:#f3eee4;letter-spacing:-.025em}
.storyboard-mode #voices .voice-person{min-height:0;margin-top:0;display:flex;align-items:center;flex-direction:column;gap:9px}
.storyboard-mode #voices .voice-person strong{font-size:13px;letter-spacing:.12em;font-weight:500;text-transform:uppercase;color:#e1d4b7}
.storyboard-mode #voices .voice-person>span{font-size:10px;line-height:1.6;color:#aeb9a7}
.storyboard-mode #voices .voice details{max-width:620px;margin:20px auto 0;border:0}
.storyboard-mode #voices .voice summary{display:inline-flex;gap:15px;justify-content:center;border-bottom:1px solid #8b927c70;padding:8px 0;font-size:10px;color:#b9c5ad}
.storyboard-mode #voices .voice details p{font-size:13px;line-height:1.9;text-align:left;margin-top:20px;color:#c5cbbc}
.storyboard-mode #how{width:100%;max-width:none;background:#eee9df;color:#26372c;padding:52px max(48px,calc((100% - 1220px)/2)) 55px}
.storyboard-mode #how .section-kicker,.storyboard-mode .website-process-title{display:none}
.storyboard-mode .story-process-title{display:block;max-width:750px}
.story-process-title .script-meta{color:#66715b;margin-bottom:12px}
.story-process-title h2{font-size:clamp(37px,3.8vw,52px);line-height:1.15;margin:0 0 19px}
.story-process-title>p:last-child{font-size:14px;line-height:1.8;color:#56614e;margin-bottom:32px}
.storyboard-mode #how .steps{gap:7%;margin-bottom:35px}
.storyboard-mode #how .steps article{border-top-color:#52614955}
.storyboard-mode #how .step-number{color:#66715b}
.storyboard-mode #how .steps h3{color:#26372c;font-size:26px;margin:14px 0}
.storyboard-mode #how .steps p{color:#56614e;font-size:12px;line-height:1.85}
.storyboard-mode #how .questions{margin-top:30px;max-width:none}
.storyboard-mode #how .questions details{border-color:#52614955}
.storyboard-mode #how .questions summary{color:#26372c;font-size:12px}
.storyboard-mode #how .questions details p{color:#56614e;font-size:12px;line-height:1.8}
html[lang=zh-Hans] .storyboard-mode #voices .voice blockquote{font-size:clamp(26px,3.2vw,38px);line-height:1.6;letter-spacing:.02em}
@media(max-width:600px){.storyboard-mode #voices{padding-block:42px 35px}.storyboard-mode .credits-title{margin-bottom:30px}.credits-title h2{font-size:34px}.storyboard-mode #voices .voice{padding:26px 0}.storyboard-mode #voices .voice blockquote{font-size:30px;line-height:1.4}.storyboard-mode #voices .voice-person strong{font-size:12px;letter-spacing:.07em}.storyboard-mode #how{padding:38px 20px 42px}.story-process-title h2{font-size:38px}.storyboard-mode #how .steps{gap:22px}.storyboard-mode #how .steps h3{font-size:27px}.storyboard-mode #how .steps p{font-size:13px}.storyboard-mode #how .questions summary{font-size:12px;line-height:1.7}.storyboard-mode #how .questions details p{font-size:13px}}