/* Sound Beach, anime mode. Everything here is scoped to html.anime so the original site is untouched when it is off. */
:root{
  --ink:#141a33;
  --sakura:#ff8fb8;
  --aqua:#62e2dc;
  --lemon:#ffe58a;
  --lilac:#b9a7ff;
  --paper:#fffaf2;
  --jp-display:"Dela Gothic One","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --jp-round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
}

/* the toggle */
.anime-btn{margin-left:auto;margin-right:clamp(14px,2vw,26px);display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 14px 0 11px;border-radius:999px;border:1px solid rgba(243,238,229,.38);color:var(--bone);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;background:rgba(6,9,15,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .5s ease,border-color .5s ease,transform .5s var(--ease),color .5s ease,box-shadow .5s ease}
.anime-btn .ab-star{font-size:.9rem;line-height:1;letter-spacing:0;display:inline-block;transition:transform 1.2s var(--ease)}
.anime-btn .ab-jp{font-family:var(--jp-round);font-weight:800;letter-spacing:.12em;font-size:.7rem}
.anime-btn:hover{border-color:rgba(243,238,229,.8)}
.anime-btn:hover .ab-star{transform:rotate(180deg) scale(1.15)}
.anime-btn:focus-visible{outline:1px solid var(--bone);outline-offset:4px}
html.anime .anime-btn{background:linear-gradient(115deg,var(--sakura),var(--lemon) 55%,var(--aqua));border-color:var(--ink);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
html.anime .anime-btn .ab-star{animation:ab-spin 6s linear infinite}
@keyframes ab-spin{to{transform:rotate(360deg)}}
@media (max-width:520px){.anime-btn .ab-en{display:none}.anime-btn{padding:0 11px 0 9px;margin-right:10px}}

/* the image itself: cel bands and ink lines */
html.anime .panel video,html.anime .panel .poster,html.anime .panel .stage img,html.anime .panel .tx video{filter:url(#sb-cel) !important}
html.anime .sb.threshold .panel video,html.anime .sb.threshold .panel .poster{filter:url(#sb-cel) brightness(.9) !important}
html.anime.anime-lite .panel video,html.anime.anime-lite .panel .poster,html.anime.anime-lite .panel .stage img,html.anime.anime-lite .panel .tx video{filter:url(#sb-cel-lite) !important}

/* manga panel frames and the slanted gutter between the two worlds */
html.anime .panel::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 6px rgba(255,250,242,.85)}
html.anime .sb.in-am .panel::after,html.anime .sb.in-dh .panel::after{box-shadow:none}
html.anime .seam{width:14px;margin-left:-7px;background:var(--paper);box-shadow:0 0 0 3px var(--ink);transform:skewX(-7deg);opacity:1}
@media (max-aspect-ratio:4/5){html.anime .seam{transform:skewY(-4deg)}}

/* cel shading on the shade: a hard band and a screentone */
html.anime .panel .shade::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(20,26,51,.55) .9px,transparent 1.5px);background-size:6px 6px;-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 18%,transparent 42%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 18%,transparent 42%);mix-blend-mode:multiply;opacity:.5}

/* type */
html.anime .door .name{font-family:var(--jp-display);font-size:clamp(2.2rem,4.4vw,4.6rem);letter-spacing:.01em;line-height:1;color:var(--paper);text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink),0 0 26px rgba(255,143,184,.45)}
html.anime .door .name em{font-style:normal;color:var(--lemon)}
html.anime .panel[data-world="am"] .door .name em{color:var(--aqua)}
html.anime .door .name::before{content:attr(data-jp);display:block;font-family:var(--jp-display);font-size:.34em;letter-spacing:.28em;margin-bottom:.5em;color:var(--sakura);text-shadow:2px 2px 0 var(--ink)}
html.anime .panel[data-world="am"] .door .name::before{color:var(--aqua)}
html.anime .door .line{font-family:var(--jp-round);font-weight:500;color:var(--paper);text-shadow:0 1px 0 var(--ink),0 0 12px rgba(20,26,51,.8)}
html.anime .door .enter{align-self:flex-start;font-family:var(--jp-round);font-weight:800;letter-spacing:.2em;color:var(--ink);background:var(--paper);padding:9px 16px 9px 18px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:skewX(-8deg);transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s ease}
html.anime .door .enter::before{content:"入る";font-family:var(--jp-display);letter-spacing:.1em;margin-right:4px}
html.anime .door .enter i{background:var(--ink);box-shadow:none;height:2px}
html.anime .panel:hover .door .enter{background:var(--lemon);transform:skewX(-8deg) translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
html.anime .panel[data-world="am"]:hover .door .enter{background:var(--aqua)}

html.anime .mark{font-family:var(--jp-round);font-weight:800;letter-spacing:.42em;text-shadow:2px 2px 0 var(--ink)}
html.anime .mark::after{content:"サウンドビーチ";font-family:var(--jp-display);font-size:.62rem;letter-spacing:.24em;color:var(--sakura);margin-left:2px;text-shadow:1px 1px 0 var(--ink)}
@media (max-width:520px){html.anime .mark::after{display:none}.mark{white-space:nowrap;letter-spacing:.3em}}
html.anime .sound{font-family:var(--jp-round);font-weight:800;color:var(--paper);text-shadow:1px 1px 0 var(--ink)}
html.anime .sound .bars i{background:var(--aqua);box-shadow:1px 1px 0 var(--ink)}
html.anime .foot{font-family:var(--jp-round);font-weight:800;color:var(--paper);text-shadow:1px 1px 0 var(--ink)}

/* subtitles: fansub style */
html.anime .verse{font-family:var(--jp-round);font-weight:800;font-size:clamp(1.15rem,1.8vw,1.6rem);letter-spacing:.01em;color:#fff;text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),1.5px 1.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),0 4px 14px rgba(20,26,51,.55)}
html.anime .guide .cap,html.anime .quest .tide,html.anime .wname,html.anime .cross,html.anime #sb-root .again{font-family:var(--jp-round);font-weight:800;color:var(--paper);text-shadow:1px 1px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
html.anime .quest .tide{letter-spacing:.18em}
html.anime .cross i{height:2px;background:var(--sakura)}
html.anime .breath-word span{font-family:var(--jp-round);font-style:normal;font-weight:800;color:var(--paper);text-shadow:2px 2px 0 var(--ink)}
html.anime .breath-word span[data-w="in"]::before{content:"すって ";color:var(--aqua)}
html.anime .breath-word span[data-w="out"]::before{content:"はいて ";color:var(--sakura)}
html.anime .breath i{height:4px;background:linear-gradient(90deg,var(--aqua),var(--paper) 50%,var(--sakura));box-shadow:0 0 0 2px var(--ink),0 0 18px rgba(98,226,220,.7);border-radius:4px}

/* sea glass becomes little stars */
html.anime .quest .glass i{width:12px;height:12px;border:0;border-radius:0;background:rgba(255,250,242,.45);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);box-shadow:none}
html.anime .quest .glass i.on{background:var(--c);filter:drop-shadow(0 0 4px var(--c))}

/* lights, cursor, motes, ripples */
html.anime .pool .glow{background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,143,184,.55) 20%,rgba(98,226,220,.28) 44%,transparent 68%)}
html.anime .pool .note{background:conic-gradient(from 45deg,var(--paper),var(--lemon),var(--sakura),var(--aqua),var(--paper));clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);mix-blend-mode:normal}
html.anime .pool.found .glow{animation:anime-twinkle 3.2s ease-in-out infinite}
@keyframes anime-twinkle{0%,100%{transform:scale(.55) rotate(0);opacity:.6}50%{transform:scale(.72) rotate(45deg);opacity:.95}}
html.anime .pool .ring{border:2px solid var(--paper);box-shadow:0 0 0 2px var(--ink),0 0 14px var(--sakura)}
html.anime .light{background:radial-gradient(circle,rgba(255,255,255,.35) 0%,rgba(255,143,184,.18) 26%,rgba(98,226,220,.08) 46%,transparent 66%)}
html.anime .light::after{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:0;background:var(--paper);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);box-shadow:none;animation:ab-spin 4s linear infinite}
html.anime .mote{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:0;background:linear-gradient(135deg,var(--paper),var(--sakura) 60%,var(--aqua));clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);box-shadow:none}
html.anime .ripple{border:2px solid var(--paper);box-shadow:0 0 0 2px var(--sakura),0 0 0 5px rgba(98,226,220,.6)}
html.anime #threadLine{stroke:url(#sbAnimeGrad);stroke-width:2}
html.anime #threadNew{stroke:var(--paper);stroke-width:2.4}
html.anime #threadReach{stroke:var(--sakura);stroke-width:1.6}
html.anime #pulse{fill:var(--lemon)}
html.anime .thread{filter:drop-shadow(0 0 2px var(--ink)) drop-shadow(0 0 10px rgba(255,143,184,.6))}

