/* ---------- student work helix (after templatemo "Helix Drift") ---------- */
.helix-wrap{margin-top:clamp(36px,5vw,60px)}
.helix{--ph:min(52vh,440px);position:relative;height:calc(var(--ph) * 1.32);min-height:320px;perspective:1400px;touch-action:pan-y;cursor:grab;overflow:hidden;user-select:none;-webkit-user-select:none}
.helix.grabbing{cursor:grabbing}
.helix .plate{position:absolute;left:50%;top:50%;height:var(--ph);width:auto;aspect-ratio:3/4;padding:0;border:0;background:var(--paper-2);border-radius:6px;overflow:hidden;cursor:pointer;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity;box-shadow:0 26px 46px -22px rgba(16,24,39,.5),0 2px 6px rgba(16,24,39,.08);transform:translate(-50%,-50%)}
.helix .plate::after{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);pointer-events:none}
.helix .plate>*{pointer-events:none}
.helix .plate img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.helix .plate.is-centre{cursor:zoom-in}
.helix .plate:focus-visible{outline:3px solid var(--orange);outline-offset:6px}
.helix .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(transparent 55%,rgba(11,18,32,.45))}
.helix .play::before{content:"";width:54px;height:54px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/60% no-repeat;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}

.hx-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:clamp(10px,2vw,22px)}
.hx-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-l);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,transform .3s var(--ease)}
.hx-btn:hover{border-color:var(--ink)}
.hx-btn:active{transform:scale(.95)}
.hx-btn svg{width:17px;height:17px}
.hx-btn .i-play{display:none}
.hx-btn.paused .i-play{display:block}
.hx-btn.paused .i-pause{display:none}
.hx-meta{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:96px}
.hx-count{color:var(--muted)}
.hx-prog{width:72px;height:2px;background:var(--line-l);border-radius:2px;overflow:hidden}
.hx-prog span{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}

@media (max-width:900px){ .helix{--ph:min(48vh,380px)} }
@media (max-width:600px){ .helix{--ph:min(46vh,320px)} }