/* A Little Shop of Alishba's Favourites (11 glass jars). Added file; existing CSS untouched. */
.s-shop{position:relative;overflow:hidden;text-align:center;background:linear-gradient(170deg,#fbeef0,#f0eaf7 42%,#e7f0e3);border-top:1px solid #e6d3dc}
.s-shop:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 12%,#fff9,transparent 30%),radial-gradient(circle at 85% 30%,#e9dcf855,transparent 35%),radial-gradient(circle,#e7c88a 1px,transparent 1.6px) 0 0/54px 54px;opacity:.55}
.s-shop>*{position:relative}
.s-title{margin:0 0 6px;font:600 clamp(24px,6.2vw,42px)/1.12 var(--serif);letter-spacing:-.03em;color:#4a3a52}
.s-sub{margin:0 auto 26px;max-width:460px;font:italic 16px/1.6 var(--serif);color:#7b6a82}
.s-board{position:relative;max-width:980px;margin:0 auto}
.s-awning{height:34px;margin:0 8px -2px;border-radius:14px 14px 0 0;background:radial-gradient(circle at 50% 100%,#f7d3de 0 13px,transparent 14px) 0 0/52px 34px repeat-x,linear-gradient(#fff 0 0) 0 0/100% 18px no-repeat;background-color:#fbe3ea;box-shadow:0 4px 8px #8a5a6a22;border-bottom:0;position:relative}
.s-awning:before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,#f7c9d6 0 26px,#fff7f9 26px 52px);opacity:.9;-webkit-mask:radial-gradient(circle at 50% 100%,transparent 0 13px,#000 14px) 0 0/52px 34px repeat-x;mask:radial-gradient(circle at 50% 100%,transparent 0 13px,#000 14px) 0 0/52px 34px repeat-x}
.s-desk{position:relative;padding:34px 16px 34px;border-radius:12px 12px 20px 20px;background:
  radial-gradient(ellipse at 50% -10%,#ffe9bd88,transparent 55%),
  repeating-linear-gradient(90deg,#5a371a12 0 2px,transparent 2px 11px,#fff1d618 11px 12px),
  repeating-linear-gradient(0deg,#4a2a1214 0 1px,transparent 1px 7px),
  linear-gradient(180deg,#d9ad7a,#c28f5c 55%,#a97745);
  box-shadow:inset 0 2px 0 #f6dcb4,inset 0 -16px 24px #6a3f1a33,0 18px 26px #6b4a3a33}
.s-desk:after{content:"";position:absolute;left:10px;right:10px;bottom:-14px;height:16px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#8f6137,#6e4524);box-shadow:0 8px 12px #4a2f1a44}
.s-jars{display:grid;grid-template-columns:repeat(12,1fr);gap:26px 12px;align-items:end}
.s-jars .s-cell{grid-column:span 2;min-width:0;display:flex;justify-content:center}

@media(max-width:720px){.s-jars{grid-template-columns:repeat(6,1fr);gap:22px 8px}}

.s-jar{position:relative;width:100%;max-width:142px;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.s-aura{position:absolute;left:-14%;right:-14%;top:-4%;height:74%;border-radius:50%;background:radial-gradient(circle,var(--glow) 0,transparent 68%);opacity:0;filter:blur(8px);transition:opacity .5s;pointer-events:none}
.s-jar:hover .s-aura,.s-jar:focus-visible .s-aura,.s-jar.is-open .s-aura{opacity:.5}
.s-jar.glow-soft .s-aura{opacity:.32}.s-jar.glow-soft.is-open .s-aura{opacity:.62}
.s-wrap{position:relative;width:84%;aspect-ratio:1/1.14;transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.s-jar.is-open .s-wrap{transform:translateY(-8px)}
.s-jar:active .s-wrap{transform:translateY(-3px)}
.s-shadow{position:absolute;left:8%;right:8%;bottom:34px;height:12px;border-radius:50%;background:radial-gradient(ellipse,#3a210d77,transparent 70%);filter:blur(2px);pointer-events:none}
.s-lid{position:absolute;left:8%;width:84%;top:0;height:14%;z-index:3;border-radius:8px 8px 4px 4px;transform-origin:0 100%;background:linear-gradient(180deg,#f8e6b4,#e3be75 55%,#c99b4e),repeating-linear-gradient(90deg,transparent 0 5px,#fff4 5px 6px);box-shadow:0 2px 4px #5b3a1c55,inset 0 1px 0 #fff9,inset 0 -2px 3px #8a5d2a55;transition:transform .95s cubic-bezier(.34,.9,.35,1)}
.s-lid:after{content:"";position:absolute;left:12%;right:12%;top:18%;height:22%;border-radius:4px;background:linear-gradient(90deg,transparent,#fffa,transparent)}
.s-jar.is-open .s-lid{transform:translate(-24%,-72%) rotate(-26deg)}
.s-neck{position:absolute;left:14%;width:72%;top:11%;height:10%;z-index:2;border:1.5px solid #ffffffcc;border-bottom:0;border-radius:4px 4px 0 0;background:linear-gradient(90deg,#ffffff88,#ffffff22 40%,#ffffff55)}
.s-glass{position:absolute;left:0;right:0;top:19%;bottom:0;z-index:2;overflow:hidden;border-radius:24% 24% 15% 15%/10% 10% 12% 12%;border:1.5px solid #ffffffdd;background:linear-gradient(105deg,#ffffff8c,#ffffff1c 28%,#ffffff0a 62%,#ffffff66),radial-gradient(ellipse at 50% 100%,#ffffff66,transparent 60%);box-shadow:inset 0 0 14px #fffa,inset -7px 0 12px #b49bd433,inset 7px 0 10px #ffffff55,0 5px 8px #5a381c33;backdrop-filter:blur(.4px)}
.s-shine{position:absolute;left:11%;top:8%;width:9%;height:58%;border-radius:20px;background:linear-gradient(#ffffffd9,#ffffff00);z-index:3;pointer-events:none}
.s-shine:after{content:"";position:absolute;left:230%;top:6%;width:100%;height:12%;border-radius:50%;background:#fffd}
.s-glass:after{content:"";position:absolute;right:9%;top:12%;width:5%;height:30%;border-radius:10px;background:linear-gradient(#ffffffaa,transparent);z-index:3}
.s-box{position:absolute;left:12%;right:12%;bottom:6%;top:16%;z-index:1;display:flex;align-items:flex-end;justify-content:center;transform:scale(.88);opacity:.62;filter:saturate(.8);transition:transform .9s cubic-bezier(.3,.9,.3,1),opacity .6s,filter .6s}
.s-jar.is-open .s-box{transform:translateY(-5%) scale(1.08);opacity:1;filter:none}
.s-item{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 4px 4px #3a210d44)}
.s-ph{display:grid;place-items:center;width:70%;aspect-ratio:1;border-radius:50%;background:#fff8;color:#9a7a8a;font:18px var(--serif)}
.s-label{position:relative;margin-top:9px;width:106%;padding:7px 5px 7px;background:#fffaf0;border:1px dashed #d7b697;border-radius:9px;box-shadow:0 3px 6px #5a381c33,inset 0 0 0 2px #fffaf0;transform:rotate(var(--tilt,0deg));transition:.4s}
.s-label:before{content:"";position:absolute;left:50%;top:-7px;width:34px;height:10px;margin-left:-17px;background:#f5d9a3bb;transform:rotate(-3deg)}
.s-label small{display:block;font:7.5px/1.3 var(--mono);letter-spacing:.07em;color:#a9646f}
.s-label b{display:block;margin-top:2px;font:600 11px/1.25 var(--serif);letter-spacing:.01em;color:#4a3a45;overflow-wrap:anywhere}
.s-jar.is-open .s-label{background:#fff;box-shadow:0 0 0 2px #fff,0 0 14px var(--glow),0 3px 6px #5a381c33}
.s-hint{display:block;margin-top:3px;font:8px var(--mono);letter-spacing:.1em;background:linear-gradient(90deg,#d65fb5,#8d63e0);-webkit-background-clip:text;background-clip:text;color:transparent;animation:sHint 2.4s ease-in-out infinite}
@keyframes sHint{50%{opacity:.45}}
.s-jar.is-open .s-hint{display:none}

/* sparkles on open */
.s-sparks{position:absolute;inset:-10%;pointer-events:none;z-index:6}
.s-sparks i{position:absolute;left:50%;top:12%;font-style:normal;font-size:12px;color:var(--glow);text-shadow:0 0 6px var(--glow);animation:sSpark 1.5s ease-out forwards}
@keyframes sSpark{from{opacity:1;transform:translate(-50%,0) scale(.3)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(1.2) rotate(140deg)}}
/* idle sparkle for colour jars */
.s-jar.has-twinkle .s-glass:before{content:"✦";position:absolute;right:16%;top:26%;z-index:4;font-size:10px;color:var(--glow);animation:sTw 2.8s ease-in-out infinite;text-shadow:0 0 6px var(--glow)}
@keyframes sTw{50%{opacity:.2;transform:scale(.6)}}

/* MUSIC JAR – the star of the shop */
.s-jar.is-music .s-aura{opacity:.8;left:-26%;right:-26%;top:-12%;height:92%;background:radial-gradient(circle,#f08be0aa 0,#9b6df088 42%,transparent 70%);animation:sPulse 4s ease-in-out infinite;filter:blur(10px)}
@keyframes sPulse{50%{transform:scale(1.1);opacity:.5}}
.s-jar.is-music .s-glass{border-color:#fff;background:linear-gradient(105deg,#ffffffb5,#ffe6faa0 26%,#ffffff1f 60%,#fff7),radial-gradient(ellipse at 50% 100%,#f7b8f088,transparent 62%);box-shadow:inset 0 0 18px #fffc,inset -7px 0 14px #d77fe655,0 0 18px #e58df088,0 5px 8px #5a381c33}
.s-jar.is-music .s-lid{background:linear-gradient(180deg,#fff2c9,#eccb7a 50%,#cfa24f),repeating-linear-gradient(90deg,transparent 0 5px,#fff5 5px 6px);box-shadow:0 0 12px #ffe3a0aa,0 2px 4px #5b3a1c55,inset 0 1px 0 #fff}
.s-jar.is-music .s-label{box-shadow:0 0 0 2px #fffaf0,0 0 16px #d58bf099,0 3px 6px #5a381c33;border-color:#d9a9e6;animation:sLab 4s ease-in-out infinite}
@keyframes sLab{50%{box-shadow:0 0 0 2px #fffaf0,0 0 8px #d58bf055,0 3px 6px #5a381c33}}
.s-notes{position:absolute;inset:-6% -18% 20% -18%;pointer-events:none;z-index:5}
.s-notes i{position:absolute;bottom:20%;font-style:normal;font-size:15px;color:#b46de6;text-shadow:0 0 8px #f0a8f0;opacity:0;animation:sNote 5s ease-in infinite}
.s-notes i:nth-child(1){left:6%;animation-delay:0s}.s-notes i:nth-child(2){left:78%;animation-delay:1.3s;color:#e05fb8}.s-notes i:nth-child(3){left:20%;animation-delay:2.6s;font-size:12px}.s-notes i:nth-child(4){left:90%;animation-delay:3.8s;font-size:13px}
@keyframes sNote{0%{opacity:0;transform:translateY(0) rotate(-10deg)}15%{opacity:.9}100%{opacity:0;transform:translateY(-70px) translateX(10px) rotate(14deg)}}
.s-jar.is-music.is-open .s-notes i{animation-duration:3s}
.s-cdspin{animation:sSpin 5.5s linear infinite}
.s-cdspin.paused{animation-play-state:paused}
@keyframes sSpin{to{transform:rotate(360deg)}}
.s-glare{position:absolute;left:50%;bottom:6%;width:78%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s;background:conic-gradient(from 20deg,transparent 0 12%,#fffb 18%,transparent 26% 54%,#fff8 62%,transparent 70%);mix-blend-mode:screen}
.s-jar.is-music.is-open .s-glare{opacity:.55}

/* detail card */
.s-card{position:relative;max-width:520px;margin:34px auto 0;padding:26px 24px 22px;text-align:center;background:#fffaf2;border:1px solid #ecd9c4;border-radius:20px;box-shadow:0 16px 34px #6b4a6a2e,inset 0 0 0 5px #fffaf2,inset 0 0 0 6px #f1dcc7;animation:sCard .55s cubic-bezier(.2,.9,.3,1)}
@keyframes sCard{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.s-card.is-out{opacity:0;transform:translateY(12px);transition:.3s}
.s-card[hidden]{display:none}
.s-card-cat{font:10px var(--mono);letter-spacing:.14em;color:#a9646f}
.s-card h3{margin:8px 0 0;font:600 clamp(24px,6vw,32px)/1.15 var(--serif);color:#4a3a52;overflow-wrap:anywhere}
.s-card-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:1px solid #e3cdb8;background:#fff;color:#7a5a6a;font:16px/1 var(--sans);cursor:pointer;touch-action:manipulation}
.s-card-x:hover{background:#f8ece0}
.s-card.is-music{background:linear-gradient(180deg,#fff7fd,#f6ecff);box-shadow:0 16px 38px #b06bd033,inset 0 0 0 5px #fff7fd,inset 0 0 0 6px #e6cdf3}

/* music player */
.s-player{margin-top:18px;padding:14px 14px 12px;border-radius:16px;background:linear-gradient(135deg,#fdeaf6,#ece3fb);border:1px solid #e1c9ee}
.s-prow{display:flex;align-items:center;gap:10px}
.s-play{flex:none;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:16px;background:linear-gradient(135deg,#d65fb5,#8d63e0);box-shadow:0 6px 14px #a35fd355;touch-action:manipulation}
.s-play:active{transform:scale(.94)}
.s-time{flex:none;min-width:34px;font:10px var(--mono);color:#6d5a82;font-variant-numeric:tabular-nums}
.s-prog{flex:1;min-width:0;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.s-prog::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,#c76fd0 var(--p,0%),#e1d3ee var(--p,0%))}
.s-prog::-moz-range-track{height:5px;border-radius:5px;background:#e1d3ee}.s-prog::-moz-range-progress{height:5px;border-radius:5px;background:#c76fd0}
.s-prog::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;background:#fff;border:2px solid #b45fd0;box-shadow:0 2px 4px #0003}
.s-prog::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #b45fd0}
.s-pbtns{display:flex;justify-content:center;gap:10px;margin-top:8px}
.s-pbtns button{min-height:44px;padding:0 16px;border-radius:30px;border:1px solid #d8c0ea;background:#fff;color:#6d4a8a;font:10px var(--mono);letter-spacing:.08em;cursor:pointer;touch-action:manipulation}
.s-pmsg{min-height:16px;margin:6px 0 0;font:11px/1.4 var(--sans);color:#a9467a}
.s-actions{margin-top:22px}
.s-closing{max-width:520px;margin:20px auto 0;font:600 clamp(13px,3.6vw,16px)/1.7 var(--serif);letter-spacing:.04em;color:#7a4f72}

@media(max-width:420px){.s-desk{padding:28px 8px 30px}.s-label b{font-size:10px}.s-label small{font-size:7px;letter-spacing:.04em}.s-jar{max-width:118px}.s-card{padding:24px 16px 18px}}
/* ========== UNIQUE VISIBLE GLOWS FOR EVERY JAR ========== */
.s-jar .s-aura{opacity:.42;transition:opacity .45s}
.s-jar:hover .s-aura,.s-jar:focus-visible .s-aura,.s-jar.is-open .s-aura{opacity:.7}

.s-jar.is-partner .s-aura{opacity:.78;left:-22%;right:-22%;top:-10%;height:90%;background:radial-gradient(circle,#f9b8d0cc 0,#f08ab088 42%,transparent 72%);animation:sPulsePink 3.6s ease-in-out infinite;filter:blur(9px)}
.s-jar.is-partner .s-glass{box-shadow:inset 0 0 14px #fff8,0 0 16px #f7a8c888,0 4px 8px #5a381c33}
.s-jar.is-partner .s-label{box-shadow:0 0 0 2px #fffaf0,0 0 14px #f7a8c8aa,0 3px 6px #5a381c33;border-color:#f0b0c8}
@keyframes sPulsePink{50%{transform:scale(1.08);opacity:.58}}

.s-jar.is-career .s-aura{opacity:.65;background:radial-gradient(circle,#d0b0f0aa 0,#b090e088 48%,transparent 72%);animation:sPulseLav 3.8s ease-in-out infinite;filter:blur(8px)}
@keyframes sPulseLav{50%{transform:scale(1.07);opacity:.5}}

.s-jar.is-modelling .s-aura{opacity:.7;left:-20%;right:-20%;top:-8%;height:88%;background:radial-gradient(circle,#c8b0f0aa 0,#a090e088 45%,transparent 72%);animation:sPulseLav 3.8s ease-in-out infinite;filter:blur(9px)}
.s-jar.is-modelling .s-glass{box-shadow:inset 0 0 12px #fff8,0 0 14px #b8a0f077}

.s-jar.is-desserts .s-aura{opacity:.68;background:radial-gradient(circle,#f0b870aa 0,#e0905088 48%,transparent 72%);animation:sPulseCar 3.5s ease-in-out infinite;filter:blur(8px)}
@keyframes sPulseCar{50%{transform:scale(1.06);opacity:.52}}

.s-jar.is-sweets .s-aura{opacity:.7;background:radial-gradient(circle,#f8d090aa 0,#e8b06088 48%,transparent 72%);animation:sPulseGold 3.7s ease-in-out infinite;filter:blur(8px)}
@keyframes sPulseGold{50%{transform:scale(1.07);opacity:.55}}

.s-jar.is-letters .s-aura{opacity:.72;left:-18%;right:-18%;top:-6%;height:86%;background:radial-gradient(circle,#f0c0e0aa 0,#d090c088 45%,transparent 72%);animation:sPulseLav 4s ease-in-out infinite;filter:blur(9px)}
.s-jar.is-letters .s-label{box-shadow:0 0 0 2px #fffaf0,0 0 12px #e0b0d099}

.s-jar.is-choc .s-aura{opacity:.62;background:radial-gradient(circle,#f0a0b8aa 0,#e0709088 50%,transparent 72%);animation:sPulsePink 3.6s ease-in-out infinite;filter:blur(8px)}

.s-jar.is-flower .s-aura{opacity:.66;background:radial-gradient(circle,#f8e090aa 0,#e8c06088 48%,transparent 72%);animation:sPulseGold 3.6s ease-in-out infinite;filter:blur(8px)}

.s-jar.is-frankie .s-aura{opacity:.68;background:radial-gradient(circle,#f0a070aa 0,#e0704088 48%,transparent 72%);animation:sPulseCar 3.4s ease-in-out infinite;filter:blur(8px)}

.s-jar.is-green .s-aura{opacity:.65;background:radial-gradient(circle,#70e0a0aa 0,#40c07088 48%,transparent 72%);filter:blur(8px);animation:sPulseGreen 3.5s ease-in-out infinite}
@keyframes sPulseGreen{50%{transform:scale(1.06);opacity:.5}}

.s-jar.is-pink .s-aura{opacity:.65;background:radial-gradient(circle,#f8a0c0aa 0,#f070a088 48%,transparent 72%);filter:blur(8px);animation:sPulsePink 3.5s ease-in-out infinite}

/* Music jar keeps its original stronger glow (is-music rules already present) */

/* ========== EMERGE-FROM-JAR ANIMATION (no overlay) ========== */
.s-emerge{
  position:fixed;
  z-index:8000;
  width:var(--size,120px);
  height:auto;
  max-width:42vw;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-20%) scale(.25);
  will-change:transform,opacity;
  filter:drop-shadow(0 6px 12px #0004);
}
.s-emerge.is-fly{
  animation:sEmerge var(--dur,2.6s) cubic-bezier(.25,.1,.25,1) var(--delay,0s) forwards;
}
@keyframes sEmerge{
  0%{opacity:0;transform:translate(-50%,-10%) scale(.2) rotate(0)}
  12%{opacity:1;transform:translate(calc(-50% + var(--sx,0px)*.3), -12vh) scale(1) rotate(calc(var(--rot,0deg)*.4))}
  35%{opacity:1;transform:translate(calc(-50% + var(--sx,0px)*.7), -18vh) scale(1.05) rotate(calc(var(--rot,0deg)*.7))}
  100%{opacity:.12;transform:translate(calc(-50% + var(--sx,0px)), 95vh) scale(.85) rotate(var(--rot,0deg))}
}

/* ========== OVERLAYS (only Modelling / Green / Pink / Letters) ========== */
.s-ov{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(40,20,40,.48);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .36s ease;pointer-events:none}
.s-ov.is-on{opacity:1;pointer-events:auto}
.s-ov-x{position:absolute;top:16px;right:16px;z-index:10;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#7a5a6a;font:18px/1 sans-serif;cursor:pointer;box-shadow:0 4px 14px #0003;touch-action:manipulation}
.s-ov-x:hover{background:#f8ece0}
.s-ov-center{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:92vw;text-align:center}
.s-ov-caption{margin:0;font:600 18px/1.4 var(--serif,Georgia,serif);color:#fff;text-shadow:0 2px 12px #0006;opacity:0;transform:translateY(12px);transition:opacity .55s,transform .55s}
.s-ov-caption.is-in{opacity:1;transform:none}
.s-float-img{max-width:min(320px,78vw);max-height:min(420px,62vh);object-fit:contain;filter:drop-shadow(0 8px 24px #0004);opacity:0;transform:scale(.55) translateY(40px);transition:opacity .65s cubic-bezier(.2,.8,.3,1),transform .85s cubic-bezier(.2,.8,.3,1)}
.s-float-img.is-in{opacity:1;transform:scale(1) translateY(0)}
.s-float-img.is-out{opacity:0;transform:scale(.8) translateY(-20px);transition:opacity .45s,transform .45s}

.s-ov-modelling{background:radial-gradient(ellipse at 50% 35%,#2a2050ee,#141028f0)}
.s-mirror-img{max-width:min(300px,80vw)}

.s-ov-green{background:radial-gradient(ellipse at 50% 40%,#103828ee,#0a1a14f0)}
.s-green-moon{max-width:min(280px,75vw);filter:drop-shadow(0 0 28px #5fd090aa)}

.s-ov-pink{background:radial-gradient(ellipse at 50% 35%,#401828ee,#20101af0)}
.s-pink-flower{max-width:min(260px,72vw);filter:drop-shadow(0 0 22px #f090c0aa)}
.s-pink-line{margin:0;max-width:320px;font:500 15px/1.55 var(--serif,Georgia,serif);color:#ffe8f0;text-shadow:0 2px 10px #0005;opacity:0;transform:translateY(14px);transition:opacity .65s .15s,transform .65s .15s}
.s-pink-line.is-in{opacity:1;transform:none}

.s-ov-letter{background:rgba(35,20,40,.55)}
.s-env{position:relative;width:min(260px,72vw);aspect-ratio:1.35;cursor:pointer;opacity:0;transform:scale(.6) translateY(30px);transition:opacity .55s,transform .65s cubic-bezier(.2,.8,.3,1)}
.s-env.is-in{opacity:1;transform:none}
.s-env-body{position:absolute;inset:18% 0 0;background:linear-gradient(180deg,#f8e8f0,#f0d8e8);border-radius:6px;box-shadow:0 10px 28px #0004;border:1px solid #e8c8d8}
.s-env-flap{position:absolute;left:0;right:0;top:0;height:42%;background:linear-gradient(180deg,#fceef6,#f0d0e0);clip-path:polygon(0 0,50% 70%,100% 0);transform-origin:50% 0;transition:transform .5s cubic-bezier(.4,.1,.3,1);border-radius:4px 4px 0 0}
.s-env.is-open .s-env-flap{transform:rotateX(160deg)}
.s-env-ribbon{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:42px;filter:drop-shadow(0 4px 6px #0003);transition:transform .35s,opacity .35s;z-index:2}
.s-env.is-open .s-env-ribbon{opacity:0;transform:translate(-50%,-80%) scale(1.3)}
.s-letter-page{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.85);width:min(340px,88vw);opacity:0;transition:opacity .45s,transform .5s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.s-letter-page.is-in{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.s-letter-inner{background:linear-gradient(165deg,#fff9f5,#fceef4 60%,#f8e8f0);border-radius:12px;padding:28px 22px 20px;box-shadow:0 16px 40px #0004,inset 0 0 0 1px #f0d0e0;border:1px solid #e8c0d0}
.s-letter-text{margin:0 0 20px;font:500 14px/1.65 var(--serif,Georgia,serif);color:#5a3a4a;letter-spacing:.01em}
.s-letter-close{display:block;width:100%;padding:12px;border:0;border-radius:30px;background:linear-gradient(135deg,#f0a0c0,#d080b0);color:#fff;font:700 13px/1 var(--sans,system-ui);letter-spacing:.06em;cursor:pointer;box-shadow:0 4px 12px #c070a055;touch-action:manipulation}

@media(prefers-reduced-motion:reduce){
  .s-aura,.s-label,.s-notes i,.s-hint,.s-cdspin,.s-jar.has-twinkle .s-glass:before{animation:none!important}
  .s-emerge,.s-float-img,.s-env,.s-letter-page,.s-ov-caption,.s-pink-line{transition:none!important;animation:none!important}
  .s-float-img.is-in,.s-ov-caption.is-in,.s-pink-line.is-in,.s-env.is-in,.s-letter-page.is-in{opacity:1;transform:none}
  .s-emerge.is-fly{opacity:1;transform:translate(-50%,-30%) scale(1)}
}

/* ========== PARTNER FULL-SCREEN SEQUENCE ========== */
.s-ov-partner{background:radial-gradient(ellipse at 50% 30%,#3a1848ee,#1a1028f2)}
.s-partner-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;pointer-events:none;transition:opacity .45s,transform .5s}
.s-partner-stage.is-on{opacity:1;pointer-events:auto;transform:none}
.s-partner-stage.is-out{opacity:0;transform:translateX(-40px);pointer-events:none}
.s-partner-s1{background:radial-gradient(ellipse at 50% 40%,#4a2048cc,#1e1028ee)}
.s-partner-s2{background:radial-gradient(ellipse at 50% 35%,#1a3a6aee,#0c1838f2);transform:translateX(50px)}
.s-partner-s2.is-on{transform:none}
.s-partner-cat{max-width:min(340px,82vw);max-height:58vh;filter:drop-shadow(0 0 28px #f8a0d0aa)}
.s-partner-hint{margin-top:8px}
.s-partner-swipe{font:600 13px/1 var(--sans,system-ui);color:#f0c0e0;letter-spacing:.08em;opacity:.85;animation:sSwipeHint 1.6s ease-in-out infinite}
@keyframes sSwipeHint{50%{opacity:.4;transform:translateX(6px)}}
.s-partner-q{margin:0;font:600 clamp(18px,5vw,26px)/1.35 var(--serif,Georgia,serif);color:#e8f4ff;text-shadow:0 0 24px #8cf,0 2px 8px #0006;letter-spacing:.02em;text-align:center;padding:0 16px}
.s-partner-see{padding:15px 36px;border:0;border-radius:40px;background:linear-gradient(135deg,#8ec8ff,#c0a0ff);color:#fff;font:700 16px/1 var(--sans,system-ui);letter-spacing:.08em;cursor:pointer;box-shadow:0 0 28px #8ec8ff99,0 6px 18px #0005;touch-action:manipulation;animation:sSeePulse 2.2s ease-in-out infinite}
.s-partner-see:hover,.s-partner-see:active{filter:brightness(1.1)}
.s-partner-see.is-flash{animation:none;box-shadow:0 0 40px #fff,0 0 60px #a0c8ff}
@keyframes sSeePulse{50%{box-shadow:0 0 36px #a0d0ffcc,0 6px 18px #0005;transform:scale(1.04)}}
.s-partner-betuu{max-width:min(320px,80vw);max-height:52vh;margin-top:6px;filter:drop-shadow(0 0 24px #f0a0c8aa)}
.s-partner-fog{position:absolute;inset:0;background:radial-gradient(circle,#e8f0ffee 0%,#c0d8f0cc 40%,transparent 70%);opacity:0;pointer-events:none;transition:opacity .6s}
.s-partner-fog.is-on{opacity:.85}
.s-partner-fog.is-out{opacity:0;transition:opacity .7s}
.s-partner-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.s-partner-stars:before,.s-partner-stars:after{content:"✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧";position:absolute;left:0;right:0;top:12%;font-size:14px;color:#c0e0ff;opacity:.55;letter-spacing:18px;text-align:center;animation:sStarFloat 8s linear infinite}
.s-partner-stars:after{top:70%;animation-delay:-4s;font-size:11px;opacity:.35}
@keyframes sStarFloat{from{transform:translateY(0)}to{transform:translateY(-30px)}}

/* ========== CUTER LETTER ========== */
.s-ov-letter{background:radial-gradient(ellipse at 50% 40%,#4a2848dd,#201028f0)}
.s-letter-sparks{position:absolute;inset:0;pointer-events:none;z-index:1}
.s-letter-sparks i{position:absolute;font-style:normal;font-size:12px;color:#f0b0d0;opacity:0;animation:sLetterSpark 3s ease-in-out infinite;text-shadow:0 0 8px #f8c0e0}
@keyframes sLetterSpark{0%,100%{opacity:0;transform:scale(.5)}40%,60%{opacity:.9;transform:scale(1.1)}}

.s-env{position:relative;width:min(280px,78vw);aspect-ratio:1.3;cursor:pointer;opacity:0;transform:scale(.55) translateY(40px);transition:opacity .6s,transform .75s cubic-bezier(.2,.85,.3,1);z-index:2}
.s-env.is-in{opacity:1;transform:none}
.s-env-glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,#f8b0d066 0,transparent 70%);animation:sEnvGlow 2.8s ease-in-out infinite;pointer-events:none}
@keyframes sEnvGlow{50%{opacity:.55;transform:scale(1.08)}}
.s-env-body{position:absolute;inset:20% 0 0;background:linear-gradient(175deg,#fff0f6,#f8d8e8 55%,#f0c8dc);border-radius:10px;box-shadow:0 12px 32px #0004,inset 0 1px 0 #fff8;border:1.5px solid #f0c0d8}
.s-env-flap{position:absolute;left:0;right:0;top:0;height:44%;background:linear-gradient(180deg,#ffe8f2,#f8c8dc);clip-path:polygon(0 0,50% 72%,100% 0);transform-origin:50% 0;transition:transform .55s cubic-bezier(.4,.05,.3,1);border-radius:6px 6px 0 0;box-shadow:0 2px 8px #0001}
.s-env.is-open .s-env-flap{transform:rotateX(165deg)}
.s-env-bow{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:48px;filter:drop-shadow(0 4px 8px #0003);transition:transform .4s,opacity .4s;z-index:3;line-height:1}
.s-env.is-open .s-env-bow{opacity:0;transform:translate(-50%,-90%) scale(1.35) rotate(12deg)}

.s-letter-page{position:absolute;left:50%;top:50%;transform:translate(-50%,-42%) scale(.82);width:min(360px,90vw);opacity:0;transition:opacity .5s,transform .6s cubic-bezier(.2,.85,.3,1);pointer-events:none;z-index:4}
.s-letter-page.is-in{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.s-letter-inner{position:relative;background:
  radial-gradient(circle at 12% 18%,#fff6 0 8%,transparent 9%),
  radial-gradient(circle at 88% 82%,#fff5 0 6%,transparent 7%),
  linear-gradient(165deg,#fffaf5,#fff0f4 40%,#fce8f0 100%);
  border-radius:16px;padding:32px 24px 22px;box-shadow:0 18px 44px #0005,inset 0 0 0 1px #f8d0e0,0 0 0 6px #fff8;border:1.5px solid #f0c0d4}
.s-letter-deco{position:absolute;font-size:16px;opacity:.85;pointer-events:none}
.s-letter-deco-tl{top:10px;left:12px}
.s-letter-deco-tr{top:10px;right:12px}
.s-letter-deco-bl{bottom:52px;left:12px}
.s-letter-deco-br{bottom:52px;right:12px}
.s-letter-text{margin:8px 0 22px;font:500 14.5px/1.7 var(--serif,Georgia,serif);color:#5a3a4a;letter-spacing:.015em;text-align:center}
.s-letter-close{display:block;width:100%;padding:14px;border:0;border-radius:32px;background:linear-gradient(135deg,#f8a0c8,#e070b0);color:#fff;font:700 14px/1 var(--sans,system-ui);letter-spacing:.07em;cursor:pointer;box-shadow:0 0 20px #f0a0c888,0 6px 14px #c070a055;touch-action:manipulation;transition:filter .2s,transform .15s}
.s-letter-close:hover,.s-letter-close:active{filter:brightness(1.08);transform:scale(1.02)}

@media(prefers-reduced-motion:reduce){
  .s-partner-stage,.s-partner-see,.s-partner-fog,.s-env,.s-letter-page,.s-letter-sparks i{animation:none!important;transition:none!important}
  .s-partner-stage.is-on,.s-env.is-in,.s-letter-page.is-in{opacity:1;transform:none}
}

/* ===== Redesigned handwritten letter (premium envelope) ===== */
.s-letter-stage{position:relative;width:min(380px,92vw);min-height:320px;display:flex;align-items:center;justify-content:center}
.s-env-new{position:relative;width:min(250px,70vw);aspect-ratio:1.4;cursor:pointer;opacity:0;transform:scale(.55) translateY(36px);transition:opacity .55s,transform .7s cubic-bezier(.2,.85,.3,1);z-index:3}
.s-env-new.is-in{opacity:1;transform:none}
.s-env-new.is-behind{opacity:.35;transform:scale(.88) translateY(18px);pointer-events:none;transition:opacity .5s,transform .55s}
.s-env-shadow{position:absolute;left:8%;right:8%;bottom:-6%;height:18%;background:radial-gradient(ellipse,#0005,transparent 70%);filter:blur(6px)}
.s-env-back{position:absolute;inset:12% 0 0;background:linear-gradient(180deg,#fce4ef,#f0c8d8);border-radius:10px;box-shadow:0 10px 28px #0003}
.s-env-paper{position:absolute;left:10%;right:10%;top:22%;bottom:18%;background:#fffaf6;border-radius:4px;box-shadow:inset 0 0 0 1px #f0d8e0}
.s-env-front{position:absolute;inset:12% 0 0;background:linear-gradient(175deg,#fff0f6,#f8d0e4 50%,#ecc0d4);border-radius:10px;overflow:hidden;border:1.5px solid #f0c0d8;box-shadow:0 8px 24px #0003,inset 0 1px 0 #fff8}
.s-env-flap-top{position:absolute;left:0;right:0;top:0;height:48%;background:linear-gradient(180deg,#ffeaf4,#f4c4dc);clip-path:polygon(0 0,50% 78%,100% 0);transform-origin:50% 0;transition:transform .55s cubic-bezier(.35,.05,.25,1);z-index:2}
.s-env-new.is-open .s-env-flap-top{transform:rotateX(168deg)}
.s-env-heart{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);font-size:28px;color:#e090b0;opacity:.55;pointer-events:none}
.s-env-seal{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:5;border:0;background:transparent;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;touch-action:manipulation}
.s-seal-ribbon{width:46px;height:14px;background:linear-gradient(90deg,#f070a0,#e05090,#f070a0);border-radius:3px;box-shadow:0 2px 6px #c0408055;position:relative}
.s-seal-ribbon:before,.s-seal-ribbon:after{content:"";position:absolute;top:50%;width:18px;height:18px;background:#e85898;border-radius:2px;transform:translateY(-50%) rotate(45deg)}
.s-seal-ribbon:before{left:-10px}.s-seal-ribbon:after{right:-10px}
.s-seal-wax{font-size:32px;line-height:1;margin-top:-10px;filter:drop-shadow(0 3px 6px #0003);transition:transform .3s}
.s-env-new.is-open .s-env-seal{opacity:0;transform:translate(-50%,-120%) scale(1.2);pointer-events:none;transition:opacity .35s,transform .4s}
.s-letter-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%) scale(.86);width:min(340px,90vw);opacity:0;transition:opacity .5s,transform .6s cubic-bezier(.2,.85,.3,1);pointer-events:none;z-index:6}
.s-letter-sheet.is-in{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.s-letter-sheet-inner{background:linear-gradient(168deg,#fffdfb,#fff5f8 55%,#fceef4);border-radius:14px;padding:26px 22px 18px;box-shadow:0 18px 44px #0004,0 0 0 1px #f0d0e0,inset 0 0 0 1px #fff8;border:1px solid #e8c0d0;position:relative}
.s-letter-rule{height:1px;background:linear-gradient(90deg,transparent,#f0c0d8 20%,#f0c0d8 80%,transparent);margin-bottom:16px}
.s-letter-hand{margin:0 0 16px;font:500 14.5px/1.7 Georgia,"Times New Roman",serif;color:#5a3848;letter-spacing:.015em;text-align:left}
.s-letter-sign{font:italic 13px Georgia,serif;color:#c07090;text-align:right;margin-bottom:14px}
.s-letter-close{display:block;width:100%;padding:13px;border:0;border-radius:28px;background:linear-gradient(135deg,#f5a0c0,#d878a8);color:#fff;font:700 13px/1 system-ui,sans-serif;letter-spacing:.07em;cursor:pointer;box-shadow:0 0 20px #f0a0c888,0 6px 14px #c070a055;touch-action:manipulation;transition:filter .2s,transform .15s}
.s-letter-close:hover,.s-letter-close:active{filter:brightness(1.08);transform:scale(1.02)}

/* new jars accents */
.s-jar.is-raps .s-aura{opacity:.7;background:radial-gradient(circle,#d0a0f0aa 0,#b070e088 48%,transparent 72%);animation:sPulseLav 3.6s ease-in-out infinite;filter:blur(8px)}
.s-jar.is-roller .s-aura{opacity:.68;background:radial-gradient(circle,#90d0f0aa 0,#60b0e088 48%,transparent 72%);animation:sPulse 3.5s ease-in-out infinite;filter:blur(8px)}

@media(max-width:420px){
  .s-letter-hand{font-size:13.5px;line-height:1.65}
  .s-letter-sheet-inner{padding:20px 16px 14px}
}

/* ===== Cassette player ===== */
.c-cassette-section{padding-bottom:8px}
.c-title{font:700 22px/1.2 var(--serif,Georgia,serif);margin:8px 0 4px;color:#4a3040;text-align:center}
.c-sub{text-align:center;color:#7a5a6a;font-size:14px;margin:0 0 18px}
.c-stage{position:relative;max-width:560px;margin:0 auto;touch-action:manipulation}
.c-compose{position:relative;width:100%;aspect-ratio:1.15;overflow:hidden;border-radius:16px;box-shadow:0 12px 36px #0002}
.c-bg{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none}
.c-open{position:absolute;left:4%;top:18%;width:42%;max-width:220px;height:auto;pointer-events:none;z-index:2;transition:opacity .4s}
.c-tape{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;z-index:3;transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.c-tape img{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 4px 10px #0003)}
.c-tape-1{left:48%;top:22%;width:38%;max-width:190px}
.c-tape-2{left:52%;top:52%;width:36%;max-width:180px}
.c-tape:hover,.c-tape:focus-visible{transform:scale(1.04)}
.c-tape:active{transform:scale(.98)}
.c-compose.is-playing .c-open{opacity:0;pointer-events:none}
.c-compose.is-playing .c-tape{opacity:0;pointer-events:none}
.c-active{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(40,20,35,.35);border-radius:16px;z-index:5}
.c-active[hidden]{display:none}
.c-canvas{max-width:92%;max-height:88%;border-radius:8px;box-shadow:0 12px 40px #0005}
.c-close-tape{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:#fff8;color:#5a3040;font-size:18px;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 2px 10px #0003;z-index:6;touch-action:manipulation}
.c-close-tape:active{transform:scale(.94)}
@media(max-width:480px){
  .c-open{width:44%;left:2%}
  .c-tape-1{width:42%;left:46%}
  .c-tape-2{width:40%;left:50%}
}


/* ===== Final requested adjustments ===== */
/* Keep the cassette artwork at its native portrait ratio so the complete
   background remains visible; all overlays use the same responsive canvas. */
.c-stage{width:100%;max-width:560px}
.c-compose{aspect-ratio:896 / 1200;overflow:hidden}
.c-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.c-open{left:0;top:25%;width:48%;max-width:none}
.c-tape-1{left:61%;top:58%;width:31%;max-width:none}
.c-tape-2{left:29%;top:76%;width:31%;max-width:none}

/* Slightly enlarge only the 90's RAPS artwork without changing its ratio. */
.s-jar.is-raps .s-item{transform:scale(1.12);transform-origin:center bottom}

/* The final jar is deliberately empty: no item image or category caption. */
.s-jar.is-empty .s-label small{display:none}
.s-jar.is-empty .s-label b{font-size:20px!important;line-height:1.1;margin-top:0}
.s-jar.is-empty .s-box{opacity:1;filter:none}
.s-jar.is-empty .s-aura{
  opacity:1;
  background:radial-gradient(circle,#fff0f9 0,#f7a8dfbb 28%,#d98ce8aa 52%,transparent 74%);
  filter:blur(11px);
  animation:sEmptyGlow 1.9s ease-in-out infinite;
}
.s-jar.is-empty .s-glass{
  box-shadow:inset 0 0 18px #fff,inset -7px 0 12px #e9b4e955,
    inset 7px 0 10px #ffffff88,0 0 18px #f2a8e888,0 0 30px #d98ce866;
}
@keyframes sEmptyGlow{
  0%,100%{opacity:.78;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.08)}
}
.s-empty-sequence{display:grid;gap:7px;margin:16px auto 0;max-width:100%}
.s-empty-sequence p{
  margin:0;padding:9px 12px;border-radius:12px;
  background:linear-gradient(135deg,#fff5fa,#f8eafa);
  color:#72516d;font:500 clamp(13px,3.6vw,16px)/1.4 var(--serif,Georgia,serif);
  opacity:0;transform:translateY(7px);
  transition:opacity .45s ease,transform .45s ease;
  overflow-wrap:anywhere;
}
.s-empty-sequence p.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .s-jar.is-empty .s-aura{animation:none}
  .s-empty-sequence p{transition:none}
}