.px-goth-skull{display:none}
/* pixel cat on music buttons */
.has-px-cat{position:relative;overflow:visible!important}
.px-cat{position:absolute;left:50%;bottom:calc(100% - 4px);width:56px;height:46px;margin-left:-28px;pointer-events:none;z-index:3;transform-origin:50% 100%;animation:pxSway 1.35s ease-in-out infinite;filter:drop-shadow(0 1px 0 #fff)}
.px-cat canvas{position:absolute;left:0;width:56px;image-rendering:pixelated}
.px-cat .px-head{top:0;height:28px;transform-origin:50% 100%}
.px-cat .px-body,.px-cat .px-tail{top:28px;height:18px}
.px-cat .px-tail{transform-origin:85% 0}
.px-cat-on .px-cat{animation:pxHop2 .4s steps(1,end) infinite}
.px-cat-on .px-cat .px-head{animation:pxBob 1.1s steps(11,end) infinite}
.px-cat-on .px-cat .px-tail{animation:pxTail .88s steps(2,jump-none) infinite}
.sidebar-cd .px-cat,.combo-fcd .px-cat{transform:scale(.8)}
.combo-fcd .px-cat{bottom:calc(100% - 8px)}
@keyframes pxSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
/* rhythm studied from the reference gif (100ms frames): 2-frame up/down body bob = .4s, head sway+tilt loop = 1.1s */
@keyframes pxHop2{0%{transform:translateY(0)}50%{transform:translateY(2px) scaleY(.96)}}
@keyframes pxBob{0%,100%{transform:translateX(0) rotate(0)}27%{transform:translateX(3px) rotate(6deg)}45%{transform:translateX(1px) rotate(2deg)}73%{transform:translateX(-3px) rotate(-6deg)}91%{transform:translateX(-1px) rotate(-2deg)}}
@keyframes pxTail{0%{transform:rotate(-8deg)}100%{transform:rotate(10deg)}}
/* pixel add-to-bag */
.px-cartfx{position:absolute;width:0;height:0;z-index:9999;pointer-events:none}
.px-cartfx canvas{position:absolute;image-rendering:pixelated}
.px-cart{width:30px;height:30px;left:14px;top:-34px;animation:pxCart .9s ease-out both}
.px-item{width:21px;height:21px;left:-36px;top:-24px;animation:pxHop .5s cubic-bezier(.3,0,.6,1) both}
.px-sp{width:15px;height:15px;opacity:0;animation:pxSpark .45s steps(3) .42s both}
.px-sp.s1{left:8px;top:-46px}.px-sp.s2{left:36px;top:-50px;animation-delay:.48s}.px-sp.s3{left:44px;top:-26px;animation-delay:.52s}
.px-plus{position:fixed;z-index:9999;pointer-events:none;display:flex;align-items:center;gap:2px;transform:translate(-50%,-100%);color:#FF5FA2;font:900 12px Inconsolata,monospace;text-shadow:0 0 2px #fff,0 0 2px #fff;animation:pxPlus .75s ease-out both}
.px-plus canvas{width:14px;height:12px;image-rendering:pixelated}
.bag-count.px-pop{display:inline-block;animation:pxPop .35s steps(3)}
@keyframes pxCart{0%{opacity:0;transform:translateY(4px)}12%{opacity:1;transform:none}55%{transform:none}62%{transform:translateY(3px) scaleY(.9)}70%{transform:none}85%{opacity:1}100%{opacity:0}}
@keyframes pxHop{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}50%{transform:translate(25px,-26px)}90%{opacity:1;transform:translate(52px,-2px) scale(.8)}100%{opacity:0;transform:translate(54px,2px) scale(.6)}}
@keyframes pxSpark{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
@keyframes pxPlus{0%{opacity:0;margin-top:4px}25%{opacity:1}100%{opacity:0;margin-top:-18px}}
@keyframes pxPop{50%{transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){
  .px-cat,.px-cat-on .px-cat .px-head,.px-cat-on .px-cat .px-tail{animation:none!important}
  .px-cartfx.rm canvas{animation:none!important}.px-cartfx.rm .px-item,.px-cartfx.rm .px-sp{display:none}
  .px-plus.rm{animation:none}.bag-count.px-pop{animation:none}
}
/* add-to-bag gel button (chrome bezel + white shine) */
.pp-cell{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.px-addbtn{position:relative;padding:3px;border:0;border-radius:999px;cursor:pointer;background:linear-gradient(180deg,#fff,#FFD6E8 45%,#FF5FA2 50%,#fff);box-shadow:0 2px 6px rgba(255,95,162,.35);outline:1.5px dashed #FF5FA2;outline-offset:3px}
.px-addbtn span{position:relative;display:block;padding:6px 14px;border-radius:999px;overflow:hidden;font:700 13px Inconsolata,monospace;letter-spacing:.04em;color:#FF5FA2;background:linear-gradient(180deg,#FFD6E8,#fff 60%,#FFD6E8);box-shadow:inset 0 -2px 4px rgba(255,95,162,.35)}
.px-addbtn span::before{content:"";position:absolute;left:8px;right:8px;top:1px;height:45%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.1))}
.px-addbtn:hover span{background:linear-gradient(180deg,#fff,#FFD6E8)}
.px-addbtn:active{transform:translateY(1px)}
.px-addbtn:focus-visible{outline-style:solid}
.px-bagdock{position:fixed;left:14px;bottom:14px;z-index:60;display:flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:999px;text-decoration:none;color:#FF5FA2;font:900 14px Inconsolata,monospace;
  background:linear-gradient(180deg,#fff,#FFD6E8 55%,#fff);border:2px solid #fff;box-shadow:0 0 0 2px #FF5FA2,0 3px 10px rgba(255,95,162,.35)}
.px-dockcart{width:22px;height:22px;image-rendering:pixelated}
.mini-player{margin-top:34px}
/* desktop: white sidebar background only (inner elements untouched) */
@media (min-width:769px){.page-layout>.sidebar{background:#fff!important;box-shadow:inset -2px 0 0 #FFD6E8}}
.sidebar-cd.has-px-cat{margin-top:46px}
/* slim made-in-norway footer badge, last item in sidebar */
html .sidebar .made-in-norway-badge{display:block;width:92px!important;max-width:60%!important;height:auto!important;margin:4px auto 12px!important;transform:none!important;order:9!important;opacity:.9}
/* chrome jelly tray behind sidebar mood swatches (from palette previews) */
html body .theme-switcher-inline{position:relative;align-items:center;margin:4px 6px;padding:6px 10px;border-radius:999px;
 background:linear-gradient(180deg,#fdfdff 0%,#e6e6ee 40%,#b8b8c8 55%,#e9e9f1 80%,#ffffff 100%);
 box-shadow:inset 0 2px 3px rgba(120,120,140,.35),inset 0 -2px 3px rgba(255,255,255,.9),0 1px 0 #fff,0 0 0 1px #c4c4d0}
html body .theme-switcher-inline::before{content:"";position:absolute;left:12px;right:12px;top:2px;height:40%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none}
html body .page-layout .theme-switcher-inline{box-sizing:border-box!important;display:flex!important;justify-content:center!important;align-items:center;gap:6px!important;
 width:fit-content!important;max-width:calc(100% - 16px)!important;margin:6px auto!important;padding:7px 12px!important;transform:none!important;left:auto!important;right:auto!important}
html body .theme-switcher-inline::before{z-index:0}
html body .theme-switcher-inline .theme-btn{position:relative;z-index:1;flex:none;margin:0!important}
html body .theme-switcher-inline .critter-buddy{z-index:1;flex:none;margin:0!important}
html body .page-layout .theme-switcher-inline{gap:4px!important;padding:7px 6px!important}
html body .theme-switcher-inline .critter-buddy{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important}
/* made-in-norway sticker on the about_me.txt window */
.has-norway-sticker{position:relative}
.norway-sticker{position:absolute;bottom:-30px;right:-12px;width:120px;height:auto;transform:rotate(6deg);z-index:2;image-rendering:pixelated;
 border:3px solid #fff;border-radius:6px;box-shadow:0 3px 8px rgba(255,95,162,.3);pointer-events:none}
@media (max-width:768px){.norway-sticker{width:88px;top:-26px;bottom:auto;right:-4px;border-width:2px}}
html body .sidebar .figurine-button{padding:8px 22px!important;justify-content:center!important;text-align:center}
/* phone: POPIPANTS FM directly under the hero (same single player) */
@media (max-width:768px){
 .home-page .main-content{display:flex;flex-direction:column}
 .home-page .main-content>*{order:2}
 .home-page .main-content>:is(.combo-mbar,.combo-fcd,.top-nav,.banner,script){order:0}
 .home-page .main-content>.px-teaser{order:1}
 .home-page .main-content>.px-cloud-divider{order:1;display:block}
 .home-page .main-content>.cd-section{order:1;padding-top:44px!important;padding-bottom:56px!important}
 .home-page .main-content>.content-section .section-tag{display:none}
}
/* bag button (top-right of header) */
.px-bagdock{display:none!important}
.px-bagbtn{position:relative;flex:none!important;display:inline-flex;align-items:center;justify-content:center;width:44px;height:38px;padding:0;border:3px solid transparent;border-radius:999px;cursor:pointer;
 background:radial-gradient(120% 100% at 50% 120%,#fff,#FFD6E8 50%,#FF9EC7) padding-box,linear-gradient(180deg,#fff,#d9d9e3 35%,#a9a9b8 55%,#f4f4f8 80%,#c4c4d0) border-box;box-shadow:inset 0 -4px 8px rgba(255,255,255,.9),0 3px 8px rgba(255,95,162,.25);margin-left:auto}
.px-bagbtn::before{content:"";position:absolute;left:8px;right:8px;top:1px;height:42%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.1));pointer-events:none}
.px-bagbtn .px-dockcart{width:20px;height:20px;image-rendering:pixelated;position:relative}
.px-bagbtn .bag-count{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#FF5FA2;color:#fff;font:900 11px/18px Inconsolata,monospace;box-shadow:0 0 0 2px #fff}
.combo-mbar .px-bagbtn{margin:0 10px 0 auto}
/* popi-bag.exe */
html body .bag-overlay .pc-popup{background:#fff!important;border:2px solid #FF5FA2!important;box-shadow:0 0 0 3px #FFD6E8,0 12px 30px rgba(255,95,162,.3)!important;max-width:400px;animation:nlIn .3s ease-out}
html body .bag-overlay.rm .pc-popup{animation:none}
html body .bag-overlay .pc-popup-titlebar{background:#FF5FA2!important;color:#fff!important}
html body .bag-overlay .pc-popup-body{background:#fff!important;color:#FF5FA2}
.bag-list{list-style:none;margin:0 0 10px;padding:0;max-height:50vh;overflow:auto}
.bag-list li{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:8px;border:1.5px dashed #FF5FA2;border-radius:10px;color:#FF5FA2}
.bag-thumb{flex:none;width:44px;height:44px;border-radius:8px;background:#FFD6E8;display:grid;place-items:center;overflow:hidden}
.bag-thumb img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated}
.bag-info{flex:1;display:flex;flex-direction:column;font:700 13px Inconsolata,monospace}
.bag-info small{font-weight:400;font-size:11px;opacity:.8}
.bag-rm{background:none;border:0;color:#FF5FA2;cursor:pointer;font-size:14px;padding:4px}
.bag-empty{justify-content:center}
.bag-note{font:12px Inconsolata,monospace;color:#FF5FA2;text-align:center;margin:4px 0 10px}
.bag-checkout{display:block;margin:0 auto;padding:8px 20px;border:3px solid transparent;border-radius:999px;color:#FF5FA2;font:700 13px Inconsolata,monospace;cursor:not-allowed;opacity:.75;
 background:radial-gradient(120% 100% at 50% 120%,#fff,#FFD6E8 50%) padding-box,linear-gradient(180deg,#fff,#e4e4ec 25%,#9a9aab 50%,#fafafd 70%,#b4b4c4) border-box}
@keyframes nlIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
html body .bag-overlay .pc-popup-titlebar span{color:#fff!important;font-weight:700}
html body .bag-overlay .pc-popup-body p.bag-note{background:#fff!important;border:1.5px dashed #FF5FA2!important;border-radius:10px;padding:8px;color:#FF5FA2!important}
.px-bagbtn .bag-count[hidden]{display:none}
/* phone teaser row + pixel cloud divider (hidden on desktop) */
.px-teaser,.px-cloud-divider{display:none}
@media (max-width:768px){
 .home-page .px-teaser{display:block;padding:18px 14px 6px!important;border-bottom:0!important}
 .px-teaser-grid{grid-template-columns:repeat(2,1fr)!important}
 .px-teaser-link{display:block;margin:12px 0 0;text-align:right;color:#FF5FA2;font:700 13px Inconsolata,monospace;text-decoration:underline dotted}
 .px-cloud-divider{position:relative;height:76px;overflow:hidden;background:linear-gradient(180deg,#fff,#FFD6E8)}
 .px-cloud-divider .pxc,.px-cloud-divider .pxs2{position:absolute;image-rendering:pixelated}
 .px-cloud-divider .pxs2{width:12px;height:12px}
 .px-cloud-divider .pxc{animation:pxDrift 6s ease-in-out infinite alternate}
}
@keyframes pxDrift{to{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.px-cloud-divider .pxc{animation:none}}
.px-teaser-title{margin:4px 0 14px;font-family:'Archivo Black',sans-serif!important;font-weight:400;font-size:28px;letter-spacing:-.5px;line-height:1.1;color:#FF5FA2}
/* phone drawer: don't trap the sidebar under the blurred backdrop (page-wrapper z-index made a stacking context) */
@media (max-width:768px){html body .page-wrapper{z-index:auto!important;filter:none!important;transform:none!important}}
/* inner pages: cloud divider (all widths) + hero sparkles */
.secondary-page .px-cloud-divider.px-cloud-inner{display:block;position:relative;height:76px;overflow:hidden;background:linear-gradient(180deg,#fff,#FFD6E8)}
.px-cloud-inner .pxc,.px-cloud-inner .pxs2{position:absolute;image-rendering:pixelated}
.px-cloud-inner .pxs2{width:12px;height:12px}
.pg-hero{position:relative}
.px-hero-spk{position:absolute;width:15px;height:15px;image-rendering:pixelated;pointer-events:none;animation:pxTwinkle 2.4s steps(3) infinite}
.px-hero-spk.s1{animation-delay:.8s}.px-hero-spk.s2{animation-delay:1.6s}
@keyframes pxTwinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.px-hero-spk{animation:none;opacity:.8}}
/* phone polish */
@media (max-width:400px){
 .pp-card p{font-size:12px!important;letter-spacing:0}
 .ms-links .btn{font-size:12px!important;letter-spacing:.03em!important;padding-left:8px!important;padding-right:8px!important}
}

.px-g2-spark{display:none}
.px-cat .px-mono{display:none}html[data-theme="goth3"] .px-cat .px-mono{display:block}html[data-theme="goth3"] .px-cat canvas:not(.px-mono){display:none}
/* same phone layout in every mood: the newsletter title keeps pink's two-line height even when a mood's heading font is narrower */
@media (max-width:768px){html[data-theme="blue"] .lotus-section .section-title,html[data-theme="red"] .lotus-section .section-title,html[data-theme="goth3"] .lotus-section .section-title{min-height:86.4px}}
.px-cat .px-pal-blue,.px-cat .px-pal-red{display:none}
html[data-theme="blue"] .px-cat canvas{display:none}html[data-theme="blue"] .px-cat .px-pal-blue{display:block}
html[data-theme="red"] .px-cat canvas{display:none}html[data-theme="red"] .px-cat .px-pal-red{display:block}
