.hs{background:var(--hv-bg);color:var(--hv-ink);padding:clamp(96px,10vw,176px) clamp(12px,2.9vw,52px) clamp(96px,9vw,160px)}
.hs-head{max-width:980px;margin:0 auto;text-align:center;padding:0 12px}
.hs-title{font:400 clamp(40px,4.9vw,76px)/1.04 var(--serif);letter-spacing:-.022em;margin:0;color:var(--hv-ink);text-wrap:balance}
.hs-sub{font:400 clamp(17px,1.25vw,20px)/1.45 var(--sans);color:var(--hv-text);margin:22px auto 0;max-width:600px;text-wrap:pretty}

.hs-row{--u:1;--rw:1400px;max-width:1560px;margin:clamp(48px,5vw,80px) auto 0;display:flex;gap:12px;height:clamp(440px,38vw,620px)}
.hs-card{position:relative;flex:1 1 0;min-width:0;border-radius:8px;overflow:hidden;clip-path:inset(0 round 8px);isolation:isolate;background:#17120d;color:#fff;outline:none;
 display:flex;flex-direction:column;transition:flex-grow .55s cubic-bezier(.7,0,.3,1)}
.hs-card:focus-visible{box-shadow:0 0 0 2px var(--hv-bg),0 0 0 4px var(--hv-ink)}
.hs-row.has-on .hs-card.is-on{flex-grow:1.38}


.hs-bg{position:absolute;left:0;top:0;height:100%;width:calc(var(--rw) * .62);max-width:none;object-fit:cover;object-position:30% 45%;z-index:-2;
 transform:scale(1.02);transform-origin:20% 50%;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.hs-card.is-on .hs-bg{transform:scale(1.07)}
.hs-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(120% 85% at 0% 0%,rgba(8,6,4,.42) 0%,rgba(8,6,4,.18) 45%,rgba(8,6,4,0) 75%),linear-gradient(180deg,rgba(12,9,6,.6) 0%,rgba(12,9,6,.3) 40%,rgba(12,9,6,.18) 100%)}
.hs-card::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:rgba(250,250,249,.5);opacity:0;transition:opacity .55s cubic-bezier(.7,0,.3,1)}
.hs-row.has-on .hs-card:not(.is-on)::after{opacity:1}

