:root {
  /* Typography compliance note: Space Grotesk narration; Space Groteskkkk* for the forecast narration and clean broadcast copy. Use **Darumadrop Oneeee* sparingly for handwritten sticker phrases like “baka forecast. */
  --pink: #FF3D8D;
  --lemon: #FFF04A;
  --cyan: #35D8FF;
  --ink: #211B46;
  --melon: #FF9F6E;
  --milk: #FFF7E8;
  --violet: #8A4DFF;
  --title: "Lilita One", "Cooper Black", "Arial Black", system-ui, sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --copy: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
  --hand: "Darumadrop One", "Comic Sans MS", "Marker Felt", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--ink);
  font-family: var(--copy);
  cursor: crosshair;
}

button { font: inherit; }

.derecast { position: relative; min-height: 100vh; isolation: isolate; }

.studio-noise {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 10%, var(--ink) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 30%, var(--pink) 0 1px, transparent 1.5px),
    linear-gradient(135deg, transparent 0 48%, rgba(33, 27, 70, .45) 49% 51%, transparent 52%);
  background-size: 9px 9px, 13px 13px, 34px 34px;
}

.channel-tabs {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 90;
  display: flex;
  gap: 9px;
  transform: rotate(2deg);
}

.tab {
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--ink);
  background: var(--milk);
  box-shadow: 5px 5px 0 var(--ink);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--jp);
  font-weight: 900;
}

.tab.is-active, .tab:hover { background: var(--lemon); transform: translate(-2px, -2px); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-bottom: 8px solid var(--ink);
}

.scene::after {
  content: attr(data-scene);
  position: absolute;
  left: -34px;
  bottom: 14%;
  z-index: 20;
  padding: 9px 32px 9px 70px;
  transform: rotate(-7deg);
  border: 5px solid var(--ink);
  background: var(--milk);
  box-shadow: 8px 8px 0 var(--ink);
  color: var(--ink);
  font: 900 14px/1 var(--jp);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.morning {
  background:
    radial-gradient(circle at 72% 66%, rgba(255, 61, 141, .45) 0 14%, transparent 15%),
    linear-gradient(132deg, var(--cyan) 0 42%, var(--milk) 42% 46%, var(--pink) 46% 70%, var(--melon) 70% 100%);
}

.sunburst {
  position: absolute;
  width: 96vmax;
  height: 96vmax;
  left: 18%;
  top: -40vmax;
  border-radius: 50%;
  border: 9px solid var(--ink);
  background: repeating-conic-gradient(from 0deg, var(--lemon) 0 9deg, var(--pink) 9deg 18deg, var(--cyan) 18deg 27deg, var(--milk) 27deg 36deg);
  animation: spin 17s linear infinite;
  box-shadow: 0 0 0 18px rgba(255, 247, 232, .25), 18px 18px 0 var(--ink);
}

.hero-copy {
  position: absolute;
  left: 5vw;
  top: 18vh;
  z-index: 10;
  width: min(900px, 88vw);
  transform: rotate(-6deg);
}

.slug {
  display: inline-block;
  margin: 0 0 16px;
  padding: 9px 16px;
  border: 4px solid var(--ink);
  background: var(--lemon);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--jp);
  font-size: clamp(12px, 1.4vw, 16px);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1, h2 { font-family: var(--title); line-height: .85; letter-spacing: .01em; margin: 0; text-transform: uppercase; }

h1 {
  display: grid;
  gap: 1vw;
  font-size: clamp(70px, 15vw, 210px);
  color: var(--milk);
  text-shadow: 8px 8px 0 var(--ink), 16px 16px 0 var(--violet), -6px -6px 0 var(--lemon);
  animation: titleSlam .9s cubic-bezier(.17, 1.25, .39, 1) both;
}

.forecast-line {
  max-width: 640px;
  margin: 20px 0 0 20px;
  padding: 14px 20px;
  border: 5px solid var(--ink);
  background: var(--milk);
  box-shadow: 9px 9px 0 var(--ink);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
}

.dere-radar {
  position: absolute;
  border: 7px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 247, 232, .9) 0 10%, rgba(53, 216, 255, .7) 11% 34%, rgba(138, 77, 255, .55) 35% 56%, rgba(33, 27, 70, .94) 57%);
  box-shadow: 12px 12px 0 var(--ink), inset 0 0 0 6px var(--milk);
  overflow: hidden;
}

.hero-radar { right: 6vw; bottom: 14vh; width: clamp(230px, 29vw, 430px); aspect-ratio: 1; z-index: 11; }
.map-radar { right: 8vw; top: 8vh; width: clamp(200px, 25vw, 340px); aspect-ratio: 1; z-index: 14; transform: rotate(9deg); }

