/* Atlas web app: Videos (js/howto.js). Same clay look as the rest of the app. */
.hw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:8px 0 16px}
.hw-card{display:grid;align-content:start;border-radius:26px;background:var(--surface);box-shadow:var(--clay);overflow:hidden;text-decoration:none;color:var(--ink)}
.hw-card:active{transform:scale(.98)}
.hw-thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(135deg,var(--primary-soft),var(--outline-soft));overflow:hidden}
.hw-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hw-play{position:relative;width:52px;height:52px;border-radius:50%;background:var(--primary);box-shadow:0 4px 0 var(--primary-edge),0 8px 16px rgba(47,109,240,.35);display:grid;place-items:center}
.hw-play::after{content:'';margin-left:4px;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.hw-len{position:absolute;right:8px;bottom:8px;background:rgba(30,20,60,.75);color:#fff;font:700 12px var(--t);border-radius:10px;padding:1px 8px}
.hw-body{display:grid;gap:4px;padding:12px 14px 14px}
.hw-body b{font:600 16px/1.25 var(--d)}.hw-body>span{font-size:13.5px;color:var(--muted);line-height:1.35}
.hw-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hw-body .hw-tags i{font:700 11.5px var(--t);font-style:normal;color:var(--on-primary-soft);background:var(--primary-soft);border-radius:10px;padding:1px 9px}
.hw-sec{margin:18px 2px 4px}
.hw-mc{display:grid;gap:8px;padding:14px;border-radius:28px;color:#fff;background:linear-gradient(135deg,#2F6DF0,#6C9BFF);box-shadow:var(--clay);margin:10px 0}
.hw-mc h2{margin:0;color:#fff}.hw-mc p{margin:0;opacity:.95}.hw-mc ol{margin:4px 0 0;padding-left:20px;font-size:13.5px}
.hw-mc .hw-thumb{border-radius:18px}
.hw-price{justify-self:start;background:var(--yellow);color:var(--on-yellow);font:700 14px var(--d);border-radius:14px;padding:2px 12px;box-shadow:0 3px 0 var(--yellow-edge)}
.hw-stage{position:relative;display:grid;place-items:center;border-radius:26px;overflow:hidden;background:#171230;aspect-ratio:16/9;box-shadow:var(--clay)}
.hw-stage.r9x16{aspect-ratio:9/16;max-height:72vh;width:min(100%,calc(72vh*9/16));margin:0 auto}
.hw-stage.r1x1{aspect-ratio:1/1;max-height:72vh;margin:0 auto;width:min(100%,72vh)}
.hw-stage video,.hw-stage .hw-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#171230}
.hw-big{position:relative;width:76px;height:76px;border:0;border-radius:50%;background:var(--primary);box-shadow:0 5px 0 var(--primary-edge),0 10px 22px rgba(47,109,240,.45);cursor:pointer}
.hw-big::after{content:'';position:absolute;left:30px;top:22px;border-left:24px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}
.hw-msg{padding:10px 14px;border-radius:16px;background:var(--warn);color:var(--on-warn);font-weight:700;margin:0}
.hw-chip{font-size:18px}
@media (prefers-reduced-motion:reduce){.hw-card:active{transform:none}}
/* masterclass (masterclass.css) in the web app's colours */
.hw-mc{--mc-fg:#fff;--mc-fg2:rgba(255,255,255,.88);--mc-glass:rgba(255,255,255,.16);--mc-glass2:rgba(255,255,255,.28)}
.hw-mc .mc-main{font-family:var(--d);box-shadow:0 4px 0 var(--yellow-edge);background:var(--yellow);color:var(--on-yellow)}
.hw-mc .mc-price{background:var(--yellow);color:var(--on-yellow);box-shadow:0 3px 0 var(--yellow-edge)}
.hw-mc .mc-thumb{border-radius:18px}
.hw-mc .mc-chapters{margin-top:4px;padding-left:0}
.mc-modal{--mc-ink:var(--ink);--mc-muted:var(--muted);--mc-sheet:var(--surface);--mc-accent:var(--primary);--mc-accent2:#6C9BFF;--mc-soft:var(--primary-soft);--mc-warn-bg:var(--warn);--mc-warn-ink:var(--on-warn);--mc-line:var(--outline);font-family:var(--t)}
.mc-sheet{border-radius:26px;box-shadow:var(--clay)}
.mc-b{box-shadow:0 3px 0 var(--primary-edge)}