.hs-copy{position:relative;z-index:2;flex:none;padding:clamp(24px,2.5vw,40px) clamp(24px,2.5vw,40px) clamp(20px,1.8vw,30px);max-width:560px}
.hs-copy h3{font:400 clamp(28px,2.7vw,44px)/1.05 var(--serif);letter-spacing:-.02em;margin:0;color:#fff;white-space:nowrap}
.hs-copy p{font:400 clamp(14.5px,1.05vw,17px)/1.45 var(--sans);color:rgba(255,255,255,.86);margin:clamp(10px,.9vw,14px) 0 clamp(16px,1.4vw,22px);max-width:470px;text-wrap:pretty}
.hs-btn{display:inline-flex;align-items:center;height:38px;padding:0 15px;border:1px solid rgba(255,255,255,.85);border-radius:4px;color:#fff;font:500 14.5px/1 var(--sans);transition:background .2s,color .2s}
.hs-btn:hover{background:#fff;color:var(--hv-ink)}


.hs-shot{position:relative;flex:1 1 auto;min-height:0;z-index:1}
.hs-win{position:absolute;left:calc(var(--u) * 56px);top:0;width:1000px;height:560px;transform:scale(var(--u));transform-origin:0 0;border-radius:12px 12px 0 0;overflow:hidden;
 background:#f6f5f2;display:grid;grid-template-columns:54px 1fr;font:400 13px/1.35 var(--sans);color:var(--hv-text);
 box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 2px 4px rgba(10,6,2,.2),0 40px 90px -10px rgba(10,6,2,.55)}
.hs-win svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hs-rail{background:#121110;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0}
.hs-rail b{width:26px;height:26px;border-radius:6px;background:#f4f2ee;color:#121110;display:grid;place-items:center;font:400 16px/1 var(--serif);margin-bottom:10px}
.hs-rail i{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;color:#8e8a82}
.hs-rail i.on{background:#2a2825;color:#f4f2ee}
.hs-main{position:relative;min-width:0;padding:22px 26px;display:flex;flex-direction:column;gap:14px}
.hs-top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:700px}
.hs-top h4{font:400 25px/1 var(--serif);letter-spacing:-.016em;color:var(--hv-ink);margin:0;white-space:nowrap}
.hs-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:6px;background:#fff;border:1px solid var(--hv-line);font-size:12.5px;color:var(--hv-ink);white-space:nowrap;transition:border-color .3s,background .3s}
.hs-chip small{color:#8a867e;font-size:12.5px}
.hs-chip svg{width:12px;height:12px;color:#8a867e}
.hs-chip .val{display:inline-block;transition:opacity .17s,transform .25s}
.hs-chip.swap .val{opacity:0;transform:translateY(-5px)}
.hs-chip.live{border-color:#d6d2ca;background:#fbfaf8}
.hs-panel{background:#fff;border:1px solid var(--hv-line);border-radius:10px;padding:20px 24px 18px;max-width:700px}
.hs-ph{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hs-ph small{display:block;color:#8a867e;font-size:12px;margin-top:5px}
.hs-big{font:400 44px/1 var(--serif);letter-spacing:-.025em;color:var(--hv-ink);display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.hs-big em{font:500 12px/1 var(--sans);font-style:normal;letter-spacing:0}
.hs-big em.up{color:#3f6e52}


.hs-bars{margin-top:20px;display:flex;flex-direction:column;gap:2px}
.hs-br{display:grid;grid-template-columns:128px 1fr 48px;align-items:center;gap:14px;height:30px;font-size:12.5px;color:#5d5952;border-radius:5px;transition:color .3s}
.hs-br i{height:10px;border-radius:2px;background:#f0eee9;position:relative;overflow:hidden}
.hs-br i b{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:repeating-linear-gradient(90deg,#3a3733 0 2px,#4d4a45 2px 3px);transition:width 1.1s cubic-bezier(.2,.8,.2,1),opacity .35s}
.hs-row.is-seen .hs-br i b{width:var(--w)}
.hs-br:nth-child(2) i b{transition-delay:.06s}.hs-br:nth-child(3) i b{transition-delay:.12s}.hs-br:nth-child(4) i b{transition-delay:.18s}.hs-br:nth-child(5) i b{transition-delay:.24s}
.hs-br em{font-style:normal;text-align:right;color:var(--hv-ink);font-size:12px}
.hs-br[data-i]{cursor:pointer}
.hs-card.is-pop .hs-br:not(.is-pick) i b{opacity:.32}
.hs-card.is-pop .hs-br.is-pick{color:var(--hv-ink)}

.hs-pop{position:absolute;left:330px;top:58px;width:340px;z-index:4;background:#fff;border-radius:12px;padding:18px 20px 16px;
 box-shadow:0 0 0 1px rgba(15,14,13,.06),0 22px 50px -14px rgba(15,14,13,.34);
 opacity:0;transform:translateY(12px) scale(.97);transform-origin:0 30%;transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.hs-card.is-pop .hs-pop{opacity:1;transform:none;pointer-events:auto}
.hs-pop-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.hs-pop-h b{font:400 20px/1.1 var(--serif);color:var(--hv-ink);letter-spacing:-.01em;white-space:nowrap}
.hs-tag{border:1px solid #f0d9b0;background:#fdf7ec;color:#9a6a1c;border-radius:99px;padding:3px 9px;font-size:11px;white-space:nowrap}
.hs-tag.ok{color:#3f6e52;border-color:#d4e2d8;background:#f3f8f4}
.hs-pop-row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid #f2f0eb;font-size:12.5px;color:#5d5952}
.hs-pop-row strong{font:500 13px/1 var(--sans);color:var(--hv-ink)}
.hs-pop-row strong.r{color:var(--hv-red)}
.hs-age{display:flex;height:4px;border-radius:2px;overflow:hidden;background:#eeebe5;margin:14px 0 6px}
.hs-age i{display:block;height:100%;width:0;transition:width .7s cubic-bezier(.2,.8,.2,1) .12s}
.hs-age-k{display:flex;justify-content:space-between;font-size:10.5px;color:#8a867e}
.hs-pop-btn{display:inline-flex;align-items:center;gap:7px;margin-top:14px;height:30px;padding:0 12px;border-radius:5px;background:var(--hv-ink);color:#f6f4f0;font-size:12.5px}
.hs-pop .fade{transition:opacity .18s}
.hs-pop.swap .fade{opacity:0}


.hs-key{display:flex;gap:14px;font-size:11.5px;color:#5d5952;padding-top:6px;white-space:nowrap}
.hs-key span{display:flex;align-items:center;gap:6px}
.hs-key span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
.hs-key span.ln::before{width:14px;height:2px;border-radius:1px;background:#8a6a3c}
.hs-chart{margin-top:14px}
.hs-chart svg{display:block;width:100%;height:auto;overflow:visible;stroke:none}
.hs-chart .ax{font:10.5px var(--sans);fill:#9a968e}
.hs-chart .gl{stroke:#f0eee9}
.hs-chart .today{stroke:#c6c2ba;stroke-dasharray:3 3}
.hs-chart .bi{fill:#2b2926}.hs-chart .bo{fill:#cfcac2}
.hs-chart .bi.f{fill:#8f8b84}.hs-chart .bo.f{fill:#e4e1db}
.hs-chart .bal{fill:none;stroke:#8a6a3c;stroke-width:1.8;stroke-linecap:round}
.hs-chart .bal-dot{fill:#fff;stroke:#8a6a3c;stroke-width:1.8}


@media (max-width:900px){
 .hs-row{flex-direction:column;height:auto;gap:12px}
 .hs-card{flex:none}
 .hs-row.has-on .hs-card.is-on{flex-grow:0}
 .hs-row.has-on .hs-card:not(.is-on)::after{opacity:0}
 .hs-bg{width:100%}
 .hs-copy h3{white-space:normal}
 .hs-shot{flex:none;height:calc(var(--u) * 380px)}
 .hs-win{left:calc(var(--u) * 24px)}
 .hs-pop{left:150px}
}
@media (prefers-reduced-motion:reduce){
 .hs-card,.hs-bg,.hs-pop,.hs-br i b,.hs-age i{transition:none!important}
}