/* the effects layer */
.anime-fx{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 1.2s ease;overflow:hidden}
html.anime .anime-fx{opacity:1}
.anime-fx .rays{position:absolute;left:var(--sx,50%);top:var(--sy,40%);width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;background:repeating-conic-gradient(from 0deg,rgba(255,250,235,.0) 0deg 7deg,rgba(255,250,235,.16) 9deg 11deg,rgba(255,250,235,0) 13deg 21deg);-webkit-mask-image:radial-gradient(circle,#000 4%,rgba(0,0,0,.45) 18%,transparent 42%);mask-image:radial-gradient(circle,#000 4%,rgba(0,0,0,.45) 18%,transparent 42%);mix-blend-mode:screen;opacity:0;transition:opacity 2s ease;animation:rays-turn 160s linear infinite}
@keyframes rays-turn{to{transform:rotate(360deg)}}
.anime-fx[data-world="dh"] .rays{opacity:.9}
.anime-fx[data-world="am"] .rays{opacity:.45;background:repeating-conic-gradient(from 0deg,rgba(200,225,255,0) 0deg 8deg,rgba(200,225,255,.14) 10deg 12deg,rgba(200,225,255,0) 14deg 24deg)}
.anime-fx .flare{position:absolute;left:0;top:0;border-radius:50%;opacity:0;transition:opacity 2s ease;mix-blend-mode:screen}
.anime-fx[data-world="dh"] .flare{opacity:1}
.anime-fx .flare.hex{clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);border-radius:0}
.anime-fx .streak{position:absolute;left:var(--sx,50%);top:var(--sy,40%);width:70vw;height:2px;margin:-1px 0 0 -35vw;background:linear-gradient(90deg,transparent,rgba(255,240,220,.85) 45%,#fff 50%,rgba(255,240,220,.85) 55%,transparent);mix-blend-mode:screen;opacity:0;transition:opacity 2s ease}
.anime-fx[data-world="dh"] .streak{opacity:.8}
.anime-fx .stars{position:absolute;inset:0}
.anime-fx .star{position:absolute;width:var(--s,10px);height:var(--s,10px);margin:calc(var(--s,10px) / -2) 0 0 calc(var(--s,10px) / -2);background:#fff;clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);opacity:0;animation:star-tw var(--d,4s) ease-in-out var(--dl,0s) infinite}
@keyframes star-tw{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:var(--o,.9);transform:scale(1) rotate(30deg)}60%{opacity:var(--o,.9);transform:scale(.9) rotate(40deg)}}

/* Luma */
.luma-chibi{position:fixed;z-index:8;left:clamp(18px,4vw,64px);bottom:clamp(64px,9vh,96px);width:clamp(92px,8.5vw,132px);pointer-events:none;opacity:0;transform:translateY(16px) scale(.9);transition:opacity .8s ease,transform .8s var(--ease),left 1s var(--ease),bottom 1s var(--ease)}
html.anime .luma-chibi.show{opacity:1;transform:none}
.luma-chibi img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(20,26,51,.35));transform-origin:50% 100%;transition:transform .5s var(--ease)}
.luma-chibi.where-threshold{left:50%;margin-left:calc(clamp(92px,8.5vw,132px) / -2);bottom:auto;top:calc(58px + env(safe-area-inset-top,0px))}
.luma-chibi.joy img{animation:luma-hop .9s cubic-bezier(.3,1.6,.5,1) 2}
@keyframes luma-hop{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-26px) scale(.96,1.05)}60%{transform:translateY(0) scale(1.06,.94)}100%{transform:translateY(0) scale(1)}}
.luma-chibi.sway img{animation:luma-sway 2.4s ease-in-out infinite}
@keyframes luma-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.luma-chibi .bubble{position:absolute;left:78%;bottom:78%;white-space:nowrap;font-family:var(--jp-round);font-weight:800;font-size:.78rem;letter-spacing:.06em;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:6px 11px 6px;box-shadow:3px 3px 0 var(--ink);opacity:0;transform:translateY(6px) scale(.9);transform-origin:0 100%;transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
.luma-chibi .bubble small{display:block;font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-top:1px}
.luma-chibi .bubble::after{content:"";position:absolute;left:10px;bottom:-9px;width:12px;height:12px;background:var(--paper);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:skewX(-20deg) rotate(30deg)}
.luma-chibi .bubble.on{opacity:1;transform:none}
.luma-chibi.where-threshold .bubble{left:92%;bottom:auto;top:30%}
@media (max-aspect-ratio:4/5){
  .luma-chibi,.luma-chibi.where-threshold{left:auto;right:12px;margin-left:0;top:calc(64px + env(safe-area-inset-top,0px));bottom:auto;width:76px}
  .luma-chibi.where-threshold{top:calc(50% + -46px)}
  .luma-chibi .bubble,.luma-chibi.where-threshold .bubble{left:auto;right:84%;bottom:20%;font-size:.7rem}
  .luma-chibi .bubble::after{left:auto;right:8px;transform:skewX(20deg) rotate(-30deg)}
}

/* manga sound effects and speed lines */
.sfx{position:fixed;z-index:9;pointer-events:none;font-family:var(--jp-display);font-size:clamp(1.6rem,3vw,2.6rem);color:var(--paper);letter-spacing:.04em;text-shadow:3px 3px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink);transform:translate(-50%,-50%) rotate(-10deg) scale(.6);opacity:0;animation:sfx-pop 1.6s cubic-bezier(.2,1.4,.4,1) forwards}
.sfx b{color:var(--sakura);font-weight:400}
@keyframes sfx-pop{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(.4)}18%{opacity:1;transform:translate(-50%,-130%) rotate(-8deg) scale(1.08)}70%{opacity:1;transform:translate(-50%,-140%) rotate(-8deg) scale(1)}100%{opacity:0;transform:translate(-50%,-170%) rotate(-6deg) scale(.96)}}
.speed{position:fixed;z-index:4;pointer-events:none;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0deg 2.2deg,rgba(255,255,255,.75) 2.6deg 2.9deg,rgba(255,255,255,0) 3.3deg 5.4deg);-webkit-mask-image:radial-gradient(circle,transparent 3%,#000 9%,#000 20%,transparent 46%);mask-image:radial-gradient(circle,transparent 3%,#000 9%,#000 20%,transparent 46%);mix-blend-mode:screen;opacity:0;animation:speed-burst 1.1s ease-out forwards}
@keyframes speed-burst{0%{opacity:0;transform:scale(.6) rotate(0)}20%{opacity:.85}100%{opacity:0;transform:scale(1.25) rotate(6deg)}}

/* eyecatch: the card between the two modes */
.eyecatch{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden;visibility:hidden}
.eyecatch.run{visibility:visible}
.eyecatch .flash{position:absolute;inset:0;background:#fff;opacity:0}
.eyecatch .half{position:absolute;top:-10%;bottom:-10%;width:64%;transform:skewX(-12deg)}
.eyecatch .half.l{left:-14%;background:var(--sakura);transform:skewX(-12deg) translateX(-120%);box-shadow:inset -6px 0 0 var(--ink)}
.eyecatch .half.r{right:-14%;background:var(--aqua);transform:skewX(-12deg) translateX(120%);box-shadow:inset 6px 0 0 var(--ink)}
.eyecatch .half::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(20,26,51,.22) 1.2px,transparent 1.8px);background-size:10px 10px}
.eyecatch .lines{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0deg 3deg,rgba(255,255,255,.5) 3.4deg 3.8deg,rgba(255,255,255,0) 4.2deg 7deg);-webkit-mask-image:radial-gradient(circle,transparent 6%,#000 14%,#000 26%,transparent 48%);mask-image:radial-gradient(circle,transparent 6%,#000 14%,#000 26%,transparent 48%);opacity:0}
.eyecatch .card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.eyecatch .card img{width:min(46vmin,330px);height:auto;filter:drop-shadow(0 10px 0 rgba(20,26,51,.25));opacity:0;transform:scale(.4) rotate(-12deg)}
.eyecatch .card .t1{font-family:var(--jp-display);font-size:clamp(2.2rem,7vmin,4.6rem);line-height:1;color:var(--paper);letter-spacing:.02em;text-shadow:4px 4px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink);opacity:0;transform:translateY(20px)}
.eyecatch .card .t2{font-family:var(--jp-round);font-weight:800;font-size:clamp(.7rem,1.6vmin,.95rem);letter-spacing:.5em;text-transform:uppercase;color:var(--ink);background:var(--lemon);border:2px solid var(--ink);padding:5px 10px 5px 15px;box-shadow:3px 3px 0 var(--ink);opacity:0;transform:translateY(14px) rotate(-2deg)}
.eyecatch.run .flash{animation:ec-flash 1.9s ease forwards}
.eyecatch.run .half.l{animation:ec-l 1.9s cubic-bezier(.7,0,.2,1) forwards}
.eyecatch.run .half.r{animation:ec-r 1.9s cubic-bezier(.7,0,.2,1) forwards}
.eyecatch.run .lines{animation:ec-lines 1.9s ease forwards}
.eyecatch.run .card img{animation:ec-luma 1.9s cubic-bezier(.3,1.5,.5,1) forwards}
.eyecatch.run .card .t1{animation:ec-t 1.9s cubic-bezier(.3,1.4,.5,1) forwards}
.eyecatch.run .card .t2{animation:ec-t 1.9s cubic-bezier(.3,1.4,.5,1) .06s forwards}
@keyframes ec-flash{0%{opacity:0}8%{opacity:.9}20%{opacity:0}100%{opacity:0}}
@keyframes ec-l{0%{transform:skewX(-12deg) translateX(-120%)}24%,72%{transform:skewX(-12deg) translateX(0)}100%{transform:skewX(-12deg) translateX(-130%)}}
@keyframes ec-r{0%{transform:skewX(-12deg) translateX(120%)}24%,72%{transform:skewX(-12deg) translateX(0)}100%{transform:skewX(-12deg) translateX(130%)}}
@keyframes ec-lines{0%,18%{opacity:0;transform:rotate(0)}30%{opacity:1}70%{opacity:.8;transform:rotate(8deg)}82%,100%{opacity:0;transform:rotate(10deg)}}
@keyframes ec-luma{0%,20%{opacity:0;transform:scale(.4) rotate(-12deg)}36%{opacity:1;transform:scale(1.06) rotate(3deg)}46%,68%{opacity:1;transform:scale(1) rotate(0)}80%,100%{opacity:0;transform:scale(1.2) translateY(-30px)}}
@keyframes ec-t{0%,26%{opacity:0;transform:translateY(20px)}40%,68%{opacity:1;transform:translateY(0)}80%,100%{opacity:0;transform:translateY(-14px)}}
.eyecatch.off .flash{animation:ec-flash-off .9s ease forwards}
@keyframes ec-flash-off{0%{opacity:0}35%{opacity:.85}100%{opacity:0}}

