.pieces-main{padding:36px 6% 60px;max-width:1500px;margin:auto}
.pieces-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.pieces-title h1{font-size:clamp(24px,3vw,38px);margin:0;letter-spacing:-1px}
.pieces-title a{font-size:12px;color:#a5bfd4}
.piece-viewer{border:1px solid #294052;border-radius:16px;background:radial-gradient(ellipse at 30% 45%,#102b3f80,transparent 65%),#060e19;overflow:hidden}
.piece-picker{position:relative;padding:14px 24px 0;border-bottom:1px solid #294052}
.picker-label{display:flex;align-items:center;justify-content:center;gap:12px;font-size:10px;letter-spacing:2px;color:#a6bfd4;text-transform:uppercase}
.picker-label select{background:#0b1928;color:#e4efff;border:1px solid #35516a;border-radius:6px;padding:8px 14px;font:inherit;letter-spacing:0;text-transform:none;font-size:14px}
.picker-window{display:flex;align-items:center;position:relative}
.picker-nav{flex:0 0 36px;border:0;background:transparent;color:#b9dfff;font-size:25px;cursor:pointer}
.piece-rail{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;height:175px;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0;padding-inline:calc(50% - 75px);box-sizing:border-box;min-width:0;width:100%;flex:1;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);overscroll-behavior-x:contain}
.piece-rail::-webkit-scrollbar{display:none}
.piece-option{flex:0 0 150px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;background:transparent;color:#bdd5e8;font-size:12px;cursor:pointer;opacity:calc(1 - var(--distance)*.34);transform:scale(calc(1 - var(--distance)*.12));transition:opacity .4s,transform .4s}
.piece-option[aria-selected=true]{color:#fff}.piece-option:focus-visible{outline:2px solid #82cfff;outline-offset:-4px;border-radius:8px}
.piece-art{display:block;width:65px;height:130px;background-image:url('../assets/piece-atlas.png');background-size:600% 100%;background-repeat:no-repeat;filter:drop-shadow(0 4px 15px #8ccfff25)}
.piece-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);align-items:center}
.piece-stage{min-width:0;aspect-ratio:700/600;display:flex;align-items:center;justify-content:center}
.piece-stage>svg{width:100%;height:100%;max-height:600px;overflow:visible}
.piece-panel{padding:30px 36px;border-left:1px solid #294052;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.piece-panel .eyebrow{font-size:10px;color:#a6c9e4;letter-spacing:2px}
.piece-panel h2{font-size:clamp(30px,3.5vw,48px);letter-spacing:-1px;margin:14px 0 22px}
.piece-panel p{font-size:15px;line-height:1.85;color:#b4c7d8;min-height:100px;margin:0 0 20px}
.piece-status{font-size:12px;color:#f2ce83;margin-bottom:18px}
.piece-actions{display:flex;gap:8px;flex-wrap:wrap}.piece-actions button{border:1px solid #35516a;background:#0b1b2c;color:#d2e4f4;padding:12px 16px;border-radius:6px;font-size:12px;cursor:pointer}
.piece-actions #piece-play{background:#b9dfff;color:#071724;border-color:#b9dfff}.piece-actions button:disabled{opacity:.3;cursor:default}
.piece-actions button:focus-visible,.picker-nav:focus-visible{outline:2px solid #82cfff;outline-offset:4px}
.piece-footnote{font-size:11px;color:#7996ae;line-height:1.7;margin:15px 4px 0}
.piece-changing .piece-stage,.piece-changing .piece-panel{animation:piece-arrive .5s ease both}
@keyframes piece-arrive{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:800px){
.pieces-main{padding:22px 5% 40px}.pieces-title{margin-bottom:16px}.pieces-title h1{font-size:27px}
.piece-picker{padding:12px 12px 0}.picker-window{justify-content:center;flex-direction:column}
.piece-rail{flex:none;flex-direction:column;overflow-x:hidden;overflow-y:auto;width:100%;height:230px;padding:70px 0;box-sizing:border-box;scroll-snap-type:y mandatory;mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);overscroll-behavior-y:contain}
.piece-option{flex:0 0 90px;width:100%;flex-direction:row;gap:25px;justify-content:center}.piece-art{width:40px;height:80px}
.picker-nav{position:absolute;right:12px;z-index:2;font-size:24px;transform:rotate(90deg)}#piece-prev{top:30px}#piece-next{bottom:30px}
.piece-layout{grid-template-columns:1fr}.piece-stage{aspect-ratio:700/560;max-height:390px}
.piece-panel{border-left:0;border-top:1px solid #294052;padding:24px}.piece-panel h2{font-size:30px;margin:10px 0 16px}.piece-panel p{font-size:14px;min-height:78px;margin-bottom:16px}
.piece-changing .piece-stage,.piece-changing .piece-panel{animation-name:piece-arrive-mobile}
@keyframes piece-arrive-mobile{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){.piece-option{transition:none}.piece-changing .piece-stage,.piece-changing .piece-panel{animation:none}}
.piece-stage{position:relative}
.piece-stage>svg{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.piece-stage>svg.is-dragging{cursor:grabbing}
.piece-stage>svg:focus-visible{outline:2px solid #82cfff;outline-offset:-5px;border-radius:12px}
.view-controls{position:absolute;bottom:12px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:#9dbbd3;pointer-events:none}
.view-controls button{pointer-events:auto;cursor:pointer;border:1px solid #35516a;border-radius:5px;background:#0b1b2c;color:#c9e0f4;padding:8px 12px;font:inherit}
.view-controls button:focus-visible{outline:2px solid #82cfff;outline-offset:3px}
.view-buttons{display:flex;gap:6px;pointer-events:auto}
.view-controls button{min-width:40px;min-height:40px;touch-action:manipulation}
.touch-hint{display:none}
.piece-actions button,.picker-nav,.picker-label select{touch-action:manipulation}
@media(hover:hover) and (pointer:fine){.view-controls button:hover,.piece-actions button:not(:disabled):hover{border-color:#8bcaff}.piece-option:hover{filter:brightness(1.2)}}
@media(pointer:coarse){
.view-controls button,.piece-actions button,.picker-label select{min-width:44px;min-height:44px}
.picker-nav{min-width:44px;min-height:44px}.view-buttons{gap:8px}
.mouse-hint{display:none}.touch-hint{display:inline}
.view-controls{align-items:flex-end}.view-controls>span{max-width:120px;line-height:1.5}
}