:root{
  --play-gray:#cfcfcd;
  --play-gray-light:#dededb;
  --play-pink:#ff9bd0;
  --play-pink-hot:#ff5fb2;
  --play-blue:#61c9ff;
  --play-black:#09090a;
  --play-white:#f4f3ef;
}

html,body,.app-shell,.workspace{background:var(--play-gray)}
body{overflow-x:hidden}
.app-shell{min-height:100vh}

/* Black rounded app chrome from the selected concept */
.topbar{margin:14px 16px 0;height:76px;padding:0 18px;border:0;border-radius:24px;background:var(--play-black);color:#fff;box-shadow:0 12px 30px #0002;position:sticky;top:12px}
.top-wordmark{display:none}
.top-nav{display:none}
.top-actions{margin-left:auto}
.topbar .how-link{background:#252527;border-color:#3a3a3d;color:#fff}
.topbar .login-btn{background:var(--play-pink);color:#111;border:0}
.topbar .round-btn{background:var(--play-pink);color:#111;border:0}
.mobile-logo{filter:invert(1);width:128px;height:52px}
.mobile-logo img{width:150px;height:150px;top:-50px}

main{background:transparent}
.view{transform-origin:top center}

/* Graphic page titles */
.home-slogan{position:relative;padding:18px 0 10px;min-height:178px}
.home-slogan h1{font-size:clamp(46px,12vw,65px);line-height:.86;letter-spacing:-.075em;position:relative;z-index:2}
.home-slogan h1 span{position:relative;display:inline-block}
.home-slogan h1 span:after{content:"";position:absolute;z-index:-1;left:5%;right:-2%;height:12px;bottom:-2px;background:var(--play-pink-hot);border-radius:99px;transform:rotate(-2deg)}
.hero-sticker{position:absolute;right:3px;top:20px;background:var(--play-pink);padding:9px 12px;font-family:var(--bubble);font-size:11px;line-height:1.05;transform:rotate(-5deg);box-shadow:4px 4px 0 #111;color:#111}
.hero-arrow{position:absolute;right:24px;bottom:6px;font-family:var(--bubble);font-size:42px;font-style:normal;transform:rotate(9deg)}

/* Overlapping elastic slider */
.home-showcase{margin:4px 0 0}
.showcase-window{overflow:hidden;border:0;border-radius:0;box-shadow:none;background:transparent}
.showcase-track{position:relative;min-height:435px;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.showcase-slide{min-height:435px;border:2px solid rgba(0,0,0,.11);border-radius:36px;box-shadow:0 17px 30px #0002;color:#111;overflow:hidden;isolation:isolate}
.showcase-slide.pink,.showcase-slide.pink-alt{background:linear-gradient(145deg,#ffb2d9,var(--play-pink))}
.showcase-slide.blue{background:linear-gradient(145deg,#82d7ff,var(--play-blue))}
.showcase-slide.gray{background:linear-gradient(145deg,#f6f4ef,#e4e3df)}
.showcase-slide.black{background:#111;color:#fff}
.showcase-slide:after{display:none}
.slide-number{position:absolute;top:28px;left:30px;font-family:var(--text);font-size:14px}
.slide-status{position:absolute;top:25px;right:28px;padding:9px 13px;border-radius:999px;background:#111;color:#fff;font-family:var(--bubble);font-size:11px}
.slide-copy{left:30px;right:26px;top:83px;bottom:auto}
.slide-copy small{display:none}
.slide-copy b{font-size:clamp(45px,11vw,66px);line-height:.84;letter-spacing:-.065em;color:#111;overflow-wrap:normal}
.slide-copy em{display:block;max-width:23ch;margin-top:22px;font-size:17px;line-height:1.25;color:#19191b}
.showcase-slide>i{top:auto;left:30px;right:auto;bottom:27px;min-width:190px;height:58px;padding:0 18px 0 22px;justify-content:space-between;border:0;border-radius:999px;background:#111;color:#fff;font-size:15px;box-shadow:none}
.showcase-slide>i span{display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:var(--play-pink);color:#111;font-size:22px}
.showcase-slide.gray>i{background:#111;color:#fff;border:0}
.slide-doodle{position:absolute;right:20px;bottom:20px;width:49%;height:52%}
.slide-doodle svg{position:absolute;right:0;bottom:0;width:100%;height:100%;fill:none;stroke:#111;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.slide-doodle mark{position:absolute;left:-15px;bottom:35px;padding:7px 10px;background:var(--play-blue);font-family:var(--bubble);font-size:11px;line-height:1.05;transform:rotate(-8deg);box-shadow:2px 2px 0 #111}
.blue .slide-doodle mark{background:var(--play-pink);transform:rotate(-5deg)}
.gray .slide-doodle mark{background:var(--play-blue);transform:rotate(4deg)}
.pink-alt .slide-doodle mark{background:var(--play-blue)}
.showcase-controls{grid-template-columns:54px 1fr 54px;margin:18px 0 0}
.showcase-controls>button{width:54px;height:54px;border:1.5px solid #aaa;border-radius:50%;background:transparent;font-size:23px;color:#111}
.showcase-controls>button:last-child{background:#111;color:#fff;border-color:#111}
.showcase-dots button{height:5px;background:#eee}
.showcase-dots button.active{width:60px;background:var(--play-pink-hot)}

/* Grey world and bold playful components across every view */
.page-head{position:relative;padding-top:18px}
.page-head h1,.pricing-head h2{font-size:clamp(52px,11vw,78px);line-height:.84;letter-spacing:-.07em}
.page-head h1:after,.pricing-head h2:after{content:"";display:block;width:130px;height:9px;margin-top:14px;border-radius:99px;background:var(--play-pink-hot);transform:rotate(-2deg)}
.eyebrow{background:var(--play-pink);border:0;border-radius:3px;transform:rotate(-1deg);box-shadow:3px 3px 0 #111}
.chip,.choice{border:1.5px solid #aaa;background:#e5e4e1;color:#111;box-shadow:none}
.chip.active,.choice.active{background:#111;color:#fff;border-color:#111}
.searchbox{background:#eee;border:2px solid #111;border-radius:18px;box-shadow:4px 4px 0 #111}

.need-card,.offer,.company-card,.anonymous-card,.post,.form-card,.settings-card,.price-card{border:2px solid #111;border-radius:24px;box-shadow:5px 6px 0 rgba(0,0,0,.16);background:#efefec}
.needs-list>*:nth-child(odd),.offer-grid>*:nth-child(odd),.company-grid>*:nth-child(odd),.anonymous-grid>*:nth-child(odd),.feed>*:nth-child(odd){background:#f5f3ee}
.needs-list>*:nth-child(even),.offer-grid>*:nth-child(even),.company-grid>*:nth-child(even),.anonymous-grid>*:nth-child(even),.feed>*:nth-child(even){background:#dff4ff}
.category-badge,.match-score,.verified,.post-type,.company-state{background:var(--play-blue);border:1px solid #111;box-shadow:2px 2px 0 #111}
.card-action.primary,.company-actions button:first-child{background:#111;color:#fff}
.card-action,.company-actions button,.post-actions button{border:1.5px solid #111}

.influencer-hero,.business-hero,.profile-hero{border:2px solid #111;border-radius:34px;box-shadow:8px 9px 0 #111}
.influencer-hero{background:var(--play-pink)}
.profile-hero{background:var(--play-blue)}
.business-hero{background:#111}
.wallet{border:2px solid #111;box-shadow:5px 5px 0 #111}
.steps article,.business-flow article{border:2px solid #111;background:#efefec;box-shadow:4px 4px 0 #111}
.steps article:nth-child(2),.business-flow article:nth-child(2){background:var(--play-blue)}
.steps article:nth-child(3),.business-flow article:nth-child(3){background:var(--play-pink)}
.rules,.fee-model{background:#e7e6e2;border:2px solid #111;box-shadow:6px 6px 0 #111}
.explain-card{border:2px solid #111;box-shadow:7px 7px 0 var(--play-blue)}
.primary-btn{background:var(--play-pink);border:2px solid #111;box-shadow:4px 4px 0 #111;color:#111}
.secondary-btn{background:#eee;border:2px solid #111;box-shadow:3px 3px 0 #111}
.dark-btn{border:2px solid #111}
.text-btn{background:var(--play-blue);border:2px solid #111;box-shadow:3px 3px 0 #111}

/* Explanation bubbles retain the chosen brand playfulness */
.how-title h1{font-size:clamp(55px,12vw,88px)}
.info-bubble{border:2px solid #111;box-shadow:7px 8px 0 #111}
.bubble-pink{background:var(--play-pink)}
.bubble-blue{background:var(--play-blue)}
.bubble-gray{background:#eee}
.model-bubble{border:2px solid #111;box-shadow:4px 5px 0 #111}

/* Modals and navigation */
.modal{background:#0008}
.sheet{background:var(--play-gray-light);border:2px solid #111;box-shadow:9px 10px 0 #111}
.sheet input,.sheet select,.sheet textarea,.form-card input,.form-card select{border:2px solid #111;background:#f3f2ef}
.mobile-nav{background:#111;border:0;border-radius:22px 22px 0 0;color:#fff}
.mobile-nav button{color:#fff}
.mobile-nav button.active{background:#2a2a2c;color:#fff}
.mobile-nav button:nth-child(2){background:var(--play-pink);color:#111}

@media(min-width:1000px){
  .app-shell{display:block;padding:0 16px 16px}
  .workspace{min-height:calc(100vh - 16px)}
  .topbar{margin:16px 0 0 0;height:88px;padding:0 24px;display:flex;justify-content:flex-start;gap:24px;z-index:60}
  .top-wordmark{display:block;position:relative;width:170px;height:70px;overflow:hidden;border:0;background:transparent;filter:invert(1);flex:0 0 auto}
  .top-wordmark img{position:absolute;width:170px;height:170px;left:0;top:-50px}
  .top-nav{display:flex;align-items:center;gap:5px}
  .top-nav button{height:48px;padding:0 17px;border:0;border-radius:15px;background:transparent;color:#fff;font-family:var(--text);font-weight:700}
  .top-nav button:hover,.top-nav button.active{background:#fff;color:#111}
  .sidebar{display:block;position:fixed;z-index:55;top:124px;left:24px;width:138px;height:calc(100vh - 150px);padding:18px 10px;background:#111;border:0;border-radius:30px;color:#fff;box-shadow:0 16px 35px #0003}
  .side-logo,.side-claim{display:none}
  .side-nav{gap:7px}
  .side-item{min-height:64px;grid-template-columns:1fr;grid-template-rows:27px auto;gap:4px;padding:8px 5px;text-align:center;border-radius:18px;color:#fff;font-size:10px;line-height:1.05}
  .side-item span{font-size:22px;color:#fff}
  .side-item:hover{transform:none;background:#29292b;color:#fff}
  .side-item.active{background:var(--play-pink);color:#111}
  .side-item.active span{color:#111}
  .side-item.action-pink{background:transparent;color:#fff;box-shadow:none;order:2}
  .workspace{padding-left:156px}
  main{max-width:1450px;padding:36px 28px 80px}
  .home-slogan{min-height:230px;padding:16px 0 20px}
  .home-slogan h1{font-size:clamp(76px,7vw,112px);max-width:1040px}
  .hero-sticker{right:60px;top:28px;font-size:15px;padding:12px 16px}
  .hero-arrow{right:100px;bottom:20px;font-size:58px}
  .showcase-window{overflow:visible;height:490px}
  .showcase-track{height:470px;min-height:470px;transform:none!important}
  .showcase-slide{position:absolute!important;top:0;height:455px;min-height:455px;transition:left .65s cubic-bezier(.2,.8,.2,1),width .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1),filter .4s ease;display:block}
  .showcase-slide.slot-0{left:0;width:57%;z-index:4;transform:rotate(-1deg)}
  .showcase-slide.slot-1{left:54%;width:27%;z-index:3;transform:translateY(13px) rotate(1deg)}
  .showcase-slide.slot-2{left:75%;width:22%;z-index:2;transform:translateY(22px) rotate(2deg)}
  .showcase-slide.slot-3{left:91%;width:18%;z-index:1;transform:translateY(30px) rotate(3deg)}
  .showcase-slide:not(.slot-0) .slide-copy{left:24px;top:70px;right:15px}
  .showcase-slide:not(.slot-0) .slide-copy b{font-size:clamp(31px,3vw,47px);line-height:.88}
  .showcase-slide:not(.slot-0) .slide-copy em{font-size:14px;max-width:14ch}
  .showcase-slide:not(.slot-0) .slide-status,.showcase-slide:not(.slot-0)>i{display:none}
  .showcase-slide:not(.slot-0) .slide-doodle{width:80%;right:4px;bottom:8px;height:45%}
  .showcase-slide:not(.slot-0) .slide-doodle mark{font-size:9px;left:0}
  .showcase-slide.slot-2 .slide-doodle mark,.showcase-slide.slot-3 .slide-doodle mark{display:none}
  .showcase-controls{max-width:620px;margin-top:0}
  .page-head h1,.pricing-head h2{font-size:clamp(70px,6vw,96px)}
}

@media(max-width:699px){
  .topbar{height:64px;margin:7px 7px 0;top:6px;padding:0 12px;border-radius:19px}
  .mobile-logo{width:112px;height:45px}
  .mobile-logo img{width:132px;height:132px;left:-10px;top:-44px}
  .topbar .how-link{display:none}
  .topbar .round-btn{width:38px;height:38px}
  main{padding:10px 11px 108px}
  .home-slogan{min-height:116px;padding:11px 3px 5px}
  .home-slogan h1{font-size:clamp(37px,10.7vw,46px);line-height:.86;margin:3px 0}
  .home-slogan h1 span:after{height:7px;bottom:-1px}
  .hero-sticker{display:none}
  .hero-arrow{display:none}
  .home-showcase{margin-top:10px}
  .showcase-window{border-radius:27px}
  .showcase-track{min-height:405px}
  .showcase-slide{height:398px;min-height:398px;border-radius:27px;box-shadow:0 12px 22px #0002}
  .slide-number{top:20px;left:21px}
  .slide-status{top:16px;right:17px;padding:8px 10px;font-size:9px}
  .slide-copy{left:21px;top:64px;right:17px}
  .slide-copy b{font-size:clamp(43px,13.6vw,55px);line-height:.84;max-width:100%}
  .slide-copy em{font-size:14px;line-height:1.2;margin-top:14px;max-width:18ch}
  .slide-doodle{right:8px;bottom:50px;width:49%;height:40%}
  .slide-doodle svg{stroke-width:7}
  .slide-doodle mark{left:-42px;bottom:58px;font-size:8px;padding:6px 8px}
  .showcase-slide>i{left:19px;bottom:17px;min-width:166px;height:48px;padding-left:18px;font-size:12px}
  .showcase-slide>i span{width:34px;height:34px}
  .showcase-controls{grid-template-columns:44px 1fr 44px;margin-top:12px}
  .showcase-controls>button{width:44px;height:44px;font-size:18px}
  .showcase-dots button{width:15px;height:4px}
  .showcase-dots button.active{width:42px}
  .page-head{padding-top:8px}
  .page-head h1,.pricing-head h2{font-size:clamp(44px,12vw,56px);line-height:.86}
  .page-head h1:after,.pricing-head h2:after{height:7px;margin-top:10px}
  .influencer-hero,.business-hero,.profile-hero{border-radius:27px;box-shadow:5px 6px 0 #111}
  .need-card,.offer,.company-card,.anonymous-card,.post,.form-card,.settings-card,.price-card{border-radius:20px;box-shadow:3px 4px 0 rgba(0,0,0,.18)}
  .mobile-nav{left:7px;right:7px;bottom:7px;border-radius:21px;padding:7px calc(6px + env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));box-shadow:0 10px 28px #0005}
}

@media(prefers-reduced-motion:reduce){.showcase-slide{transition:none!important}}