/* episode title card on entering a world */
.episode{position:fixed;left:50%;top:42%;z-index:12;pointer-events:none;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;opacity:0;visibility:hidden}
.episode.run{visibility:visible;animation:ep-in 3.4s var(--ease) forwards}
.episode .ep{font-family:var(--jp-round);font-weight:800;font-size:.72rem;letter-spacing:.4em;color:var(--ink);background:var(--paper);border:2px solid var(--ink);padding:4px 10px 4px 14px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
.episode .jp{font-family:var(--jp-display);font-size:clamp(2.6rem,8vw,6rem);line-height:1;color:var(--paper);letter-spacing:.06em;text-shadow:5px 5px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),0 0 40px var(--glow,rgba(255,143,184,.6))}
.episode .en{font-family:var(--jp-round);font-weight:800;font-size:clamp(.8rem,1.6vw,1.05rem);letter-spacing:.42em;text-transform:uppercase;color:var(--paper);text-shadow:2px 2px 0 var(--ink)}
.episode .brush{width:min(60vw,420px);height:10px;background:var(--glowc,var(--sakura));border:2px solid var(--ink);transform:skewX(-24deg) scaleX(0);transform-origin:0 50%;animation:ep-brush 3.4s var(--ease) forwards}
@keyframes ep-in{0%{opacity:0;transform:translate(-56%,-50%) skewX(-10deg)}12%{opacity:1;transform:translate(-50%,-50%) skewX(0)}74%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-56%)}}
@keyframes ep-brush{0%,10%{transform:skewX(-24deg) scaleX(0)}30%,100%{transform:skewX(-24deg) scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .anime-fx .rays,.anime-btn .ab-star,html.anime .light::after,.anime-fx .star,html.anime .pool.found .glow{animation:none}
  .eyecatch.run .half,.eyecatch.run .lines,.eyecatch.run .card img,.eyecatch.run .card .t1,.eyecatch.run .card .t2{animation:none}
  .episode.run{animation:ep-fade 3s ease forwards}
  @keyframes ep-fade{0%,100%{opacity:0}15%,75%{opacity:1}}
  .speed{display:none}
}

/* the episode card takes the stage for a moment; the guide steps back */
html.ep-run .world .guide{opacity:0;transition:opacity .35s ease}
.world .guide{transition:opacity .9s ease}