.lg{display:flex;flex-wrap:wrap;gap:8px 14px;margin:6px 0 0}.lg .chip{margin:0}.chip.cl{border-color:var(--red);color:var(--red)}
.blk{padding:44px 0;border-top:1px solid var(--line)}.blk h2{font-size:clamp(2rem,5vw,3rem)}.blk .tag{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.rw{position:relative;aspect-ratio:16/9;background:#050506;border:2px solid var(--line);box-shadow:8px 8px 0 #000;overflow:hidden;border-radius:4px}
.rw video{position:absolute;inset:0;width:100%;height:100%;background:#000;display:block}
.rp{position:absolute;inset:0;display:grid;place-items:center;text-align:center;border:0;width:100%;color:var(--fg);cursor:pointer;font:inherit;background:radial-gradient(60% 80% at 25% 20%,rgba(230,36,41,.28),transparent 60%),radial-gradient(50% 60% at 85% 90%,rgba(230,36,41,.12),transparent 60%),radial-gradient(rgba(230,36,41,.22) 1px,transparent 1.6px) 0 0/14px 14px,#0a0a0b;animation:rpd 14s linear infinite}
@keyframes rpd{to{background-position:0 0,0 0,28px 28px,0 0}}
.rp::before,.rp::after{content:"";position:absolute;width:34px;height:34px;border:2px solid rgba(241,236,226,.4)}.rp::before{top:5%;left:3%;border-right:0;border-bottom:0}.rp::after{bottom:5%;right:3%;border-left:0;border-top:0}
.rp b{display:block;font:400 clamp(3rem,13vw,9rem)/.85 var(--d);letter-spacing:.02em}.rp b i{font-style:normal;color:var(--red)}.rp small{display:block;font:700 clamp(.7rem,1.6vw,.95rem) var(--s);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:12px}
.rp .pb{width:clamp(54px,9vw,84px);aspect-ratio:1;border:3px solid var(--red);border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;color:var(--red);font-size:clamp(1.2rem,3vw,1.9rem);padding-left:.2em;background:rgba(14,14,17,.7);transition:transform .2s,background .2s}.rp:hover .pb{transform:scale(1.08);background:var(--rb);color:#fff}
.rp[hidden]{display:none}.rc{position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;align-items:center;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));opacity:0;transition:opacity .2s}.rw:hover .rc,.rw:focus-within .rc,.rw.pa .rc{opacity:1}
.rc button{width:42px;height:42px;border:2px solid var(--line);background:rgba(14,14,17,.85);color:var(--fg);border-radius:6px;cursor:pointer;font-size:1rem}.rc button:hover{border-color:var(--red)}.rc input[type=range]{flex:1;accent-color:var(--red);padding:0;border:0;background:none;min-width:60px}.rc span{font:700 .8rem var(--s);min-width:84px;text-align:center}
.gm{position:relative;aspect-ratio:16/9;border:2px solid var(--line);box-shadow:8px 8px 0 #000;background:#0a0a0b;border-radius:4px;overflow:hidden}.gm canvas{display:block;width:100%;height:100%}.gm button{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border:2px solid var(--line);background:rgba(14,14,17,.85);color:var(--fg);border-radius:6px;cursor:pointer}.gm button:hover{border-color:var(--red)}
.cap{color:var(--mut);font-size:.9rem;margin:10px 0 0}
@media(max-width:600px){.rc span{display:none}}@media(prefers-reduced-motion:reduce){.rp{animation:none}}

/* ===== Cutline player (concept) ===== */
.cl{max-width:880px;margin:14px 0 6px;background:#050506;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 18px 50px -18px #000}
.cl-stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;isolation:isolate}
.cl-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;transform-origin:50% 50%}
.cl-stage::before,.cl-stage::after{content:"";position:absolute;left:0;right:0;height:5.5%;background:#000;z-index:3}.cl-stage::before{top:0}.cl-stage::after{bottom:0}
.cl-hud{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-end;padding:0 3% 7%;font:700 .78rem/1.2 var(--s);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 6px #000}
.cl-hud .rec{color:var(--red)}.cl-hud .rec::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);margin-right:7px;vertical-align:-1px}
.cl-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg2)}
.cl-bar button,.pt-ctl button{min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--bg3);color:var(--fg);border-radius:4px;cursor:pointer;font:700 .9rem var(--s);padding:0 12px;transition:border-color .15s,background .15s}
.cl-bar button:hover,.pt-ctl button:hover{border-color:var(--red)}
.cl-bar button.pp{background:var(--red);border-color:var(--red);color:#fff}.cl-bar button.pp:hover{background:var(--rh)}
.cl-bar button[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.cl-bar .g{display:flex;gap:4px;align-items:center}.cl-bar .g>span{font:700 .72rem var(--s);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-right:4px}
.cl-bar .tc{margin-left:auto;font:700 .95rem var(--s);font-variant-numeric:tabular-nums;color:var(--fg)}
.cl-tl{padding:6px 14px 14px;background:var(--bg2)}
.cl-seek{width:100%;accent-color:var(--red);margin:0 0 8px;padding:0;border:0;background:none;height:22px}
.cl-clips{display:flex;gap:3px}
.cl-clips button{position:relative;min-height:46px;padding:6px 8px;text-align:left;border:1px solid var(--line);background:var(--bg3);color:var(--mut);border-radius:3px;cursor:pointer;font:700 .7rem/1.25 var(--s);overflow:hidden;min-width:0;transition:border-color .15s,color .15s}
.cl-clips button b{display:block;color:var(--fg);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-clips button.cw{border-top:3px solid var(--red)}.cl-clips button.sf{border-top:3px solid var(--fg)}
.cl-clips button:hover{border-color:var(--red)}.cl-clips button[aria-current=true]{border-color:var(--red);background:#2a0c0e;color:var(--fg)}
.cl-key{display:flex;gap:16px;flex-wrap:wrap;margin:10px 14px 0;font-size:.8rem;color:var(--mut)}.cl-key i{display:inline-block;width:14px;height:4px;margin-right:6px;vertical-align:2px}
.cl-key{padding-bottom:12px;margin:0;padding-left:14px;background:var(--bg2)}

/* ===== How A Product Comes Together (animation) ===== */
.pt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:28px;align-items:center;max-width:880px;margin:14px 0 6px;padding:22px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 50px -18px #000}
.pt-steps{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pt-steps button{width:100%;display:grid;grid-template-columns:44px 1fr;gap:2px 12px;text-align:left;padding:12px 14px;border:1px solid var(--line);background:var(--bg3);color:var(--mut);border-radius:4px;cursor:pointer;font:500 .88rem/1.4 var(--s);position:relative;overflow:hidden;transition:border-color .2s,color .2s}
.pt-steps button:hover{border-color:var(--red)}
.pt-steps .n{grid-row:1/3;font:400 2rem/1 var(--d);color:var(--mut)}.pt-steps b{font:800 1rem var(--h);color:var(--fg)}
.pt-steps button[aria-current=step]{border-color:var(--red);color:var(--fg)}.pt-steps button[aria-current=step] .n{color:var(--red)}
.pt-steps .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--red)}
.pt-ctl{display:flex;gap:10px;align-items:center;margin-top:12px}.pt-ctl small{color:var(--mut)}
.pt-ctl button.pp{background:var(--red);border-color:var(--red);color:#fff}
.ph-wrap{display:flex;flex-direction:column;align-items:center}
.ph{position:relative;width:min(100%,260px);aspect-ratio:9/18.5;border:7px solid #1d1d21;border-radius:34px;background:#f5efe6;overflow:hidden;box-shadow:0 0 0 1px #3a3a40,0 30px 60px -20px rgba(230,36,41,.45),0 20px 40px -10px #000;isolation:isolate}
.ph::before{content:"";position:absolute;top:7px;left:50%;width:30%;height:14px;margin-left:-15%;background:#0a0a0b;border-radius:10px;z-index:9}
.ph .ly{position:absolute;inset:0}
.ph .cn{background:#13100e;color:#f1ece2;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 18px;opacity:0}
.ph .cn small{font:800 .62rem var(--s);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.ph .cn h4{margin:0;font:400 3.1rem/.9 var(--d);letter-spacing:.01em}.ph .cn h4 u{text-decoration:none;position:relative;display:inline-block}
.ph .cn h4 u::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:var(--red);transform:scaleX(var(--u,0));transform-origin:left}
.ph .cn .tg2{display:flex;flex-wrap:wrap;gap:6px}.ph .cn .tg2 span{font:700 .68rem var(--s);padding:5px 9px;border:1px dashed rgba(241,236,226,.5);border-radius:3px;opacity:0;transform:translateY(8px) rotate(-2deg)}
.ph .wf{background:#f5efe6;opacity:0}.ph .wf i{position:absolute;display:grid;place-items:center;border:1.5px dashed #8a7f70;background:rgba(138,127,112,.14);border-radius:6px;font:700 .5rem var(--s);letter-spacing:.08em;color:#6b6155;text-transform:uppercase;opacity:0;transform:scale(.9)}
.ph .wf i.k{background:rgba(230,36,41,.12);border-color:var(--red);color:var(--red)}
.ph .sc{overflow:hidden;opacity:0}.ph .sc .sl{position:absolute;inset:0;overflow:hidden;background:#f5efe6;will-change:transform}
.ph .sc img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;display:block;will-change:transform}
.ph .tap{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(230,36,41,.35);border:2px solid var(--red);z-index:8;opacity:0;pointer-events:none}
.pt .lbl{margin-top:14px;text-align:center;font:800 .72rem var(--s);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}.pt .lbl span{border-bottom:3px solid var(--red);padding-bottom:3px}
@media(max-width:700px){.pt{grid-template-columns:1fr;padding:16px}.ph-wrap{order:-1}.cl-bar .tc{margin-left:0}.cl-clips button{padding:5px 5px}.cl-clips button span{display:none}}
.cs>div{min-width:0}.cl,.pt{max-width:100%}.cl-bar{row-gap:8px}.cl-bar .g{flex-wrap:wrap}.cl-clips{min-width:0}.cl-hud{font-size:.68rem}
@media(max-width:600px){.cl-bar button{padding:0 9px}.cl-bar .g>span{display:none}.cl-key{font-size:.74rem}.cl-clips button b{font-size:.66rem}}