/* SUUPI concept 02 — visual match pass */
@font-face{
  font-family:"Fredoka SUUPI";
  src:url("fredoka-latin.woff2") format("woff2-variations");
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
}

:root{
  --bubble:"Fredoka SUUPI","Arial Rounded MT Bold",ui-rounded,"SF Pro Rounded",sans-serif;
  --text:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --play-gray:#c8c8c5;
  --play-pink:#f5a2cf;
  --play-pink-hot:#f581bd;
  --play-blue:#69c9f7;
  --play-cream:#efede8;
  --play-black:#080809;
}

body{font-family:var(--text);font-variation-settings:"wdth" 100}
.bubble,h1,h2,h3,button,strong,.eyebrow,.tiny{font-family:var(--bubble)}
.home-slogan h1,.slide-copy b{font-variation-settings:"wdth" 106;letter-spacing:-.052em;text-transform:none}

.global-search{display:none}
.slide-status b{display:inline-block;width:10px;height:10px;margin-left:6px;border-radius:50%;background:var(--play-pink-hot)}
.slide-doodle img{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center;filter:none;pointer-events:none}

@media(min-width:1000px){
  .app-shell{padding:0 24px 24px}
  .workspace{padding-left:158px;min-height:calc(100vh - 24px)}
  .topbar{height:90px;margin-top:20px;border-radius:27px;padding:0 24px;gap:22px;box-shadow:0 9px 26px rgba(0,0,0,.15)}
  .top-wordmark{width:174px;height:72px}
  .top-wordmark img{width:174px;height:174px;top:-51px}
  .top-nav{gap:4px;white-space:nowrap}
  .top-nav button{font-family:var(--text);font-size:14px;font-weight:650;height:46px;padding:0 17px;border-radius:14px}
  .top-nav button.active{background:var(--play-cream)}
  .global-search{margin-left:auto;width:min(270px,19vw);height:50px;display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid #454548;border-radius:17px;background:#242426;box-shadow:inset 0 1px 0 #ffffff12;color:#fff}
  .global-search span{font-size:25px;line-height:1;transform:rotate(-15deg)}
  .global-search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-family:var(--text);font-size:13px}
  .global-search input::placeholder{color:#b7b7ba}
  .top-actions{margin-left:0;gap:10px}
  .topbar .how-link,.topbar .login-btn{display:none}
  .topbar .round-btn{display:grid;width:48px;height:48px;place-items:center;background:var(--play-pink);font-size:17px}

  .sidebar{top:130px;left:24px;width:140px;height:calc(100vh - 154px);min-height:670px;max-height:790px;padding:22px 11px 18px;border-radius:30px;box-shadow:0 13px 30px rgba(0,0,0,.17)}
  .side-nav{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:1px}
  .side-item{min-height:72px;grid-template-rows:31px auto;padding:7px 5px;border-radius:18px;font-family:var(--text);font-size:11px;font-weight:560;letter-spacing:0}
  .side-item span{font-family:var(--text);font-size:27px;font-weight:400;line-height:1}
  .side-item.active{background:var(--play-pink)}
  .side-item.action-pink{order:initial}

  main{max-width:1520px;padding:30px 30px 76px}
  .home-slogan{min-height:226px;padding:14px 0 6px}
  .home-slogan h1{max-width:1050px;margin:0;font-size:clamp(76px,6.65vw,111px);line-height:.84;font-weight:700}
  .home-slogan h1 span:after{left:1%;right:-1%;height:12px;bottom:-4px;background:var(--play-pink-hot)}
  .hero-sticker{right:64px;top:33px;padding:9px 14px;font-size:14px;font-weight:650;line-height:1.12;box-shadow:none;transform:rotate(-7deg)}
  .hero-arrow{right:93px;bottom:3px;font-family:var(--text);font-size:68px;font-weight:300;transform:rotate(8deg)}

  .home-showcase{margin-top:0}
  .showcase-window{height:500px;overflow:visible}
  .showcase-track{height:480px;min-height:480px}
  .showcase-slide{height:462px;min-height:462px;border:2px solid rgba(255,255,255,.58);border-radius:38px;box-shadow:0 18px 29px rgba(0,0,0,.14);background-image:none!important}
  .showcase-slide.pink,.showcase-slide.pink-alt{background:var(--play-pink)!important}
  .showcase-slide.blue{background:var(--play-blue)!important}
  .showcase-slide.gray{background:var(--play-cream)!important}
  .showcase-slide.slot-0{left:0;width:57.5%;transform:rotate(-1deg)}
  .showcase-slide.slot-1{left:55%;width:28%;transform:translateY(14px) rotate(1deg)}
  .showcase-slide.slot-2{left:76%;width:23%;transform:translateY(24px) rotate(2deg)}
  .showcase-slide.slot-3{left:92%;width:19%;transform:translateY(34px) rotate(3deg)}
  .slide-number{top:28px;left:30px;font-size:14px;font-weight:500}
  .slide-status{top:25px;right:30px;padding:8px 13px;font-size:12px;font-weight:620;letter-spacing:.01em}
  .slide-copy{left:30px;right:28px;top:78px}
  .slide-copy b{font-size:clamp(54px,5vw,78px);line-height:.83;font-weight:700}
  .slide-copy em{margin-top:22px;font-size:18px;line-height:1.2}
  .showcase-slide>i{left:30px;bottom:27px;min-width:235px;height:62px;padding:0 10px 0 25px;font-size:17px;font-weight:580}
  .showcase-slide>i span{width:46px;height:46px;font-family:var(--text);font-size:27px}
  .slide-doodle{right:1%;bottom:8px;width:49%;height:59%}
  .slide-doodle img{object-position:center bottom}
  .slide-doodle mark{left:-8%;bottom:49px;padding:7px 11px;font-size:12px;font-weight:650;line-height:1.05;box-shadow:none}

  .showcase-slide:not(.slot-0) .slide-copy{left:27px;right:15px;top:78px}
  .showcase-slide:not(.slot-0) .slide-copy b{font-size:clamp(34px,3vw,48px);line-height:.87;font-weight:700}
  .showcase-slide:not(.slot-0) .slide-copy em{display:block;margin-top:14px;font-size:15px;line-height:1.2;max-width:13ch}
  .showcase-slide:not(.slot-0) .slide-doodle{right:1%;bottom:13px;width:84%;height:45%}
  .showcase-slide:not(.slot-0) .slide-doodle img{object-position:center bottom}
  .showcase-slide:not(.slot-0) .slide-doodle mark{left:-3%;bottom:16px;font-size:9px}
  .showcase-slide.slot-2 .slide-doodle,.showcase-slide.slot-3 .slide-doodle{height:42%;width:88%}
  .showcase-slide.slot-2 .slide-copy em,.showcase-slide.slot-3 .slide-copy em{max-width:12ch}
  .showcase-slide.slot-3 .slide-copy b{font-size:clamp(29px,2.45vw,40px)}

  .showcase-controls{max-width:none;margin-top:0;grid-template-columns:54px 54px 1fr auto;gap:10px}
  .showcase-controls>button:first-child{grid-column:1}
  .showcase-dots{grid-column:3;justify-content:center}
  .showcase-controls>button:last-child{grid-column:2;grid-row:1}
  .showcase-dots button{width:10px;height:6px;background:#ececea}
  .showcase-dots button.active{width:76px;background:var(--play-pink-hot)}
}

@media(max-width:999px){
  .topbar{background:var(--play-black)}
  .home-slogan h1{font-weight:700;text-transform:none}
  .showcase-slide{background-image:none!important}
  .showcase-slide.pink,.showcase-slide.pink-alt{background:var(--play-pink)!important}
  .showcase-slide.blue{background:var(--play-blue)!important}
  .showcase-slide.gray{background:var(--play-cream)!important}
}

@media(max-width:699px){
  html,body,.app-shell,.workspace{background:#cacac7}
  .topbar{height:64px;padding:0 12px;border-radius:20px}
  .mobile-logo{filter:invert(1)}
  .topbar .login-btn{display:none}
  .topbar .round-btn{display:grid;place-items:center;background:var(--play-pink);color:#111;font-size:14px}
  main{padding:10px 12px 110px}
  .home-slogan{min-height:126px;padding:14px 2px 7px}
  .home-slogan h1{font-size:clamp(39px,11.6vw,52px);line-height:.84;letter-spacing:-.05em}
  .home-slogan h1 span:after{height:7px;bottom:-3px}
  .home-showcase{margin-top:8px}
  .showcase-window{overflow:hidden;border-radius:29px}
  .showcase-track{height:430px;min-height:430px;display:flex;align-items:stretch}
  .showcase-slide{position:relative!important;flex:0 0 100%;width:100%!important;height:424px;min-height:424px;border:2px solid rgba(255,255,255,.55);border-radius:29px;box-shadow:none;transform:none!important}
  .slide-number{top:20px;left:21px;font-size:12px}
  .slide-status{top:16px;right:17px;padding:8px 11px;font-size:10px}
  .slide-status b{width:8px;height:8px}
  .slide-copy{left:21px;right:18px;top:64px}
  .slide-copy b{font-size:clamp(46px,14vw,59px);line-height:.82;font-weight:700}
  .slide-copy em,.showcase-slide:not(.slot-0) .slide-copy em{display:block;margin-top:15px;font-size:14px;line-height:1.2;max-width:16ch}
  .slide-doodle,.showcase-slide:not(.slot-0) .slide-doodle{right:0;bottom:41px;width:53%;height:43%}
  .slide-doodle img{object-position:center bottom}
  .slide-doodle mark,.showcase-slide:not(.slot-0) .slide-doodle mark{left:-42%;bottom:38px;padding:6px 8px;font-size:8px;line-height:1.04}
  .showcase-slide>i,.showcase-slide:not(.slot-0)>i{display:flex;left:19px;bottom:17px;min-width:185px;height:50px;padding:0 8px 0 18px;font-size:13px}
  .showcase-slide>i span{width:36px;height:36px;font-size:21px}
  .showcase-slide:not(.active) .slide-status{display:none}
  .showcase-slide:not(.active)>i{display:flex}
  .showcase-slide:not(.active) .slide-copy{left:21px;right:18px;top:64px}
  .showcase-slide:not(.active) .slide-copy b{font-size:clamp(43px,13vw,56px);line-height:.84}
  .showcase-slide.gray .slide-doodle,.showcase-slide.pink-alt .slide-doodle{width:55%;height:41%}
  .showcase-controls{margin-top:13px;grid-template-columns:44px 1fr 44px}
  .showcase-dots button{width:10px;height:5px;background:#e8e8e5}
  .showcase-dots button.active{width:48px;background:var(--play-pink-hot)}
  .mobile-nav{background:#0a0a0b}
}

@media(max-width:380px){
  .home-slogan{min-height:112px}
  .home-slogan h1{font-size:38px}
  .showcase-track{height:401px;min-height:401px}
  .showcase-slide{height:395px;min-height:395px}
  .slide-copy b,.showcase-slide:not(.active) .slide-copy b{font-size:43px}
  .slide-doodle,.showcase-slide:not(.slot-0) .slide-doodle{height:39%}
}

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