@import "https://fonts.googleapis.com/css2?family=Bangers&family=Nunito:wght@500;700;800&family=Quicksand:wght@500;600;700&display=swap";
.hbsp-root{--hbsp-font-comic:"Bangers", "Impact", "Arial Black", sans-serif;--hbsp-font-ui:"Nunito", "Segoe UI", sans-serif;--hbsp-font-round:"Quicksand", "Nunito", "Segoe UI", sans-serif;--hbsp-red:#c41626;--hbsp-red-deep:#7a0c16;--hbsp-ink:#0a0a0c;--hbsp-paper:#fff8f0;isolation:isolate;color:var(--hbsp-paper);font-family:var(--hbsp-font-ui);background:#05060c;height:100%;min-height:100%;position:relative;overflow:hidden;container:hbsp/size}.hbsp-root:not([data-embedded=true]){height:100dvh;min-height:100dvh;max-height:100dvh}.hbsp-bg{z-index:0;filter:contrast(1.05)saturate(1.1);background:url(/themes/hb-spiderman/bg.jpg) 50%/cover no-repeat,#0a1020;position:absolute;inset:0;transform:scale(1.04)}.hbsp-bg:after{content:"";pointer-events:none;background:radial-gradient(65% 55% at 68% 52%,#0000 15%,#05060c73 100%),linear-gradient(#05060c33,#0000 30%,#05060c59);position:absolute;inset:0}.hbsp-bars{z-index:4;background:linear-gradient(180deg, #6e0c16, var(--hbsp-red-deep));pointer-events:none;height:clamp(1.1rem,4.5cqh,2.35rem);position:absolute;left:0;right:0;box-shadow:0 0 0 2px #1a0508}.hbsp-bars--top{top:0}.hbsp-bars--bottom{bottom:0}.hbsp-stage{z-index:2;box-sizing:border-box;width:100%;height:100%;min-height:0;padding:max(2.6rem, env(safe-area-inset-top,0px) + 1.8rem) clamp(.65rem, 3.5cqi, 1.1rem) max(2.4rem, env(safe-area-inset-bottom,0px) + 1.6rem);perspective:1000px;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex;position:relative}.hbsp-bubble{z-index:5;width:min(20rem,94%);color:var(--hbsp-ink);filter:drop-shadow(3px 5px #00000073);flex:none;animation:.7s cubic-bezier(.2,.85,.25,1) both hbsp-bubble-in;position:relative;transform:rotate(-2deg)}.hbsp-bubble__art{-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:auto;display:block}.hbsp-bubble__copy{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:flex-start;gap:.55em;display:flex;position:absolute;inset:20% 14% 28% 11%}.hbsp-bubble__title{max-width:100%;font-family:var(--hbsp-font-comic);letter-spacing:.02em;text-align:left;color:var(--hbsp-red);text-shadow:2px 2px #111,-1px 0 #2f4db8;transform-origin:0;flex-wrap:wrap;align-items:baseline;gap:.08em .28em;margin:0;font-size:clamp(1.15rem,5.8cqi,1.7rem);font-weight:400;line-height:1.05;display:flex;transform:skew(-8deg)}.hbsp-bubble__br{flex-basis:100%;width:0;height:0;overflow:hidden}.hbsp-bubble__word{opacity:0;transform-origin:50% 120%;animation:.58s cubic-bezier(.18,1.15,.32,1) both hbsp-word-throw;animation-delay:calc(.28s + var(--i,0) * .16s);will-change:transform, opacity;display:inline-block}.hbsp-bubble__word:nth-child(odd){--throw-x:-55%;--throw-rot:-22deg}.hbsp-bubble__word:nth-child(2n){--throw-x:45%;--throw-rot:18deg}.hbsp-bubble__hint{letter-spacing:.01em;text-align:left;color:#1a1a1a;opacity:0;max-width:100%;margin:0;font-size:clamp(.68rem,3cqi,.88rem);font-weight:600;line-height:1.25;animation:.45s 1.2s both hbsp-hint-in}.hbsp-phone-wrap{z-index:2;width:min(78%,17rem);max-height:58%;transform-style:preserve-3d;flex:0 auto;padding-top:28%;position:relative}.hbsp-exclaim{pointer-events:none;z-index:3;transform-origin:50% 100%;filter:drop-shadow(0 4px 6px #0006);width:42%;height:auto;animation:1.8s ease-in-out infinite hbsp-exclaim-bob;position:absolute;top:0;left:8%;transform:rotate(-8deg)}.hbsp-phone{z-index:2;cursor:pointer;transform-origin:55% 55%;width:100%;height:auto;max-height:100%;transform-style:preserve-3d;filter:drop-shadow(0 16px 22px #0000008c);-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;animation:1.15s cubic-bezier(.45,.05,.35,1) infinite hbsp-phone-zoom;display:block;position:relative}.hbsp-phone:focus-visible{outline:3px solid var(--hbsp-red);outline-offset:6px;border-radius:.5rem}.hbsp-phone:active{animation-play-state:paused;transform:scale(.97)rotateY(-4deg)rotateX(3deg)}.hbsp-phone img{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:auto;max-height:100%;display:block}.hbsp-phone__glow{filter:blur(10px);pointer-events:none;background:radial-gradient(circle,#e11d2e59,#0000 70%);border-radius:40%;animation:1.15s ease-in-out infinite hbsp-glow;position:absolute;inset:18% 22% 28%}.hbsp-root--step2{background:#5c0a10}.hbsp-root--step3{background:url(/themes/hb-spiderman/step3/opt/bg.webp) 50%/cover no-repeat,#0b1a3a}.hbsp-step2{z-index:2;width:100%;height:100%;min-height:0;padding:max(1.5rem, env(safe-area-inset-top,0px) + 1rem) 1rem max(2rem, env(safe-area-inset-bottom,0px) + 1.25rem);background:#5c0a10;flex-direction:column;justify-content:center;align-items:center;gap:clamp(1rem,3.5cqh,2rem);display:flex;position:relative;overflow:hidden}.hbsp-step2__bg{z-index:0;background:url(/themes/hb-spiderman/step2-bg.jpg) 50%/cover no-repeat,#5c0a10;position:absolute;inset:0}.hbsp-step2__bg:after{content:"";pointer-events:none;background:radial-gradient(55% 50% at 50% 42%,#0000 35%,#28040873 100%);position:absolute;inset:0}.hbsp-spider{z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 10px 18px #00000073);background:0 0;border:0;width:min(58%,14rem);max-height:min(52cqh,22rem);padding:0;transition:transform .2s;animation:1.8s ease-in-out infinite hbsp-spider-pulse;display:block;position:relative}.hbsp-spider.hbsp-enter{animation:.65s cubic-bezier(.18,1.12,.32,1) both hbsp-pop-in,1.8s ease-in-out .75s infinite hbsp-spider-pulse}.hbsp-spider:hover{transform:scale(1.04)}.hbsp-spider:active{animation-play-state:paused;transform:scale(.96)}.hbsp-spider:focus-visible{outline-offset:8px;border-radius:50%;outline:3px solid #fff}.hbsp-spider img{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:auto;max-height:min(52cqh,22rem);display:block}.hbsp-step2__hint{z-index:1;max-width:96%;font-family:var(--hbsp-font-round);letter-spacing:.06em;text-align:center;text-transform:uppercase;white-space:nowrap;color:#f3f0f0;text-shadow:0 1px 2px #00000073;margin:0;font-size:clamp(.72rem,3.6cqi,1.15rem);font-weight:700;line-height:1.2;animation:1.1s ease-in-out infinite hbsp-step2-fade;position:relative}.hbsp-step2__hint.hbsp-enter{animation:.65s cubic-bezier(.18,1.12,.32,1) both hbsp-pop-in,1.1s ease-in-out .9s infinite hbsp-step2-fade}.hbsp-step3{--hbsp-navy:#0b1a3a;--hbsp-cream:#f3e6c8;--hbsp-label-red:#8f1420;z-index:2;box-sizing:border-box;width:100%;height:100%;min-height:0;padding:max(1.1rem, env(safe-area-inset-top,0px) + .75rem) clamp(.65rem, 2.5cqi, 1.5rem) max(1rem, env(safe-area-inset-bottom,0px) + .65rem);color:#fff;scrollbar-width:none;background:0 0;grid-template:"head rail""gifts rail"minmax(0,1fr)/minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(.4rem,1.5cqh,1rem) clamp(.5rem,2cqi,1.25rem);display:grid;position:relative;overflow:hidden auto}.hbsp-step3::-webkit-scrollbar{display:none}.hbsp-step3--finale .hbsp-step3__gifts{align-content:start;gap:clamp(.1rem,.8cqh,.45rem) clamp(.15rem,1.5cqi,.85rem);padding-bottom:.75rem}.hbsp-step3--finale .hbsp-gift--playlist,.hbsp-step3--finale .hbsp-gift--letter{width:min(100%,12.5rem)}.hbsp-step3--finale .hbsp-gift--album{width:min(72%,13.5rem)}.hbsp-step3__web{z-index:0;pointer-events:none;background:center / cover no-repeat url(/themes/hb-spiderman/step3/opt/bg.webp), var(--hbsp-navy);position:absolute;inset:0}.hbsp-step3__star{z-index:3;top:max(.35rem, env(safe-area-inset-top,0px) * .2);pointer-events:none;filter:drop-shadow(0 6px 10px #0006);--enter-rest:rotate(-8deg);-webkit-user-select:none;user-select:none;width:min(26cqi,9.5rem);height:auto;position:absolute;left:clamp(.15rem,1cqi,.75rem)}.hbsp-step3__head{z-index:2;text-align:center;flex-direction:column;grid-area:head;justify-content:center;align-items:center;gap:.35rem;padding:.35rem .5rem .15rem min(18cqi,5.5rem);display:flex;position:relative}.hbsp-step3__title{max-width:24ch;font-family:var(--hbsp-font-comic);letter-spacing:.03em;text-transform:uppercase;color:#fff;flex-wrap:wrap;justify-content:center;gap:.06em .28em;margin:0;font-size:clamp(1.45rem,5.2cqi,3.1rem);font-weight:400;line-height:.95;display:flex;transform:skew(-6deg)}.hbsp-step3__word{color:#fff;-webkit-text-stroke:.045em var(--hbsp-label-red);paint-order:stroke fill;text-shadow:2px 2px 0 var(--hbsp-label-red), -2px 2px 0 var(--hbsp-label-red), 2px -2px 0 var(--hbsp-label-red), -2px -2px 0 var(--hbsp-label-red), 0 2px 0 var(--hbsp-label-red), 0 -2px 0 var(--hbsp-label-red), 2px 0 0 var(--hbsp-label-red), -2px 0 0 var(--hbsp-label-red);opacity:0;transform-origin:50% 120%;animation:.58s cubic-bezier(.18,1.15,.32,1) both hbsp-word-throw;animation-delay:calc(.12s + var(--i,0) * .14s);display:inline-block}.hbsp-step3__word:nth-child(odd){--throw-x:-50%;--throw-rot:-20deg}.hbsp-step3__word:nth-child(2n){--throw-x:42%;--throw-rot:16deg}.hbsp-enter{opacity:0;animation:.58s cubic-bezier(.18,1.12,.32,1) both hbsp-pop-in;animation-delay:calc(80ms + var(--i,0) * .11s)}.hbsp-root--playlist .hbsp-enter,.hbsp-root--album .hbsp-enter,.hbsp-root--note .hbsp-enter{animation-delay:calc(60ms + var(--i,0) * .1s)}.hbsp-step3__body{max-width:46ch;font-family:var(--hbsp-font-round);letter-spacing:.04em;text-transform:uppercase;color:#ebf5ffeb;text-shadow:0 1px 2px #00000073;margin:0;font-size:clamp(.62rem,1.7cqi,1.05rem);font-weight:600;line-height:1.35}.hbsp-step3__gifts{z-index:2;grid-area:gifts;grid-template-rows:auto auto auto;grid-template-columns:1fr 1fr;align-content:center;justify-items:center;gap:clamp(.2rem,1.2cqh,.75rem) clamp(.15rem,1.5cqi,.85rem);min-height:0;padding:.25rem .15rem .5rem;display:grid;position:relative}.hbsp-date-slot{z-index:4;grid-area:3/1/auto/-1;justify-self:center;width:min(100%,22rem);padding:.15rem .35rem .2rem}.hbsp-gift--opened{opacity:.72;filter:saturate(.85)brightness(.95)}.hbsp-gift--opened .hbsp-gift__label{letter-spacing:.04em}.hbsp-gift{aspect-ratio:1;isolation:isolate;place-items:center;width:min(100%,14rem);display:grid;position:relative}.hbsp-gift__spin{isolation:isolate;place-items:center;width:100%;height:100%;display:grid;position:relative}.hbsp-gift--playlist{grid-area:1/1;justify-self:end;width:min(100%,15rem)}.hbsp-gift--playlist .hbsp-gift__spin{transform:rotate(-6deg)translate(4%,4%)}.hbsp-gift--interactive{cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit;font:inherit;background:0 0;border:0;padding:0}.hbsp-gift--interactive:focus-visible{outline-offset:6px;border-radius:50%;outline:3px solid #fff}.hbsp-gift--playlist.hbsp-gift--interactive:active .hbsp-gift__spin{transform:scale(.96)rotate(-6deg)translate(4%,4%)}.hbsp-gift--album.hbsp-gift--interactive:active .hbsp-gift__spin{transform:scale(.96)rotate(3deg)}.hbsp-gift--letter.hbsp-gift--interactive:active .hbsp-gift__spin{transform:scale(.96)rotate(7deg)translate(-6%,8%)}.hbsp-gift--album{z-index:2;grid-area:2/1/auto/-1;width:min(82%,16rem)}.hbsp-gift--album .hbsp-gift__spin{transform:rotate(3deg)}.hbsp-gift--letter{grid-area:1/2;justify-self:start;width:min(100%,14.5rem)}.hbsp-gift--letter .hbsp-gift__spin{transform:rotate(7deg)translate(-6%,8%)}.hbsp-gift__glow{z-index:0;filter:blur(6px);pointer-events:none;background:radial-gradient(circle,#f7edd4bf 0%,#f7edd440 45%,#0000 70%);border-radius:50%;position:absolute;inset:12%}.hbsp-gift__burst{z-index:0;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:116%;height:116%;position:absolute;inset:-8%}.hbsp-gift__art{z-index:1;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 0 1px #0a1630)drop-shadow(0 6px 10px #0000008c);width:58%;height:auto;max-height:58%;position:relative}.hbsp-gift--album .hbsp-gift__art{width:58%}.hbsp-gift--letter .hbsp-gift__art{width:55%}.hbsp-gift__label{z-index:2;font-family:var(--hbsp-font-comic);letter-spacing:.04em;color:#fff;-webkit-text-stroke:.05em var(--hbsp-label-red);paint-order:stroke fill;text-shadow:2px 2px 0 var(--hbsp-label-red), -2px 2px 0 var(--hbsp-label-red), 2px -2px 0 var(--hbsp-label-red), -2px -2px 0 var(--hbsp-label-red), 0 2px 0 var(--hbsp-label-red), 0 -2px 0 var(--hbsp-label-red), 2px 0 0 var(--hbsp-label-red), -2px 0 0 var(--hbsp-label-red);pointer-events:none;white-space:nowrap;transform-origin:50%;font-size:clamp(1.15rem,3.6cqi,1.95rem);animation:1.8s ease-in-out infinite hbsp-label-pulse;position:absolute;bottom:10%;left:50%;transform:translate(-50%)skew(-8deg)}.hbsp-gift--album .hbsp-gift__label{top:8%;bottom:auto}.hbsp-step3__rail{z-index:2;flex-direction:column;grid-area:rail;justify-content:flex-start;align-items:center;gap:clamp(.35rem,1.5cqh,.85rem);min-height:0;padding-top:.25rem;display:flex;position:relative}.hbsp-letter{--enter-rest:rotate(2deg);aspect-ratio:640/860;filter:none;width:100%;max-width:22rem;max-height:58%;position:relative}.hbsp-letter__sheet{object-fit:fill;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 10px 16px #0006);width:100%;height:100%;display:block}.hbsp-letter__sticker{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;height:auto;display:block;position:absolute}.hbsp-letter__sticker--mask-a{z-index:2;width:22%;top:7%;left:10%;transform:rotate(-12deg)}.hbsp-letter__sticker--mask-b{z-index:3;width:24%;top:5%;left:26%;transform:rotate(8deg)}.hbsp-letter__sticker--cards{z-index:5;width:48%;top:14%;right:4%;transform:rotate(6deg)}.hbsp-letter__sticker--yellow{z-index:4;width:42%;bottom:8%;left:6%;transform:rotate(-8deg)}.hbsp-letter__sticker--kiss{z-index:6;width:22%;bottom:7%;right:8%;transform:rotate(12deg)}.hbsp-step3__hello{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 6px 10px #00000059);--enter-rest:rotate(-3deg);width:100%;max-width:20rem;height:auto;max-height:40%;display:block}@container hbsp (max-width:699px){.hbsp-step3{grid-template:"head""gifts""rail"/1fr;height:100%;max-height:100%;overflow:hidden auto}.hbsp-step3__star{width:min(28vw,5.5rem)}.hbsp-step3__head{padding-left:min(26vw,5rem);padding-right:.35rem}.hbsp-step3__title{max-width:16ch;font-size:clamp(1.2rem,6.5vw,1.7rem)}.hbsp-step3__body{font-size:clamp(.55rem,2.8vw,.72rem)}.hbsp-step3__gifts{padding-bottom:.15rem}.hbsp-date-slot{width:min(100%,20rem);padding-inline:.5rem}.hbsp-gift--playlist,.hbsp-gift--letter,.hbsp-gift--album{width:min(46vw,10.5rem)}.hbsp-gift--album{width:min(52vw,11.5rem)}.hbsp-step3__rail{flex-flow:wrap;justify-content:center;gap:.55rem;padding-bottom:.5rem}.hbsp-letter,.hbsp-step3__hello{max-width:min(44vw,11rem);max-height:none}.hbsp-letter{aspect-ratio:640/860}}@container hbsp (min-width:900px){.hbsp-step3__star{width:min(22cqi,12rem)}.hbsp-step3__head{gap:.55rem;padding-left:min(16cqi,8.5rem)}.hbsp-step3__title{-webkit-text-stroke-width:.035em;font-size:clamp(2.6rem,5.2cqi,4.4rem)}.hbsp-step3__body{max-width:48ch;font-size:clamp(.9rem,1.7cqi,1.25rem)}.hbsp-gift{width:min(100%,18rem)}.hbsp-gift--playlist{width:min(100%,19rem)}.hbsp-gift--letter{width:min(100%,18rem)}.hbsp-gift--album{width:min(88%,20rem)}.hbsp-step3--finale .hbsp-gift--playlist,.hbsp-step3--finale .hbsp-gift--letter{width:min(100%,15rem)}.hbsp-step3--finale .hbsp-gift--album{width:min(78%,16rem)}.hbsp-gift__label{-webkit-text-stroke-width:.04em;font-size:clamp(1.65rem,3.1cqi,2.55rem)}.hbsp-letter{max-width:26rem;max-height:60%}.hbsp-step3__hello{max-width:24rem;max-height:42%}}@container hbsp (min-width:1200px){.hbsp-step3__star{width:min(20cqi,14rem)}.hbsp-step3__title{font-size:clamp(3.2rem,4.8cqi,5rem)}.hbsp-step3__body{font-size:clamp(1.05rem,1.5cqi,1.4rem)}.hbsp-gift--playlist{width:min(100%,22rem)}.hbsp-gift--letter{width:min(100%,21rem)}.hbsp-gift--album{width:min(90%,23rem)}.hbsp-step3--finale .hbsp-gift--playlist,.hbsp-step3--finale .hbsp-gift--letter{width:min(100%,17rem)}.hbsp-step3--finale .hbsp-gift--album{width:min(80%,18rem)}.hbsp-gift__label{font-size:clamp(1.95rem,2.7cqi,2.85rem)}.hbsp-letter{max-width:30rem}.hbsp-step3__hello{max-width:28rem}}@container hbsp (min-width:700px){.hbsp-spider{width:min(38%,20rem);max-height:min(58cqh,28rem)}.hbsp-spider img{max-height:min(58cqh,28rem)}.hbsp-step2__hint{letter-spacing:.08em;font-size:clamp(1.15rem,2.4cqi,1.85rem)}}@keyframes hbsp-step2-fade{0%,to{opacity:.15}50%{opacity:1}}@keyframes hbsp-spider-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}@container hbsp (min-width:700px){.hbsp-bars{height:clamp(1.35rem,5.2cqh,2.6rem)}.hbsp-stage{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);place-items:center stretch;gap:0 clamp(1rem,3.5cqi,3.5rem);padding:clamp(2.8rem,7cqh,4.5rem) clamp(1.75rem,4.5cqi,4rem) clamp(2.6rem,6.5cqh,4rem);display:grid}.hbsp-bubble{place-self:center stretch;width:100%;max-width:none;transform:rotate(-2.5deg)}.hbsp-bubble__copy{gap:.5em;inset:18% 12% 26% 10%}.hbsp-bubble__title{font-size:clamp(1.85rem,3.8cqi,3.35rem)}.hbsp-bubble__hint{font-size:clamp(.9rem,1.55cqi,1.25rem)}.hbsp-phone-wrap{aspect-ratio:512/976;place-self:center end;width:auto;max-width:min(48cqi,34rem);height:min(82cqh,92%);max-height:92%;margin-right:clamp(0rem,1.5cqi,1.25rem);padding-top:0}.hbsp-exclaim{width:48%;top:-4%;left:-22%;transform:rotate(-10deg)}.hbsp-phone{width:100%;height:100%}.hbsp-phone img{object-fit:contain;width:100%;height:100%}}@container hbsp (min-width:1100px){.hbsp-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(1.5rem,4cqi,4.5rem);padding-inline:clamp(2.5rem,6cqi,5.5rem)}.hbsp-bubble__copy{gap:.55em;inset:17% 11% 25% 9%}.hbsp-bubble__title{font-size:clamp(2.2rem,3.6cqi,3.75rem)}.hbsp-bubble__hint{font-size:clamp(1rem,1.4cqi,1.35rem)}.hbsp-phone-wrap{max-width:min(42cqi,38rem);height:min(84cqh,94%)}.hbsp-exclaim{width:44%;left:-20%}}@keyframes hbsp-phone-zoom{0%,to{transform:scale(.92)rotateY(-8deg)rotateX(5deg)translateZ(0)}50%{transform:scale(1.1)rotateY(-1deg)rotateX(1deg)translateZ(28px)}}@keyframes hbsp-exclaim-bob{0%,to{transform:rotate(-10deg)translateY(0)scale(1)}50%{transform:rotate(-6deg)translateY(-6%)scale(1.05)}}@keyframes hbsp-glow{0%,to{opacity:.45}50%{opacity:.9}}@keyframes hbsp-bubble-in{0%{opacity:0;transform:rotate(-2deg)translateY(12px)scale(.92)}to{opacity:1;transform:rotate(-2deg)translateY(0)scale(1)}}@keyframes hbsp-word-throw{0%{opacity:0;transform:translate(var(--throw-x,-40%), -120%) rotate(var(--throw-rot,-18deg)) scale(1.55)}62%{opacity:1;transform:translate(0, 5%) rotate(calc(var(--throw-rot,-18deg) * -.15)) scale(.95)}82%{transform:translateY(-2%)rotate(0)scale(1.03)}to{opacity:1;transform:translate(0)rotate(0)scale(1)}}@keyframes hbsp-hint-in{0%{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:translateY(0)}}@keyframes hbsp-label-pulse{0%,to{transform:translate(-50%)skew(-8deg)scale(1)}50%{transform:translate(-50%)skew(-8deg)scale(1.08)}}@keyframes hbsp-pop-in{0%{opacity:0;transform:translateY(14%)scale(.82)rotate(-6deg)}65%{opacity:1;transform:translateY(-2%)scale(1.04)rotate(1deg)}to{opacity:1;transform:var(--enter-rest,none)}}.hbsp-dialog{z-index:50;box-sizing:border-box;place-items:center;padding:clamp(.75rem,4cqi,1.5rem);display:grid;position:absolute;inset:0}.hbsp-dialog__backdrop{z-index:0;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#040814b8;border:0;margin:0;padding:0;animation:.28s ease-out both hbsp-dialog-fade;position:absolute;inset:0}.hbsp-dialog__sheet{z-index:1;transform-origin:50% 55%;background:linear-gradient(165deg,#142040f5 0%,#080e20fa 100%);border-radius:1.35rem;flex-direction:column;gap:.85rem;width:min(100%,22.5rem);padding:1.35rem 1.1rem 1.15rem;animation:.4s cubic-bezier(.22,1.15,.36,1) both hbsp-dialog-in;display:flex;position:relative;box-shadow:0 24px 60px #0000008c,0 0 0 2px #e11d2e73}.hbsp-dialog__close{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffff14;border:1px solid #ffffff40;border-radius:999px;width:2rem;height:2rem;font-size:1.25rem;line-height:1;position:absolute;top:.55rem;right:.55rem}.hbsp-dialog__kicker{font-family:var(--hbsp-font-ui);letter-spacing:.22em;text-transform:uppercase;color:#f5a3ad;margin:0 1.5rem 0 0;font-size:.7rem;font-weight:800}.hbsp-date-fab{z-index:40;left:50%;bottom:max(.85rem, env(safe-area-inset-bottom,0px) + .55rem);width:min(100% - 1.5rem,22rem);animation:.35s cubic-bezier(.22,1.15,.36,1) both hbsp-date-fab-in;position:absolute;transform:translate(-50%)}@keyframes hbsp-dialog-fade{0%{opacity:0}to{opacity:1}}@keyframes hbsp-dialog-in{0%{opacity:0;transform:translateY(1.1rem)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes hbsp-date-fab-in{0%{opacity:0;transform:translate(-50%)translateY(.75rem)scale(.94)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}.hbsp-root--playlist{background:url(/themes/hb-spiderman/step3/opt/bg.webp) 50%/cover no-repeat,#0b1a3a}.hbsp-pl{--hbsp-navy:#0b1a3a;z-index:2;box-sizing:border-box;width:100%;height:100%;min-height:0;padding:max(.75rem, env(safe-area-inset-top,0px) + .5rem) clamp(.75rem, 3cqi, 1.5rem) max(1.25rem, env(safe-area-inset-bottom,0px) + 1rem);flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden auto}.hbsp-pl__bg{z-index:0;pointer-events:none;background:center / cover no-repeat url(/themes/hb-spiderman/step3/opt/bg.webp), var(--hbsp-navy);position:absolute;inset:0}.hbsp-pl__back{z-index:8;top:max(.65rem, env(safe-area-inset-top,0px) + .35rem);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#0810288c;border:2px solid #ffffff8c;border-radius:999px;width:2.4rem;height:2.4rem;font-size:1.15rem;line-height:1;position:absolute;left:clamp(.5rem,2cqi,1rem)}.hbsp-pl__back:focus-visible{outline-offset:3px;outline:3px solid #fff}.hbsp-pl__head{z-index:2;flex-direction:column;align-items:center;width:min(100%,28rem);margin-top:.35rem;display:flex;position:relative}.hbsp-pl__banner{z-index:0;opacity:.92;pointer-events:none;background:repeating-linear-gradient(-18deg,#0000 0 10px,#ffffff0f 10px 11px),linear-gradient(90deg,#b01220,#d01828 50%,#b01220);width:80cqi;height:3.2rem;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.hbsp-pl__logo{z-index:1;aspect-ratio:1;place-items:center;width:min(62%,14rem);display:grid;position:relative}.hbsp-pl__logo-art{z-index:1;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 6px 10px #00000073);width:100%;height:auto;position:relative}.hbsp-pl__title{z-index:1;font-family:var(--hbsp-font-comic);letter-spacing:.04em;color:#fff;text-shadow:-2px -2px #8f1420,2px -2px #8f1420,-2px 2px #8f1420,2px 2px #8f1420,0 4px #00000059;margin:.15rem 0 0;font-size:clamp(1.85rem,8cqi,3.1rem);font-weight:400;line-height:1;position:relative;transform:rotate(-4deg)}.hbsp-pl__msg{z-index:2;max-width:34rem;font-family:var(--hbsp-font-ui);letter-spacing:.03em;text-align:center;text-transform:uppercase;color:#f4f0ea;text-shadow:0 1px 2px #00000073;margin:clamp(.65rem,2cqh,1.1rem) auto 0;font-size:clamp(.72rem,2.6cqi,.95rem);font-weight:700;line-height:1.45;position:relative}.hbsp-pl__grid{z-index:4;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(.55rem,1.8cqi,1rem);width:min(100%,40rem);margin-top:clamp(.85rem,3cqh,1.5rem);display:grid;position:relative}.hbsp-pl__card{color:#fff;text-align:left;width:100%;font:inherit;background:linear-gradient(165deg,#9a1522 0%,#6e0c16 55%,#4a0810 100%);border:2px solid #00000059;border-radius:.85rem;flex-direction:column;gap:.55rem;margin:0;padding:.75rem .8rem .7rem;display:flex;box-shadow:0 10px 18px #0006}.hbsp-pl__card-top{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem;display:grid}.hbsp-pl__covers{background:#1a0508;border-radius:.35rem;flex-shrink:0;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;width:3.1rem;height:3.1rem;display:grid;overflow:hidden}.hbsp-pl__covers span,.hbsp-pl__covers img{object-fit:cover;width:100%;height:100%;display:block}.hbsp-pl__covers span{background:radial-gradient(circle at 30% 30%,#e11d2e,#0000 55%),#2a0a10}.hbsp-pl__covers span:nth-child(2){background:radial-gradient(circle at 70% 40%,#f5e6a8,#0000 50%),#1a2040}.hbsp-pl__covers span:nth-child(3){background:radial-gradient(circle at 40% 60%,#fff,#0000 40%),#3a0a12}.hbsp-pl__covers span:nth-child(4){background:radial-gradient(circle,#c41626,#0000 55%),#0a1020}.hbsp-pl__card-meta{flex-direction:column;gap:.1rem;min-width:0;display:flex}.hbsp-pl__card-meta strong{font-size:clamp(.78rem,2.5cqi,.95rem);font-weight:800;line-height:1.2}.hbsp-pl__card-meta span{opacity:.8;font-size:.68rem}.hbsp-pl__spot{opacity:.85;font-size:1.1rem}.hbsp-pl__controls{justify-content:center;align-items:center;gap:1.1rem;font-size:.95rem;display:flex}.hbsp-pl__ctrl,.hbsp-pl__controls-play{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit;background:0 0;border:0;padding:0}.hbsp-pl__ctrl:focus-visible,.hbsp-pl__controls-play:focus-visible,.hbsp-pl__track:focus-visible{outline-offset:2px;outline:2px solid #fff}.hbsp-pl__controls-play{background:#e11d2e;border-radius:999px;place-items:center;width:2rem;height:2rem;display:grid;box-shadow:0 0 0 2px #ffffff40}.hbsp-pl__tracks{flex-direction:column;gap:.2rem;margin:0;padding:0;list-style:none;display:flex}.hbsp-pl__track{width:100%;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:.35rem;grid-template-columns:1.25rem minmax(0,1fr) auto;align-items:baseline;gap:.4rem;margin:0;padding:.28rem .2rem;font-size:clamp(.62rem,2cqi,.75rem);line-height:1.25;display:grid}.hbsp-pl__track:hover,.hbsp-pl__track.is-playing{background:#ffffff1a}.hbsp-pl__track-n{opacity:.7;font-variant-numeric:tabular-nums}.hbsp-pl__track.is-playing .hbsp-pl__track-n{opacity:1}.hbsp-pl__track-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.hbsp-pl__track-time{opacity:.7;font-variant-numeric:tabular-nums}.hbsp-pl__side{flex-direction:column;gap:clamp(.45rem,1.5cqh,.75rem);min-width:0;display:flex}.hbsp-spot{color:#fff;background:linear-gradient(#a01622 0%,#7a0e18 100%);border:2px solid #5c0a12;border-radius:.75rem;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;gap:.65rem;min-height:5.4rem;padding:.65rem .7rem .65rem .65rem;display:grid;box-shadow:0 8px 14px #00000059}.hbsp-spot__art{object-fit:cover;background:#1a0508 50%/cover no-repeat;border-radius:.28rem;flex-shrink:0;width:4.35rem;height:4.35rem;box-shadow:0 2px 6px #00000059}.hbsp-spot__art--starboy{background-image:radial-gradient(circle at 50% 35%,#3a3a3a 0 18%,#0000 19%),linear-gradient(160deg,#1a1a1a 0%,#0a0a0a 45%,#2a1018 100%)}.hbsp-spot__art--sunflower{background-image:radial-gradient(42% 28% at 32% 42%,#fff 0 55%,#0000 56%),radial-gradient(42% 28% at 68% 42%,#fff 0 55%,#0000 56%),linear-gradient(#0a0a0a,#0a0a0a)}.hbsp-spot__body{flex-direction:column;justify-content:center;gap:.28rem;min-width:0;padding-top:.05rem;display:flex}.hbsp-spot__title{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:clamp(.78rem,2.5cqi,.95rem);font-weight:800;line-height:1.2;overflow:hidden}.hbsp-spot__artists{opacity:.95;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0;font-size:.68rem;line-height:1.2;display:flex}.hbsp-spot__preview{color:#fff;letter-spacing:.02em;background:#111;border-radius:999px;padding:.08rem .38rem;font-size:.58rem;font-weight:700;display:inline-block}.hbsp-spot__save{opacity:.95;align-items:center;gap:.3rem;margin-top:.1rem;font-size:.68rem;font-weight:600;display:inline-flex}.hbsp-spot__save span{font-size:.95rem;line-height:1}.hbsp-spot__rail{flex-direction:column;justify-content:space-between;align-items:flex-end;padding:.05rem 0;display:flex}.hbsp-spot__logo{opacity:.95;display:block}.hbsp-spot__rail-bottom{align-items:center;gap:.45rem;display:flex}.hbsp-spot__more{letter-spacing:.02em;opacity:.85;font-size:1.1rem;line-height:1}.hbsp-spot__play{color:#8b1520;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:0;border-radius:999px;place-items:center;width:2rem;height:2rem;margin:0;padding:0;display:grid;box-shadow:0 2px 4px #00000040}.hbsp-spot__play.is-playing{color:#5c0a12}.hbsp-spot__play:focus-visible{outline-offset:2px;outline:2px solid #fff}.hbsp-spot__play svg{display:block}.hbsp-pl__deco{z-index:5;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 8px 12px #00000073);position:absolute}.hbsp-pl__deco--point{width:min(38%,12rem);bottom:2%;left:-2%}.hbsp-pl__deco--phones{width:min(28%,8.5rem);bottom:18%;right:-1%}@container hbsp (max-width:699px){.hbsp-pl__grid{grid-template-columns:1fr;width:min(100%,22rem)}.hbsp-pl__deco--point{width:min(42%,9.5rem);bottom:0}.hbsp-pl__deco--phones{width:min(32%,7rem);bottom:12%}}.hbsp-root--note{background:#8f1420}.hbsp-note{z-index:2;box-sizing:border-box;width:100%;height:100%;min-height:0;padding:max(.85rem, env(safe-area-inset-top,0px) + .5rem) clamp(.65rem, 2.5cqi, 1.5rem) max(.85rem, env(safe-area-inset-bottom,0px) + .55rem);color:#fff;background:#8f1420;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);grid-template-areas:"book art";gap:clamp(.5rem,2cqi,1.25rem);display:grid;position:relative;overflow:hidden}.hbsp-note__web{z-index:0;pointer-events:none;opacity:.42;mix-blend-mode:soft-light;background:url(/themes/hb-spiderman/step3/opt/bg.webp) 50%/cover no-repeat;position:absolute;inset:0}.hbsp-note__back{z-index:10;top:max(.55rem, env(safe-area-inset-top,0px) + .3rem);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#50081080;border:2px solid #ffffffa6;border-radius:999px;width:2.35rem;height:2.35rem;font-size:1.1rem;line-height:1;position:absolute;left:clamp(.4rem,1.5cqi,.85rem)}.hbsp-note__back:focus-visible{outline-offset:3px;outline:3px solid #fff}.hbsp-note__book{z-index:2;background:#6e1018;border-radius:.35rem .55rem .55rem .35rem;grid-area:book;align-items:stretch;width:100%;max-width:28rem;height:min(88%,42rem);min-height:0;margin:1.25rem auto 0;display:flex;position:relative;overflow:hidden;box-shadow:0 14px 28px #0006}.hbsp-note__spiral{background:linear-gradient(90deg,#5a0c12,#7a121a);flex-direction:column;flex-shrink:0;justify-content:space-evenly;align-items:center;width:1.35rem;padding:.6rem 0;display:flex}.hbsp-note__spiral span{background:radial-gradient(circle at 35% 35%,#f0d78a,#b8923a 55%,#7a5a18);border-radius:50%;width:.95rem;height:.95rem;box-shadow:inset 0 0 0 1px #00000040}.hbsp-note__page{color:#1a1020;background:repeating-linear-gradient(#0000 0 1.55rem,#788cb42e 1.55rem 1.6rem),#f4ead6;flex:1;min-width:0;margin:.55rem .55rem .55rem .15rem;padding:clamp(1.1rem,3cqi,1.6rem) clamp(.85rem,2.5cqi,1.25rem) 3.2rem;position:relative;overflow:auto;box-shadow:inset 0 0 0 1px #0000000f}.hbsp-note__heading{font-family:var(--hbsp-font-ui);letter-spacing:.06em;text-align:center;text-transform:uppercase;margin:0 0 .85rem;font-size:clamp(.95rem,3cqi,1.2rem);font-weight:800}.hbsp-note__body{font-family:var(--hbsp-font-ui);letter-spacing:.04em;text-align:center;text-transform:uppercase;margin:0;font-size:clamp(.68rem,2.1cqi,.82rem);font-weight:700;line-height:1.55}.hbsp-note__page-badge{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 2px 3px #00000040);width:2.4rem;height:auto;position:absolute;bottom:.45rem;left:.55rem}.hbsp-note__art{z-index:2;grid-area:art;min-width:0;min-height:0;position:relative}.hbsp-note__title{z-index:4;max-width:70%;font-family:var(--hbsp-font-comic);letter-spacing:.02em;color:#fff;text-shadow:-2px -2px #1a3a8a,2px -2px #1a3a8a,-2px 2px #1a3a8a,2px 2px #1a3a8a,0 3px #00000059;margin:0;font-size:clamp(1.6rem,7cqi,2.8rem);font-style:italic;font-weight:400;line-height:.95;position:absolute;top:8%;left:2%;transform:rotate(-6deg)}.hbsp-note__hang{z-index:3;object-fit:contain;mix-blend-mode:lighten;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 10px 14px #00000059);width:min(58%,14rem);height:auto;position:absolute;top:6%;right:2%}.hbsp-note__power{z-index:5;object-fit:contain;mix-blend-mode:lighten;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 8px 12px #00000059);width:min(42%,9.5rem);height:auto;position:absolute;top:4%;right:-2%;transform:rotate(8deg)}.hbsp-note__punk{z-index:4;object-fit:contain;mix-blend-mode:lighten;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 8px 10px #00000059);width:min(36%,7.5rem);height:auto;position:absolute;bottom:8%;left:4%;transform:rotate(-8deg)}.hbsp-note__mask{z-index:5;object-fit:contain;mix-blend-mode:lighten;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 6px 10px #00000059);width:min(32%,6.5rem);height:auto;position:absolute;bottom:4%;right:6%;transform:rotate(10deg)}@container hbsp (max-width:699px){.hbsp-note{grid-template:"book""art"minmax(14rem,1fr)/1fr;height:100%;max-height:100%;overflow-y:auto}.hbsp-note__book{max-width:24rem;height:auto;min-height:22rem;margin-top:2.4rem}.hbsp-note__art{min-height:16rem}.hbsp-note__hang{width:min(52%,11rem);top:10%}.hbsp-note__title{font-size:clamp(1.4rem,8vw,2rem)}}.hbsp-root--album{background:#c41626}.hbsp-al{z-index:2;box-sizing:border-box;width:100%;height:100%;min-height:0;padding:max(.75rem, env(safe-area-inset-top,0px) + .45rem) clamp(.55rem, 2cqi, 1.25rem) max(.85rem, env(safe-area-inset-bottom,0px) + .55rem);color:#fff;background:#c41626;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr) minmax(0,.85fr);grid-template-areas:"left collage right";gap:clamp(.35rem,1.5cqi,1rem);display:grid;position:relative;overflow:hidden}.hbsp-al__web{z-index:0;pointer-events:none;opacity:.45;mix-blend-mode:soft-light;background:url(/themes/hb-spiderman/step3/opt/bg.webp) 50%/cover no-repeat;position:absolute;inset:0}.hbsp-al__back{z-index:10;top:max(.55rem, env(safe-area-inset-top,0px) + .3rem);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#780a1473;border:2px solid #ffffffa6;border-radius:999px;width:2.35rem;height:2.35rem;font-size:1.1rem;line-height:1;position:absolute;left:clamp(.4rem,1.5cqi,.85rem)}.hbsp-al__back:focus-visible{outline-offset:3px;outline:3px solid #fff}.hbsp-al__left{z-index:3;flex-direction:column;grid-area:left;justify-content:flex-start;align-items:flex-start;gap:.35rem;min-width:0;padding-top:1.5rem;display:flex;position:relative}.hbsp-al__hero{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 8px 12px #00000059);width:min(100%,11rem);height:auto;display:block}.hbsp-al__title{font-family:var(--hbsp-font-comic);letter-spacing:.04em;color:#fff;text-shadow:-2px -2px #0a1020,2px -2px #0a1020,-2px 2px #0a1020,2px 2px #0a1020;margin:.15rem 0 0;font-size:clamp(2rem,9cqi,3.4rem);font-weight:400;line-height:.95}.hbsp-al__msg{max-width:16rem;font-family:var(--hbsp-font-ui);letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px #00000059;margin:.35rem 0 0;font-size:clamp(.68rem,2.3cqi,.88rem);font-weight:700;line-height:1.4}.hbsp-al__badge{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 4px 6px #0000004d);width:min(28%,3.4rem);height:auto;margin-top:auto;display:block}.hbsp-al__collage{z-index:4;grid-area:collage;align-self:stretch;width:100%;height:100%;min-height:0;position:relative;overflow:visible}.hbsp-al__polaroid{aspect-ratio:3/4;box-sizing:border-box;background:#0b1a3a;padding:.38rem;position:absolute;box-shadow:0 10px 18px #0006}.hbsp-al__polaroid img{object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none;background:#1a1020;width:100%;height:100%;display:block}.hbsp-al__right{z-index:3;flex-direction:column;grid-area:right;justify-content:flex-start;align-items:flex-end;gap:.5rem;min-width:0;padding-top:.5rem;display:flex;position:relative}.hbsp-al__deco{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 8px 12px #00000059);height:auto;display:block}.hbsp-al__deco--top{width:min(100%,14rem);margin-right:-4%}.hbsp-al__deco--pack{width:min(92%,11.5rem);margin-top:auto;margin-right:-2%}@container hbsp (max-width:699px){.hbsp-al{grid-template:"left""collage"minmax(16rem,42%)"right"/1fr;height:100%;max-height:100%;overflow:hidden auto}.hbsp-al__left{flex-flow:wrap;align-items:center;gap:.5rem .75rem;padding-top:2.4rem}.hbsp-al__hero{width:min(34%,7.5rem)}.hbsp-al__title{font-size:clamp(1.7rem,10vw,2.4rem)}.hbsp-al__msg{flex:100%;max-width:none}.hbsp-al__badge{display:none}.hbsp-al__collage{min-height:16rem}.hbsp-al__right{flex-direction:row;justify-content:space-between;align-items:flex-end;padding-bottom:.5rem}.hbsp-al__deco--top{width:min(48%,10rem)}.hbsp-al__deco--pack{width:min(46%,9.5rem);margin-top:0}}@media (prefers-reduced-motion:reduce){.hbsp-phone,.hbsp-exclaim,.hbsp-phone__glow,.hbsp-bubble,.hbsp-bubble__word,.hbsp-bubble__hint,.hbsp-step2__hint,.hbsp-spider,.hbsp-enter,.hbsp-step3__word,.hbsp-gift__label,.hbsp-dialog__backdrop,.hbsp-dialog__sheet,.hbsp-date-fab{animation:none}.hbsp-dialog__backdrop,.hbsp-dialog__sheet,.hbsp-date-fab{opacity:1;transform:none}.hbsp-date-fab{transform:translate(-50%)}.hbsp-bubble__word,.hbsp-bubble__hint,.hbsp-step2__hint,.hbsp-enter,.hbsp-step3__word{opacity:1;filter:none;transform:none}.hbsp-gift__label{transform:translate(-50%)skew(-8deg)}.hbsp-phone{transform:scale(1)rotateY(-6deg)rotateX(3deg)}}