#g-box .ad-cbody{position:relative}
#g-box .ad-fig{padding:8px 0 20px}
#g-box .ad-hub{position:relative;display:grid;place-items:center;width:124px;aspect-ratio:1;border-radius:50%;border:2px dashed rgba(254,254,250,.45);background:radial-gradient(circle at 40% 35%,rgba(254,254,250,.10),rgba(1,33,47,.6) 70%)}
#g-box .ad-hub .pn-tag{margin:0;padding:4px 10px;font-size:14px;text-align:center;line-height:1.35;background:rgba(1,33,47,.85)}
#g-box .ad-bub{width:272px;gap:4px;padding:0 26px}
#g-box .ad-bub b{font-size:24px}
#g-box .ad-bub>span{font-size:15px;line-height:1.5}
#g-box .ad-art{display:block;width:118px;height:auto;overflow:visible;margin-bottom:2px}
#g-box .ad-back{display:flex;margin:4px auto 0;width:max-content}
@media (min-width:900px){
  #g-box .pn-body.ad-cbody{max-width:1120px;padding-top:0}
  #g-box .ad-fig{padding:0;margin:0 auto;height:calc(100svh - 76px);min-height:640px}
  #g-box .ad-fig .pn-q{top:calc(50% - 290px)}
  #g-box .ad-hub{position:absolute;left:50%;top:50%;width:190px;margin:-95px 0 0 -95px}
  #g-box .ad-hub .pn-tag{font-size:17px;padding:5px 14px}
  #g-box .ad-bub{width:340px;padding:0 44px;margin:0 30px;gap:6px}
  #g-box .ad-bub b{font-size:31px}
  #g-box .ad-bub>span{font-size:18px}
  #g-box .ad-art{width:168px}
  #g-box .ad-back{position:absolute;left:0;bottom:36px;margin:0}
}

#g-box .ad-art .ad-l0,#g-box .ad-art .ad-l1,#g-box .ad-art .ad-l2,#g-box .ad-art .ad-l3{transition:transform .35s ease-out}
#g-box .ad-art .ad-l0{transform:translate(calc(var(--px,0) * -4px),calc(var(--py,0) * -3px))}
#g-box .ad-art .ad-l1{transform:translate(calc(var(--px,0) * 3px),calc(var(--py,0) * 2px))}
#g-box .ad-art .ad-l2{transform:translate(calc(var(--px,0) * 7px),calc(var(--py,0) * 5px))}
#g-box .ad-art .ad-l3{transform:translate(calc(var(--px,0) * 12px),calc(var(--py,0) * 8px))}


#g-box .ad-hl,#g-box .ad-rows{animation:adRows 6s cubic-bezier(.6,0,.3,1) infinite}
#g-box .ad-tick{stroke-dasharray:1;stroke-dashoffset:1;animation:adRows 6s cubic-bezier(.6,0,.3,1) infinite,adTick 2s ease-out infinite}
#g-box .ad-hand{transform-box:fill-box;transform-origin:0 0;animation:adTap 2s ease-in-out infinite}
@keyframes adRows{0%,22%{transform:translateY(0)}33%,55%{transform:translateY(28px)}66%,88%{transform:translateY(56px)}100%{transform:translateY(0)}}
@keyframes adTick{0%,8%{stroke-dashoffset:1}22%,60%{stroke-dashoffset:0}66%,100%{stroke-dashoffset:1}}
@keyframes adTap{0%,100%{transform:translate(0,0) scale(1)}8%{transform:translate(-3px,-2px) scale(.88)}16%{transform:translate(0,0) scale(1)}}


#g-box .ad-sbody{max-width:720px;margin:0 auto;text-align:center}
#g-box .ad-sbody .pn-tag{margin-left:auto;margin-right:auto}
#g-box .ad-stage{display:flex;flex-direction:column;align-items:center;margin-top:4px}

#g-box .ad-stage{padding-top:18px}
#g-box .ad-pit{position:relative;width:210px;margin:0 auto -26px}
#g-box .ad-shadow{position:absolute;left:50%;top:79%;width:66%;height:10px;margin-left:-33%;border-radius:50%;background:rgba(1,33,47,.45);pointer-events:none}
#g-box .ad-mover{position:relative;transform-origin:50% 54%;will-change:transform}
#g-box .ad-face{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

#g-box .ad-grip{position:absolute;left:50%;top:16%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;z-index:1}
#g-box .ad-grab .ad-grip{cursor:grabbing}
#g-box .ad-face:focus-visible{outline:3px solid #FDBF2B;outline-offset:6px;border-radius:50%}
#g-box .ad-big{display:block;width:100%;height:auto;overflow:visible;animation:adFloat 4.5s ease-in-out infinite}

