/* Playful pink identity and motion, layered over the original responsive layout. */
:root{--ink:#542139;--accent:#d52a78;--muted:#896173;--line:#f3ccdf}
.header{border-bottom:1px solid #f7e3ed}
.hero{padding-top:42px}
.hero-copy>.eyebrow{display:inline-flex;background:#ffe1f0;color:#a52260;padding:9px 15px;border-radius:30px;letter-spacing:1px;transform:rotate(-2deg)}
.hero-copy>.eyebrow i{display:none}
h1{letter-spacing:-3.5px;line-height:1.24}
h1>span{position:relative;isolation:isolate}
h1>span::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:16px;background:#ffd0e7;z-index:-1;border-radius:50%;transform:rotate(-2deg)}
.button{background:#d52a78;box-shadow:4px 5px 0 #542139;font-weight:700;border:1px solid #542139}
.button:hover{background:#bc2067;box-shadow:6px 8px 0 #542139}
.button span,.nav-cta span{display:inline-block;transition:transform .25s}
.button:hover span,.nav-cta:hover span{transform:translate(3px,-3px)}
.button:active{transform:translate(3px,3px);box-shadow:1px 2px 0 #542139}
.nav-cta{background:#ffe1ee;border-color:#edb4cf;font-weight:700}
.vibe-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px;font-size:11px;font-weight:700}
.vibe-tags span{padding:7px 12px;border:1px solid #e6bad0;border-radius:8px;background:#fff;transform:rotate(-3deg)}
.vibe-tags span+span{background:#ede3ff;transform:rotate(3deg)}
.hero-foot{margin-top:18px}
.hero-art{background:radial-gradient(circle,#eda7cc 1px,transparent 1.5px) 0 0/18px 18px,#ffe4f1;border-radius:46% 46% 24% 30%;border:1px solid #f7c4df}
.music-card{background:#c92b77;box-shadow:7px 9px 0 #f5a6ce;border:2px solid #fff5fb}
.bubble{border:2px solid white;box-shadow:4px 5px 0 #f2b3d3}
.hello-card{background:#ffc4e0;border:2px solid white;box-shadow:4px 5px 0 #df94bc}
.brand-sticker{background:#e9ddff;box-shadow:4px 6px 0 #bb98d2}
.art-label{font-weight:700}.wave{display:flex;align-items:center;height:25px;gap:6px;letter-spacing:0}
.wave i{display:block;width:5px;height:22px;border-radius:4px;background:#ffd9ec;transform:scaleY(.45)}
.wave i:nth-child(3n){height:16px}.wave i:nth-child(2n){height:26px}
.ticker{background:#fbd4e8;color:#9d245c;border:0;font-weight:700;padding:23px 20px}
.ticker span:nth-child(2n){transform:rotate(-3deg)}
.interest-card{border:2px solid white;box-shadow:5px 6px 0 #f3d7e6;transition:transform .3s,box-shadow .3s}
.music{background:#ffd7e9}.daily{background:#ffe7ef}.explore{background:#eee1fa}
.card-number{background:#ffffffb3;padding:7px 11px;border-radius:20px;display:inline-block}
.chip{background:#ffffff8c;border-color:white;font-weight:700}
.idea-note{border-radius:5px 5px 25px 5px;background:#f6d9ee;box-shadow:5px 6px 0 #ebc5df}
.values{background:#70224d;position:relative;overflow:hidden}
.values::after{content:"✳";position:absolute;right:-20px;bottom:-100px;font-size:310px;color:#ffffff07;pointer-events:none}
.values h2{color:#ffd0e7}.value-items{position:relative;z-index:1}
.about-symbol{background:#ffe2f0;border:2px dashed #e6a4c5}
.contact{background:linear-gradient(115deg,#ffd6e9,#efe0fa);border:2px solid white;box-shadow:5px 6px 0 #f3d7e6}



@media(hover:hover) and (pointer:fine){.interest-card:hover{transform:translateY(-9px) rotate(-1deg);box-shadow:8px 13px 0 #edbdd7}.interest-card:nth-child(2):hover{transform:translateY(-9px) rotate(1deg)}}
@media(prefers-reduced-motion:no-preference){
  html[data-motion="on"] .bubble-top,html[data-motion="on"] .hello-card,html[data-motion="on"] .brand-sticker{animation:bob 4.8s ease-in-out infinite}
  html[data-motion="on"] .hello-card{animation-delay:-1.8s;animation-duration:5.6s}
  html[data-motion="on"] .brand-sticker{animation-delay:-3s;animation-duration:5.2s}
  html[data-motion="on"] .record{animation:spin 18s linear infinite}
  html[data-motion="on"] .floating-star{animation:spin 28s linear infinite}
  html[data-motion="on"] .wave i{animation:equalize 1.2s ease-in-out infinite alternate;animation-delay:calc(var(--bar) * -110ms)}
  html[data-motion="on"] .hero-copy{animation:arrive .7s ease-out both}
  html[data-motion="on"] .reveal.is-visible{animation:arrive .7s cubic-bezier(.2,.65,.3,1) both}
  html[data-motion="on"] .interest-card.is-visible:nth-child(2){animation-delay:.08s}
  html[data-motion="on"] .interest-card.is-visible:nth-child(3){animation-delay:.16s}
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="off"]{scroll-behavior:auto}
html[data-page-hidden] *{animation-play-state:paused!important}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes spin{to{rotate:360deg}}
@keyframes equalize{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes arrive{from{opacity:.3;translate:0 22px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.hero{padding-top:30px}.hero h1{font-size:clamp(43px,12.5vw,54px)}.vibe-tags{font-size:10px}.hero-art{margin-top:10px}.bubble-bottom{font-size:11px}.ticker{gap:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.interest-card:hover{transform:none}}
.footer{flex-wrap:wrap}.footer-agreements{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;font-weight:700}.footer-agreements a:hover{color:var(--accent)}@media(max-width:700px){.footer-agreements{order:2;width:100%;gap:22px;padding:8px 0}.footer p{order:3}}
.footer .footer-icp{flex-basis:100%;margin:0;text-align:right;order:4}.icp-link:hover{text-decoration:underline}@media(max-width:700px){.footer .footer-icp{text-align:left}}
/* Refined brand lockup: a cleaner mark with consistent optical sizing. */
.header .brand{gap:12px;letter-spacing:1px;color:#802650}
.header .brand img{width:62px;height:54px;object-fit:cover;border-radius:16px;mix-blend-mode:multiply}
.header .brand>span{font-size:24px;font-weight:800}
.header .brand-sub{font-size:10px;letter-spacing:4px;margin-top:5px;color:#a0527a}
.brand-sticker{background:#fff6fc;border-radius:30px;border:3px solid #fff;box-shadow:4px 6px 0 #edb4d2}
.brand-sticker img{width:110px;height:96px;object-fit:cover;border-radius:22px}
.brand-sticker span{font-size:11px;letter-spacing:1px;color:#a22c64}
.about-symbol{background:radial-gradient(circle at 50% 40%,#fff 0%,#fff3fa 70%);border:1px solid #f0c5db;box-shadow:0 18px 55px #c92b770a}
.about-symbol img{width:76%;height:68%;object-fit:cover;border-radius:30px}
.about-symbol>span{color:#a0527a;font-size:8px;letter-spacing:1.4px}
.footer .brand img{width:44px;height:38px;object-fit:cover;border-radius:10px}
@media(max-width:700px){.header .brand{gap:8px}.header .brand img{width:48px;height:44px;border-radius:12px}.header .brand>span{font-size:20px}.header .brand-sub{font-size:9px;letter-spacing:3px}.brand-sticker img{width:90px;height:85px}.about-symbol>span{font-size:6px;letter-spacing:1px}}