#stp-mascot .mxp{display:flex;flex-direction:column;gap:14px;width:100%;max-width:520px;margin:22px auto 0;text-align:left;color:#f2f2f2}
#stp-mascot .mxp *{box-sizing:border-box}
#stp-mascot .mx-card{position:relative;padding:4px 20px;border-radius:22px;background:linear-gradient(180deg,#262628 0%,#1b1b1d 100%);border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.45),0 20px 40px -18px rgba(0,0,0,.8)}
#stp-mascot .mx-h{margin:0;padding:16px 0 2px;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:#8e8e93}
#stp-mascot .mx-row{position:relative;display:flex;align-items:center;gap:16px;padding:15px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#stp-mascot .mx-row+.mx-row,#stp-mascot .mx-row+.mx-fsec{border-top:1px solid rgba(255,255,255,.06)}
#stp-mascot .mx-rq{cursor:default}
#stp-mascot .mx-t{flex:1;min-width:0}
#stp-mascot .mx-t b{display:block;font-size:15.5px;font-weight:600;line-height:1.4;color:#f5f5f5}
#stp-mascot .mx-t small{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;font-weight:400;color:#8e8e93}
#stp-mascot .mx-row input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#stp-mascot .mx-sw{flex:none;position:relative;width:50px;height:30px;border-radius:999px;background:#3a3a3d;box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06);transition:background .25s,box-shadow .25s}
#stp-mascot .mx-sw::after{content:'';position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#fff,#e4e4e8);box-shadow:0 2px 6px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.3,1.5,.5,1),width .15s}
#stp-mascot .mx-row input:checked+.mx-sw{background:linear-gradient(180deg,#ff4d55,#d10a15);box-shadow:inset 0 1px 2px rgba(80,0,4,.5),0 0 16px rgba(229,9,20,.38)}
#stp-mascot .mx-row input:checked+.mx-sw::after{transform:translateX(20px)}
#stp-mascot .mx-row:active .mx-sw::after{width:28px}
#stp-mascot .mx-row:active input:checked+.mx-sw::after{transform:translateX(16px)}
#stp-mascot .mx-row input:focus-visible+.mx-sw{outline:2px solid #fff;outline-offset:3px}
#stp-mascot .mx-fsec{padding:14px 0 18px;transition:opacity .2s}
#stp-mascot .mx-subc:has(#msub:not(:checked)) .mx-fsec{opacity:.45}
#stp-mascot .mx-fl{margin:0 0 8px;font-size:12.5px;font-weight:600;color:#8e8e93}
#stp-mascot .mx-font{position:relative}
#stp-mascot .mx-sr{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}
#stp-mascot .mx-fbtn{width:100%;height:52px;display:flex;align-items:center;gap:10px;padding:0 18px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:linear-gradient(180deg,#0d0d0e,#151517);box-shadow:inset 0 2px 6px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.06);color:#fff;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
#stp-mascot .mx-fbtn:hover{border-color:rgba(255,255,255,.2)}
#stp-mascot .mx-font.open .mx-fbtn,#stp-mascot .mx-fbtn:focus-visible{outline:0;border-color:#e50914;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 3px rgba(229,9,20,.28)}
#stp-mascot .mx-fn{font-size:19px;line-height:1.2;white-space:nowrap}
#stp-mascot .mx-fd{flex:1;min-width:0;font-family:'Sarabun',sans-serif;font-size:13px;color:#8e8e93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stp-mascot .mx-chev{flex:none;width:9px;height:9px;margin-right:2px;border-right:2px solid #9a9a9f;border-bottom:2px solid #9a9a9f;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
#stp-mascot .mx-font.open .mx-chev{transform:rotate(-135deg) translate(-2px,-2px)}
#stp-mascot .mx-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;max-height:324px;overflow:auto;padding:6px;border-radius:18px;background:rgba(33,33,36,.98);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 60px -8px rgba(0,0,0,.85),0 4px 14px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);scrollbar-width:thin;transform-origin:50% 0;animation:mxPop .2s cubic-bezier(.2,.9,.3,1.1)}
#stp-mascot .mx-font.up .mx-menu{top:auto;bottom:calc(100% + 8px);transform-origin:50% 100%}
@keyframes mxPop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
#stp-mascot .mx-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"s c" "d c";align-items:center;column-gap:12px;width:100%;padding:10px 14px;border:0;border-radius:12px;background:transparent;color:#fff;text-align:left;cursor:pointer;transition:background .12s}
#stp-mascot .mx-os{grid-area:s;font-size:22px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stp-mascot .mx-od{grid-area:d;font-family:'Sarabun',sans-serif;font-size:12px;line-height:1.4;color:#8e8e93}
#stp-mascot .mx-ck{grid-area:c;width:20px;height:20px;border-radius:50%;opacity:0;background:#e50914 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5'/%3E%3C/svg%3E") center/contain no-repeat;box-shadow:0 0 10px rgba(229,9,20,.5)}
#stp-mascot .mx-opt:hover,#stp-mascot .mx-opt:focus-visible{outline:0;background:rgba(255,255,255,.08)}
#stp-mascot .mx-opt.mx-cur{background:rgba(229,9,20,.16)}
#stp-mascot .mx-opt.mx-cur .mx-ck{opacity:1}
#stp-mascot .mx-stage{margin-top:12px;padding:22px 14px;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:radial-gradient(120% 150% at 50% 0%,#2f2f33 0,#121213 72%);box-shadow:inset 0 2px 8px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.05)}
#stp-mascot .mx-prev{min-width:220px;max-width:100%;padding:8px 24px;text-align:center;color:#fff;font-size:24px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(180deg,#ea3030,#b71616);border-radius:6px;text-shadow:0 2px 4px rgba(60,0,0,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -6px rgba(183,22,22,.6),0 2px 4px rgba(0,0,0,.45)}
#stp-mascot .mx-seg{flex:none;display:flex;gap:2px;padding:3px;border-radius:12px;background:#0c0c0d;box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.06)}
#stp-mascot .mx-seg button{border:0;border-radius:9px;background:transparent;color:#9a9a9f;padding:7px 15px;font-size:14px;font-weight:600;line-height:1.3;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
#stp-mascot .mx-seg button:hover{color:#fff}
#stp-mascot .mx-seg button.mx-sel{color:#fff;background:linear-gradient(180deg,#4a4a4e,#343437);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 6px rgba(0,0,0,.55)}
#stp-mascot .mx-seg button:focus-visible{outline:2px solid #fff;outline-offset:1px}
#stp-mascot .mx-act{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}
#stp-mascot .mx-go{width:100%;max-width:380px;height:58px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:17px;color:#fff;font-size:18px;font-weight:700;letter-spacing:.01em;cursor:pointer;background:linear-gradient(180deg,#ff4a52 0%,#e50914 55%,#c10710 100%);text-shadow:0 1px 2px rgba(80,0,4,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.16),0 4px 0 #7a0509,0 16px 30px -8px rgba(229,9,20,.6);transition:transform .15s,box-shadow .15s,filter .15s}
#stp-mascot .mx-go:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.16),0 6px 0 #7a0509,0 20px 34px -8px rgba(229,9,20,.7)}
#stp-mascot .mx-go:active{transform:translateY(3px);filter:none;box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 1px 0 #7a0509,0 5px 12px -3px rgba(229,9,20,.4)}
#stp-mascot .mx-go:focus-visible{outline:2px solid #fff;outline-offset:3px}
#stp-mascot .mx-go:disabled{opacity:.5;cursor:default;transform:none;filter:grayscale(.3)}
#stp-mascot .mx-go.mx-busy{text-shadow:none;background:linear-gradient(180deg,#4a4a4e,#343437);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 0 #0b0b0c,0 14px 26px -8px rgba(0,0,0,.7)}
#stp-mascot .mx-note{font-size:12.5px;color:#8e8e93}
#stp-mascot .mx-note .n-b{display:none}
#stp-mascot .mxp:has(#mhw:checked) .n-a{display:none}
#stp-mascot .mxp:has(#mhw:checked) .n-b{display:inline}
@media(max-width:440px){#stp-mascot .mx-card{padding:2px 16px}#stp-mascot .mx-rq{flex-wrap:wrap}#stp-mascot .mx-seg{width:100%}#stp-mascot .mx-seg button{flex:1;padding:8px 6px}}
#stp-mascot .mxp{width:min(100%,440px);max-width:440px;align-self:center;align-items:stretch;margin-left:auto;margin-right:auto;gap:12px}
#stp-mascot .mxp>.mx-card,#stp-mascot .mxp>.mx-act{width:100%;max-width:none;align-self:stretch;margin-left:0;margin-right:0}
#stp-mascot .mx-card{padding:2px 18px}
#stp-mascot .mx-h{padding:12px 0 0}
#stp-mascot .mx-row{padding:12px 0}
#stp-mascot .mx-fsec{padding:12px 0 14px}
#stp-mascot .mx-fbtn{height:46px}
#stp-mascot .mx-stage{margin-top:10px;padding:14px 12px}
#stp-mascot .mx-prev{font-size:22px;padding:6px 20px}
#stp-mascot .mx-go{height:52px}
#stp-mascot .mxp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px;width:min(100%,880px);max-width:880px}
#stp-mascot .mxp>.mx-act{grid-column:1/-1;margin-top:4px}
#stp-mascot .mxp>.mx-card{border-radius:16px;padding:0 13px}
#stp-mascot .mx-h{padding:10px 0 0;font-size:11.5px}
#stp-mascot .mx-row{gap:10px;padding:9px 0}
#stp-mascot .mx-t b{font-size:13.5px;line-height:1.35}
#stp-mascot .mx-t small{font-size:11px;line-height:1.4}
#stp-mascot .mx-sw{width:40px;height:24px}
#stp-mascot .mx-sw::after{left:2px;top:2px;width:20px;height:20px}
#stp-mascot .mx-row input:checked+.mx-sw::after{transform:translateX(16px)}
#stp-mascot .mx-row:active .mx-sw::after{width:23px}
#stp-mascot .mx-row:active input:checked+.mx-sw::after{transform:translateX(13px)}
#stp-mascot .mx-fsec{padding:9px 0 11px}
#stp-mascot .mx-fl{font-size:11.5px;margin-bottom:5px}
#stp-mascot .mx-fbtn{height:38px;padding:0 12px;border-radius:11px}
#stp-mascot .mx-fn{font-size:15px}
#stp-mascot .mx-fd{font-size:11.5px}
#stp-mascot .mx-stage{margin-top:8px;padding:10px 8px;border-radius:11px}
#stp-mascot .mx-prev{min-width:0;font-size:16px;padding:4px 12px}
#stp-mascot .mx-os{font-size:18px}
#stp-mascot .mx-rq{flex-wrap:wrap;gap:6px}
#stp-mascot .mx-seg{width:100%;border-radius:10px}
#stp-mascot .mx-seg button{flex:1;padding:6px 4px;font-size:13px}
#stp-mascot .mx-go{max-width:300px;height:46px;font-size:16px;border-radius:14px}
@media(max-width:820px){#stp-mascot .mxp{grid-template-columns:minmax(0,1fr);width:min(100%,400px)}}
#stp-mascot .mx-fl2{margin-top:12px}
#stp-mascot .mx-sty{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px;margin-bottom:12px}
#stp-mascot .mx-sb{aspect-ratio:1;min-height:32px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:linear-gradient(180deg,#3a3a3d,#2a2a2d);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 4px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s,border-color .15s}
#stp-mascot .mx-sb span{font-family:'Sarabun',sans-serif;font-size:15px;font-weight:800;line-height:1;paint-order:stroke fill}
#stp-mascot .mx-sb:hover{transform:translateY(-1px)}
#stp-mascot .mx-sb:focus-visible{outline:2px solid #fff;outline-offset:2px}
#stp-mascot .mx-sb.mx-sel{border-color:#e50914;box-shadow:0 0 0 2px rgba(229,9,20,.45),0 4px 10px -2px rgba(229,9,20,.4)}
#stp-mascot .mx-sb[data-sty=paper]{background:linear-gradient(180deg,#ea3030,#b71616)}
#stp-mascot .mx-sb[data-sty=paper] span{color:#fff;text-shadow:0 1px 2px rgba(60,0,0,.6)}
#stp-mascot .mx-prev{paint-order:stroke fill}
#stp-mascot .mx-sb[data-sty=wb] span{color:#fff;-webkit-text-stroke:.16em #000;text-shadow:none}
#stp-mascot .mx-prev[data-sty=wb]{color:#fff;-webkit-text-stroke:.16em #000;text-shadow:none;background:none;box-shadow:none;border-radius:0}
#stp-mascot .mx-sb[data-sty=bw] span{color:#000;-webkit-text-stroke:.16em #fff;text-shadow:none}
#stp-mascot .mx-prev[data-sty=bw]{color:#000;-webkit-text-stroke:.16em #fff;text-shadow:none;background:none;box-shadow:none;border-radius:0}
#stp-mascot .mx-sb[data-sty=sh] span{color:#fff;-webkit-text-stroke:0;text-shadow:0 .07em .14em rgba(0,0,0,.85)}
#stp-mascot .mx-prev[data-sty=sh]{color:#fff;-webkit-text-stroke:0;text-shadow:0 .07em .14em rgba(0,0,0,.85);background:none;box-shadow:none;border-radius:0}
#stp-mascot .mx-sb[data-sty=wbs] span{color:#fff;-webkit-text-stroke:.12em #000;text-shadow:0 .07em .12em rgba(0,0,0,.6)}
#stp-mascot .mx-prev[data-sty=wbs]{color:#fff;-webkit-text-stroke:.12em #000;text-shadow:0 .07em .12em rgba(0,0,0,.6);background:none;box-shadow:none;border-radius:0}
#stp-mascot .mx-sb[data-sty=yl] span{color:#ffe600;-webkit-text-stroke:.12em #000;text-shadow:0 .07em .12em rgba(0,0,0,.6)}
#stp-mascot .mx-prev[data-sty=yl]{color:#ffe600;-webkit-text-stroke:.12em #000;text-shadow:0 .07em .12em rgba(0,0,0,.6);background:none;box-shadow:none;border-radius:0}
#stp-mascot .mx-sb[data-sty=rw] span{color:#e50914;-webkit-text-stroke:.14em #fff;text-shadow:0 .07em .12em rgba(0,0,0,.5)}
#stp-mascot .mx-prev[data-sty=rw]{color:#e50914;-webkit-text-stroke:.14em #fff;text-shadow:0 .07em .12em rgba(0,0,0,.5);background:none;box-shadow:none;border-radius:0}
#stp-mascot .mx-stage{position:relative}
#stp-mascot .mx-cap{position:absolute;left:10px;top:7px;max-width:calc(100% - 20px);font-size:11px;line-height:1.3;color:#8e8e93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stp-mascot .mx-prev.mx-anim{animation:mxPop 2s infinite both;will-change:transform,opacity}
#stp-mascot .mx-prev.mx-anim[data-sty=paper]{animation-name:mxPaper}
@keyframes mxPop{0%{opacity:0;transform:translateY(14px) scale(.88)}12%{opacity:1;transform:translateY(-2px) scale(1.04)}20%{opacity:1;transform:none}88%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes mxPaper{0%{opacity:0;transform:translateX(-60px) rotate(-5deg) scale(.55,.7)}14%{opacity:1;transform:translateX(6px) rotate(1deg) scale(1.03,1.02)}22%{opacity:1;transform:translateX(0) rotate(-.5deg) scale(1)}34%{transform:translate(1px,-1px) rotate(.3deg)}46%{transform:translate(-1px,1px) rotate(-.5deg)}58%{transform:translate(1px,0) rotate(.4deg)}70%{transform:translate(-1px,-1px) rotate(-.3deg)}82%{opacity:1;transform:translate(0,1px) rotate(.2deg)}100%{opacity:0;transform:scale(.96)}}
@media(prefers-reduced-motion:reduce){#stp-mascot .mxp *{transition:none!important;animation:none!important}}