.creation-rotation{width:100%;box-sizing:border-box;margin:24px 0;text-align:left}.creation-rotation .panel-content{display:block!important}.rotation-art{display:block;width:100%;height:clamp(240px,42vw,470px);padding:14px;background:radial-gradient(ellipse,#311129,#09080c);border:1px solid #a846783d;cursor:pointer;box-sizing:border-box}.rotation-art img{width:100%;height:100%;object-fit:contain;filter:none!important}.rotation-caption{padding:12px 0}.rotation-caption h2{margin:0;font-size:clamp(18px,3vw,26px)}.rotation-caption p{margin:6px 0;opacity:.8}.rotation-controls{display:flex;flex-wrap:wrap;gap:10px}.rotation-controls button{padding:9px 14px}.rotation-art:focus-visible,.rotation-controls button:focus-visible{outline:2px solid #ff92c9;outline-offset:3px}.creation-rotation[hidden]{display:none!important}
/* Compact frame that follows the artwork instead of a fixed tall stage. */
.creation-rotation{width:min(560px,100%);max-width:100%;margin:18px auto;text-align:left}
.creation-rotation .panel-content{padding:12px}
.rotation-art{width:100%;height:auto;min-height:0;padding:0;background:#0d090e;border:0}
.rotation-art img{display:block;width:auto;height:auto;max-width:100%;max-height:260px;margin:0 auto;object-fit:contain}
.rotation-caption{padding:9px 0}.rotation-caption h2{font-size:17px}.rotation-caption p{font-size:12px}
.rotation-controls{gap:6px}.rotation-controls button{padding:6px 9px;font-size:12px}
.creation-rotation .pc-titlebar{font-size:11px}
/* A quiet pink CRT casing and glass overlay; artwork stays in full colour. */
.creation-rotation{border:1px solid #ed75b078;border-radius:13px;overflow:hidden;box-shadow:0 0 9px #ff63b038,0 0 28px #ec319826,inset 0 0 18px #ff92c910;background:#140b16}
.creation-rotation .pc-titlebar{background:linear-gradient(100deg,#33102b,#170c20);border-bottom:1px solid #d470aa42}
.rotation-art{position:relative;isolation:isolate;overflow:hidden;border-radius:7px;box-shadow:inset 0 0 14px #0009,0 0 12px #ff78c326}
.rotation-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,#09061115 3px,#09061115 4px),linear-gradient(130deg,#ffe4f509,transparent 38%,transparent 75%,#ffa0d20a);box-shadow:inset 0 0 18px #0004,inset 0 0 0 1px #ffc3e324}
.rotation-art:focus-visible{outline:2px solid #ffb5db;outline-offset:-3px}
.rotation-controls button{border:1px solid #ce6a9d66;border-radius:5px;background:#2a1228;color:#ffdbef}
.rotation-controls button:hover{background:#451b3c;box-shadow:0 0 10px #ff72b333}
@media(forced-colors:active){.rotation-art::after{display:none}.creation-rotation{border:1px solid CanvasText;box-shadow:none}}

/* Subtle snow follows the image frame, with rare gentle glass interference. */
.rotation-art::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background-image:url("rotation-snow.svg");background-repeat:repeat;background-size:160px 160px;opacity:.055;mix-blend-mode:screen;animation:rotation-snow-drift 1.3s steps(2,end) infinite,rotation-glass-glitch 17s linear infinite}
@keyframes rotation-snow-drift{0%,100%{background-position:0 0}33%{background-position:19px -13px}66%{background-position:-11px 21px}}
@keyframes rotation-glass-glitch{0%,91%,93%,100%{transform:none}91.5%{transform:translateX(.7px) skewX(.3deg)}92%{transform:translateX(-.7px)}}
#rotation-shuffle[aria-pressed="true"]{background:#501c42;border-color:#f09ecb;box-shadow:0 0 9px #ff73bb24}
@media(prefers-reduced-motion:reduce){.rotation-art::before{animation:none}}
@media(forced-colors:active){.rotation-art::before{display:none}}

/* More legible low-opacity snow and brief CRT interference. */
.rotation-art::before{opacity:.14;mix-blend-mode:normal;animation:rotation-snow-drift .45s steps(2,end) infinite,rotation-glass-glitch 5s linear infinite}
@keyframes rotation-glass-glitch{0%,82%,86%,100%{transform:none}83%{transform:translateX(1px) skewX(.7deg)}84%{transform:translateX(-1px) skewX(-.4deg)}85%{transform:none}}
@media(prefers-reduced-motion:reduce){.rotation-art::before{animation:none}}
/* Floating left artwork companion on laptop/desktop; room reserved beside it. */
@media(min-width:1000px){
 main{box-sizing:border-box;width:calc(100% - 244px);max-width:1200px;margin-left:244px;margin-right:auto}
 .creation-rotation{position:fixed;left:12px;top:clamp(120px,20vh,190px);z-index:4;margin:0;max-width:220px;max-height:calc(100dvh - 240px);overflow:auto}
 .rotation-art img{max-height:160px}
 .creation-rotation .panel-content{padding:10px}
 .creation-rotation .pc-titlebar{font-size:10px;gap:5px;flex-wrap:wrap}
 .rotation-caption h2{font-size:14px}
 .rotation-controls{gap:4px}.rotation-controls button{padding:5px 7px;font-size:11px}
}
/* Monochrome confined to the floating artwork preview; originals remain full colour. */
#creation-rotation #rotation-image{filter:grayscale(1)!important}
#creation-rotation .rotation-art::before,#creation-rotation .rotation-art::after{display:none!important;animation:none!important}