#phero{padding-top:92px;padding-bottom:20px}
#phero .ph-col{padding-top:0}
#phero #phPc{height:40vh}
#phero .ph-ycw{display:inline-flex;margin:0 0 22px;opacity:0}
@keyframes ycfade{to{opacity:1}}
body.loaded #phero .ph-ycw{animation:ycfade .45s ease .12s both}
#phero .ph-yc{position:relative;display:inline-flex;align-items:center;gap:11px;padding:12px 22px;font-family:var(--body);font-size:clamp(13px,1.35vw,15px);font-weight:600;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--ink);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:7px;box-shadow:0 16px 34px -24px rgba(20,32,43,.5);pointer-events:auto;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
#phero .ph-yc::before{content:"";position:absolute;inset:0;border:1.5px solid rgba(13,153,255,.4);border-radius:7px;pointer-events:none;clip-path:inset(0 100% 0 0);transition:border-color .25s ease}
body.loaded #phero .ph-yc::before{animation:ldbox .55s cubic-bezier(.6,.1,.2,1) .5s forwards}
#phero .ph-yc .h{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid var(--tool);border-radius:2px;opacity:0;pointer-events:none;z-index:2;transition:box-shadow .25s ease}
#phero .ph-yc .h.tl{top:-5px;left:-5px}
#phero .ph-yc .h.tr{top:-5px;right:-5px}
#phero .ph-yc .h.bl{bottom:-5px;left:-5px}
#phero .ph-yc .h.br{bottom:-5px;right:-5px}
body.loaded #phero .ph-yc .h{animation:hpop .3s cubic-bezier(.3,1.7,.5,1) both}
body.loaded #phero .ph-yc .h.tl{animation-delay:1s}
body.loaded #phero .ph-yc .h.bl{animation-delay:1.07s}
body.loaded #phero .ph-yc .h.tr{animation-delay:1.14s}
body.loaded #phero .ph-yc .h.br{animation-delay:1.21s}
#phero .ph-yc:hover{transform:translateY(-2px);box-shadow:0 22px 40px -22px rgba(20,32,43,.55)}
#phero .ph-yc:hover::before{border-color:rgba(13,153,255,.92)}
#phero .ph-yc:hover .h{box-shadow:0 0 0 3px rgba(13,153,255,.16)}
#phero .ph-yc .yc-pre{color:var(--ink);font-weight:600}
#phero .ph-yc .yc-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;background:var(--brand);color:#fff;font-family:var(--body);font-weight:700;font-size:13px;line-height:1;box-shadow:0 4px 10px -4px rgba(240,83,28,.6)}
#phero .ph-yc .yc-comb{color:var(--brand);font-weight:700}
#phero .ph-yc .yc-post{color:var(--ink-soft);font-weight:500}
@media(prefers-reduced-motion:reduce){#phero .ph-ycw{opacity:1;animation:none}#phero .ph-yc::before{clip-path:none;animation:none}#phero .ph-yc .h{opacity:1;transform:none;animation:none}}
@media(pointer:fine){#phero .ph-yc{cursor:none}}
@media(max-width:680px){#phero{padding-top:84px}#phero #phPc{height:36vh}}
@media(max-width:440px){#phero .ph-yc{white-space:normal;text-align:center;justify-content:center;font-size:12.5px;padding:11px 16px}}