.radar-grid, .radar-grid::before, .radar-grid::after { position: absolute; inset: 18%; border: 3px solid rgba(255, 247, 232, .7); border-radius: 50%; }
.radar-grid::before { content: ""; inset: -35%; }
.radar-grid::after { content: ""; inset: 35%; background: linear-gradient(var(--milk), var(--milk)) center/100% 3px no-repeat, linear-gradient(90deg, var(--milk), var(--milk)) center/3px 100% no-repeat; }

.radar-sweep {
  position: absolute;
  inset: 50% 50% 0 50%;
  width: 48%;
  height: 5px;
  background: var(--lemon);
  transform-origin: left center;
  animation: sweep 2.8s linear infinite;
  box-shadow: 0 0 18px var(--lemon);
}

.radar-heart { position: absolute; left: 43%; top: 32%; color: var(--pink); font: 900 clamp(42px, 6vw, 84px)/1 var(--title); animation: pulse 1.1s infinite; }

.redaction-bar {
  position: absolute;
  z-index: 4;
  padding: 5px 13px;
  background: var(--ink);
  color: var(--milk);
  font: 900 13px/1 var(--jp);
  letter-spacing: .1em;
  transform: rotate(-8deg);
  animation: redact 3.6s infinite both;
}
.bar-a { left: 20%; top: 54%; }
.bar-b { left: 46%; top: 39%; animation-delay: .6s; }
.bar-c { left: 28%; top: 47%; animation-delay: .25s; }

.cold-front {
  position: absolute;
  height: 46px;
  width: 130vw;
  z-index: 9;
  background: linear-gradient(90deg, var(--cyan), var(--milk), var(--cyan));
  border: 6px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  clip-path: polygon(0 52%, 4% 0, 8% 52%, 12% 0, 16% 52%, 20% 0, 24% 52%, 28% 0, 32% 52%, 36% 0, 40% 52%, 44% 0, 48% 52%, 52% 0, 56% 52%, 60% 0, 64% 52%, 68% 0, 72% 52%, 76% 0, 80% 52%, 84% 0, 88% 52%, 92% 0, 96% 52%, 100% 0, 100% 100%, 0 100%);
}
.ribbon-one { top: 18vh; left: -15vw; transform: rotate(-18deg); animation: drift 9s ease-in-out infinite alternate; }
.ribbon-two { bottom: 8vh; left: -10vw; transform: rotate(11deg); animation: drift 7s ease-in-out infinite alternate-reverse; }

.sticker {
  position: absolute;
  z-index: 17;
  border: 5px solid var(--ink);
  background: var(--lemon);
  box-shadow: 7px 7px 0 var(--ink);
  font-family: var(--hand);
  font-size: clamp(22px, 3vw, 48px);
  padding: 12px 18px;
  transform: rotate(12deg);
}
.sun-face { right: 20vw; top: 12vh; border-radius: 50% 46% 54% 48%; animation: wobble 2s infinite; }
.baka { left: 8vw; top: 15vh; color: var(--pink); transform: rotate(-11deg); }

.chyron, .closing-chyron {
  position: absolute;
  z-index: 30;
  left: -5vw;
  width: 110vw;
  border-block: 5px solid var(--ink);
  background: var(--ink);
  color: var(--milk);
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--jp);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.top-chyron { top: 4.5vh; transform: rotate(-2deg); }
.bottom-chyron { bottom: 3vh; transform: rotate(2deg); background: var(--pink); color: var(--ink); }
.chyron span, .closing-chyron span { display: inline-block; padding: 12px 0; min-width: 200%; animation: ticker 15s linear infinite; }

