/* Thin ceramic exhibition console. The actual movie is always an intact rectangle. */
#detail.porcelain-room{width:100vw;max-width:none;height:100svh;max-height:100svh;border:0;outline:0;box-shadow:none;background:radial-gradient(ellipse at 28% 15%,#fcf9ef 0%,#f2ebde 55%,#e5d9c7 100%);color:#50342e}
#detail.porcelain-room[open]{display:grid;grid-template-rows:80px minmax(0,1fr)80px}
#detail.porcelain-room::backdrop{background:#e9e0d2}
#detail.porcelain-room:before{inset:-4%;background:url('assets/ceramic-background.png') 85% center/cover no-repeat;opacity:.12;filter:blur(12px);z-index:0}
#detail.porcelain-room:after{content:'';position:absolute;inset:77% 0 0;z-index:0;background:linear-gradient(#dacbb822,transparent 8%),radial-gradient(ellipse at 47% 8%,#99806a25,transparent 65%);border-top:1px solid #fff5;pointer-events:none}
#detail.porcelain-room .screen-head{margin-left:0;padding:0 5%;gap:25px;background:transparent;border:0;z-index:8}
#detail.porcelain-room .screen-brand{font:clamp(20px,2.2vw,36px)/1 Georgia;letter-spacing:.09em;white-space:nowrap;color:#573632}
#detail.porcelain-room .screen-brand small{font:400 .62em var(--serif);letter-spacing:.05em;margin-left:10px}
#detail.porcelain-room .screen-heading,#detail.porcelain-room .screen-rail,#detail.porcelain-room .screen-tape,#detail.porcelain-room .screen-file-tab{display:none}
#detail.porcelain-room .screen-position{gap:0;position:absolute;left:50%;transform:translateX(-50%);margin:0}
#detail.porcelain-room #detail-index{display:none}
#detail.porcelain-room .screen-dots{gap:22px;border-bottom:1px solid #b69a7744}
#detail.porcelain-room .screen-dots button{width:35px;height:36px;background:transparent;border:0;border-bottom:1px solid transparent;font:italic 18px Georgia;color:#6b4a40;padding:0 0 9px;transition:color .3s,border-color .3s}
#detail.porcelain-room .screen-dots button.current{color:#a76632;border-bottom-color:#a76632}
#detail.porcelain-room .screen-dots button:hover{color:#a76632;border-bottom-color:#bb9b75}
#detail.porcelain-room .screen-head .close{margin-left:auto;font:12px var(--ui-font);color:#6e5144;gap:22px}
#detail.porcelain-room .screen-head .close>span{border:0;font-size:28px;font-weight:300}
#detail.porcelain-room:not(.focus-view) .screen-layout{grid-row:2;width:min(92vw,calc((100svh - 185px)*2.05));height:auto;aspect-ratio:2.05;max-height:100%;align-self:center;justify-self:center;padding:3.3% 4.2% 3.1% 2.5%;display:grid;grid-template-columns:minmax(0,3.25fr) minmax(185px,1fr);gap:3%;position:relative;isolation:isolate;z-index:2;overflow:visible}
#detail.porcelain-room:not(.focus-view) .screen-layout:before{content:'';position:absolute;inset:-1.5% -1.5% -2%;z-index:-1;background:url('assets/screen-porcelain-v1.png') center/100% 100% no-repeat;filter:drop-shadow(3px 18px 12px #654b3026);pointer-events:none}
#detail.porcelain-room:not(.focus-view) .screen-layout:after{content:'';position:absolute;left:68%;right:2%;top:-4%;bottom:10%;z-index:-2;background:url('assets/screen-porcelain-v1.png') center/100% 100% no-repeat;transform:rotate(-4deg);filter:drop-shadow(2px 6px 5px #6c4a3020);pointer-events:none}
#detail.porcelain-room .screen-main{display:block;min-height:0;height:100%;position:relative}
#detail.porcelain-room .screen-player{height:100%;width:100%;display:grid;grid-template-rows:minmax(0,1fr)38px;border:1px solid #634936;outline:0;box-shadow:0 2px 6px #4c2e2526,inset 0 0 0 1px #e5d6bd;background:#261b1a;isolation:isolate}
#detail.porcelain-room .screen-player:before,#detail.porcelain-room .screen-player:after{display:none}
#detail.porcelain-room .detail-visual{background:#251b18;overflow:hidden;aspect-ratio:auto}
#detail.porcelain-room .detail-visual #detail-video{height:100%;width:100%;object-fit:contain;background:#251b18}
#detail.porcelain-room .screen-transport{background:linear-gradient(90deg,#382328,#432b2d);border-top:1px solid #75554855;color:#f1e3d3;font-size:9px;gap:12px}
#detail.porcelain-room .screen-transport button{color:#f0e5d5;font-size:21px}
#detail.porcelain-room .screen-transport input[type=range]{accent-color:#e5cfb3;height:2px}
#detail.porcelain-room #screen-big-play{width:60px;height:60px;background:#3a26254d;border-color:#f6ead088;font-size:26px}
#detail.porcelain-room .screen-editorial{display:none}
#detail.porcelain-room .screen-record{display:flex;flex-direction:column;padding:4% 0 1%;overflow:visible;isolation:isolate;position:relative;min-width:0}
#detail.porcelain-room .screen-record:before,#detail.porcelain-room .record-tag,#detail.porcelain-room .record-lines{display:none}
#detail.porcelain-room .screen-number{position:static;display:block;flex:none;font:400 clamp(70px,8vw,135px)/.95 Georgia;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:.8px #795047;z-index:auto;opacity:1;margin-bottom:14px}
#detail.porcelain-room .record-heading{padding-top:0}
#detail.porcelain-room .record-heading>.kicker{display:none}
#detail.porcelain-room .record-heading h2{font:400 clamp(23px,2.8vw,43px)/1.35 var(--serif);color:#52302e;letter-spacing:.035em;margin-bottom:18px}
#detail.porcelain-room .record-duration{font:10px Georgia;letter-spacing:.08em;border:0;border-top:1px solid #9c7a5b88;padding:18px 0 0;color:#7a5b48}
#detail.porcelain-room .record-duration b{font:14px Georgia;letter-spacing:.04em;margin-left:10px;color:#694837}
#detail.porcelain-room #detail-description{font:13px/1.8 var(--serif);letter-spacing:.08em;color:#8a6a53;margin-top:22px}
#detail.porcelain-room .screen-next-preview{margin:auto -12% -1% 8%;padding:16px 14px;border:1px solid #a7937466;background:#f1e8d8c9;box-shadow:3px 5px 6px #5c432e0e;transform:rotate(2deg);min-height:58px;position:relative;transition:transform .4s,box-shadow .4s}
#detail.porcelain-room .screen-next-preview:before{content:'↗';float:right;color:#8d9b7f;font:23px Georgia}
#detail.porcelain-room .screen-next-preview:hover{transform:rotate(0) translateY(-4px);box-shadow:3px 8px 12px #5c432e1b}
#detail.porcelain-room .screen-next-preview>span{font:11px/1.7 var(--ui-font);background:none;color:#70523d;padding:0 22px 0 0}
#detail.porcelain-room .screen-next-image{display:none}
#detail.porcelain-room .screen-end-note{padding:16px 0;margin-top:auto;border:0;font-size:18px;color:#806045}
#detail.porcelain-room .screen-footer{grid-row:3;padding:0 5%;border:0;background:none;gap:15px;z-index:4}
#detail.porcelain-room .porcelain-signature{margin-right:25px;color:#785244;white-space:nowrap}
#detail.porcelain-room .porcelain-signature em{font:italic 23px Georgia;display:block}
#detail.porcelain-room .porcelain-signature small{font:6px Arial;letter-spacing:.17em;display:block;margin-top:8px;color:#a38c72}
#detail.porcelain-room .screen-footer>button,#detail.porcelain-room #next{font:11px var(--ui-font);border:0;border-bottom:1px solid #bda88877;padding:8px 9px;color:#70533e}
#detail.porcelain-room .screen-footer>button:hover:not(:disabled){background:#ede0cb;color:#603e2f}
#detail.porcelain-room .screen-footer-rule{background:transparent}
#detail.porcelain-room .screen-music-state{display:none}
#detail.porcelain-room.focus-view[open]{grid-template-rows:65px minmax(0,1fr)65px;background:#f0e8d8}
#detail.porcelain-room.focus-view .screen-layout{grid-row:2;width:100%;height:100%;padding:0 5%;display:block;max-height:none;aspect-ratio:auto;align-self:stretch;justify-self:stretch}
#detail.porcelain-room.focus-view .screen-layout:before,#detail.porcelain-room.focus-view .screen-layout:after{display:none}
#detail.porcelain-room.focus-view .screen-head{background:#f3ecdf}
#detail.porcelain-room.focus-view .screen-record{display:none}
#detail.porcelain-room.portrait-media:not(.focus-view) .screen-layout{grid-template-columns:minmax(0,1.1fr) minmax(200px,1fr);width:min(76vw,calc((100svh - 180px)*1.4));aspect-ratio:1.4;padding:4% 5%;gap:12%}
#detail.porcelain-room.portrait-media:not(.focus-view) .screen-player{width:100%;height:100%}
#detail.porcelain-room.portrait-media:not(.focus-view) .screen-number{font-size:clamp(70px,7vw,120px)}
@media(max-width:1050px){#detail.porcelain-room[open]{grid-template-rows:65px minmax(0,1fr)65px}#detail.porcelain-room .screen-brand{font-size:22px}#detail.porcelain-room .screen-brand small{font-size:14px}#detail.porcelain-room .screen-dots{gap:12px}#detail.porcelain-room .screen-dots button{width:27px;font-size:16px}#detail.porcelain-room:not(.focus-view) .screen-layout{grid-template-columns:minmax(0,3fr) minmax(170px,1fr);width:min(94vw,calc((100svh - 160px)*2.05));padding:3% 4% 3% 2.5%}#detail.porcelain-room .record-heading h2{font-size:26px;margin-bottom:12px}#detail.porcelain-room .screen-number{font-size:80px;margin-bottom:12px}#detail.porcelain-room .record-duration{padding-top:12px;font-size:9px}#detail.porcelain-room #detail-description{font-size:11px;margin-top:15px}#detail.porcelain-room .screen-next-preview{padding:11px;min-height:45px}#detail.porcelain-room .screen-next-preview>span{font-size:9px}#detail.porcelain-room .porcelain-signature em{font-size:20px}#detail.porcelain-room .screen-footer>button,#detail.porcelain-room #next{font-size:10px;padding:7px}#detail.porcelain-room .screen-footer{gap:10px}}
@media(max-width:700px){#detail.porcelain-room[open]{grid-template-rows:62px minmax(0,1fr)58px}#detail.porcelain-room .screen-head{padding:0 4%;gap:8px;flex-wrap:wrap;align-content:center}#detail.porcelain-room .screen-brand{font-size:17px;letter-spacing:.035em}#detail.porcelain-room .screen-brand small{display:none}#detail.porcelain-room .screen-position{position:static;transform:none;margin-left:auto}#detail.porcelain-room .screen-dots{gap:5px}#detail.porcelain-room .screen-dots button{width:24px;height:30px;font-size:14px;padding-bottom:4px}#detail.porcelain-room .screen-head .close{font-size:0;gap:0;padding:0;margin-left:4px}#detail.porcelain-room .screen-head .close>span{padding-left:5px;font-size:25px}#detail.porcelain-room:not(.focus-view) .screen-layout{width:94vw;height:auto;aspect-ratio:auto;max-height:100%;display:flex;flex-direction:column;padding:24px 18px;gap:18px;overflow:auto}#detail.porcelain-room:not(.focus-view) .screen-layout:before{inset:0;background-size:100% 100%;filter:drop-shadow(2px 9px 8px #654b3020)}#detail.porcelain-room:not(.focus-view) .screen-layout:after{inset:0 2% 10% 30%;transform:rotate(-3deg)}#detail.porcelain-room .screen-main{flex:none;min-height:0;height:auto}#detail.porcelain-room .screen-player{height:auto;aspect-ratio:16/10;grid-template-rows:minmax(0,1fr)36px}#detail.porcelain-room .screen-record{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;padding:0;min-height:0;flex:none}#detail.porcelain-room .screen-number{font-size:65px;margin:0;grid-column:1;grid-row:1}#detail.porcelain-room .record-heading{grid-column:2}#detail.porcelain-room .record-heading h2{font-size:24px;margin-bottom:10px}#detail.porcelain-room .record-duration{font-size:9px;padding-top:10px}#detail.porcelain-room .record-duration b{font-size:13px}#detail.porcelain-room #detail-description{font-size:10px;margin-top:10px}#detail.porcelain-room .screen-next-preview{grid-column:2;grid-row:auto;margin:0;transform:rotate(0);padding:9px;min-height:34px;width:100%}#detail.porcelain-room .screen-next-preview>span{font-size:9px}#detail.porcelain-room .screen-next-preview:before{font-size:18px}#detail.porcelain-room .screen-end-note{grid-column:2;grid-row:auto;font-size:13px;padding:0;margin:0}#detail.porcelain-room .screen-footer{padding:0 4%;gap:4px}#detail.porcelain-room .porcelain-signature{display:none}#detail.porcelain-room .screen-footer>button,#detail.porcelain-room #next{font-size:9px;padding:7px 6px}#detail.porcelain-room .screen-footer-rule{display:block}#detail.porcelain-room.portrait-media:not(.focus-view) .screen-layout{width:94vw;aspect-ratio:auto;padding:20px 15px;gap:15px;display:grid;grid-template-columns:55% 1fr}#detail.porcelain-room.portrait-media:not(.focus-view) .screen-main{height:min(60svh,520px)}#detail.porcelain-room.portrait-media:not(.focus-view) .screen-player{height:100%;aspect-ratio:auto}#detail.porcelain-room.portrait-media:not(.focus-view) .screen-record{display:flex;flex-direction:column;gap:12px;padding-top:12px}#detail.porcelain-room.portrait-media:not(.focus-view) .screen-number{font-size:60px}#detail.porcelain-room.portrait-media:not(.focus-view) .record-heading h2{font-size:21px}#detail.porcelain-room.focus-view .screen-player{height:100%;aspect-ratio:auto}}
@media(prefers-reduced-motion:no-preference){#detail.porcelain-room[open]:not(.is-playing):not(.focus-view) .screen-layout{animation:porcelain-suspension 10s ease-in-out infinite alternate}@keyframes porcelain-suspension{from{translate:0 0}to{translate:0 -2px}}}
@media(prefers-reduced-motion:reduce){#detail.porcelain-room .screen-layout{animation:none!important}}
#detail.porcelain-room .screen-transport button svg{display:block;width:21px;height:21px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linejoin:round;stroke-linecap:round}
#detail.porcelain-room .screen-next-preview:before{content:none}
#detail.porcelain-room.portrait-media .screen-transport{gap:7px;padding:0 8px;font-size:8px}
#detail.porcelain-room.portrait-media #screen-volume{display:none}
#detail.porcelain-room.portrait-media #screen-seek{min-width:35px;width:65px}
#detail.porcelain-room.portrait-media .screen-transport button{min-width:24px}