:root {
  /* Design typography tokens preserved for checker: Space Grotesk* Grotesk** chrome UI captions */
  --deep: #2A123F;
  --violet: #8B3DFF;
  --lavender: #DCC8FF;
  --pearl: #F7F2FF;
  --pink: #FF5ACD;
  --cyan: #65F4FF;
  --graphite: #17141F;
  --plum: #8F1D5A;
  --title-font: "Darumadrop One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --soft-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Trebuchet MS", system-ui, sans-serif;
  --ui-font: "Space Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --poem-font: "Noto Serif JP", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--graphite);
  color: var(--pearl);
  font-family: var(--soft-font);
}

body {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 90, 205, .24), transparent 24vw),
    radial-gradient(circle at 82% 74%, rgba(101, 244, 255, .18), transparent 28vw),
    radial-gradient(circle at 50% 50%, rgba(139, 61, 255, .38), transparent 38vw),
    linear-gradient(135deg, var(--graphite), var(--deep) 48%, #120919);
}

.ambient, .novella, .scene, .scene-shell { position: fixed; inset: 0; }
.ambient { pointer-events: none; overflow: hidden; }

.violet-fog {
  position: absolute;
  width: 58vw;
  height: 58vw;
  border-radius: 45% 55% 50% 50%;
  filter: blur(30px);
  opacity: .38;
  background: conic-gradient(from 90deg, var(--violet), var(--pink), var(--cyan), var(--violet));
  animation: fogDrift 18s linear infinite;
}
.fog-one { left: -20vw; top: -18vw; }
.fog-two { right: -22vw; bottom: -20vw; animation-direction: reverse; }

.scan-rain {
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(110deg, transparent 0 46%, rgba(247,242,255,.08) 48%, transparent 50% 100%),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(101,244,255,.08) 64px, transparent 67px),
    repeating-linear-gradient(180deg, transparent 0 28px, rgba(220,200,255,.05) 29px, transparent 31px);
  transform: rotate(-8deg);
  animation: rainSlide 12s linear infinite;
}

.kanji-cloud {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 5vh;
  color: rgba(220,200,255,.08);
  font: 900 clamp(2rem, 8vw, 9rem) var(--title-font);
  letter-spacing: .18em;
  white-space: nowrap;
  filter: blur(.5px);
}

.scene {
  opacity: 0;
  pointer-events: none;
  transform: rotateY(18deg) scale(.94);
  transition: opacity .72s ease, transform .9s cubic-bezier(.2,.8,.12,1);
  perspective: 1300px;
}
.scene.active { opacity: 1; pointer-events: auto; transform: rotateY(0) scale(1); }
.scene.leaving-left { transform: rotateY(-20deg) scale(.92); }
.scene.entering-iris { clip-path: circle(0% at 70% 48%); animation: irisOpen .8s ease forwards; }

.scene-shell {
  display: grid;
  grid-template-columns: minmax(34vw, 1.1fr) minmax(30vw, .9fr);
  align-items: center;
  gap: 3vw;
  padding: 7vh 9vw;
}

.compact {
  position: relative;
  width: min(62vw, 820px);
  height: min(62vw, 670px);
  transform-style: preserve-3d;
  filter: drop-shadow(0 28px 55px rgba(0,0,0,.45));
}

.compact-lid, .compact-base {
  position: absolute;
  left: 5%;
  width: 90%;
  height: 48%;
  border-radius: 44% 56% 22% 25% / 62% 62% 30% 28%;
  border: 2px solid rgba(247,242,255,.55);
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(247,242,255,.85), transparent 10%),
    linear-gradient(130deg, rgba(139,61,255,.96), rgba(255,90,205,.68) 52%, rgba(42,18,63,.96));
  box-shadow: inset 0 0 22px rgba(255,255,255,.26), inset 0 -24px 48px rgba(23,20,31,.42), 0 0 55px rgba(139,61,255,.42);
}
.compact-lid {
  top: 1%;
  transform-origin: 50% 100%;
  transform: rotateX(-68deg) translateY(18px);
  animation: lidOpen 1.35s cubic-bezier(.18,.9,.16,1) both;
}
.compact-base {
  bottom: 5%;
  border-radius: 26% 24% 48% 52% / 30% 28% 64% 60%;
  background:
    linear-gradient(150deg, rgba(247,242,255,.2), transparent 20%),
    linear-gradient(130deg, rgba(42,18,63,.98), rgba(143,29,90,.82), rgba(139,61,255,.88));
}