.map { background: linear-gradient(148deg, var(--milk) 0 35%, var(--cyan) 35% 53%, var(--violet) 53% 72%, var(--pink) 72%); }
.map-sheet { position: absolute; inset: 7vh 8vw; border: 6px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); background-color: rgba(255, 247, 232, .78); }
.layer-a { transform: rotate(-4deg); background-image: radial-gradient(circle at 25% 25%, rgba(255, 61, 141, .85) 0 3px, transparent 4px), radial-gradient(circle at 70% 60%, rgba(33, 27, 70, .38) 0 2px, transparent 3px); background-size: 19px 19px, 13px 13px; }
.layer-b { inset: 15vh 17vw 14vh 4vw; transform: rotate(5deg); background: repeating-linear-gradient(12deg, transparent 0 22px, rgba(53, 216, 255, .55) 23px 26px), rgba(255, 247, 232, .62); }
.isobars { position: absolute; inset: 0; background: radial-gradient(ellipse at 31% 49%, transparent 0 13%, var(--ink) 13.2% 13.8%, transparent 14% 20%, var(--ink) 20.2% 20.8%, transparent 21% 29%, var(--ink) 29.2% 29.8%, transparent 30%), radial-gradient(ellipse at 65% 63%, transparent 0 10%, var(--ink) 10.2% 10.9%, transparent 11% 18%, var(--ink) 18.2% 18.8%, transparent 19%); opacity: .32; }
.pressure-cell { position: absolute; z-index: 12; display: grid; place-items: center; border: 6px solid var(--ink); border-radius: 50%; color: var(--milk); background: radial-gradient(circle, var(--pink), var(--violet)); box-shadow: 10px 10px 0 var(--ink); font: 900 clamp(17px, 2.5vw, 34px)/1 var(--title); text-transform: uppercase; animation: pulse 1.9s infinite; }
.cell-one { left: 17vw; top: 30vh; width: 22vw; min-width: 190px; aspect-ratio: 1; }
.cell-two { left: 46vw; bottom: 18vh; width: 18vw; min-width: 150px; aspect-ratio: 1; animation-delay: .5s; }
.map-front { left: -20vw; bottom: 16vh; transform: rotate(-9deg); }

.broadcast-card {
  position: absolute;
  z-index: 18;
  max-width: 560px;
  padding: clamp(20px, 3vw, 38px);
  border: 7px solid var(--ink);
  background: var(--milk);
  box-shadow: 14px 14px 0 var(--ink);
}
.denial-card { left: 8vw; top: 12vh; transform: rotate(-3deg); }
.broadcast-card h2, .final-bulletin h2 { font-size: clamp(42px, 6vw, 86px); color: var(--pink); text-shadow: 4px 4px 0 var(--lemon), 7px 7px 0 var(--ink); }
.broadcast-card p:not(.slug), .final-bulletin p:not(.slug) { font-size: clamp(17px, 1.7vw, 24px); line-height: 1.25; font-weight: 800; }
.caption-cloud { position: absolute; z-index: 19; max-width: 280px; padding: 18px 22px; border: 5px solid var(--ink); border-radius: 44px 48px 38px 52px; background: var(--milk); box-shadow: 8px 8px 0 var(--ink); font: 900 18px/1.1 var(--jp); }
.cloud-a { right: 25vw; bottom: 10vh; transform: rotate(7deg); }
.cloud-b { left: 48vw; top: 45vh; transform: rotate(-6deg); }

.rooftop { background: linear-gradient(170deg, var(--lemon) 0 12%, var(--melon) 12% 36%, var(--milk) 36%); }
.notebook { position: absolute; inset: 10vh 9vw 8vh 13vw; border: 7px solid var(--ink); transform: rotate(3deg); box-shadow: 14px 14px 0 var(--ink); background: repeating-linear-gradient(0deg, var(--milk) 0 37px, rgba(53,216,255,.42) 38px 41px), linear-gradient(90deg, transparent 0 62px, var(--pink) 63px 67px, transparent 68px); }
.rooftop-rail { position: absolute; left: 0; right: 0; bottom: 18vh; height: 72px; border-block: 7px solid var(--ink); background: repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 95px), var(--cyan); transform: rotate(-2deg); }
.rooftop-card { right: 8vw; top: 18vh; transform: rotate(4deg); }
.umbrella { position: absolute; z-index: 15; color: var(--violet); text-shadow: 5px 5px 0 var(--ink); font-size: clamp(72px, 10vw, 150px); animation: floaty 3s ease-in-out infinite; }
.umbrella-a { left: 18vw; bottom: 25vh; transform: rotate(-15deg); }
.umbrella-b { left: 43vw; top: 18vh; color: var(--pink); animation-delay: .9s; transform: rotate(12deg); }
.rain-notes { position: absolute; inset: 0; pointer-events: none; }
.note-drop { position: absolute; color: var(--ink); font: 900 24px/1 var(--hand); animation: rainFall 3.8s linear forwards; }
.thermometer { position: absolute; left: 12vw; bottom: 10vh; z-index: 18; width: 76px; height: 320px; border: 7px solid var(--ink); border-radius: 50px; background: var(--milk); box-shadow: 9px 9px 0 var(--ink); transform: rotate(-7deg); }
.thermometer span { position: absolute; left: 15px; right: 15px; bottom: 16px; height: 56%; border-radius: 30px; background: linear-gradient(var(--pink), var(--melon)); transition: height .4s cubic-bezier(.17, 1.25, .39, 1); }
.thermometer b { position: absolute; left: 78px; top: 34px; padding: 8px; border: 4px solid var(--ink); background: var(--lemon); font: 900 14px/1 var(--jp); }

