.cx-ht{background:var(--cx-cream);padding:clamp(40px,5vw,64px) 0}
.cx-ht .cx-wrap.cx-ht__grid{max-width:min(var(--page-width,1500px),calc(1120px + 2 * var(--page-width-padding,32px)))}
.cx-ht__grid{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.cx-ht__steps{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:10px}
.cx-ht__title{font-size:30px;margin-bottom:6px}
.cx-ht__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cx-ht .cx-ht__step{width:100%;text-align:left;font:inherit;color:#121212;background:#fff;border:1px solid var(--cx-line);border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;gap:14px;align-items:flex-start;min-height:52px;transition:border-color .2s,background .2s;text-transform:none;letter-spacing:normal}
.cx-ht .cx-ht__step:hover{border-color:#bdb3a6}
.cx-ht .cx-ht__step.is-active{background:#fbf3ea;border:2px solid #121212;padding:11px 13px}
.cx-ht__num{flex:0 0 auto;width:32px;height:32px;border-radius:999px;background:#efe8e0;font-weight:800;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.cx-ht__step.is-done .cx-ht__num{background:#121212;color:#fff}
.cx-ht__step.is-active .cx-ht__num{background:var(--cx-orange);color:#121212}
.cx-ht__stepbody{display:flex;flex-direction:column;gap:6px;min-width:0}
.cx-ht__steptitle{font-weight:700;font-size:16.5px;line-height:1.3;padding-top:4px}
.cx-ht__time{font-weight:500;font-size:14px;color:#5c5c5c}
.cx-ht__detail{display:flex;flex-direction:column;gap:6px}
.cx-ht__detail[hidden],.cx-ht__pins[hidden],.cx-ht__tipbox[hidden]{display:none!important}
.cx-ht__body{font-size:15px;line-height:1.5;color:#3d3d3d}
.cx-ht__tip{font-size:14px;line-height:1.45;color:var(--cx-orange-dk);font-weight:600}
.cx-ht__video{min-height:44px;display:inline-flex;align-items:center}
.cx-ht__right{flex:1.3 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.cx-ht__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cx-ht__count{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5c5c5c}
.cx-ht__count b{color:var(--cx-orange-dk)}
.cx-ht .cx-ht__play{font:inherit;font-weight:700;font-size:14px;border:1.5px solid #121212;background:#fff;color:#121212;border-radius:999px;padding:0 16px;min-height:40px;cursor:pointer;text-transform:none;letter-spacing:normal}

/* 3D stage */
.cx-ht__stage{position:relative;width:100%;aspect-ratio:8/5;border-radius:16px;overflow:hidden;background:#c7bfb3;border:1px solid var(--cx-line);perspective:1100px;touch-action:pan-y}
.cx-ht__scene{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.03);transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
.cx-sv{display:block;width:100%;height:100%}
.cx-L-bg{transform:translate(calc(var(--px,0) * -9px),calc(var(--py,0) * -5px));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cx-ht__sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,40%) var(--gy,25%),rgba(255,255,255,.2),rgba(255,255,255,0) 48%);mix-blend-mode:soft-light}
.cx-ht__spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(255,255,255,0) 0,rgba(255,255,255,0) 52px,rgba(14,14,14,.45) 150px);z-index:1}
.cx-ht__stage.has-focus .cx-ht__spot{opacity:1}

/* scene parts fade in and out */
[data-show]{opacity:0;transition:opacity .5s ease}
[data-show].is-on{opacity:1}
.cx-lever{transform-box:fill-box;transform-origin:center;transition:transform .8s cubic-bezier(.34,1.45,.5,1)}
.cx-ht__stage[data-s='3'] .cx-lever,.cx-ht__stage[data-s='4'] .cx-lever{transform:rotate(90deg)}
.cx-bottle{transform-box:fill-box;transform-origin:center;transition:transform 1s cubic-bezier(.32,.72,0,1),opacity .5s ease}
.cx-ht__stage[data-s='1'] .cx-bottle{transform:translate(-109px,-80px) rotate(-100deg)}

.cx-ht__pins{position:absolute;inset:0}
.cx-ht .cx-ht__pin{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;min-height:0;border-radius:999px;border:2px solid #fff;background:radial-gradient(circle at 35% 30%,#f8ad63,#df853c 55%,#c0691f);color:#121212;font-weight:800;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.5);padding:0;z-index:2;transition:transform .2s cubic-bezier(.32,.72,0,1)}
.cx-ht .cx-ht__pin:hover{transform:translate(-50%,-50%) scale(1.12)}
.cx-ht .cx-ht__pin::after{content:'';position:absolute;inset:-8px;border-radius:999px;border:2px solid var(--cx-orange);animation:cxpulse 1.8s ease-out infinite;pointer-events:none}
.cx-ht .cx-ht__pin[aria-expanded='true']{background:#121212;color:var(--cx-orange)}
.cx-ht .cx-ht__pin[aria-expanded='true']::after{animation:none;opacity:0}
.cx-ht__tipbox{position:absolute;transform:translate(-50%,calc(-100% - 30px));width:min(250px,70%);background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 14px 36px rgba(0,0,0,.28);z-index:3;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45;color:#3d3d3d}
.cx-ht__tipbox.is-below{transform:translate(-50%,30px)}
.cx-ht__tipbox b{font-size:15px;color:#121212}

.cx-flow{stroke:#d3efff;stroke-dasharray:7 11}
.cx-ht__stage[data-s='3'] .cx-flow{animation:cxflow .9s linear infinite}
.cx-ht__stage[data-s='4'] .cx-flow{stroke:#bfe6ff;animation:cxflow 1.3s linear infinite}
.cx-ht__stage[data-s='3'] .cx-scale{animation:cxdissolve 2.4s ease-in-out infinite alternate}
.cx-ht__stage[data-s='3'] .cx-bub{animation:cxrise 2s ease-in infinite}
.cx-bub{opacity:0}
.cx-pour{stroke-dasharray:5 6;animation:cxflow .5s linear infinite}
.cx-rip{transform-box:fill-box;transform-origin:center;opacity:0;animation:cxrip 2.2s ease-out infinite}
.cx-ht__progress{display:grid;gap:6px}
.cx-ht__progress span{height:5px;border-radius:999px;background:var(--cx-line);transition:background .3s}
.cx-ht__progress span{position:relative;overflow:hidden}
.cx-ht__progress span.is-done{background:var(--cx-orange)}
.cx-ht__progress span.is-run::after{content:'';position:absolute;inset:0;background:var(--cx-orange);transform-origin:left center;animation:cxfill var(--dur,10s) linear forwards}
.cx-ht.is-paused .cx-ht__progress span.is-run::after{animation-play-state:paused}
.cx-ht__caption{margin:0 2px;font-size:15px;line-height:1.5;color:#3d3d3d;min-height:1.5em}
.cx-ht__nav{display:flex;gap:12px}
.cx-ht__nav .cx-btn{flex:1 1 0;min-height:48px;font-size:15px}
.cx-ht__nav [disabled]{opacity:.4;cursor:default}
@keyframes cxfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cxpulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes cxflow{to{stroke-dashoffset:-36}}
@keyframes cxdissolve{from{opacity:.95}to{opacity:.15}}
@keyframes cxrise{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-34px);opacity:0}}
@keyframes cxrip{0%{transform:scale(.4);opacity:.8}100%{transform:scale(2.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.cx-ht *{animation:none!important;transition:none!important}.cx-ht__progress span.is-run{background:var(--cx-orange)}.cx-ht__scene{transform:none}}
@media(max-width:749px){.cx-ht__nav .cx-btn{padding:0 10px;font-size:14px}.cx-ht__grid{gap:24px}.cx-ht .cx-ht__pin{width:32px;height:32px;font-size:18px}.cx-ht__count{font-size:11px}.cx-ht__scene{transform:none}}