.app{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hv{display:flex;flex-direction:column;gap:12px;width:100%}
.hv-screen{position:relative;width:100%;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,rgba(212,255,58,.08),rgba(212,255,58,0) 55%),linear-gradient(160deg,#121217,#0A0A0D);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.85)}
.hv-stage{position:absolute;left:0;top:0;width:640px;height:400px;transform-origin:0 0;transform:scale(var(--s,1))}
.hv-scene{position:absolute;inset:0;display:none;align-items:center;gap:28px;padding:0 36px}
.hv-scene.on{display:flex;animation:hvIn .45s ease both}
@keyframes hvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hv-side{width:220px;flex:none;display:flex;flex-direction:column;gap:10px}
.hv-n{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.12em}
.hv-side h4{margin:0;font-size:28px;line-height:1.05;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.hv-side p{font-size:14px;color:var(--muted);line-height:1.45}
.hv-app{position:relative;flex:1;height:320px;border-radius:20px;background:#0E0E12;border:1px solid var(--line-2);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 24px 50px -20px rgba(0,0,0,.8)}
.hv-bar{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.hv-lbl{font-size:11.5px;color:var(--muted)}
.hv-input,.hv-select{height:42px;border-radius:10px;border:1px solid var(--line-2);background:#141418;display:flex;align-items:center;gap:8px;padding:0 12px;font-family:var(--mono);font-size:13px}
.hv-type{display:inline-block;overflow:hidden;white-space:nowrap;width:13ch}
.on .hv-type{animation:hvType 1.3s steps(13) .3s both}
@keyframes hvType{from{width:0}to{width:13ch}}
.hv-caret{width:1.5px;height:16px;background:var(--accent);margin-left:-6px}
.on .hv-caret{animation:hvBlink .8s steps(1) infinite}
@keyframes hvBlink{50%{opacity:0}}
.hv-btn{height:42px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:4px}
.on .hv-press1{animation:hvPress .3s ease 2.25s both}
.on .hv-press5{animation:hvPress .3s ease 1.9s both}
@keyframes hvPress{50%{transform:scale(.95);filter:brightness(.85)}}
.hv-ok{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ok);padding:10px 12px;border-radius:10px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2)}
.on .hv-show1{animation:hvPop .4s ease 2.6s both}
.on .hv-show3{animation:hvPop .4s ease 2.5s both}
.on .hv-show4{animation:hvPop .4s ease 1.6s both}
@keyframes hvPop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.hv-cursor{position:absolute;left:0;top:0;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.on .hv-cur1{animation:hvCur1 3.2s ease .2s both}
@keyframes hvCur1{0%{opacity:0;transform:translate(260px,250px)}15%{opacity:1;transform:translate(240px,120px)}55%{opacity:1;transform:translate(170px,150px)}68%{transform:translate(160px,160px)}100%{opacity:0;transform:translate(160px,160px)}}
.hv-chips{display:flex;gap:6px;flex-wrap:wrap}
.hv-chips span{height:32px;padding:0 11px;border-radius:9px;border:1px solid var(--line-2);display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;background:#141418}
.hv-chips .hv-pick{border-color:var(--accent);background:rgba(212,255,58,.1)}
.on .hv-pick{animation:hvPick .3s ease .8s both}
@keyframes hvPick{from{border-color:var(--line-2);background:#141418}to{border-color:var(--accent);background:rgba(212,255,58,.1)}}
.on .hv-net{animation:hvPop .35s ease 1.5s both}
.hv-dep{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;border:1px solid var(--line-2);background:#141418}
.on .hv-show2{animation:hvPop .4s ease 2s both}
.hv-qr{width:84px;height:84px;border-radius:6px;background:#fff;flex:none}
.hv-addr{display:flex;flex-direction:column;gap:3px}
.hv-addr small{font-size:10.5px;color:var(--muted)}
.hv-addr b{font-family:var(--mono);font-size:13px;font-weight:500}
.hv-copy{align-self:flex-start;margin-top:4px;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.on .hv-copy{animation:hvPress .3s ease 3.1s both}
.on .hv-cur2{animation:hvCur2 3.6s ease .1s both}
@keyframes hvCur2{0%{opacity:0;transform:translate(300px,250px)}12%{opacity:1}20%{transform:translate(200px,70px)}35%{transform:translate(120px,130px)}50%{transform:translate(160px,140px)}80%{opacity:1;transform:translate(150px,268px)}100%{opacity:0;transform:translate(150px,268px)}}
.hv-bal small{display:block;font-size:12px;color:var(--muted)}
.hv-bal b{font-size:40px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hv-prog{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.hv-prog i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left}
.on .hv-prog i{animation:hvFill 2.2s ease .2s both}
@keyframes hvFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hv-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.hv-row b{color:var(--text);font-family:var(--mono);font-weight:500}
.hv-conf{color:var(--ok)}
.on .hv-conf{animation:hvPop .3s ease 2.3s both}
.hv-item{padding:12px;border-radius:10px;background:#141418;border:1px solid var(--line);color:var(--text)}
.hv-paywith{font-family:var(--body);font-weight:600}
.on .hv-paywith{animation:hvPop .4s ease .6s both}
.on .hv-cur5{animation:hvCur5 2.6s ease .2s both}
@keyframes hvCur5{0%{opacity:0;transform:translate(280px,120px)}20%{opacity:1}65%{transform:translate(170px,232px)}85%{opacity:1;transform:translate(170px,232px)}100%{opacity:0;transform:translate(170px,232px)}}
.hv-approved{position:absolute;inset:0;border-radius:20px;background:rgba(14,14,18,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.hv-approved b{font-size:20px}
.hv-approved small{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
.hv-big{width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.on .hv-approved{animation:hvPop .45s ease 2.3s both}
.on .hv-big{animation:hvBounce .5s cubic-bezier(.34,1.56,.64,1) 2.4s both}
@keyframes hvBounce{from{transform:scale(0)}to{transform:scale(1)}}
.hv-app-card{align-items:center;justify-content:center;gap:18px;perspective:900px}
.hv-card{position:relative;width:300px;aspect-ratio:1.586;border-radius:16px;overflow:hidden;background:radial-gradient(120% 80% at 30% 15%,rgba(255,255,255,.12),rgba(255,255,255,0) 45%),repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(150deg,#2C2C34,#15151A 40%,#0B0B0E 70%,#1E1E25);box-shadow:0 30px 50px -16px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.2)}
.on .hv-card{animation:hvFlip .9s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes hvFlip{from{opacity:0;transform:rotateY(80deg) translateY(20px)}to{opacity:1;transform:none}}
.hv-card .crescent{position:absolute;right:-12%;bottom:-38%;width:78%}
.hv-card .r1{position:absolute;left:18px;top:16px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.24em}
.hv-chip{position:absolute;left:18px;top:62px;width:38px;height:29px}
.hv-card .r2{position:absolute;left:18px;top:112px;display:flex;gap:.8em;font-family:var(--mono);font-size:15px;color:#E6E6EA;text-shadow:0 1px 0 rgba(0,0,0,.85)}
.hv-card .r3{position:absolute;right:18px;bottom:14px;font-size:9px;font-weight:700;letter-spacing:.24em;color:#C9C9D0}
.hv-bigplay{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.hv.paused.fresh .hv-bigplay{display:flex}
.hv.paused .hv-stage *{animation-play-state:paused!important}
.hv-controls{display:flex;align-items:center;gap:12px}
.hv-pp{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.hv-pp .i-play{display:none}.hv.paused .hv-pp .i-play{display:block}.hv.paused .hv-pp .i-pause{display:none}
.hv-chapters{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.hv-chapters button{height:24px;border:0;background:transparent;padding:9px 0;cursor:pointer}
.hv-chapters i{display:block;height:6px;border-radius:6px;background:var(--line-2);overflow:hidden;position:relative}
.hv-chapters i::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}
.hv-time{font-size:12.5px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.hv-cap{font-size:14px;color:var(--muted)}
@media (max-width:960px){.app{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hv-stage *{animation:none!important}}