:root{
  --paper:#fffdf8;
  --ink:#33302e;
  --pink:#ff8db4;
  --pink-soft:#ffd9e6;
  --yellow:#ffe27a;
  --yellow-soft:#fff3c4;
  --blue:#8fb8ff;
  --blue-soft:#dbe8ff;
  --green:#b8e986;
  --violet:#c9b6ff;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Baloo 2",system-ui,sans-serif;
  color:var(--ink);
  background:radial-gradient(800px 500px at 15% 0%,#fff2f7 0%,transparent 60%),
             radial-gradient(900px 600px at 90% 10%,#eef5ff 0%,transparent 55%),
             radial-gradient(700px 600px at 50% 100%,#fdf8e3 0%,transparent 60%),
             #fffdf8;
  overflow-x:hidden;
}

.blobs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.blobs span{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5}
.blobs span:nth-child(1){width:180px;height:180px;background:var(--pink-soft);top:-40px;left:-50px}
.blobs span:nth-child(2){width:140px;height:140px;background:var(--blue-soft);top:20%;right:-60px}
.blobs span:nth-child(3){width:160px;height:160px;background:var(--yellow-soft);bottom:15%;left:-70px}
.blobs span:nth-child(4){width:120px;height:120px;background:#e8ddff;bottom:-40px;right:10%}

.header{position:relative;z-index:1;text-align:center;padding:clamp(22px,8vw,50px) 16px 6px}
.header h1{
  font-family:"Shadows Into Light",cursive;
  font-size:clamp(34px,11vw,68px);
  line-height:1.05;
  margin:0 auto;
  display:inline-block;
  background:linear-gradient(transparent 62%,var(--yellow) 62%);
  padding:0 8px;
  transform:rotate(-2deg);
}
.header p{
  font-family:"Shadows Into Light",cursive;
  font-size:clamp(16px,4.4vw,26px);
  margin:8px 0 0;
  opacity:.75;
  transform:rotate(1deg);
}
.arrow{
  margin:14px auto 0;
  display:inline-block;
  font-family:"Shadows Into Light",cursive;
  font-size:16px;
  color:#8a7f78;
  position:relative;
}
.arrow:after{content:"→";margin-left:6px;animation:nudge 1.4s ease-in-out infinite;display:inline-block}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

main{position:relative;z-index:1;padding:14px 0 clamp(30px,10vw,70px)}

.strip-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:22px 22px 30px;
}
.strip-wrap::-webkit-scrollbar{height:0}
.strip{display:flex;align-items:center;gap:18px;width:max-content;padding-right:30px}

.card{
  position:relative;
  flex:0 0 auto;
  width:min(72vw,300px);
  background:var(--paper);
  padding:12px 12px 18px;
  border-radius:2px;
  box-shadow:0 18px 30px -22px rgba(51,48,46,.65);
  transform:rotate(var(--rot,-2deg));
  scroll-snap-align:center;
  transition:transform .25s ease;
}
.card:active{transform:rotate(0deg) scale(1.01)}
.card .frame{position:relative;overflow:hidden;background:#f1ece2}
.card img,.card video{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
}
.card .tape{
  position:absolute;top:-11px;left:50%;width:78px;height:22px;
  transform:translateX(-50%) rotate(var(--tape,-2deg));
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 5px,rgba(255,255,255,.45) 5px 10px);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  border-radius:2px;
}
.card .badge{
  position:absolute;top:8px;right:8px;
  background:var(--pink);color:#fff;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
}

.note{
  flex:0 0 auto;
  width:min(58vw,230px);
  padding:18px 16px;
  background:var(--note,var(--yellow-soft));
  border-radius:4px;
  box-shadow:0 16px 26px -20px rgba(51,48,46,.7);
  transform:rotate(var(--rot,3deg));
  font-family:"Shadows Into Light",cursive;
  font-size:clamp(19px,5vw,26px);
  line-height:1.15;
  position:relative;
  scroll-snap-align:center;
}
.note:before{
  content:"";position:absolute;inset:6px;border:2px dashed rgba(51,48,46,.14);border-radius:2px;pointer-events:none;
}
.note.pink{--note:var(--pink-soft)}
.note.blue{--note:var(--blue-soft)}
.note.green{--note:#e2f7c8}
.note.violet{--note:#ece4ff}
.note.yellow{--note:var(--yellow-soft)}

.video-block{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 16px}
.block-title{
  font-family:"Shadows Into Light",cursive;
  font-size:clamp(24px,7vw,40px);
  margin:6px 0 0;
  transform:rotate(-1deg);
  background:linear-gradient(transparent 60%,var(--pink-soft) 60%);
  padding:0 10px;
}
.video-frame{
  width:min(94vw,760px);
  border-radius:16px;
  overflow:hidden;
  border:6px solid #fff;
  background:#000;
  box-shadow:0 28px 45px -30px rgba(51,48,46,.75);
  transform:rotate(.6deg);
}
.video-frame video{width:100%;display:block}
.note-small{font-family:"Shadows Into Light",cursive;opacity:.65;margin:0;font-size:16px}

footer{
  position:relative;z-index:1;
  text-align:center;padding:0 16px 34px;
  font-family:"Shadows Into Light",cursive;font-size:18px;opacity:.7;
  transform:rotate(-1deg);
}

@media (min-width:760px){
  .strip-wrap{padding:26px max(22px,calc(50vw - 380px)) 34px}
  .card{width:320px}
  .note{width:250px}
}