/* Scenekite site. One art-directed look: Paper and Ink, with one blue anchor. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-latin.var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-latin-ext.var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallback so the swap does not shift the layout. */
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%; ascent-override: 99.8%; descent-override: 21.3%; line-gap-override: 0%;
}

:root {
  --ink: #141414;
  --paper: #F3F1EC;
  --blue: #3A5BFF;      /* Handle Blue: anchor points and handles only */
  --graphite: #6F6D68;
  --rule: #DDD9D0;
  --paper-dim: #B5B2AB; /* secondary text on Ink (8.7:1) */
  --g: clamp(16px, 5vw, 96px);
  --max: 1760px;
  --head-h: clamp(64px, 10vh, 96px); /* header height; the hero fills the rest of the first screen */
  --font: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .75, .15, 1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

@supports (height: 100svh) { :root { --head-h: clamp(64px, 10svh, 96px); } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.motion { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: clamp(1rem, .94rem + .22vw, 1.1875rem); line-height: 1.55;
  font-weight: 450; overflow-x: clip; background: var(--paper) var(--grain);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Language: both versions live in the HTML; the inactive one is removed from layout and the a11y tree. */
html:not([lang="id"]) [data-l="id"], html[lang="id"] [data-l="en"] { display: none !important; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--ink); color: var(--paper);
  padding: 12px 18px; font-weight: 700; text-decoration: none; border-radius: 999px;
}
.skip:focus { top: 16px; }

/* ───────── Labels and section markers (anchor points) ───────── */
.marker {
  display: block; font-size: .75rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.marker__node { position: relative; display: inline-block; vertical-align: -1px; margin-right: 30px; width: 12px; height: 12px; border: 1.5px solid currentColor; flex: none; transition: background-color .4s var(--ease), border-color .4s var(--ease); }
.marker__node::after { /* handle */
  content: ""; position: absolute; left: calc(100% + 1px); top: 50%; width: 18px; height: 1.5px; background: var(--graphite);
  transform: translateY(-50%) scaleX(.35); transform-origin: left; transition: transform .6s var(--ease);
}
.marker.is-current .marker__node { background: var(--blue); border-color: var(--blue); }
.marker.is-current .marker__node::after { transform: translateY(-50%) scaleX(1); background: var(--blue); }
.marker--dark { color: var(--paper); }

/* ───────── Header ───────── */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--head-h); }
.site-head__logo { display: block; flex: none; }
.site-head__logo img { width: clamp(160px, 13vw, 210px); }
.site-head__nav { margin-left: auto; }
.site-head__nav ul { display: flex; gap: clamp(16px, 2.4vw, 40px); }
.site-head__nav a { position: relative; font-size: .9375rem; font-weight: 600; text-decoration: none; padding-block: 6px; }
.site-head__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.site-head__nav a:hover::after, .site-head__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 760px) { .site-head__nav { display: none; } }

