/* The editor's three components share one scene. Geometry follows
   FitGeometry, MirrorLayer's fill copy, and mirrored-repeat surround UVs. */
.palace-story .chapter-editor .chapter-layout {grid-template-columns:minmax(0,1fr);gap:46px}
.palace-story .chapter-editor .chapter-visual {max-width:none}
.palace-story #styling.chapter-editor .chapter-copy h2 {font-size:clamp(3rem,6vw,6.5rem)}
.pc-editor-cinema {--demo-accent:#0e6ba8;display:grid;grid-template-columns:190px minmax(0,1fr) 290px;gap:18px;align-items:center;min-width:0}
.pc-editor-cinema > * {min-width:0}
.pc-cinema-layers {width:100%;align-self:center}
.pc-cinema-layers .pc-header {padding:12px;min-height:44px}
.pc-cinema-layers .pc-header > strong {font-size:14px}
.pc-cinema-layers .pc-header > div {gap:10px}
.pc-cinema-layers .pc-header .material-icon {font-size:17px!important}
.pc-cinema-layers .pc-layer-row {padding:12px 9px;gap:6px;min-height:50px;transition:background .5s,color .5s,opacity .5s}
.pc-cinema-layers .pc-layer-row > span:not(.material-icon) {font-size:13px}
.pc-cinema-layers .pc-layer-row .material-icon {font-size:16px!important}
.pc-cinema-layers .is-muted {opacity:.3}
.pc-cinema-binding {display:flex;align-items:center;gap:8px;padding:15px 12px;border-top:1px solid #333;color:#b0b0b0;font:11px PalaceRoboto,sans-serif}
.pc-cinema-binding .material-icon {font-size:17px!important}
.pc-cinema-binding i {width:15px;height:15px;margin-left:auto;background:var(--auto-color,#385b78);transition:background 1.4s}
.pc-cinema-editor {min-width:0}
.pc-cinema-shell {background:#1a1a1a;padding:0;overflow:hidden;--pc-cut:20px}
.pc-cinema-shell .pc-compose-top {top:15px;left:16px;right:16px}
.pc-cinema-shell .pc-compose-top > div {gap:8px}
.pc-cinema-shell .pc-compose-top > div > .material-icon {width:27px;height:27px;font-size:17px!important}
.pc-cinema-shell .pc-compose-actions {bottom:17px;left:10px;right:10px;gap:26px}
.pc-cinema-shell .pc-compose-actions > .material-icon {font-size:24px!important}
.pc-cinema-shell .pc-compose-apply > .material-icon {font-size:25px!important;padding:10px}
.pc-cinema-canvas {position:relative;aspect-ratio:16/10;overflow:hidden;background:#385b78;isolation:isolate}
.pc-cinema-frame {position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.22,1,.36,1);pointer-events:none;background:var(--scene-color,#385b78)}
.pc-cinema-frame.is-active {opacity:1;z-index:1}
.pc-cinema-frame[data-frame="1"] {--scene-color:#567d8e}
.pc-cinema-frame[data-frame="2"] {--scene-color:#0e617c}
.pc-cinema-frame[data-frame="3"] {--scene-color:#a9b7b7}
.pc-cinema-frame[data-frame="4"] {--scene-color:#173578}
.pc-cinema-media {position:absolute;left:50%;top:50%;width:62%;aspect-ratio:4/3;transform:translate(-50%,-50%);transition:width 1.8s cubic-bezier(.22,1,.36,1),height 1.8s,left 1.8s cubic-bezier(.22,1,.36,1),filter 1.8s,opacity 1.8s;z-index:1}
.pc-cinema-media img {display:block;width:100%;height:100%;object-fit:cover}
.pc-cinema-frame[data-frame="0"] .pc-cinema-media {width:100%;height:100%;aspect-ratio:auto}
.pc-cinema-frame[data-frame="1"] .pc-cinema-media {width:100%;height:100%;aspect-ratio:auto}
.pc-cinema-frame[data-frame="3"] .pc-cinema-media {width:100%;height:100%;aspect-ratio:auto}
.pc-cinema-mirror {position:absolute;inset:-35px;filter:blur(0);transition:filter 2s ease,transform 2s ease;transform:scale(1.03)}
.pc-cinema-mirror img {width:100%;height:100%;object-fit:cover}
.pc-editor-cinema[data-scene="2"][data-effects="true"] .pc-cinema-mirror {filter:blur(25px);transform:scale(1.12)}
.pc-cinema-footer {display:flex;justify-content:space-between;gap:12px;padding:18px 2px 12px;font:500 13px/1.5 PalaceRoboto,sans-serif;color:var(--story-ink)}
.pc-cinema-counter {color:var(--story-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.pc-cinema-picks {display:none;gap:10px;justify-content:center}
.pc-editor-cinema.is-ready .pc-cinema-picks {display:flex}
.pc-cinema-picks button {border:2px solid transparent;padding:3px;background:transparent;width:66px;cursor:pointer;opacity:.55;transition:opacity .4s,border-color .4s,transform .4s}
.pc-cinema-picks img {display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.pc-cinema-picks button[aria-pressed="true"] {opacity:1;border-color:var(--story-accent)}
.pc-cinema-picks button:hover {opacity:1;transform:translateY(-4px)}
.pc-cinema-tools .pc-header {padding:13px 16px;min-height:50px}
.pc-cinema-tools .pc-header > strong {font-size:17px}
.pc-cinema-tools .pc-tool-tabs > span {height:46px}
.pc-cinema-tools .pc-tool-tabs .material-icon {font-size:22px!important}
.pc-cinema-tool-stack {display:grid;min-height:420px}
.pc-cinema-tool-page {grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .5s}
.pc-editor-cinema[data-tool="style"] [data-tool-page="style"],.pc-editor-cinema[data-tool="effects"] [data-tool-page="effects"],.pc-editor-cinema[data-tool="transform"] [data-tool-page="transform"] {visibility:visible;opacity:1}
.pc-cinema-tools .pc-style-options {padding:22px 12px;gap:20px 6px}
.pc-cinema-tools .pc-circle {width:46px;height:46px}
.pc-cinema-tools .pc-circle .material-icon {font-size:25px!important}
.pc-cinema-tools .pc-option small {font-size:10px}
.pc-cinema-tools .pc-effects-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:20px 14px;gap:14px 8px}
.pc-cinema-tools .pc-effect {flex:none}
.pc-cinema-tools .pc-effect-circle {width:43px;height:43px}
.pc-cinema-tools .pc-effect-circle > .material-icon {font-size:21px!important}
.pc-cinema-tools .pc-effect-circle > b {width:16px;height:16px}
.pc-cinema-tools .pc-effect-circle > b > .material-icon {font-size:10px!important}
.pc-cinema-tools [data-tool-page="style"] > .pc-slider {margin-inline:18px}
.pc-cinema-tools .pc-slider {padding:8px 0 13px}
.pc-cinema-tools .pc-slider > div {margin-bottom:18px}
.pc-cinema-tools .pc-slider strong {font-size:12px}
.pc-cinema-tools .pc-slider > div > span {padding:5px 7px;font-size:10px}
.pc-cinema-tools .pc-open-effect {padding:0 16px 10px}
.pc-cinema-tools .pc-effect-circle,.pc-cinema-tools .pc-circle {transition:color .5s,background .5s}
@media(min-width:1101px) and (max-width:1350px) {
 .pc-editor-cinema {grid-template-columns:165px minmax(0,1fr) 260px;gap:14px}
 .pc-cinema-layers .pc-layer-row > .material-icon:last-child {display:none}
 .pc-cinema-tools .pc-circle {width:42px;height:42px}
}
@media(max-width:1100px) {
 .pc-editor-cinema {grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:24px;align-items:start}
 .pc-cinema-editor {grid-column:1/-1;grid-row:1}
 .pc-cinema-layers {grid-column:1;grid-row:2;max-width:260px;justify-self:end}
 .pc-cinema-tools {grid-column:2;grid-row:2;width:100%;max-width:400px}
}
@media(max-width:600px) {
 .palace-story #styling.chapter-editor .chapter-copy h2 {font-size:clamp(2.3rem,9vw,3.5rem)}
 .pc-editor-cinema {gap:22px;grid-template-columns:minmax(0,1fr)}
 .pc-cinema-editor {grid-column:1;grid-row:1}
 .pc-cinema-layers {grid-column:1;grid-row:2;justify-self:center;max-width:300px}
 .pc-cinema-tools {grid-column:1;grid-row:3;justify-self:center;max-width:350px}
 .pc-cinema-shell {padding:0}
 .pc-cinema-shell .pc-compose-top {top:11px;left:10px;right:10px}
 .pc-cinema-shell .pc-compose-top > div {gap:5px}
 .pc-cinema-shell .pc-compose-top > div > .material-icon {width:24px;height:24px;font-size:15px!important}
 .pc-cinema-shell .pc-compose-top > div:first-child > .material-icon:nth-child(-n+2) {display:none}
 .pc-cinema-shell .pc-compose-actions {gap:23px;bottom:10px}
 .pc-cinema-shell .pc-compose-actions > .material-icon {font-size:21px!important}
 .pc-cinema-shell .pc-compose-apply > .material-icon {font-size:22px!important;padding:8px}
 .pc-cinema-shell .pc-compose-badge {font-size:9px;padding:5px}
 .pc-cinema-footer {font-size:11px}
 .pc-cinema-picks {gap:6px}
 .pc-cinema-picks button {width:54px}
}
@media(prefers-reduced-motion:reduce) {
 .pc-editor-cinema * {transition:none!important;animation:none!important}
}

/* Controls float directly on the finished wallpaper, without chrome gutters. */
.pc-cinema-shell .pc-compose-top,.pc-cinema-shell .pc-compose-actions {z-index:5;color:#fff}
.pc-cinema-shell .pc-compose-top > div > .material-icon,.pc-cinema-shell .pc-compose-badge {background:rgba(6,18,30,.68);color:#fff}
.pc-cinema-shell .pc-compose-actions > .material-icon,.pc-cinema-shell .pc-compose-location > .material-icon {filter:drop-shadow(0 2px 4px #001020)}
.pc-cinema-shell .pc-compose-actions small {color:#fff;text-shadow:0 2px 5px #001020}
.pc-cinema-text {position:absolute;z-index:2;left:9%;top:42%;font:400 clamp(22px,3vw,48px)/1.08 PalaceRoboto,sans-serif;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 14px rgba(0,8,20,.8)}
.pc-cinema-clamp {position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.8s}
.pc-editor-cinema[data-clamped="true"] .pc-cinema-clamp {opacity:1}
.pc-editor-cinema[data-transformed="true"] [data-frame="4"] .pc-cinema-media {width:40.3%;left:72%}
.pc-cinema-transform {padding:16px 18px}
.pc-transform-switch {display:flex;justify-content:center;gap:18px;border:1px solid #444;padding:8px;margin-bottom:15px;color:#aaa;font:12px PalaceRoboto,sans-serif}
.pc-transform-switch span {display:flex;align-items:center;gap:6px}
.pc-transform-switch span:first-child {color:#73bbed}
.pc-transform-switch .material-icon {font-size:17px!important}
.pc-cinema-transform h3 {font:500 13px PalaceRoboto,sans-serif!important;color:#fff!important;margin:8px 0 16px!important}
@media(max-width:600px) {
 .pc-cinema-shell .pc-compose-top {top:9px;left:9px;right:9px}
 .pc-cinema-shell .pc-compose-top > div > .material-icon {width:21px;height:21px;font-size:14px!important}
 .pc-cinema-shell .pc-compose-actions {bottom:8px;gap:20px}
 .pc-cinema-shell .pc-compose-actions small {font-size:8px}
 .pc-cinema-text {font-size:clamp(18px,5.5vw,28px);top:40%}
}

/* Center preserves each source's own aspect ratio. Fill/fit explicitly
   override the media box; Edge Clamp uses matching native-pixel SVG slices. */
.pc-cinema-frame[data-frame="2"] .pc-cinema-media {aspect-ratio:16/9}
.pc-cinema-frame[data-frame="3"] .pc-cinema-media {aspect-ratio:40/21}
.pc-cinema-frame[data-frame="4"] .pc-cinema-media {aspect-ratio:80/49}

/* Fill animates into the centered source rectangle while its correct
   surround fades in. The mirrored tiles retain the cloud image's 40:21 aspect. */
.pc-editor-cinema[data-clamped="true"] [data-frame="1"] .pc-cinema-media {width:62%;height:74.4%}
.pc-cinema-reflections {position:absolute;left:50%;top:50%;width:186%;height:156.24%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);opacity:0;transition:opacity 1.8s}
.pc-cinema-reflections img {display:block;width:100%;height:100%;object-fit:fill;min-width:0;min-height:0}
.pc-cinema-reflections img:nth-child(3n+1),.pc-cinema-reflections img:nth-child(3n) {transform:scaleX(-1)}
.pc-cinema-reflections img:nth-child(-n+3),.pc-cinema-reflections img:nth-child(n+7) {transform:scaleY(-1)}
.pc-cinema-reflections img:is(:nth-child(1),:nth-child(3),:nth-child(7),:nth-child(9)) {transform:scale(-1,-1)}
.pc-editor-cinema[data-mirrored="true"] .pc-cinema-reflections {opacity:1}
.pc-editor-cinema[data-mirrored="true"] [data-frame="3"] .pc-cinema-media {width:62%;height:52.08%}