@font-face {
  font-family: "Zalando Sans Expanded";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/zalando-sans-expanded-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/lora-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/lora-italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/fredoka-latin.woff2") format("woff2");
}

:root {
  --font-brand: "Zalando Sans Expanded", "Arial Extended", Arial, sans-serif;
  --font-ui: "Instrument Sans", Inter, Arial, sans-serif;
  --font-reading: Lora, Georgia, serif;
  --font-play: Fredoka, "Instrument Sans", Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heavy: 800;

  --text-kicker: 10px;
  --text-label: 12px;
  --text-body: 18px;
  --text-reading: 21px;
  --text-reading-large: 29px;
  --text-invitation: 34px;
  --text-scene-number: 52px;
  --text-loop: 9px;
  --text-control: 14px;
  --text-reveal: 22px;
  --text-door: 58px;
  --text-note: 19px;
  --text-stamp: 11px;
  --text-grown-ups: 20px;
  --text-toggle: 11px;
  --text-h6: 16px;
  --text-h5: 20px;
  --text-h4: 23px;
  --text-h3: 31px;
  --text-h2: 46px;
  --text-h1: 64px;
  --text-hero: 76px;
  --text-logo: 60px;
  --text-logo-footer: 144px;
  --brand-lockup-width: 120px;

  --line-tight: 0.82;
  --line-heading: 0.98;
  --line-body: 1.5;
  --line-reading: 1.38;
  --tracking-brand: -0.02em;
  --tracking-heading: -0.055em;
  --tracking-label: 0.16em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 112px;
  --space-12: 144px;
  --page-gutter: 64px;
  --section-space: 144px;
  --radius-book-cover: 0;
  --shadow-book-cover: 0 8px 18px rgba(23, 23, 23, 0.24), 0 3px 6px rgba(23, 23, 23, 0.18);

  --ink: #171717;
  --paper: #fff;
  --paper-deep: #e7dfcf;
  --white: #fff;
  --signal: #ff4f2e;
  --sky: #75bddd;
  --water: #dcecf0;
  --leaf: #85a96b;
  --gold: #e6b94b;
  --line: rgba(23, 23, 23, 0.24);
  --book-cover-placeholder: #c8c8c4;
  --max: 1440px;
  --modal-max-width: 440px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-body);
}

a {
  color: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 4px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  line-height: var(--line-tight);
  letter-spacing: -0.05em;
}

h2 {
  margin-bottom: var(--space-6);
  font-family: var(--font-reading);
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-heading);
}

h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 0.94;
  letter-spacing: var(--tracking-heading);
}

h4,
h5,
h6 {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  line-height: 1.08;
}

h4 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h4);
}
h5 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h5);
}
h6 {
  margin-bottom: var(--space-2);
  font-size: var(--text-h6);
}

