.dh-how{display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center}
.dh-steps-wrap{position:relative;padding-left:8px}
.dh-steps-line{position:absolute;left:25px;top:14px;bottom:14px;width:3px;background:linear-gradient(180deg,var(--dh-pink),var(--dh-purple));border-radius:3px}
.dh-steps{display:grid;gap:24px}
.dh-step{display:flex;align-items:flex-start;gap:18px;position:relative}
.dh-step-n{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid rgba(255,92,114,.3);display:flex;align-items:center;justify-content:center;font-family:var(--dh-font-head);font-weight:700;font-size:16px;color:var(--dh-pink-2);box-shadow:0 6px 16px rgba(190,120,120,.12);z-index:1}
.dh-step-title{font-family:var(--dh-font-head);font-weight:700;font-size:18px;margin-bottom:4px}
.dh-step-desc{font-size:14.5px;line-height:1.5;color:var(--dh-muted)}
.dh-how-media{position:relative;border-radius:var(--dh-radius);overflow:hidden;background:linear-gradient(150deg,#E7E0FF,#FCE6DE);aspect-ratio:4/4.6;box-shadow:0 24px 56px rgba(190,120,120,.16);border:1px solid rgba(255,255,255,.7)}
.dh-stats-card{background:#fff;border-radius:var(--dh-radius);padding:14px 8px;box-shadow:0 18px 44px rgba(190,120,120,.1);border:1px solid rgba(255,255,255,.8)}
.dh-stats{display:grid;grid-template-columns:repeat(4,1fr)}
.dh-stat{position:relative;text-align:center;padding:26px 18px}
.dh-stat:not(:first-child):before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:1px;background:rgba(190,120,120,.18)}
.dh-stat-num{font-family:var(--dh-font-head);font-weight:700;font-size:clamp(30px,3.6vw,42px);letter-spacing:-.02em;background:linear-gradient(135deg,var(--dh-pink-2),var(--dh-purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.dh-stat-label{font-size:13.5px;color:var(--dh-muted);margin-top:6px;font-weight:500}
.dh-ba-sec{max-width:920px;margin:0 auto;padding:44px 40px;position:relative;z-index:2}
.dh-ba{position:relative;aspect-ratio:16/10;border-radius:var(--dh-radius);overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize;box-shadow:0 24px 56px rgba(190,120,120,.18);border:1px solid rgba(255,255,255,.7)}
.dh-ba-after{position:absolute;inset:0;background:linear-gradient(150deg,#EADFEE,#D9CCF2)}
.dh-ba-after .hatch{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.14) 2px,transparent 2px,transparent 13px)}
.dh-ba-tag{position:absolute;bottom:16px;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);font-size:12px;font-weight:700;letter-spacing:.08em;padding:7px 14px;border-radius:99px}
.dh-ba-tag.after{right:18px;color:var(--dh-green)}
.dh-ba-tag.before{left:18px;color:var(--dh-muted)}
.dh-ba-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0);background:linear-gradient(150deg,#F3D9CF,#E9C4C8)}
.dh-ba-before .hatch{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(120,80,80,.12) 0,rgba(120,80,80,.12) 2px,transparent 2px,transparent 9px)}
.dh-ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 14px rgba(0,0,0,.18)}
.dh-ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.2);font-size:15px;color:var(--dh-pink-2);font-weight:700}
.dh-ba-note{text-align:center;font-size:12px;color:var(--dh-faint);margin-top:12px}