.lang { display: none; border: 1.5px solid currentColor; border-radius: 999px; padding: 3px; flex: none; }
.js .lang { display: inline-flex; }
.lang button {
  appearance: none; border: 0; background: transparent; cursor: pointer; font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; padding: 7px 12px 7px 13px; border-radius: 999px; min-width: 44px; min-height: 32px;
  transition: background-color .3s, color .3s;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang--dark { color: var(--paper); }
.lang--dark button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* ───────── Hero ───────── */
.hero {
  position: relative; display: flex; flex-direction: column;
  min-height: calc(100vh - var(--head-h)); min-height: calc(100svh - var(--head-h)); /* header + hero = exactly one screen */
  padding-top: clamp(8px, 2vh, 40px); padding-bottom: clamp(20px, 4vh, 48px);
}
@supports (height: 100svh) { .hero { padding-top: clamp(8px, 2svh, 40px); padding-bottom: clamp(20px, 4svh, 48px); } }
.hero__grid { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(16px, 4vw, 72px); }
.hero__copy .marker { margin-bottom: clamp(14px, 3vh, 40px); }
.hero__title {
  font-size: clamp(3.4rem, min(10.4vw, 14vh), 13rem); font-weight: 800; letter-spacing: -.058em; line-height: .86;
  margin-left: -.04em;
}
@supports (height: 100svh) { .hero__title { font-size: clamp(3.4rem, min(10.4vw, 14svh), 13rem); } }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; padding-right: .06em; }
.hero__title .line > span { display: inline-block; }
.hero__title .line--light { font-weight: 250; letter-spacing: -.05em; }
.hero__title .line--light:last-child { padding-left: 1.1em; }
.hero__translation { margin-top: clamp(10px, 2vh, 24px); font-size: clamp(1.05rem, 1.4vw, 1.4rem); font-weight: 600; line-height: 1.3; max-width: 34ch; }
.hero__mark { width: clamp(160px, min(29vw, 42vh), 560px); padding-bottom: .4vw; }
@supports (height: 100svh) { .hero__mark { width: clamp(160px, min(29vw, 42svh), 560px); } }
/* Indonesian adds a translation line under the title, so the title gives up a little height */
html[lang="id"] .hero__title { font-size: clamp(3.4rem, min(10.4vw, 12vh), 13rem); }
@supports (height: 100svh) { html[lang="id"] .hero__title { font-size: clamp(3.4rem, min(10.4vw, 12svh), 13rem); } }
.mark { width: 100%; height: auto; overflow: visible; }
.mark__ink { fill: var(--ink); }
.mark__anchor, .mark__handle, .mark__knob, .mark__accent { fill: var(--blue); }
.mark--dark .mark__ink { fill: var(--paper); }
.hero__foot {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 24px 48px; align-items: end;
  margin-top: clamp(20px, 4vh, 56px); padding-top: 20px; border-top: 1.5px solid var(--ink);
}
.hero__lede { font-size: clamp(1.05rem, 1.25vw, 1.375rem); line-height: 1.45; font-weight: 500; max-width: 44ch; }
.status-line { font-size: .9375rem; line-height: 1.5; color: var(--ink); max-width: 38ch; }
.status-line__date { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); margin-bottom: 6px; }
.hero__cue { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 6px 0; }
.hero__cue svg { transition: transform .4s var(--ease); }
.hero__cue:hover svg { transform: translateY(4px); }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); position: relative; }
  .hero__mark { position: absolute; right: 0; top: 0; width: clamp(92px, 26vw, 220px); padding: 0; }
  .hero__copy .marker { max-width: calc(100% - clamp(92px, 26vw, 220px) - 12px); }
  .hero__title { font-size: clamp(3.4rem, 17vw, 9rem); }
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html[lang="id"] .hero__title { font-size: clamp(3.4rem, 17vw, 9rem); }
}
/* Small phones: tighten the stack so header + hero still land on one screen */
@media (max-width: 860px) and (max-height: 760px) {
  .hero__title, html[lang="id"] .hero__title { font-size: clamp(2.6rem, min(15.5vw, 10.5vh), 9rem); }
  .hero__copy .marker { margin-bottom: 10px; }
  .hero__foot { gap: 12px; margin-top: 16px; padding-top: 14px; }
  .hero__lede { font-size: .98rem; line-height: 1.4; }
  .status-line { font-size: .875rem; line-height: 1.4; }
  .hero__translation { font-size: 1rem; margin-top: 8px; }
  .hero__cue { padding: 2px 0; }
}
@media (max-width: 860px) and (max-height: 680px) {
  .hero__title, html[lang="id"] .hero__title { font-size: clamp(2.4rem, min(14.5vw, 10vh), 9rem); }
}

