/* Yappy landing × Studio Mimi — staging refinement */
body.cloud-gate{
  --studio-cream:#F3EDE3;
  --studio-paper:#FBF8F1;
  --studio-ink:#26201A;
  --studio-rust:#BE5133;
  --studio-muted:#948872;
  --studio-line:#DED2BE;
  --studio-soft:#EADDCF;
  background:var(--studio-cream);
}
#cloud-entry{
  background:var(--studio-cream);
  color:var(--studio-ink);
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
}
#cloud-entry .cloud-shell{
  position:relative;
  background:
    radial-gradient(circle at 12% 16%,rgba(190,81,51,.075),transparent 28rem),
    radial-gradient(circle at 92% 82%,rgba(222,210,190,.78),transparent 30rem),
    var(--studio-cream);
  overflow:hidden;
}
#cloud-entry .cloud-shell:before,
#cloud-entry .cloud-shell:after{
  content:"✦";
  position:fixed;
  color:var(--studio-rust);
  font:700 15px/1 "Space Mono",monospace;
  pointer-events:none;
  opacity:.8;
  z-index:0;
  animation:studioSpark 3.6s ease-in-out infinite;
}
#cloud-entry .cloud-shell:before{left:5vw;top:23vh}
#cloud-entry .cloud-shell:after{content:"♡";right:5vw;bottom:18vh;animation-delay:1.1s}
#cloud-entry .cloud-nav,
#cloud-entry .cloud-main,
#cloud-entry .cloud-footer{position:relative;z-index:1}
#cloud-entry .cloud-nav{
  width:min(1240px,100%);
  margin:0 auto;
  padding:clamp(18px,2.5vw,28px) clamp(18px,5vw,56px);
}
#cloud-entry .cloud-brand{
  gap:9px;
  font-size:16px;
  letter-spacing:-.03em;
  text-transform:lowercase;
}
#cloud-entry .cloud-brand img{
  width:35px;height:35px;
  transform:rotate(-5deg);
  transition:transform .22s cubic-bezier(.2,.9,.25,1.2);
}
#cloud-entry .cloud-brand:hover img{transform:rotate(4deg) translateY(-2px)}
#cloud-entry .cloud-brand span:after{
  content:" · studio mimi";
  margin-left:7px;
  color:var(--studio-muted);
  font:400 9px/1 "Space Mono",monospace;
  letter-spacing:0;
  vertical-align:middle;
}
#cloud-entry .cloud-nav-note{
  color:var(--studio-muted);
  font:400 10px/1.45 "Space Mono",monospace;
  text-transform:lowercase;
}
#cloud-entry .cloud-main{
  width:min(1180px,100%);
  padding:clamp(30px,5vw,62px) clamp(18px,5vw,56px) clamp(42px,7vw,76px);
  grid-template-columns:minmax(0,1.05fr) minmax(350px,.82fr);
  gap:clamp(38px,6vw,78px);
}
#cloud-entry .cloud-copy{position:relative}
#cloud-entry .cloud-kicker{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--studio-rust);
  font:700 11px/1.4 "Space Mono",monospace;
  letter-spacing:.015em;
}
#cloud-entry .cloud-kicker:before{content:"· ";color:var(--studio-rust)}
#cloud-entry .cloud-copy h1{
  margin:16px 0 20px;
  color:var(--studio-ink);
  font-size:clamp(46px,5.7vw,72px);
  line-height:.98;
  letter-spacing:-.055em;
  max-width:720px;
}
#cloud-entry .cloud-copy h1 em{
  color:var(--studio-rust);
  font-style:normal;
}
#cloud-entry .cloud-copy>p{
  color:var(--studio-muted);
  max-width:590px;
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.58;
}
#cloud-entry .cloud-pills{
  gap:7px;
  margin-top:24px;
}
#cloud-entry .cloud-pills span{
  padding:7px 10px;
  border:1px dashed var(--studio-line);
  border-radius:8px;
  background:rgba(251,248,241,.58);
  color:var(--studio-muted);
  font:700 9px/1 "Space Mono",monospace;
  text-transform:lowercase;
  transition:transform .18s ease,border-color .18s ease,color .18s ease;
}
#cloud-entry .cloud-pills span:hover{
  transform:translateY(-2px) rotate(-1deg);
  border-color:var(--studio-rust);
  color:var(--studio-rust);
}
#cloud-entry .cloud-studio-note{
  width:min(310px,82%);
  margin-top:25px;
  padding:11px 13px;
  display:flex;
  gap:10px;
  align-items:center;
  border:1px dashed #D4B9A8;
  border-radius:11px;
  background:#FBF4EC;
  color:#6F5D51;
  transform:rotate(-1deg);
  box-shadow:0 12px 32px -28px rgba(38,32,26,.65);
}
#cloud-entry .cloud-studio-note>span{
  width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;
  border-radius:9px;background:var(--studio-rust);color:var(--studio-paper);
  font-size:12px;
}
#cloud-entry .cloud-studio-note p{
  margin:0;
  font-size:11px;
  line-height:1.4;
  font-weight:600;
}
#cloud-entry .cloud-card{
  position:relative;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--studio-line);
  border-radius:4px;
  background:var(--studio-paper);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 24px 55px -36px rgba(38,32,26,.62);
  transform:rotate(.25deg);
}
#cloud-entry .cloud-card:before,
#cloud-entry .cloud-card:after{
  content:"";
  position:absolute;
  top:118px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--studio-cream);
  border:1px solid var(--studio-line);
  z-index:2;
}
#cloud-entry .cloud-card:before{left:-12px}
#cloud-entry .cloud-card:after{right:-12px}
#cloud-entry .cloud-card #cloud-choice:after{
  content:"✂ · · · · · · · · · · · · · · · · · · ·";
  display:block;
  overflow:hidden;
  white-space:nowrap;
  margin:21px -4px -4px;
  color:var(--studio-line);
  font:400 9px/1 "Space Mono",monospace;
  letter-spacing:.03em;
}
#cloud-entry .cloud-mascot-row{
  align-items:center;
  gap:14px;
  margin-bottom:19px;
}
#cloud-entry .cloud-mascot-row img{
  width:66px;height:66px;
  animation:studioMascot 4s ease-in-out infinite;
}
#cloud-entry .cloud-mascot-row h2{
  margin-bottom:5px;
  color:var(--studio-ink);
  font-size:24px;
  letter-spacing:-.035em;
}
#cloud-entry .cloud-mascot-row p{
  color:var(--studio-muted);
  font-size:12px;
  line-height:1.45;
}
#cloud-entry .cloud-actions{gap:8px}
#cloud-entry .cloud-btn{
  min-height:48px;
  border-radius:999px;
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:800;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
#cloud-entry .cloud-btn.primary{
  background:var(--studio-ink);
  color:var(--studio-paper);
}
#cloud-entry .cloud-btn.primary:hover{
  transform:translateY(-3px) rotate(-.5deg);
  box-shadow:0 6px 0 var(--studio-rust);
}
#cloud-entry .cloud-btn.secondary{
  background:var(--studio-rust);
  color:var(--studio-paper);
}
#cloud-entry .cloud-btn.secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 0 #9F432B;
}
#cloud-entry .cloud-btn.ghost{
  border:1px solid var(--studio-line);
  background:transparent;
  color:var(--studio-ink);
}
#cloud-entry .cloud-btn.ghost:hover{
  transform:translateY(-2px);
  border-color:var(--studio-rust);
  background:var(--studio-cream);
}
#cloud-entry .cloud-btn.text{
  color:var(--studio-muted);
}
#cloud-entry .cloud-guest-note{
  margin:13px 3px 0;
  color:var(--studio-muted);
  font-size:10.5px;
  line-height:1.5;
}
#cloud-entry .cloud-guest-note b{color:var(--studio-ink)}
#cloud-entry .cloud-features{
  grid-template-columns:1fr;
  gap:0;
  margin-top:18px;
  border-top:1px dashed var(--studio-line);
}
#cloud-entry .cloud-feature{
  position:relative;
  display:grid;
  grid-template-columns:92px 1fr;
  gap:10px;
  min-height:0;
  padding:11px 2px;
  border-radius:0;
  border-bottom:1px dashed var(--studio-line);
  background:transparent;
}
#cloud-entry .cloud-feature b{
  margin:0;
  color:var(--studio-rust);
  font:700 9px/1.35 "Space Mono",monospace;
  text-transform:lowercase;
}
#cloud-entry .cloud-feature small{
  color:var(--studio-muted);
  font-size:10.5px;
  line-height:1.42;
}
#cloud-entry .cloud-auth-head h2{letter-spacing:-.035em}
#cloud-entry .cloud-close{
  background:var(--studio-cream);
  border:1px solid var(--studio-line);
}
#cloud-entry .cloud-tabs{
  background:var(--studio-cream);
  border-radius:999px;
}
#cloud-entry .cloud-tab{border-radius:999px}
#cloud-entry .cloud-tab.active{
  background:var(--studio-ink);
  color:var(--studio-paper);
  box-shadow:none;
}
#cloud-entry .cloud-field label{
  color:var(--studio-muted);
  font:700 9px/1.2 "Space Mono",monospace;
  text-transform:lowercase;
}
#cloud-entry .cloud-field input{
  border-color:var(--studio-line);
  border-radius:10px;
  background:var(--studio-cream);
  color:var(--studio-ink);
}
#cloud-entry .cloud-field input:focus-visible{
  outline:0;
  border-color:var(--studio-rust);
  box-shadow:0 0 0 3px rgba(190,81,51,.09);
}
#cloud-entry .cloud-captcha-note,
#cloud-entry .cloud-auth-hint{color:var(--studio-muted)}
#cloud-entry .cloud-footer{
  width:min(1240px,100%);
  margin:0 auto;
  padding:18px clamp(18px,5vw,56px) max(26px,env(safe-area-inset-bottom));
  border-top:1px dashed rgba(148,136,114,.26);
  color:var(--studio-muted);
  font:400 9px/1.5 "Space Mono",monospace;
}
#cloud-entry .cloud-footer a{color:var(--studio-rust)}
#cloud-entry .cloud-footer-links{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
#cloud-entry .cloud-footer-links a{
  text-decoration:none;
  color:var(--studio-muted);
}
#cloud-entry .cloud-footer-links a:hover{color:var(--studio-rust)}
@keyframes studioMascot{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-5px) rotate(2deg)}
}
@keyframes studioSpark{
  0%,100%{transform:translateY(0) rotate(-8deg);opacity:.5}
  50%{transform:translateY(-7px) rotate(8deg);opacity:1}
}
@media(max-width:780px){
  #cloud-entry .cloud-main{
    grid-template-columns:1fr;
    gap:30px;
    padding-top:22px;
  }
  #cloud-entry .cloud-copy h1{
    font-size:clamp(44px,13vw,62px);
    max-width:12ch;
  }
  #cloud-entry .cloud-card{
    transform:none;
    border-radius:4px;
  }
  #cloud-entry .cloud-card:before,
  #cloud-entry .cloud-card:after{top:110px}
  #cloud-entry .cloud-studio-note{width:min(330px,92%)}
  #cloud-entry .cloud-footer{align-items:flex-start}
}
@media(max-width:430px){
  #cloud-entry .cloud-nav{padding-left:16px;padding-right:16px}
  #cloud-entry .cloud-main{padding-left:16px;padding-right:16px}
  #cloud-entry .cloud-brand span:after{display:none}
  #cloud-entry .cloud-copy h1{font-size:44px}
  #cloud-entry .cloud-pills span{font-size:8px}
  #cloud-entry .cloud-card{padding:18px 17px}
  #cloud-entry .cloud-mascot-row img{width:58px;height:58px}
  #cloud-entry .cloud-feature{grid-template-columns:78px 1fr}
}
@media(prefers-reduced-motion:reduce){
  #cloud-entry .cloud-shell:before,
  #cloud-entry .cloud-shell:after,
  #cloud-entry .cloud-mascot-row img{animation:none!important}
  #cloud-entry .cloud-btn,
  #cloud-entry .cloud-pills span{transition:none!important}
}