.hv-wrap{--brand:#f5822b;--brand-dark:#e06a16;--brand-soft:#fdeede;--brand-ring:#f6d3ab;--leaf:#7cbe3a;--leaf-dark:#5b8f28;--leaf-soft:#eef6df;--hvink:#241f1b;--ink2:#4a423a;--hvmuted:#8b8072;--surface:#fff;--hvline:#e7dcc9;--hvline-strong:#d8cdb8;--panel:rgba(255,255,255,.92);--ease:cubic-bezier(.2,.8,.2,1);--hex-size:clamp(62px,6.6vw,90px)}.hv-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:clamp(34px,6vw,78px);align-items:start}.hv-copy{padding:0 0 40vh}.hv-step{min-height:100svh;display:grid;align-content:center;padding:80px 0}.hv-label{display:inline-flex;align-items:center;gap:10px;color:var(--brand-dark);font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.hv-label:before{content:attr(data-step);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--brand);letter-spacing:0;font-weight:700}.hv-step h3{font-family:var(--font-display);font-weight:700;max-width:15ch;margin:18px 0 0;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.02;letter-spacing:-.02em}.hv-step p{max-width:44ch;margin:18px 0 0;color:var(--hvmuted);font-size:1.02rem;line-height:1.7}.hv-list{display:grid;gap:10px;margin-top:22px}.hv-row{display:flex;align-items:flex-start;gap:10px;color:var(--ink2);font-weight:500;line-height:1.45;font-size:.96rem}.hv-row i{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--leaf);font-size:.72rem;font-weight:700;font-style:normal}.hv-stagecol{min-height:100svh;position:sticky;top:0;display:grid;align-items:center;padding:96px 0 64px}.hv-stage{width:min(100%,700px);aspect-ratio:1/.92;margin-left:auto;position:relative;border:1px solid var(--hvline);border-radius:16px;background:var(--surface);box-shadow:0 30px 70px -20px #241f1b2e;overflow:hidden}.hv-stage:before{content:"";position:absolute;inset:20px;border:1px solid var(--hvline);border-radius:10px}.hv-head{position:absolute;left:34px;right:34px;top:30px;height:42px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--hvline);color:var(--hvmuted);font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.hv-state{color:var(--brand-dark)}.hv-board{position:absolute;inset:98px 42px 72px}.hv-guides{position:absolute;inset:0;pointer-events:none}.hv-guide{position:absolute;left:var(--x1);top:var(--y1);width:var(--w);height:1px;background:var(--hvline);transform:rotate(var(--r));transform-origin:left center;opacity:0;transition:opacity .55s ease}.hv-stage[data-scene] .hv-guide{opacity:1}.hv-mod{--tx:50%;--ty:50%;--s:1;--r:0deg;width:var(--hex-size);height:calc(var(--hex-size)*.88);position:absolute;left:var(--tx);top:var(--ty);display:grid;place-items:center;padding:10px;text-align:center;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);border:1px solid rgba(245,130,43,.3);background:var(--brand-soft);color:var(--brand-dark);transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s));transition:left .76s var(--ease),top .76s var(--ease),width .76s var(--ease),height .76s var(--ease),transform .76s var(--ease),background .35s ease,border-color .35s ease,color .35s ease,opacity .35s ease;z-index:3}.hv-mod.green{border-color:#7cbe3a5c;background:var(--leaf-soft);color:var(--leaf-dark)}.hv-mod.neutral{border-color:var(--hvline-strong);background:#fff;color:var(--hvink)}.hv-mod strong{display:block;font-family:var(--font-display);font-size:clamp(.66rem,1vw,.82rem);line-height:1.1}.hv-mod em{display:block;margin-top:3px;color:var(--hvmuted);font-family:var(--font-mono);font-size:clamp(.5rem,.78vw,.6rem);font-weight:600;font-style:normal;letter-spacing:.05em;text-transform:uppercase}.hv-berry{width:clamp(60px,6.6vw,84px);height:clamp(60px,6.6vw,84px);position:absolute;left:var(--tx);top:var(--ty);border-radius:47% 53% 50% 50%;background:var(--brand);transform:translate(-50%,-50%) scale(var(--s,1));transition:left .76s var(--ease),top .76s var(--ease),width .76s var(--ease),height .76s var(--ease),border-radius .76s var(--ease),transform .76s var(--ease),background .35s ease,opacity .35s ease;z-index:5}.hv-leaf{width:clamp(50px,5.6vw,76px);height:clamp(28px,3.2vw,40px);position:absolute;left:var(--tx);top:var(--ty);border-radius:100% 0;background:var(--leaf);transform:translate(-50%,-50%) rotate(var(--r,-24deg)) scale(var(--s,1));transform-origin:18% 82%;transition:left .76s var(--ease),top .76s var(--ease),width .76s var(--ease),height .76s var(--ease),border-radius .76s var(--ease),transform .76s var(--ease),background .35s ease,opacity .35s ease;z-index:6}.hv-bell{position:absolute;left:50%;top:50%;width:42%;height:46%;border:2px solid rgba(245,130,43,.36);border-top:0;border-radius:0 0 42% 42%;opacity:0;transform:translate(-50%,-45%);transition:opacity .5s ease;pointer-events:none}.hv-bell:before{content:"";position:absolute;left:50%;top:-18px;width:26%;height:28px;border:2px solid rgba(245,130,43,.36);border-bottom:0;border-radius:999px 999px 0 0;transform:translate(-50%)}.hv-detail,.hv-index,.hv-closure{position:absolute;border:1px solid var(--hvline);border-radius:12px;background:var(--panel);backdrop-filter:blur(4px);opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s var(--ease);z-index:4}.hv-index{left:7%;right:7%;bottom:7%;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden}.hv-index div{min-height:46px;display:grid;place-items:center;background:#fff;color:var(--hvmuted);font-family:var(--font-mono);font-size:.68rem;font-weight:600}.hv-detail{right:7%;top:18%;width:38%;padding:16px}.hv-detail strong{display:block;font-family:var(--font-display);font-size:1rem}.hv-detail span{display:block;margin-top:7px;color:var(--hvmuted);font-size:.78rem;line-height:1.42}.hv-bars{display:grid;gap:8px;margin-top:14px}.hv-bars i{display:block;height:8px;border-radius:999px;background:var(--brand-soft)}.hv-bars i:nth-child(2){width:76%;background:var(--leaf-soft)}.hv-bars i:nth-child(3){width:58%}.hv-closure{left:50%;bottom:8%;width:min(82%,420px);padding:15px 16px;transform:translate(-50%,10px)}.hv-closure strong{display:block;font-family:var(--font-display);font-size:.96rem}.hv-closure span{display:block;margin-top:6px;color:var(--hvmuted);font-size:.76rem;line-height:1.4}.hv-rail{position:absolute;left:34px;right:34px;bottom:28px;display:flex;align-items:center;gap:8px}.hv-cell{flex:1;height:7px;border-radius:999px;background:var(--hvline);transition:background .35s ease}.hv-stage[data-scene="2"] .hv-cell:nth-child(-n+2),.hv-stage[data-scene="3"] .hv-cell:nth-child(-n+3),.hv-stage[data-scene="4"] .hv-cell:nth-child(-n+4),.hv-stage[data-scene="5"] .hv-cell:nth-child(-n+5){background:var(--brand)}.hv-stage[data-scene] .hv-berry{width:var(--hex-size);height:calc(var(--hex-size)*.88);border-radius:0;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}.hv-stage[data-scene] .hv-leaf{width:var(--hex-size);height:calc(var(--hex-size)*.88);border-radius:0;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transform:translate(-50%,-50%) rotate(0) scale(var(--s,1))}.hv-stage[data-scene="2"] .hv-berry.a{--tx:29%;--ty:35%}.hv-stage[data-scene="2"] .hv-berry.b{--tx:50%;--ty:35%}.hv-stage[data-scene="2"] .hv-berry.c{--tx:71%;--ty:35%}.hv-stage[data-scene="2"] .hv-leaf{--tx:50%;--ty:56%}.hv-stage[data-scene="2"] .hv-mod{opacity:1}.hv-stage[data-scene="2"] .hv-mod.m1{--tx:29%;--ty:56%}.hv-stage[data-scene="2"] .hv-mod.m2{--tx:71%;--ty:56%}.hv-stage[data-scene="2"] .hv-mod.m3{--tx:39.5%;--ty:74%}.hv-stage[data-scene="2"] .hv-mod.m4{--tx:60.5%;--ty:74%}.hv-stage[data-scene="2"] .hv-mod.m5,.hv-stage[data-scene="2"] .hv-mod.m6,.hv-stage[data-scene="2"] .hv-mod.m7,.hv-stage[data-scene="2"] .hv-mod.m8{opacity:0;--s:.36}.hv-stage[data-scene="2"] .hv-index{opacity:1;transform:translateY(0)}.hv-stage[data-scene="3"] .hv-berry.a,.hv-stage[data-scene="4"] .hv-berry.a{--tx:39.5%;--ty:33%}.hv-stage[data-scene="3"] .hv-berry.b,.hv-stage[data-scene="4"] .hv-berry.b{--tx:60.5%;--ty:33%}.hv-stage[data-scene="3"] .hv-berry.c,.hv-stage[data-scene="4"] .hv-berry.c{--tx:50%;--ty:50%}.hv-stage[data-scene="3"] .hv-leaf,.hv-stage[data-scene="4"] .hv-leaf{--tx:29%;--ty:50%;--s:1}.hv-stage[data-scene="3"] .hv-mod,.hv-stage[data-scene="4"] .hv-mod{opacity:1}.hv-stage[data-scene="3"] .hv-mod.m1,.hv-stage[data-scene="4"] .hv-mod.m1{--tx:71%;--ty:50%}.hv-stage[data-scene="3"] .hv-mod.m2,.hv-stage[data-scene="4"] .hv-mod.m2{--tx:39.5%;--ty:67%}.hv-stage[data-scene="3"] .hv-mod.m3,.hv-stage[data-scene="4"] .hv-mod.m3{--tx:60.5%;--ty:67%}.hv-stage[data-scene="3"] .hv-mod.m4,.hv-stage[data-scene="4"] .hv-mod.m4{--tx:50%;--ty:18%;--s:.86}.hv-stage[data-scene="3"] .hv-mod.m5,.hv-stage[data-scene="4"] .hv-mod.m5{--tx:18%;--ty:67%;--s:.86}.hv-stage[data-scene="3"] .hv-mod.m6,.hv-stage[data-scene="4"] .hv-mod.m6{--tx:82%;--ty:67%;--s:.86}.hv-stage[data-scene="3"] .hv-mod.m7,.hv-stage[data-scene="4"] .hv-mod.m7{--tx:18%;--ty:33%;--s:.86}.hv-stage[data-scene="3"] .hv-mod.m8,.hv-stage[data-scene="4"] .hv-mod.m8{--tx:82%;--ty:33%;--s:.86}.hv-stage[data-scene="4"] .hv-berry.a,.hv-stage[data-scene="4"] .hv-berry.b,.hv-stage[data-scene="4"] .hv-leaf,.hv-stage[data-scene="4"] .hv-mod.m5,.hv-stage[data-scene="4"] .hv-mod.m6,.hv-stage[data-scene="4"] .hv-mod.m7,.hv-stage[data-scene="4"] .hv-mod.m8{opacity:.28}.hv-stage[data-scene="4"] .hv-berry.c{--tx:35%;--ty:50%;--s:1.08}.hv-stage[data-scene="4"] .hv-mod.m1{--tx:35%;--ty:31%}.hv-stage[data-scene="4"] .hv-mod.m2{--tx:35%;--ty:69%}.hv-stage[data-scene="4"] .hv-mod.m3{--tx:18%;--ty:50%}.hv-stage[data-scene="4"] .hv-mod.m4{--tx:52%;--ty:50%;--s:.92}.hv-stage[data-scene="4"] .hv-detail{opacity:1;transform:translateY(0)}.hv-stage[data-scene="5"] .hv-berry.a{--tx:36%;--ty:29%;--s:.86}.hv-stage[data-scene="5"] .hv-berry.b{--tx:64%;--ty:29%;--s:.86}.hv-stage[data-scene="5"] .hv-berry.c{--tx:50%;--ty:46%;--s:.98}.hv-stage[data-scene="5"] .hv-leaf{--tx:50%;--ty:13%;--s:.78}.hv-stage[data-scene="5"] .hv-mod{opacity:1;--s:.72}.hv-stage[data-scene="5"] .hv-mod.m1{--tx:23%;--ty:46%}.hv-stage[data-scene="5"] .hv-mod.m2{--tx:77%;--ty:46%}.hv-stage[data-scene="5"] .hv-mod.m3{--tx:31%;--ty:65%}.hv-stage[data-scene="5"] .hv-mod.m4{--tx:69%;--ty:65%}.hv-stage[data-scene="5"] .hv-mod.m5{--tx:50%;--ty:80%}.hv-stage[data-scene="5"] .hv-mod.m6,.hv-stage[data-scene="5"] .hv-mod.m7,.hv-stage[data-scene="5"] .hv-mod.m8{opacity:0;--s:.3;--tx:50%;--ty:55%}.hv-stage[data-scene="5"] .hv-bell{opacity:1}.hv-stage[data-scene="5"] .hv-closure{opacity:1;transform:translate(-50%)}.hv-hint-tap{display:none}.hv-tabs{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.hv-tab{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:58px;padding:9px 4px 8px;border:1px solid var(--hvline);border-radius:12px;background:var(--surface);color:var(--hvmuted);font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}.hv-tab b{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--hvline);color:var(--ink2);font-weight:700;letter-spacing:0}.hv-tab[aria-pressed=true]{border-color:var(--brand-ring);background:var(--brand-soft);color:var(--brand-dark)}.hv-tab[aria-pressed=true] b{background:var(--brand);color:#fff}.hv-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}@media(max-width:980px){.hv-wrap{--hex-size:clamp(62px,11vw,90px);padding-bottom:clamp(56px,10vw,80px)}.hv-grid{grid-template-columns:1fr;gap:20px}.hv-stagecol{position:relative;min-height:auto;padding:0;order:-1}.hv-stage{margin:0 auto}.hv-copy{width:100%;max-width:700px;margin:0 auto;padding:0}.hv-step{min-height:auto;padding:36px 0 0}.hv-js .hv-tabs{display:grid}.hv-js .hv-step{padding-top:28px}.hv-js .hv-step:not(.is-active){display:none}.hv-js .hv-hint-scroll{display:none}.hv-js .hv-hint-tap{display:inline}}@media(max-width:640px){.hv-wrap{--hex-size:clamp(40px, calc((100vw - 100px)*.17) ,60px)}.hv-stage{aspect-ratio:auto;height:calc((100vw - 100px)*.75 + 158px)}.hv-board{inset:92px 26px 66px}.hv-head{left:24px;right:24px;top:24px}.hv-mod{padding:2px}.hv-mod strong{font-size:.6rem}.hv-mod em,.hv-detail span,.hv-closure span{display:none}.hv-index div{min-height:24px}.hv-detail{width:40%;padding:12px}.hv-closure{bottom:4%;width:90%;padding:12px 14px}.hv-closure strong{font-size:.86rem}}