p {
  margin-bottom: var(--space-5);
  font-size: var(--text-body);
  line-height: var(--line-body);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  border-bottom: 1px solid var(--line);
}
.site-header__shell {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: var(--max);
  align-items: start;
  justify-content: space-between;
  padding: var(--space-5) var(--page-gutter);
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  text-decoration: none;
}
.brand__image {
  display: block;
  width: var(--brand-lockup-width);
  height: auto;
}
.brand__alma {
  font-family: var(--font-brand);
  font-size: var(--text-logo);
  font-weight: var(--weight-heavy);
  line-height: 0.8;
  letter-spacing: var(--tracking-brand);
}
.brand__descriptor {
  font-size: var(--text-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: 0.24em;
}
nav {
  display: flex;
  gap: 22px;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
}
nav a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
nav a:hover {
  border-color: currentColor;
}

main > section {
  max-width: var(--max);
  padding-right: var(--page-gutter);
  padding-left: var(--page-gutter);
  margin: 0 auto;
}
.kicker {
  margin-bottom: var(--space-4);
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.19em;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 760px;
  padding-top: 92px;
  padding-bottom: 100px;
}

.hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-10);
  align-items: center;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.hero__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin-bottom: 0;
  object-fit: contain;
  object-position: left center;
}
.hero h1 {
  max-width: 820px;
  margin-bottom: var(--space-6);
  font-family: var(--font-reading);
  font-size: var(--text-hero);
  line-height: var(--line-heading);
}
.hero h1 em {
  color: var(--signal);
  font-family: var(--font-reading);
  font-weight: var(--weight-medium);
  letter-spacing: -0.07em;
}
.hero__reading {
  max-width: 540px;
  margin: 0 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-reading-large);
  line-height: var(--line-reading);
}
.text-link {
  width: fit-content;
  font-size: var(--text-body);
  font-weight: var(--weight-heavy);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.text-link--with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.text-link__icon {
  width: 16px;
  height: 16px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: var(--weight-heavy) var(--text-label) / 1 var(--font-ui);
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}
.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
.button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}
.button--primary {
  background: var(--gold);
}
.button--secondary {
  background: var(--white);
}
.button__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.alma-modal {
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: var(--modal-max-width);
  padding: 0;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
}
.alma-modal::backdrop {
  background: rgba(23, 23, 23, 0.58);
}
.alma-modal__content {
  padding: var(--space-6);
}
.alma-modal__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-label);
}
.alma-modal__title {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}
.alma-modal__reading {
  margin: var(--space-3) 0 0;
  font-family: var(--font-reading);
  font-size: var(--text-reading);
  line-height: var(--line-reading);
}
.alma-modal__actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-6);
  gap: var(--space-3);
}
.alma-modal__actions .button {
  flex: 1 1 160px;
}
.completion-star {
  --completion-font: inherit;
  --completion-letter-spacing: inherit;
  --completion-gold-light: #ffe99a;
  --completion-gold-mid: var(--gold);
  --completion-gold-deep: #c98a18;
  --completion-gold-edge: #d7a529;
  --completion-text: var(--white);
  --completion-text-shadow: rgba(0, 0, 0, 0.28);
  --completion-hard-shadow: rgba(105, 67, 8, 0.32);
  --completion-soft-shadow: rgba(0, 0, 0, 0.28);
  display: grid;
  width: 260px;
  height: auto;
  max-width: calc(100vw - (var(--space-6) * 2));
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  color: var(--ink);
  background: transparent;
  grid-template-rows: max-content max-content;
  align-content: center;
  justify-content: center;
  justify-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.completion-star:not([open]) {
  display: none;
}
.completion-star::backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: completion-backdrop-in 220ms ease-out both;
}
.completion-star__shape {
  position: relative;
  display: grid;
  width: 190px;
  max-width: 72vw;
  aspect-ratio: 1;
  place-items: center;
  animation: completion-star-arrive 440ms cubic-bezier(.2, .78, .26, 1) both;
}
.completion-star__surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--gold);
  stroke: var(--completion-gold-edge);
  stroke-width: 6;
  stroke-linejoin: round;
  filter: drop-shadow(0 9px 0 var(--completion-hard-shadow)) drop-shadow(0 18px 22px var(--completion-soft-shadow));
}
.completion-star__gold-light { stop-color: var(--completion-gold-light); }
.completion-star__gold-mid { stop-color: var(--completion-gold-mid); }
.completion-star__gold-deep { stop-color: var(--completion-gold-deep); }
.completion-star__title {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  color: var(--completion-text);
  font-family: var(--completion-font);
  font-size: var(--text-h2);
  font-weight: var(--weight-heavy);
  line-height: var(--line-heading);
  letter-spacing: var(--completion-letter-spacing);
  text-align: center;
  text-shadow: 0 3px 0 var(--completion-text-shadow);
}
.draw-line-page .completion-star {
  --completion-font: var(--font-play);
  --completion-letter-spacing: 0;
  --completion-gold-light: #ffe7a1;
  --completion-gold-mid: #ffc64d;
  --completion-gold-deep: #d88d1c;
  --completion-gold-edge: #c98216;
  --completion-hard-shadow: rgba(36, 48, 40, 0.34);
  --completion-text-shadow: rgba(36, 48, 40, 0.48);
}
.name-it-page .completion-star {
  --completion-font: var(--font-play);
  --completion-letter-spacing: 0;
  --completion-gold-light: #ffe99a;
  --completion-gold-mid: #f1bd3d;
  --completion-gold-deep: #c98a18;
  --completion-gold-edge: #bd8216;
  --completion-hard-shadow: rgba(46, 42, 39, 0.34);
  --completion-text-shadow: rgba(46, 42, 39, 0.48);
}
@keyframes completion-star-arrive {
  from { opacity: 0; transform: scale(.72) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
.completion-star.is-leaving .completion-star__shape,
.completion-star.is-leaving .completion-star__title {
  animation: completion-star-leave 220ms ease-in both;
}
.completion-star.is-leaving::backdrop {
  animation: completion-backdrop-out 220ms ease-in both;
}
@keyframes completion-backdrop-in {
  from { background: rgba(0, 0, 0, 0); }
  to { background: rgba(0, 0, 0, 0.5); }
}
@keyframes completion-backdrop-out {
  from { background: rgba(0, 0, 0, 0.5); }
  to { background: rgba(0, 0, 0, 0); }
}
@keyframes completion-star-leave {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  .completion-star__shape { animation: none; }
  .completion-star.is-leaving .completion-star__shape,
  .completion-star.is-leaving .completion-star__title { animation: none; }
  .completion-star::backdrop,
  .completion-star.is-leaving::backdrop { animation: none; }
}

.app-house {
  max-width: var(--max);
  padding: var(--section-space) var(--page-gutter);
  margin: 0 auto;
}
.app-rooms {
  padding-top: var(--section-space);
}
.shelf-book {
  position: relative;
  min-width: 0;
  padding-bottom: var(--space-4);
}
.shelf-book__cover {
  position: relative;
  display: flex;
  min-height: 310px;
  padding: var(--space-5);
  overflow: hidden;
  align-items: flex-end;
  border: 0;
  border-radius: var(--radius-book-cover);
  color: var(--ink);
  background: var(--book-cover-placeholder);
  box-shadow: var(--shadow-book-cover);
}
.shelf-book__cover::before,
.shelf-book__cover::after {
  position: absolute;
  display: block;
  content: "";
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.shelf-book h3 {
  margin: var(--space-4) 0 0;
  font-size: var(--text-h5);
}
.shelf-book--night .shelf-book__cover {
  color: var(--white);
  background: var(--ink);
}
.shelf-book--night .shelf-book__cover::before {
  top: 18%;
  left: 12%;
  width: 42%;
  aspect-ratio: 1;
  border-color: var(--white);
  background: var(--gold);
}
.shelf-book--night .shelf-book__cover::after {
  right: 10%;
  bottom: 18%;
  width: 24%;
  aspect-ratio: 1;
  border-color: var(--white);
  background: var(--white);
}
.shelf-book--tiny .shelf-book__cover {
  background: var(--sky);
}
.shelf-book--tiny .shelf-book__cover::before {
  top: 12%;
  right: -18%;
  width: 72%;
  aspect-ratio: 1;
  background: var(--paper);
}
.shelf-book--tiny .shelf-book__cover::after {
  bottom: 15%;
  left: 14%;
  width: 32%;
  aspect-ratio: 1;
  background: var(--signal);
}
.shelf-book--machines .shelf-book__cover {
  background: var(--gold);
}
.shelf-book--machines .shelf-book__cover::before {
  top: 15%;
  left: 10%;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 0;
  background: var(--paper-deep);
  transform: rotate(20deg);
}
.shelf-book--machines .shelf-book__cover::after {
  right: 12%;
  bottom: 14%;
  width: 26%;
  aspect-ratio: 1;
  background: var(--ink);
}
.shelf-book--home .shelf-book__cover {
  background: var(--leaf);
}
.shelf-book--home .shelf-book__cover::before {
  top: 12%;
  left: -12%;
  width: 70%;
  aspect-ratio: 1;
  background: var(--paper);
}
.shelf-book--home .shelf-book__cover::after {
  right: 14%;
  bottom: 12%;
  width: 40%;
  aspect-ratio: 1;
  background: var(--sky);
}
.shelf-book--flags .shelf-book__cover,
.shelf-book--flags.app-feature__cover {
  color: var(--ink);
  background: var(--ink);
}
.shelf-book--flags .shelf-book__cover::before,
.shelf-book--flags.app-feature__cover::before,
.shelf-book--flags .shelf-book__cover::after,
.shelf-book--flags.app-feature__cover::after {
  display: none;
}
.shelf-book__cover-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.shelf-book--draw-line .shelf-book__cover {
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}
.shelf-book--draw-line .shelf-book__cover::before,
.shelf-book--draw-line .shelf-book__cover::after {
  display: none;
}
.shelf-book--draw-line .shelf-book__cover-art {
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shelf-book--name-it .shelf-book__cover {
  overflow: hidden;
  color: #2e2a27;
  background: #f1bd3d;
}
.shelf-book--name-it .shelf-book__cover::before,
.shelf-book--name-it .shelf-book__cover::after {
  display: none;
}
.app-page,
.app-library-page,
.app-account-page {
  min-height: 100vh;
}
.app-page .site-header,
.app-library-page .site-header,
.app-account-page .site-header {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--paper);
}
.app-page .site-header__shell,
.app-library-page .site-header__shell,
.app-account-page .site-header__shell {
  align-items: center;
}
.app-header {
  min-height: 72px;
}
.app-header__action {
  display: grid;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  place-items: center;
  color: var(--ink);
  background: transparent;
}
.app-header__action:hover {
  border-color: var(--ink);
  background: var(--paper-deep);
}
.app-header__action svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.app-header .brand__image {
  width: 128px;
}
.app-feature {
  max-width: 988px;
}
.app-feature__content {
  display: grid;
  grid-template-columns: minmax(280px, 32%) minmax(0, 50%);
  column-gap: var(--space-10);
  align-items: center;
}
.app-feature > h2,
.app-rooms > h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-h4);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-heading);
}
.app-feature__cover {
  min-height: 0;
  aspect-ratio: 4 / 5;
}
.app-feature__copy {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-4);
}
.app-feature__copy h3 {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-h2);
}
.app-feature__cover {
  color: var(--white);
  background: var(--ink);
}
.app-feature__cover::before {
  top: 18%;
  left: 12%;
  width: 42%;
  aspect-ratio: 1;
  border-color: var(--white);
  background: var(--gold);
}
.app-feature__cover::after {
  right: 10%;
  bottom: 18%;
  width: 24%;
  aspect-ratio: 1;
  border-color: var(--white);
  background: var(--white);
}
.book-carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--space-5);
  padding: 0 var(--space-5) var(--space-4) 0;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  cursor: grab;
}
.book-carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.book-carousel::-webkit-scrollbar {
  display: none;
}
.book-carousel .shelf-book {
  flex: 0 0 210px;
  scroll-snap-align: start;
}
.shelf-book__cover {
  min-height: 0;
  aspect-ratio: 4 / 5;
}
.shelf-book__cover--library-link {
  display: grid;
  padding: var(--space-5);
  place-content: center;
  gap: var(--space-4);
  border: 1px dashed var(--ink);
  color: var(--ink);
  background: var(--paper-deep);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--line-heading);
  text-align: center;
  text-decoration: none;
}
.shelf-book__cover--library-link svg {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.shelf-book__cover--pending {
  display: grid;
  place-items: center;
  color: rgba(23, 23, 23, 0.56);
  background: #d8d6d1;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  text-align: center;
}
.app-library,
.app-account {
  width: min(100%, var(--max));
  min-height: calc(100vh - 73px);
  padding: var(--section-space) var(--page-gutter);
  margin: 0 auto;
}
.app-library > h1,
.app-account > h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-h2);
}
.app-library > p,
.app-account > p {
  max-width: 58ch;
  margin-bottom: var(--space-7);
}
.app-library__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.app-library__grid .shelf-book {
  min-width: 0;
}
.app-account__card {
  max-width: 540px;
  padding: var(--space-6);
  border: 1px solid var(--ink);
  background: var(--paper-deep);
}