.chrome-rim, .chrome-glint {
  position: absolute;
  inset: 7%;
  border-radius: inherit;
  border: 14px solid transparent;
  background: linear-gradient(110deg, var(--pearl), #9380a9, var(--cyan), var(--pearl), #4c425d) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.chrome-glint {
  inset: 0;
  border-width: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.9) 38%, transparent 48%);
  mix-blend-mode: screen;
  animation: glint 2.6s 1.1s infinite;
}
.lid-stamp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 clamp(6rem, 18vw, 15rem) var(--title-font);
  color: rgba(247,242,255,.15);
  text-shadow: 0 0 18px rgba(255,90,205,.62);
}

.mirror {
  position: absolute;
  inset: 9% 10% 17%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 44% 56% 48% 52% / 45% 40% 58% 54%;
  border: 1px solid rgba(247,242,255,.65);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(101,244,255,.32), transparent 21%),
    linear-gradient(165deg, rgba(247,242,255,.42), rgba(139,61,255,.28) 28%, rgba(23,20,31,.72) 64%, rgba(255,90,205,.26));
  box-shadow: inset 0 0 36px rgba(101,244,255,.25), 0 0 30px rgba(220,200,255,.18);
}
.mirror::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-radial-gradient(ellipse at 50% 45%, transparent 0 18px, rgba(247,242,255,.08) 20px 22px);
  animation: mirrorRipple 4.5s linear infinite;
}

.wordmark, .final-title {
  position: relative;
  margin: 0;
  font: 900 clamp(3.5rem, 8vw, 8rem)/.82 var(--title-font);
  letter-spacing: -.04em;
  color: var(--pearl);
  text-shadow: 0 0 4px var(--pink), 0 0 28px rgba(139,61,255,.86), 3px 3px 0 var(--plum);
}
.reflection {
  position: absolute;
  font: 900 clamp(2rem, 5vw, 5rem)/1 var(--title-font);
  color: rgba(220,200,255,.25);
  transform: scaleY(-1) skewX(-8deg);
  filter: blur(.6px);
}
.reflection-one { top: 58%; left: 12%; }
.reflection-two { bottom: 8%; right: 10%; font-family: var(--poem-font); }
.liquid-line {
  position: absolute;
  left: 8%; right: 8%; top: 53%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
  box-shadow: 0 0 18px var(--cyan);
  animation: liquid 3s ease-in-out infinite;
}

.jelly-button, .object-charm {
  border: 1px solid rgba(247,242,255,.58);
  color: var(--pearl);
  background: linear-gradient(145deg, rgba(255,90,205,.8), rgba(139,61,255,.75), rgba(101,244,255,.38));
  box-shadow: inset 0 8px 20px rgba(247,242,255,.25), 0 14px 28px rgba(0,0,0,.28), 0 0 22px rgba(255,90,205,.28);
  cursor: pointer;
  transition: transform .22s ease, filter .22s ease;
}
.jelly-button {
  position: absolute;
  right: 18%; bottom: 9%;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  font: 800 .76rem var(--ui-font);
  letter-spacing: .13em;
  text-transform: uppercase;
}
[data-squish].squish, [data-squish]:active { transform: scale(.9, 1.08); filter: saturate(1.35) brightness(1.15); }

