/* PONNE / NEON CITY EDITION — original POP edition is preserved. */
:root{--ink:#10152e;--pink:#ff42b0;--butter:#d9ff00;--mint:#30f3e1;--orange:#ff7c48;--paper:#111932;--line:#ffffff30;--cream:#fff4e3;--night:#070f24}
body{background:var(--night);color:var(--cream)}
::selection{background:var(--pink);color:var(--night)}
button:focus-visible,a:focus-visible{outline-color:var(--pink)}
.skip{background:var(--butter);color:var(--ink)}
.background{background:var(--night);background-image:repeating-linear-gradient(90deg,transparent 0 89px,#28f3e10c 89px 90px)}
.background::before{content:'';position:absolute;width:470px;height:470px;right:-120px;top:-110px;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 11px,var(--pink) 11px 26px);opacity:.37;transform:rotate(-14deg)}
.background::after{inset:auto 0 0;height:180px;background:repeating-linear-gradient(0deg,transparent 0 33px,#30f3e12b 33px 34px),repeating-linear-gradient(90deg,transparent 0 78px,#30f3e12b 78px 79px);transform:perspective(230px) rotateX(38deg);transform-origin:bottom;opacity:.7}
.background-word{left:28px;right:auto;top:40px;font-family:Arial,sans-serif;font-weight:900;font-style:italic;font-size:115px;line-height:.9;letter-spacing:-.065em;transform:rotate(-8deg);color:transparent;-webkit-text-stroke:1px #30f3e13d}
.background-note{color:var(--mint);letter-spacing:.17em}
.left-rail{color:var(--cream)}
.rail-brand{color:var(--butter);text-shadow:3px 3px 0 #ff42b0;transform:rotate(-5deg)}
.rail-brand span{color:var(--mint);text-shadow:none;transform:rotate(5deg)}
.rail-intro{color:#d6ddf0}
.rail-nav a{border-color:#30f3e164}
.rail-nav a:hover{color:var(--butter)}
.nav-number{color:var(--pink)}
.rail-nav a>span:last-child{color:var(--mint)}
.tiny-flower{color:var(--pink)}
.rail-bottom p{color:var(--butter)}
.sample-label{color:var(--mint);letter-spacing:.13em}
.hello-note{background:var(--pink);color:var(--ink);border:2px solid var(--pink);box-shadow:7px 8px 0 var(--mint);transform:rotate(6deg);padding-top:32px}
.note-tape{background:var(--butter);height:auto;min-height:24px;top:-15px;left:58px;width:99px;text-align:center;font-size:10px;font-weight:800;line-height:24px;letter-spacing:.12em;transform:rotate(-7deg)}
.note-eyebrow{letter-spacing:.12em}
.note-flower{position:relative;width:104px;height:104px;border-radius:50%;margin:15px auto 16px;padding:0;color:transparent;background:repeating-radial-gradient(circle at center,#10152e 0 3px,#3c2650 4px 5px);border:1px solid var(--ink);box-shadow:5px 3px 0 #ffffff55}
.record-disc{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -25deg,transparent 0deg 25deg,#fff4e33b 25deg 48deg,transparent 48deg 205deg,#fff4e32b 205deg 228deg,transparent 228deg),repeating-radial-gradient(circle at center,#10152e 0 3px,#3c2650 4px 5px);animation:ponne-record-spin 12s linear infinite;animation-play-state:paused}
.record-disc::before{content:'';position:absolute;inset:30%;border-radius:50%;background:linear-gradient(25deg,var(--butter) 0 46%,var(--pink) 46% 58%,var(--butter) 58%);border:1px solid var(--ink)}
.record-disc::after{content:'';position:absolute;width:8px;height:8px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink)}
.note-flower.is-moving .record-disc{animation-play-state:running}
.motion-paused .record-disc{animation-play-state:paused!important}
@keyframes ponne-record-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.record-disc{animation:none!important}}
.note-bottom{border-color:#10152e80}
.round-seal{background:var(--night);color:var(--butter);border:1.5px solid var(--butter);box-shadow:0 0 18px #d9ff0020;transform:rotate(-15deg)}
.round-seal b{color:var(--pink)}
.round-seal span{color:var(--mint)}
.right-caption{color:#c4cce3}
.page{background:var(--night);border-color:var(--mint);border-radius:34px 34px 0 0;box-shadow:8px 8px 0 #ff42b045}
.hero{background:var(--night);color:var(--cream);isolation:isolate;padding-top:26px}
.hero::before{content:'';position:absolute;z-index:-1;width:245px;height:245px;border-radius:50%;right:-65px;top:94px;background:repeating-linear-gradient(0deg,transparent 0 9px,#ff42b0 9px 20px);opacity:.14}
.hero::after{content:'';position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,var(--pink) 0 33.333%,var(--mint) 33.333% 66.666%,var(--butter) 66.666%)}
.hero-top{color:var(--mint);letter-spacing:.16em}
.mini-star{color:var(--pink)}
.shop-kicker{color:var(--cream);font-size:11px;letter-spacing:.11em}
.hero-brand{color:var(--butter);text-shadow:3px 3px 0 var(--night),5px 5px 0 var(--pink);transform:rotate(-6deg);padding:12px 0 4px}
.hero-brand>span{color:var(--mint);text-shadow:none;transform:rotate(6deg);letter-spacing:.35em;margin-top:2px}
.hero-copy{margin-top:25px}
.hero-copy h1{color:var(--cream);text-shadow:2px 2px 0 #ff42b04d}
.hero-spark{color:var(--mint);text-shadow:0 0 14px #30f3e199}
.hero-lead{color:#d9e0f4}
.pill{color:var(--ink);border-color:var(--ink);box-shadow:3px 4px 0 var(--pink);background:var(--butter)}
.pill:hover{box-shadow:4px 6px 0 var(--pink)}
.pill:active{box-shadow:0 0 0 var(--pink)}
.hero-photo{border-color:var(--mint);border-radius:0;background:var(--mint);color:var(--ink);margin-top:31px;box-shadow:5px 0 0 var(--pink)}
.hero-photo>img{border-radius:0}
.hero-photo figcaption{font-size:8px;letter-spacing:.11em;padding:10px}
.photo-tag{background:var(--pink);color:var(--ink);border-color:var(--ink);border-radius:0;transform:rotate(8deg);box-shadow:3px 3px 0 var(--butter);font-family:Arial,sans-serif;font-size:15px;font-weight:900;line-height:1.05}
.type-ribbon{background:var(--butter);color:var(--ink);border-top:1px solid var(--ink);font-family:Arial,sans-serif;font-style:italic;font-weight:900;font-size:20px;padding:14px 0 12px;letter-spacing:.035em}
.about{background:var(--pink);color:var(--ink);border-bottom:1px solid var(--ink)}
.about .eyebrow{font-weight:900}
.about-sign>span:first-child{font-family:Arial,sans-serif;font-weight:900;font-style:italic;font-size:22px;letter-spacing:-.04em}
.smiley{background:var(--butter);box-shadow:3px 3px 0 var(--ink)}
.finds{background:var(--mint);color:var(--ink);border-color:var(--ink)}
.section-heading>span{color:var(--pink);text-shadow:1px 1px 0 var(--ink)}
.product:hover{background:#ffffff3b}
.product-photo{border-radius:0;border-width:1.5px;box-shadow:3px 3px 0 #10152e35;background:var(--mint)}
.product-en{letter-spacing:.12em}
.product-arrow{background:var(--ink);color:var(--mint);border-radius:50%;width:27px;height:27px;font-size:20px;line-height:27px;text-align:center}
.visit{background:var(--night);color:var(--cream);position:relative;isolation:isolate}
.visit .eyebrow{color:var(--pink)}
.visit h2{color:var(--butter)}
.visit>p:not(.eyebrow){color:#d9e0f4}
.visit-ticket{background:var(--paper);color:var(--mint);border-color:var(--mint);box-shadow:5px 5px 0 var(--pink);transform:rotate(-4deg)}
.visit-ticket::before,.visit-ticket::after{background:var(--night);border-color:var(--mint)}
.ticket-brand{color:var(--butter);text-shadow:2px 2px 0 var(--pink)}
.ticket-label{color:var(--cream)}
.ticket-line{border-color:var(--mint)}
.visit-cta{background:var(--pink)}
.visit-cta .arrow{color:var(--pink)}
.footer{background:var(--night);border-top:1px solid #30f3e17d;color:var(--mint)}
.footer-brand{color:var(--butter)}
.footer-brand>span{color:var(--mint);border-color:var(--mint)}
.footer .demo-disclaimer{color:#bdc8df}
.mobile-header{background:var(--night);color:var(--mint);border-color:#30f3e155}
.mobile-brand{color:var(--butter);text-shadow:2px 2px 0 var(--pink)}
dialog{background:var(--night);color:var(--cream);border-color:var(--mint);box-shadow:7px 7px 0 #ff42b080;border-radius:8px}
dialog::backdrop{background:#020818bb}
dialog .eyebrow{color:var(--mint)}
dialog h2{color:var(--butter)}
.dialog-close{background:var(--pink);color:var(--ink);border-color:var(--ink)}
.dialog-photo{border-radius:0;border:1px solid var(--mint)}
dialog .dialog-note{color:#bdc8df;opacity:1}
@media(max-width:1130px){.note-tape{left:40px}.note-flower{width:90px;height:90px}.background-word{font-size:99px}}
@media(max-width:980px){.page{border-radius:18px 18px 0 0}.hero{padding-top:28px}.background-word{font-size:120px}.hero-top{font-size:8px}}
@media(max-width:540px){.page{border-radius:0}.hero{padding-top:26px}.hero-top{font-size:7px;letter-spacing:.11em}.hero-brand{font-size:clamp(100px,26vw,127px)}.hero-copy{margin-top:27px}.hero-photo{margin-top:30px}.hero-photo figcaption{font-size:7px}.photo-tag{width:62px;height:68px;font-size:12px;right:-4px}.hero::before{width:215px;height:215px;right:-24px;top:90px}.about-sign>span:first-child{font-size:20px}.product-arrow{width:23px;height:23px;font-size:18px;line-height:23px}.product{grid-template-columns:82px minmax(0,1fr) 23px;gap:11px}.type-ribbon{font-size:18px}.footer-brand{font-size:61px}}

/* A little floating hand invites the next click; labels and hit areas stay still. */
.pointing-hand{display:block;width:38px;height:32px;max-width:none;object-fit:contain;flex-shrink:0;pointer-events:none;transform-origin:35% 55%;animation:ponne-hand-float 2.8s ease-in-out infinite;animation-play-state:paused}
.pointing-hand.is-floating{animation-play-state:running}
.motion-paused .pointing-hand{animation-play-state:paused!important}
.arrow,.product-arrow{display:grid;place-items:center;flex-shrink:0;background:transparent;border-radius:0;width:40px;height:34px;line-height:1}
.rail-nav a>span:last-child{display:grid;place-items:center;width:38px;height:32px;flex-shrink:0}
.rail-nav a:hover>span:last-child,.product:hover .product-arrow{transform:none}
.note-bottom>span,.mobile-header>a:last-child>span,.ticket-line>span:last-child{display:inline-grid;place-items:center;vertical-align:middle;width:36px;height:30px;flex-shrink:0}
.mobile-header>a:last-child>span{margin-left:4px}
.footer-brand>span{border:0;width:42px;height:36px}
.product{grid-template-columns:100px minmax(0,1fr) 40px;gap:14px}
@keyframes ponne-hand-float{
  0%,100%{transform:translate(0,1px) rotate(-4deg)}
  50%{transform:translate(3px,-4px) rotate(5deg)}
}
@media(max-width:540px){
  .product{grid-template-columns:82px minmax(0,1fr) 32px;gap:10px}
  .product-arrow{width:32px;height:30px}
  .product-arrow .pointing-hand{width:31px;height:27px}
  .mobile-header .pointing-hand{width:29px;height:25px}
}
@media(prefers-reduced-motion:reduce){.pointing-hand{animation:none!important;transform:none!important}}
@media(max-width:360px){
  .product{grid-template-columns:70px minmax(0,1fr) 32px;gap:9px}
  .product-photo{width:70px;height:84px}
}

/* 80s objects replace the asterisk decorations; text and pointing-hand motion stay unchanged. */
.retro-icon{display:block;object-fit:contain;max-width:none;pointer-events:none}
.tiny-flower{display:grid;place-items:center;flex-shrink:0;width:62px;height:48px}
.tiny-flower .retro-icon{width:60px;height:44px;transform:rotate(-12deg)}
.rail-cassette{animation:ponne-cassette-sway 5.8s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 55%}
.rail-cassette.is-moving{animation-play-state:running}
.motion-paused .rail-cassette{animation-play-state:paused!important}
@keyframes ponne-cassette-sway{
  0%,100%{transform:translateY(1px) rotate(-17deg)}
  50%{transform:translateY(-2px) rotate(-7deg)}
}
@media(prefers-reduced-motion:reduce){.rail-cassette{animation:none!important}}
.mini-star{display:grid;place-items:center;width:28px;height:23px;flex-shrink:0}
.mini-star .retro-icon{width:28px;height:22px;transform:rotate(8deg)}
.hero-spark{top:-17px;right:0;width:49px;height:31px;transform:rotate(-12deg);text-shadow:none}
.hero-spark .retro-icon{width:49px;height:31px}
.section-heading>span{width:56px;height:45px;flex-shrink:0;text-shadow:none}
.section-heading .retro-icon{width:56px;height:45px;transform:rotate(9deg)}
.type-ribbon>span{display:flex;align-items:center;gap:14px}
.type-ribbon .retro-icon{width:27px;height:23px;flex-shrink:0}
@media(max-width:540px){
  .mini-star .retro-icon{width:25px;height:20px}
  .hero-spark{top:-21px;right:0;width:43px;height:27px}
  .hero-spark .retro-icon{width:43px;height:27px}
  .section-heading>span,.section-heading .retro-icon{width:49px;height:40px}
  .type-ribbon>span{gap:11px}
  .type-ribbon .retro-icon{width:24px;height:21px}
}

/* One shadow treatment for every Ponne wordmark, including the cassette label. */
:root{--ponne-logo-shadow:2px 2px 0 var(--night),4px 4px 0 var(--pink)}
.rail-brand,.hero-brand,.mobile-brand,.cassette-brand,.footer-brand{color:var(--butter);text-shadow:var(--ponne-logo-shadow)}
.ponne-wordmark{display:inline-block;font:inherit;letter-spacing:inherit;color:inherit;text-shadow:inherit;vertical-align:baseline;transform-origin:50% 85%;animation:ponne-wordmark-bounce 5.2s ease-in-out infinite;animation-play-state:paused}
.ponne-wordmark.is-moving{animation-play-state:running}
.rail-brand .ponne-wordmark{animation-delay:-.9s}
.mobile-brand .ponne-wordmark{animation-delay:-.5s}
.cassette-brand .ponne-wordmark{animation-delay:-1.7s}
.footer-brand .ponne-wordmark{animation-delay:-2.6s}
.motion-paused .ponne-wordmark{animation-play-state:paused!important}
@keyframes ponne-wordmark-bounce{
  0%,8%,54%,100%{transform:translateY(0) scale(1)}
  14%{transform:translateY(var(--ponne-squash-drop,1px)) scale(1.03,.92)}
  23%{transform:translateY(calc(-1 * var(--ponne-rise,7px))) scale(.97,1.06)}
  32%{transform:translateY(0) scale(1.025,.95)}
  40%{transform:translateY(calc(-1 * var(--ponne-rise-small,3px))) scale(.985,1.025)}
  47%{transform:translateY(0) scale(1.01,.985)}
}
@media(prefers-reduced-motion:reduce){.ponne-wordmark{animation:none!important;transform:none}}

/* Fixed 8:5 cassette artwork. All internal lengths follow the card container width. */
.cassette-card{position:relative;width:100%;aspect-ratio:8/5;margin:36px 0 32px;padding:0;background:var(--paper);border:.46cqw solid var(--mint);border-radius:3cqw;box-shadow:1.16cqw 1.16cqw 0 var(--pink);transform:rotate(-4deg);color:var(--mint);isolation:isolate}
.cassette-label{position:absolute;left:3.24%;right:3.24%;top:4.44%;height:74.07%;background:var(--night);border:.23cqw solid var(--mint);border-radius:1.85cqw;padding:0}
.cassette-caption{position:absolute;left:2.78cqw;right:2.78cqw;top:1.85cqw;display:flex;align-items:center;justify-content:space-between;gap:1.85cqw;color:var(--cream);font-size:1.85cqw;letter-spacing:.09em;font-weight:700;line-height:1.5;padding-bottom:1.62cqw;border-bottom:1.16cqw solid var(--pink)}
.cassette-caption>span:last-child{color:var(--butter);font-size:2.08cqw;white-space:nowrap}
.cassette-brand{position:absolute;left:2.78cqw;right:2.78cqw;top:8.1cqw;display:block;font-family:var(--display);font-size:16.2cqw;letter-spacing:-.04em;line-height:1.05;padding:.93cqw 0}
.cassette-brand .ponne-wordmark{--ponne-rise:1.62cqw;--ponne-rise-small:.694cqw;--ponne-squash-drop:.23cqw}
.cassette-window{position:absolute;left:6.48cqw;right:6.48cqw;top:28.24cqw;height:12.27cqw;display:flex;align-items:center;justify-content:space-between;gap:3.01cqw;margin:0;padding:1.16cqw 3.01cqw;border:.46cqw solid var(--mint);border-radius:6.94cqw;background:#253144;box-shadow:inset 0 0 0 .694cqw var(--night)}
.cassette-reel{position:relative;display:block;width:9.028cqw;height:9.028cqw;flex-shrink:0;border-radius:50%;border:.46cqw solid var(--cream);background:repeating-conic-gradient(var(--cream) 0deg 28deg,var(--night) 28deg 60deg);box-shadow:0 0 0 .694cqw #10152e}
.cassette-reel::after{content:'';position:absolute;inset:2.546cqw;background:var(--night);border:.23cqw solid var(--cream);border-radius:50%}
.cassette-tape{height:5.32cqw;flex:1;border:.23cqw solid #fff4e360;background:linear-gradient(180deg,#070f24 0 38%,#ed603c 38% 46%,#070f24 46% 54%,#ed603c 54% 62%,#070f24 62%);border-radius:.46cqw}
.cassette-sub{position:absolute;left:2.78cqw;right:2.78cqw;top:41.9cqw;display:block;font-family:var(--jp);font-size:2.08cqw;letter-spacing:.02em;line-height:1.8;color:var(--mint)}
.visit p.cassette-message:not(.eyebrow){position:absolute;left:0;right:0;top:81.48%;font-size:2.08cqw;line-height:1.4;margin:0;color:var(--cream);letter-spacing:.03em}
.cassette-base{position:absolute;left:16%;bottom:0;display:flex;align-items:center;justify-content:center;width:68%;height:6.02cqw;background:var(--pink);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.cassette-base::before,.cassette-base::after{content:'';position:absolute;top:2.31cqw;width:1.62cqw;height:1.62cqw;background:var(--night);border-radius:50%}
.cassette-base::before{left:22%}.cassette-base::after{right:22%}
.cassette-base>span{width:30%;height:1.389cqw;border:.46cqw solid var(--night);border-radius:.23cqw}
.cassette-screw{position:absolute;z-index:1;width:1.389cqw;height:1.389cqw;border:.23cqw solid var(--mint);border-radius:50%;background:var(--night)}
.cassette-screw::after{content:'';position:absolute;height:.23cqw;background:var(--mint);left:.23cqw;right:.23cqw;top:.347cqw;transform:rotate(-40deg)}
.screw-tl{top:1.16cqw;left:1.16cqw}.screw-tr{top:1.16cqw;right:1.16cqw}.screw-bl{bottom:1.389cqw;left:1.389cqw}.screw-br{bottom:1.389cqw;right:1.389cqw}
@media(max-width:540px){.cassette-card{margin:32px 0 29px}}

/* Copy sits directly on section colors: no text backplates or reading panels. */
:root{--copy:#f3f5ff;--copy-muted:#dce5f7;--copy-on-pink:#421047;--copy-on-mint:#254775}
.hero-copy h1,.about h2,.finds h2,.visit h2,dialog h2,.hello-note strong,.about-sign>span:first-child{
  -webkit-text-stroke:2px var(--night);paint-order:stroke fill;
  text-shadow:2px 3px 0 var(--night)
}
.hero-copy h1,.about h2,.hello-note strong{color:#fff}
.finds h2,.visit h2,dialog h2,.about-sign>span:first-child{color:var(--butter)}
.hero-lead,.rail-intro,.right-caption,.visit>p:not(.eyebrow){color:var(--copy)}
.about .eyebrow,.finds .eyebrow,.note-eyebrow{
  background:none;padding:0;border-radius:0;color:var(--copy-on-pink);font-weight:800
}
.finds .eyebrow{color:var(--copy-on-mint)}
.about-text{
  background:none;color:var(--copy-on-pink);margin:23px 0 0;padding:0;
  border:0;box-shadow:none;font-size:13px;font-weight:600;line-height:2.15
}
.about-sign>span:first-child{color:var(--butter)}
.copy-phrase{white-space:nowrap}
.finds .section-lead,.finds-note{
  background:none;color:var(--copy-on-mint);padding:0;border-radius:0;font-weight:600
}
.finds .section-lead{font-size:12px;margin-left:0;margin-right:0}
.product-list{background:none;color:var(--copy-on-mint);margin:0;padding:0;border:0;border-top:1px solid #25477580}
.product{border-bottom-color:#25477580}
.product:hover{background:none}
.product-text strong{color:#5b237a;-webkit-text-stroke:0;text-shadow:none}
.product-en{color:#5b237a}
.product-text>span:last-child{color:var(--copy-on-mint);font-size:11px;font-weight:600}
.finds-note{font-size:10px;text-align:left;margin-left:0;margin-right:0}
.pill,.visit-cta,.dialog-close{background:var(--night);color:#fff;border-color:var(--mint)}
.hero-photo figcaption{background:none;color:var(--copy-on-mint)}
.photo-tag{color:#fff;-webkit-text-stroke:1.2px var(--night);paint-order:stroke fill;text-shadow:1px 2px 0 var(--night)}
.type-ribbon{background:var(--night);color:var(--butter);border-top-color:var(--mint);border-bottom:1px solid var(--mint)}
.note-tape{background:var(--night);color:var(--butter);border:1px solid var(--butter)}
.note-bottom{background:none;color:var(--copy-on-pink);font-weight:600;padding:13px 0 0;border:0;border-top:1px solid #42104770;margin-left:0;margin-right:0}
.footer .demo-disclaimer,dialog .dialog-note{color:var(--copy-muted)}
@media(max-width:540px){
  .hero-copy h1,.about h2,.finds h2,.visit h2,dialog h2{-webkit-text-stroke:1.6px var(--night)}
  dialog h2{font-size:clamp(21px,6.8vw,26px)}
  .about-text{font-size:12px}
  .finds .section-lead{font-size:11px}
  .product-text>span:last-child{font-size:10px}
}

/* Identical groups make the leftward ticker join seamlessly at every repeat. */
.ribbon-track{display:flex;width:max-content;animation:ponne-ribbon-left 23s linear infinite;animation-play-state:paused}
.ribbon-track .ribbon-group{display:flex;align-items:center;gap:14px;flex:0 0 auto;width:max-content;padding-right:14px;transform:none}
.type-ribbon.is-moving .ribbon-track{animation-play-state:running}
.about-sign{animation:ponne-sign-hop 3.2s ease-in-out infinite;animation-play-state:paused}
.about-sign .smiley{flex-shrink:0;transform-origin:center bottom;animation:ponne-smiley-squash 3.2s ease-in-out infinite;animation-play-state:paused}
.about-sign.is-moving,.about-sign.is-moving .smiley{animation-play-state:running}
.motion-paused .ribbon-track,.motion-paused .about-sign,.motion-paused .about-sign .smiley{animation-play-state:paused!important}
@keyframes ponne-ribbon-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ponne-sign-hop{
  0%,10%,30%,48%,100%{transform:translateY(0)}
  20%{transform:translateY(-16px)}
  39%{transform:translateY(-7px)}
}
@keyframes ponne-smiley-squash{
  0%,7%,48%,100%{transform:rotate(12deg) scale(1)}
  10%,30%{transform:rotate(12deg) scale(1.08,.9)}
  20%{transform:rotate(3deg) scale(.96,1.05)}
  39%{transform:rotate(16deg) scale(.98,1.02)}
}
@media(max-width:540px){.ribbon-track .ribbon-group{gap:11px;padding-right:11px}}
@media(prefers-reduced-motion:reduce){
  .ribbon-track,.about-sign,.about-sign .smiley{animation:none!important}
  .ribbon-track,.about-sign{transform:none}
}

/* Adapted from Motion Prompt #096: small, staggered vertical float cycles.
   Reference: https://showheyohtaki.github.io/motion-prompt/api/v1/ja/e/096.txt */
.ambient-float{--float-range:3px;animation:ponne-ambient-float var(--float-duration,4.8s) ease-in-out infinite;animation-delay:var(--float-delay,0s);animation-play-state:paused}
.ambient-float.is-moving{animation-play-state:running}
.float-glasses{--float-duration:4.8s;--float-delay:-.8s}
.float-tag{--float-range:4px;--float-duration:6.4s;--float-delay:-2.1s}
.float-boombox{--float-duration:5.6s;--float-delay:-1.2s}
.float-seal{--float-range:4px;--float-duration:7.2s;--float-delay:-3.6s}
.motion-paused .ambient-float{animation-play-state:paused!important}
@keyframes ponne-ambient-float{
  0%,100%{translate:0 var(--float-range)}
  50%{translate:0 calc(-1 * var(--float-range))}
}
.cassette-hover{display:flow-root;container-type:inline-size}
.cassette-card{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
@media(hover:hover) and (pointer:fine){
  .cassette-hover:hover .cassette-card{transform:translateY(-9px) rotate(-2deg);box-shadow:7px 12px 0 var(--pink),0 18px 24px #00000040}
}
@media(prefers-reduced-motion:reduce){
  .ambient-float{animation:none!important;translate:none}
  .cassette-card{transition:none}
  .cassette-hover:hover .cassette-card{transform:rotate(-4deg)}
}