.flags-book-page {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #0f3b58;
}
.flags-book {
  --flags-ink: #10283d;
  --flags-paper: #fbfaf4;
  --flags-sky: #dff1f8;
  --flags-sand: #eedb9d;
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  color: var(--flags-ink);
  background: var(--flags-sky);
  outline: none;
}
.flags-book:focus-visible {
  outline: 3px solid var(--flags-sand);
  outline-offset: -3px;
}
.flags-book__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 360ms ease;
  will-change: transform;
}
.flags-book.is-dragging .flags-book__track {
  transition: none;
}
.flags-book__loading {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  color: var(--flags-ink);
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.flags-book__loading-compass {
  width: 48px;
  height: 48px;
  overflow: visible;
}
.flags-book__loading-ring {
  fill: rgba(251, 250, 244, 0.72);
  stroke: var(--flags-ink);
  stroke-width: 1.5;
}
.flags-book__loading-cardinal,
.flags-book__loading-needle path:first-child,
.flags-book__loading-pin {
  fill: var(--flags-ink);
}
.flags-book__loading-intercardinal,
.flags-book__loading-needle path:last-child {
  fill: var(--flags-sand);
}
.flags-book__loading-needle {
  transform-box: fill-box;
  transform-origin: center;
  animation: flags-compass-search 2200ms ease-in-out infinite;
}
.flags-book__loading-pin {
  stroke: var(--flags-paper);
  stroke-width: 1;
}
.flags-book__loading p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-label);
}
.flags-book__atlas-world,
.flags-book__navigation,
.flags-book__tray {
  transition: opacity 220ms ease;
}
.flags-book[data-atlas-ready="false"] .flags-book__atlas-world,
.flags-book[data-atlas-ready="false"] .flags-book__navigation,
.flags-book[data-atlas-ready="false"] .flags-book__tray {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.flags-book[data-atlas-ready="true"] .flags-book__loading {
  visibility: hidden;
  opacity: 0;
}
.flags-book[data-atlas-ready="true"] .flags-book__loading-needle {
  animation: none;
  transform: rotate(0deg);
}
@keyframes flags-compass-search {
  0%,
  12%,
  100% { transform: rotate(0deg); }
  34% { transform: rotate(32deg); }
  68% { transform: rotate(-26deg); }
  88% { transform: rotate(8deg); }
}
.flags-book__page {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
}
.flags-book__page--atlas {
  display: grid;
  place-items: center;
  background: var(--flags-sky);
}
.flags-book__atlas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.flags-book__atlas.is-panning {
  cursor: grabbing;
}
.flags-book__atlas-world {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  will-change: transform;
}
.flags-book__atlas img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  user-select: none;
}
.flags-book__drop-zones {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.flags-book__drop-zone {
  position: absolute;
  display: grid;
  width: 9%;
  aspect-ratio: 4 / 3;
  padding: var(--space-1);
  place-items: center;
  border: 2px dashed rgba(16, 40, 61, 0.78);
  color: var(--flags-ink);
  background: rgba(251, 250, 244, 0.48);
  box-shadow: 2px 2px 0 rgba(16, 40, 61, 0.2);
  font-family: var(--font-ui);
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  line-height: 1.05;
  text-align: center;
  translate: -50% -50%;
  cursor: pointer;
  pointer-events: auto;
}
.flags-book__drop-zone.is-drop-active {
  border-color: var(--signal);
  background: rgba(255, 79, 46, 0.18);
  box-shadow: 3px 3px 0 var(--signal);
}
.flags-book__drop-zone.is-placed {
  display: block;
  background: rgba(251, 250, 244, 0.88);
  border-style: solid;
}
.flags-book__drop-zone.is-rejected {
  border-color: var(--signal);
  background: rgba(255, 79, 46, 0.2);
}
.flags-book__placed-flag {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: contain;
}
.flags-book__drop-zone.is-placed > span {
  position: absolute;
  z-index: 3;
  top: calc(100% + var(--space-1));
  left: 50%;
  width: max-content;
  max-width: 150%;
  padding: 2px var(--space-1);
  overflow: hidden;
  color: var(--flags-ink);
  background: var(--flags-paper);
  border: 1px solid rgba(16, 40, 61, 0.42);
  line-height: 1;
  text-overflow: ellipsis;
  translate: -50% 0;
  white-space: nowrap;
}
.flags-book__flag img,
.flags-book__drag-preview img,
.flags-book__placed-flag {
  -webkit-mask: url("app/ruang/bendera-dunia/assets/flag-wave-mask.svg?v=5")
    center / 100% 100% no-repeat;
  mask: url("app/ruang/bendera-dunia/assets/flag-wave-mask.svg?v=5") center /
    100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(2px 2px 0 rgba(16, 40, 61, 0.24));
}
.flags-book__fabric-filter {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
[data-flag-page="1"] .flags-book__flag img,
[data-flag-page="2"] .flags-book__flag img,
.flags-book__drag-preview[data-fabric-bend="shared"] img,
.flags-book__placed-flag[data-fabric-bend="shared"] {
  filter:
    url(#flags-book-fabric-bend)
    drop-shadow(2px 2px 0 rgba(16, 40, 61, 0.24));
}
.flags-book__drop-zone--wave {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.flags-book__drop-zone--wave > span {
  position: relative;
  z-index: 3;
}
.flags-book__drop-zone--wave.is-placed {
  background: transparent;
}
.flags-book__drop-zone--wave.is-drop-active,
.flags-book__drop-zone--wave.is-rejected {
  color: var(--signal);
}
.flags-book__wave-outline {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: rgba(251, 250, 244, 0.48);
  stroke: currentColor;
  stroke-dasharray: 6 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(16, 40, 61, 0.2));
}
.flags-book__drop-zone--wave.is-placed .flags-book__wave-outline {
  z-index: 0;
  fill: rgba(251, 250, 244, 0.88);
}
.flags-book__drop-zone--wave.is-drop-active .flags-book__wave-outline,
.flags-book__drop-zone--wave.is-rejected .flags-book__wave-outline {
  fill: rgba(255, 79, 46, 0.2);
}
.flags-book__flag::after,
.flags-book__drag-preview::after,
.flags-book__drop-zone--wave.is-placed::after {
  position: absolute;
  z-index: 2;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(16, 40, 61, 0.04) 0%,
    rgba(16, 40, 61, 0.16) 10%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(16, 40, 61, 0) 48%,
    rgba(16, 40, 61, 0.13) 66%,
    rgba(255, 255, 255, 0.07) 74%,
    rgba(16, 40, 61, 0) 84%,
    rgba(16, 40, 61, 0) 100%
  );
  -webkit-mask: url("app/ruang/bendera-dunia/assets/flag-wave-mask.svg?v=5")
    center / 100% 100% no-repeat;
  mask: url("app/ruang/bendera-dunia/assets/flag-wave-mask.svg?v=5") center /
    100% 100% no-repeat;
}
.flags-book__flag {
  position: relative;
  isolation: isolate;
}
.flags-book__flag > span {
  position: relative;
  z-index: 3;
}
.flags-book__flag::after {
  top: var(--space-2);
  right: var(--space-2);
  left: var(--space-2);
  aspect-ratio: 4 / 3;
}
.flags-book__drag-preview {
  position: fixed;
  isolation: isolate;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.flags-book__drag-preview::after {
  inset: 0;
  aspect-ratio: 4 / 3;
}
.flags-book__drag-preview img {
  position: relative;
  z-index: 1;
}
.flags-book__drop-zone--wave.is-placed::after {
  inset: 0;
}
.flags-book__drop-zone--saudi-arabia {
  top: 46%;
  left: 20%;
}
.flags-book__drop-zone--kazakhstan {
  top: 28%;
  left: 39%;
}
.flags-book__drop-zone--china {
  top: 25%;
  left: 55%;
}
.flags-book__drop-zone--south-korea {
  top: 27%;
  left: 66%;
}
.flags-book__drop-zone--japan {
  top: 34%;
  left: 77%;
}
.flags-book__drop-zone--india {
  top: 50%;
  left: 38%;
}
.flags-book__drop-zone--thailand {
  top: 54%;
  left: 48%;
}
.flags-book__drop-zone--indonesia {
  top: 70%;
  left: 57%;
}
.flags-book__drop-zone--australia {
  top: 82%;
  left: 70%;
}
.flags-book__drop-zone--new-zealand {
  top: 88%;
  left: 84%;
}
.flags-book__drop-zone--france {
  top: 34%;
  left: 39%;
}
.flags-book__drop-zone--germany {
  top: 31%;
  left: 59%;
}
.flags-book__drop-zone--spain {
  top: 43%;
  left: 29%;
}
.flags-book__drop-zone--italy {
  top: 40%;
  left: 49%;
}
.flags-book__drop-zone--sweden {
  top: 17%;
  left: 58%;
}
.flags-book__drop-zone--algeria {
  top: 52%;
  left: 42%;
}
.flags-book__drop-zone--democratic-republic-congo {
  top: 70%;
  left: 52%;
}
.flags-book__drop-zone--egypt {
  top: 51%;
  left: 59%;
}
.flags-book__drop-zone--nigeria {
  top: 67%;
  left: 39%;
}
.flags-book__drop-zone--south-africa {
  top: 87%;
  left: 47%;
}
.flags-book__drop-zone--canada {
  top: 23%;
  left: 47%;
}
.flags-book__drop-zone--united-states {
  top: 36%;
  left: 48%;
}
.flags-book__drop-zone--mexico {
  top: 47%;
  left: 43%;
}
.flags-book__drop-zone--cuba {
  top: 45%;
  left: 60%;
}
.flags-book__drop-zone--colombia {
  top: 63%;
  left: 45%;
}
.flags-book__drop-zone--venezuela {
  top: 58%;
  left: 56%;
}
.flags-book__drop-zone--peru {
  top: 71%;
  left: 55%;
}
.flags-book__drop-zone--brazil {
  top: 65%;
  left: 66%;
}
.flags-book__drop-zone--chile {
  top: 82%;
  left: 46%;
}
.flags-book__drop-zone--argentina {
  top: 84%;
  left: 58%;
}
.flags-book__page-copy {
  position: absolute;
  top: var(--space-5);
  left: var(--space-6);
  z-index: 2;
  max-width: 340px;
  padding: var(--space-3);
  color: var(--flags-ink);
  background: rgba(251, 250, 244, 0.76);
  border: 1px solid rgba(16, 40, 61, 0.32);
  pointer-events: none;
}
.flags-book__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-label);
}
.flags-book__page-copy h1,
.flags-book__page-copy h2,
.flags-book__future-copy h2 {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-h3);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}
.flags-book__page-copy > p:last-child,
.flags-book__future-copy > p:last-child {
  margin: var(--space-3) 0 0;
  font-family: var(--font-reading);
  font-size: var(--text-body);
  line-height: var(--line-reading);
}
.flags-book__page--future {
  display: grid;
  place-items: center;
  padding: var(--page-gutter);
  background: var(--flags-sand);
}
.flags-book__page--americas {
  background: #bfdde4;
}
.flags-book__future-copy {
  max-width: 520px;
  padding: var(--space-8);
  border: 1px solid var(--flags-ink);
  background: var(--flags-paper);
  box-shadow: 8px 8px 0 var(--flags-ink);
}
.flags-book__navigation {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 4;
  display: flex;
  padding: var(--space-1);
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--flags-ink);
  background: var(--flags-paper);
  box-shadow: 4px 4px 0 var(--flags-ink);
}
.flags-book__arrow {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  color: var(--flags-ink);
  background: transparent;
  cursor: pointer;
}
.flags-book__arrow:hover:not(:disabled) {
  color: var(--flags-paper);
  background: var(--flags-ink);
}
.flags-book__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.flags-book__arrow svg {
  width: 22px;
  height: 22px;
}
.flags-book__count {
  min-width: 54px;
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  text-align: center;
}
.flags-book__controls {
  right: auto;
  left: var(--space-6);
}
.flags-book__exit {
  position: fixed;
  top: var(--space-5);
  right: var(--space-6);
  z-index: 6;
  display: inline-flex;
  padding: var(--space-2) var(--space-3);
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--flags-ink);
  color: var(--flags-ink);
  background: var(--flags-paper);
  box-shadow: 3px 3px 0 var(--flags-ink);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}
