/* „რომელი სამყარო ამიჩქარებს გულს?“ — a painted webtoon in Sheo's style.
   --p (0→1) is set by story.js on every [data-p] section as it crosses the screen; children
   read it for parallax, turning objects, fades and the drawn ribbon. */

:root {
  --ink: #2B2F5E;
  --paper: #ECE8F6;
  --pink: #DE6FA8;
  --lilac: #8E93E8;
  --blue: #7C8CF0;
  --gold: #F2CF6B;
  --mark: #FFF27A;
  --muted: #5A5E8C;
  --col: min(420px, 100vw);
  --serif: 'Noto Serif Georgian', 'Noto Serif', Georgia, serif;
  --sans: 'Noto Sans Georgian', 'Segoe UI', system-ui, sans-serif;
  --grad: linear-gradient(100deg, var(--pink), var(--lilac) 55%, var(--blue));
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.comic {
  font-family: var(--sans); color: var(--ink); line-height: 1.6;
  background: #AEB4F2; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* Loading screen */
.loader {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: url('/assets/story/sky.webp') center / cover; transition: opacity .8s ease, visibility .8s;
}
.loader span { font: 500 .95rem var(--sans); letter-spacing: .3em; color: var(--ink); background: rgba(255, 255, 255, .7); padding: 8px 18px; border-radius: 999px; }
body.ready .loader { opacity: 0; visibility: hidden; }

/* The painted world around the column (wide screens) */
.world {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(124, 140, 240, .35), rgba(222, 111, 168, .15)), url('/assets/story/sky.webp') center / cover;
}
.streak {
  position: absolute; width: 44vw; height: 2.6vw; background: url('/assets/story/stroke.webp') center / 100% 100% no-repeat;
  transform: rotate(-17deg); opacity: .75; animation: drift 14s ease-in-out infinite alternate;
}
.streak.s1 { top: 9%; left: -6%; }
.streak.s2 { top: 48%; left: 2%; width: 30vw; animation-delay: -4s; }
.streak.s3 { top: 20%; right: -8%; width: 36vw; animation-delay: -8s; }
.streak.s4 { bottom: 6%; right: 4%; width: 26vw; animation-delay: -2s; }
@keyframes drift { to { translate: 3vw -1vw; } }

.corner-mark { position: fixed; top: 22px; left: 32px; z-index: 3; color: #fff; font: 600 .8rem var(--sans); letter-spacing: .2em; text-decoration: none; text-shadow: 0 1px 8px rgba(43, 47, 94, .4); }
.lang { position: fixed; top: 16px; right: 26px; z-index: 6; display: flex; gap: 8px; }
.lang button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid #fff; background: rgba(255, 255, 255, .15); color: #fff; font: 600 .8rem var(--sans);
}
.lang button[aria-pressed='true'] { background: #fff; color: var(--ink); }
.lang button:focus-visible, .side-menu a:focus-visible, .btn-open:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.side-title {
  position: fixed; z-index: 2; top: 18vh; right: calc(50% + var(--col) / 2 + 48px);
  display: grid; gap: 18px; justify-items: end; opacity: 0; translate: -30px 0; transition: opacity .8s ease, translate .8s ease;
}
body.past-title .side-title { opacity: 1; translate: 0 0; }
.side-menu { position: fixed; z-index: 3; right: 40px; bottom: 130px; display: grid; gap: 12px; justify-items: end; }
.side-menu a {
  text-decoration: none; color: #fff; background: rgba(124, 140, 240, .88); border: 1px solid #fff;
  padding: 7px 16px; font: 600 .82rem var(--sans); letter-spacing: .05em; box-shadow: 0 6px 18px rgba(43, 47, 94, .2);
}
.side-menu a:hover { background: var(--pink); }
.corner-logo { position: fixed; z-index: 3; right: 40px; bottom: 30px; }
.corner-logo img { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(255, 255, 255, .6)); }

/* Title pills: white, rounded, gradient lettering, tilted like the reference's bubbles */
.pill {
  display: inline-block; background: #fff; border-radius: 999px; padding: 10px 26px 12px;
  border: 1.5px solid rgba(43, 47, 94, .18); box-shadow: 0 10px 28px rgba(43, 47, 94, .22);
  font: 700 clamp(1.5rem, 6.4vw, 2.1rem)/1.2 var(--serif); white-space: nowrap; rotate: -12deg;
}
.pill > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pill.p2 { margin-left: 34px; }

/* The story column */
.book {
  position: relative; z-index: 1; width: var(--col); margin: 0 auto; background: var(--paper);
  overflow-x: clip; box-shadow: 0 0 60px rgba(43, 47, 94, .25);
}
.koma { position: relative; padding: 30px 16px; }

/* Panels: ink frame, square corners, slide and fade in */
.panel { position: relative; margin: 0; border: 2px solid var(--ink); background: #fff; overflow: hidden; }
.panel img { width: 100%; height: auto; }
.reveal { opacity: .12; transform: translateY(40px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.reveal.from-l { transform: translateX(-70px); }
.reveal.from-r { transform: translateX(70px); }
.reveal.in { opacity: 1; transform: none; }

/* Slanted captions, two lines offset like the reference */
.caps { display: grid; justify-items: start; gap: 7px; margin: 14px 0 0 6px; position: relative; z-index: 3; }
.caps .cap:nth-child(2) { margin-left: 22px; }
.cap {
  display: inline-block; background: #fff; border: 1.5px solid var(--ink); color: var(--ink);
  padding: 3px 14px 5px; font: 600 1.04rem/1.35 var(--serif); transform: skewX(-12deg);
  box-shadow: 3px 3px 0 rgba(43, 47, 94, .2);
}

/* Narration boxes (the storyteller) and the reflection's speech (glowing bubbles) */
.narr {
  position: relative; z-index: 3; width: fit-content; max-width: 90%; margin: 16px 0;
  background: #FFFBEF; border: 1.5px solid var(--ink); padding: 10px 14px 11px;
  font: 500 .98rem/1.75 var(--serif); letter-spacing: .01em; box-shadow: 3px 3px 0 rgba(43, 47, 94, .18);
}
.narr.r, .say.r { margin-left: auto; }
.span { grid-column: 1 / -1; }
.say {
  position: relative; z-index: 3; width: fit-content; max-width: 86%; margin: 18px 0 20px;
  background: linear-gradient(135deg, #FFFFFF, #ECE6FF); border: 1.5px solid var(--lilac); border-radius: 22px;
  padding: 11px 18px 12px; font: 600 1rem/1.65 var(--serif); color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .55), 0 10px 28px rgba(142, 147, 232, .5);
}
.say::after {
  content: ''; position: absolute; left: 26px; bottom: -9px; width: 16px; height: 16px; rotate: 45deg;
  background: #EEE9FF; border-right: 1.5px solid var(--lilac); border-bottom: 1.5px solid var(--lilac);
}
.say.r::after { left: auto; right: 26px; }
.say::before { content: '✦'; position: absolute; top: -13px; right: 16px; color: var(--gold); font-size: 1.1rem; text-shadow: 0 0 8px #fff; }
.say.r::before { right: auto; left: 16px; }
.lead-text { font: 500 1rem/1.8 var(--serif); text-align: center; margin: -6px 4px 22px; }

/* 1. Cover */
.cover { padding: 16px; height: min(100svh, 880px); }
.cover .frame { position: relative; height: 100%; border: 2px solid var(--ink); overflow: hidden; background: #C9CCF5; }
.cover .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: calc(1 + var(--p, 0) * .2); }
.cut { position: absolute; height: auto; filter: drop-shadow(0 8px 12px rgba(43, 47, 94, .28)); }
.cover .cut { animation: bob 5.5s ease-in-out infinite; translate: 0 calc(var(--p, 0) * var(--dy, -60px)); }
.c-yoga { width: 30%; left: 2%; top: 4%; --dy: -90px; }
.c-dance { width: 40%; right: -4%; top: 2%; --dy: -140px; animation-delay: -1s; }
.c-mask { width: 22%; left: 40%; top: 24%; --dy: -40px; animation-delay: -2s; }
.c-book { width: 24%; left: 4%; top: 46%; --dy: -110px; animation-delay: -3s; }
.c-nails { width: 40%; right: -2%; top: 52%; --dy: -70px; animation-delay: -4s; }
.c-moon { width: 26%; left: 34%; bottom: 3%; --dy: -150px; animation-delay: -2.5s; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.scroll-cue {
  position: absolute; left: 50%; top: 46%; translate: -50% 0;
  font: 600 .82rem var(--sans); letter-spacing: .25em; color: var(--ink); background: rgba(255, 255, 255, .6); border-radius: 999px; padding: 4px 14px 52px;
}
.scroll-cue::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: 1.5px; height: 36px; background: var(--ink); transform-origin: top; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { scale: 1 0; } 50% { scale: 1 1; } 100% { scale: 1 0; } }
.cover .narr { position: absolute; margin: 0; z-index: 4; }
.cover-top { top: 14px; left: 14px; max-width: 64%; }
.cover-bottom { right: 14px; bottom: 16px; max-width: 70%; }

/* 2. Title */
.title-koma { padding: 0 16px 30px; }
.duo { position: relative; aspect-ratio: 9 / 13; border: 2px solid var(--ink); overflow: hidden; background: #fff; }
.duo img { position: absolute; top: 0; height: 100%; width: 100%; object-fit: cover; }
.duo .left { object-position: 30% 50%; }
.duo .right {
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 38% 100%); object-position: 70% 40%;
  opacity: clamp(0, calc((var(--p, 0) - .18) * 4), 1); translate: calc((1 - var(--p, 0)) * 40px) 0;
}
.title-pills { position: absolute; left: 0; right: 0; top: 30%; display: grid; justify-items: center; gap: 16px; font-weight: inherit; }
.title-pills .pill { opacity: clamp(0, calc((var(--p, 0) - .1) * 4), 1); translate: calc((1 - var(--p, 0)) * -60px) 0; }
.wide-narr { max-width: 100%; margin: 18px 0 0; }
.tiny-v { position: absolute; right: 26px; top: 40px; writing-mode: vertical-rl; color: #fff; font: 600 .78rem var(--sans); letter-spacing: .25em; text-shadow: 0 1px 6px rgba(43, 47, 94, .5); }

/* 3. Night */
.night .big .inner-text {
  position: absolute; left: 16px; right: 16%; bottom: 150px; color: #fff; font: 500 1.02rem/1.9 var(--serif);
  text-shadow: 0 2px 10px rgba(20, 20, 50, .8); letter-spacing: .03em;
}
.night .inset { width: 54%; margin: -110px -6px 0 auto; z-index: 2; }
.night .inset img { aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; }
.night .mid { width: 78%; margin-top: 18px; }

/* 4. Mirror */
.mirror .cap-bottom { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; font-size: 1.15rem; }
.slants { position: relative; aspect-ratio: 16 / 10; margin-top: 22px; }
.slant { position: absolute; inset: 0; margin: 0; }
.slant img { width: 100%; height: 100%; object-fit: cover; }
.s-left { clip-path: polygon(1% 1%, 56% 1%, 46% 99%, 1% 99%); }
.s-left img { object-position: 0% 50%; }
.s-right { clip-path: polygon(60% 1%, 99% 1%, 99% 99%, 50% 99%); }
.s-right img { object-position: 100% 50%; }
.slants.reveal .s-right { translate: 30px 0; transition: translate 1s .25s cubic-bezier(.2, .7, .2, 1); }
.slants.reveal.in .s-right { translate: 0 0; }
.slant-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.slant-lines polygon { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cap-burst { position: absolute; right: 10px; bottom: -14px; font-size: 1.35rem; rotate: -4deg; }

/* 5. The fall: pinned while the objects tumble past */
.fall { height: 230vh; padding: 0; }
.fall .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.fall-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: calc(1.04 + var(--p, 0) * .14); translate: 0 calc(var(--p, 0) * -4%); }
.obj { position: absolute; height: auto; filter: drop-shadow(0 6px 10px rgba(43, 47, 94, .25)); }
.fall .obj { translate: 0 calc((.5 - var(--p, 0)) * var(--dy, 400px)); rotate: calc(var(--p, 0) * var(--rot, 120deg)); }
.f1 { width: 34%; left: -6%; top: 18%; --dy: 700px; --rot: -160deg; }
.f2 { width: 26%; right: -4%; top: 30%; --dy: 520px; --rot: 200deg; }
.f3 { width: 18%; left: 14%; top: 66%; --dy: 900px; --rot: 300deg; }
.f4 { width: 36%; right: 6%; top: 74%; --dy: 640px; --rot: -90deg; }
.f5 { width: 16%; left: 62%; top: 6%; --dy: 820px; --rot: 140deg; }
.speed {
  position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: screen;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .7) 22px 23.5px, transparent 23.5px 61px);
  -webkit-mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(transparent, #000 25%, #000 75%, transparent);
  animation: rush .6s linear infinite;
}
@keyframes rush { from { translate: 0 -30%; } to { translate: 0 30%; } }
.fall .speed { opacity: calc(.15 + var(--p, 0) * .4); }
.fall .narr { position: absolute; margin: 0; z-index: 4; max-width: 76%; }
.fall .na { top: 64px; left: 14px; }
.fall .nb {
  right: 14px; bottom: 54px; --in: clamp(0, calc((var(--p, 0) - .4) * 6), 1);
  opacity: var(--in); translate: 0 calc((1 - var(--in)) * 26px);
}

/* 6. City, objects breaking out of the frame */
.city { padding: 60px 26px; }
.city .tilt { rotate: -2.5deg; }
.city .obj { translate: 0 calc((.5 - var(--p, 0)) * var(--dy, 200px)); rotate: calc(var(--p, 0) * var(--rot, 60deg)); z-index: 2; }
.b1 { width: 38%; left: -8%; top: 14px; --dy: 220px; --rot: -40deg; }
.b2 { width: 40%; right: -10%; top: 46%; --dy: 300px; --rot: 50deg; }
.b3 { width: 24%; left: 6%; bottom: 10px; --dy: 180px; --rot: 90deg; }

/* 7. All of them me? */
.all-me { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.all-me .wide { grid-column: 1 / -1; }
.all-me .small-a img, .all-me .small-b img { aspect-ratio: 3 / 4; object-fit: cover; }
.all-me .small-a { margin-top: -40px; z-index: 2; }
.all-me .small-b { margin-top: 10px; }
.cap-all { grid-column: 1 / -1; justify-self: end; margin-top: -24px; position: relative; z-index: 3; font-size: 1.12rem; }

/* 8. Every Nino, floating among painted blocks */
.crowd { height: 1500px; padding: 0; background: linear-gradient(180deg, #8D97F2, #A9A4F0 45%, #C3B4EE); overflow: clip; }
.crowd-top { position: sticky; top: 58px; margin: 18px auto 0; z-index: 5; }
.crowd .who { position: absolute; z-index: 2; translate: 0 calc((.5 - var(--p, 0)) * var(--dy, 200px)); }
.crowd .who .cut { position: relative; width: 100%; }
.tag {
  position: absolute; left: 50%; bottom: 24%; translate: -50% 0; rotate: -4deg; white-space: nowrap;
  background: var(--mark); color: var(--ink); padding: 2px 10px 3px; font: 700 .84rem var(--sans); letter-spacing: .03em;
  box-shadow: 2px 3px 0 rgba(43, 47, 94, .2);
}
.w2 .tag, .w8 .tag { left: 40%; }
.w1 { width: 34%; left: 4%; top: 2%; --dy: 260px; }
.w2 { width: 44%; right: 0; top: 9%; --dy: 120px; }
.w3 { width: 36%; left: 8%; top: 24%; --dy: 340px; }
.w4 { width: 30%; right: 8%; top: 33%; --dy: 200px; }
.w5 { width: 40%; left: 2%; top: 50%; --dy: 160px; }
.w6 { width: 30%; right: 6%; top: 58%; --dy: 300px; }
.w7 { width: 28%; left: 14%; top: 75%; --dy: 220px; }
.w8 { width: 46%; right: -4%; top: 80%; --dy: 140px; }
.block {
  position: absolute; width: 34px; height: 70px; border-radius: 4px;
  background: linear-gradient(90deg, #FFE1EE 0 55%, #F2B6D2 55%); box-shadow: 0 10px 18px rgba(43, 47, 94, .15);
  translate: 0 calc((.5 - var(--p, 0)) * var(--dy, 300px)); rotate: var(--r, 8deg);
}
.k1 { left: 46%; top: 6%; --r: 10deg; }
.k2 { left: 72%; top: 27%; --r: -14deg; background: linear-gradient(90deg, #E3F7F1 0 55%, #A9DECF 55%); --dy: 420px; }
.k3 { left: 30%; top: 44%; --r: 6deg; background: linear-gradient(90deg, #FFF6D6 0 55%, #F2D98A 55%); }
.k4 { left: 62%; top: 70%; --r: -8deg; --dy: 500px; }
.k5 { left: 10%; top: 90%; --r: 16deg; background: linear-gradient(90deg, #E8E6FF 0 55%, #B9B6F2 55%); }
.crowd .streak { position: absolute; width: 120%; height: 40px; left: -10%; top: 40%; opacity: .7; }

/* 9. Everyone looks happy: a panel with a slanted top edge */
.slant-top { clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); border: 0; background: var(--ink); padding: 2px; }
.slant-top img { clip-path: polygon(0 calc(10% + 1px), 100% 2px, 100% 100%, 0 100%); }
.caps-under { margin-top: -20px; }

/* 10. Laugh: manga speed lines and sparkles */
.laugh .speed {
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 5deg, rgba(255, 255, 255, .85) 5deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 75%); mask: radial-gradient(circle, transparent 42%, #000 75%);
  opacity: .75; animation: spin 18s linear infinite; inset: -30%;
}
@keyframes spin { to { rotate: 360deg; } }
.sparkles {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 2px, transparent 3px) 12% 18% / 80px 80px,
    radial-gradient(circle, #FFF4C2 0 1.5px, transparent 2.5px) 70% 30% / 110px 110px,
    radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 40% 80% / 95px 95px;
  animation: twinkle 2.4s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .3; } to { opacity: 1; } }

/* 11. Which world? Big lettering and a ribbon that draws itself */
.which { min-height: 640px; padding-top: 60px; }
.huge { position: relative; z-index: 2; display: grid; gap: 4px; font: 700 clamp(2.4rem, 12vw, 3.4rem)/1.15 var(--serif); }
.huge span { width: fit-content; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.huge span:nth-child(2) { margin-left: 34px; }
.huge span:nth-child(3) { margin-left: 70px; }
.ribbon { position: absolute; inset: 20px 0 0; width: 100%; height: 100%; z-index: 1; }
.ribbon path { fill: none; stroke: #C9B7F4; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - clamp(0, var(--p, 0) * 1700 - 250, 1000)); opacity: .85; }
.which .obj { translate: 0 calc((.5 - var(--p, 0)) * var(--dy, 160px)); rotate: calc(var(--p, 0) * var(--rot, 70deg)); z-index: 3; }
.q1 { width: 30%; right: 2%; top: 30px; --rot: -30deg; }
.q2 { width: 18%; right: 14%; top: 300px; --rot: 80deg; }
.q3 { width: 28%; left: 6%; bottom: 40px; --rot: 40deg; }
.which-note { margin-top: 34px; }

/* 12. Choices: dotted thought circles, round portraits, highlighter labels, flow lines */
.choices { min-height: 1290px; }
.side-note {
  position: absolute; z-index: 3; max-width: 58%; background: #FFFBEF; border: 1.5px dashed var(--ink);
  padding: 8px 12px 9px; font: 500 .92rem/1.6 var(--serif); box-shadow: 2px 2px 0 rgba(43, 47, 94, .15);
}
.n1 { left: 16px; top: 452px; }
.n2 { left: 16px; top: 1070px; max-width: 52%; }
.dots {
  position: absolute; width: 200px; height: 200px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  padding: 32px; border: 1.5px solid var(--ink); font: 500 .98rem/1.6 var(--serif); z-index: 2;
  background: radial-gradient(circle, rgba(43, 47, 94, .26) 1px, transparent 1.7px) 0 0 / 9px 9px, #fff;
}
.d1 { right: 16px; top: 20px; }
.d2 { left: 16px; top: 600px; }
.circle { position: absolute; width: 230px; height: 230px; margin: 0; z-index: 2; }
.circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.c1 { left: 20px; top: 200px; }
.c2 { right: 20px; top: 780px; }
.mark {
  position: absolute; right: -14px; bottom: 4px; background: var(--mark); color: var(--ink);
  padding: 4px 12px; font: 700 1.02rem var(--sans); letter-spacing: .06em; box-shadow: 2px 3px 0 rgba(43, 47, 94, .18); white-space: nowrap;
}
.flow { position: absolute; fill: none; stroke: var(--ink); stroke-width: 2; z-index: 1; }
.f-1 { width: 110px; left: 250px; top: 300px; }
.f-2 { width: 70px; height: 200px; right: 100px; top: 1010px; }
.choices .obj { translate: 0 calc((.5 - var(--p, 0)) * var(--dy, 260px)); rotate: calc(var(--p, 0) * var(--rot, 60deg)); }
.r1 { width: 26%; right: 6%; top: 460px; --rot: -40deg; }
.r2 { width: 18%; right: 10%; top: 640px; --rot: 30deg; }
.r3 { width: 34%; left: 4%; top: 880px; --rot: -20deg; }
.r4 { width: 14%; left: 54%; top: 560px; --rot: 120deg; }

/* 13. The answer */
.answer { padding-top: 40px; }
.whisper { text-align: center; font: 500 1.15rem/1.6 var(--serif); margin-bottom: 26px; }
.bubble {
  position: absolute; left: 46%; right: 10px; top: 38%; background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 22px; padding: 12px 16px; font: 600 1rem/1.45 var(--sans); box-shadow: 0 10px 24px rgba(43, 47, 94, .25);
}
.bubble::after { content: ''; position: absolute; left: -9px; top: 22px; width: 16px; height: 16px; background: #fff; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); rotate: 45deg; }

/* 14. Worlds (the reference's product block) and 15. where to start (its guide) */
.worlds h2, .start h2 { font: 700 1.7rem/1.3 var(--serif); text-align: center; margin: 10px 0 22px; }
.world-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.world-grid li { background: #fff; border: 1.5px solid var(--ink); padding: 12px; display: grid; gap: 4px; justify-items: center; text-align: center; box-shadow: 3px 3px 0 rgba(43, 47, 94, .15); }
.world-grid img { height: 72px; width: auto; object-fit: contain; }
.world-grid b { font: 700 .98rem var(--serif); }
.world-grid span { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.privacy-line { display: flex; align-items: center; gap: 12px; margin-top: 16px; background: var(--mark); padding: 10px 14px; border: 1.5px solid var(--ink); font-weight: 600; font-size: .95rem; }
.privacy-line img { height: 46px; width: auto; }
.steps { list-style: none; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; background: #fff; border: 1.5px solid var(--ink); padding: 12px 14px; }
.steps b { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 1.1rem var(--serif); }
.btn-open {
  display: block; width: fit-content; margin: 26px auto 18px; padding: 14px 34px; border-radius: 999px; text-decoration: none;
  background: var(--grad); color: #fff; font: 700 1.05rem var(--sans); box-shadow: 0 12px 28px rgba(222, 111, 168, .4); border: 2px solid var(--ink);
}
.fine { font-size: .82rem; color: var(--muted); text-align: center; }
.credits { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 26px auto 10px; font-size: .8rem; color: var(--muted); width: fit-content; }
.credits dt { font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.foot { position: relative; z-index: 1; width: var(--col); margin: 0 auto; background: var(--paper); text-align: center; font-size: .8rem; padding: 18px 16px 40px; color: var(--muted); border-top: 1.5px solid var(--ink); }

/* Phones and narrow windows: the column is the page */
@media (max-width: 979px) {
  .world, .side-title, .side-menu, .corner-logo, .corner-mark { display: none; }
  body.comic { background: var(--paper); }
  .book { box-shadow: none; }
  .lang { top: 10px; right: 10px; }
  .lang button { width: 36px; height: 36px; background: rgba(255, 255, 255, .85); color: var(--ink); border-color: var(--ink); }
  .lang button[aria-pressed='true'] { background: var(--ink); color: #fff; }
}
@media (max-width: 380px) {
  .circle { width: 200px; height: 200px; }
  .dots { width: 180px; height: 180px; padding: 26px; font-size: .9rem; }
  .f-1 { left: 220px; width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .fall { height: auto; }
  .fall .pin { position: relative; height: auto; }
  .fall-img { position: relative; height: auto; }
  .fall .nb { opacity: 1; translate: none; }
}