.story-turntable{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;margin:5rem 0;padding:2.2rem 0;border-block:1px solid var(--border-subtle)}
.story-turntable-intro h2{font:clamp(2.1rem,3.4vw,3.3rem)/1.12 var(--font-display);letter-spacing:-.04em;margin:.55rem 0 1rem}.story-turntable-intro h2 em{color:var(--primary-text);font-style:normal}.story-turntable-intro>p:last-child{max-width:30ch;font-size:.88rem;color:var(--text-body)}
.story-turntable-display{position:relative;min-height:330px;padding:1.1rem 1.25rem 1.2rem;border:1px solid var(--border-strong);border-radius:22px;background:radial-gradient(ellipse at 75% 10%,rgba(100,76,224,.15),transparent 48%),linear-gradient(145deg,var(--surface-accent),var(--surface-1) 68%);box-shadow:0 24px 64px -46px #5967d388;overflow:hidden;outline:none;perspective:900px}
.story-turntable-display:focus-visible{box-shadow:0 0 0 2px var(--primary-text),0 24px 64px -46px #5967d388}
.story-turntable-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:54px;border-bottom:1px solid var(--border-subtle);padding-bottom:.9rem;position:relative;z-index:6}.story-turntable-dial{display:flex;align-items:center;gap:.8rem}.story-turntable-dial>span:first-child{font:2.2rem/1 var(--font-display);color:var(--primary-text)}.story-turntable-dial>span:last-child{font:.68rem var(--font-code);letter-spacing:.1em;border:1px solid var(--border-strong);border-radius:999px;padding:.48rem .82rem}
.story-turntable-controls{display:flex;align-items:center;gap:.65rem}.story-turntable-controls button{width:38px;height:38px;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface-1);color:var(--primary-text);font-size:1rem;cursor:pointer}.story-turntable-controls button:hover,.story-turntable-controls button:focus-visible{border-color:var(--primary-text)}.story-turntable-controls span{min-width:48px;text-align:center;font:.68rem var(--font-code);color:var(--text-muted)}
.story-turntable-cards{position:relative;list-style:none;margin:0;padding:0;height:195px;transform-style:preserve-3d}.story-turntable-cards li{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:1rem .35rem;opacity:0;transform:translate3d(42px,0,-120px) rotateY(-8deg);pointer-events:none;transition:opacity .36s ease,transform .55s cubic-bezier(.22,.7,.18,1)}.story-turntable-cards li[data-active=true]{opacity:1;transform:translate3d(0,0,0) rotateY(0);pointer-events:auto}.story-turntable-cards li[data-direction=previous]{transform:translate3d(-42px,0,-120px) rotateY(8deg)}.story-turntable-cards .story-index{font:.65rem var(--font-code);color:var(--primary-text);letter-spacing:.09em}.story-turntable-cards h3{font:clamp(1.55rem,2.5vw,2.15rem)/1.16 var(--font-display);letter-spacing:-.025em;margin:.7rem 0}.story-turntable-cards p{max-width:46ch;margin:0;font-size:.9rem;line-height:1.6}
.story-turntable-dots{display:flex;gap:.45rem;position:relative;z-index:6}.story-turntable-dots button{width:30px;height:5px;padding:0;border:0;border-radius:999px;background:var(--border-strong);cursor:pointer;transition:width .25s ease,background .25s ease}.story-turntable-dots button[aria-selected=true]{width:48px;background:var(--primary-text)}.story-turntable-dots button:focus-visible{outline:2px solid var(--primary-text);outline-offset:4px}.story-turntable-hint{position:absolute;right:1.25rem;bottom:.95rem;margin:0;font:.58rem var(--font-code);color:var(--text-muted)}
@media(max-width:800px){.story-turntable{grid-template-columns:1fr;margin:3.5rem 0;gap:1.4rem}.story-turntable-intro{display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:end}.story-turntable-intro .eyebrow,.story-turntable-intro>p:last-child{grid-column:1/-1}.story-turntable-intro h2{margin-bottom:0}.story-turntable-display{min-height:315px}.story-turntable-cards{height:188px}}
@media(max-width:520px){.story-turntable{padding:1.5rem 0}.story-turntable-intro{display:block}.story-turntable-display{min-height:350px;padding:1rem}.story-turntable-head{align-items:flex-start}.story-turntable-dial>span:first-child{font-size:1.8rem}.story-turntable-controls{gap:.4rem}.story-turntable-controls button{width:34px;height:34px}.story-turntable-cards{height:220px}.story-turntable-hint{position:static;margin:.8rem 0 0}.story-turntable-cards h3{font-size:1.65rem}}
@media(prefers-reduced-motion:reduce){.story-turntable-cards li,.story-turntable-dots button{transition:none}.story-turntable-hint{display:none}}