.flags-book__exit:hover {
  color: var(--flags-paper);
  background: var(--flags-ink);
}
.flags-book__exit svg {
  width: 16px;
  height: 16px;
}
.flags-book__tray {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  padding: var(--space-3) var(--space-4)
    calc(var(--space-3) + env(safe-area-inset-bottom));
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--flags-ink);
  background: rgba(251, 250, 244, 0.94);
  box-shadow: 0 -4px 0 rgba(16, 40, 61, 0.14);
}
.flags-book__tray-header {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-3);
}
.flags-book__tray-title {
  flex: 0 0 auto;
  width: 58px;
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-label);
}
.flags-book__flag-list {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--space-1);
  gap: var(--space-3);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.flags-book__flag-list::-webkit-scrollbar {
  display: none;
}
.flags-book__reset {
  display: inline-flex;
  min-height: 0;
  padding: var(--space-1);
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: 1px solid var(--flags-ink);
  color: var(--flags-ink);
  background: var(--flags-paper);
  box-shadow: 2px 2px 0 rgba(16, 40, 61, 0.24);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  line-height: 1.5;
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}
.flags-book__reset:hover {
  color: var(--flags-paper);
  background: var(--flags-ink);
}
.flags-book__reset svg {
  width: 16px;
  height: 16px;
}
.flags-book__flag-list > li {
  flex: 0 0 112px;
}
.flags-book__flag {
  display: grid;
  width: 100%;
  gap: var(--space-2);
  padding: var(--space-2);
  place-items: center;
  border: 1px solid var(--flags-ink);
  color: var(--flags-ink);
  background: var(--flags-paper);
  box-shadow: 3px 3px 0 rgba(16, 40, 61, 0.24);
  font-family: var(--font-ui);
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  line-height: 1.1;
  text-align: center;
  cursor: grab;
  touch-action: pan-x;
}
.flags-book__flag.is-selected {
  outline: 3px solid var(--signal);
  outline-offset: -3px;
  box-shadow: 5px 5px 0 var(--signal);
}
.flags-book__flag:disabled {
  opacity: 0.42;
  cursor: default;
}
.flags-book__drag-preview {
  position: fixed;
  z-index: 30;
  width: 112px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  translate: -50% -50%;
}
.flags-book__drag-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.flags-book__flag img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  box-shadow: none;
  object-fit: contain;
}

.hero__scene {
  position: relative;
  min-height: 530px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ink);
  background: #c6ddcf;
}
.scene-label {
  position: absolute;
  z-index: 4;
  margin: 0;
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.15em;
}
.scene-label--top {
  top: var(--space-5);
  left: var(--space-5);
}
.scene-label--bottom {
  right: var(--space-5);
  bottom: 22px;
  writing-mode: vertical-rl;
}
.scene-number {
  position: absolute;
  top: 17px;
  right: 22px;
  z-index: 4;
  color: var(--signal);
  font: var(--weight-medium) var(--text-scene-number) / 0.8 var(--font-reading);
}
.scene-sun,
.scene-moon {
  position: absolute;
  border-radius: 50%;
}
.scene-sun {
  top: 12%;
  right: 7%;
  width: 42%;
  aspect-ratio: 1;
  background: var(--gold);
}
.scene-moon {
  top: 24%;
  left: 9%;
  width: 26%;
  aspect-ratio: 1;
  background: var(--paper);
  box-shadow: inset -24px -5px 0 var(--ink);
}
.scene-hill {
  position: absolute;
  width: 130%;
  border-radius: 50% 50% 0 0;
}
.scene-hill--back {
  bottom: 14%;
  left: -38%;
  height: 49%;
  background: var(--sky);
  transform: rotate(-8deg);
}
.scene-hill--front {
  right: -42%;
  bottom: -25%;
  height: 56%;
  background: var(--leaf);
  transform: rotate(9deg);
}
.scene-window {
  position: absolute;
  z-index: 3;
  bottom: 13%;
  left: 28%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 44%;
  aspect-ratio: 1;
  border: 8px solid var(--ink);
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--signal);
  transform: rotate(-5deg);
}
.scene-window span {
  border: 2px solid var(--ink);
}

.invitation {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.invitation p {
  max-width: 750px;
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-invitation);
  line-height: 1.18;
}
.invitation__loop {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-loop);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.11em;
  white-space: nowrap;
}
.invitation__loop i {
  width: 25px;
  height: 1px;
  background: var(--ink);
}

