/* A manual, non-autoplay carousel. Motion follows input, never a timer. "Shuffle" swipe: the front cover tucks behind the stack. */
.record-stack { width:100%; max-width:460px; min-width:0; margin:0 auto; }
.stack-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 16px 25px; }
.stack-heading h2 { margin:0; font:11px/1.5 'Courier New',monospace; letter-spacing:1.5px; text-transform:uppercase; }
.stack-heading a { font-size:11px; color:var(--muted); }
.record-scene { position:relative; aspect-ratio:1; margin:0 20px; perspective:1300px; touch-action:pan-y; }
.stack-under { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--paper); pointer-events:none; border:1px solid #27282022; box-shadow:0 4px 10px #27282016; }
.stack-under-far { transform:translate(-7px,3px) rotate(-6deg); }
.stack-under-near { transform:translate(8px,-2px) rotate(5deg); }
.stack-under-spare { opacity:0; transform:translate(-4px,5px) rotate(-8deg) scale(.97); }
.record-turn { position:absolute; inset:0; will-change:transform; }
.record-face { position:absolute; inset:0; width:100%; height:100%; box-shadow:2px 9px 22px #27282025; border:1px solid #27282022; }
.stack-front { position:relative; padding:0; background:var(--paper); overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.stack-play { appearance:none; display:block; width:100%; height:100%; padding:0; border:0; background:transparent; touch-action:pan-y; }
.stack-play img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.stack-play:focus-visible { outline:2px solid var(--blue); outline-offset:-4px; }
.stack-caption { display:flex; align-items:start; justify-content:space-between; gap:18px; margin:27px 16px 15px; min-height:59px; }
.stack-caption strong { display:block; font:normal 22px/1.15 Georgia,serif; letter-spacing:-.4px; }
.stack-caption p { margin:6px 0 0; color:var(--muted); font-size:12px; }
.stack-count { flex-shrink:0; font:11px/1.5 'Courier New',monospace; font-variant-numeric:tabular-nums; color:var(--muted); padding-top:5px; }
.stack-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; border-top:1px solid var(--line); margin:0 16px; padding-top:13px; }
.stack-toolbar p { margin:0; font:10px/1.5 'Courier New',monospace; color:var(--muted); }
.stack-toolbar a { color:var(--ink); }
.stack-arrows { display:flex; gap:9px; }
.stack-arrows button { width:44px; height:44px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:50%; font:19px/1 Arial,sans-serif; }
.stack-arrows button:hover { background:var(--blue); color:var(--paper); border-color:var(--blue); }
.stack-arrows button:disabled { opacity:.35; }
.record-stack noscript p { font-size:12px; color:var(--muted); margin:15px 16px; }
@media(max-width:800px) and (min-width:601px) { @media(max-width:600px) { .record-stack { max-width:370px; margin-top:16px; }.record-scene { margin:0 13px; }.stack-heading,.stack-toolbar { margin-left:5px; margin-right:5px; }.stack-caption { margin-left:5px; margin-right:5px; }@media(max-width:360px) { 
@media(forced-colors:active) { .record-face,.stack-under,.stack-arrows button { border:1px solid CanvasText; }