.room-transform{padding:0 var(--gutter) 40px;color:var(--ink);background:var(--paper)}
.room-pin{padding:26px 0;display:flex;flex-direction:column;gap:16px}
.room-top,.room-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:14px}
.room-top p{font:300 clamp(20px,2.3vw,32px)/1.2 var(--display)}
.room-count{font-size:13px;letter-spacing:.12em;color:var(--stone);white-space:nowrap}
.room-stage{position:relative;aspect-ratio:1672/941;width:100%;margin:auto;background:#e6e0d7;overflow:hidden}
.room-stage img,.room-stage video{width:100%;height:100%;object-fit:contain;max-width:none}
.room-stage video{position:absolute;inset:0;opacity:0;pointer-events:none}
.room-transform.film-visible .room-stage video{opacity:1}
.room-options{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
.room-options button{text-align:left;padding:12px 0 6px;border-top:1px solid var(--dark-rule);font:300 15px/1.3 var(--display);transition:color .2s,border-color .2s;min-height:68px}
.room-options button span{display:block;color:var(--stone);font:400 12px/1.4 var(--body);letter-spacing:.12em;margin-bottom:5px}
.room-options button[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.room-options button[aria-pressed=false]{color:var(--stone)}
.room-progress{height:1px;background:var(--dark-rule)}
.room-progress span{height:100%;display:block;background:#9b4912;transform:scaleX(0);transform-origin:left}
.room-bottom{flex-wrap:wrap;color:var(--stone)}
.room-actions{display:flex;gap:25px;align-items:center;color:var(--ink)}
.room-actions button,.room-actions a{font-size:14px;padding:7px 0;border-bottom:1px solid var(--dark-rule)}
.room-instruction{font-size:14px}
.room-notice{font-size:14px;min-height:1.5em}
.room-transform[data-mode=scroll]{height:calc(100svh + 3600px)}
.room-transform[data-mode=scroll] .room-pin{position:sticky;top:var(--header);height:calc(100svh - var(--header));display:grid;grid-template-rows:auto minmax(0,1fr) auto 1px auto auto;gap:14px;padding:22px 0}
.room-transform[data-mode=scroll] .room-stage{height:100%;width:100%;min-height:0;aspect-ratio:auto;margin:0;background:transparent}
.room-transform[data-mode=scroll] .room-options{flex-shrink:0}
.room-transform[data-mode=still] .room-stage{max-width:1300px}
.room-noscript{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px}
.room-noscript figcaption{font-size:14px;margin-top:8px}
@media(max-width:1100px){.room-options{gap:10px}.room-options button{font-size:14px}}
@media(max-width:899px),(max-height:699px){
 .room-pin{padding-top:15px}.room-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .room-options button{min-height:68px}.room-top{align-items:flex-end}.room-stage{width:100%}
 .room-bottom{gap:10px}.room-actions{gap:18px}.room-count{font-size:12px}
}
@media(max-width:480px){.room-transform{padding-left:18px;padding-right:18px}.room-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}.room-options button{font-size:15px}.room-top p{font-size:23px}.room-count{max-width:90px;text-align:right;line-height:1.5}.room-noscript{grid-template-columns:1fr}.room-actions{width:100%;justify-content:space-between}}

body:not(.js) .room-options,body:not(.js) .room-bottom,body:not(.js) .room-progress{display:none}