#g-box .ad-big .ad-peyes{translate:calc(var(--ex,0) * 5px) calc(var(--ey,0) * 4px);transition:translate .25s ease-out}
#g-box .ad-big .ad-pface{translate:calc(var(--ex,0) * 2px + var(--fx,0px)) calc(var(--ey,0) * 1.6px);transition:translate .3s ease-out}
#g-box .ad-big .ad-pring{translate:calc(var(--ex,0) * 1px + var(--fx,0px) * .4) calc(var(--ey,0) * .8px);transition:translate .35s ease-out}

#g-box .ad-big .ad-peyes ellipse{transform-box:fill-box;transform-origin:center;animation:adBlink 4.6s infinite;transition:scale .2s ease-out,rotate .2s ease-out}
#g-box .ad-big .ad-peyes ellipse+ellipse{animation-delay:.03s}

#g-box .ad-stage[data-mood=think] .ad-pant{animation:adWob2 1.2s ease-in-out infinite}
#g-box .ad-stage[data-mood=think] .ad-pface{animation:adLay1 2.4s ease-in-out infinite}
#g-box .ad-stage[data-mood=think] .ad-pring{animation:adLay2 2.4s ease-in-out infinite}

#g-box .ad-stage[data-mood=listen] .ad-face{transform:translateY(5px) scale(1.03);transition:transform .3s ease-out}

#g-box .ad-stage[data-mood=happy] .ad-peyes ellipse{scale:1.15 .42}

#g-box .ad-face.ad-bob{animation:adBob .5s ease-out}
#g-box .ad-face.ad-poke{animation:adPoke .45s ease-out}
#g-box .ad-face.ad-spin{animation:adPoke .45s ease-out}
#g-box .ad-face.ad-spin .ad-pant{animation:adSpin .8s ease-in-out,adWob 3s ease-in-out .8s infinite}
@keyframes adFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes adBlink{0%,96%,100%{transform:scaleY(1)}97.6%{transform:scaleY(.1)}}
@keyframes adBob{0%{transform:none}35%{transform:translateY(-8px) rotate(-2deg)}70%{transform:translateY(2px)}100%{transform:none}}
@keyframes adPoke{0%{transform:none}30%{transform:scale(1.08,.9)}60%{transform:scale(.96,1.05)}100%{transform:none}}
@keyframes adSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

#g-box .ad-say{position:relative;margin:14px auto 0;width:100%;max-width:560px;font-size:18px;padding:16px 4px 12px;border-top:1.5px solid rgba(254,254,250,.35);border-bottom:1.5px solid rgba(254,254,250,.35);min-height:calc(3 * 1.55em + 31px);display:grid;align-content:center;color:#FEFEFA;text-align:center}
#g-box .ad-sub{margin:0;font-size:1em;font-weight:700;line-height:1.55}

#g-box .ad-me{position:absolute;left:10px;top:-12px;margin:0;max-width:calc(100% - 40px);padding:1px 10px;border-radius:999px;background:#FDBF2B;color:#033652;font-size:13px;font-weight:700;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#g-box .ad-me:empty{display:none}