.discovery {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}
.section-heading {
  max-width: 820px;
  margin-bottom: 44px;
}
.section-heading h2,
.about h2,
.grown-ups h2 {
  margin-bottom: 0;
}
.wonder-field {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: #dbe8d7;
}
.wonder-field__index {
  position: absolute;
  top: 22px;
  left: var(--space-5);
  z-index: 4;
  margin: 0;
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.18em;
}
.orb {
  position: absolute;
  border-radius: 50%;
}
.orb--one {
  top: 9%;
  left: 7%;
  width: 46vw;
  max-width: 640px;
  aspect-ratio: 1;
  background: var(--sky);
}
.orb--two {
  right: 7%;
  bottom: -6%;
  width: 25vw;
  max-width: 340px;
  aspect-ratio: 1;
  background: var(--signal);
}
.orb--three {
  top: 18%;
  right: 24%;
  width: 12vw;
  min-width: 100px;
  aspect-ratio: 1;
  background: var(--gold);
}
.discovery-point {
  position: absolute;
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font: var(--weight-heavy) var(--text-control) var(--font-ui);
  cursor: pointer;
}
.discovery-point[aria-expanded="true"] {
  color: var(--paper);
  background: var(--ink);
}
.point--one {
  top: 20%;
  left: 25%;
}
.point--two {
  top: 55%;
  left: 54%;
}
.point--three {
  top: 33%;
  right: 10%;
}
.wonder-field__prompt {
  position: absolute;
  bottom: 18px;
  left: var(--space-5);
  z-index: 4;
  margin: 0;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.04em;
}
.reveal {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 6;
  width: 340px;
  padding: 19px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-reading);
  font-size: var(--text-reveal);
  line-height: 1.3;
}

.doors {
  padding-top: var(--section-space);
  padding-bottom: 130px;
  border-top: 1px solid var(--line);
}
.section-heading--wide {
  max-width: 1040px;
}
.door-list {
  border-top: 1px solid var(--ink);
}
.door {
  display: grid;
  grid-template-columns: 150px 1fr 340px auto;
  gap: var(--space-5);
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--ink);
  transition:
    background-color 180ms ease,
    padding 180ms ease;
}
.door:hover {
  padding-right: 14px;
  padding-left: 14px;
  background: var(--paper-deep);
}
.door__eyebrow,
.door__status {
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.door h3 {
  margin-bottom: 0;
  font-size: var(--text-door);
}
.door__hook {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-body);
  line-height: 1.35;
}
.doors__note {
  max-width: 460px;
  margin: 42px 0 0 auto;
  font-family: var(--font-reading);
  font-size: var(--text-note);
  line-height: 1.4;
}

.about {
  display: grid;
  grid-template-columns: 180px 1fr 420px;
  gap: 38px;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  border-top: 1px solid var(--ink);
}
.about .kicker {
  margin-top: 9px;
}
.about__reading {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-reading);
  line-height: 1.55;
}
.about__rule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.15em;
}
.about__rule span {
  padding: 9px 11px;
  border: 1px solid var(--ink);
}
.about__rule span:nth-child(2) {
  margin-left: 26px;
  color: var(--paper);
  background: var(--ink);
}
.about__rule span:nth-child(3) {
  margin-left: var(--space-2);
  background: var(--gold);
}

.grown-ups {
  display: grid;
  grid-template-columns: 160px 1fr 370px;
  gap: var(--space-7);
  align-items: start;
  padding-top: 110px;
  padding-bottom: 110px;
  color: var(--paper);
  background: var(--ink);
}
.grown-ups__stamp {
  display: grid;
  width: 124px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  text-align: center;
  font-size: var(--text-stamp);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.15em;
  line-height: 1.45;
  transform: rotate(-12deg);
}
.grown-ups .kicker {
  color: var(--gold);
}
.grown-ups h2 {
  max-width: 780px;
}
.grown-ups p:last-child {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-grown-ups);
  line-height: var(--line-body);
}

.site-footer {
  display: flex;
  max-width: var(--max);
  min-height: 64px;
  padding: var(--space-5) var(--page-gutter);
  margin: 0 auto;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  color: rgba(23, 23, 23, 0.62);
  border-top: 2px solid var(--signal);
  font-size: var(--text-kicker);
  text-align: center;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: inherit;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.08em;
}
.site-footer__links > span:first-child {
  color: var(--ink);
}
.site-footer__links a {
  color: inherit;
  text-underline-offset: 3px;
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--signal);
}
.site-footer__pending {
  color: rgba(23, 23, 23, 0.55);
}
.site-footer__divider {
  width: 1px;
  height: 12px;
  background: var(--line);
}
.site-footer > p {
  margin: 0;
  font-size: inherit;
}

.persistent-controls {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.language-toggle,
.whatsapp-support-button {
  pointer-events: auto;
}
.language-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
}
.language-toggle__option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font: var(--weight-heavy) var(--text-toggle) / 1 var(--font-ui);
  letter-spacing: 0.1em;
  cursor: pointer;
}
.language-toggle__option[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
}
.language-toggle__flag {
  display: inline-flex;
  width: 18px;
  height: 12px;
  color: var(--ink);
}
.language-toggle__flag svg {
  width: 100%;
  height: 100%;
}
.whatsapp-support-button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  color: #fff;
  background: #25d366;
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none;
  transition:
    transform 180ms ease,
    background-color 180ms ease;
}
.whatsapp-support-button:hover {
  background: #1fbd5a;
  transform: translate(-1px, -1px);
}
.whatsapp-support-button svg {
  width: 24px;
  height: 24px;
}
.whatsapp-support-button.is-unconfigured {
  cursor: not-allowed;
  background: #8e9a8a;
}
.whatsapp-support-button.is-unconfigured:hover {
  background: #8e9a8a;
  transform: none;
}

/* Tablet: 767px through 1199px. Laptop/desktop values remain the :root default. */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --text-h1: 54px;
    --text-h2: 40px;
    --text-h3: 29px;
    --text-hero: 57px;
    --text-logo: 50px;
    --text-logo-footer: 110px;
    --brand-lockup-width: 120px;
    --text-reading-large: 26px;
    --text-door: 48px;
    --page-gutter: 40px;
    --section-space: 96px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: var(--space-9);
    padding-bottom: var(--space-10);
  }
  .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .hero__image {
    max-width: 720px;
    max-height: 390px;
    margin-bottom: var(--space-6);
  }
  .hero__scene {
    max-width: 680px;
    min-height: 440px;
  }
  .invitation {
    grid-template-columns: 1fr;
  }
  .invitation__loop {
    flex-wrap: wrap;
  }
  .about {
    grid-template-columns: 130px 1fr;
  }
  .about__reading {
    grid-column: 2;
  }
  .about__rule {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .grown-ups {
    grid-template-columns: 120px 1fr;
  }
  .grown-ups p:last-child {
    grid-column: 2;
  }
  .door {
    grid-template-columns: 130px 1fr 260px auto;
  }
}

