:root {
  color:#151515;
  background:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
* {
  box-sizing:border-box;
}
html,
body {
  height:100%;
}
body {
  margin:0;
  overflow:hidden;
  background:#fff;
}
.main-menu {
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,3vw,36px);
  padding:24px;
  background:#fff;
  transition:opacity .55s ease;
}
.main-menu.leaving {
  opacity:0;
  pointer-events:none;
}
.main-menu-portrait {
  height:min(72vh,620px);
  width:auto;
  object-fit:contain;
}
.rain {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.rain-drop {
  position:absolute;
  top:-12%;
  width:1px;
  background:linear-gradient(to bottom,transparent,#3a4a5c);
  animation-name:rain-fall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes rain-fall {
  to {
    transform:translateY(120vh);
  }
}
@media(prefers-reduced-motion:reduce) {
  .rain-drop {
    animation:none;
    display:none;
  }
}
@media(max-width:820px) {
  .main-menu-portrait {
    display:none;
  }
}
.lightning {
  position:absolute;
  inset:0;
  z-index:20;
  background:#eef4ff;
  opacity:0;
  pointer-events:none;
}
.lightning.flash {
  animation:lightning-flash .55s ease-out;
}
@keyframes lightning-flash {
  0% {
    opacity:0;
  }
  5% {
    opacity:.85;
  }
  12% {
    opacity:.1;
  }
  22% {
    opacity:.7;
  }
  35% {
    opacity:0;
  }
  50% {
    opacity:.35;
  }
  65% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}
@media(prefers-reduced-motion:reduce) {
  .lightning.flash {
    animation:none;
  }
}
.main-menu-panel {
  position:relative;
  width:min(560px,calc(100vw - 32px));
  padding:44px 46px 40px;
  background:#fffffff5;
  border:4px solid #101010;
  clip-path:polygon(0 8%,3% 7%,1% 18%,2% 31%,0 43%,2% 56%,0 70%,2% 84%,1% 100%,18% 98%,34% 100%,51% 98%,68% 100%,84% 98%,100% 100%,98% 84%,100% 70%,98% 55%,100% 40%,98% 25%,100% 9%,84% 11%,69% 9%,52% 11%,35% 9%,18% 11%);
  box-shadow:10px 12px 0 #0006;
  background-image:radial-gradient(#00000018 1px,transparent 1px);
  background-size:5px 5px;
  text-align:center;
}
.main-menu-panel:has(.main-menu-button:hover) {
  animation:menu-shake .24s steps(2,end) infinite;
}
@keyframes menu-shake {
  0%,100% {
    transform:translate(0,0) rotate(0);
  }
  25% {
    transform:translate(-3px,2px) rotate(-.4deg);
  }
  50% {
    transform:translate(3px,-2px) rotate(.4deg);
  }
  75% {
    transform:translate(-2px,1px) rotate(-.2deg);
  }
}
@media(prefers-reduced-motion:reduce) {
  .main-menu-panel:has(.main-menu-button:hover),
  .settings-panel-inner:has(.main-menu-button:hover) {
    animation:none;
  }
}
.main-menu-kicker {
  margin:0 0 10px;
  color:#111;
  font:900 12px/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.main-menu-title {
  margin:0 0 36px;
  color:#111;
  font:900 clamp(30px,5vw,46px)/1.15 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.main-menu-buttons {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.main-menu-button {
  position:relative;
  width:100%;
  min-height:58px;
  padding:14px 28px;
  overflow:visible;
  color:#111;
  background:#fff;
  border:3px solid #111;
  clip-path:polygon(0 10%,2% 5%,1% 36%,0 65%,2% 94%,19% 98%,37% 95%,55% 100%,73% 96%,100% 100%,98% 66%,100% 32%,98% 3%,78% 6%,59% 1%,39% 5%,20% 2%);
  font:900 clamp(16px,1.8vw,20px)/1.1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-shadow:1px 1px 0 #fff;
  box-shadow:6px 6px 0 #111;
  cursor:pointer;
  filter:sepia(.5) saturate(1.4) hue-rotate(-8deg) brightness(.96) contrast(1.05);
  transition:color .12s ease,background .12s ease,transform .12s ease,box-shadow .12s ease;
}
.main-menu-button:hover,
.main-menu-button:focus-visible {
  color:#fff;
  background:#111;
  border-color:#111;
  box-shadow:9px 9px 0 #777;
  outline:none;
  transform:translate(-3px,-2px);
}
.main-menu-button:disabled {
  opacity:.4;
  cursor:default;
  box-shadow:6px 6px 0 #111;
  transform:none;
}
.main-menu-button[hidden] {
  display:none;
}
.settings-panel {
  position:fixed;
  inset:0;
  z-index:31;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#ffffffee;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.settings-panel.visible {
  opacity:1;
  pointer-events:auto;
}
.settings-panel-inner {
  width:min(440px,calc(100vw - 32px));
  padding:34px 36px;
  background:#fff;
  border:4px solid #101010;
  box-shadow:10px 12px 0 #0006;
  text-align:left;
}
.settings-panel-inner:has(.main-menu-button:hover) {
  animation:menu-shake .24s steps(2,end) infinite;
}
.settings-panel-inner h2 {
  margin:0 0 24px;
  color:#111;
  font:900 18px/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
}
.settings-row {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 22px;
  color:#111;
  font:700 12px/1 "Segoe UI",Arial,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.settings-row input[type=range] {
  width:100%;
  accent-color:#111;
}
.settings-choice-group {
  display:flex;
  gap:8px;
}
.settings-choice-group button {
  flex:1;
  padding:10px 6px;
  border:2px solid #111;
  background:#fff;
  color:#111;
  font:700 12px/1 "Segoe UI",Arial,sans-serif;
  letter-spacing:.03em;
  text-transform:none;
  cursor:pointer;
  transition:color .12s ease,background .12s ease;
}
.settings-choice-group button.selected,
.settings-choice-group button:hover {
  background:#111;
  color:#fff;
}
#settings-close {
  margin-top:8px;
}
@media(max-width:560px) {
  .main-menu-panel {
    padding:34px 24px 30px;
    border-width:3px;
    box-shadow:6px 7px 0 #0006;
  }
  .main-menu-button {
    min-height:52px;
    padding:12px 20px;
    border-width:2px;
    box-shadow:4px 4px 0 #111;
  }
  .settings-panel-inner {
    padding:26px 22px;
    border-width:3px;
    box-shadow:6px 7px 0 #0006;
  }
}
.screen {
  min-height:100%;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,42px);
}
.conversation {
  width:min(820px,100%);
  height:min(820px,calc(100vh - 32px));
  display:flex;
  flex-direction:column;
  border:2px solid #222;
  background:#fff;
  opacity:0;
  filter:blur(10px);
  transform:scale(.985);
  transition:opacity 2.6s ease,filter 2.6s ease,transform 2.6s ease;
}
.conversation.visible {
  opacity:1;
  filter:none;
  transform:none;
}
.conversation-title {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:18px 22px;
  border-bottom:1px solid #aaa;
  font-size:12px;
  letter-spacing:.09em;
}
.conversation-title strong {
  font-size:14px;
}
.conversation-title time {
  text-align:right;
  color:#555;
}
.message-list {
  flex:1;
  overflow-y:auto;
  padding:34px clamp(20px,5vw,48px) 64px;
  scrollbar-width:none;
}
.message-list::-webkit-scrollbar {
  display:none;
}
.message {
  width:min(540px,86%);
  min-height:130px;
  margin:0 0 34px;
  padding:24px 28px;
  border:2px solid #222;
  background:#fff;
  opacity:0;
  filter:blur(7px);
  transform:translateY(34px);
  transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s cubic-bezier(.22,.75,.22,1);
}
.message.hero {
  margin-left:auto;
}
.message.mother {
  margin-right:auto;
  background:#f7f7f7;
}
.message.visible {
  opacity:1;
  filter:none;
  transform:none;
}
.message.old {
  opacity:.56;
  transform:translateY(-10px);
}
.message-meta {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-bottom:13px;
  border-bottom:1px solid #d1d1d1;
  color:#666;
  font-size:12px;
  letter-spacing:.04em;
}
.message-meta strong {
  color:#151515;
}
.message-text {
  display:inline;
  margin:20px 0 0;
  font-size:clamp(18px,3vw,27px);
  line-height:1.38;
  white-space:pre-wrap;
}
.cursor {
  display:inline-block;
  width:2px;
  height:1.05em;
  margin-left:4px;
  background:#151515;
  vertical-align:-.12em;
  opacity:0;
}
.message.typing .cursor {
  opacity:1;
  animation:blink .8s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity:0;
  }
}
@media(max-width:560px) {
  .screen {
    padding:0;
  }
  .conversation {
    height:100vh;
    border-width:0;
  }
  .conversation-title {
    border-top:2px solid #222;
    border-bottom:2px solid #222;
  }
  .message-list {
    padding:25px 16px 48px;
  }
  .message {
    width:91%;
    min-height:110px;
    margin-bottom:24px;
    padding:20px;
  }
  .message-meta {
    flex-direction:column;
    gap:5px;
  }
  .message-text {
    font-size:19px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .conversation,
  .message {
    transition-duration:.01ms;
  }
}
.art-transition {
  position:fixed;
  inset:0;
  z-index:20;
  overflow:hidden;
  background:#fff;
  pointer-events:none;
  visibility:hidden;
}
.art-transition.active {
  visibility:visible;
}
.art-one {
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:100vh;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform:translate(-50%,-50%) scale(2);
  transform-origin:center;
  transition:opacity .7s ease,transform 10s cubic-bezier(.22,.72,.22,1);
}
.art-transition.active .art-one {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.art-transition.hide-art-one .art-one {
  opacity:0;
  transition:opacity 2.8s cubic-bezier(.4,0,.2,1);
}
.conversation.ending {
  opacity:0;
  filter:blur(6px);
  transform:translateY(110vh);
  transition:opacity 2.2s ease,filter 2.2s ease,transform 2.2s cubic-bezier(.4,0,.7,.2);
}
.disclaimer {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  visibility:hidden;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(34px,7vw,100px);
  color:#171717;
  background:#fff;
  text-align:center;
  font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  opacity:0;
  transition:opacity 1.2s ease;
}
.disclaimer.show {
  visibility:visible;
  opacity:1;
}
.disclaimer.hide {
  opacity:0;
  transition:opacity 3s ease;
}
.disclaimer-title {
  max-width:920px;
  margin:0;
  font-size:clamp(17px,2vw,23px);
  font-weight:400;
  font-style:normal;
  line-height:1.7;
  letter-spacing:.02em;
}
.disclaimer p:last-child {
  max-width:920px;
  margin:0;
  font-size:clamp(17px,2vw,23px);
  font-weight:400;
  line-height:1.7;
  letter-spacing:.02em;
  color:#171717;
}
.chapter-card {
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  visibility:hidden;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#171717;
  background:#fff;
  text-align:center;
  font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  opacity:0;
  filter:blur(6px);
  transform:translateY(10px);
  transition:opacity 3s ease,filter 3s ease,transform 3s ease;
}
.chapter-card.show {
  visibility:visible;
  opacity:1;
  filter:blur(0);
  transform:none;
}
.chapter-card.hide {
  opacity:0;
  filter:blur(4px);
  transition:opacity 2s ease,filter 2s ease;
}
.chapter-number {
  margin:0 0 28px;
  font-size:clamp(17px,2vw,23px);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.chapter-card h1 {
  margin:0;
  font-size:clamp(42px,7vw,86px);
  font-weight:400;
  line-height:1.1;
}
.chapter-place {
  margin:28px 0 0;
  font-size:clamp(19px,2.5vw,30px);
  font-style:italic;
  letter-spacing:.08em;
}
.chapter-scene.show {
  visibility:visible;
}
.chapter-shot {
  position:absolute;
  display:block;
  width:min(43vw,620px);
  height:min(82vh,850px);
  object-fit:contain;
}
.shot-one {
  top:50%;
  left:7%;
  opacity:0;
  transform:translate(-8%,-50%) rotate(0deg) scale(.9);
  filter:blur(6px);
  transition:opacity 1.8s ease,transform 2.8s ease,filter 1.8s ease;
}
.chapter-scene.show-first .shot-one {
  opacity:1;
  filter:blur(0);
  transform:translate(0,-50%) rotate(0deg) scale(1);
}
.chapter-scene.swap .shot-one {
  opacity:1;
  filter:blur(0);
  transform:translate(0,-50%) rotate(0deg) scale(1);
}
.shot-two {
  top:50%;
  right:7%;
  z-index:2;
  opacity:0;
  transform:translate(10%,-50%) scale(.92);
  filter:blur(8px);
  transition:opacity 2.8s ease,transform 2.8s cubic-bezier(.22,.72,.22,1),filter 2.8s ease;
}
.chapter-scene.swap .shot-two {
  opacity:1;
  filter:blur(0);
  transform:translate(0,-50%) scale(1);
}
.art-two {
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:translate(-50%,-145%) scale(.82) rotate(-2deg);
  transform-origin:center;
}
.art-transition.show-art-two .art-two {
  opacity:1;
  animation:art-slam .468s cubic-bezier(.3,.02,.25,1) forwards;
}
.art-transition.hide-art-two .art-two {
  opacity:0;
  transition:opacity 3s ease;
}
.art-transition.impact-screen {
  animation:screen-impact .58s cubic-bezier(.36,.07,.19,.97);
}
@keyframes art-slam {
  0% {
    transform:translate(-50%,-145%) scale(.82) rotate(-2deg);
  }
  62% {
    transform:translate(-50%,-47%) scale(.63) rotate(.5deg);
  }
  78% {
    transform:translate(-50%,-52%) scale(.69) rotate(-.25deg);
  }
  100% {
    transform:translate(-50%,-50%) scale(.6667) rotate(0);
  }
}
@keyframes screen-impact {
  0%,
  100% {
    transform:translate(0,0);
  }
  12% {
    transform:translate(-13px,8px) rotate(-.35deg);
  }
  27% {
    transform:translate(11px,-7px) rotate(.3deg);
  }
  43% {
    transform:translate(-8px,-4px) rotate(-.2deg);
  }
  60% {
    transform:translate(6px,5px) rotate(.14deg);
  }
  78% {
    transform:translate(-3px,2px);
  }
}
@media(max-width:560px) {
  .disclaimer {
    padding:32px 24px;
  }
  .disclaimer-title {
    margin-bottom:0;
    font-size:16px;
  }
  .disclaimer p:last-child {
    font-size:16px;
    line-height:1.55;
  }
  .chapter-number {
    font-size:16px;
  }
  .chapter-card h1 {
    font-size:48px;
  }
  .chapter-place {
    font-size:21px;
  }
  .chapter-shot {
    width:58vw;
    height:68vh;
  }
  .shot-one {
    left:-4%;
  }
  .shot-two {
    right:-3%;
  }
}
.chapter-video {
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  width:min(68vw,1040px);
  max-height:76vh;
  aspect-ratio:16/9;
  object-fit:cover;
  border:8px solid #fff;
  border-radius:14px;
  background:#111;
  box-shadow:0 30px 100px #0006;
  opacity:0;
  filter:blur(10px);
  transform:translate(-50%,-46%) scale(.88);
  transition:opacity 2.2s ease,filter 2.2s ease,transform 2.8s cubic-bezier(.22,.72,.22,1);
}
.chapter-scene.show-video .chapter-video {
  opacity:1;
  filter:blur(0);
  transform:translate(-50%,-50%) scale(1);
}
.chapter-scene.show-video .chapter-shot {
  opacity:0;
  filter:blur(5px);
  transform:translate(0,-50%) scale(.94);
  transition:opacity 2.4s ease,filter 2.4s ease,transform 2.4s ease;
}
.chapter-scene.show-video .shot-two {
  transform:translate(0,-50%) scale(.94);
}
@media(max-width:560px) {
  .chapter-video {
    width:90vw;
    max-height:68vh;
    border-width:5px;
    border-radius:10px;
  }
}
.shot-middle {
  top:50%;
  left:50%;
  z-index:2;
  width:min(38vw,560px);
  opacity:0;
  filter:blur(8px);
  transform:translate(-50%,-46%) scale(.9);
  transition:opacity 2.4s ease,filter 2.4s ease,transform 2.8s cubic-bezier(.22,.72,.22,1);
}
.chapter-scene.show-middle .shot-middle {
  opacity:1;
  filter:blur(0);
  transform:translate(-50%,-50%) scale(1);
}
.chapter-scene.show-video .shot-middle {
  opacity:0;
  filter:blur(5px);
  transform:translate(-50%,-50%) scale(.94);
  transition:opacity 2.4s ease,filter 2.4s ease,transform 2.4s ease;
}
@media(max-width:560px) {
  .shot-middle {
    width:54vw;
  }
}
.chapter-six {
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 18%;
  opacity:0;
  filter:contrast(1.18) brightness(1.25);
  transform:scale(1.045);
}
.chapter-scene.show-six .chapter-six {
  animation:film-picture-in 1.35s steps(5,end) forwards;
}
.chapter-scene.film-break .chapter-video {
  animation:film-jam .72s steps(2,end) forwards;
}
.chapter-scene.video-cut .chapter-video {
  opacity:0;
  transition:opacity .08s linear;
}
.chapter-scene::after {
  content:"";
  position:absolute;
  inset:-10% auto -10% -35%;
  z-index:7;
  width:22%;
  background:linear-gradient(90deg,transparent,#fff8 25%,#fff 48%,#fff9 72%,transparent);
  opacity:0;
  filter:blur(9px);
  transform:skewX(-8deg);
  pointer-events:none;
}
.chapter-scene.film-break::after {
  animation:film-burn .82s steps(4,end) forwards;
}
@keyframes film-jam {
  0% {
    transform:translate(-50%,-50%) scale(1);
    filter:contrast(1);
  }
  18% {
    transform:translate(-51.5%,-48.5%) scale(1.025) rotate(-.45deg);
    filter:contrast(1.45) brightness(1.12);
  }
  36% {
    transform:translate(-48.8%,-51.2%) scale(.99) rotate(.3deg);
    filter:contrast(.8) brightness(1.35);
  }
  54% {
    transform:translate(-50.8%,-49%) scale(1.035);
    filter:contrast(1.7) brightness(.8);
  }
  72% {
    transform:translate(-49.4%,-51%) scale(1.01) rotate(-.2deg);
    filter:contrast(1.2) brightness(1.7);
  }
  100% {
    transform:translate(-50%,-50%) scale(1.04);
    filter:brightness(2.2) contrast(.65);
  }
}
@keyframes film-burn {
  0% {
    left:-35%;
    opacity:0;
  }
  18% {
    opacity:.45;
  }
  45% {
    opacity:1;
  }
  76% {
    left:112%;
    opacity:.9;
  }
  100% {
    left:128%;
    opacity:0;
  }
}
@keyframes film-picture-in {
  0% {
    opacity:0;
    filter:contrast(1.7) brightness(2);
    transform:translateX(7px) scale(1.06);
  }
  24% {
    opacity:1;
    filter:contrast(.72) brightness(1.5);
    transform:translateX(-6px) scale(1.035);
  }
  48% {
    filter:contrast(1.4) brightness(.9);
    transform:translateX(4px) scale(1.025);
  }
  72% {
    filter:contrast(.92) brightness(1.12);
    transform:translateX(-2px) scale(1.012);
  }
  100% {
    opacity:1;
    filter:none;
    transform:none;
  }
}
.scene-bubble {
  position:absolute;
  top:7%;
  left:50%;
  z-index:8;
  width:min(520px,62vw);
  padding:24px 30px;
  color:#151515;
  background:#fff;
  border:3px solid #171717;
  border-radius:48% 52% 46% 54%/55% 48% 52% 45%;
  font:italic 700 clamp(18px,2.1vw,30px)/1.35 "Segoe UI",Arial,sans-serif;
  text-align:center;
  opacity:0;
  filter:drop-shadow(0 8px 4px #0004);
  transform:translate(-50%,-14px) scale(.92);
  transition:opacity .8s ease,filter .8s ease,transform .8s cubic-bezier(.22,.72,.22,1);
}
.scene-bubble::after {
  content:"";
  position:absolute;
  left:58%;
  bottom:-45px;
  width:64px;
  height:52px;
  background:#fff;
  border-right:3px solid #171717;
  clip-path:polygon(0 0,100% 0,72% 100%);
}
.chapter-scene.show-dialogue .scene-bubble {
  opacity:1;
  filter:drop-shadow(0 8px 4px #0004);
  transform:translate(-50%,0) scale(1);
}
@media(max-width:560px) {
  .scene-bubble {
    top:5%;
    width:82vw;
    padding:18px 20px;
    font-size:18px;
  }
  .scene-bubble::after {
    bottom:-35px;
    width:50px;
    height:42px;
  }
}
.scene-bubble {
  top:5%;
  width:min(590px,68vw);
  padding:38px 50px 54px;
  border:0;
  border-radius:0;
  background:#fff;
  clip-path:polygon(1% 23%,12% 24%,6% 10%,20% 13%,17% 1%,34% 6%,43% 0,55% 7%,77% 5%,73% 14%,94% 10%,89% 23%,100% 20%,94% 35%,100% 44%,91% 51%,99% 64%,85% 65%,91% 79%,74% 76%,68% 100%,58% 80%,45% 88%,35% 78%,17% 85%,22% 70%,4% 74%,12% 59%,0 55%,8% 43%,0 34%,13% 31%);
  font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-style:normal;
  font-weight:400;
  letter-spacing:.02em;
  filter:drop-shadow(2px 0 0 #111) drop-shadow(-2px 0 0 #111) drop-shadow(0 2px 0 #111) drop-shadow(0 -2px 0 #111) drop-shadow(7px 10px 0 #0003);
}
.scene-bubble::after {
  display:none;
}
.chapter-scene.show-dialogue .scene-bubble {
  filter:drop-shadow(2px 0 0 #111) drop-shadow(-2px 0 0 #111) drop-shadow(0 2px 0 #111) drop-shadow(0 -2px 0 #111) drop-shadow(7px 10px 0 #0003);
  transform:translate(-50%,0) scale(1);
}
@media(max-width:560px) {
  .scene-bubble {
    top:4%;
    width:88vw;
    padding:30px 30px 44px;
    font-size:18px;
  }
}
.scene-bubble {
  top:0;
  left:calc(50% + 300px);
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(720px,76vw);
  height:clamp(230px,calc(42.42vw - 70px),332px);
  aspect-ratio:auto;
  box-sizing:border-box;
  padding:13% 14% 17%;
  padding-left:calc(14% + 40px);
  padding-right:calc(14% - 40px);
  color:#111;
  background:transparent url("art/graffiti-bubble.png") center/100% 100% no-repeat;
  border:0;
  border-radius:0;
  clip-path:none;
  font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-size:clamp(17px,1.65vw,23px);
  font-style:normal;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.012em;
  text-shadow:0 1px 0 #fff;
  filter:drop-shadow(0 12px 8px #0004);
  transform:translate(-50%,-12px) scale(.94);
}
.scene-bubble::after {
  display:none;
}
.chapter-scene.show-dialogue .scene-bubble {
  filter:drop-shadow(0 12px 8px #0004);
  transform:translate(-50%,0) scale(1);
}
@media(max-width:560px) {
  .scene-bubble {
    top:1%;
    left:50%;
    width:94vw;
    height:clamp(210px,calc(52.46vw - 70px),260px);
    padding:14% 13% 17%;
    font-size:15px;
  }
}
.chapter-scene.bubble-break .scene-bubble {
  animation:bubble-film-break .72s steps(4,end) forwards;
}
.chapter-scene.pan-down .chapter-six {
  object-position:50% 48%;
  transition:object-position 3.2s cubic-bezier(.45,.05,.55,.95);
}
@keyframes bubble-film-break {
  0% {
    opacity:1;
    filter:contrast(1) drop-shadow(0 12px 8px #0004);
    transform:translate(-50%,0) scale(1);
  }
  18% {
    opacity:1;
    filter:contrast(1.7) brightness(1.35);
    transform:translate(-48.5%,-3px) scale(1.025) skewX(-1deg);
  }
  38% {
    filter:contrast(.7) brightness(1.8);
    transform:translate(-51.5%,3px) scale(.98) skewX(1.2deg);
  }
  58% {
    opacity:.85;
    filter:contrast(2) brightness(.75);
    transform:translate(-49%,-5px) scale(1.035);
  }
  76% {
    opacity:.5;
    filter:brightness(2.5) blur(2px);
    transform:translate(-52%,4px) scale(1.02);
  }
  100% {
    opacity:0;
    filter:brightness(3) blur(8px);
    transform:translate(-48%,-12px) scale(1.08);
  }
}
.scene-bubble {
  top:24px;
  left:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(980px,calc(100vw - 64px));
  height:auto;
  min-height:142px;
  aspect-ratio:auto;
  box-sizing:border-box;
  padding:30px 42px;
  color:#171717;
  background:#fffffff2;
  border:1px solid #242424;
  border-radius:4px;
  clip-path:none;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-size:clamp(18px,2vw,27px);
  font-style:normal;
  font-weight:500;
  line-height:1.45;
  letter-spacing:.01em;
  text-align:center;
  text-shadow:none;
  box-shadow:0 16px 50px #0003;
  backdrop-filter:blur(8px);
  filter:none;
  transform:translate(-50%,-14px);
  opacity:0;
}
.scene-bubble::after {
  display:none;
}
.chapter-scene.show-dialogue .scene-bubble {
  opacity:1;
  filter:none;
  transform:translate(-50%,0);
}
@media(max-width:560px) {
  .scene-bubble {
    top:14px;
    left:50%;
    width:calc(100vw - 28px);
    min-height:128px;
    padding:24px 22px;
    font-size:17px;
    border-radius:3px;
  }
}
.scene-bubble {
  flex-direction:column;
  gap:22px;
  pointer-events:auto;
}
.scene-text {
  width:100%;
  text-align:center;
}
.scene-choices {
  display:flex;
  justify-content:center;
  gap:14px;
  width:100%;
}
.scene-choices button {
  min-width:190px;
  padding:13px 22px;
  border:1px solid #222;
  border-radius:2px;
  color:#171717;
  background:#fff;
  font:600 15px/1.2 "Segoe UI",Arial,sans-serif;
  letter-spacing:.025em;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.scene-choices button:hover,
.scene-choices button:focus-visible {
  color:#fff;
  background:#202020;
  transform:translateY(-2px);
  box-shadow:0 8px 18px #0003;
  outline:none;
}
.scene-choices button.selected {
  color:#fff;
  background:#111;
  transform:scale(1.03);
}
.scene-choices button:disabled {
  cursor:default;
}
.scene-choices button:disabled:not(.selected) {
  opacity:.35;
}
@media(max-width:560px) {
  .scene-bubble {
    gap:16px;
  }
  .scene-choices {
    gap:8px;
  }
  .scene-choices button {
    min-width:0;
    flex:1;
    padding:11px 8px;
    font-size:13px;
  }
}
.scene-bubble {
  flex-direction:row;
  gap:0;
}
.scene-choices {
  position:absolute;
  left:50%;
  bottom:30px;
  z-index:9;
  display:flex;
  justify-content:center;
  gap:18px;
  width:min(680px,calc(100vw - 40px));
  padding:18px;
  background:#fffffff0;
  border:1px solid #222;
  box-shadow:0 14px 45px #0003;
  backdrop-filter:blur(8px);
  opacity:0;
  transform:translate(-50%,35px);
  pointer-events:none;
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,.72,.22,1);
}
.chapter-scene.show-choices .scene-choices {
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}
.scene-choices button {
  flex:1;
  min-width:0;
  max-width:280px;
  padding:15px 24px;
}
@media(max-width:560px) {
  .scene-choices {
    bottom:16px;
    width:calc(100vw - 24px);
    gap:8px;
    padding:12px;
  }
  .scene-choices button {
    padding:13px 8px;
    font-size:13px;
  }
}
/* Manga choice panel */
.scene-choices {
  bottom:clamp(20px,4.5vh,52px);
  flex-direction:column;
  gap:14px;
  width:min(760px,calc(100vw - 42px));
  padding:23px 26px 25px;
  background:#fffffff5;
  border:4px solid #101010;
  border-radius:0;
  clip-path:polygon(0 8%,3% 7%,1% 18%,2% 31%,0 43%,2% 56%,0 70%,2% 84%,1% 100%,18% 98%,34% 100%,51% 98%,68% 100%,84% 98%,100% 100%,98% 84%,100% 70%,98% 55%,100% 40%,98% 25%,100% 9%,84% 11%,69% 9%,52% 11%,35% 9%,18% 11%);
  box-shadow:10px 12px 0 #0006;
  background-image:radial-gradient(#00000018 1px,transparent 1px);
  background-size:5px 5px;
  backdrop-filter:none;
}
.scene-choices::before {
  content:"\0412\042B\0411\0415\0420\0418\0422\0415 \0414\0415\0419\0421\0422\0412\0418\0415";
  margin:0 0 2px;
  color:#111;
  font:900 12px/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.18em;
  text-align:center;
  transform:skewX(-5deg);
}
.scene-choices button {
  position:relative;
  width:100%;
  max-width:none;
  min-height:61px;
  padding:15px 58px;
  overflow:visible;
  color:#111;
  background:#fff;
  border:3px solid #111;
  border-radius:0;
  clip-path:polygon(0 10%,2% 5%,1% 36%,0 65%,2% 94%,19% 98%,37% 95%,55% 100%,73% 96%,100% 100%,98% 66%,100% 32%,98% 3%,78% 6%,59% 1%,39% 5%,20% 2%);
  font:900 clamp(17px,1.8vw,22px)/1.1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-shadow:1px 1px 0 #fff;
  box-shadow:6px 6px 0 #111;
  transform:skewX(-2deg);
  transition:color .12s ease,background .12s ease,transform .12s ease,box-shadow .12s ease;
}
.scene-choices button:nth-of-type(2) {
  transform:skewX(2deg);
}
.scene-choices button::before {
  content:"\25B6";
  position:absolute;
  left:24px;
  top:50%;
  color:#111;
  font-size:17px;
  opacity:0;
  transform:translate(-10px,-50%);
  transition:opacity .12s ease,transform .12s ease;
}
.scene-choices button::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-12px -22px;
  background:repeating-linear-gradient(166deg,transparent 0 7px,#111 8px 10px,transparent 11px 18px);
  opacity:0;
  transform:scaleX(.8);
  transition:opacity .12s ease,transform .12s ease;
}
.scene-choices button:hover,
.scene-choices button:focus-visible {
  color:#fff;
  background:#111;
  border-color:#111;
  box-shadow:9px 9px 0 #777;
  outline:none;
  transform:translate(-3px,-2px) skewX(-2deg) rotate(-.35deg);
  animation:manga-choice-shake .22s steps(2,end) infinite;
}
.scene-choices button:nth-of-type(2):hover,
.scene-choices button:nth-of-type(2):focus-visible {
  transform:translate(3px,-2px) skewX(2deg) rotate(.35deg);
}
.scene-choices button:hover::before,
.scene-choices button:focus-visible::before {
  color:#fff;
  opacity:1;
  transform:translate(0,-50%);
}
.scene-choices button:hover::after,
.scene-choices button:focus-visible::after {
  opacity:.22;
  transform:scaleX(1);
}
.scene-choices button.selected {
  color:#fff;
  background:#111;
  border-color:#111;
  box-shadow:0 0 0 5px #fff,0 0 0 8px #111;
  animation:none;
}
@keyframes manga-choice-shake {
  0% {
    margin-left:-1px;
  }
  50% {
    margin-left:2px;
  }
  100% {
    margin-left:0;
  }
}
@media(max-width:560px) {
  .scene-choices {
    bottom:12px;
    width:calc(100vw - 18px);
    gap:10px;
    padding:17px 14px 19px;
    border-width:3px;
    box-shadow:6px 7px 0 #0006;
  }
  .scene-choices button {
    min-height:53px;
    padding:12px 40px;
    font-size:15px;
    border-width:2px;
    box-shadow:4px 4px 0 #111;
  }
  .scene-choices button::before {
    left:17px;
    font-size:14px;
  }
}
/* Add-gas branch */
.chapter-scene.show-seven .chapter-seven {
  animation:g1-seven-drop .72s cubic-bezier(.18,.8,.2,1) forwards;
}
.chapter-scene.choice-made .scene-choices {
  opacity:0;
  transform:translate(-50%,28px) scale(.96);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.chapter-scene.gas-impact {
  animation:gas-screen-impact .68s cubic-bezier(.36,.07,.19,.97);
}
@keyframes g1-seven-drop {
  0% {
    opacity:0;
    filter:contrast(1.5) brightness(1.65) blur(3px);
    transform:translateY(-115%) scale(1.06);
  }
  68% {
    opacity:1;
    filter:contrast(1.18) brightness(1.1);
    transform:translateY(4%) scale(1.025);
  }
  82% {
    transform:translateY(-2%) scale(1.012);
  }
  100% {
    opacity:1;
    filter:none;
    transform:translateY(0) scale(1);
  }
}
@keyframes gas-screen-impact {
  0%,
  100% {
    transform:translate(0,0);
  }
  12% {
    transform:translate(-15px,9px) rotate(-.35deg);
  }
  26% {
    transform:translate(13px,-8px) rotate(.28deg);
  }
  42% {
    transform:translate(-10px,-5px) rotate(-.2deg);
  }
  58% {
    transform:translate(8px,6px) rotate(.15deg);
  }
  76% {
    transform:translate(-5px,3px);
  }
  90% {
    transform:translate(2px,-2px);
  }
}
/* Manga dialogue and gas transition */
.scene-bubble {
  top:22px;
  left:50%;
  width:min(920px,calc(100vw - 54px));
  min-height:150px;
  padding:31px 58px 35px;
  color:#111;
  background-color:#fffffff7;
  background-image:radial-gradient(#0000001c 1px,transparent 1px);
  background-size:5px 5px;
  border:4px solid #111;
  border-radius:0;
  clip-path:polygon(0 9%,3% 7%,1% 23%,2% 39%,0 55%,2% 71%,1% 98%,17% 96%,34% 100%,51% 97%,67% 100%,84% 96%,100% 99%,98% 75%,100% 57%,98% 38%,100% 8%,84% 11%,67% 7%,50% 10%,33% 6%,17% 10%);
  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:clamp(19px,2.1vw,29px);
  font-style:normal;
  font-weight:900;
  line-height:1.28;
  letter-spacing:.025em;
  text-transform:none;
  text-shadow:2px 2px 0 #fff;
  box-shadow:10px 11px 0 #0008;
  backdrop-filter:none;
  filter:none;
  transform:translate(-50%,-18px) skewX(-1deg);
  opacity:0;
}
.scene-bubble::before {
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:12px;
  height:2px;
  background:repeating-linear-gradient(168deg,transparent 0 15px,#111 16px 17px,transparent 18px 31px);
  opacity:.055;
  inset:12px;
  pointer-events:none;
}
.chapter-scene.show-dialogue .scene-bubble {
  opacity:1;
  filter:none;
  transform:translate(-50%,0) skewX(-1deg);
}
.chapter-scene.bubble-break .scene-bubble {
  animation:bubble-film-break .72s steps(4,end) forwards;
}
.chapter-scene.gas-fade .chapter-six,
.chapter-scene.drive-fade .chapter-six {
  opacity:0;
  filter:brightness(1.5) contrast(.8) blur(5px);
  transform:scale(1.035);
  transition:opacity 1.45s ease,filter 1.45s ease,transform 1.45s ease;
}
@media(max-width:560px) {
  .scene-bubble {
    top:12px;
    width:calc(100vw - 22px);
    min-height:132px;
    padding:25px 25px 29px;
    border-width:3px;
    font-size:17px;
    box-shadow:6px 7px 0 #0008;
  }
}
/* White-out before g1-7 and stronger dialogue outline */
.chapter-scene::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:10;
  background:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.45s cubic-bezier(.4,0,.2,1);
}
.chapter-scene.gas-fade::before,
.chapter-scene.drive-fade::before {
  opacity:1;
}
.chapter-seven {
  position:absolute;
  inset:0;
  z-index:11;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 20%;
  opacity:0;
  filter:contrast(1.35) brightness(1.35) blur(2px);
  transform:translateY(-115%) scale(1.06);
  pointer-events:none;
}
.scene-bubble {
  border:5px solid #050505;
  filter:drop-shadow(3px 0 0 #050505) drop-shadow(-3px 0 0 #050505) drop-shadow(0 3px 0 #050505) drop-shadow(0 -3px 0 #050505) drop-shadow(10px 11px 0 #0008);
}
.chapter-scene.show-dialogue .scene-bubble {
  filter:drop-shadow(3px 0 0 #050505) drop-shadow(-3px 0 0 #050505) drop-shadow(0 3px 0 #050505) drop-shadow(0 -3px 0 #050505) drop-shadow(10px 11px 0 #0008);
}
@media(max-width:560px) {
  .scene-bubble {
    border-width:4px;
    filter:drop-shadow(2px 0 0 #050505) drop-shadow(-2px 0 0 #050505) drop-shadow(0 2px 0 #050505) drop-shadow(0 -2px 0 #050505) drop-shadow(6px 7px 0 #0008);
  }
  .chapter-scene.show-dialogue .scene-bubble {
    filter:drop-shadow(2px 0 0 #050505) drop-shadow(-2px 0 0 #050505) drop-shadow(0 2px 0 #050505) drop-shadow(0 -2px 0 #050505) drop-shadow(6px 7px 0 #0008);
  }
}
/* Film break from g1-7 to g1-5 */
.chapter-five {
  position:absolute;
  inset:0;
  z-index:12;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 18%;
  background:#fff;
  opacity:0;
  pointer-events:none;
}
@keyframes gas-next-picture-in {
  0% {
    opacity:0;
    filter:contrast(1.8) brightness(2);
    transform:translateX(8px) scale(1.055);
  }
  24% {
    opacity:1;
    filter:contrast(.7) brightness(1.55);
    transform:translateX(-7px) scale(1.035);
  }
  48% {
    filter:contrast(1.45) brightness(.88);
    transform:translateX(5px) scale(1.025);
  }
  72% {
    filter:contrast(.9) brightness(1.15);
    transform:translateX(-3px) scale(1.012);
  }
  100% {
    opacity:1;
    filter:none;
    transform:none;
  }
}
/* Smooth camera push on g1-5 */
/* Clean transition after gas: white screen, then slow full-screen g1-5 */
@keyframes g1-five-slow-reveal {
  0% {
    opacity:0;
    filter:blur(5px) brightness(1.25);
    transform:none;
  }
  100% {
    opacity:1;
    filter:none;
    transform:none;
  }
}
/* Engine-synced gas flicker and g1-5 top-to-center scroll */
.chapter-scene.show-seven.gas-flicker .chapter-seven {
  opacity:1;
  transform:none;
  animation:gas-engine-flicker .52s steps(1,end) infinite;
}
@keyframes gas-engine-flicker {
  0% {
    opacity:1;
    filter:contrast(1) brightness(1);
    transform:translate3d(0,0,0) scale(1);
  }
  12% {
    opacity:.45;
    filter:grayscale(1) contrast(2.2) brightness(1.9);
    transform:translate3d(-7px,4px,0) scale(1.018);
  }
  25% {
    opacity:.95;
    filter:contrast(.65) brightness(.72);
    transform:translate3d(5px,-5px,0) scale(.995);
  }
  38% {
    opacity:.18;
    filter:grayscale(1) contrast(2.8) brightness(2.6);
    transform:translate3d(-3px,6px,0) scale(1.025);
  }
  52% {
    opacity:1;
    filter:contrast(1.6) brightness(.62);
    transform:translate3d(7px,-2px,0) scale(1.01);
  }
  67% {
    opacity:.58;
    filter:grayscale(.8) contrast(.8) brightness(1.7);
    transform:translate3d(-5px,-4px,0) scale(1.02);
  }
  82% {
    opacity:.9;
    filter:contrast(2) brightness(.8);
    transform:translate3d(3px,5px,0) scale(1.005);
  }
  100% {
    opacity:1;
    filter:none;
    transform:translate3d(0,0,0) scale(1);
  }
}
.chapter-scene.clear-after-gas .chapter-seven {
  opacity:0;
  filter:brightness(1.5) blur(4px);
  transition:opacity 1.25s ease,filter 1.25s ease;
  animation:none;
  transform:none;
}
.chapter-scene.show-five .chapter-five {
  animation:g1-five-top-to-center 4s cubic-bezier(.33,0,.2,1) forwards;
  object-fit:cover;
  object-position:50% 50%;
  opacity:0;
  transform:none;
  filter:none;
  will-change:object-position,opacity;
}
@keyframes g1-five-top-to-center {
  0% {
    opacity:0;
    object-position:50% 0%;
    filter:blur(4px);
  }
  18% {
    opacity:1;
    object-position:50% 0%;
    filter:none;
  }
  100% {
    opacity:1;
    object-position:50% 66%;
    filter:none;
  }
}
/* Center light after g1-5 stops */
.center-light {
  position:absolute;
  inset:0;
  z-index:14;
  overflow:hidden;
  background:#fff0;
  opacity:0;
  pointer-events:none;
}
.center-light::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10vmax;
  height:10vmax;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 5vmax 3vmax #fff,0 0 11vmax 7vmax #ffffffc7;
  transform:translate(-50%,-50%) scale(.03);
  opacity:0;
}
.chapter-scene.center-light-on .center-light {
  animation:center-light-screen 3.5s ease-in forwards;
}
.chapter-scene.center-light-on .center-light::before {
  animation:center-light-expand 3.5s cubic-bezier(.22,.62,.22,1) forwards;
}
@keyframes center-light-expand {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.03);
  }
  10% {
    opacity:.55;
  }
  55% {
    opacity:.95;
  }
  100% {
    opacity:1;
    transform:translate(-50%,-50%) scale(20);
  }
}
@keyframes center-light-screen {
  0%,
  60% {
    opacity:1;
    background:#fff0;
  }
  100% {
    opacity:1;
    background:#fff;
  }
}
/* Full-screen 2.mp4 playback */
.chapter-video-two {
  position:absolute;
  inset:0;
  z-index:16;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:#000;
  opacity:0;
  pointer-events:none;
  filter:none;
  transform:scale(1.035);
  transition:opacity .78s ease,transform .9s cubic-bezier(.22,.72,.22,1);
}
.chapter-scene.show-video-two .chapter-video-two {
  opacity:1;
  transition:opacity .78s ease,transform .9s cubic-bezier(.22,.72,.22,1);
  filter:none;
  transform:scale(1);
}
/* Smooth cinematic dissolve from 2.mp4 to 3.mp4 */
.chapter-scene.show-video-three .video-three {
  opacity:1;
  filter:none;
  transform:scale(1);
}
.chapter-scene.show-video-three .chapter-video-two {
  opacity:0;
  filter:blur(3px);
  transform:scale(1.018);
  transition:opacity 1.25s ease,filter 1.25s ease,transform 1.45s ease;
}
/* Side-slide transition from 3.mp4 to angled u1-2 */
.u-one-two {
  position:absolute;
  inset:auto;
  top:3vh;
  right:auto;
  bottom:auto;
  left:calc(2vw + 100px);
  z-index:19;
  width:34vw;
  height:72vh;
  object-fit:contain;
  object-position:top right;
  opacity:0;
  filter:blur(5px) brightness(1.16);
  transform:translate3d(-115vw,0,0) rotate(-20deg) scale(.9);
  transform-origin:center;
  pointer-events:none;
  will-change:transform,opacity,filter;
}
.chapter-scene.show-u-one-two .u-one-two {
  animation:u-one-two-side-arrival 1.1s cubic-bezier(.18,.78,.2,1) forwards;
}
.chapter-scene.u-one-two-impact {
  animation:u-one-two-screen-impact .65s cubic-bezier(.36,.07,.19,.97);
}
.u-one-dialog {
  position:absolute;
  top:9vh;
  right:3vw;
  bottom:auto;
  left:auto;
  z-index:20;
  width:min(47vw,760px);
  padding:30px 40px;
  color:#111;
  background-color:#fffffff7;
  background-image:radial-gradient(#0000001c 1px,transparent 1px);
  background-size:5px 5px;
  border:5px solid #080808;
  clip-path:polygon(0 7%,3% 5%,1% 24%,2% 43%,0 61%,2% 82%,1% 100%,17% 97%,35% 100%,52% 97%,69% 100%,85% 97%,100% 100%,98% 79%,100% 58%,98% 37%,100% 6%,83% 9%,67% 6%,50% 9%,33% 5%,17% 9%);
  font:900 clamp(18px,1.9vw,27px)/1.35 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.02em;
  text-align:center;
  text-shadow:2px 2px 0 #fff;
  box-shadow:10px 11px 0 #0008;
  opacity:0;
  transform:translate3d(55px,0,0) skewX(-1deg);
  pointer-events:none;
  transition:opacity .8s ease,transform .9s cubic-bezier(.22,.72,.22,1);
}
.chapter-scene.show-u-one-dialog .u-one-dialog {
  opacity:1;
  transform:translate3d(0,0,0) skewX(-1deg);
}
@keyframes u-one-two-side-arrival {
  0% {
    opacity:0;
    filter:blur(5px) brightness(1.16);
    transform:translate3d(-115vw,0,0) rotate(-20deg) scale(.9);
  }
  72% {
    opacity:1;
    filter:none;
    transform:translate3d(3vw,0,0) rotate(-11deg) scale(1.025);
  }
  86% {
    transform:translate3d(-1vw,0,0) rotate(-14deg) scale(.995);
  }
  100% {
    opacity:1;
    filter:none;
    transform:translate3d(0,0,0) rotate(-13deg) scale(1);
  }
}
@keyframes u-one-two-screen-impact {
  0%,
  100% {
    transform:translate(0,0);
  }
  14% {
    transform:translate(-11px,7px) rotate(-.25deg);
  }
  30% {
    transform:translate(9px,-6px) rotate(.2deg);
  }
  48% {
    transform:translate(-7px,-3px) rotate(-.15deg);
  }
  68% {
    transform:translate(5px,4px);
  }
  86% {
    transform:translate(-2px,1px);
  }
}
@media(max-width:700px) {
  .u-one-two {
    top:2vh;
    right:auto;
    left:calc(2vw + 100px);
    width:44vw;
    height:54vh;
  }
  .u-one-dialog {
    top:42vh;
    right:3vw;
    bottom:auto;
    width:94vw;
    padding:24px 22px;
    border-width:3px;
    font-size:17px;
    box-shadow:6px 7px 0 #0008;
  }
}
/* Click dialogue transitions */
.chapter-scene.show-u-one-dialog {
  pointer-events:auto;
}
.chapter-scene.show-u-one-dialog .u-one-dialog {
  pointer-events:auto;
  cursor:pointer;
}
/* Third click: scroll composition down and bring in u1-3 */
.chapter-scene.scroll-down-20 .u-one-two {
  animation:none;
  opacity:1;
  filter:none;
  transform:translate3d(0,-20vh,0) rotate(-13deg) scale(1);
  transition:transform 1.35s cubic-bezier(.33,0,.2,1);
}
.chapter-scene.scroll-down-20 .u-one-dialog {
  opacity:1;
  transform:translate3d(0,0,0) skewX(-1deg);
  pointer-events:none;
  transition:opacity .55s ease,transform 1.35s cubic-bezier(.33,0,.2,1);
}
.u-one-three {
  position:absolute;
  top:calc(50% + 30px);
  right:auto;
  bottom:auto;
  left:50%;
  z-index:21;
  width:42vw;
  height:76vh;
  object-fit:contain;
  object-position:center;
  opacity:0;
  filter:blur(5px) brightness(1.1);
  transform:translate3d(-50%,-160%,0) scale(.94);
  transform-origin:center;
  pointer-events:none;
  will-change:transform,opacity,filter;
}
.chapter-scene.show-u-one-three .u-one-three {
  animation:u-one-three-arrival .9s cubic-bezier(.18,.8,.2,1) forwards;
}
@keyframes u-one-three-arrival {
  0% {
    opacity:0;
    filter:blur(5px) brightness(1.1);
    transform:translate3d(-50%,-160%,0) scale(.94);
  }
  72% {
    opacity:1;
    filter:none;
    transform:translate3d(-50%,-46%,0) scale(1.025);
  }
  86% {
    transform:translate3d(-50%,-52%,0) scale(.995);
  }
  100% {
    opacity:1;
    filter:none;
    transform:translate3d(-50%,-50%,0) scale(1);
  }
}
@media(max-width:700px) {
  .u-one-three {
    top:calc(50% + 30px);
    right:auto;
    left:50%;
    width:62vw;
    height:62vh;
  }
}
/* Soft page-turn transition from 3.mp4 to u1-2 */
.chapter-scene {
  position:absolute;
  inset:0;
  z-index:5;
  visibility:hidden;
  overflow:hidden;
  background:#fff;
  perspective:1600px;
  perspective-origin:50% 50%;
}
.post-video-white {
  position:absolute;
  inset:0;
  z-index:16;
  background:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.chapter-scene.video-three-slide .post-video-white {
  opacity:1;
}
.video-three {
  position:absolute;
  inset:0;
  z-index:23;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  filter:blur(5px) brightness(1.1);
  transform:scale(1.035);
  pointer-events:none;
  transition:opacity 1.45s ease,filter 1.45s ease,transform 1.7s cubic-bezier(.22,.72,.22,1);
  will-change:transform,filter,opacity;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  transform-origin:left center;
}
.manga-transition-swipe::before {
  content:"";
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:0;
  width:18%;
  background:linear-gradient(90deg,#0000,#0002 32%,#fff9 62%,#fff 78%,#0003 100%);
  filter:blur(5px);
  transform:translateX(480%) skewX(-5deg);
}
.manga-transition-swipe::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#0000 0,#00000012 42%,#fff8 63%,#0000 82%);
  opacity:0;
}
.chapter-scene.video-three-slide .manga-transition-swipe {
  opacity:1;
  animation:page-fold-layer 1.45s linear forwards;
}
.chapter-scene.video-three-slide .manga-transition-swipe::before {
  animation:page-fold-edge 1.35s cubic-bezier(.42,.02,.18,1) forwards;
}
.chapter-scene.video-three-slide .manga-transition-swipe::after {
  animation:page-fold-light 1.35s ease forwards;
}
.chapter-scene.show-u-one-two .u-one-two {
  animation:u-one-two-under-page 1.38s cubic-bezier(.18,.72,.2,1) forwards;
}
@keyframes video-page-turn {
  0% {
    opacity:1;
    filter:none;
    transform:rotateY(0deg) translate3d(0,0,0) scale(1);
  }
  38% {
    opacity:1;
    filter:brightness(1.06) contrast(.96);
    transform:rotateY(-24deg) translate3d(-1%,0,20px) scale(1.008);
  }
  72% {
    opacity:.88;
    filter:brightness(1.22) contrast(.82);
    transform:rotateY(-68deg) translate3d(-4%,0,35px) scale(1.015);
  }
  100% {
    opacity:0;
    filter:brightness(1.5) blur(3px);
    transform:rotateY(-108deg) translate3d(-7%,0,20px) scale(1.02);
  }
}
@keyframes page-fold-edge {
  0% {
    opacity:0;
    transform:translateX(480%) skewX(-5deg);
  }
  16% {
    opacity:.72;
  }
  72% {
    opacity:1;
  }
  100% {
    opacity:0;
    transform:translateX(-110%) skewX(7deg);
  }
}
@keyframes page-fold-light {
  0% {
    opacity:0;
  }
  28% {
    opacity:.28;
  }
  72% {
    opacity:.65;
  }
  100% {
    opacity:0;
  }
}
@keyframes page-fold-layer {
  0%,
  88% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@keyframes u-one-two-under-page {
  0% {
    opacity:0;
    filter:brightness(1.2) blur(4px);
    transform:translate3d(-8vw,0,0) rotate(-16deg) scale(.96);
  }
  35% {
    opacity:.35;
  }
  72% {
    opacity:.9;
    filter:brightness(1.04) blur(1px);
  }
  100% {
    opacity:1;
    filter:none;
    transform:translate3d(0,0,0) rotate(-13deg) scale(1);
  }
}
/* Typed dialogue feedback */
.u-one-dialog {
  white-space:pre-line;
}
.u-one-dialog.typing::after {
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:5px;
  background:#111;
  vertical-align:-.12em;
  animation:dialogue-cursor .65s steps(1,end) infinite;
}
@keyframes dialogue-cursor {
  50% {
    opacity:0;
  }
}
/* Swap u1-4 to u1 after the second spoken line */
.u-one-after-second {
  position:absolute;
  inset:auto;
  top:3vh;
  right:auto;
  bottom:auto;
  left:calc(2vw + 100px);
  z-index:19;
  width:34vw;
  height:72vh;
  object-fit:contain;
  object-position:top right;
  opacity:0;
  filter:blur(4px) brightness(1.12);
  transform:rotate(-13deg) scale(1.035);
  transform-origin:center;
  pointer-events:none;
}
.chapter-scene.show-u-one-after-second .u-one-two {
  animation:u-one-four-out .8s ease forwards;
}
.chapter-scene.show-u-one-after-second .u-one-after-second {
  animation:u-one-after-second-in .9s ease forwards;
}
.chapter-scene.scroll-down-20 .u-one-after-second {
  animation:none;
  opacity:1;
  filter:none;
  transform:translate3d(0,-20vh,0) rotate(-13deg) scale(1);
  transition:transform 1.35s cubic-bezier(.33,0,.2,1);
}
@keyframes u-one-four-out {
  0% {
    opacity:1;
    filter:none;
    transform:translate3d(0,0,0) rotate(-13deg) scale(1);
  }
  100% {
    opacity:0;
    filter:blur(4px) brightness(1.15);
    transform:translate3d(-2vw,0,0) rotate(-15deg) scale(1.035);
  }
}
@keyframes u-one-after-second-in {
  0% {
    opacity:0;
    filter:blur(4px) brightness(1.12);
    transform:translate3d(2vw,0,0) rotate(-11deg) scale(1.035);
  }
  100% {
    opacity:1;
    filter:none;
    transform:translate3d(0,0,0) rotate(-13deg) scale(1);
  }
}
@media(max-width:700px) {
  .u-one-after-second {
    top:2vh;
    left:calc(2vw + 100px);
    width:44vw;
    height:54vh;
  }
}
/* Full-screen u1-4 and u1 */
.u-one-two,
.u-one-after-second {
  inset:0;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform-origin:center;
}
.chapter-scene.show-u-one-two .u-one-two {
  animation:u-one-four-fullscreen-in 1.38s cubic-bezier(.18,.72,.2,1) forwards;
}
.chapter-scene.show-u-one-after-second .u-one-two {
  animation:u-one-four-fullscreen-out .8s ease forwards;
}
.chapter-scene.show-u-one-after-second .u-one-after-second {
  animation:u-one-fullscreen-swap-in .9s ease forwards;
}
.chapter-scene.scroll-down-20 .u-one-two,
.chapter-scene.scroll-down-20 .u-one-after-second {
  animation:none;
  opacity:1;
  filter:none;
  transform:translate3d(0,-20vh,0) scale(1);
  transition:transform 1.35s cubic-bezier(.33,0,.2,1);
}
@keyframes u-one-four-fullscreen-in {
  0% {
    opacity:0;
    filter:brightness(1.2) blur(4px);
    transform:scale(1.035);
  }
  38% {
    opacity:.42;
  }
  100% {
    opacity:1;
    filter:none;
    transform:scale(1);
  }
}
@keyframes u-one-four-fullscreen-out {
  0% {
    opacity:1;
    filter:none;
    transform:scale(1);
  }
  100% {
    opacity:0;
    filter:blur(4px) brightness(1.12);
    transform:scale(1.025);
  }
}
@keyframes u-one-fullscreen-swap-in {
  0% {
    opacity:0;
    filter:blur(4px) brightness(1.12);
    transform:scale(1.035);
  }
  100% {
    opacity:1;
    filter:none;
    transform:scale(1);
  }
}
/* Hard cut from 3.mp4 to u1-4 */
.manga-transition-swipe {
  position:absolute;
  inset:0;
  z-index:24;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  display:none!important;
}
.chapter-scene.video-three-slide .video-three {
  opacity:0;
  filter:none;
  transform:none;
  transition:none;
  animation:none;
  clip-path:none;
}
.chapter-scene.show-u-one-two .u-one-two {
  animation:none;
  opacity:1;
  filter:none;
  transform:none;
  transition:none;
}
/* Dialogue layout split between u1-4 and u1 */
.u-one-dialog {
  top:auto;
  right:auto;
  bottom:6vh;
  left:50%;
  width:min(72vw,980px);
  transform:translate3d(-50%,45px,0) skewX(-1deg);
}
.chapter-scene.show-u-one-dialog .u-one-dialog {
  opacity:1;
  transform:translate3d(-50%,0,0) skewX(-1deg);
}
.chapter-scene.u-one-four-exit .u-one-two {
  animation:u-one-scene-out .68s ease forwards;
}
.chapter-scene.u-one-four-exit .u-one-dialog {
  opacity:0;
  transform:translate3d(-50%,22px,0) skewX(-1deg);
  transition:opacity .55s ease,transform .6s ease;
}
.chapter-scene.show-u-one-after-second .u-one-two {
  animation:none;
  opacity:0;
  filter:none;
  transform:none;
}
.chapter-scene.show-u-one-after-second .u-one-after-second {
  animation:u-one-new-scene-in .78s ease forwards;
}
.chapter-scene.u-one-dialog-top .u-one-dialog {
  top:5vh;
  right:auto;
  bottom:auto;
  left:50%;
  opacity:1;
  transform:translate3d(-50%,0,0) skewX(-1deg);
  animation:u-one-dialog-top-in .72s ease forwards;
}
.u-one-dialog.text-impact {
  animation:centered-dialogue-shake .34s steps(3,end);
}
@keyframes u-one-scene-out {
  0% {
    opacity:1;
    filter:none;
    transform:scale(1);
  }
  100% {
    opacity:0;
    filter:blur(5px) brightness(1.16);
    transform:scale(1.025);
  }
}
@keyframes u-one-new-scene-in {
  0% {
    opacity:0;
    filter:blur(5px) brightness(1.15);
    transform:scale(1.035);
  }
  100% {
    opacity:1;
    filter:none;
    transform:scale(1);
  }
}
@keyframes u-one-dialog-top-in {
  0% {
    opacity:0;
    transform:translate3d(-50%,-25px,0) skewX(-1deg);
  }
  100% {
    opacity:1;
    transform:translate3d(-50%,0,0) skewX(-1deg);
  }
}
@keyframes centered-dialogue-shake {
  0%,
  100% {
    transform:translate3d(-50%,0,0) skewX(-1deg);
  }
  20% {
    transform:translate3d(calc(-50% - 7px),2px,0) rotate(-.35deg) skewX(-1deg);
  }
  45% {
    transform:translate3d(calc(-50% + 6px),-2px,0) rotate(.28deg) skewX(-1deg);
  }
  70% {
    transform:translate3d(calc(-50% - 3px),1px,0) rotate(-.12deg) skewX(-1deg);
  }
}
@media(max-width:700px) {
  .u-one-dialog {
    right:auto;
    bottom:4vh;
    left:50%;
    width:94vw;
  }
  .chapter-scene.u-one-dialog-top .u-one-dialog {
    top:3vh;
    right:auto;
    bottom:auto;
    left:50%;
  }
}
.farewell-dialog {
  position:absolute;
  top:50%;
  left:50%;
  z-index:18;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(460px,calc(100vw - 44px));
  min-height:170px;
  padding:32px;
  color:#111;
  background:#fff;
  border:5px solid #050505;
  font:900 clamp(34px,6vw,68px)/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.04em;
  box-shadow:12px 13px 0 #0009;
  opacity:0;
  filter:blur(7px);
  transform:translate(-50%,-44%) scale(.9);
  pointer-events:none;
  transition:opacity .55s ease,filter .55s ease,transform .7s cubic-bezier(.18,.8,.2,1);
}
.chapter-scene.show-farewell-dialog .farewell-dialog {
  opacity:1;
  filter:none;
  transform:translate(-50%,-50%) scale(1);
}
@media(max-width:560px) {
  .farewell-dialog {
    min-height:135px;
    border-width:4px;
    box-shadow:7px 8px 0 #0009;
  }
}