@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');
body { font-family: 'Nunito', 'Trebuchet MS', sans-serif; }
.episode-navigation{max-width:850px;margin:56px auto 64px;padding-top:32px;border-top:1px solid #c8e2e9;display:flex;flex-direction:column;gap:24px}
.episode-navigation a{border:0;text-decoration:none;padding:0}
.episode-navigation .previous-adventure{order:2;align-self:flex-start;font-size:14px;font-weight:600;color:#526e75;text-decoration:underline;text-underline-offset:4px}
.episode-navigation .next-adventure{display:flex;align-items:center;gap:24px;padding:20px;background:#fff;border:1px solid #d9eaf0;border-radius:20px;transition:background .15s}
.episode-navigation .next-adventure:hover{background:#f7fcff}
.next-adventure img{width:96px;height:112px;object-fit:cover;border-radius:14px;flex-shrink:0}
.next-adventure-label{display:block;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.next-adventure strong{display:block;font-family:'Fredoka','Trebuchet MS',sans-serif;font-size:26px;font-weight:600;line-height:1.2}
.next-adventure-action{display:block;font-size:14px;font-weight:800;margin-top:12px}
@media(max-width:700px){.episode-navigation{margin-bottom:40px}.episode-navigation .next-adventure{gap:16px;padding:16px}.next-adventure img{width:72px;height:96px}.next-adventure strong{font-size:21px}.next-adventure-label{font-size:10px}}
h1, h2, .story-card h3, dialog h2 { font-family: 'Fredoka', 'Trebuchet MS', sans-serif; font-weight: 600; letter-spacing: -.7px; }
.story-card { display: block; text-decoration: none; }
.story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 850px; margin-inline: auto; }
@media (max-width: 700px) { .story-grid { grid-template-columns: 1fr; } }
.logo { display: flex; align-items: center; gap: 10px; }
.header-slot header { width: 100%; max-width: none; padding-inline: max(5vw, calc((100% - 1440px) / 2 + 5vw)); }
.logo-portrait { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid #ffcf55; box-shadow: 0 3px 0 #dba329; }
@media (max-width: 450px) { .logo { gap: 7px; font-size: 23px; } .logo-portrait { width: 40px; height: 40px; border-width: 2px; } nav a { padding: 9px 8px; font-size: 9px; } }
.cover-hero {
  background: radial-gradient(ellipse at 80% 70%, #d8f1dc 0, transparent 45%), linear-gradient(145deg, #edfaff, #c8eaff);
  align-items: center;
  padding-top: 110px;
}
.cover-hero::after { display: none; }
.cover-hero .intro { position: relative; z-index: 1; display: block; padding-right: 48%; }
.cover-hero h1 { font-size: clamp(42px, 5.3vw, 76px); text-shadow: none; }
.cover-hero .intro-side { margin-top: 38px; max-width: none; }
.cover-hero .button { padding: 19px 31px; font-size: 18px; }
.cover-hero .hero-art { inset: auto 4vw 0 auto; width: 48%; height: 85%; z-index: 0; background: transparent; }
.cover-hero .hero-art img { object-fit: contain; object-position: center bottom; }
@media (max-width: 700px) {
  .cover-hero { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 110px 5vw 0; min-height: 100svh; }
  .cover-hero .intro { padding-right: 0; text-align: center; }
  .cover-hero h1 { font-size: clamp(36px, 7.5vw, 48px); }
  .cover-hero .intro-side { margin-top: 24px; }
  .cover-hero .button { padding: 15px 27px; font-size: 16px; }
  .cover-hero .hero-art { position: relative; inset: auto; width: 100%; height: clamp(280px, 52svh, 540px); margin-top: 25px; flex-shrink: 0; }
  .cover-hero .hero-art img { object-position: center bottom; }
}
.cover-hero .hero-art { display: flex; flex-direction: column; align-items: center; padding-bottom: 30px; gap: 20px; }
.cover-hero .hero-art img { width: 100%; height: calc(100% - 85px); min-height: 0; }
.cover-hero .hero-art .button { flex-shrink: 0; position: relative; z-index: 1; animation: nero-hop 5s ease-in-out infinite; }
.logo:hover .logo-portrait { animation: logo-hop .5s ease; }
@keyframes nero-hop { 0%, 65%, 100% { transform: translateY(0); } 73% { transform: translateY(-13px) rotate(-1deg); } 80% { transform: translateY(0); } 86% { transform: translateY(-5px); } 92% { transform: translateY(0); } }
@keyframes logo-hop { 50% { transform: translateY(-5px) rotate(5deg); } }
@media (max-width: 700px) { .cover-hero .hero-art { height: clamp(390px, 66svh, 660px); margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .cover-hero .hero-art .button, .logo:hover .logo-portrait { animation: none; } }
@media (max-width: 700px) {
  dialog { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 22px 22px 0 0; padding: 60px 18px 25px; overflow-y: auto; }
  dialog[open] { animation: sheet-enter .28s ease-out; }
  dialog::before { content: ''; position: absolute; top: 12px; left: calc(50% - 22px); width: 44px; height: 5px; border-radius: 5px; background: #acc8d1; }
  dialog h2 { margin: 0 36px 20px 0; font-size: 27px; }
  dialog img { max-width: 100%; max-height: calc(100dvh - 200px); }
  dialog .close { top: 25px; right: 15px; width: 38px; height: 38px; }
}
@keyframes sheet-enter { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }
.preview-link{display:flex;justify-content:center;width:max-content;max-width:100%;margin:20px auto 8px}.story-card:nth-child(4) .number{background:#d4e5ff}@media(max-width:700px){dialog img{max-height:calc(100dvh - 270px)}dialog h2{font-size:25px}}