/* HYPER CUT — showcase sections: chaptered tutorial and reels. */

/* ---------- chaptered tutorial ---------- */
.tut{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:stretch}
.tut-player{position:relative;min-width:0;width:100%;align-self:start;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:#000;aspect-ratio:16/9}
.tut-player img{width:100%;height:100%;object-fit:cover;opacity:.55}
.tut-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tut-over{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;text-align:center;padding:20px}
.tut-play{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;box-shadow:0 0 0 10px rgba(var(--accent-rgb),.2),0 20px 40px -10px rgba(var(--accent-rgb),.9);transition:transform .2s}
.tut-play:hover{transform:scale(1.06)}
.tut-play svg{width:28px;height:28px;margin-left:4px}
.tut-over b{color:#fff;font-size:18px}
.tut-over span{color:var(--text-2);font-size:14px}
.tut-list{contain:size;min-height:100%;border-radius:18px;border:1px solid var(--line-2);background:rgba(14,12,28,.9);display:flex;flex-direction:column;overflow:hidden}
.tut-list header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.tut-list header b{color:#fff}
.tut-list header span{color:var(--muted);font-size:13px}
.tut-ch{display:grid;align-content:start;gap:2px;overflow-y:auto;padding:8px;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#3A3460 transparent}
.tut-ch button{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:10px 10px;border-radius:10px;text-align:start;color:var(--text-2);font-size:14.5px;transition:background .15s}
.tut-ch button:hover{background:rgba(255,255,255,.04);color:#fff}
.tut-ch button.on{background:rgba(15,0,89,.85);color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6)}
.tut-ch .no{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#1B1832;font:600 12px var(--f-mono);color:var(--accent-hi)}
.tut-ch time{font:500 12.5px var(--f-mono);color:var(--muted);direction:ltr}
@media (max-width:900px){.tut{grid-template-columns:1fr}.tut-list{contain:none}.tut-ch{max-height:300px}}

/* ---------- reels ---------- */
.reels{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter))) 18px;scrollbar-width:thin;scrollbar-color:#3A3460 transparent}
.reel{flex:0 0 220px;scroll-snap-align:start;display:grid;gap:10px;margin:0}
.reel .v{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:#000}
.reel video,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel video{opacity:0;transition:opacity .2s}
.reel.playing video{opacity:1}
.reel .tag9{position:absolute;top:10px;right:10px;height:24px;padding:0 9px;border-radius:7px;background:rgba(0,0,0,.55);color:#fff;font:600 11px var(--f-mono);display:flex;align-items:center;backdrop-filter:blur(4px)}
.reel .snd{position:absolute;bottom:10px;left:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff}
.reel .snd svg{width:16px;height:16px}
.reel figcaption b{display:block;color:#fff;font-size:15px}
.reel figcaption span{color:var(--muted);font-size:13px}
.sample-note{color:var(--faint);font-size:12.5px;text-align:center;margin-top:6px}