/* Mobile: below 767px. */
@media (max-width: 767px) {
  :root {
    --text-kicker: 9px;
    --text-label: 11px;
    --text-body: 16px;
    --text-reading: 19px;
    --text-reading-large: 23px;
    --text-reveal: 19px;
    --text-door: 40px;
    --text-h6: 15px;
    --text-h5: 18px;
    --text-h4: 20.5px;
    --text-h3: 26px;
    --text-h2: 34px;
    --text-h1: 44px;
    --text-hero: 48px;
    --text-logo: 36px;
    --text-logo-footer: 88px;
    --brand-lockup-width: 96px;
    --page-gutter: 20px;
    --section-space: 72px;
    --flags-tray-mobile-height: 180px;
  }

  .site-header__shell {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-3);
  }
  .brand {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
  }
  nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    min-width: 0;
    margin-left: auto;
    font-size: var(--text-label);
  }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    min-height: auto;
    padding-top: 42px;
    padding-bottom: var(--space-10);
  }
  .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .hero__image {
    max-width: 720px;
    max-height: 390px;
    margin-bottom: var(--space-6);
  }
  .app-house {
    padding-top: var(--section-space);
  }
  .shelf-book__cover {
    min-height: 230px;
    padding: var(--space-4);
  }
  .app-page .site-header,
  .app-library-page .site-header,
  .app-account-page .site-header {
    position: sticky;
    z-index: 12;
    height: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .app-page .site-header__shell,
  .app-library-page .site-header__shell,
  .app-account-page .site-header__shell {
    padding: var(--space-4) var(--page-gutter);
    align-items: center;
    flex-direction: row;
  }
  .app-page .persistent-controls {
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    flex-direction: row;
    align-items: center;
  }
  .app-feature {
    max-width: none;
  }
  .app-feature__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    max-width: none;
  }
  .app-feature__cover {
    min-height: 0;
  }
  .book-carousel {
    display: flex;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
  }
  .book-carousel .shelf-book {
    flex-basis: 148px;
  }
  .shelf-book__cover {
    min-height: 0;
  }
  .app-header {
    min-height: 64px;
  }
  .app-header .brand__image {
    width: 112px;
  }
  .app-library,
  .app-account {
    min-height: calc(100vh - 65px);
  }
  .app-library__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .flags-book__page-copy {
    top: var(--space-4);
    left: var(--space-4);
    max-width: 250px;
    padding: var(--space-3);
  }
  .flags-book__page-copy h1,
  .flags-book__page-copy h2,
  .flags-book__future-copy h2 {
    font-size: var(--text-h4);
  }
  .flags-book__page-copy > p:last-child,
  .flags-book__future-copy > p:last-child {
    font-size: var(--text-body);
  }
  .flags-book__future-copy {
    padding: var(--space-6);
    box-shadow: 5px 5px 0 var(--flags-ink);
  }
  .flags-book-page {
    min-height: 100dvh;
    height: 100dvh;
  }
  .flags-book {
    height: calc(100dvh - var(--flags-tray-mobile-height));
  }
  .flags-book__tray {
    height: var(--flags-tray-mobile-height);
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
  }
  .flags-book__tray-title {
    display: flex;
    width: auto;
    align-items: center;
  }
  .flags-book__flag-list {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 0 var(--space-1);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .flags-book__flag {
    grid-template-columns: 1fr;
    width: 100%;
    text-align: center;
  }
  .flags-book__navigation {
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .flags-book__exit {
    top: var(--space-4);
    right: var(--space-4);
  }
  .persistent-controls.flags-book__controls {
    right: auto;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    left: var(--space-4);
  }
  .flags-book__navigation {
    bottom: calc(
      var(--flags-tray-mobile-height) + var(--space-4) +
        env(safe-area-inset-bottom)
    );
  }
  .persistent-controls.flags-book__controls {
    bottom: calc(
      var(--flags-tray-mobile-height) + var(--space-4) +
        env(safe-area-inset-bottom)
    );
  }
  .hero__copy,
  .hero__scene {
    min-width: 0;
  }
  .hero__scene {
    width: 100%;
    min-height: 365px;
  }
  .invitation {
    grid-template-columns: minmax(0, 1fr);
  }
  .scene-window {
    width: 48%;
  }
  .wonder-field {
    min-height: 500px;
  }
  .orb--one {
    width: 75vw;
  }
  .orb--two {
    width: 45vw;
  }
  .orb--three {
    right: 18%;
  }
  .reveal {
    top: auto;
    right: var(--space-5);
    bottom: 70px;
    left: var(--space-5);
    width: auto;
  }
  .door {
    grid-template-columns: 1fr auto;
    gap: 14px;
  }
  .door__eyebrow,
  .door__hook {
    grid-column: 1 / -1;
  }
  .doors__note {
    margin-left: 0;
  }
  .about {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .about__reading,
  .about__rule {
    grid-column: auto;
  }
  .grown-ups {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .grown-ups p:last-child {
    grid-column: auto;
  }
  .site-footer__links {
    gap: var(--space-2) var(--space-3);
  }
  .persistent-controls {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }
}

/* Aku tahu namanya: Room-owned six-page touch-and-find book. */
.name-it-page {
  min-height: 100dvh;
  margin: 0;
  background: transparent;
}
.name-it-book {
  --name-ink: #2e2a27;
  --name-coral: #e57c68;
  --name-gold: #f1bd3d;
  display: grid;
  min-height: 100dvh;
  padding: var(--space-5) var(--page-gutter) calc(var(--space-7) + 44px);
  color: var(--name-ink);
  background: transparent;
  font-family: var(--font-play);
  outline: none;
  align-content: space-between;
}
.name-it-book:focus-visible {
  outline: 3px solid var(--name-ink);
  outline-offset: -3px;
}
.name-it-book__header,
.name-it-book__footer {
  width: min(100%, 1060px);
  margin-inline: auto;
}
.name-it-book__header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.name-it-book__exit,
.name-it-book__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--name-ink);
  color: var(--name-ink);
  background: #fff;
  cursor: pointer;
}
.name-it-book__exit {
  justify-self: start;
  gap: var(--space-2);
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  box-shadow: 3px 3px 0 var(--name-ink);
  font-family: var(--font-play);
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
}
.name-it-book__exit svg { width: 20px; height: 20px; }
.name-it-book__exit:hover,
.name-it-book__arrow:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--name-ink); }
.name-it-book__count {
  margin: 0;
  font-family: var(--font-play);
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-kicker);
}
.name-it-book__count {
  justify-self: end;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--name-ink);
  background: #fff;
}
.name-it-book__page { width: min(100%, 1060px); margin-inline: auto; }
.name-it-book__art {
  position: relative;
  isolation: isolate;
  height: calc(100dvh - 290px);
  min-height: 460px;
  max-height: 640px;
}
.name-it-book__background {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  object-fit: cover;
  object-position: center center;
  filter: blur(7px) saturate(.86);
  pointer-events: none;
  transform: scale(1.03);
}
.name-it-book__object {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30%;
  height: 47%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  animation: name-it-float 5.4s ease-in-out infinite;
  transform: rotate(var(--name-rotate));
}
.name-it-book__object img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.name-it-book__object--top { top: 0; left: 35%; --name-rotate: -2deg; animation-delay: -1.2s; }
.name-it-book__object--left { bottom: -12%; left: 5%; height: 59%; --name-rotate: 2deg; animation-delay: -3.7s; }
.name-it-book__object--right { right: 5%; bottom: -12%; height: 59%; --name-rotate: -3deg; animation-delay: -2.4s; }
.name-it-book__object:focus-visible { outline: 4px solid var(--name-ink); outline-offset: 4px; border-radius: 50%; }
.name-it-book__object.is-not-this { animation: name-it-nudge 650ms ease-in-out; }
.name-it-book__object.is-found {
  z-index: 3;
  pointer-events: none;
  animation: name-it-answer-reveal 760ms cubic-bezier(.22, .8, .28, 1) forwards;
}
.name-it-book__object.is-decoy {
  z-index: 2;
  pointer-events: none;
  animation: name-it-decoy-reveal 760ms cubic-bezier(.22, .8, .28, 1) forwards;
}
.name-it-book__footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}
.name-it-book__target {
  position: relative;
  grid-column: 1 / -1;
  z-index: 1;
  justify-self: center;
  margin: 0 0 var(--space-2);
  min-width: 220px;
  padding: var(--space-3) var(--space-7);
  border: 3px solid var(--name-ink);
  box-shadow: 5px 5px 0 var(--name-ink);
  background: #f2c24d;
  font-family: var(--font-play);
  font-size: var(--text-h3);
  line-height: var(--line-heading);
  letter-spacing: 0;
  text-align: center;
}
.name-it-book__prompt {
  margin: 0;
  font-family: var(--font-play);
  font-size: var(--text-reading);
  text-align: left;
}
.name-it-book__footer-actions { display: flex; align-items: center; gap: var(--space-4); }
.name-it-book__navigation { display: flex; gap: var(--space-2); }
.name-it-book__arrow { width: 44px; height: 44px; box-shadow: 3px 3px 0 var(--name-ink); }
.name-it-book__arrow svg { width: 22px; height: 22px; }
.name-it-book__arrow:disabled { cursor: not-allowed; opacity: 0.38; box-shadow: none; transform: none; }
.name-it-book__controls { z-index: 5; }
@keyframes name-it-float { 0%, 100% { transform: translateY(0) rotate(var(--name-rotate)); } 50% { transform: translateY(-16px) rotate(calc(var(--name-rotate) + 2deg)); } }
@keyframes name-it-nudge { 0%, 100% { transform: translateX(0) rotate(var(--name-rotate)); } 30% { transform: translateX(-9px) rotate(var(--name-rotate)); } 70% { transform: translateX(9px) rotate(var(--name-rotate)); } }
@keyframes name-it-answer-reveal { from { transform: translate(0, 0) rotate(var(--name-rotate)) scale(1); filter: saturate(1); } to { transform: translate(var(--name-centre-x), var(--name-centre-y)) rotate(0deg) scale(1.28); filter: saturate(1.12) drop-shadow(0 0 8px var(--name-gold)); } }
@keyframes name-it-decoy-reveal { from { transform: translate(0, 0) rotate(var(--name-rotate)) scale(1); filter: saturate(1); opacity: 1; } to { transform: translate(var(--name-decoy-x), var(--name-decoy-y)) rotate(0deg) scale(.54); filter: saturate(.3); opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .name-it-book__object { animation: none; } .name-it-book__object.is-not-this { animation: none; } .name-it-book__object.is-found { transform: translate(var(--name-centre-x), var(--name-centre-y)) scale(1.28); filter: saturate(1.12) drop-shadow(0 0 8px var(--name-gold)); } .name-it-book__object.is-decoy { transform: translate(var(--name-decoy-x), var(--name-decoy-y)) scale(.54); filter: saturate(.3); opacity: .62; } }
@media (max-width: 767px) {
  .name-it-book { padding: var(--space-3) var(--space-3) calc(var(--space-7) + 48px); }
  .name-it-book__header { grid-template-columns: 1fr auto; gap: var(--space-2); }
  .name-it-book__exit { min-height: 36px; padding: var(--space-1) var(--space-2); }
  .name-it-book__exit span { display: none; }
  .name-it-book__count { padding: var(--space-1) var(--space-2); }
  .name-it-book__art { height: 450px; min-height: 0; }
  .name-it-book__background { object-position: left center; }
  .name-it-book__object { width: 42%; height: 42%; }
  .name-it-book__object--top { left: 29%; }
  .name-it-book__object--left { bottom: -14%; left: 0; height: 57%; }
  .name-it-book__object--right { right: 0; bottom: -14%; height: 57%; }
  .name-it-book__footer { grid-template-columns: minmax(0, 1fr) auto; margin-top: var(--space-4); }
  .name-it-book__target { min-width: 250px; padding: var(--space-4) var(--space-7); font-size: var(--text-h4); }
  .name-it-book__prompt { font-size: var(--text-reading-small); text-align: left; }
  .name-it-book__arrow { width: 40px; height: 40px; }
}

.draw-line-page {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: #9dc9df;
}
.draw-line-book {
  --draw-ink: #243028;
  --draw-paper: #fffdf7;
  --draw-green: #216d60;
  --draw-gold: #ffc64d;
  --draw-pink: #f58c90;
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  padding: var(--space-5);
  color: var(--draw-ink);
  background:
    radial-gradient(circle at 12% 90%, rgba(255, 255, 255, 0.45) 0 8%, transparent 8.2%),
    radial-gradient(circle at 91% 16%, rgba(255, 255, 255, 0.35) 0 6%, transparent 6.2%),
    #9dc9df;
  font-family: var(--font-play);
  outline: none;
}
.draw-line-book:focus-visible {
  outline: 3px solid var(--draw-ink);
  outline-offset: -3px;
}
.draw-line-book__header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) minmax(140px, 1fr);
  align-items: start;
  gap: var(--space-4);
  max-width: 1280px;
  margin: 0 auto var(--space-4);
  min-height: 72px;
}
.draw-line-book__heading {
  text-align: center;
  margin-top: var(--space-2);
}
.draw-line-book__heading h1 {
  margin: 0;
  font-family: var(--font-play);
  font-size: var(--text-h3);
  line-height: var(--line-heading);
  letter-spacing: 0;
}
.draw-line-book__exit,
.draw-line-book__reset {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--draw-ink);
  border-radius: 0;
  color: var(--draw-ink);
  background: var(--draw-paper);
  box-shadow: 3px 3px 0 var(--draw-ink);
  font: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  cursor: pointer;
}
.draw-line-book__exit svg,
.draw-line-book__reset svg {
  width: 20px;
  height: 20px;
}
.draw-line-book__exit:hover,
.draw-line-book__reset:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--draw-ink);
}
.draw-line-book__progress {
  justify-self: end;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--draw-ink);
  background: var(--draw-gold);
  box-shadow: 3px 3px 0 var(--draw-ink);
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
}
.draw-line-book__header .draw-line-book__reset {
  justify-self: end;
}
.draw-line-book__footer .draw-line-book__progress {
  justify-self: start;
}
.draw-line-book__board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 15%;
  box-sizing: border-box;
  width: min(100%, 1280px);
  min-height: min(77vh, 1100px);
  margin: 0 auto;
  padding: var(--space-8) 10%;
  overflow: hidden;
  border: 2px solid var(--draw-ink);
  background: var(--draw-paper);
  box-shadow: 8px 8px 0 rgba(36, 48, 40, 0.75);
  touch-action: none;
}
.draw-line-book__board[hidden] {
  display: none;
}
.draw-line-book__board::before {
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(36, 48, 40, 0.24);
  content: "";
  pointer-events: none;
}
.draw-line-book__lines {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.draw-line-book__line {
  fill: none;
  stroke: var(--draw-gold);
  stroke-linecap: round;
  stroke-width: 13;
  filter: drop-shadow(0 0 5px rgba(255, 198, 77, 0.78));
}
.draw-line-book__line::after {
  content: "";
}
.draw-line-book__line.is-dragging {
  stroke: var(--draw-pink);
  stroke-dasharray: 2 18;
  stroke-width: 11;
  animation: draw-line-spark 720ms linear infinite;
}
.draw-line-book__line.is-locked {
  stroke-dasharray: 2 16;
  animation: draw-line-spark 1100ms linear infinite;
}
.draw-line-book__line.is-returning {
  animation: draw-line-return 520ms ease-in forwards;
}
.draw-line-book__board--jam .draw-line-book__line,
.draw-line-book__board--jam .draw-line-book__line.is-dragging,
.draw-line-book__board--jam .draw-line-book__line.is-locked {
  stroke: var(--draw-line-colour, #b04462);
  stroke-dasharray: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 18;
  filter:
    drop-shadow(0 3px 0 rgba(104, 43, 53, 0.28))
    drop-shadow(0 0 7px rgba(255, 173, 185, 0.62));
  animation: none;
}
.draw-line-book__board--jam .draw-line-book__line.is-dragging {
  opacity: 0.82;
}
.draw-line-book__board--jam .draw-line-book__line.is-returning {
  animation: draw-line-return 520ms ease-in forwards;
}
.draw-line-book__line-glow {
  display: none;
  fill: none;
  pointer-events: none;
}
.draw-line-book__board--jam .draw-line-book__line-glow {
  display: block;
  stroke: rgba(255, 253, 235, 0.96);
  stroke-dasharray: 64 132;
  stroke-linecap: round;
  stroke-width: 7;
  filter: drop-shadow(0 0 8px rgba(255, 244, 207, 1));
  animation: draw-line-liquid-glow 1000ms linear infinite;
}
.draw-line-book__board--jam .draw-line-book__line-glow.is-returning {
  animation: draw-line-return 520ms ease-in forwards;
}
.draw-line-book__column {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}
.draw-line-book__column--source {
  align-items: flex-start;
}
.draw-line-book__column--target {
  align-items: flex-end;
}
.draw-line-book__item {
  position: relative;
  display: grid;
  width: 78px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}
.draw-line-book__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.draw-line-book__item--pumpkin {
  width: 94px;
  height: 76px;
}
.draw-line-book__item--leaf,
.draw-line-book__item--lettuce {
  width: 88px;
  height: 66px;
}
.draw-line-book__item--eggplant {
  width: 84px;
  height: 70px;
}
.draw-line-book__item--jar {
  width: 82px;
  height: 78px;
}
.draw-line-book__item--fruit {
  width: 78px;
  height: 72px;
}
.draw-line-book__board--animals .draw-line-book__item--animal {
  width: 122px;
  height: 104px;
}
.draw-line-book__board--animals .draw-line-book__column {
  justify-content: space-around;
}
.draw-line-book__item:focus-visible {
  outline: 3px solid var(--draw-green);
  outline-offset: 4px;
}
.draw-line-book__item.is-selected,
.draw-line-book__item.is-hovered {
  transform: scale(1.08);
}
.draw-line-book__item.is-selected::after,
.draw-line-book__item.is-hovered::after {
  position: absolute;
  inset: -8px;
  border: 2px dashed var(--draw-pink);
  border-radius: 50%;
  content: "";
}
.draw-line-book__item.is-ready:not(.is-hovered) {
  animation: draw-line-breathe 1.7s ease-in-out infinite;
}
.draw-line-book__item.is-complete {
  cursor: default;
  animation: none;
  opacity: 0.88;
}
.draw-line-book__item.is-rejected {
  animation: draw-line-shake 360ms ease-in-out;
}
.draw-line-book__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  width: min(100%, 1280px);
  margin: var(--space-4) auto 0;
}
.draw-line-book__navigation {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  align-items: center;
}
.draw-line-book__arrow {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--draw-ink);
  border-radius: 0;
  color: var(--draw-ink);
  background: var(--draw-paper);
  cursor: pointer;
  place-items: center;
}
.draw-line-book__arrow svg {
  width: 21px;
  height: 21px;
}
.draw-line-book__arrow:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.draw-line-book__count {
  min-width: 42px;
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  text-align: center;
}
.draw-line-book__instruction {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 680px;
  margin: 0;
  font-family: var(--font-play);
  font-size: var(--text-reading);
  line-height: var(--line-reading);
  text-align: center;
}
.draw-line-book__controls {
  z-index: 5;
}
@keyframes draw-line-spark {
  to { stroke-dashoffset: -36; }
}
@keyframes draw-line-return {
  to { stroke-dashoffset: 54; opacity: 0; }
}
@keyframes draw-line-liquid-glow {
  to { stroke-dashoffset: -196; }
}
@keyframes draw-line-breathe {
  50% { transform: scale(1.045); }
}
@keyframes draw-line-shake {
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
@media (max-width: 767px) {
  .draw-line-book {
    min-height: 100dvh;
    padding: var(--space-3) var(--space-3) calc(var(--space-7) + 56px);
  }
  .draw-line-book__header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    min-height: 40px;
  }
  .draw-line-book__heading h1 {
    font-size: var(--text-h5);
  }
  .draw-line-book__exit {
    min-height: 36px;
    padding: var(--space-1) var(--space-2);
  }
  .draw-line-book__exit span {
    display: none;
  }
  .draw-line-book__progress {
    padding: var(--space-1) var(--space-2);
  }
  .draw-line-book__board {
    min-height: 72vh;
    padding: var(--space-6) 10%;
    gap: 7%;
    box-shadow: 5px 5px 0 rgba(36, 48, 40, 0.75);
  }
  .draw-line-book__line {
    stroke-width: 9;
  }
  .draw-line-book__line.is-dragging {
    stroke-width: 8;
  }
  .draw-line-book__footer {
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    margin-top: var(--space-3);
  }
  .draw-line-book__navigation {
    justify-self: end;
  }
  .draw-line-book__instruction {
    font-size: var(--text-reading-small);
  }
  .draw-line-book__reset {
    flex: 0 0 auto;
    min-height: 36px;
    padding: var(--space-1) var(--space-2);
  }
  .draw-line-book__reset span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .draw-line-book *,
  .draw-line-book *::before,
  .draw-line-book *::after {
    scroll-behavior: auto;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (min-width: 768px) {
  .flags-book__tray {
    top: var(--space-5);
    right: var(--space-5);
    bottom: var(--space-5);
    left: auto;
    width: 154px;
    max-height: none;
    padding: var(--space-3);
    align-items: stretch;
    flex-direction: column;
    border: 1px solid var(--flags-ink);
    box-shadow: 4px 4px 0 rgba(16, 40, 61, 0.24);
  }
  .flags-book__tray-header {
    display: contents;
  }
  .flags-book__tray-title {
    width: auto;
  }
  .flags-book__tray-title {
    order: 1;
  }
  .flags-book__flag-list {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    order: 2;
    grid-template-columns: 1fr;
    padding: 0 var(--space-1) var(--space-1) 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .flags-book__flag {
    width: 100%;
  }
  .flags-book__reset {
    position: static;
    width: 100%;
    order: 3;
  }
  .flags-book__navigation {
    right: calc(154px + var(--space-10));
    bottom: var(--space-5);
  }
  .flags-book__exit {
    right: calc(154px + var(--space-10));
  }
  .persistent-controls.flags-book__controls {
    bottom: var(--space-5);
    left: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Internal component gallery: local review surface only. */
.gallery-header__note {
  margin: 0;
  align-self: center;
  font-size: var(--text-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-label);
}
.component-gallery {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--page-gutter) var(--section-space);
}
.gallery-intro {
  max-width: 1000px;
  padding: var(--section-space) 0;
  border-bottom: 1px solid var(--ink);
}
.gallery-intro h1 {
  max-width: 960px;
  font-size: var(--text-hero);
}
.gallery-section {
  padding: var(--section-space) 0 0;
}
.gallery-section__heading {
  max-width: 760px;
  margin-bottom: var(--space-7);
}
.gallery-section__heading h2 {
  margin-bottom: 0;
}
.gallery-panel {
  padding: var(--space-7);
  border: 1px solid var(--ink);
  background: var(--paper-deep);
}
.gallery-type-samples h3 {
  max-width: 740px;
  font-family: var(--font-reading);
  font-size: var(--text-h2);
}
.gallery-reading {
  max-width: 660px;
  font-family: var(--font-ui);
  font-size: var(--text-reading-large);
  line-height: var(--line-reading);
}
.gallery-palette {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.palette-swatch {
  min-width: 0;
  padding: var(--space-3);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.palette-swatch__colour {
  display: block;
  min-height: 150px;
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-5);
  border-bottom: 1px solid var(--ink);
}
.palette-swatch h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-h5);
}
.palette-swatch p {
  margin: 0;
  font-size: var(--text-label);
  line-height: 1.5;
}
.palette-swatch code {
  font: inherit;
  font-weight: var(--weight-heavy);
}
.palette-swatch--ink .palette-swatch__colour {
  background: var(--ink);
}
.palette-swatch--paper .palette-swatch__colour {
  background: var(--paper);
}
.palette-swatch--paper-deep .palette-swatch__colour {
  background: var(--paper-deep);
}
.palette-swatch--white .palette-swatch__colour {
  background: var(--white);
}
.palette-swatch--signal .palette-swatch__colour {
  background: var(--signal);
}
.palette-swatch--sky .palette-swatch__colour {
  background: var(--sky);
}
.palette-swatch--water .palette-swatch__colour {
  background: var(--water);
}
.palette-swatch--leaf .palette-swatch__colour {
  background: var(--leaf);
}
.palette-swatch--gold .palette-swatch__colour {
  background: var(--gold);
}
.gallery-palette__note {
  max-width: 600px;
  margin: var(--space-5) 0 0 auto;
  font-family: var(--font-reading);
  font-size: var(--text-reading);
  line-height: var(--line-reading);
}
.gallery-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.gallery-point {
  position: static;
  margin: var(--space-4) 0 var(--space-5);
}
.gallery-reveal {
  max-width: 320px;
  padding: var(--space-5);
  border: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-reading);
  font-size: var(--text-reading);
}
.gallery-door-sample {
  padding-top: 0;
  padding-bottom: 0;
  background: var(--paper);
}
.gallery-controls-sample {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 140px;
  padding: var(--space-7);
  border: 1px solid var(--ink);
  background: var(--paper-deep);
  pointer-events: auto;
}
.gallery-controls-sample .whatsapp-support-button {
  position: static;
  pointer-events: none;
}
.gallery-scene-sample .hero__scene {
  min-height: 430px;
}
.gallery-invitation-sample {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gallery-invitation-sample .invitation {
  grid-template-columns: 1fr;
}
.gallery-invitation-sample .invitation__loop {
  flex-wrap: wrap;
}
.gallery-field-sample {
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}
.gallery-field-sample .wonder-field {
  min-height: 500px;
  border: 0;
}

@media (max-width: 767px) {
  .gallery-header__note {
    width: 100%;
    font-size: var(--text-kicker);
  }
  .gallery-intro h1 {
    font-size: var(--text-h1);
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .palette-swatch__colour {
    min-height: 104px;
  }
  .gallery-button-row {
    align-items: stretch;
    flex-direction: column;
  }
  .gallery-button-row .button {
    width: 100%;
  }
  .gallery-panel,
  .gallery-controls-sample {
    padding: var(--space-5);
  }
}