#g-box .ad-spk{--snd-h:20px;display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 8px;border:0;border-radius:999px;background:transparent;color:rgba(254,254,250,.7);font-size:13px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#g-box .ad-spk:hover{color:#FEFEFA}
#g-box .ad-spk:focus-visible{outline:3px solid #FDBF2B;outline-offset:2px}
#g-box .ad-say.ad-wait .ad-sub::before{content:"● ● ●";display:inline-block;font-size:12px;letter-spacing:.3em;color:rgba(254,254,250,.6);animation:adDots 1.1s ease-in-out infinite}
#g-box .ad-new{animation:adIn .3s ease-out both}
@keyframes adDots{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes adIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

#g-box .ad-quick.ad-quick{display:flex;flex-wrap:wrap;justify-content:center;margin-top:12px;gap:6px}
#g-box .ad-quick.ad-quick .qchip{width:auto;flex:0 1 auto;min-height:36px;padding:4px 14px;gap:0;border-radius:999px;border:1.5px solid rgba(254,254,250,.4);background:transparent;box-shadow:none;color:#FEFEFA;font-size:14px;line-height:1.3;animation:adIn .3s ease-out both;transition:border-color .2s,background-color .2s,color .2s}
#g-box .ad-quick .qchip:hover,#g-box .ad-quick .qchip:focus-visible{border-color:#FDBF2B;background:rgba(253,191,43,.12);color:#FDBF2B}
#g-box .ad-quick .qchip::before{display:none}
#g-box .ad-quick:empty{display:none}
#g-box .ad-in{display:flex;gap:8px;max-width:560px;margin:14px auto 0}
#g-box .ad-in[hidden]{display:none}
#g-box .ad-in input{flex:1;min-width:0;min-height:48px;padding:0 18px;border-radius:999px;border:2px solid rgba(254,254,250,.45);background:rgba(3,54,82,.6);color:#FEFEFA;font:inherit;font-size:16px}
#g-box .ad-in input::placeholder{color:rgba(254,254,250,.6);font-size:15px}
#g-box .ad-in input:focus{outline:none;border-color:#FDBF2B}
#g-box .ad-send{flex:none;min-height:48px;padding:0 20px;border-radius:999px;border:0;background:#FDBF2B;color:#033652;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
#g-box .ad-foot{margin:10px 0 0;font-size:14px;color:rgba(254,254,250,.65)}
#g-box .ad-links{justify-content:center;margin-top:6px}
@media (min-width:900px){
  #g-box .ad-stage{padding-top:30px}
  #g-box .ad-pit{width:290px;margin-bottom:-36px}
  #g-box .ad-say{font-size:20px}
}



#g-box .ad-sum{background:var(--pn-glass-bg);border:var(--pn-glass-bd);box-shadow:var(--pn-glass-sh);color:#FEFEFA;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#g-box .ad-sum{margin-top:4px;padding:16px 18px;border-radius:18px;animation:adIn .3s ease-out both}
#g-box .ad-sum dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center}
#g-box .ad-sum dt{font-size:15px;font-weight:700;color:rgba(254,254,250,.75)}
#g-box .ad-sum dd{margin:0}
#g-box .ad-sum .ad-from{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:rgba(253,191,43,.18);color:#FDBF2B;font-size:14px;font-weight:700;line-height:1.6;vertical-align:1px}
#g-box .ad-sum input{width:100%;min-height:40px;padding:0 12px;border-radius:10px;border:var(--pn-field-bd);background:var(--pn-field-bg);color:#FEFEFA;font:inherit;font-size:15px}
#g-box .ad-sum input::placeholder{color:rgba(254,254,250,.6)}
#g-box .ad-sum input:focus{outline:none;border-color:#FDBF2B}
#g-box .ad-sum .ad-note{margin:12px 0 0;font-size:15px;line-height:1.6;color:rgba(254,254,250,.85)}
#g-box .ad-sum .qrow{margin-top:14px}
#g-box .ad-sum .qrow .act{background:#FDBF2B;color:#033652}
#g-box .ad-sum .qskip.pn-back{margin-top:12px;color:#FEFEFA;border-color:rgba(254,254,250,.8)}

@media (max-width:560px){
  #g-box .ad-sum dl{grid-template-columns:1fr;gap:2px}
  #g-box .ad-sum dd{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){
  #g-box .ad-big,#g-box .ad-face,#g-box .ad-new,#g-box .ad-quick .qchip,#g-box .ad-say.ad-wait .ad-sub::before,#g-box .ad-sum,#g-box .ad-hl,#g-box .ad-rows,#g-box .ad-hand{animation:none}
  #g-box .ad-tick{animation:none;stroke-dashoffset:0}
  #g-box .ad-art *{transition:none}
  #g-box .ad-bub.ad-bub{transition:none}
  #g-box .ad-bub.ad-bub:hover{scale:none}
  #g-box .ad-big *,#g-box .ad-stage[data-mood=listen] .ad-face{animation:none !important;transition:none}
}


#g-box .ad-bub .ad-art{width:90%;max-width:none;flex:none;margin:-10px 0 0}
#g-box .ad-bub.pn-b0 .ad-art{width:96%;margin:-30px 0 -16px}

#g-box .ad-bub.ad-bub b{font-size:19px;line-height:1.2}
#g-box .ad-bub.ad-bub>span{font-size:15px;line-height:1.4;opacity:.85}
@media (min-width:900px){ #g-box .ad-bub.ad-bub b{font-size:23px} #g-box .ad-bub.ad-bub>span{font-size:15px} }
#g-box .ad-bub.pn-b0 .ad-art{rotate:-7deg}

#g-box .ad-bub.ad-bub{aspect-ratio:auto;border:0;border-radius:24px;background:none;box-shadow:none;padding:6px 12px 10px;transition:scale .25s ease-out}
#g-box .ad-bub.ad-bub::before,#g-box .ad-bub.ad-bub::after{display:none}
#g-box .ad-bub.ad-bub:hover{scale:1.04}
#g-box .ad-bub.ad-bub:focus-visible{outline-offset:2px}
#g-box .ad-fig .ad-bub.pn-b0 .ad-art{margin:-14px 0 -10px}
#g-box .ad-bub.pn-b1 .ad-art{rotate:6deg}

#g-box .ad-bub.ad-off .ad-art{filter:grayscale(.7);opacity:.7}
#g-box .ad-bub.ad-off .ad-peyes ellipse{transform-box:fill-box;transform-origin:center;transform:scaleY(.18)}
#g-box .ad-bub.ad-off .ad-pant{animation:none}
#g-box .ad-bub.ad-off b,#g-box .ad-bub.ad-off>span{opacity:.75}
#g-box .ad-zz{display:inline-block;margin-left:6px;padding:0 8px;border-radius:999px;border:1.5px solid rgba(254,254,250,.55);font-style:normal;font-size:13px;font-weight:700;line-height:1.6;vertical-align:3px;opacity:.9}
#g-box .ad-bub.ad-main{animation:adBreath 2.8s ease-in-out infinite}
@keyframes adBreath{0%,100%{scale:1}50%{scale:1.05}}
#g-box .ad-offmsg{min-height:1.5em;margin:4px 0 0;text-align:center;font-size:15px;font-weight:700;color:#FDBF2B}
@media (prefers-reduced-motion: reduce){ #g-box .ad-bub.ad-main{animation:none} }

#g-box .ad-sec *{transform-box:view-box}
#g-box .ad-phead{transform-origin:0 30px;animation:adTilt 5s ease-in-out infinite}
#g-box .ad-pant{transform-origin:0 -26px;animation:adWob 3s ease-in-out infinite}
#g-box .ad-bub:hover .ad-pant{animation:adWob2 1.2s ease-in-out infinite}
#g-box .ad-bub:hover .ad-pface{animation:adLay1 2.4s ease-in-out infinite}
#g-box .ad-bub:hover .ad-pring{animation:adLay2 2.4s ease-in-out infinite}
@keyframes adWob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes adWob2{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
@keyframes adTilt{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes adLay1{0%,100%{transform:translate(1.6px,-.8px)}50%{transform:translate(-1.6px,-.8px)}}
@keyframes adLay2{0%,100%{transform:translate(.7px,-.3px)}50%{transform:translate(-.7px,-.3px)}}
@media (prefers-reduced-motion:reduce){ #g-box .ad-sec *{animation:none !important;transition:none} }


#g-box .ad-stage.ad-sim .ad-big,#g-box .ad-stage.ad-sim .ad-pant{animation:none}
#g-box .ad-stage.ad-sim .ad-big{transform-origin:50% 81%}

#g-box .ad-stage[data-face] .ad-big .ad-peyes ellipse{animation:none}
#g-box .ad-stage[data-face=wide] .ad-big .ad-peyes ellipse{scale:1.25 1.25}
#g-box .ad-stage[data-face=scared] .ad-big .ad-peyes ellipse{scale:1.3 1.5}
#g-box .ad-stage[data-face=squint] .ad-big .ad-peyes ellipse{scale:1.35 .3;rotate:22deg}
#g-box .ad-stage[data-face=squint] .ad-big .ad-peyes ellipse+ellipse{rotate:-22deg}
#g-box .ad-stage[data-face=shut] .ad-big .ad-peyes ellipse{scale:1.2 .12;transition-duration:.06s}
#g-box .ad-stage.ad-dizzy .ad-phead{animation:adDizzy 1.4s ease-in-out}
#g-box .ad-stage.ad-dizzy .ad-big .ad-peyes ellipse{scale:.7 .7}
@keyframes adDizzy{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}

#g-box .ad-bub.ad-off:hover .ad-pant,#g-box .ad-bub.ad-off .ad-phead{animation:none}
#g-box .ad-bub.ad-main:hover{animation-play-state:paused}


#g-box .ad-pantu{transform-origin:0 -30px}
#g-box .ad-big .ad-pant,#g-box .ad-big .ad-pantu{transition:rotate .35s ease-out}   
#g-box .ad-pmad,#g-box .ad-pzz{opacity:0;transition:opacity .25s}
#g-box .ad-pmad{transform-origin:31px -31px}
#g-box .ad-stage[data-face=struggle] .ad-big .ad-peyes ellipse{scale:1.35 .28;rotate:22deg}
#g-box .ad-stage[data-face=struggle] .ad-big .ad-peyes ellipse+ellipse{rotate:-22deg}
#g-box .ad-stage[data-face=effort] .ad-big .ad-peyes ellipse{scale:1.3 .26;rotate:18deg}
#g-box .ad-stage[data-face=effort] .ad-big .ad-peyes ellipse+ellipse{rotate:-18deg}
#g-box .ad-stage[data-face=angry] .ad-big .ad-peyes ellipse{scale:1.2 1.05}
#g-box .ad-stage[data-face=angry] .ad-big .ad-pmad{opacity:1;animation:adMad .8s ease-in-out infinite}
@keyframes adMad{0%,100%{scale:.9}50%{scale:1.15}}

#g-box .ad-stage.ad-sleep .ad-big{animation:adSnore 3.4s ease-in-out infinite;transform-origin:50% 81%}
#g-box .ad-stage.ad-sleep .ad-big .ad-peyes ellipse{animation:none;scale:1.15 .14;translate:0 2px}
#g-box .ad-stage.ad-sleep .ad-pant{animation:none;rotate:30deg}
#g-box .ad-stage.ad-sleep .ad-pantu{rotate:24deg}
#g-box .ad-stage.ad-sleep .ad-pzz{opacity:1}
#g-box .ad-stage.ad-sleep .ad-pzz text{transform-box:view-box;animation:adZz 3s linear infinite;opacity:0}
#g-box .ad-stage.ad-sleep .ad-pzz text:nth-child(2){animation-delay:-1s}
#g-box .ad-stage.ad-sleep .ad-pzz text:nth-child(3){animation-delay:-2s}
@keyframes adSnore{0%,100%{transform:rotate(5deg) scale(1,1)}50%{transform:rotate(6deg) scale(1.02,.975)}}
@keyframes adZz{0%{translate:0 0;opacity:0}30%{opacity:1}70%{opacity:1}100%{translate:18px -26px;opacity:0}}
#g-box .ad-stage.ad-wake .ad-big{animation:adWake .5s ease-out}
#g-box .ad-stage.ad-sim.ad-wake .ad-big{animation:none}
#g-box .ad-stage.ad-wake .ad-big .ad-peyes ellipse{animation:none;scale:1.25 1.25}
@keyframes adWake{0%{transform:none}40%{transform:translateY(-10px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){
  #g-box .ad-big .ad-pant,#g-box .ad-big .ad-pantu{transition:none}
  #g-box .ad-stage.ad-sleep .ad-big,#g-box .ad-stage.ad-wake .ad-big,#g-box .ad-stage.ad-sleep .ad-pzz text,#g-box .ad-stage[data-face=angry] .ad-big .ad-pmad{animation:none}
  #g-box .ad-stage.ad-sleep .ad-pzz text{opacity:1}
  #g-box .ad-stage.ad-sleep .ad-pzz text:nth-child(2){translate:6px -9px}
  #g-box .ad-stage.ad-sleep .ad-pzz text:nth-child(3){translate:12px -18px}
}


#g-box .ad-pblush{opacity:0;transition:opacity .6s ease-in-out}
#g-box .ad-stage[data-emo]:not([data-face]) .ad-big .ad-peyes ellipse{animation:none;transition:scale .2s ease-out,rotate .2s ease-out,translate .2s ease-out}
#g-box .ad-stage[data-emo=shy]:not([data-face]) .ad-big .ad-peyes ellipse,#g-box .ad-stage[data-emo=joy]:not([data-face]) .ad-big .ad-peyes ellipse{scale:1.15 .42;translate:0 1.5px}
#g-box .ad-stage[data-emo=shy]:not([data-face]) .ad-big .ad-pblush{opacity:.85}
#g-box .ad-stage[data-emo=pout]:not([data-face]) .ad-big .ad-peyes ellipse{scale:1.1 .45;translate:0 1.2px}
#g-box .ad-stage[data-emo=pout]:not([data-face]) .ad-big .ad-pblush{opacity:.51}
#g-box .ad-stage[data-emo=nervous]:not([data-face]) .ad-big .ad-peyes ellipse{scale:1.2 1.2}
#g-box .ad-stage[data-emo=nervous]:not([data-face]) .ad-big .ad-peyes{translate:1.5px -3.2px}
#g-box .ad-stage[data-emo=stretch]:not([data-face]) .ad-big .ad-peyes ellipse{scale:1.3 .22}
#g-box .ad-stage[data-emo=drowsy]:not([data-face]) .ad-big .ad-peyes ellipse{scale:1.1 .4;translate:0 1.6px}

@media (prefers-reduced-motion:reduce){ #g-box .ad-stage[data-emo] .ad-big .ad-peyes ellipse{transition:none} #g-box .ad-big .ad-pblush{transition:opacity .6s ease-in-out} }