/* ───────── Studio ───────── */
.studio { padding-block: clamp(96px, 18vh, 220px) clamp(80px, 14vh, 180px); }
.studio .marker { margin-bottom: clamp(28px, 5vh, 56px); }
.studio__title {
  font-size: clamp(1.75rem, 4.15vw, 5.25rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1;
  max-width: 22em; text-wrap: pretty;
}
.studio__title strong { font-weight: 800; }
.inline-av {
  display: inline-block; width: .92em; height: .92em; border-radius: 50%; vertical-align: -.14em;
  margin: 0 .04em; box-shadow: 0 0 0 .045em var(--ink); background: var(--rule);
  transition: transform .5s var(--ease);
}
.studio__title:hover .inline-av { transform: rotate(-8deg); }
.studio__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 140px);
  margin-top: clamp(64px, 12vh, 140px); align-items: center;
}
.studio__text { display: grid; gap: 1.2em; font-size: clamp(1.05rem, 1.3vw, 1.4rem); line-height: 1.5; max-width: 40ch; }
.studio__text p:first-child { font-weight: 600; }
.anatomy { max-width: 560px; }
.anatomy__stage { position: relative; aspect-ratio: 1300 / 1240; }
.anatomy__svg { width: 100%; height: 100%; }
.anatomy__svg .mark__ink { fill: var(--ink); }
.anatomy__guides { stroke: var(--graphite); stroke-width: 3; }
.anatomy__label {
  position: absolute; font-size: clamp(.72rem, .9vw, .85rem); font-weight: 700; letter-spacing: .02em; line-height: 1.25;
  color: var(--ink); max-width: 36%;
}
.anatomy__label.l-anchor { left: 34.6%; top: 0; transform: translate(-50%, -30%); white-space: nowrap; max-width: none; }
.anatomy__label.l-handle { left: 63.5%; top: 22%; transform: translateY(-50%); }
.anatomy__label.l-stroke { left: 63.5%; top: 73.5%; transform: translateY(-50%); }
.anatomy__cap { margin-top: 18px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
@media (max-width: 860px) { .studio__grid { grid-template-columns: minmax(0, 1fr); } }

/* ───────── Lineup ───────── */
.lineup { position: relative; }
.lineup__head { padding-bottom: clamp(48px, 9vh, 120px); }
.lineup__head .marker { margin-bottom: clamp(24px, 4vh, 44px); }
.lineup__intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.lineup__title { font-size: clamp(3.6rem, 13vw, 15rem); font-weight: 800; letter-spacing: -.06em; line-height: .84; margin-left: -.05em; }
.lineup__note { font-size: clamp(1rem, 1.2vw, 1.25rem); font-weight: 500; max-width: 40ch; padding-bottom: .6em; }
.lineup__nav { margin-top: clamp(40px, 7vh, 80px); }
.lineup-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.lineup-index li { border-bottom: 1px solid var(--rule); }
.lineup-index li:nth-child(5n + 1) .lineup-index__link { padding-left: 0; }
.lineup-index__link {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px;
  align-items: center; padding: 18px 16px 18px 0; text-decoration: none; height: 100%; position: relative;
}
.lineup-index__link img { grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 50%; transition: transform .5s var(--ease); }
.lineup-index__no { font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--graphite); }
.lineup-index__name { font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; }
.lineup-index__link:hover img, .lineup-index__link:focus-visible img { transform: scale(1.08) rotate(-6deg); }
.lineup-index__link:hover .lineup-index__name { text-decoration: underline; text-underline-offset: 3px; }
.dot { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 600; color: var(--graphite); }
.dot::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--ink); flex: none; }
.dot--prod::before, .dot--live::before { background: var(--ink); }
@media (max-width: 1100px) { .lineup-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lineup-index li:nth-child(5n + 1) .lineup-index__link { padding-left: 0; } .lineup-index li:nth-child(odd) .lineup-index__link { padding-left: 0; } }
@media (max-width: 860px) { .lineup__intro { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .lineup-index { grid-template-columns: minmax(0, 1fr); } }

/* Scenes: each channel is its own world. On large screens they stack like layers. */
.scene {
  --bg: var(--paper); --fg: var(--ink); --sel: var(--fg);
  position: relative; z-index: 5; background: var(--bg); color: var(--fg); overflow: hidden; isolation: isolate;
}
.scene__inner {
  position: relative; z-index: 1; width: 100%; max-width: var(--max); margin-inline: auto; padding: clamp(64px, 9vh, 104px) var(--g);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 104px); align-items: center;
}
@media (min-width: 1024px) and (min-height: 700px) {
  .scene { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
  .scene + .scene { box-shadow: 0 -30px 60px -24px rgba(0, 0, 0, .45); }
}
@media (max-width: 1023px) {
  .scene__inner { grid-template-columns: minmax(0, 1fr); }
  .scene__art { order: -1; }
}
.scene__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: clamp(16px, 3vh, 28px); }
.scene__no { font-size: .9rem; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.scene__of { font-weight: 500; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1.5px solid currentColor;
  border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
}
.chip::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; flex: none; }
.chip--prod::before, .chip--live::before { background: currentColor; }
.scene__name {
  font-size: clamp(2.6rem, 5.3vw, 7rem); font-weight: 800; letter-spacing: -.045em; line-height: .92;
  margin-left: -.03em; text-wrap: balance;
}
.scene__copy { position: relative; z-index: 2; }
.scene__tagline { text-wrap: balance; margin-top: .9em; font-size: clamp(1.05rem, 1.35vw, 1.4rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; max-width: 30ch; }
.scene__about { margin-top: .7em; font-size: clamp(.98rem, 1.05vw, 1.1rem); max-width: 42ch; line-height: 1.5; }
.scene__facts { margin-top: clamp(18px, 3.4vh, 32px); display: grid; max-width: 520px; }
.scene__facts > div {
  display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 9px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.scene__facts dt { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-top: .3em; }
.scene__facts dd { font-size: .95rem; font-weight: 500; line-height: 1.4; }
.scene__eps { margin-top: 20px; max-width: 520px; }
.scene__eps .label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.scene__eps ol { display: grid; gap: 6px; }
.scene__eps li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.scene__ep-no, .scene__ep-len { font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.scene__cta { margin-top: 24px; }
.btn { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 700; text-decoration: none; }

.scene__art { position: relative; margin: 12px 14px 28px 0; }
.frame { position: relative; z-index: 1; }
.frame__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: color-mix(in srgb, var(--fg) 10%, var(--bg)); }
.frame::before { /* the selection box, as if the banner were picked with a vector tool */
  content: ""; position: absolute; inset: -12px; border: 1px solid var(--sel); pointer-events: none; z-index: 2;
  opacity: .9;
}
.frame__h { position: absolute; z-index: 3; width: 9px; height: 9px; border: 1.5px solid var(--sel); background: var(--bg); }
.h-tl { left: -16px; top: -16px; } .h-tr { right: -16px; top: -16px; } .h-bl { left: -16px; bottom: -16px; } .h-br { right: -16px; bottom: -16px; }
.scene__avatar {
  position: absolute; z-index: 4; width: clamp(64px, 7.2vw, 128px); height: auto; aspect-ratio: 1; border-radius: 50%;
  left: clamp(-36px, -2vw, -12px); bottom: clamp(-56px, -3.4vw, -24px); box-shadow: 0 0 0 5px var(--bg);
}
.scene__deco { position: absolute; inset: -14% -10% -18% -2%; z-index: 0; pointer-events: none; }
.scene__deco > * { position: absolute; }
@media (max-width: 1023px) {
  .scene__art { margin: 8px 12px 36px 12px; }
  .scene__deco { inset: -18% -8% -22% -8%; }
}

/* 01 Once Ordinary: doodle, thick ink, flat bright colour */
.t-once-ordinary { --bg: #F8E8CC; --fg: #1E1E1E; }
.t-once-ordinary .scene__name { text-decoration: underline wavy #F07A63; text-decoration-thickness: .055em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.t-once-ordinary .frame__img { border: 5px solid #1E1E1E; border-radius: 18px; box-shadow: 9px 9px 0 #1E1E1E; }
.t-once-ordinary .frame { transform: rotate(-1.2deg); }
.t-once-ordinary .scene__tagline { margin-top: 1.25em; }
.t-once-ordinary .d-stars { right: 0; top: 0; width: 34%; }

/* 02 Scribble Theory: lined notebook paper, marker, highlighter */
.t-scribble-theory { --bg: #FBF8EF; --fg: #1E1E1E;
  background-image:
    linear-gradient(90deg, transparent calc(var(--g) * .55), #E8807A calc(var(--g) * .55), #E8807A calc(var(--g) * .55 + 2px), transparent calc(var(--g) * .55 + 2px)),
    repeating-linear-gradient(180deg, transparent 0 35px, #A9C7E8 35px 36px);
}
.t-scribble-theory .scene__name { text-decoration: underline #FFE45C; text-decoration-thickness: .34em; text-underline-offset: -.3em; text-decoration-skip-ink: none; }
.t-scribble-theory .frame { transform: rotate(1deg); }
.t-scribble-theory .frame__img { border: 10px solid #fff; box-shadow: 0 14px 30px -12px rgba(30, 30, 30, .35); }
.t-scribble-theory .d-arrow { left: 0; top: 0; width: 16%; transform: scaleY(-1) rotate(-4deg); }

/* 03 Si Kantoran: clean flat vector, geometric shapes */
.t-si-kantoran { --bg: #1F2A44; --fg: #F7F3EA; }
.t-si-kantoran .scene__name::after { content: ""; display: inline-block; width: .17em; height: .17em; margin-left: .05em; border-radius: 50%; background: #F2594B; }
.t-si-kantoran .frame__img { border-radius: 22px; }
.t-si-kantoran .d-sun { right: 4%; top: 2%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: #F5B841; }
.t-si-kantoran .d-tri { left: 4%; bottom: 6%; width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 70px solid #3DBE9B; transform: rotate(-14deg); }
.t-si-kantoran .d-dot { right: 2%; bottom: 10%; width: 28px; height: 28px; border-radius: 50%; background: #F2594B; }

/* 04 Folded Atlas: layered paper */
.t-folded-atlas { --bg: #E9D8B4; --fg: #1D4E57; background-image: var(--grain); }
.t-folded-atlas .scene__name { text-shadow: 0 .045em 0 rgba(58, 49, 39, .16); }
.t-folded-atlas .frame__img { border: 12px solid #F3EBDD; box-shadow: 0 2px 0 #D9C69D, 0 24px 36px -16px rgba(58, 49, 39, .55); border-radius: 3px; }
.t-folded-atlas .d-layers { left: 2%; bottom: 2%; width: 104%; height: 40%; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); filter: drop-shadow(0 -6px 8px rgba(58, 49, 39, .22)); }

/* 05 Atomic Tomorrow: mid-century ad art, halftone, misregistered ink */
.t-retro-futures { --bg: #24324A; --fg: #F4E9D3;
  background-image: radial-gradient(rgba(244, 233, 211, .08) 1.3px, transparent 1.8px); background-size: 11px 11px; }
.t-retro-futures .scene__name { transform: skewX(-9deg); transform-origin: left bottom; text-shadow: .045em .035em 0 #F06B4F; padding-right: .12em; }
.t-retro-futures .frame__img { border: 7px solid #F4E9D3; border-radius: 8px; }
.t-retro-futures .d-burst { width: 12%; }
.t-retro-futures .b1 { right: 2%; top: 2%; } .t-retro-futures .b2 { left: 2%; bottom: 8%; width: 7%; }
.t-retro-futures .d-boomerang { right: 0; bottom: 0; width: 30%; }
.t-retro-futures .d-halftone { right: -4%; top: -4%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#E9B23F 2px, transparent 2.6px) 0 0 / 10px 10px; opacity: .55; -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); }

/* 06 Floating World Tales: ukiyo-e, red sun, mist, waves */
.t-floating-world-tales { --bg: #EFE4CC; --fg: #1F3A5F; background-image: var(--grain); }
.t-floating-world-tales .scene__name { font-weight: 700; letter-spacing: -.03em; }
.t-floating-world-tales .frame__img { border: 3px solid #1B1A17; outline: 10px solid #F6EEDB; box-shadow: 0 0 0 13px #1B1A17; }
.t-floating-world-tales .frame::before { inset: -24px; }
.t-floating-world-tales .h-tl { left: -28px; top: -28px; } .t-floating-world-tales .h-tr { right: -28px; top: -28px; }
.t-floating-world-tales .h-bl { left: -28px; bottom: -28px; } .t-floating-world-tales .h-br { right: -28px; bottom: -28px; }
.t-floating-world-tales .d-sun { right: 0; top: -2%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #C73E1D; }
.t-floating-world-tales .d-mist { height: 7%; border-radius: 999px; background: #D9A441; opacity: .5; }
.t-floating-world-tales .m1 { left: 6%; top: 4%; width: 34%; } .t-floating-world-tales .m2 { right: 14%; bottom: 3%; width: 28%; }
.t-floating-world-tales .d-waves {
  left: 2%; right: 0; bottom: 0; height: 15%;
  background:
    radial-gradient(circle at 50% 100%, #EFE4CC 0 5px, #1F3A5F 5px 7px, #8FB8B0 7px 11px, #1F3A5F 11px 13px, #EFE4CC 13px 17px, #1F3A5F 17px 19px, #EFE4CC 19px 23px, transparent 23.5px) 12px 12px / 48px 24px,
    radial-gradient(circle at 50% 100%, #EFE4CC 0 5px, #1F3A5F 5px 7px, #8FB8B0 7px 11px, #1F3A5F 11px 13px, #EFE4CC 13px 17px, #1F3A5F 17px 19px, #EFE4CC 19px 23px, transparent 23.5px) -12px 0 / 48px 24px;
  -webkit-mask: linear-gradient(transparent, #000 40%); mask: linear-gradient(transparent, #000 40%);
}

/* 07 Insert Coin Economics: 16-bit pixels, HUD */
.t-insert-coin-economics { --bg: #1A1C2C; --fg: #F4F4F4; }
.t-insert-coin-economics::before { content: ""; position: absolute; inset: 0; z-index: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 4px); pointer-events: none; }
.t-insert-coin-economics .scene__name { color: #FFCD75; text-shadow: 4px 4px 0 #B13E53; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(2.4rem, 4.6vw, 6rem); }
.t-insert-coin-economics .chip { border-radius: 0; box-shadow: 3px 3px 0 #3B5DC9; }
.t-insert-coin-economics .frame__img { image-rendering: pixelated; border: 6px solid #3B5DC9; box-shadow: 0 0 0 6px #F4F4F4, 10px 10px 0 6px #0b0c14; }
.t-insert-coin-economics .scene__avatar { border-radius: 0; image-rendering: pixelated; }
.t-insert-coin-economics .d-px { width: 12px; height: 12px; background: #41A6F6; box-shadow: 12px 0 #41A6F6, -12px 0 #41A6F6, 0 12px #41A6F6, 0 -12px #41A6F6; }
.t-insert-coin-economics .p1 { right: 4%; top: 6%; } .t-insert-coin-economics .p2 { left: 4%; bottom: 14%; background: #FFCD75; box-shadow: 12px 0 #FFCD75, -12px 0 #FFCD75, 0 12px #FFCD75, 0 -12px #FFCD75; }
.t-insert-coin-economics .p3 { right: 20%; bottom: 4%; transform: scale(.6); } .t-insert-coin-economics .p4 { left: 30%; top: 2%; transform: scale(.5); background: #A7F070; box-shadow: 12px 0 #A7F070, -12px 0 #A7F070, 0 12px #A7F070, 0 -12px #A7F070; }
.t-insert-coin-economics .d-hud { left: 8%; top: 1%; font-size: .72rem; font-weight: 800; letter-spacing: .2em; color: #A7F070; }
.motion .t-insert-coin-economics .d-hud { animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* 08 Clay Critters: soft sculpted plasticine */
.t-clay-critters { --bg: #8DB580; --fg: #2B1D16; }
.t-clay-critters .scene__name { text-shadow: 0 .03em 0 rgba(255, 255, 255, .4), 0 -.02em 0 rgba(43, 29, 22, .25); }
.t-clay-critters .chip { background: rgba(255, 255, 255, .28); }
.t-clay-critters .frame__img { border: 10px solid #F1E6D6; border-radius: 34px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 22px 30px -14px rgba(43, 29, 22, .5); }
.t-clay-critters .d-blob { border-radius: 52% 48% 56% 44% / 48% 58% 42% 52%; box-shadow: inset -10px -14px 22px rgba(0, 0, 0, .22), inset 10px 12px 18px rgba(255, 255, 255, .45), 0 18px 24px -10px rgba(43, 29, 22, .45); }
.t-clay-critters .b1 { right: 0; top: 0; width: 18%; aspect-ratio: 1.1; background: #E07A4F; }
.t-clay-critters .b2 { left: 2%; bottom: 4%; width: 12%; aspect-ratio: .9; background: #F2D27A; }
.t-clay-critters .b3 { right: 12%; bottom: 0; width: 9%; aspect-ratio: 1; background: #E9A0A7; }

/* 09 Nusantara Dulu: wayang and batik, sogan and indigo, gold */
.t-nusantara-dulu { --bg: #23395B; --fg: #F1E3C6;
  background-image:
    radial-gradient(ellipse 22px 12px at 50% 0, rgba(201, 151, 59, .1) 98%, transparent),
    radial-gradient(ellipse 22px 12px at 50% 100%, rgba(201, 151, 59, .1) 98%, transparent),
    radial-gradient(ellipse 12px 22px at 0 50%, rgba(201, 151, 59, .1) 98%, transparent),
    radial-gradient(ellipse 12px 22px at 100% 50%, rgba(201, 151, 59, .1) 98%, transparent);
  background-size: 48px 48px;
}
.t-nusantara-dulu::before, .t-nusantara-dulu::after {
  content: ""; position: absolute; left: 0; right: 0; height: 16px; z-index: 0;
  background: repeating-linear-gradient(45deg, #6B3E26 0 9px, #C9973B 9px 12px, #F1E3C6 12px 14px, #C9973B 14px 17px, #6B3E26 17px 22px);
}
.t-nusantara-dulu::before { top: 0; } .t-nusantara-dulu::after { bottom: 0; }
.t-nusantara-dulu .scene__name { font-weight: 600; letter-spacing: -.02em; }
.t-nusantara-dulu .scene__tagline { color: #E5BE74; }
.t-nusantara-dulu .frame__img { border: 2px solid #C9973B; outline: 1px solid #C9973B; outline-offset: 6px; }
.t-nusantara-dulu { --sel: #C9973B; }

/* 10 Quiet Days: a small white figure on dark, one warm dawn */
.t-quiet-days { --bg: #0E0F12; --fg: #F2F2F0; --sel: #6B7280; }
.t-quiet-days::before { content: ""; position: absolute; left: 0; right: 0; bottom: 9%; height: 1px; background: #2A2D33; z-index: 0; }
.t-quiet-days .scene__name { font-weight: 300; text-transform: uppercase; letter-spacing: .26em; font-size: clamp(2.2rem, 4.2vw, 5.5rem); margin-right: -.26em; }
.t-quiet-days .scene__about, .t-quiet-days .scene__facts dd { color: #C9CCD2; }
.t-quiet-days .frame__img { box-shadow: 0 0 120px rgba(232, 176, 75, .10); border: 1px solid #1B1D22; }
.t-quiet-days .d-dawn { left: 50%; bottom: 2%; width: 50%; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 999px 999px 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(232, 176, 75, .28), transparent 65%); }

/* ───────── Process ───────── */
.process { position: relative; background: var(--ink); color: var(--paper); padding-block: clamp(96px, 16vh, 200px); }
.process__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 140px); align-items: start; }
.process__head { position: sticky; top: clamp(32px, 10vh, 120px); }
.process__head .marker { margin-bottom: clamp(24px, 4vh, 44px); }
.process__title { font-size: clamp(2.6rem, 6.2vw, 7.5rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; }
.process__claim { margin-top: clamp(28px, 5vh, 56px); font-size: clamp(1.45rem, 2.4vw, 2.6rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; max-width: 18ch; }
.process__lede { margin-top: 20px; color: var(--paper-dim); max-width: 42ch; font-size: clamp(1rem, 1.15vw, 1.2rem); }
.steps { position: relative; counter-reset: step; }
.steps::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1.5px; background: var(--graphite); }
.step { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: clamp(12px, 2vw, 28px); padding-block: clamp(24px, 4.5vh, 44px); border-bottom: 1px solid rgba(243, 241, 236, .14); }
.step:first-child { padding-top: 0; }
.step:last-child { border-bottom: 0; }
.step__node { position: absolute; left: 0; top: calc(clamp(24px, 4.5vh, 44px) + .35em); width: 16px; height: 16px; border: 1.5px solid var(--paper); background: var(--ink); z-index: 1; transition: background-color .4s var(--ease), border-color .4s var(--ease); }
.step:first-child .step__node { top: .35em; }
.step__node i { position: absolute; left: calc(100% + 2px); top: 50%; height: 1.5px; width: 26px; background: var(--graphite); transform: translateY(-50%) scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .1s; }
.step__node i::after { content: ""; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: inherit; transform: translateY(-50%); }
.step.is-in .step__node { background: var(--paper); }
.step.is-in .step__node i { transform: translateY(-50%) scaleX(1); }
.step.is-current .step__node { background: var(--blue); border-color: var(--blue); }
.step.is-current .step__node i { background: var(--blue); }
.step__no { grid-column: 2; font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--paper-dim); }
.step__title { grid-column: 2; margin-top: 6px; font-size: clamp(1.35rem, 2.1vw, 2.15rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
.step__body { grid-column: 2; margin-top: 12px; color: var(--paper-dim); max-width: 48ch; }
.no-js .step__node, html:not(.js) .step__node { background: var(--paper); }
html:not(.js) .step__node i { transform: translateY(-50%) scaleX(1); }
@media (max-width: 960px) {
  .process__grid { grid-template-columns: minmax(0, 1fr); }
  .process__head { position: static; }
  .step { grid-template-columns: 44px minmax(0, 1fr); }
  .step__node i { width: 16px; }
}

/* ───────── Next ───────── */
.next { padding-block: clamp(96px, 18vh, 220px); }
.next .marker { margin-bottom: clamp(24px, 4vh, 44px); }
.next__title { font-size: clamp(2.8rem, 8.4vw, 10.5rem); font-weight: 800; letter-spacing: -.055em; line-height: .88; max-width: 11em; margin-left: -.04em; }
.next__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px clamp(40px, 7vw, 140px); margin-top: clamp(40px, 7vh, 88px); padding-top: 24px; border-top: 1.5px solid var(--ink); align-items: start; }
.next__lede { font-size: clamp(1.1rem, 1.5vw, 1.6rem); font-weight: 500; line-height: 1.42; max-width: 36ch; }
.next__aside { font-size: .95rem; color: var(--graphite); max-width: 36ch; font-weight: 500; }
@media (max-width: 860px) { .next__grid { grid-template-columns: minmax(0, 1fr); } }

/* ───────── End card (footer) ───────── */
.end { position: relative; background: var(--ink); color: var(--paper); }
.end__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(96px, 18vh, 200px) clamp(72px, 12vh, 140px); }
.end .mark { width: clamp(96px, 12vw, 190px); }
.end__line { margin-top: clamp(28px, 5vh, 48px); font-size: clamp(.78rem, 1.1vw, 1rem); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #CFCCC5; padding-left: .32em; }
.end__tag { margin-top: clamp(56px, 12vh, 140px); font-size: clamp(2.5rem, 7.6vw, 9.5rem); font-weight: 800; letter-spacing: -.055em; line-height: .9; max-width: 9.5em; text-wrap: balance; }
.end__tag-id { margin-top: 20px; font-size: clamp(1.05rem, 1.6vw, 1.5rem); font-weight: 600; color: var(--paper-dim); }
.end__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; padding-block: 28px 36px; border-top: 1px solid rgba(243, 241, 236, .16); }
.end__logo { width: 164px; }
.end__small { font-size: .82rem; color: var(--paper-dim); }
.end__actions { display: flex; align-items: center; gap: 24px; }
.end__top { font-size: .875rem; font-weight: 700; text-decoration: none; }
.end__top:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .end__bar { grid-template-columns: minmax(0, 1fr); } .end__actions { justify-content: space-between; } }

/* ───────── Footer links ───────── */
.end__info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; }
.end__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.end__legal a { font-size: .875rem; font-weight: 600; color: var(--paper); text-decoration: none; padding-block: 4px; }
.end__legal a:hover, .end__legal a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.end--slim .end__bar { border-top: 0; padding-block: 36px 44px; }
@media (max-width: 760px) { .end__actions { flex-wrap: wrap; gap: 14px 24px; } }

/* ───────── Document pages (privacy, terms) ───────── */
.doc { padding-block: clamp(32px, 7vh, 88px) clamp(88px, 14vh, 180px); }
.doc__head { padding-bottom: clamp(32px, 6vh, 72px); border-bottom: 1.5px solid var(--ink); }
.doc__head .marker { margin-bottom: clamp(20px, 3.5vh, 36px); }
.doc__title { font-size: clamp(2.8rem, 8.4vw, 9rem); font-weight: 800; letter-spacing: -.055em; line-height: .9; margin-left: -.04em; text-wrap: balance; }
.doc__lede { margin-top: clamp(24px, 4vh, 44px); font-size: clamp(1.1rem, 1.5vw, 1.6rem); font-weight: 500; line-height: 1.42; max-width: 42ch; }
.doc__meta { margin-top: clamp(20px, 3vh, 32px); display: flex; flex-wrap: wrap; gap: 6px 32px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
.doc__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 120px); padding-top: clamp(32px, 6vh, 64px); align-items: start; }
.doc__toc { position: sticky; top: 28px; }
.doc__toc-title { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); margin-bottom: 10px; }
.doc__toc ol { list-style: none; padding: 0; counter-reset: toc; border-top: 1.5px solid var(--ink); }
.doc__toc li { counter-increment: toc; border-bottom: 1px solid var(--rule); }
.doc__toc a { display: flex; gap: 14px; padding: 10px 0; font-size: .9375rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.doc__toc a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 1.8em; font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--graphite); padding-top: .25em; }
.doc__toc a:hover, .doc__toc a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.doc__text { counter-reset: sec; }
.doc__sec { counter-increment: sec; padding-block: clamp(28px, 5vh, 52px); border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.doc__sec:first-child { padding-top: 0; }
.doc__sec:last-child { border-bottom: 0; }
.doc__sec h2 { font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.doc__sec h2::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 12px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--graphite); }
.doc__sec h3 { margin-top: 26px; font-size: 1.0625rem; font-weight: 750; letter-spacing: -.01em; }
.doc__sec p, .doc__sec ul { margin-top: 14px; max-width: 64ch; }
.doc__sec h3 + p, .doc__sec h3 + ul { margin-top: 8px; }
.doc__sec ul { padding-left: 1.25em; }
.doc__sec li { margin-top: 9px; padding-left: .2em; }
.doc__sec li::marker { color: var(--graphite); }
.doc__sec a { font-weight: 650; text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc__sec code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; background: rgba(20, 20, 20, .07); padding: .1em .35em; border-radius: 3px; }
.doc__note { margin-top: 20px; padding: 18px 20px; border: 1.5px solid var(--ink); max-width: 64ch; font-weight: 550; }
.doc__sec .doc__note { margin-top: 20px; }
.doc__pending { color: var(--graphite); font-style: italic; }
@media (max-width: 960px) {
  .doc__body { grid-template-columns: minmax(0, 1fr); }
  .doc__toc { position: static; }
}

/* ───────── Scroll rail (desktop, drawn by site.js) ───────── */
.rail { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; overflow: visible; }
.rail__path { fill: none; stroke: var(--graphite); stroke-width: 1.5; }
.rail__ghost { fill: none; stroke: var(--graphite); stroke-width: 1; stroke-dasharray: 3 6; opacity: .45; }
.rail__node { fill: var(--paper); stroke: var(--graphite); stroke-width: 1.5; transition: fill .4s; }
.rail__node.is-passed { fill: var(--graphite); }
.rail__tip rect, .rail__tip line, .rail__tip circle { fill: var(--blue); stroke: var(--blue); }
.rail__tip line { stroke-width: 1.5; }

/* ───────── Motion (only with JS and without reduced motion) ───────── */
.motion .hero__title .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.motion .hero__title .line:nth-child(2) > span { transition-delay: .08s; }
.motion .hero__title .line:nth-child(3) > span { transition-delay: .16s; }
.motion .hero__title .line:nth-child(4) > span { transition-delay: .24s; }
.motion.is-loaded .hero__title .line > span { transform: none; }
.motion .hero__copy .marker, .motion .hero__foot, .motion .hero__translation { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s; }
.motion.is-loaded .hero__copy .marker, .motion.is-loaded .hero__foot, .motion.is-loaded .hero__translation { opacity: 1; transform: none; }

.mark.will-draw .mark__pen { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mark.will-draw .mark__anchor { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.mark.will-draw .mark__handle { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.mark.will-draw .mark__knob { opacity: 0; transform: translateX(-187px); }
.mark.is-drawing .mark__pen { animation: pen 1.5s cubic-bezier(.6, .05, .25, 1) forwards; }
.mark.is-drawing .mark__anchor { animation: pop .45s var(--ease) 1.45s forwards; }
.mark.is-drawing .mark__handle { animation: pull .8s var(--ease) 1.75s forwards; }
.mark.is-drawing .mark__knob { animation: knob .8s var(--ease) 1.75s forwards; }
@keyframes pen { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes pull { to { transform: none; } }
@keyframes knob { 0% { opacity: 1; } to { opacity: 1; transform: none; } }

.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion .scene__copy > * { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.motion .scene.is-in .scene__copy > * { opacity: 1; transform: none; }
.motion .scene.is-in .scene__copy > :nth-child(2) { transition-delay: .06s; }
.motion .scene.is-in .scene__copy > :nth-child(3) { transition-delay: .12s; }
.motion .scene.is-in .scene__copy > :nth-child(4) { transition-delay: .18s; }
.motion .scene.is-in .scene__copy > :nth-child(n + 5) { transition-delay: .24s; }
.motion .scene .frame { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease) .1s; }
.motion .scene.is-in .frame { clip-path: inset(-80px); }
.motion .scene .scene__avatar { transform: scale(0) rotate(-30deg); transition: transform .8s var(--ease) .55s; }
.motion .scene.is-in .scene__avatar { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .rail, .lang, .skip { display: none !important; }
  .scene { position: static !important; break-inside: avoid; }
}
.nw { white-space: nowrap; }