:root{--red:#c72336;--red-d:#9e1426;--red-l:#fbe9ec;--ink:#2b1d21;--mute:#8a777c;--line:#eedde1}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;font-family:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink)}
.tour{max-width:1600px;margin:0 auto}
.frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#fff}
.stage{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;overflow:hidden}
.bg{position:absolute;inset:0;background:
  radial-gradient(700px 500px at 105% -10%,rgba(199,35,54,.16),transparent 70%),
  radial-gradient(600px 420px at -8% 110%,rgba(199,35,54,.12),transparent 70%),
  linear-gradient(#fff,#fff8f9)}
.bg:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(199,35,54,.10) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(90deg,#000,transparent 40%)}

.brand{position:absolute;left:40px;top:38px;display:flex;align-items:center;gap:8px;font-size:24px;letter-spacing:.3px}
.brand .dot{width:14px;height:14px;border-radius:4px;background:var(--red);box-shadow:0 0 0 4px var(--red-l)}
.brand .sep{color:var(--mute);font-weight:500;font-size:16px;margin-left:2px}

.heading{position:absolute;left:290px;top:28px;right:60px;height:70px}
.chip{display:inline-block;font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);background:var(--red-l);border:1px solid #f4cdd4;padding:5px 11px;border-radius:999px}
.heading h1{margin:8px 0 0;font-size:31px;font-weight:750;letter-spacing:-.4px;white-space:nowrap}
.swap{animation:swap .6s cubic-bezier(.2,.8,.2,1)}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.rail{position:absolute;left:34px;top:122px;width:228px;margin:0;padding:0;list-style:none;z-index:95}
.rail:before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:var(--line)}
.rail li{position:relative;display:flex;align-items:center;gap:12px;height:52px;font-size:16px;color:var(--mute);cursor:pointer;transition:all .25s;user-select:none}
.rail li:hover{color:var(--ink);transform:translateX(3px)}
.rail li i{position:relative;z-index:1;flex:none;width:32px;height:32px;border-radius:9px;border:2px solid var(--line);background:#fff;font:700 12px/28px Inter,Arial;font-style:normal;text-align:center;color:var(--mute);transition:all .35s}
.rail li:hover i{border-color:var(--red);color:var(--red);transform:scale(1.08)}
.rail li.done{color:var(--ink)}
.rail li.done i{border-color:#f0b9c2;color:var(--red)}
.rail li.on{color:var(--red);font-weight:700}
.rail li.on i{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.12);box-shadow:0 6px 16px rgba(199,35,54,.35)}

.deck{position:absolute;left:290px;top:118px;width:1270px;height:750px;perspective:1600px}
.ghost{position:absolute;inset:0;border-radius:14px;background:#fff;border:1px solid var(--line)}
.ghost.g1{transform:translate(14px,14px);opacity:.9;box-shadow:0 10px 30px rgba(120,20,35,.08)}
.ghost.g2{transform:translate(28px,28px);opacity:.6;background:#fdf1f3}
.card{position:absolute;inset:0;border-radius:14px;background:#fff;overflow:hidden;
  box-shadow:0 30px 70px rgba(90,15,30,.18),0 0 0 1px rgba(150,40,60,.10);transform-origin:50% 0;will-change:transform,opacity}
.card.enter{animation:cardIn .85s cubic-bezier(.2,.85,.25,1) both}
.card.leave{animation:cardOut .7s cubic-bezier(.5,0,.75,0) both}
@keyframes cardIn{from{opacity:0;transform:translate3d(30px,70px,0) rotateX(-9deg) scale(.95)}to{opacity:1;transform:none}}
@keyframes cardOut{to{opacity:0;transform:translate3d(0,-60px,-120px) rotateX(10deg) scale(.93)}}
.bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#fbf6f7;border-bottom:1px solid var(--line)}
.bar s{width:11px;height:11px;border-radius:50%;background:#e6d2d6}.bar s:first-child{background:var(--red)}
.bar span{margin-left:14px;flex:0 1 420px;height:20px;border-radius:6px;background:#fff;border:1px solid var(--line);font-size:11.5px;line-height:18px;color:var(--mute);padding:0 10px}
.view{position:absolute;left:0;top:34px;right:0;bottom:0;overflow:hidden;background:#fff}
.shot{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.shot img{display:block;width:100%;height:100%}
.focus{position:absolute;border-radius:10px;border:3px solid var(--red);box-shadow:0 0 0 9999px rgba(43,16,22,.28),0 0 24px rgba(199,35,54,.45);opacity:0;pointer-events:none}
.cursor{position:absolute;left:0;top:0;width:30px;height:30px;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));opacity:0;transition:opacity .3s}
.ripple{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:3px solid var(--red);pointer-events:none;animation:rip .7s ease-out forwards}
@keyframes rip{from{transform:scale(.4);opacity:1}to{transform:scale(4);opacity:0}}

.caption{position:absolute;left:330px;right:70px;bottom:46px;margin:0 auto;max-width:1060px;padding:16px 24px 16px 26px;border-radius:14px;
  background:rgba(255,255,255,.95);border:1px solid var(--line);border-left:6px solid var(--red);box-shadow:0 14px 40px rgba(90,15,30,.18);
  font-size:23px;line-height:1.4;font-weight:550;color:#c9b8bc;transition:opacity .4s}
.caption b{font-weight:550;color:var(--ink);transition:color .15s}
.caption:empty{opacity:0}

/* Center Video Play Overlay */
.video-overlay{position:absolute;inset:0;background:rgba(20,10,14,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:90;transition:opacity .35s,visibility .35s}
.video-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.big-play-btn{display:flex;align-items:center;gap:18px;background:#c72336;color:#fff;border:0;border-radius:999px;padding:16px 32px 16px 20px;cursor:pointer;box-shadow:0 16px 36px rgba(199,35,54,.45);transition:transform .2s,box-shadow .2s}
.big-play-btn:hover{transform:scale(1.05);box-shadow:0 20px 45px rgba(199,35,54,.55)}
.play-icon-circle{width:54px;height:54px;border-radius:50%;background:#a81627;display:flex;align-items:center;justify-content:center;margin-right:2px}
.play-label-box{text-align:left;display:flex;flex-direction:column}
.play-label-box b{font-size:20px;letter-spacing:-.3px;color:#fff}
.play-label-box span{font-size:13px;color:#ffd2d8;margin-top:2px;font-weight:500}

.time-label{font-size:13px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums;flex:none;min-width:90px;text-align:center}
.dl-btn{display:inline-flex;align-items:center;gap:6px;background:#fbe9ec;color:#c72336;border:1px solid #f4cdd4;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.dl-btn:hover{background:#c72336;color:#fff;border-color:#c72336}

/* intro / outro */
.hero{position:absolute;inset:34px 0 110px;display:flex;align-items:center;padding:0 70px;gap:40px;background:linear-gradient(135deg,#fff 40%,#fff3f5)}
.hero .copy{flex:1}
.hero h2{font-size:54px;line-height:1.08;letter-spacing:-1.2px;margin:0 0 18px}
.hero h2 em{font-style:normal;color:var(--red)}
.hero p{font-size:21px;color:var(--mute);margin:0;max-width:520px}
.stack{position:relative;flex:none;width:520px;height:480px}
.plate{position:absolute;left:60px;width:400px;height:58px;border-radius:12px;display:flex;align-items:center;padding-left:22px;font-weight:700;font-size:18px;color:var(--ink);
  background:#fff;border:1.5px solid #f0c4cc;box-shadow:0 12px 24px rgba(120,20,35,.12);transform:skewY(-6deg);opacity:0;animation:plate .6s cubic-bezier(.2,.8,.2,1) forwards}
.plate.top{background:var(--red);color:#fff;border-color:var(--red)}
.plate small{margin-left:auto;margin-right:18px;font-size:12px;font-weight:600;opacity:.6}
@keyframes plate{from{opacity:0;transform:skewY(-6deg) translateY(-40px)}to{opacity:1;transform:skewY(-6deg)}}
.outro-actions{display:flex;align-items:center;gap:16px;margin-top:28px}
.outro-actions .cta{margin-top:0}
.cta{display:inline-block;margin-top:30px;background:var(--red);color:#fff;text-decoration:none;font-weight:700;font-size:22px;padding:16px 28px;border-radius:12px;box-shadow:0 12px 28px rgba(199,35,54,.35);cursor:pointer;position:relative;z-index:10;transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(199,35,54,.45)}
.cta-replay{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--red);border:2px solid var(--red);text-decoration:none;font-weight:700;font-size:20px;padding:14px 24px;border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 6px 16px rgba(199,35,54,.15)}
.cta-replay:hover{background:var(--red-l);transform:translateY(-1px)}
.url{display:block;margin-top:16px;font-size:16px;color:var(--mute)}

.controls{display:flex;align-items:center;gap:12px;padding:12px 4px;position:relative;z-index:95}
.controls button{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--red);font-size:15px;cursor:pointer;transition:all .2s}
.controls button:hover{background:var(--red-l);transform:scale(1.05)}
.progress{flex:1;display:flex;gap:4px;height:40px;align-items:center}
.progress div{flex:1;height:6px;border-radius:3px;background:var(--line);cursor:pointer;overflow:hidden;position:relative;transition:height .15s}
.progress div:hover{height:12px}
.progress div i{position:absolute;inset:0;width:0;background:var(--red)}
.nofx *,.nofx *:before{animation:none!important;transition:none!important}.nofx .plate{opacity:1}
@media (prefers-reduced-motion:reduce){.card.enter,.card.leave,.plate{animation-duration:.01s}}