/* Photo Film: a visitor's pictures and words, made into a portrait film. The making room's
   fourth tool; its finished film opens in the shared keep pop-up. The rules below are the tool's
   own layout, carried over from the room it used to have on Moon Moth Station. */
.reel-maker{height:100%;display:grid;grid-template-columns:minmax(210px,1fr) minmax(210px,1.1fr) minmax(220px,1fr);grid-template-rows:minmax(0,1fr) 62px;gap:22px 4vw;max-width:1280px;margin:auto;color:#e9edd9}
.reel-intro{padding-top:30px;align-self:center}.reel-intro .eyebrow{font-size:7px;letter-spacing:.14em;max-width:230px;line-height:1.7}.reel-intro h1{font:600 clamp(40px,4.4vw,70px)/.88 'Barlow Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:-.004em;margin:26px 0}.reel-intro>p{font:12px/1.8 var(--body);color:#c1d0c6;margin:0 0 30px}.reel-upload{display:block;position:relative;max-width:230px;cursor:pointer;overflow:hidden;border-top:1px solid #dce4c444;border-bottom:1px solid #dce4c444}.reel-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.reel-upload>span{display:flex;justify-content:space-between;padding:16px 0;font:14px var(--body);color:#ebefbb}.reel-upload b{font-size:20px;font-weight:400}.reel-upload:focus-within{outline:2px solid #e6eebc;outline-offset:5px}.reel-text-start{font:10px var(--body);padding:16px 0!important;min-height:40px}.reel-intro>.reel-fine{font-size:9px;line-height:1.7;color:#a8c0b5;margin:8px 0 24px}.reel-origin{font:9px var(--body);border-bottom:1px solid #dbe3c633;padding:0 0 7px!important}
.reel-screen{min-height:0;display:flex;align-items:center;flex-direction:column;gap:14px;justify-content:center}.reel-portrait{min-height:0;position:relative;height:calc(100% - 40px);aspect-ratio:9/16;max-width:100%;filter:drop-shadow(0 22px 32px #010b1570)}.reel-portrait canvas,.reel-portrait video{display:block;width:100%;height:100%;object-fit:contain;border:0;border-radius:0}.reel-portrait canvas{touch-action:none;cursor:grab}.reel-portrait canvas:active{cursor:grabbing}.reel-portrait canvas[hidden],.reel-portrait video[hidden]{display:none}.reel-drop-hint{display:none;position:absolute;inset:0;background:#dbe6beee;color:#20372d;align-items:center;justify-content:center;font:13px var(--body);pointer-events:none}.dragging .reel-drop-hint{display:flex}.reel-transport{width:100%;display:flex;align-items:center;gap:13px;max-width:300px;height:26px}.reel-transport button{font-size:12px;min-width:27px;min-height:27px}.reel-transport input{width:100%;min-width:30px;accent-color:#d7e6ac;height:2px}.reel-transport output{font:8px var(--body);min-width:65px;color:#bed1c4}
.reel-edit{min-height:0;align-self:center;display:flex;flex-direction:column;gap:20px}.reel-strip{display:flex;gap:13px}.reel-strip button{position:relative;padding:0;opacity:.5;transition:opacity .2s}.reel-strip button[aria-pressed=true]{opacity:1}.reel-strip button[aria-pressed=true]:after{content:'';position:absolute;bottom:-6px;left:0;right:0;height:2px;background:#dce8b8}.reel-strip canvas{display:block;width:39px;height:69px}.reel-strip span{position:absolute;right:5px;bottom:6px;font:7px var(--body);color:#1c3636;background:#eef0dc;padding:2px}.reel-writing label{display:flex;justify-content:space-between;font:8px var(--body);color:#bbcec0;letter-spacing:.06em}.reel-writing small{font-size:8px;letter-spacing:0}.reel-writing textarea{display:block;width:100%;height:92px;resize:none;border:0;border-bottom:1px solid #dde4c755;background:transparent;color:#f0eedc;font:500 24px/1.12 var(--body);padding:12px 0;outline-offset:5px;border-radius:0}.reel-writing textarea::placeholder{color:#baccc080;font-size:18px}.reel-edit-hint{font:9px var(--body);color:#a9c0b3;margin:9px 0 0}.reel-switches{display:flex;justify-content:space-between;gap:9px}.reel-switches button{font:9px var(--body);padding:4px 0;min-height:28px;border-bottom:1px solid #d2dfc522;color:#bdcec4}.reel-switches button[aria-pressed=true]{color:#ebefb4;border-color:#dce7b7}.reel-crop{display:flex;gap:16px;margin-top:14px}.reel-crop[hidden]{display:none}.reel-crop label{font:8px var(--body);color:#adc4b6;flex:1;min-width:0}.reel-crop input{display:block;width:100%;height:2px;margin:13px 0 8px;accent-color:#cdddaf}.reel-sequence-tools{display:flex;gap:22px}.reel-sequence-tools button{font:9px var(--body);padding:0;min-height:25px}.reel-maker button:disabled{opacity:.32;cursor:default}.reel-tempo{display:flex;align-items:center;gap:18px;border-top:1px solid #dbe4c433;padding-top:16px}.reel-tempo>span{font:7px var(--body);color:#a5bbaf}.reel-tempo button{font:10px var(--body);padding:4px 0;min-height:24px;border-bottom:1px solid transparent;color:#aec1b8}.reel-tempo button[aria-pressed=true]{color:#e7edb8;border-color:#dce6b3}
.reel-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #d6e1c432;padding-top:15px}.reel-footer p{font:10px/1.4 var(--body);color:#e5ebcd;margin:0 0 7px}.reel-footer>div>span{font:8px var(--body);color:#abc2b7}.reel-export{font:11px var(--body);padding:13px 24px;white-space:nowrap}.reel-footer [data-reel-cancel]{font:11px var(--body);padding:13px 24px;border:1px solid #dfebbc66;border-radius:30px}.reel-maker [hidden]{display:none!important}.is-exporting .reel-portrait{opacity:.7}.is-exporting .reel-upload{pointer-events:none}@media(min-width:761px) and (max-height:760px){.reel-intro{padding-top:0}.reel-intro h1{font-size:45px;margin:18px 0}.reel-intro>p{margin-bottom:15px}.reel-intro>.reel-fine{margin-bottom:12px}.reel-edit{gap:12px}.reel-strip canvas{width:29px;height:52px}.reel-writing textarea{height:75px;font-size:21px}.reel-crop{margin-top:7px}.reel-tempo{padding-top:10px}.reel-maker{gap:18px 3vw;grid-template-rows:minmax(0,1fr) 55px}}@media(max-width:900px) and (min-width:761px){.reel-maker{grid-template-columns:minmax(160px,.9fr) minmax(170px,1fr) minmax(210px,1fr);gap:20px 2vw}.reel-intro h1{font-size:40px}.reel-edit{gap:14px}.reel-tempo{gap:10px}.reel-writing textarea{font-size:21px}}@media(max-width:760px){
 .reel-maker{min-height:570px;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:60px minmax(290px,1fr) 96px;gap:20px 18px;padding:0 0 10px}
 .reel-intro{grid-column:1/-1;padding:0;align-self:start;position:relative;display:flex;align-items:start;justify-content:space-between;gap:12px}.reel-intro .eyebrow,.reel-intro>p,.reel-origin{display:none}.reel-intro h1{font-size:31px;line-height:.93;margin:0;flex:1}.reel-upload{width:145px;margin-top:0;max-width:45%}.reel-upload>span{font-size:10px;padding:10px 0}.reel-upload b{font-size:12px}.reel-text-start{position:absolute;right:0;top:37px;font-size:8px;padding:3px 0!important;min-height:22px}
 .reel-screen{grid-column:1;grid-row:2;gap:10px;align-self:start;height:auto;max-height:100%;margin-top:3px}.reel-portrait{height:auto;width:100%}.reel-transport{gap:6px;flex-wrap:wrap;height:auto;justify-content:space-between}.reel-transport input{order:3;flex-basis:100%;margin:4px 0}.reel-transport output{min-width:55px;text-align:right;font-size:7px}.reel-transport button{font-size:10px;min-width:20px;min-height:24px}
 .reel-edit{grid-column:2;grid-row:2;align-self:start;gap:13px}.reel-strip{gap:9px}.reel-strip canvas{width:25px;height:44px}.reel-strip span{display:none}.reel-writing label{font-size:6px;letter-spacing:0}.reel-writing small{font-size:6px}.reel-writing textarea{font-size:17px;height:88px;padding:9px 0;line-height:1.18}.reel-writing textarea::placeholder{font-size:15px}.reel-edit-hint{font-size:7px;line-height:1.5;margin:6px 0}.reel-switches{gap:4px;flex-direction:column;align-items:start}.reel-switches button{font-size:7px;min-height:25px}.reel-crop{gap:10px;margin-top:6px}.reel-crop label{font-size:6px}.reel-crop input{margin:10px 0}.reel-sequence-tools{gap:13px;flex-wrap:wrap}.reel-sequence-tools button{font-size:7px;min-height:23px}.reel-tempo{padding-top:8px;gap:13px;flex-wrap:wrap}.reel-tempo>span{flex-basis:100%;font-size:6px}.reel-tempo button{font-size:8px;min-height:23px}.reel-footer{grid-row:3;align-self:end;align-items:end;gap:12px;padding-top:12px;flex-wrap:wrap}.reel-footer>div{flex-basis:100%}.reel-footer p{font-size:8px;margin-bottom:5px;line-height:1.5}.reel-footer>div>span{font-size:7px;line-height:1.5;display:block}.reel-export{font-size:9px;padding:11px 19px}.reel-footer [data-reel-cancel]{font-size:9px;padding:10px 18px}}@media(max-width:360px){.reel-maker{gap:18px 13px;min-height:590px}.reel-intro h1{font-size:27px}.reel-writing textarea{font-size:16px}.reel-sequence-tools{gap:9px}}@media(prefers-reduced-motion:reduce){.reel-strip button{transition:none}}

.reel-replace{position:relative;display:inline-flex;align-items:center;overflow:hidden;font:9px var(--body);color:#deebba;min-height:25px;cursor:pointer}.reel-replace input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.reel-replace:focus-within{outline:1px solid #e6edb5;outline-offset:3px}.reel-sequence-tools{gap:16px;flex-wrap:wrap}@media(max-width:760px){.reel-replace{font-size:7px;min-height:23px}.reel-sequence-tools{gap:9px 14px}}
.reel-footer [data-reel-capability]{color:#efe0bb;font-size:10px;margin-bottom:8px}@media(max-width:760px){
 .reel-tune{display:block;font:11px var(--body);color:#dfe9bb;border-bottom:1px solid #dbe4bb55;padding:8px 0;min-height:36px;text-align:left}
 .reel-maker:not(.show-settings) .reel-composition,.reel-maker:not(.show-settings) .reel-tempo{display:none}
 .reel-maker.show-settings{grid-template-rows:60px minmax(490px,1fr) 106px;min-height:720px}
 .reel-edit{gap:16px}.reel-strip canvas{width:31px;height:55px}.reel-strip{gap:12px}.reel-writing label,.reel-writing small{font-size:9px}.reel-writing textarea{height:110px;font-size:18px}.reel-edit-hint{font-size:9px;line-height:1.5}.reel-switches button{font-size:10px;min-height:32px}.reel-crop label{font-size:9px}.reel-crop{margin-top:10px}.reel-crop input{height:4px;margin:15px 0}.reel-sequence-tools button,.reel-replace{font-size:10px;min-height:32px}.reel-sequence-tools{gap:6px 16px}.reel-tempo{gap:8px 16px}.reel-tempo>span{font-size:8px}.reel-tempo button{font-size:10px;min-height:32px}.reel-footer p{font-size:10px}.reel-footer>div>span{font-size:9px}.reel-maker{grid-template-rows:60px minmax(335px,1fr) 106px;min-height:600px}.reel-upload>span{font-size:11px}.reel-text-start{font-size:10px}.reel-export{font-size:11px;min-height:42px}.reel-transport output{font-size:8px}.reel-transport button{min-height:32px;min-width:30px}}
.reel-transport input,.reel-crop input{height:26px;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}
.reel-transport input::-webkit-slider-runnable-track,.reel-crop input::-webkit-slider-runnable-track{height:1px;background:#d5e4be66}
.reel-transport input::-webkit-slider-thumb,.reel-crop input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;border:0;background:#e1edbb;margin-top:-4.5px}
.reel-transport input::-moz-range-track,.reel-crop input::-moz-range-track{height:1px;background:#d5e4be66}.reel-transport input::-moz-range-thumb,.reel-crop input::-moz-range-thumb{width:10px;height:10px;border:0;background:#e1edbb}
.reel-crop input{margin:4px 0}.reel-transport{height:36px}.reel-transport button{min-width:36px;min-height:36px}.reel-footer p{line-height:1.55}
.reel-writing textarea:focus{outline:1px solid #dce7b5;outline-offset:6px}.reel-writing label{letter-spacing:.08em}.reel-replace{white-space:nowrap}@media(min-width:761px){.reel-writing label,.reel-writing small,.reel-crop label{font-size:10px}.reel-edit-hint,.reel-intro>.reel-fine,.reel-origin,.reel-text-start{font-size:11px}.reel-switches button,.reel-sequence-tools button,.reel-replace,.reel-tempo button{font-size:11px;min-height:34px}.reel-tempo>span{font-size:9px}.reel-footer>div>span,.reel-transport output{font-size:10px}.reel-footer p{font-size:11px}.reel-strip span{font-size:9px}}
@media(max-width:760px){ .reel-sequence-tools{gap:6px 15px}.reel-sequence-tools button,.reel-replace{min-height:36px}.reel-transport input{height:26px;flex-basis:100%;margin:-4px 0 0}.reel-transport{height:auto;gap:4px 6px}.reel-crop input{height:26px;margin:4px 0}.reel-tempo button{min-height:34px}}

/* In the making room: the tool sits between the header and the tools bar, uses the room's round
   player and cream main button, and keeps framing and pace folded until asked for. */
.film-view{background:radial-gradient(ellipse at 50% 42%,#33504a 0,#152d2c 48%,#0b2028 88%)}
.film-view .reel-maker{max-width:1450px;padding:104px 5.3vw 24px}
.film-view .reel-intro{padding-top:0}
.film-view .reel-intro .eyebrow{font-size:9px;letter-spacing:.16em;color:var(--lime);max-width:none}
.reel-transport button{width:36px;height:36px;min-width:36px;min-height:36px;border:1px solid #e3ead15c;border-radius:50%;display:grid;place-items:center;padding:0;background:#07172533;color:var(--cream)}
.reel-footer .reel-export{width:auto;padding:13px 24px;min-height:46px;gap:22px;font:500 13px var(--body)}
.reel-footer .reel-cancel{width:auto;min-height:46px}
.reel-tune{display:block;font:13px var(--body);color:#dfe9bb;border-bottom:1px solid #dbe4bb55;padding:8px 0;min-height:36px;text-align:left}
.reel-maker:not(.show-settings) .reel-composition,.reel-maker:not(.show-settings) .reel-tempo{display:none}
@media(min-width:761px) and (max-height:790px){.film-view .reel-maker{padding-top:84px}}
/* Tall screens (a tablet held upright): the column's width sets the picture, so the player stays under it. */
@media(min-width:761px) and (max-aspect-ratio:3/4){.film-view .reel-portrait{height:auto;width:100%}}
@media(max-width:760px){
 .film-view{padding-bottom:77px}
 .film-view .reel-maker{height:auto;padding:88px 21px 24px}
 :is(.reel-upload span,.reel-text-start,.reel-writing label span,.reel-writing label small,.reel-edit-hint,.reel-switches button,.reel-crop label,.reel-sequence-tools button,.reel-replace,.reel-tempo>span,.reel-tempo button,.reel-tune,.reel-transport output,.reel-footer p,.reel-footer>div>span,.reel-export,.reel-cancel){font-size:12px!important}
}