/* Summer Explorer art direction
 * Deep-ocean field + sunlit paper + coral / lime / cyan wayfinding.
 */
:root {
  --bg: #061827;
  --bg-soft: #0a2234;
  --surface: rgba(250, 248, 238, 0.94);
  --surface-2: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 221, 130, 0.42);
  --text-1: #f8f3df;
  --text-2: #bdd4d7;
  --text-3: #7899a3;
  --ink: #102d3a;
  --ink-soft: #4e6b70;
  --accent: #ff795f;
  --accent-2: #ffd75d;
  --accent-3: #42d7c5;
  --good: #95df79;
  --warn: #ffd75d;
  --bad: #ff795f;
  --grad: linear-gradient(105deg, #fff5b8 0%, #ffd75d 26%, #ff795f 58%, #42d7c5 100%);
  --grad-soft: linear-gradient(145deg, rgba(255, 215, 93, 0.13), rgba(66, 215, 197, 0.08));
  --radius: 24px;
  --radius-sm: 15px;
  --radius-lg: 38px;
  --shadow: 0 22px 70px rgba(0, 6, 17, 0.28), inset 0 1px 0 rgba(255,255,255,.72);
  --shadow-lg: 0 30px 90px rgba(0, 5, 16, 0.42), 0 0 0 1px rgba(255,215,93,.18);
  --font-sans: 'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
  --font-display: 'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
  --ease-out: cubic-bezier(.16,1,.3,1);
}

html, body {
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 215, 93, .10), transparent 30%),
    radial-gradient(circle at 12% 86%, rgba(66, 215, 197, .13), transparent 34%),
    linear-gradient(145deg, #061521, #09283a 52%, #071c2c);
}

body::before {
  z-index: 0;
  opacity: .2;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.deck {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(22, 112, 119, .28), transparent 55%),
    linear-gradient(160deg, rgba(4, 20, 32, .88), rgba(7, 39, 56, .72));
}

.deck::before,
.deck::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.deck::before {
  inset: 0;
  opacity: .2;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) .7px, transparent .9px);
  background-size: 20px 20px;
  mask-image: linear-gradient(105deg, transparent 15%, black 50%, transparent 85%);
}

.deck::after {
  width: 44vw;
  height: 44vw;
  right: -18vw;
  top: -25vw;
  border: 1px solid rgba(255, 215, 93, .2);
  border-radius: 50%;
  box-shadow:
    0 0 0 7vw rgba(255, 215, 93, .025),
    0 0 0 14vw rgba(255, 215, 93, .018);
}

.deck > canvas {
  z-index: 1 !important;
  mix-blend-mode: screen;
}

.gsap-transition-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.gsap-transition-wash,
.gsap-transition-edge,
.gsap-transition-paper,
.gsap-transition-ripple,
.gsap-transition-leaf,
.gsap-transition-bubble,
.gsap-transition-spark {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
}

.gsap-transition-wash {
  top: -18%;
  bottom: -18%;
  width: 42%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.82), rgba(255,236,151,.36) 34%, rgba(104,205,224,.12) 62%, transparent 76%);
  mix-blend-mode: screen;
}

.gsap-transition-edge {
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .92), rgba(255, 182, 54, .56), transparent);
  box-shadow: 0 0 22px rgba(255, 196, 75, .34);
  mix-blend-mode: screen;
}

.gsap-transition-paper {
  top: -8%;
  bottom: -8%;
  width: 54%;
  border-radius: 38px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,.78) 38%, rgba(255,243,191,.46) 62%, rgba(137,216,232,.10)),
    radial-gradient(circle at 22% 24%, rgba(255, 179, 33, .20), transparent 30%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    0 18px 44px rgba(87, 154, 180, .12);
  mix-blend-mode: screen;
}

.gsap-transition-ripple {
  width: 42vw;
  height: 18vh;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.58);
  background: radial-gradient(ellipse at 50% 50%, rgba(98, 202, 224, .24), transparent 66%);
  mix-blend-mode: screen;
}

.gsap-transition-leaf {
  width: 34px;
  height: 16px;
  border-radius: 50% 52% 48% 50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(141, 194, 83, .68) 44%, rgba(73, 144, 73, .45));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.36);
  mix-blend-mode: screen;
}

.gsap-transition-leaf::after {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,.58);
  transform: translateY(-50%) rotate(-8deg);
}

.gsap-transition-bubble {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.58);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.80), rgba(255,255,255,.18) 30%, rgba(95, 199, 225, .22) 72%, transparent);
  mix-blend-mode: screen;
}

.gsap-transition-spark {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 185, 58, .82);
  box-shadow: 0 0 16px rgba(255, 196, 75, .60);
  mix-blend-mode: screen;
}

