/* /how-to/ page (video cards). Sits on top of /landing.css and /guides.css: same tokens, light and dark mode. */
.howto .ht-video{margin-top:32px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.howto .ht-video h2{margin-top:0}
.ht-sum{color:var(--muted);margin-top:10px}
.ht-player{position:relative;aspect-ratio:16/9;background:var(--road);border-radius:12px;overflow:hidden;margin-top:16px}
.ht-player iframe,.ht-play{position:absolute;inset:0;width:100%;height:100%;border:0}
.ht-play{padding:0;background:none;cursor:pointer;display:block;color:inherit}
.ht-play img{width:100%;height:100%;object-fit:cover}
.ht-btn{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--orange-btn);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .15s}
.ht-play:hover .ht-btn,.ht-play:focus-visible .ht-btn{transform:scale(1.08)}
.ht-play:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.howto .ht-note{font-size:.88rem;color:var(--muted);margin-top:10px}
.ht-chapters,.ht-transcript{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:6px 16px;margin-top:16px}
.ht-chapters summary,.ht-transcript summary{font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center}
.howto .ht-chapters ol{list-style:none;padding:0;margin:0 0 8px;gap:0}
.howto .ht-chapters li{border-top:1px solid var(--line);font-size:1rem}
.howto .ht-chapters a{display:flex;gap:10px;align-items:center;min-height:44px;padding:6px 0;text-decoration:none;overflow-wrap:anywhere}
.howto .ht-chapters a:hover{text-decoration:underline}
.ht-chapters .t{font-variant-numeric:tabular-nums;color:var(--muted);min-width:2.6em;flex:none}
.ht-transcript p{font-size:.98rem;margin:0 0 12px}
.ht-transcript summary+p{margin-top:6px}
.howto .ht-soon{margin-top:28px}
.howto .ht-zoom{margin-top:14px;color:var(--muted);font-size:.98rem}
@media (max-width:480px){.howto .ht-video{padding:14px}.ht-btn{width:64px;height:64px;margin:-32px 0 0 -32px}}
@media (min-width:700px){.ht-chapters ol{columns:2;column-gap:24px}.howto .ht-chapters li{break-inside:avoid}}