.evening { background: linear-gradient(145deg, var(--ink) 0 33%, var(--violet) 33% 46%, var(--melon) 46% 78%, var(--pink) 78%); color: var(--milk); }
.sunset-heart { position: absolute; left: 50%; top: 45%; width: min(55vw, 560px); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg); border: 8px solid var(--ink); background: radial-gradient(circle at 32% 32%, var(--lemon), var(--melon) 38%, var(--pink) 70%); box-shadow: 18px 18px 0 var(--ink); animation: heartBeat 2.3s infinite; }
.sunset-heart::before, .sunset-heart::after { content: ""; position: absolute; width: 100%; height: 100%; border: 8px solid var(--ink); border-radius: 50%; background: inherit; }
.sunset-heart::before { left: -50%; top: 0; }
.sunset-heart::after { top: -50%; left: 0; }
.melt-front { position: absolute; left: -10vw; top: 13vh; width: 120vw; height: 90px; border: 7px solid var(--ink); background: linear-gradient(90deg, var(--cyan), var(--pink), var(--melon)); clip-path: polygon(0 0, 100% 0, 100% 55%, 94% 70%, 88% 45%, 82% 90%, 76% 58%, 69% 100%, 63% 45%, 55% 78%, 49% 50%, 43% 100%, 36% 55%, 29% 75%, 23% 45%, 16% 96%, 9% 62%, 0 85%); transform: rotate(4deg); }
.studio-desk { position: absolute; left: 8vw; right: 8vw; bottom: 0; height: 24vh; border: 8px solid var(--ink); background: var(--milk); box-shadow: inset 0 18px 0 var(--lemon); transform: perspective(500px) rotateX(16deg); }
.final-bulletin { position: absolute; z-index: 16; left: 7vw; top: 20vh; max-width: 720px; padding: clamp(22px, 4vw, 44px); border: 7px solid var(--ink); background: rgba(255, 247, 232, .94); color: var(--ink); box-shadow: 14px 14px 0 var(--ink); transform: rotate(-3deg); }
.evening-stamps { position: absolute; z-index: 18; right: 7vw; bottom: 18vh; display: grid; gap: 18px; transform: rotate(8deg); }
.evening-stamps span { display: block; padding: 14px 19px; border: 5px solid var(--ink); background: var(--lemon); color: var(--ink); box-shadow: 7px 7px 0 var(--ink); font: 900 clamp(22px, 3vw, 46px)/1 var(--hand); }
.closing-chyron { bottom: 6vh; transform: rotate(-1deg); background: var(--milk); color: var(--ink); }

.pointer-revise .pressure-cell { filter: hue-rotate(40deg) saturate(1.25); transform: scale(1.04); }
.pointer-revise .cold-front { animation-duration: 3.5s; }
.dragging .redaction-bar { animation-duration: .75s; }
.dragging .thermometer span { height: 86%; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.12) rotate(-3deg); } }
@keyframes titleSlam { 0% { transform: translate(-18vw, -24vh) rotate(-18deg) scale(.35); opacity: 0; } 70% { transform: translate(0, 0) rotate(2deg) scale(1.05); opacity: 1; } 100% { transform: none; } }
@keyframes redact { 0%, 42% { transform: translateX(-140%) rotate(-8deg); } 55%, 100% { transform: translateX(0) rotate(-8deg); } }
@keyframes drift { to { translate: 10vw 3vh; } }
@keyframes wobble { 50% { transform: rotate(-9deg) scale(1.08); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes floaty { 50% { translate: 0 -22px; } }
@keyframes rainFall { from { transform: translateY(-16vh) rotate(-12deg); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(105vh) rotate(18deg); opacity: .75; } }
@keyframes heartBeat { 50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.08); } }

@media (max-width: 760px) {
  .channel-tabs { left: 10px; right: auto; top: 10px; transform: scale(.82); transform-origin: left top; }
  .hero-radar { right: -12vw; bottom: 8vh; opacity: .9; }
  .hero-copy { left: 3vw; top: 20vh; }
  .denial-card, .rooftop-card, .final-bulletin { left: 5vw; right: 5vw; top: 18vh; max-width: none; }
  .map-radar { right: -18vw; top: 55vh; }
  .caption-cloud { display: none; }
  .evening-stamps { right: 6vw; bottom: 9vh; }
}