.slide {
  z-index: 2;
  max-width: 100vw;
  max-height: 100vh;
  padding: clamp(42px, 6vh, 72px) clamp(56px, 6.8vw, 112px);
  transform: translate3d(5vw, 0, 0) scale(.985);
  transition:
    opacity .55s var(--ease-out),
    transform .75s var(--ease-out);
  contain: layout paint;
  overflow: clip;
}

.slide::before {
  content: attr(data-title);
  position: absolute;
  top: 26px;
  right: 54px;
  color: rgba(255,255,255,.19);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.slide::after {
  content: '';
  position: absolute;
  left: 40px;
  top: 50%;
  width: 1px;
  height: 34%;
  transform: translateY(-50%);
  background: linear-gradient(transparent, rgba(255,215,93,.7), transparent);
}

.slide.is-active {
  z-index: 3;
  transform: translate3d(0,0,0) scale(1);
  filter: none;
  animation: explorer-slide-reveal .68s var(--ease-out) both;
}

.slide.is-prev {
  transform: translate3d(-4vw,0,0) scale(.985);
}

@keyframes explorer-slide-reveal {
  from {
    opacity: 0;
    clip-path: inset(0 6% 0 6% round 32px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 0);
  }
}

.slide > *:not(.bg-glow):not(.bg-dots):not(.corner-deco):not(.notes):not(.deck-footer) {
  position: relative;
  z-index: 3;
}

.slide > .deck-footer {
  position: absolute !important;
}

.slide[data-slide-id="cover"],
.slide[data-slide-id="closing"] {
  background:
    radial-gradient(circle at 50% 50%, rgba(10, 54, 70, .32), transparent 56%);
}

.cover-slide {
  display: grid;
  align-items: center;
}

.cover-shell {
  width: min(100%, 1040px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(280px, .72fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}

.cover-copy {
  text-align: left;
}

.slide[data-slide-id="cover"] .h1,
.slide[data-slide-id="closing"] .h1 {
  font-size: clamp(64px, 9vw, 132px);
  letter-spacing: -.065em;
}

.cover-line {
  max-width: 210px;
  margin: 18px 0 18px;
}

.cover-sub {
  max-width: 32em;
  margin-bottom: 26px;
  color: var(--text-2);
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: .08em;
}

.cover-illustration-panel {
  position: relative;
  min-height: 430px;
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 30px;
  border: 1px solid rgba(255, 215, 93, .14);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 215, 93, .16), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(66, 215, 197, .14), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 28px 80px rgba(0,0,0,.22);
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.cover-illustration-panel::before {
  content: '';
  position: absolute;
  inset: 26px;
  border-radius: 32px;
  border: 1px dashed rgba(255, 215, 93, .18);
  transform: rotate(-7deg);
}

.cover-illustration-panel::after {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  right: -62px;
  bottom: -68px;
  border: 22px solid rgba(66, 215, 197, .12);
  border-radius: 50%;
}


.h1, h1.title {
  font-size: clamp(50px, 6.3vw, 92px);
  color: var(--text-1);
  line-height: .98;
  letter-spacing: -.055em;
  max-width: none;
  white-space: nowrap;
  text-wrap: nowrap;
}

.h2, h2.title {
  max-width: none;
  font-size: clamp(38px, 4.5vw, 66px);
  color: var(--text-1);
  line-height: 1.03;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-wrap: nowrap;
}

.motion-glyph {
  display: inline-block;
  transform-origin: 50% 82%;
  will-change: transform, opacity;
}

.h1 .motion-glyph,
.h2 .motion-glyph {
  text-shadow: 0 10px 34px rgba(0,0,0,.12);
}

.kicker {
  width: fit-content;
  padding: 7px 14px 7px 10px;
  color: #fff2a3;
  border: 1px solid rgba(255,215,93,.24);
  background: rgba(255,215,93,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  letter-spacing: .12em;
}

.kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 18px rgba(255,215,93,.9);
}

.lede,
.lede-lg {
  color: var(--text-2);
  font-weight: 450;
}

.lede-lg { font-size: clamp(19px, 2vw, 27px); }

.gradient-text {
  background: var(--grad);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 10px 38px rgba(255,121,95,.16));
  animation: explorer-gradient 7s ease-in-out infinite alternate;
}

.gradient-text .motion-glyph {
  background: inherit;
  background-size: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes explorer-gradient {
  from { background-position: 0 50%; }
  to { background-position: 100% 50%; }
}

.highlight {
  color: #fff3a5;
  background: linear-gradient(180deg, transparent 62%, rgba(255,121,95,.38) 62%) no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 16px rgba(255,215,93,.12));
}

.grid {
  gap: clamp(14px, 1.7vw, 26px);
}

.card {
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,247,239,.92));
  border: 1px solid rgba(255,255,255,.62);
  border-top: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    border-color .3s ease;
  will-change: transform;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--card-accent, var(--accent));
}

