/* HERO */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hi{font-size:20px;margin-bottom:6px}
.name-wrap{position:relative;padding:20px 90px}
.name-box{position:relative;display:inline-block;border:2px solid var(--red);padding:6px 34px;background:rgba(255,255,255,.4)}
.name-box .h,.pix-title{font-family:var(--pix);font-weight:400;line-height:.85;letter-spacing:1px}
.name-box .h{font-size:clamp(80px,13vw,180px);display:block}
.hd{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--red)}
.hd.tl{left:-5px;top:-5px}.hd.tr{right:-5px;top:-5px}.hd.bl{left:-5px;bottom:-5px}.hd.br{right:-5px;bottom:-5px}
.open{margin-top:12px;display:flex;gap:8px;justify-content:center;align-items:center}
.blip{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(47,191,113,.6);animation:blip 1.6s infinite}
@keyframes blip{70%{box-shadow:0 0 0 10px rgba(47,191,113,0)}}
.sticky{position:absolute;font-family:var(--mono);font-size:11px;padding:5px 12px;box-shadow:2px 3px 6px rgba(0,0,0,.12);transition:transform .35s var(--ease);cursor:default;white-space:nowrap}
.sticky:hover{transform:rotate(0) scale(1.12)!important}
.s1{background:var(--n-g);left:40px;top:-20px;transform:rotate(-4deg)}
.s2{background:var(--n-y);right:30px;top:-24px;transform:rotate(3deg)}
.s3{background:var(--n-y);left:0;bottom:44px;transform:rotate(-6deg);font-family:var(--hand);font-size:15px}
.s4{background:var(--n-g);right:0;bottom:40px;transform:rotate(5deg);font-family:var(--hand);font-size:15px}
.doodle{position:absolute;width:60px}
.a1{left:50px;bottom:10px}.a2{right:50px;bottom:6px}
.bubble{position:absolute;width:62px;height:62px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid #e9875a;box-shadow:0 6px 14px rgba(0,0,0,.15);animation:bob 4s ease-in-out infinite;background:#f7d9c4}
.b-l{left:12vw;top:52%}.b-r{right:12vw;top:60%;animation-delay:-2s}
@keyframes bob{50%{transform:translateY(-12px)}}
.tagline{font-weight:500;font-size:clamp(24px,3vw,38px);letter-spacing:-.8px;line-height:1.2;margin-top:34px}
.ico{display:inline-grid;place-items:center;width:1em;height:1em;font-size:.8em;vertical-align:middle}
.ic-g{color:var(--green);animation:spin 6s linear infinite}.ic-p{color:var(--pink);animation:spin 4s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-dark{margin-top:28px;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;padding:10px 16px 10px 10px;box-shadow:4px 4px 0 var(--yellow);transition:transform .15s,box-shadow .15s}
.btn-dark .sq{background:var(--blue);width:22px;height:22px;display:grid;place-items:center}
.btn-dark:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--yellow)}
.btn-dark:active{transform:translate(4px,4px);box-shadow:none}