#transformation-theatre{--film-ink:#edbb7d;width:min(880px,calc(100vw - 28px),calc((100dvh - 360px)*1.7778));max-height:calc(100dvh - 28px);margin:auto;padding:0;border:1px solid #c7a77c;border-radius:3px 20px 3px 3px;background:#172d32;color:#f1e0bb;box-shadow:8px 10px 0 #0d2027,0 22px 100px #0008;overflow:auto;overscroll-behavior:contain;font-family:'DM Sans',sans-serif}
#transformation-theatre::backdrop{background:#08141de8;backdrop-filter:blur(8px)}
.transformation-ticket{position:relative;background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px)}
.transformation-mast{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;color:#cdb18c;font-size:9px;letter-spacing:2.4px;border-bottom:1px solid #bca37840}
#transformation-theatre button{font:11px/1.2 'DM Sans',sans-serif;letter-spacing:.2px;min-height:44px;border:1px solid #bda37970;border-radius:3px 8px 3px 3px;background:transparent;color:#ecdbb6;padding:10px 16px;cursor:pointer;touch-action:manipulation}
#transformation-theatre button:hover{background:#dfbd8520}#transformation-theatre button:focus-visible{outline:3px solid #c9ead8;outline-offset:3px}#transformation-theatre button:disabled{opacity:.45;cursor:default}
.transformation-mast .film-exit{font-size:10px;letter-spacing:0;border:0;padding:8px;flex:none}
.transformation-frame{position:relative;isolation:isolate;margin:18px 24px 0;padding:6px;background:#0d1c25;border:1px solid #c7a77a70;box-shadow:0 0 0 4px #0a1d22,0 0 0 5px #bfa27935}
.transformation-frame video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#112734}
.film-vignette{position:absolute;inset:6px;pointer-events:none;box-shadow:inset 0 0 55px #09141b55}
.film-stock{position:absolute;bottom:14px;left:19px;color:#f8deb390;font-size:6px;letter-spacing:1.6px;pointer-events:none}
#transformation-theatre .film-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#182b32eb;color:#ffe4ae;border-color:#d7bd8b;box-shadow:3px 3px 0 #08151e;white-space:nowrap}
#transformation-theatre [hidden]{display:none!important}
.transformation-caption{padding:22px 28px 16px;text-align:center}.film-chapter{font-size:8px;letter-spacing:2.3px;color:var(--film-ink)}
.transformation-caption h2{font:44px/.95 'Libre Caslon Display',Georgia,serif;font-weight:400;letter-spacing:-.6px;margin:9px 0 10px;color:#f2e2bd}.film-poem{font:16px/1.4 'Libre Caslon Display',Georgia,serif;margin:0;min-height:23px;color:#cecfba}
.film-memory{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:9px;row-gap:5px;margin-top:17px;font-size:10px;color:#bcd8c7}.film-memory-mark{color:var(--film-ink);font-size:19px}.film-safe{display:block;width:100%;font-size:8px;color:#a7b3a5;letter-spacing:.2px}
.film-footer{position:sticky;bottom:0;z-index:2;background:#172d32;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px 18px;border-top:1px dashed #bea77d40}.film-footer>div{display:flex;gap:8px}
#transformation-theatre .film-return{background:#d9bf8a;color:#25342f;border-color:#e4c892;font-weight:600;box-shadow:2px 3px 0 #091f26}
.film-finished .film-return{border-color:#eddfac}.watching-transformation #rattle-feedback{display:none}
@media(max-width:600px){#transformation-theatre{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.transformation-mast{padding:8px 13px;letter-spacing:1.5px;font-size:7px}.transformation-frame{margin:12px 13px 0;padding:4px}.film-vignette{inset:4px}.transformation-caption{padding:18px 15px 16px}.transformation-caption h2{font-size:34px}.film-poem{font-size:15px;min-height:42px}.film-chapter{font-size:7px;letter-spacing:1.7px}.film-footer{padding:12px 13px 15px;flex-wrap:wrap;gap:10px}.film-footer>div{flex:1}.film-footer .film-return{width:100%;flex:0 0 100%}.film-footer button{flex:1}.film-stock{font-size:5px;bottom:11px;left:12px}}
@media(max-height:500px) and (orientation:landscape){#transformation-theatre{width:min(800px,calc(100vw - 20px));max-height:calc(100dvh - 16px)}.transformation-ticket{display:grid;grid-template-columns:1.1fr 1fr}.transformation-mast{grid-column:1/-1;padding:4px 13px}.transformation-frame{margin:12px 0 12px 14px;align-self:center}.transformation-caption{padding:16px 14px 10px;align-self:center}.transformation-caption h2{font-size:29px}.film-poem{font-size:13px;min-height:35px}.film-memory{font-size:8px;margin-top:9px}.film-safe{font-size:7px}.film-chapter{font-size:6px}.film-footer{grid-column:1/-1;padding:7px 14px 10px;flex-wrap:nowrap}.film-footer .film-return{width:auto;flex:initial}.film-footer>div{flex:initial}.film-stock{display:none}}
@media(prefers-reduced-motion:reduce){#transformation-theatre *{animation:none!important;transition:none!important}}