.card::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  right: -55px;
  bottom: -65px;
  border: 18px solid color-mix(in srgb, var(--card-accent, var(--accent)) 12%, transparent);
  border-radius: 50%;
  transition: transform .55s var(--ease-out);
}

.card:hover {
  transform: perspective(900px) translateY(-8px) rotateX(1.2deg) rotateY(-.8deg);
  box-shadow: var(--shadow-lg);
}

.card:hover::after { transform: scale(1.2) rotate(24deg); }
.card h4 { color: var(--ink); font-weight: 850; letter-spacing: -.025em; }
.card .dim { color: var(--ink-soft); }
.card-sun { --card-accent: #f0bf34; }
.card-sea { --card-accent: #18adad; }
.card-leaf { --card-accent: #78c865; }
.card-coral { --card-accent: #ff795f; }
.card-ink { --card-accent: #355d74; }

.card-emoji-big {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 14%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 20%, transparent);
}

.card:hover .card-emoji-big {
  transform: translateY(-4px) scale(1.08) rotate(-7deg);
}

.card-icon-badge {
  top: 14px;
  right: 14px;
  color: var(--ink);
  border: 1px solid rgba(16,45,58,.08);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
}

.timeline-row,
.step-row {
  color: var(--ink);
  background: rgba(247,248,238,.92);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 12px 34px rgba(0,8,18,.16);
}

.day-grid {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.day-grid .timeline-row {
  min-height: 112px;
  margin-bottom: 0;
  align-items: flex-start;
  padding: 18px 20px 18px 18px;
  gap: 14px;
}

.day-grid .timeline-time {
  min-width: 0;
  width: 112px;
  padding-top: 1px;
  line-height: 1.2;
  white-space: normal;
}

.day-grid .timeline-title {
  font-size: 18px;
  line-height: 1.18;
}

.day-grid .timeline-detail {
  margin-top: 5px;
  line-height: 1.45;
}

.slide[data-slide-id="day"] .day-grid {
  gap: 11px 18px;
}

.slide[data-slide-id="day"] .timeline-row {
  min-height: 84px;
  padding: 13px 17px 13px 16px;
  gap: 12px;
}

.slide[data-slide-id="day"] .timeline-title {
  font-size: 17px;
}

.slide[data-slide-id="day"] .timeline-detail {
  margin-top: 4px;
  line-height: 1.34;
}

.timeline-row:hover,
.step-row:hover {
  background: #fffdf5;
  transform: translateX(10px);
}

.timeline-title,
.step-title { color: var(--ink); }
.timeline-detail,
.step-desc { color: var(--ink-soft); }

.week-grid {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(3,19,29,.4);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
}

.week-header {
  color: #fff3a5;
  background: rgba(255,215,93,.09);
}

.week-day {
  color: #ffd75d;
  background: rgba(255,215,93,.12);
}

.week-cell {
  color: #d7e7e4;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.08);
}

.quote-block {
  width: fit-content;
  max-width: 90%;
  color: #fff3a5;
  border: 1px solid rgba(255,215,93,.18);
  border-left: 4px solid var(--accent-2);
  background: linear-gradient(90deg, rgba(255,215,93,.12), rgba(255,255,255,.035));
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
}

.stamp {
  color: #071c2c;
  border: 0;
  background: var(--accent-2);
  box-shadow:
    0 0 0 5px rgba(255,215,93,.12),
    0 18px 50px rgba(0,0,0,.3);
  transform: rotate(-3deg);
}

.tag {
  color: #b53b2d;
  background: rgba(255,121,95,.13);
}

.deck-footer {
  left: 58px;
  right: 58px;
  bottom: 24px;
  color: rgba(218,237,235,.42);
  letter-spacing: .08em;
}

.slide-number {
  color: #fff1a0;
  font-variant-numeric: tabular-nums;
}

.progress-bar {
  left: 5vw;
  right: 5vw;
  bottom: 10px;
  height: 2px;
  background: rgba(255,255,255,.06);
}

.progress-bar > span {
  background: linear-gradient(90deg, #42d7c5, #ffd75d, #ff795f);
  box-shadow: 0 0 16px rgba(255,215,93,.55);
}

.nav-arrow {
  width: 46px !important;
  height: 46px !important;
  color: #fff1a0 !important;
  border: 1px solid rgba(255,215,93,.2) !important;
  background: rgba(4,22,34,.62) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(14px);
  opacity: .48 !important;
}

.nav-arrow:hover {
  color: #061827 !important;
  background: #ffd75d !important;
  opacity: 1 !important;
}

.nav-arrow:active {
  transform: translateY(-50%) scale(.92) !important;
  transition-duration: .12s !important;
}

.bg-glow {
  filter: blur(90px);
  opacity: .13;
  mix-blend-mode: screen;
}

.bg-glow.g1 { background: #ff795f; }
.bg-glow.g2 { background: #42d7c5; }
.bg-glow.g3 { background: #ffd75d; }
.corner-deco { opacity: .22 !important; filter: drop-shadow(0 0 20px rgba(255,215,93,.2)); }

.blur-up,
.blur-up-d1,
.blur-up-d2,
.anim-fade-up,
.bounce-list > *,
.anim-stagger-list > * {
  animation-duration: .78s;
  animation-timing-function: var(--ease-out);
}

.bounce-list > *:nth-child(odd),
.anim-stagger-list > *:nth-child(odd) {
  transform-origin: 10% 100%;
}

@media (max-width: 1024px) {
  .slide { padding: 42px 52px; }
  .slide::after { left: 24px; }
  .slide::before { right: 28px; }
  .h1, h1.title { font-size: clamp(28px, 5.4vw, 54px); }
  .h2, h2.title { font-size: clamp(26px, 4.45vw, 44px); }
  .cover-shell { grid-template-columns: 1fr .82fr; gap: 30px; }
  .cover-illustration-panel { min-height: 340px; padding: 22px; }
  .day-grid { width: min(100%, 900px); }
  .day-grid .timeline-row { min-height: 104px; padding: 15px 16px; }
  .day-grid .timeline-time { width: 96px; }
  .card { padding: 22px; }
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .slide { padding: 58px 28px 48px; justify-content: flex-start; overflow-y: auto; }
  .slide::after, .slide::before { display: none; }
  .nav-arrow { display: none !important; }
  .h1, h1.title { font-size: clamp(26px, 9.2vw, 42px); }
  .h2, h2.title { font-size: clamp(22px, 7.1vw, 34px); }
  .slide[data-slide-id="cover"] .h1,
  .slide[data-slide-id="closing"] .h1 { font-size: clamp(34px, 10vw, 46px); }
  .cover-slide { align-items: flex-start; }
  .cover-shell { grid-template-columns: 1fr; gap: 24px; }
  .cover-illustration-panel { min-height: 220px; padding: 18px; gap: 12px; transform: none; }
  .cover-illustration-panel::before { inset: 16px; }
  .day-grid { grid-template-columns: 1fr; }
  .day-grid .timeline-row { min-height: auto; }
  .g2, .g3, .grid.g4 { grid-template-columns: 1fr !important; }
  .card { padding: 20px 22px; }
  .mt-l { margin-top: 20px; }
  .week-grid { min-width: 650px; }
  .slide:has(.week-grid) { overflow-x: auto; }
  .deck-footer { left: 28px; right: 28px; }
}

@media (max-width: 480px) {
  .h2, h2.title { font-size: clamp(20px, 6.7vw, 30px); }
  .slide[data-slide-id="closing"] .h1 { font-size: clamp(24px, 7vw, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  .slide.is-active,
  .motion-glyph,
  .gradient-text,
  .float,
  .bounce,
  .pulse {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}

/* ===== Picture-book daylight refresh ===== */
:root {
  --bg: #dff4ff;
  --bg-soft: #bfe8fb;
  --surface: rgba(255, 253, 239, 0.92);
  --surface-2: rgba(255, 255, 255, 0.56);
  --border: rgba(47, 129, 179, 0.18);
  --border-strong: rgba(255, 178, 43, 0.50);
  --text-1: #174d86;
  --text-2: #386f8e;
  --text-3: #6a98a9;
  --ink: #123d5e;
  --ink-soft: #53778a;
  --accent: #ff6d31;
  --accent-2: #ffb321;
  --accent-3: #1678d3;
  --good: #65ad45;
  --grad: linear-gradient(105deg, #ffb321 0%, #ff8a20 34%, #ff603b 58%, #187bd1 100%);
  --grad-soft: linear-gradient(145deg, rgba(255, 241, 180, .74), rgba(210, 241, 255, .72));
  --shadow: 0 22px 55px rgba(66, 141, 178, 0.18), inset 0 1px 0 rgba(255,255,255,.95);
  --shadow-lg: 0 32px 76px rgba(55, 128, 166, 0.24), 0 0 0 1px rgba(255, 178, 43, .2);
}

html,
body {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .9), transparent 26%),
    radial-gradient(circle at 84% 22%, rgba(255, 228, 119, .38), transparent 23%),
    linear-gradient(180deg, #c9efff 0%, #eaf9ff 43%, #bde7f6 68%, #9dd8ef 100%);
}

body::before {
  opacity: .34;
  background:
    radial-gradient(circle at 18% 90%, rgba(93, 173, 87, .20), transparent 24%),
    radial-gradient(circle at 76% 88%, rgba(54, 150, 194, .20), transparent 25%),
    linear-gradient(rgba(31, 124, 176, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 124, 176, .045) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
  mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.72) 70%, transparent);
}

.deck {
  background:
    radial-gradient(ellipse at 20% 104%, rgba(115, 184, 91, .34), transparent 34%),
    radial-gradient(ellipse at 82% 108%, rgba(54, 150, 194, .28), transparent 35%),
    linear-gradient(180deg, rgba(226, 248, 255, .78), rgba(253, 248, 222, .24) 52%, rgba(133, 205, 229, .32));
}

.deck::before {
  opacity: .45;
  background-image:
    radial-gradient(circle, rgba(18, 112, 169, .16) .75px, transparent 1px),
    radial-gradient(circle, rgba(255, 179, 33, .22) 1px, transparent 1.5px);
  background-size: 24px 24px, 83px 83px;
  mask-image: linear-gradient(100deg, transparent 4%, black 48%, transparent 96%);
}

.deck::after {
  width: 52vw;
  height: 52vw;
  right: -20vw;
  top: -30vw;
  border-color: rgba(255, 179, 33, .28);
  box-shadow:
    0 0 0 8vw rgba(255, 216, 92, .10),
    0 0 0 16vw rgba(255, 255, 255, .10);
}

.deck > canvas {
  mix-blend-mode: multiply;
  opacity: .82;
}

.slide {
  color: var(--ink);
  filter: saturate(.9) blur(2px);
}

.slide::before {
  color: rgba(23, 77, 134, .18);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.slide::after {
  background: linear-gradient(transparent, rgba(255, 179, 33, .75), rgba(24, 123, 209, .5), transparent);
}

.slide[data-slide-id="cover"],
.slide[data-slide-id="closing"] {
  background:
    radial-gradient(circle at 70% 24%, rgba(255, 231, 142, .34), transparent 30%),
    radial-gradient(ellipse at 50% 112%, rgba(82, 173, 206, .32), transparent 52%);
}

.h1,
h1.title,
.h2,
h2.title {
  color: var(--text-1);
  text-shadow:
    0 2px 0 rgba(255,255,255,.76),
    0 8px 16px rgba(69, 133, 163, .12);
  -webkit-text-stroke: .55px rgba(255,255,255,.42);
}

.h1,
h1.title {
  font-size: clamp(48px, 6.4vw, 94px);
}

.h2,
h2.title {
  font-size: clamp(34px, 4.35vw, 60px);
}

.slide[data-slide-id="cover"] .h1,
.slide[data-slide-id="closing"] .h1 {
  font-size: clamp(68px, 8.4vw, 118px);
}

.gradient-text {
  filter:
    drop-shadow(0 5px 0 rgba(255,255,255,.95))
    drop-shadow(0 15px 18px rgba(255, 137, 32, .22));
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.gradient-text .motion-glyph {
  background: linear-gradient(105deg, #ffbd25 0%, #ff8c18 34%, #ff653c 64%, #177bd3 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.highlight {
  color: #ff7436;
  background: linear-gradient(180deg, transparent 58%, rgba(255, 213, 70, .62) 58%) no-repeat;
  filter: none;
}

.kicker {
  color: #195a93;
  border-color: rgba(24, 123, 209, .22);
  background: rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 10px 28px rgba(61, 144, 181, .12);
}

.kicker::before {
  background: var(--accent-2);
  box-shadow: 0 0 14px rgba(255, 179, 33, .72);
}

.lede,
.lede-lg,
.cover-sub {
  color: var(--text-2);
}

.cover-illustration-panel {
  transform: translateX(-46px);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.slide[data-slide-id="cover"] .slide-sticker.sticker-girlMap,
.slide[data-slide-id="cover"] .slide-sticker.sticker-boyRacket {
  opacity: .88;
}

.h1 .motion-glyph,
.h2 .motion-glyph {
  text-shadow:
    0 2px 0 rgba(255,255,255,.62),
    0 7px 14px rgba(69, 133, 163, .10);
}

.cover-illustration-panel::before {
  display: none;
}

.cover-illustration-panel::after {
  opacity: .34;
}

.card {
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.86);
  border-top: 1px solid rgba(255,255,255,.96);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 229, 127, .28), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255, 249, 228,.88));
  box-shadow: var(--shadow);
}

.card::before {
  width: 7px;
  background: linear-gradient(180deg, var(--card-accent, var(--accent)), color-mix(in srgb, var(--card-accent, var(--accent)) 36%, #fff));
}

.card::after {
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 16%, transparent);
}

.card:hover {
  transform: perspective(900px) translateY(-7px) rotateX(1deg) rotateY(-.6deg);
}

.card-icon-badge,
.card-emoji-big {
  background: rgba(255,255,255,.70);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 20%, transparent),
    0 8px 18px rgba(80, 143, 172, .12);
}

.timeline-row,
.step-row {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255, 252, 235, .88));
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 13px 32px rgba(72, 142, 174, .14);
}

.timeline-row:hover,
.step-row:hover {
  background: #fffef6;
}

.timeline-detail,
.step-desc,
.card .dim {
  color: var(--ink-soft);
}

.week-grid {
  border-color: rgba(24, 123, 209, .14);
  background: rgba(255,255,255,.58);
  box-shadow: 0 18px 48px rgba(77, 145, 177, .14);
}

.week-header {
  color: #176fba;
  background: rgba(255,255,255,.72);
}

.week-day {
  color: #ff7436;
  background: rgba(255, 227, 115, .34);
}

.week-cell {
  color: var(--ink);
  background: rgba(255, 253, 239, .82);
  border-color: rgba(24, 123, 209, .10);
}

.quote-block {
  color: #195a93;
  border-color: rgba(24, 123, 209, .12);
  border-left-color: var(--accent-2);
  background: linear-gradient(90deg, rgba(255, 244, 171, .72), rgba(255,255,255,.44));
  box-shadow: 0 16px 40px rgba(72, 142, 174, .12);
}

.stamp {
  color: #fff;
  background: linear-gradient(145deg, #ffb321, #ff7436);
  box-shadow:
    0 0 0 6px rgba(255, 179, 33, .18),
    0 18px 42px rgba(220, 118, 39, .22);
}

.tag {
  color: #176fba;
  background: rgba(24, 123, 209, .10);
}

.deck-footer {
  color: rgba(25, 90, 147, .42);
}

.slide-number {
  color: #ff7436;
}

.progress-bar {
  background: rgba(24, 123, 209, .10);
}

.progress-bar > span {
  background: linear-gradient(90deg, #187bd1, #ffb321, #ff7436);
  box-shadow: 0 0 14px rgba(255, 179, 33, .46);
}

.nav-arrow {
  color: #176fba !important;
  border-color: rgba(24, 123, 209, .18) !important;
  background: rgba(255, 255, 255, .60) !important;
  box-shadow: 0 12px 30px rgba(62, 135, 169, .14) !important;
}

.nav-arrow:hover {
  color: #fff !important;
  background: linear-gradient(145deg, #ffb321, #ff7436) !important;
}

.bg-glow {
  opacity: .18;
  mix-blend-mode: soft-light;
}

.bg-glow.g1 { background: #ffb321; }
.bg-glow.g2 { background: #64c4e4; }
.bg-glow.g3 { background: #fff0a8; }

.slide-stickers {
  position: absolute !important;
  inset: 0;
  pointer-events: none;
  overflow: clip;
}

.slide-stickers-back { z-index: 2; }
.slide-stickers-mid { z-index: 3; }
.slide-stickers-front { z-index: 6; }

.slide-sticker {
  position: absolute;
  width: var(--w);
  height: var(--h);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform:
    translate3d(var(--gsap-x, 0px), var(--gsap-y, 0px), 0)
    scale(calc(var(--s, .35) * var(--gsap-s, 1)))
    rotate(calc(var(--r, 0deg) + var(--gsap-r, 0deg)));
  transform-origin: center;
  filter: drop-shadow(0 14px 18px rgba(53, 120, 150, .16));
  opacity: var(--a, .92);
  isolation: isolate;
  will-change: transform, opacity;
  animation-duration: var(--dur, calc(6.8s + var(--i) * 1.1s));
  animation-delay: var(--delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.slide-sticker::after {
  content: '';
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 255, 255, .72), transparent 32%),
    radial-gradient(circle at 68% 62%, rgba(255, 211, 94, .40), transparent 42%),
    radial-gradient(circle, rgba(99, 199, 225, .18), transparent 68%);
  filter: blur(8px);
  opacity: 0;
  transform: scale(.86);
  mix-blend-mode: screen;
  animation: sticker-soft-glow calc(var(--dur, 7s) * 1.35) ease-in-out infinite alternate;
  animation-delay: calc(var(--delay, 0s) - .8s);
  pointer-events: none;
}

.slide-stickers-front .slide-sticker {
  filter: drop-shadow(0 18px 23px rgba(52, 116, 145, .20));
}

.slide-stickers-back .slide-sticker {
  filter: drop-shadow(0 10px 15px rgba(53, 120, 150, .10));
}

.sticker-motion-float { animation-name: sticker-float; }
.sticker-motion-bob { animation-name: sticker-bob; }
.sticker-motion-sway { animation-name: sticker-sway; }
.sticker-motion-swing { animation-name: sticker-swing; transform-origin: 50% 20%; }
.sticker-motion-twinkle { animation-name: sticker-twinkle; }
.sticker-motion-pop { animation-name: sticker-pop; }

.slide.is-active .slide-stickers-front .slide-sticker {
  animation-delay: calc(var(--i) * .12s);
}

.gsap-motion .slide-sticker,
.gsap-motion .slide-sticker::after {
  animation: none !important;
}

.gsap-motion .slide.is-active {
  animation: none !important;
}

.gsap-motion .blur-up,
.gsap-motion .blur-up-d1,
.gsap-motion .blur-up-d2,
.gsap-motion .letter-in,
.gsap-motion .line-grow,
.gsap-motion .pop-in,
.gsap-motion .bounce-list > *,
.gsap-motion .float,
.gsap-motion .bounce,
.gsap-motion .pulse,
.gsap-motion .gradient-text,
.gsap-motion [class*="anim-"] {
  animation: none !important;
}

.gsap-boot:not(.gsap-motion-ready) .slide.is-active .cover-shell,
.gsap-boot:not(.gsap-motion-ready) .slide.is-active .grid > *,
.gsap-boot:not(.gsap-motion-ready) .slide.is-active .timeline-row,
.gsap-boot:not(.gsap-motion-ready) .slide.is-active .step-row,
.gsap-boot:not(.gsap-motion-ready) .slide.is-active .week-grid,
.gsap-boot:not(.gsap-motion-ready) .slide.is-active .week-cell,
.gsap-boot:not(.gsap-motion-ready) .slide.is-active .quote-block,
.gsap-boot:not(.gsap-motion-ready) .slide.is-active .stamp,
.gsap-boot:not(.gsap-motion-ready) .slide.is-active .slide-sticker,
.gsap-motion .slide.is-active:not(.motion-prepared) .cover-shell,
.gsap-motion .slide.is-active:not(.motion-prepared) .grid > *,
.gsap-motion .slide.is-active:not(.motion-prepared) .timeline-row,
.gsap-motion .slide.is-active:not(.motion-prepared) .step-row,
.gsap-motion .slide.is-active:not(.motion-prepared) .week-grid,
.gsap-motion .slide.is-active:not(.motion-prepared) .week-cell,
.gsap-motion .slide.is-active:not(.motion-prepared) .quote-block,
.gsap-motion .slide.is-active:not(.motion-prepared) .stamp,
.gsap-motion .slide.is-active:not(.motion-prepared) .slide-sticker {
  opacity: 0;
}

.slide-sticker.sticker-girlMap,
.slide-sticker.sticker-boyRacket {
  filter: drop-shadow(0 18px 24px rgba(52, 116, 145, .18));
}

.slide[data-slide-id="week"] .slide-sticker,
.slide[data-slide-id="day"] .slide-sticker {
  opacity: .72;
}

@keyframes sticker-float {
  from { translate: 0 0; rotate: -.35deg; }
  to { translate: 0 calc(var(--amp, 8) * -1px); rotate: .42deg; }
}

@keyframes sticker-bob {
  from { translate: 0 2px; scale: .994; }
  to { translate: 0 calc(var(--amp, 9) * -1.12px); scale: 1.008; }
}

@keyframes sticker-sway {
  from { translate: calc(var(--amp, 8) * -.32px) 0; rotate: -1.2deg; }
  to { translate: calc(var(--amp, 8) * .46px) calc(var(--amp, 8) * -.82px); rotate: 1.35deg; }
}

@keyframes sticker-swing {
  from { rotate: -1.7deg; translate: 0 1px; }
  to { rotate: 1.9deg; translate: 2px calc(var(--amp, 8) * -.86px); }
}

@keyframes sticker-twinkle {
  from { scale: .988; opacity: calc(var(--a, .9) * .80); translate: 0 0; filter: drop-shadow(0 10px 15px rgba(53, 120, 150, .10)); }
  to { scale: 1.024; opacity: var(--a, .95); translate: 0 calc(var(--amp, 7) * -.62px); filter: drop-shadow(0 15px 22px rgba(255, 179, 33, .18)); }
}

@keyframes sticker-pop {
  0%, 100% { scale: 1; translate: 0 0; }
  45% { scale: 1.018; translate: 0 calc(var(--amp, 7) * -.56px); }
}

@keyframes sticker-soft-glow {
  0%, 18% {
    opacity: 0;
    transform: scale(.82) translate3d(-2px, 1px, 0);
  }
  48% {
    opacity: calc(var(--glow, .32) * .58);
  }
  100% {
    opacity: calc(var(--glow, .32) * .78);
    transform: scale(1.05) translate3d(3px, -2px, 0);
  }
}

@media (max-width: 1024px) {
  .h1, h1.title { font-size: clamp(32px, 5.6vw, 58px); }
  .h2, h2.title { font-size: clamp(28px, 4.35vw, 44px); }
  .slide[data-slide-id="cover"] .h1,
  .slide[data-slide-id="closing"] .h1 { font-size: clamp(52px, 8vw, 78px); }
  .slide-sticker {
    transform:
      translate3d(var(--gsap-x, 0px), var(--gsap-y, 0px), 0)
      scale(calc(var(--s, .35) * .78 * var(--gsap-s, 1)))
      rotate(calc(var(--r, 0deg) + var(--gsap-r, 0deg)));
  }
}

@media (min-aspect-ratio: 16/10) and (max-height: 820px) {
  .slide {
    padding: clamp(34px, 4.7vh, 46px) clamp(56px, 6.8vw, 96px);
  }

  .h1, h1.title {
    font-size: clamp(48px, 5.8vw, 78px);
  }

  .h2, h2.title {
    font-size: clamp(34px, 4.2vw, 54px);
  }

  .kicker {
    padding: 6px 12px 6px 9px;
    font-size: 13px;
  }

  .lede,
  .lede-lg {
    font-size: clamp(17px, 1.55vw, 22px);
    line-height: 1.42;
  }

  .grid {
    gap: clamp(12px, 1.25vw, 18px);
  }

  .mt-l {
    margin-top: 20px !important;
  }

  .card {
    padding: 20px 22px;
    border-radius: 22px;
  }

  .card h4 {
    font-size: clamp(19px, 1.55vw, 24px);
    margin-bottom: 6px;
  }

  .card .dim {
    line-height: 1.42;
  }

  .card-emoji-big {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  .quote-block {
    margin-top: 18px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .day-grid .timeline-row {
    min-height: 96px;
    padding: 14px 18px;
  }

  .week-grid {
    padding: 12px;
  }

  .deck-footer {
    bottom: 16px;
  }
}

@media (min-aspect-ratio: 16/10) and (max-height: 680px) {
  .slide[data-slide-id="agreements"] {
    padding-top: 30px;
    padding-bottom: 34px;
  }

  .slide[data-slide-id="agreements"] .h2 {
    font-size: clamp(32px, 4.35vw, 50px);
  }

  .slide[data-slide-id="agreements"] .lede-lg {
    margin-top: 8px !important;
  }

  .slide[data-slide-id="agreements"] .grid {
    gap: 10px 14px;
    margin-top: 14px !important;
  }

  .slide[data-slide-id="agreements"] .card {
    padding: 15px 18px;
    min-height: 0;
  }

  .slide[data-slide-id="agreements"] .card-emoji-big {
    width: 44px;
    height: 44px;
  }

  .slide[data-slide-id="agreements"] .card h4 {
    font-size: 19px;
    margin-bottom: 5px;
  }

  .slide[data-slide-id="agreements"] .card .dim {
    font-size: 15px;
    line-height: 1.34;
  }

  .slide[data-slide-id="week"] {
    padding-top: 26px;
    padding-bottom: 36px;
  }

  .slide[data-slide-id="week"] .h2 {
    font-size: clamp(31px, 4.15vw, 48px);
  }

  .slide[data-slide-id="week"] .lede {
    margin-top: 8px !important;
    font-size: 17px;
  }

  .slide[data-slide-id="week"] .week-grid {
    gap: 4px;
    padding: 9px 12px;
    margin-top: 14px !important;
    border-radius: 22px;
  }

  .slide[data-slide-id="week"] .week-header {
    padding: 5px 4px;
    font-size: 13px;
  }

  .slide[data-slide-id="week"] .week-day {
    padding: 6px 4px;
    font-size: 15px;
    border-radius: 9px;
  }

  .slide[data-slide-id="week"] .week-cell {
    padding: 5px 4px;
    font-size: 12px;
    line-height: 1.18;
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .deck > canvas { opacity: .62; }
  .slide-sticker {
    transform:
      translate3d(var(--gsap-x, 0px), var(--gsap-y, 0px), 0)
      scale(calc(var(--s, .35) * .58 * var(--gsap-s, 1)))
      rotate(calc(var(--r, 0deg) + var(--gsap-r, 0deg)));
    opacity: .55;
  }
  .slide-sticker.sticker-girlMap,
  .slide-sticker.sticker-boyRacket { opacity: .62; }
}

@media (max-height: 680px) {
  .slide[data-slide-id="cover"] .slide-sticker.sticker-leaves {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-sticker,
  .slide-sticker::after {
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .slide[data-slide-id="closing"] .h1 {
    font-size: clamp(22px, 6.2vw, 26px) !important;
    letter-spacing: -.05em;
  }
}