.sticker-note {
  position: relative;
  max-width: 450px;
  padding: clamp(1.2rem, 2.8vw, 2.4rem);
  border: 1px solid rgba(247,242,255,.58);
  border-radius: 34px 42px 28px 48px;
  background: linear-gradient(145deg, rgba(247,242,255,.18), rgba(220,200,255,.09)), rgba(42,18,63,.58);
  box-shadow: inset 0 0 25px rgba(247,242,255,.08), 0 20px 45px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  transform: rotate(-4deg);
}
.sticker-note::after {
  content: "";
  position: absolute;
  width: 74px; height: 32px;
  right: 18px; top: -16px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(101,244,255,.5), rgba(255,90,205,.55));
  border: 1px solid rgba(247,242,255,.5);
}
.sticker-note h2 {
  margin: .35rem 0 .8rem;
  font: 900 clamp(2.2rem, 5vw, 5rem)/.9 var(--title-font);
  color: var(--pearl);
  text-shadow: 2px 2px 0 var(--plum), 0 0 24px rgba(255,90,205,.5);
}
.sticker-note p { margin: 0; color: var(--lavender); font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.55; }
.ui-caption {
  font: 800 .72rem var(--ui-font) !important;
  color: var(--cyan) !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.charm-nav {
  position: fixed;
  z-index: 20;
  right: 1.4rem;
  top: 50%;
  width: 82px;
  height: 430px;
  transform: translateY(-50%);
}
.chain-svg { position: absolute; inset: 0; overflow: visible; }
#chainPath { fill: none; stroke: rgba(247,242,255,.58); stroke-width: 3; stroke-dasharray: 8 8; filter: drop-shadow(0 0 8px var(--cyan)); }
.nav-charm {
  position: absolute;
  left: 21px;
  width: 42px; height: 42px;
  border-radius: 50% 50% 45% 55%;
  border: 1px solid rgba(247,242,255,.66);
  background: radial-gradient(circle at 30% 22%, var(--pearl), var(--pink) 22%, var(--violet) 60%, var(--deep));
  color: var(--pearl);
  cursor: pointer;
  transform: translateX(var(--sway, 0px));
  transition: transform .36s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
  box-shadow: 0 0 16px rgba(139,61,255,.45), inset 0 0 12px rgba(255,255,255,.24);
}
.nav-charm span { font: 900 .65rem var(--ui-font); }
.nav-charm i { position: absolute; inset: 10px 13px; border-radius: 50%; background: rgba(247,242,255,.35); }
.nav-charm.active { box-shadow: 0 0 24px var(--pink), 0 0 38px rgba(101,244,255,.4), inset 0 0 12px rgba(255,255,255,.34); }
.nav-charm:nth-of-type(1) { top: 14px; }
.nav-charm:nth-of-type(2) { top: 105px; left: 6px; }
.nav-charm:nth-of-type(3) { top: 196px; left: 29px; }
.nav-charm:nth-of-type(4) { top: 290px; left: 9px; }
.nav-charm:nth-of-type(5) { top: 375px; }

.chapter-label {
  position: fixed;
  left: 2rem;
  bottom: 1.5rem;
  z-index: 25;
  padding: .65rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(247,242,255,.4);
  color: var(--cyan);
  background: rgba(23,20,31,.58);
  font: 800 .72rem var(--ui-font);
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(101,244,255,.12);
}

.diagonal-shell { grid-template-columns: 1fr .82fr; transform: skewY(-2deg); }
.purikura-frame {
  position: relative;
  height: 72vh;
  border-radius: 28% 14% 31% 18% / 22% 34% 20% 28%;
  border: 16px solid rgba(247,242,255,.16);
  background:
    linear-gradient(120deg, rgba(247,242,255,.12), transparent 28%),
    radial-gradient(circle at 75% 30%, rgba(101,244,255,.2), transparent 20%),
    rgba(42,18,63,.54);
  box-shadow: inset 0 0 30px rgba(247,242,255,.14), 0 0 55px rgba(139,61,255,.22);
  overflow: hidden;
}
.sticker-sheet { position: absolute; inset: 5%; transform: translateX(var(--peel, 0px)) rotate(-4deg); transition: transform .5s ease; }
.sticker {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 62px;
  min-height: 48px;
  padding: .5rem .75rem;
  border-radius: 22px 26px 18px 30px;
  background: linear-gradient(145deg, var(--pearl), var(--lavender) 42%, rgba(101,244,255,.65));
  color: var(--plum);
  font: 900 1.5rem var(--title-font);
  box-shadow: 0 12px 22px rgba(0,0,0,.24), inset 0 0 10px rgba(255,255,255,.7);
  transition: transform .3s ease;
}
.sticker:hover { transform: rotate(18deg) scale(1.12); }
.sticker:nth-child(1) { left: 12%; top: 13%; }
.sticker:nth-child(2) { right: 15%; top: 18%; }
.sticker:nth-child(3) { left: 30%; top: 42%; font: 900 1rem var(--ui-font); color: var(--deep); }
.sticker:nth-child(4) { right: 26%; bottom: 20%; }
.sticker:nth-child(5) { left: 9%; bottom: 13%; }
.sticker:nth-child(6) { right: 9%; bottom: 9%; font: 900 .9rem var(--ui-font); }
.droplet-field i {
  position: absolute;
  width: 16px; height: 28px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(247,242,255,.7), rgba(101,244,255,.18));
  box-shadow: inset 3px 2px 5px rgba(255,255,255,.7), 0 0 16px rgba(101,244,255,.2);
  animation: droplet 4s ease-in-out infinite;
}
.droplet-field i:nth-child(1) { left: 20%; top: 8%; animation-delay: .2s; }
.droplet-field i:nth-child(2) { left: 72%; top: 9%; animation-delay: 1.2s; }
.droplet-field i:nth-child(3) { left: 45%; top: 18%; animation-delay: .7s; }
.droplet-field i:nth-child(4) { left: 14%; top: 54%; animation-delay: 1.9s; }
.droplet-field i:nth-child(5) { left: 82%; top: 49%; animation-delay: 1.5s; }
.droplet-field i:nth-child(6) { left: 62%; top: 72%; animation-delay: .1s; }
.droplet-field i:nth-child(7) { left: 32%; top: 78%; animation-delay: 2.1s; }
.droplet-field i:nth-child(8) { left: 54%; top: 45%; animation-delay: 2.6s; }

