/* =========================================================
   Explainer 01 · How it works — stage vocabulary (960×540 design size)
   ========================================================= */
.player .v{position:absolute;left:0;top:0;width:960px;height:540px;transform-origin:0 0;transform:scale(var(--s,1));font-family:var(--dit-sans);
  background:radial-gradient(ellipse at 50% -10%,rgba(31,58,48,.55),transparent 60%),var(--dit-bg);overflow:hidden}
/* video element vocabulary. Everything hidden until .on; .off hides again */
.v .e{position:absolute;opacity:0;transition:opacity .6s var(--e-out),transform .8s var(--e-out),filter .6s var(--e-out),color .4s,border-color .4s,background .4s;will-change:transform,opacity}
.v .e.on{opacity:1}
.v .e.on.off{opacity:0}
.v.seek, .v.seek *{transition:none!important}
.v .cap{left:60px;bottom:48px;display:flex;align-items:baseline;gap:16px;transform:translateY(14px)}
.v .cap.on{transform:none}
.v .cap .n{font-family:var(--dit-mono);font-size:14px;color:var(--dit-mint);letter-spacing:.1em}
.v .cap .t{font-size:40px;color:var(--dit-ink);font-weight:600;text-transform:uppercase;letter-spacing:-.01em}
.v .cap .t i{font-family:var(--dit-serif);font-weight:400;text-transform:none;color:var(--dit-mint);letter-spacing:0}
.v .wm{left:60px;top:40px;display:flex;align-items:center;gap:10px;color:var(--dit-ink);font-size:14px;font-weight:600;letter-spacing:.02em;opacity:.9}
.v .wm i{font-family:var(--dit-serif);font-weight:400;font-size:17px}
.v .bub{background:var(--dit-surface-2);border:1px solid var(--dit-line);border-radius:18px 18px 18px 6px;padding:18px 22px;color:var(--dit-ink);font-size:21px;line-height:1.45;width:420px}
.v .bub small{display:block;font-family:var(--dit-mono);font-size:11px;letter-spacing:.14em;color:var(--dit-muted);margin-bottom:8px}
.v .vpill{font-family:var(--dit-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid var(--dit-line);color:var(--dit-mint);background:var(--dit-surface)}
.v .vcard{background:var(--dit-surface);border:1px solid var(--dit-line);border-radius:16px;padding:24px;width:430px;display:grid;gap:14px}
.v .vcard .lbl{display:flex;justify-content:space-between;font-family:var(--dit-mono);font-size:11px;letter-spacing:.14em;color:var(--dit-muted)}
.v .vcard .h{font-size:28px;font-weight:500;display:flex;gap:12px;align-items:center}
.v .vcard .h .dot{width:12px;height:12px}
.v .vrow{display:grid;grid-template-columns:96px 1fr;gap:12px;border-top:1px solid var(--dit-line-2);padding-top:12px;font-size:16px;color:var(--dit-ink);opacity:0;transform:translateY(8px);transition:opacity .6s var(--e-out),transform .6s var(--e-out),background .4s,box-shadow .4s}
.v .vrow.on{opacity:1;transform:none}
.v .vrow span:first-child{font-family:var(--dit-mono);font-size:11px;letter-spacing:.12em;color:var(--dit-muted);padding-top:4px}
.v .vrow.hl span:first-child{color:var(--dit-text)}
.v .vrow.hl{background:rgba(183,240,212,.08);box-shadow:0 0 0 8px rgba(183,240,212,.08);border-radius:4px}
.v .checks{display:grid;gap:0;width:380px;border:1px solid var(--dit-line);border-radius:14px;background:var(--dit-surface);overflow:hidden}
.v .ck{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--dit-line-2);font-size:17px;color:var(--dit-muted);opacity:.35;transition:opacity .4s,color .4s}
.v .ck:first-child{border-top:0}
.v .ck .i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--dit-line);transition:all .4s}
.v .ck .s{font-family:var(--dit-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.v .ck.run{opacity:1;color:var(--dit-ink)}
.v .ck.run .i{border-color:var(--dit-mint);box-shadow:0 0 0 5px rgba(183,240,212,.12)}
.v .ck.ok{opacity:1;color:var(--dit-ink)}
.v .ck.ok .i{border-color:var(--dit-mint);background:var(--dit-mint)}
.v .ck.ok .s{color:var(--dit-mint)}
.v .ck.na{opacity:.85}
.v .ck.na .i{border-style:dashed;border-color:var(--dit-muted);background:transparent}
.v .ck .s .a,.v .ck .s .b{display:none}
.v .ck.ok .s .a,.v .ck.na .s .b{display:inline}
.v .end{inset:0;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;transform:scale(.98)}
.v .end.on{transform:none}
.v .end .big{font-size:52px;color:var(--dit-ink);font-weight:600;text-transform:uppercase;line-height:1.05}
.v .end .big i{font-family:var(--dit-serif);font-weight:400;text-transform:none;color:var(--dit-mint);display:block}
.v .end small{font-family:var(--dit-mono);font-size:12px;letter-spacing:.16em;color:var(--dit-muted);text-transform:uppercase}
.v .qmark{width:120px;height:120px;left:420px;top:150px;transform:scale(.6)}
.v .qmark.on{transform:scale(1)}
.v .qmark.on.off{transform:scale(1.2)}
.v .scan{left:0;top:0;width:2px;height:540px;background:linear-gradient(transparent,var(--dit-mint),transparent);box-shadow:0 0 30px 6px rgba(183,240,212,.25);transition:transform 2.2s var(--e-inout),opacity .3s}
.v .flabel{font-family:var(--dit-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:grid;gap:6px;transform:translateY(8px)}
.v .flabel.on{transform:none}
.v .flabel b{font-family:var(--dit-sans);font-size:22px;letter-spacing:0;text-transform:none;font-weight:500}
.v .note{font-size:22px;color:var(--dit-text);text-align:center;width:560px;line-height:1.45}
.v .note i{font-family:var(--dit-serif);font-size:26px;color:var(--dit-ink)}

.v .b1.sent{transform:translate(190px,-20px) scale(.35);opacity:0!important;filter:blur(4px)}
.v .ch.left{transform:translateX(-230px) scale(.85);opacity:.55}
.v .ch.left.off{opacity:0}
.v .ck.ok .i,.v .ck.na .i{box-shadow:none}
.v .vh{opacity:0;transform:translateY(8px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.v .vh .dot{transform:scale(0);transition:transform .9s var(--e-seal) .15s}
.v .vh.on{opacity:1;transform:none}
.v .vh.on .dot{transform:scale(1)}
.v .qm svg{width:120px;height:120px}
.v .qm::after{content:"";position:absolute;inset:-20px;border-radius:50%;border:1px solid var(--dit-mint);opacity:0}
.v .qm.on::after{animation:vping 1.2s var(--e-out) .2s 1}
@keyframes vping{0%{opacity:.6;transform:scale(.7)}100%{opacity:0;transform:scale(1.4)}}
.v .qmark svg path{fill:none;stroke:var(--dit-ink);stroke-width:7;stroke-linecap:round}.v .qmark svg circle{fill:var(--dit-mint)}