.inventory-shell { grid-template-columns: .85fr 1.15fr; }
.inventory-orbit {
  position: relative;
  width: min(62vw, 700px);
  height: min(62vw, 700px);
  justify-self: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,242,255,.1), transparent 58%);
}
.orbit-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px dashed rgba(101,244,255,.42);
  box-shadow: 0 0 35px rgba(101,244,255,.13), inset 0 0 40px rgba(139,61,255,.16);
  animation: orbitSpin 18s linear infinite;
}
.object-charm {
  position: absolute;
  width: 118px; height: 118px;
  border-radius: 40% 60% 46% 54%;
  transform: translate(var(--cx,0), var(--cy,0));
}
.object-charm::before { content:""; position:absolute; left:50%; bottom:100%; width:2px; height:70px; background: linear-gradient(var(--cyan), var(--pearl)); box-shadow:0 0 8px var(--cyan); }
.object-charm span { position:absolute; inset:25%; border-radius:inherit; background:rgba(247,242,255,.26); box-shadow:inset 0 0 14px rgba(255,255,255,.4); }
.bow { left: 41%; top: 6%; }
.bow span::before, .bow span::after { content:""; position:absolute; width:42px; height:32px; top:12px; background:var(--pink); border-radius:60% 30%; box-shadow:0 0 15px var(--pink); }
.bow span::before { right:22px; transform:rotate(-25deg); } .bow span::after { left:22px; transform:rotate(25deg); }
.perfume { right: 4%; top: 40%; }
.perfume span::before { content:""; position:absolute; inset:8px 14px; border-radius:12px 12px 24px 24px; background:linear-gradient(var(--cyan), var(--violet)); }
.ghost { left: 42%; bottom: 4%; }
.ghost span::before { content:""; position:absolute; inset:4px; border-radius:50% 50% 35% 35%; background:rgba(247,242,255,.72); box-shadow:18px 42px 0 -10px rgba(23,20,31,.45); }
.tape { left: 4%; top: 42%; }
.tape span::before { content:""; position:absolute; inset:15px 3px; border-radius:8px; background:linear-gradient(90deg,var(--plum),var(--lavender)); box-shadow:inset 12px 0 0 rgba(23,20,31,.4), inset -12px 0 0 rgba(23,20,31,.4); }
.heart { left: 17%; top: 15%; }
.heart span::before { content:"♥"; position:absolute; inset:0; display:grid; place-items:center; color:var(--pink); font:900 3.4rem var(--title-font); text-shadow:0 0 15px var(--pink); }

.jelly-shell { grid-template-columns: 1.2fr .22fr .8fr; }
.iris-window {
  position: relative;
  height: 76vh;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(247,242,255,.58);
  background: radial-gradient(circle at 50% 40%, rgba(101,244,255,.24), transparent 28%), linear-gradient(180deg, rgba(42,18,63,.8), rgba(23,20,31,.96));
  box-shadow: inset 0 0 70px rgba(101,244,255,.18), 0 0 70px rgba(139,61,255,.24);
}
.moon { position:absolute; width:160px; height:160px; border-radius:50%; right:18%; top:13%; background:radial-gradient(circle at 35% 30%, var(--pearl), var(--lavender) 48%, rgba(139,61,255,.42)); box-shadow:0 0 40px rgba(220,200,255,.55); }
.jellyfish { position:absolute; left:42%; top:33%; width:190px; height:280px; transform:translate(var(--jx,0), var(--jy,0)); transition:transform .45s ease; }
.jelly-bell { position:absolute; left:20px; top:0; width:150px; height:115px; border-radius:50% 50% 38% 38%; background:linear-gradient(160deg, rgba(247,242,255,.68), rgba(101,244,255,.34), rgba(139,61,255,.18)); box-shadow:inset 0 0 24px rgba(255,255,255,.55), 0 0 30px rgba(101,244,255,.45); animation:jellyPulse 2.8s ease-in-out infinite; }
.jelly-bell span { position:absolute; left:63px; top:42px; width:16px; height:8px; border-radius:50%; background:var(--graphite); box-shadow:32px 0 0 var(--graphite); opacity:.55; animation:blink 5s infinite; }
.jellyfish i { position:absolute; top:100px; width:2px; height:150px; background:linear-gradient(var(--cyan), transparent); transform-origin:top; animation:tentacle 3s ease-in-out infinite; }
.jellyfish i:nth-child(2){left:38px}.jellyfish i:nth-child(3){left:66px;animation-delay:.4s}.jellyfish i:nth-child(4){left:94px;animation-delay:.8s}.jellyfish i:nth-child(5){left:122px;animation-delay:1.2s}.jellyfish i:nth-child(6){left:150px;animation-delay:1.6s}
.signal-rings { position:absolute; inset:18%; border-radius:50%; border:1px solid rgba(101,244,255,.35); animation:ringPulse 2.8s ease-out infinite; }
.vertical-poem { color:var(--lavender); font:400 clamp(1.2rem,2vw,2rem)/1.9 var(--poem-font); writing-mode:vertical-rl; letter-spacing:.18em; text-shadow:0 0 15px rgba(101,244,255,.42); }

.finale-shell { display:grid; place-items:center; padding:8vw; }
.last-screen {
  position: relative;
  width: min(86vw, 980px);
  min-height: 68vh;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  border-radius: 42% 58% 48% 52% / 30% 34% 66% 70%;
  border:2px solid rgba(247,242,255,.55);
  background: radial-gradient(circle at 50% 58%, rgba(255,90,205,.36), transparent 24%), linear-gradient(150deg, rgba(247,242,255,.16), rgba(42,18,63,.82), rgba(23,20,31,.94));
  box-shadow: inset 0 0 55px rgba(247,242,255,.15), 0 0 85px rgba(139,61,255,.4);
}
.blush-halo { position:absolute; width:56vw; height:56vw; border-radius:50%; background:radial-gradient(circle, rgba(255,90,205,.38), transparent 60%); animation:blush 4s ease-in-out infinite; }
.final-title { font-size:clamp(3rem,7vw,7rem); z-index:1; }
.final-copy { z-index:1; max-width:620px; margin-top:-8vh; color:var(--lavender); font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.7; }
.mirror-tabs { position:absolute; bottom:7%; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.mirror-tabs span { padding:.55rem .85rem; border-radius:999px; border:1px solid rgba(247,242,255,.4); color:var(--cyan); background:rgba(23,20,31,.36); font:800 .72rem var(--ui-font); letter-spacing:.12em; text-transform:uppercase; }

.cursor-gloss { position:fixed; z-index:30; left:0; top:0; width:180px; height:180px; pointer-events:none; border-radius:50%; background:radial-gradient(circle, rgba(101,244,255,.18), rgba(255,90,205,.08) 34%, transparent 66%); transform:translate(-50%, -50%); mix-blend-mode:screen; }

@keyframes lidOpen { from { transform: rotateX(0deg) translateY(118px); } to { transform: rotateX(-68deg) translateY(18px); } }
@keyframes glint { 0% { transform:translateX(-120%); } 46%,100% { transform:translateX(120%); } }
@keyframes fogDrift { to { transform: rotate(360deg); } }
@keyframes rainSlide { to { transform: rotate(-8deg) translateY(120px); } }
@keyframes mirrorRipple { to { transform: rotate(12deg) scale(1.08); } }
@keyframes liquid { 50% { transform: translateY(7px) scaleX(.82); filter:hue-rotate(80deg); } }
@keyframes irisOpen { to { clip-path: circle(140% at 70% 48%); } }
@keyframes droplet { 50% { transform: translateY(42px) scale(1.16); opacity:.76; } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes jellyPulse { 50% { transform: scale(1.05,.92); filter:brightness(1.16); } }
@keyframes blink { 0%, 88%, 100% { transform:scaleY(1); } 91%,94% { transform:scaleY(.12); } }
@keyframes tentacle { 50% { transform: rotate(10deg) scaleY(.86); } }
@keyframes ringPulse { from { transform:scale(.75); opacity:.8; } to { transform:scale(1.45); opacity:0; } }
@keyframes blush { 50% { transform:scale(1.15); opacity:.68; } }

@media (max-width: 820px) {
  .scene-shell, .diagonal-shell, .inventory-shell, .jelly-shell { grid-template-columns: 1fr; padding: 8vh 6vw 12vh; gap: 1.5rem; }
  .compact { width: 92vw; height: 68vh; }
  .sticker-note { max-width: none; transform: rotate(-2deg); }
  .purikura-frame, .iris-window { height: 52vh; }
  .inventory-orbit { width: 88vw; height: 44vh; }
  .object-charm { width: 82px; height: 82px; }
  .charm-nav { right: .2rem; transform: translateY(-50%) scale(.82); }
  .vertical-poem { display: none; }
}