/* PustakaDongeng — tampilan website. Sunting berkas ini langsung.
   Aturan khusus ruang admin dan editor adegan ada di pustakadongeng-admin.css. */
/* style.css — aturan bersama */
@charset "UTF-8";
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.modal-open {
  overflow: hidden;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
a {
  color: inherit;
  text-decoration: none;
}
a,
button {
  touch-action: manipulation;
}
button {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h3 {
  line-height: 1.2;
}
em {
  font-weight: 400;
}
button {
  border: 0;
  background: none;
}
button svg,
a svg {
  flex-shrink: 0;
}
svg.icon {
  width: 21px;
  height: 21px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.container {
  margin-left: auto;
  margin-right: auto;
}
.section {
  padding-top: 86px;
  padding-bottom: 86px;
}
.section-bottom {
  padding-bottom: 95px;
}
.eyebrow {
  font: 600 10px/1.5 var(--sans);
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--green);
}
.eyebrow.muted {
  color: #7d826e;
  margin-bottom: 17px;
}
.text-link {
  padding: 0;
  color: var(--green);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 17px;
  line-height: 1.6;
}
.text-link .icon {
  width: 18px;
}
.text-link:hover,
a:hover {
  color: #8c653b;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  background: var(--green);
  color: #fffdf6;
  border: 1px solid var(--green);
  line-height: 1.5;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
.button:hover {
  background: var(--green-dark);
  color: #fff;
}
.button .icon {
  width: 17px;
  height: 17px;
}
.button-small {
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 4px;
}
.button-outline:hover {
  color: var(--green);
  background: #e9ecdf;
  box-shadow: none;
}
.button-cream {
  background: #f5eddc;
  color: var(--green);
  border-color: #f5eddc;
}
.button-cream:hover {
  color: var(--green);
  background: #fff8e9;
}
.button-full {
  width: 100%;
}
.icon-button {
  padding: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
}
.icon-button:hover {
  background: #e8eade;
}
.skip-link {
  position: fixed;
  left: 20px;
  top: -70px;
  background: var(--green);
  color: white;
  z-index: 100;
  padding: 12px;
}
.skip-link:focus {
  top: 10px;
}
:focus-visible {
  outline: 3px solid #bb8d4f;
  outline-offset: 5px;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 25px 0;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.site-header {
  position: relative;
  z-index: 20;
}
.header-inner {
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--green);
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -1.1px;
  line-height: 1.1;
  flex-shrink: 0;
}
.brand small {
  margin-top: 8px;
  font-weight: 500;
  color: #7d826e;
}
.brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-mark > .icon {
  width: 38px;
  height: 38px;
  stroke-width: 1.25;
}
.brand-mark i {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #bc9159;
  right: 5px;
  top: 0;
  transform: rotate(45deg);
}
.main-nav {
  display: flex;
  align-items: center;
  font-weight: 500;
  white-space: nowrap;
}
.main-nav > a:not(.button) {
  position: relative;
  padding: 12px 0;
}
.main-nav > a[aria-current="page"]:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
}
.nav-divider {
  height: 20px;
  width: 1px;
  background: var(--line);
  margin-left: 2px;
  margin-right: -7px;
}
.menu-toggle {
  display: none;
}
.hero {
  position: relative;
  min-height: 645px;
  height: min(730px, calc(100svh - 92px));
  overflow: hidden;
  isolation: isolate;
  background: #eae5d7;
}
.hero h1 {
  font-size: clamp(64px, 6vw, 88px);
  letter-spacing: -4px;
  line-height: 1.06;
  color: #293a2e;
  max-width: 640px;
}
.hero h1 em {
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 26px;
  align-items: center;
  margin-top: 31px;
}
.hero-actions .button {
  gap: 10px;
}
.hero-actions .button .icon {
  width: 14px;
  fill: currentColor;
  stroke-width: 0;
}
.caption-kicker {
  font-size: 8px;
  letter-spacing: 2px;
  color: #7d846f;
  font-weight: 600;
}
.scroll-hint {
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 9px;
}
.scroll-hint > span {
  font-size: 19px;
}
.story-card {
  background: #fffdf8;
  border: 1px solid #e3e3d8;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  overflow: hidden;
  border-radius: 6px;
  min-height: 354px;
}
.story-cover {
  padding: 0;
  position: relative;
  overflow: hidden;
  text-align: left;
  background: #cccbb3;
  isolation: isolate;
  display: block;
  min-height: 350px;
}
.story-cover:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, #173c2de6 0%, transparent 55%);
}
.story-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform 0.6s;
}
.story-cover:hover img {
  transform: scale(1.05);
}
.cover-label {
  position: absolute;
  top: 20px;
  left: 19px;
  letter-spacing: 1.5px;
  font-size: 7px;
  font-weight: 600;
  color: #f5eddb;
  padding: 6px 10px;
  border: 1px solid #ffffff60;
  border-radius: 3px;
  background: #2b412044;
}
.cover-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #f5f1d5b3;
  color: #fffaf0;
  background: #ffffff1a;
  position: absolute;
  left: calc(50% - 23px);
  top: calc(50% - 23px);
  backdrop-filter: blur(3px);
}
.cover-play .icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke-width: 0;
  margin-left: 2px;
}
.story-info {
  padding: 25px 27px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.story-tags {
  margin-bottom: 17px;
}
.story-tags span {
  font-size: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: #eaf0e4;
  color: #5f7358;
}
.story-tags span + span {
  background: #f1ede2;
  color: #8a7a5e;
}
.story-info h3 {
  font-size: 32px;
  line-height: 1.08;
  color: #2e4534;
  letter-spacing: -0.8px;
}
.story-info > p {
  font-size: 11px;
  line-height: 1.85;
  margin-top: 15px;
}
.story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  font-size: 8px;
  color: #7e8675;
  margin: 18px 0 22px;
}
.story-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.story-meta .icon {
  width: 12px;
  height: 12px;
}
.story-info > .text-link {
  font-size: 10px;
  margin-top: auto;
  gap: 15px;
}
.source-link {
  font-size: 8px;
  padding: 11px 0 0;
  color: #858b7c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.source-link .icon {
  width: 10px;
  height: 10px;
  margin-left: 5px;
}
.site-footer {
  padding: 38px 0 0;
}
.footer-top {
  display: flex;
  align-items: center;
  gap: 45px;
}
.footer-top .brand {
  font-size: 22px;
}
.footer-top .brand-mark .icon {
  width: 32px;
}
.footer-top .brand small {
  font-size: 6px;
  letter-spacing: 1.5px;
}
.footer-top p {
  font-size: 10px;
  line-height: 1.8;
  padding-left: 35px;
  border-left: 1px solid var(--line);
}
.footer-top nav {
  display: flex;
  gap: 24px;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 19px 0;
  display: flex;
  justify-content: space-between;
  color: #909482;
  letter-spacing: 0.2px;
}
.page-intro h1 {
  max-width: 1000px;
}
.page-intro > p {
  margin-top: 25px;
}
.page-intro > .button {
  margin-top: 30px;
}
.intro-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.intro-actions .text-link {
  margin-left: 12px;
}
.catalog-controls {
  padding-top: 18px;
  padding-bottom: 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.filter-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-right: auto;
}
.filter-tabs button {
  color: #77816b;
}
.filter-tabs button.active {
  font-weight: 600;
}
.filter-tabs span {
  font-size: 9px;
  margin-left: 7px;
  border-radius: 3px;
  padding: 1px 5px;
  background: #cfdcc3;
}
.search-box {
  display: flex;
  gap: 9px;
  align-items: center;
  border: 1px solid #d9dece;
  padding: 9px 13px;
}
.search-box .icon {
  width: 16px;
  color: #88927a;
}
.search-box input {
  width: 175px;
}
.region-select select {
  background: transparent;
  border: 1px solid #d9dece;
  padding: 11px 12px;
  border-radius: 4px;
  color: #65715c;
  font-size: 11px;
  min-height: 42px;
}
.result-count {
  margin: 23px 0;
}
.catalog-note {
  display: flex;
  gap: 17px;
  align-items: center;
  margin-top: 35px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.catalog-note > .icon {
  color: var(--gold);
  width: 25px;
  height: 25px;
}
.catalog-note strong {
  font-weight: 600;
  color: #526548;
}
.catalog-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.empty-state {
  text-align: center;
  background: #eeeee2;
  border-radius: 6px;
  padding: 65px 25px;
  min-height: 300px;
}
.empty-state > .icon {
  color: #6f8262;
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
}
.empty-state h3 {
  font-size: 30px;
}
.empty-state p {
  font-size: 13px;
  margin-top: 12px;
  margin-bottom: 20px;
}
.guide-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 70px;
  padding-top: 20px;
}
.guide-summary {
  background: #eceddf;
  padding: 29px 28px;
  border-radius: 5px;
  height: fit-content;
  position: sticky;
  top: 30px;
  font-size: 12px;
}
.guide-summary h3 {
  font-size: 28px;
  margin-bottom: 18px;
}
.guide-summary ul {
  padding-left: 17px;
  margin: 12px 0 22px;
  color: #6c7562;
}
.guide-summary li {
  margin-bottom: 10px;
}
.small-text {
  line-height: 1.9;
  color: #89917f;
}
.guide-steps article {
  padding: 0 0 33px;
  margin-bottom: 33px;
  border-bottom: 1px solid var(--line);
}
.guide-steps article > span {
  font-size: 11px;
  letter-spacing: 2px;
  color: #7c8d6c;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}
.guide-steps small {
  font-size: 8px;
  letter-spacing: 1.3px;
  color: #959a88;
}
.guide-steps h2 {
  font-size: 29px;
  margin-bottom: 20px;
}
.guide-steps p {
  line-height: 1.9;
  margin-bottom: 13px;
}
.guide-steps details {
  background: #efefe3;
  padding: 16px 20px;
  font-size: 12px;
  border-radius: 4px;
}
.guide-steps summary {
  cursor: pointer;
  color: var(--green);
  font-weight: 600;
}
.guide-steps ol {
  padding-left: 20px;
  color: #6f7c65;
}
.guide-steps li {
  margin-bottom: 12px;
}
.about-image img {
  width: 100%;
  height: 370px;
  object-fit: cover;
  object-position: center 58%;
  border-radius: 6px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
}
.about-grid h2 {
  font-size: 39px;
}
.about-grid p {
  font-size: 13px;
  line-height: 1.95;
  margin-bottom: 19px;
}
.account-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
  padding-top: 55px;
  padding-bottom: 75px;
}
.account-story {
  position: relative;
  min-height: 660px;
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate;
  height: 100%;
  max-height: 810px;
}
.account-story > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  object-position: 60% center;
}
.account-story:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #16392df5, transparent 100%);
  z-index: -1;
}
.account-story > div {
  position: absolute;
  bottom: 45px;
  left: 35px;
  right: 30px;
}
.account-story .eyebrow {
  color: #d6ddba;
  font-size: 8px;
}
.account-story h2 {
  color: #fff5e4;
  font-size: 37px;
  line-height: 1.2;
  margin-top: 19px;
}
.account-story h2 em {
  color: #e5d4ac;
}
.account-story p {
  color: #d7dfc8;
  font-size: 12px;
  margin-top: 20px;
  max-width: 320px;
}
.account-form {
  padding: 14px 0;
  max-width: 480px;
}
.account-form > p {
  font-size: 12px;
  margin-top: 17px;
}
.account-form form {
  margin-top: 28px;
}
.account-form > .small-text {
  margin-top: 20px;
}
.account-switch {
  text-align: center;
}
.account-switch a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
form label {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 17px;
  color: #58664f;
}
input:not([type="checkbox"]),
textarea,
select {
  border: 1px solid #d4dacb;
  background: #fcfbf6;
  border-radius: 4px;
  padding: 12px 13px;
  min-width: 0;
  color: #374e37;
}
input::placeholder,
textarea::placeholder {
  color: #9b9f91;
  font-weight: 400;
  font-size: 11px;
}
form input,
form select {
  min-height: 43px;
  font-weight: 400;
  font-size: 12px;
}
form textarea {
  resize: vertical;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 400;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.8;
  margin-top: 20px;
  margin-bottom: 23px;
}
.checkbox-label input {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin: 3px 0;
  accent-color: var(--green);
}
.checkbox-label a {
  text-decoration: underline;
  color: var(--green);
}
.notice {
  width: min(1130px, calc(100% - 80px));
  margin: 25px auto;
  padding: 18px 24px;
  border-radius: 5px;
  font-size: 12px;
}
.notice ul {
  padding-left: 20px;
  margin-bottom: 0;
}
.notice.error {
  background: #f5e6d8;
  border: 1px solid #dec3a9;
  color: #864d32;
}
.notice.success {
  background: #e6efdd;
  border: 1px solid #c0d0ae;
  color: var(--green);
}
.dashboard-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dashboard-intro p {
  margin-top: 23px;
}
.dashboard-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
}
.submission-form h2,
.draft-list h2 {
  font-size: 36px;
}
.submission-form > p {
  font-size: 12px;
  margin: 18px 0 30px;
}
.draft-list {
  background: #eeeee3;
  border-radius: 5px;
  padding: 32px;
  height: fit-content;
}
.draft-empty {
  padding: 35px 0;
}
.draft-empty > .icon {
  width: 30px;
  height: 30px;
  color: #849375;
}
.draft-empty p {
  font-size: 12px;
  margin-top: 15px;
}
.draft {
  padding: 20px 0;
  border-bottom: 1px solid #d7ddc9;
}
.draft h3 {
  font-size: 25px;
  margin-top: 9px;
  overflow-wrap: anywhere;
}
.draft p {
  font-size: 12px;
  margin-top: 8px;
}
.draft small {
  font-size: 9px;
  color: #8b947e;
}
.tag {
  font-size: 8px;
  padding: 4px 8px;
  background: #d7e3ca;
  color: #4c6b3c;
  border-radius: 3px;
}
.prose {
  max-width: 850px;
}
.prose h2 {
  font-size: 28px;
  margin: 20px 0 14px;
}
.prose p {
  line-height: 1.95;
  margin-bottom: 30px;
}
dialog {
  color: var(--ink);
  font-family: var(--sans);
}
dialog::backdrop {
  background: #132c23bf;
  backdrop-filter: blur(5px);
}
.player {
  position: fixed;
  inset: 0;
  margin: 0;
  border: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: #142b21;
  overflow: hidden;
  color: #fffdf3;
}
.player-stage {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.player-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  animation: story-drift 24s ease-out both;
}
.player-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    #0a2119f5 0%,
    #10291edb 16%,
    #15372880 51%,
    #0f2e1d2b 75%,
    #0f231a9c 100%
  );
  z-index: -2;
}
.player-header {
  display: flex;
  align-items: center;
  gap: 25px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 23px 38px;
  color: #f8f6e6;
  z-index: 2;
}
.player-brand {
  font-size: 18px;
  display: flex;
  align-items: center;
}
.player-brand > .icon {
  margin-right: 10px;
  stroke-width: 1.4;
}
.player-brand > span {
  font-family: var(--serif);
  font-weight: 400;
}
.player-story-title {
  font-size: 10px;
  color: #eeeeda9e;
  border-left: 1px solid #ffffff44;
  padding-left: 24px;
  letter-spacing: 0.5px;
}
.player-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.player-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f4f4e8;
  gap: 8px;
  padding: 10px;
  border: 1px solid #ffffff25;
  border-radius: 5px;
  min-height: 41px;
  font-size: 10px;
  background: #183a2a40;
  backdrop-filter: blur(6px);
}
.player-tool:hover,
.player-tool[aria-pressed="true"] {
  background: #f3eddc;
  color: #254d3d;
}
.player-tool .icon {
  width: 17px;
  height: 17px;
}
.player-content {
  max-width: 900px;
  width: 100%;
  padding: 115px 0 20px 7%;
  position: relative;
  margin-top: auto;
  max-height: calc(100% - 115px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d3d6bd60 transparent;
}
.player-content .eyebrow {
  color: #d9c795;
  font-size: 10px;
  margin-bottom: 19px;
}
.player-content h2 {
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.12;
  letter-spacing: -2px;
  color: #fff8e9;
  max-width: 760px;
  text-shadow: 0 2px 20px #091b1855;
}
.player-content > p {
  color: #f0f1dce3;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.9;
  max-width: 710px;
  margin-top: 23px;
  font-weight: 350;
  text-shadow: 0 1px 8px #102a19;
}
.player-content .quiz-panel {
  max-width: 680px;
  padding: 26px 30px 25px;
  border: 1px solid #ffffff50;
  border-radius: 9px;
  background: #faf7edfa;
  box-shadow: 0 8px 40px #102a1980;
  color: var(--ink);
}
.quiz-panel .eyebrow {
  color: #8e7755;
  margin-bottom: 13px;
  font-size: 9px;
}
.quiz-panel h2 {
  font-size: 32px;
  text-shadow: none;
  color: #2e4835;
  letter-spacing: -0.9px;
}
.quiz-panel > p {
  font-size: 14px;
  color: #6c7762;
  margin-top: 13px;
  line-height: 1.7;
}
.quiz-options {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #d9dfcf;
  background: #fffdf7;
  padding: 13px 15px;
  border-radius: 5px;
  text-align: left;
  font-size: 13px;
  line-height: 1.55;
  color: #4e6045;
  transition: background 0.2s;
}
.quiz-option:hover {
  background: #ebefdf;
  border-color: #8ba27b;
}
.quiz-option > span {
  width: 26px;
  height: 26px;
  border: 1px solid #dce1d0;
  border-radius: 50%;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quiz-option.correct {
  background: #e0ebd6;
  border-color: #7e9f6c;
  color: #35542b;
}
.quiz-option.incorrect {
  background: #f1e7d4;
  border-color: #c8a477;
}
.quiz-feedback {
  font-size: 12px;
  line-height: 1.8;
  color: #536a41;
  margin-top: 17px;
  min-height: 22px;
}
.class-hint {
  max-width: 820px;
  margin: 0 0 15px 7%;
  background: #f5eddaef;
  color: #4e6044;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 14px 19px;
  border-radius: 5px;
  flex-shrink: 0;
}
.class-hint > .icon {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
.class-hint strong {
  font-size: 8px;
  letter-spacing: 1.2px;
}
.class-hint p {
  font-size: 11px;
  margin-top: 5px;
  line-height: 1.7;
  color: #67725a;
}
.player-footer {
  padding: 20px 38px 25px;
  flex-shrink: 0;
  margin-top: 10px;
}
.player-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.progress-segment {
  height: 3px;
  background: #ffffff30;
  flex: 1;
  border-radius: 3px;
}
.progress-segment.done {
  background: #b8c494;
}
.progress-segment.current {
  background: #f0d5a0;
}
.player-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.prev-button {
  border-color: transparent;
  background: none;
  padding-left: 0;
}
.prev-button > .icon {
  transform: rotate(180deg);
}
.scene-count {
  font-size: 10px;
  letter-spacing: 2px;
  color: #d9deba;
}
.player-next-group {
  display: flex;
  align-items: center;
  gap: 24px;
}
.player-next-group > .button {
  min-height: 43px;
  min-width: 140px;
  font-size: 11px;
  padding: 12px 18px;
}
.gesture-hint {
  font-size: 9px;
  color: #e0e2cd90;
}
.ending-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}
.ending-tags span {
  font-size: 10px;
  padding: 5px 11px;
  border: 1px solid #d1d9b950;
  border-radius: 20px;
  color: #dee6c9;
}
.reflection-label {
  font-size: 12px;
  color: #e0e5ce;
  display: block;
  margin-top: 18px;
}
.reflection-input {
  display: block;
  width: min(100%, 620px);
  background: #ffffff0d !important;
  border-color: #b4c39b65 !important;
  border-radius: 5px;
  color: #fff8e8 !important;
  font-size: 13px;
  padding: 12px 16px;
  margin-top: 8px;
  resize: vertical;
  max-height: 130px;
  min-height: 75px;
}
.reflection-input::placeholder {
  color: #d4d9c5a6;
  font-size: 12px;
}
.reflection-status {
  font-size: 9px;
  color: #c9d6af;
  margin-top: 6px;
}
.ending-actions {
  display: flex;
  gap: 19px;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0 5px;
}
.ending-actions button,
.ending-actions a {
  font-size: 11px;
  color: #eee9d5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #d3ddba40;
}
.ending-actions .icon {
  width: 14px;
  height: 14px;
}
.reset-progress {
  font-size: 9px;
  color: #d8dbbba6;
  padding: 12px 0;
  margin-top: 5px;
}
.player.class-mode .player-content > p {
  font-size: clamp(18px, 1.8vw, 24px);
  max-width: 820px;
}
.player.class-mode .player-content {
  max-width: 980px;
}
.sources-dialog {
  width: min(730px, calc(100% - 35px));
  max-height: 88dvh;
  background: var(--paper);
  border: 0;
  border-radius: 8px;
  padding: 43px 43px 33px;
  box-shadow: 0 10px 70px #102b2390;
}
.close-dialog {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #6e7b62;
}
.sources-dialog h2 {
  font-size: 38px;
}
.sources-dialog > p {
  font-size: 12px;
  margin-top: 20px;
  line-height: 1.9;
}
.source-list {
  margin-top: 25px;
}
.source-list article {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.source-list a {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.source-list a > .icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.source-list strong {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: #889276;
  margin-top: 7px;
}
.source-list p {
  font-size: 11px;
  line-height: 1.9;
  margin-top: 7px;
}
.source-ai {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #eceede;
  border-radius: 4px;
  padding: 18px;
  margin: 15px 0 25px;
}
.source-ai > .icon {
  width: 20px;
  color: #9c834e;
  flex-shrink: 0;
}
.source-ai p {
  font-size: 10px;
  line-height: 1.9;
  color: #738166;
}
.sources-dialog > .button {
  font-size: 11px;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  max-width: 90%;
  background: #f4eddc;
  color: var(--green);
  box-shadow: 0 5px 30px #0f302540;
  padding: 14px 22px;
  border-radius: 5px;
  z-index: 100;
  font-size: 12px;
}
@keyframes story-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}
@media (max-width: 1190px) {
  .brand {
    font-size: 23px;
  }
  .hero h1 {
    font-size: 76px;
  }
  .story-info {
    padding: 24px 20px;
  }
  .story-info h3 {
    font-size: 30px;
  }
  .story-info > p {
    font-size: 10px;
  }
  .story-meta {
    gap: 9px;
    font-size: 7px;
  }
  .account-layout {
    gap: 45px;
  }
  .guide-layout {
    gap: 40px;
    grid-template-columns: 260px 1fr;
  }
  .player-content {
    padding-left: 6%;
    max-width: 850px;
  }
  .class-hint {
    margin-left: 6%;
    max-width: 75%;
  }
}
@media (max-width: 950px) {
  .hero {
    height: 640px;
  }
  .hero h1 {
    font-size: 68px;
  }
  .story-card {
    min-height: 360px;
    grid-template-columns: 1.1fr 1fr;
  }
  .story-info {
    padding: 30px;
  }
  .story-info h3 {
    font-size: 36px;
  }
  .story-info > p {
    font-size: 12px;
  }
  .story-meta {
    font-size: 9px;
  }
  .story-info > .text-link {
    font-size: 12px;
  }
  .source-link {
    font-size: 9px;
  }
  .footer-top {
    gap: 20px;
  }
  .footer-top p {
    padding-left: 20px;
  }
  .footer-top nav {
    gap: 16px;
  }
  .account-layout {
    gap: 30px;
  }
  .account-story {
    min-height: 650px;
  }
  .account-story h2 {
    font-size: 30px;
  }
  .account-story > div {
    left: 25px;
    bottom: 30px;
    right: 20px;
  }
  .dashboard-layout {
    gap: 35px;
  }
  .player-header {
    padding: 20px 25px;
  }
  .player-story-title {
    display: none;
  }
  .player-content {
    padding-left: 6%;
    padding-right: 6%;
    max-height: calc(100% - 100px);
  }
  .player-content h2 {
    font-size: 48px;
  }
  .class-hint {
    margin-left: 6%;
    max-width: 88%;
  }
  .player-footer {
    padding-left: 25px;
    padding-right: 25px;
  }
  .gesture-hint {
    display: none;
  }
}
@media (max-width: 700px) {
  .brand {
    font-size: 24px;
  }
  .brand-mark > .icon {
    width: 34px;
  }
  .menu-toggle {
    display: flex;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #fbf9f3;
    padding: 19px 24px 25px;
    box-shadow: 0 12px 20px #1b3a2915;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    white-space: normal;
  }
  .main-nav.open {
    display: flex;
  }
  .main-nav > a {
    padding: 10px 4px !important;
  }
  .main-nav > a[aria-current="page"]:after {
    left: auto;
    right: 5px;
    bottom: 18px;
  }
  .main-nav .button {
    margin-top: 7px;
    min-height: 44px;
  }
  .hero {
    height: 775px;
    min-height: 0;
  }
  .hero h1 {
    font-size: 64px;
    letter-spacing: -3.2px;
    line-height: 1.05;
  }
  .hero-actions {
    gap: 20px;
    margin-top: 26px;
    align-items: center;
  }
  .hero-actions .button {
    min-height: 47px;
    font-size: 10px;
    padding: 12px 14px;
    gap: 8px;
  }
  .caption-kicker {
    font-size: 7px;
  }
  .scroll-hint {
    font-size: 7px;
    gap: 8px;
  }
  .scroll-hint > span {
    font-size: 16px;
  }
  .section {
    padding: 53px 0;
  }
  .section-bottom {
    padding-bottom: 55px;
  }
  .eyebrow.muted {
    font-size: 8px;
    letter-spacing: 1.8px;
    margin-bottom: 13px;
  }
  .story-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .story-cover {
    min-height: 260px;
  }
  .story-cover img {
    object-position: center 48%;
  }
  .cover-play {
    width: 47px;
    height: 47px;
  }
  .cover-label {
    font-size: 7px;
  }
  .story-info {
    padding: 25px 24px 22px;
  }
  .story-tags {
    margin-bottom: 15px;
  }
  .story-tags span {
    font-size: 8px;
  }
  .story-info h3 {
    font-size: 35px;
    line-height: 1.05;
  }
  .story-info h3 br {
    display: none;
  }
  .story-info > p {
    font-size: 12px;
    max-width: 330px;
  }
  .story-meta {
    font-size: 9px;
    margin: 18px 0;
  }
  .story-info > .text-link {
    font-size: 11px;
  }
  .source-link {
    font-size: 9px;
  }
  .footer-top {
    flex-wrap: wrap;
    gap: 23px;
  }
  .footer-top p {
    font-size: 9px;
    padding-left: 0;
    border: 0;
    flex-basis: 100%;
    order: 2;
  }
  .footer-top nav {
    gap: 15px;
    flex-basis: 100%;
    order: 3;
  }
  .footer-bottom {
    gap: 13px;
    align-items: flex-start;
  }
  .footer-bottom > span {
    max-width: 60%;
  }
  .footer-bottom > span + span {
    text-align: right;
  }
  .page-intro > p {
    margin-top: 22px;
  }
  .catalog-controls {
    padding-top: 15px;
    padding-bottom: 18px;
  }
  .filter-tabs {
    flex-basis: 100%;
    gap: 4px;
    margin-right: 0;
  }
  .search-box {
    flex: 1;
    padding: 8px 10px;
  }
  .search-box input {
    width: 100%;
    min-width: 0;
  }
  .region-select {
    width: 125px;
  }
  .region-select select {
    width: 100%;
    font-size: 9px;
    padding: 10px 8px;
    min-height: 39px;
  }
  .result-count {
    margin: 20px 0;
  }
  .catalog-note {
    font-size: 11px;
    align-items: flex-start;
    gap: 12px;
  }
  .catalog-note > .icon {
    width: 20px;
    height: 20px;
  }
  .intro-actions {
    gap: 12px;
    margin-top: 23px;
  }
  .intro-actions .button {
    font-size: 10px;
    min-height: 44px;
    padding: 11px 13px;
    gap: 8px;
  }
  .intro-actions .text-link {
    font-size: 10px;
    margin: 7px 0 0;
    flex-basis: 100%;
  }
  .guide-layout {
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding-top: 10px;
  }
  .guide-summary {
    position: static;
    padding: 25px;
  }
  .guide-summary h3 {
    font-size: 27px;
  }
  .guide-summary ul {
    margin-bottom: 12px;
  }
  .guide-steps h2 {
    font-size: 26px;
  }
  .guide-steps article {
    padding-bottom: 25px;
    margin-bottom: 25px;
  }
  .about-image img {
    height: 250px;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .about-grid h2 {
    font-size: 35px;
  }
  .about-grid p {
    font-size: 12px;
  }
  .account-layout {
    padding-top: 33px;
    padding-bottom: 45px;
    display: flex;
    flex-direction: column-reverse;
    gap: 35px;
  }
  .account-form {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .account-form > p {
    font-size: 12px;
  }
  .account-story {
    width: 100%;
    min-height: 330px;
    max-height: 330px;
  }
  .account-story h2 {
    font-size: 31px;
  }
  .account-story > div {
    bottom: 27px;
  }
  .account-story p {
    font-size: 11px;
  }
  .form-row {
    gap: 12px;
  }
  form label {
    font-size: 11px;
  }
  .checkbox-label {
    font-size: 10px;
  }
  .notice {
    width: calc(100% - 40px);
    font-size: 11px;
    margin-top: 20px;
    padding: 15px 18px;
  }
  .dashboard-intro {
    display: block;
  }
  .dashboard-intro form {
    margin-top: 25px;
  }
  .dashboard-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .submission-form h2,
  .draft-list h2 {
    font-size: 32px;
  }
  .draft-list {
    padding: 27px;
  }
  .prose h2 {
    font-size: 25px;
  }
  .player-header {
    padding: 13px 15px;
    gap: 10px;
  }
  .player-brand {
    font-size: 16px;
  }
  .player-brand > .icon {
    width: 19px;
    margin-right: 6px;
  }
  .player-tools {
    gap: 5px;
  }
  .player-tool {
    padding: 8px;
    min-height: 36px;
    gap: 5px;
  }
  .player-tool .icon {
    width: 16px;
    height: 16px;
  }
  .player-tools .player-tool > span {
    display: none;
  }
  .player-content {
    padding: 85px 23px 13px;
    max-height: calc(100% - 103px);
  }
  .player-content > .eyebrow {
    font-size: 8px;
    letter-spacing: 1.6px;
    margin-bottom: 16px;
  }
  .player-content h2 {
    font-size: 38px;
    letter-spacing: -1.3px;
    line-height: 1.17;
  }
  .player-content > p {
    font-size: 15px;
    line-height: 1.85;
    margin-top: 19px;
  }
  .player-image {
    object-position: 62% center;
  }
  .player-shade {
    background: linear-gradient(0deg, #0e251bf9 2%, #0e251be0 33%, #1937287d 68%, #10291e60 100%);
  }
  .player-footer {
    padding: 10px 18px 17px;
    margin-top: 2px;
  }
  .player-progress {
    gap: 4px;
    margin-bottom: 15px;
  }
  .player-bottom {
    gap: 7px;
  }
  .prev-button {
    font-size: 9px;
    gap: 4px;
    padding: 8px 0;
    min-height: 35px;
  }
  .prev-button > .icon {
    width: 15px;
  }
  .scene-count {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .player-next-group > .button {
    font-size: 10px;
    min-width: 112px;
    padding: 10px 12px;
    min-height: 39px;
    gap: 8px;
  }
  .player-next-group .button .icon {
    width: 15px;
  }
  .player-content .quiz-panel {
    padding: 22px 20px;
  }
  .quiz-panel h2 {
    font-size: 29px;
  }
  .quiz-panel .eyebrow {
    font-size: 8px;
    margin-bottom: 12px;
  }
  .quiz-panel > p {
    font-size: 13px;
    line-height: 1.7;
  }
  .quiz-options {
    gap: 9px;
    margin-top: 20px;
  }
  .quiz-option {
    font-size: 12px;
    padding: 11px;
    gap: 9px;
  }
  .quiz-option > span {
    width: 23px;
    height: 23px;
    font-size: 9px;
  }
  .quiz-feedback {
    font-size: 11px;
    line-height: 1.8;
    margin-top: 14px;
  }
  .class-hint {
    margin: 0 20px 10px;
    max-width: none;
    gap: 9px;
    padding: 11px 13px;
  }
  .class-hint > .icon {
    width: 16px;
  }
  .class-hint strong {
    font-size: 7px;
  }
  .class-hint p {
    font-size: 10px;
    line-height: 1.65;
  }
  .player.class-mode .player-content > p {
    font-size: 17px;
  }
  .player.class-mode .player-content {
    padding-top: 70px;
  }
  .ending-tags {
    gap: 6px;
    margin: 16px 0;
  }
  .ending-tags span {
    font-size: 8px;
    padding: 4px 8px;
  }
  .reflection-label {
    font-size: 11px;
    margin-top: 15px;
  }
  .reflection-input {
    font-size: 12px;
    min-height: 65px;
    max-height: 90px;
  }
  .reflection-status {
    font-size: 8px;
  }
  .ending-actions {
    gap: 15px;
    margin-top: 15px;
  }
  .ending-actions button,
  .ending-actions a {
    font-size: 10px;
  }
  .reset-progress {
    font-size: 8px;
  }
  .sources-dialog {
    padding: 38px 23px 25px;
    max-height: 90dvh;
  }
  .sources-dialog h2 {
    font-size: 31px;
  }
  .sources-dialog > p {
    font-size: 11px;
  }
  .source-list a {
    font-size: 12px;
  }
  .source-list p {
    font-size: 10px;
  }
  .source-list strong {
    font-size: 8px;
  }
  .source-ai {
    padding: 14px;
    gap: 10px;
  }
  .source-ai p {
    font-size: 9px;
  }
  .toast {
    font-size: 11px;
    width: max-content;
    max-width: 90%;
    text-align: center;
  }
}
@media (max-height: 650px) and (min-width: 701px) {
  .player-content {
    padding-top: 90px;
    max-height: calc(100% - 85px);
  }
  .player-content h2 {
    font-size: 39px;
  }
  .player-content > p {
    font-size: 15px;
    line-height: 1.7;
    margin-top: 15px;
  }
  .player-content .quiz-panel {
    padding: 20px 24px;
  }
  .quiz-panel h2 {
    font-size: 28px;
  }
  .quiz-options {
    gap: 7px;
    margin-top: 15px;
  }
  .quiz-option {
    padding: 9px 13px;
    font-size: 12px;
  }
  .quiz-feedback {
    margin-top: 12px;
  }
  .player-footer {
    padding-top: 9px;
    padding-bottom: 15px;
  }
  .class-hint {
    margin-bottom: 6px;
    padding: 9px 13px;
  }
  .reflection-input {
    min-height: 60px;
    max-height: 75px;
  }
  .ending-tags {
    margin: 12px 0;
  }
  .ending-actions {
    margin-top: 12px;
  }
  .player.class-mode .player-content > p {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .player-image {
    transform: none !important;
  }
}
@media print {
  .site-header,
  .site-footer,
  .intro-actions,
  dialog,
  .toast,
  .guide-steps .text-link {
    display: none !important;
  }
  .container {
    max-width: none;
  }
  .page-intro p {
    font-size: 11pt;
    max-width: none;
  }
  .guide-layout {
    display: block;
  }
  .guide-summary {
    position: static;
    background: #eee;
    padding: 20px;
    break-inside: avoid;
    margin-bottom: 25px;
  }
  .guide-steps article {
    break-inside: avoid;
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
  .guide-steps details {
    display: none;
  }
  .guide-steps h2 {
    font-size: 18pt;
  }
  .eyebrow {
    color: black;
  }
}
/* cinematic.css — aturan bersama */
.cinema-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.7;
  text-transform: uppercase;
  color: #bfcac0;
}
.style-dialog {
  width: min(1000px, calc(100% - 40px));
  max-height: 92dvh;
  background: #f3efe3;
  border: 0;
  border-radius: 4px;
  padding: 36px 38px 20px;
}
.style-intro {
  text-align: center;
  margin-bottom: 27px;
}
.style-intro .cinema-kicker {
  font-size: 8px;
  color: #8b977e;
  margin-bottom: 12px;
}
.style-intro h2 {
  font-size: 42px;
  letter-spacing: -1.5px;
}
.style-intro p {
  font-size: 12px;
  color: #849079;
  margin-top: 13px;
}
.style-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.style-choice {
  position: relative;
  height: 355px;
  background: #153a42;
  border-radius: 3px;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  padding: 0;
  color: #f5edda;
}
.style-choice-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  transition: transform 0.8s;
}
.style-choice-actor {
  position: absolute;
  right: -7%;
  bottom: -13%;
  height: 112%;
  width: auto;
  max-width: none;
  z-index: -2;
  transition: transform 0.8s;
}
.style-choice:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, #0b2937ed, transparent 85%);
}
.style-choice:hover .style-choice-bg {
  transform: scale(1.04);
}
.style-choice:hover .style-choice-actor {
  transform: translateX(-5px);
}
.style-choice-caption {
  position: absolute;
  bottom: 24px;
  left: 26px;
  right: 20px;
  display: block;
}
.style-choice-caption > small {
  font-size: 7px;
  letter-spacing: 1.4px;
  color: #d7e1c9;
}
.style-choice-caption strong {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -1px;
  margin: 11px 0;
}
.style-choice-caption > span {
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #dce4ce;
}
.style-choice-caption .icon {
  width: 16px;
}
.style-footnote {
  text-align: center;
  font-size: 9px;
  margin-top: 18px;
  color: #8f987e;
}
.cinema {
  background: #14383e;
}
.cinema .player-stage {
  display: block;
  isolation: isolate;
}
.cinema-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -3;
  background: #153e44;
}
.scene-image-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 1.4s cubic-bezier(0.2, 0.75, 0.2, 1),
    opacity 1s ease;
  transform-origin: center;
}
.scene-image-layer.is-current {
  opacity: 1;
}
.scene-image-layer.is-preparing {
  transition: none;
}
.scene-image-layer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cinema-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      0deg,
      #092c37f5 0%,
      #102f3bba 12%,
      #0c2f3e00 60%,
      #0d2d3d35 78%,
      #0a2a38a0 100%
    ),
    linear-gradient(90deg, #0f344a38, transparent 60%);
  pointer-events: none;
}
.cinema .player-header {
  padding: 23px 35px;
  z-index: 20;
}
.cinema .player-brand > .icon {
  stroke-width: 1.25;
}
.chapter-trigger {
  display: flex;
  gap: 25px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #e6edddab;
  padding: 10px 0;
}
.chapter-trigger > span {
  font-size: 15px;
}
.cinema .player-tools {
  gap: 8px;
}
.visual-toggle {
  display: flex;
  border: 1px solid #f5efdc40;
  border-radius: 4px;
  padding: 3px;
  margin-right: 10px;
  background: #153b4540;
  backdrop-filter: blur(8px);
}
.visual-toggle button {
  font-size: 9px;
  padding: 6px 11px;
  min-height: 29px;
  color: #e5ecd3;
  border-radius: 2px;
  letter-spacing: 0.3px;
}
.visual-toggle button[aria-pressed="true"] {
  background: #ede8d8;
  color: #315549;
}
.cinema .player-tool {
  background: #183e4650;
  border-color: #f4eddb30;
  min-height: 37px;
  padding: 9px;
  font-size: 10px;
}
.cinema .player-tool:hover,
.cinema .player-tool[aria-pressed="true"] {
  background: #f1ebda;
  color: #2c514a;
}
.cinema .player-tool > .icon {
  width: 15px;
  height: 15px;
}
.cinema .player-content {
  position: absolute;
  left: 7%;
  bottom: 155px;
  padding: 0;
  margin: 0;
  width: auto;
  max-width: 690px;
  max-height: calc(100% - 280px);
  overflow-y: auto;
  z-index: 6;
}
.cinema .player-content > .cinema-kicker,
.cinema-quiz > .cinema-kicker {
  font-size: 9px;
  letter-spacing: 2.4px;
  color: #d8dfc4;
  margin-bottom: 21px;
}
.cinema .player-content h2 {
  font-size: clamp(42px, 4.8vw, 73px);
  line-height: 1.07;
  max-width: 690px;
  color: #fcf3de;
  text-shadow: 0 1px 18px #102e3733;
}
.cinema .player-content > p {
  font-size: 15px;
  line-height: 1.8;
  margin-top: 22px;
  color: #e2e7d8e6;
  max-width: 500px;
  font-weight: 400;
}
.cinema[data-layout="opening"] .player-content {
  bottom: 23%;
  max-width: 800px;
}
.cinema[data-layout="opening"] .player-content h2 {
  font-size: clamp(54px, 6.6vw, 100px);
  line-height: 1.03;
  max-width: 800px;
}
.cinema[data-layout="character"] .player-content {
  max-width: 510px;
  bottom: 22%;
}
.cinema[data-layout="character"] .player-content h2 {
  font-size: clamp(45px, 5.5vw, 80px);
}
.cinema[data-layout="character"] .player-content > p {
  max-width: 340px;
}
.cinema-actors {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.scene-actor {
  padding: 0;
  position: absolute;
  bottom: 78px;
  aspect-ratio: 2/3;
  height: 70%;
  max-width: none;
  transform: translateX(-50%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    height 1.2s cubic-bezier(0.2, 0.75, 0.2, 1),
    left 1.2s cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 1.2s ease,
    opacity 0.7s ease;
  filter: drop-shadow(12px 16px 30px #153d4030);
}
.scene-actor.is-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}
.scene-actor > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  max-width: none;
  pointer-events: none;
}
.actor-label {
  position: absolute;
  top: 40%;
  left: 63%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fbf3df;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 10px #14353b;
  background: #13394635;
  padding: 6px 10px 6px 5px;
  border-radius: 25px;
  backdrop-filter: blur(5px);
  transition: background 0.3s;
}
.actor-pulse {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 29px;
  height: 29px;
  font-size: 16px;
  border: 1px solid #f2efd3a3;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #f4eddc0a;
}
.scene-actor:hover .actor-label {
  background: #f2eadb;
  color: #254c47;
  text-shadow: none;
}
.cinema-hotspots {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.scene-hotspot {
  position: absolute;
  padding: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: auto;
  color: #fdf5df;
}
.hotspot-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #f3edd6cc;
  border-radius: 50%;
  font-size: 18px;
  background: #153e46a0;
  box-shadow: 0 0 0 6px #f0eed918;
  transition:
    box-shadow 0.3s,
    background 0.3s;
}
.hotspot-caption {
  font-size: 10px;
  letter-spacing: 0.2px;
  background: #12383fa3;
  padding: 5px 9px;
  border-radius: 2px;
  backdrop-filter: blur(7px);
  white-space: nowrap;
}
.scene-hotspot:hover .hotspot-ring {
  background: #ede8d5;
  color: #28534c;
  box-shadow: 0 0 0 10px #f3edcf20;
}
.scene-hotspot:focus-visible {
  outline-offset: 8px;
}
.cinema .player-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 35px 25px;
  margin: 0;
  z-index: 10;
  pointer-events: none;
}
.cinema .player-footer button {
  pointer-events: auto;
}
.cinema .player-progress {
  gap: 7px;
  margin-bottom: 19px;
}
.cinema .progress-segment {
  height: 2px;
  background: #edf2d82f;
}
.cinema .progress-segment.current {
  background: #f4dfae;
}
.cinema .progress-segment.done {
  background: #b3c9bc;
}
.cinema .player-bottom {
  gap: 16px;
}
.cinema .prev-button {
  border-color: transparent;
  background: none;
  padding: 10px 0;
  backdrop-filter: none;
}
.cinema .prev-button > .icon {
  width: 16px;
}
.cinema .scene-count {
  font-size: 9px;
  letter-spacing: 2px;
  color: #dde6d0;
  padding: 10px 15px;
  pointer-events: auto;
}
.cinema .player-next-group {
  gap: 28px;
}
.cinema .player-next-group > .button {
  min-width: 118px;
  padding: 11px 16px;
  gap: 24px;
  background: #ede8d8;
  color: #294e48;
  border-color: #ede8d8;
}
.cinema .player-next-group > .button > span {
  font-size: 18px;
  line-height: 1;
}
.map-shortcut {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  color: #e1e8d0;
  padding: 10px 0;
}
.map-shortcut > .icon {
  width: 13px;
  height: 13px;
}
.cinema .class-hint {
  position: absolute;
  right: 35px;
  bottom: 110px;
  left: auto;
  max-width: 330px;
  margin: 0;
  padding: 15px 17px;
  z-index: 9;
  background: #f1ecdcf2;
  border: 1px solid #fbf8eb60;
  backdrop-filter: blur(12px);
}
.cinema .class-hint p {
  font-size: 10px;
  line-height: 1.8;
}
.cinema .class-hint strong {
  font-size: 7px;
}
.cinema.class-mode .player-content > p {
  font-size: 20px;
  line-height: 1.8;
  max-width: 600px;
}
.cinema.class-mode .player-content {
  max-width: 750px;
}
.scene-interaction {
  position: absolute;
  inset: 190px 7% 160px;
  pointer-events: none;
  z-index: 5;
}
.scene-interaction > * {
  pointer-events: auto;
}
.cinema[data-scene-type="map"] .player-content,
.cinema[data-scene-type="compare"] .player-content {
  top: 105px;
  bottom: auto;
  max-width: none;
  max-height: none;
}
.cinema[data-scene-type="map"] .player-content h2,
.cinema[data-scene-type="compare"] .player-content h2 {
  font-size: 38px;
  letter-spacing: -1.1px;
}
.cinema[data-scene-type="map"] .player-content .cinema-kicker,
.cinema[data-scene-type="compare"] .player-content .cinema-kicker {
  margin-bottom: 10px;
  font-size: 8px;
}
.cinema[data-scene-type="map"] .player-content > p,
.cinema[data-scene-type="compare"] .player-content > p {
  font-size: 12px;
  margin-top: 12px;
}
.cinema[data-scene-type="map"] .scene-interaction,
.cinema[data-scene-type="compare"] .scene-interaction {
  top: 235px;
  bottom: 125px;
  overflow-y: auto;
  max-width: 1080px;
  margin: 0 auto;
}
.map-board {
  width: 100%;
  background: #f1eddc;
  border-radius: 4px;
  overflow: hidden;
  color: #314c43;
}
.map-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.map-geography {
  position: absolute;
  inset: 0;
  transform-origin: 55% 50%;
  transition: transform 0.65s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.map-geography > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.map-pin {
  position: absolute;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -13px);
  text-align: center;
  white-space: nowrap;
  color: #345947;
}
.map-pin > span {
  display: block;
  width: 19px;
  height: 19px;
  border: 4px solid #fcf6de;
  border-radius: 50%;
  background: #49765c;
  box-shadow: 0 0 0 1px #54776280;
  margin-bottom: 9px;
}
.map-pin[aria-pressed="true"] > span {
  background: #a9563c;
  box-shadow: 0 0 0 6px #b56a3c19;
}
.map-pin strong {
  font-family: var(--serif);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.5px;
  background: #eeeeda85;
  padding: 0 4px;
}
.map-pin small {
  color: #879079;
  margin-top: 7px;
  letter-spacing: 0.5px;
}
.map-pin-demak {
  left: 70%;
  top: 50%;
}
.map-pin-semarang {
  left: 38%;
  top: 61.6%;
}
.map-zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  background: #f9f5e9;
  border: 1px solid #ccd4bf;
  border-radius: 3px;
  box-shadow: 0 2px 8px #456b4b14;
}
.map-zoom button {
  width: 32px;
  height: 32px;
  font-size: 17px;
  color: #56735a;
  padding: 0;
}
.map-zoom button + button {
  border-top: 1px solid #dbe0cf;
}
.map-info {
  justify-content: space-between;
  border-top: 1px solid #d4dcc5;
}
.map-info .cinema-kicker {
  color: #8a987c;
  letter-spacing: 1.8px;
}
.map-info h3 {
  color: #315b47;
}
.map-info p {
  color: #7d896e;
}
.map-travel {
  color: #41654d;
  flex-shrink: 0;
}
.map-travel > .icon {
  width: 16px;
  height: 16px;
}
.map-disclaimer {
  color: #9aa18a;
}
.cinema-quiz {
  width: min(550px, 100%);
  padding: 30px 34px 24px;
  border: 1px solid #f8f1de45;
  background: #f7f2e8f5;
  border-radius: 4px;
  box-shadow: 0 6px 35px #0a293933;
  backdrop-filter: blur(16px);
}
.cinema .cinema-quiz > .cinema-kicker {
  color: #8b8c74;
  font-size: 8px;
  margin-bottom: 14px;
}
.cinema .cinema-quiz h2 {
  font-size: 38px;
  color: #315248;
  text-shadow: none;
  letter-spacing: -1.2px;
  line-height: 1.15;
}
.cinema-quiz > p {
  font-size: 12px;
  margin-top: 16px;
  color: #849077;
}
.cinema .quiz-options {
  margin-top: 22px;
  gap: 9px;
}
.cinema .quiz-option {
  font-size: 12px;
  padding: 11px 14px;
  border-color: #d5ddc8;
  background: #fcf9f0;
  color: #5e7258;
  border-radius: 3px;
}
.cinema .quiz-option > span {
  width: 25px;
  height: 25px;
  font-size: 9px;
  background: #eff0e4;
  border-color: #dbe1ce;
}
.cinema .quiz-option.correct {
  background: #dce9d5;
  border-color: #7d9e77;
}
.cinema .quiz-option.incorrect {
  background: #eee2cd;
  border-color: #c3a67e;
}
.cinema .quiz-feedback {
  font-size: 11px;
  margin-top: 17px;
  line-height: 1.8;
  color: #7c8c6b;
}
.cinema[data-scene-type="quiz"] .player-content {
  max-width: 560px;
  bottom: 150px;
}
.cinema[data-scene-type="words"] .scene-interaction,
.cinema[data-scene-type="name"] .scene-interaction {
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 150px 35px 235px;
}
.word-pair {
  display: flex;
  align-items: center;
  gap: 65px;
  color: #fbf3df;
}
.word-pair button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: inherit;
  padding: 0 0 17px;
  border-bottom: 1px solid #e7e9cd8a;
  min-width: 210px;
  text-align: left;
}
.word-pair button > small {
  font-size: 9px;
  letter-spacing: 2px;
  color: #cfd9bc;
  margin-bottom: 13px;
}
.word-pair strong {
  font: 400 clamp(65px, 8vw, 125px)/1.1 var(--serif);
  letter-spacing: -5px;
}
.word-pair button > span {
  font-size: 9px;
  color: #d6decb;
  margin-top: 20px;
  letter-spacing: 0.4px;
}
.word-pair > i {
  font-style: normal;
  font-size: 32px;
  font-weight: 200;
  color: #e6e7d2;
}
.cinema[data-scene-type="words"] .player-content h2,
.cinema[data-scene-type="name"] .player-content h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.cinema[data-scene-type="words"] .player-content > p,
.cinema[data-scene-type="name"] .player-content > p {
  font-size: 13px;
}
.name-reveal {
  position: relative;
  font-family: var(--serif);
  color: #f7efdc;
  font-size: clamp(70px, 9vw, 150px);
  font-weight: 400;
  letter-spacing: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-width: 600px;
  min-height: 200px;
}
.name-reveal > span,
.name-reveal > i {
  animation: words-dissolve 3s both;
}
.name-reveal > i {
  font-size: 45px;
  font-style: normal;
  color: #c6d4b4;
}
.name-reveal > b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  animation: name-arrive 3s both;
}
.compare-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/8;
  overflow: hidden;
  border: 1px solid #ebefd859;
  border-radius: 3px;
  background: #345d59;
  isolation: isolate;
}
.compare-frame > img,
.compare-past > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}
.compare-past {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
}
.compare-label {
  position: absolute;
  top: 20px;
  color: #fcf7e6;
  background: #143f429e;
  border: 1px solid #f8efd83d;
  border-radius: 2px;
  font-size: 7px;
  letter-spacing: 1.5px;
  padding: 7px 10px;
  pointer-events: none;
  z-index: 3;
}
.past-label {
  left: 20px;
}
.now-label {
  right: 20px;
}
.compare-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #f6efdbd6;
  pointer-events: none;
  z-index: 4;
}
.compare-line > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  background: #f6eed8;
  color: #3d6557;
  box-shadow: 0 2px 15px #173b3550;
  font-size: 22px;
}
.compare-frame input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: col-resize;
  margin: 0;
  z-index: 5;
  min-height: 0;
}
.compare-caption {
  position: absolute;
  bottom: 12px;
  left: 20px;
  color: #f8f3df;
  font-size: 8px;
  padding: 4px 8px;
  background: #113a43a6;
  z-index: 3;
  pointer-events: none;
}
.compare-frame:focus-within {
  box-shadow: 0 0 0 3px #cba267;
}
.cinema[data-scene-type="ending"] .player-content {
  left: 50%;
  transform: translateX(-50%);
  bottom: 155px;
  width: calc(100% - 100px);
  max-width: 880px;
  text-align: center;
}
.cinema[data-scene-type="ending"] .player-content h2 {
  max-width: none;
  font-size: clamp(44px, 5.6vw, 82px);
  line-height: 1.1;
}
.cinema[data-scene-type="ending"] .player-content > p {
  margin: 23px auto 0;
  font-size: 14px;
}
.ending-values {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin: 25px 0;
  color: #c8d8bc;
  font-size: 9px;
  letter-spacing: 0.5px;
}
.reflection-drawer {
  max-width: 570px;
  margin: 25px auto 0;
  text-align: left;
  border-top: 1px solid #e6e6c964;
  border-bottom: 1px solid #e6e6c964;
  padding: 12px 0;
}
.reflection-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #ecebd6;
  font-size: 11px;
  list-style: none;
}
.reflection-drawer > summary::-webkit-details-marker {
  display: none;
}
.reflection-drawer > summary > span {
  font-size: 19px;
  font-weight: 300;
}
.cinema .reflection-input {
  width: 100%;
  max-height: 130px;
  margin-top: 12px;
  border-color: #c5d5b75c !important;
  background: #f0f3da08 !important;
}
.reflection-drawer small {
  display: block;
  font-size: 8px;
  color: #bbcdb0;
  margin-top: 7px;
}
.cinema .ending-actions {
  justify-content: center;
  gap: 26px;
  margin-top: 25px;
}
.cinema .ending-actions button {
  font-size: 9px;
  color: #d7e2c6;
  padding: 3px 0;
  border-bottom: 0;
}
.character-dialog {
  width: min(1010px, calc(100% - 45px));
  max-height: 90dvh;
  padding: 0;
  border: 1px solid #fcf9e839;
  border-radius: 4px;
  background: #efe9da;
  color: #2c4841;
  overflow: auto;
}
.character-dialog[open] {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: 610px;
}
.character-portrait {
  position: relative;
  min-height: 610px;
  background: #244b4a;
  overflow: hidden;
  isolation: isolate;
}
.character-portrait > img {
  position: absolute;
  max-width: none;
  width: 280%;
  height: auto;
  left: -90%;
  top: -5%;
  transform-origin: 50% 13%;
}
.character-portrait > span {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 7px;
  letter-spacing: 2px;
  color: #dce5c8aa;
  z-index: 3;
}
.character-portrait:after {
  content: "";
  position: absolute;
  inset: 70% 0 0;
  background: linear-gradient(0deg, #1a434b, transparent);
  pointer-events: none;
}
.profile-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #b4c2ad;
  border-radius: 50%;
  color: #5e7559;
  background: #f1eddfd9;
}
.profile-close .icon {
  width: 17px;
  height: 17px;
}
.character-bio {
  padding: 70px 45px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.character-bio > .cinema-kicker {
  font-size: 8px;
  color: #8a967b;
  margin-bottom: 20px;
}
.character-bio h2 {
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: #305348;
}
.character-alias {
  font-size: 11px;
  line-height: 1.8;
  color: #839174;
  margin-top: 18px;
}
.profile-rule {
  width: 45px;
  height: 1px;
  background: #9dab8c;
  margin: 25px 0;
}
.character-bio > #character-description {
  font-size: 14px;
  line-height: 1.9;
  color: #63785b;
}
.character-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 25px;
}
.character-tags > span {
  font-size: 8px;
  border: 1px solid #c4cfb7;
  padding: 5px 9px;
  border-radius: 2px;
  color: #82936f;
}
.character-bio > small {
  font-size: 8px;
  line-height: 1.8;
  color: #9da78d;
  margin-top: 20px;
}
.character-bio > .text-link {
  font-size: 10px;
  gap: 20px;
  margin-top: 22px;
}
.character-bio > .button {
  margin-top: 28px;
  font-size: 10px;
  min-height: 41px;
  padding: 10px 15px;
  gap: 20px;
}
.detail-dialog {
  border: 0;
  border-radius: 4px;
}
.detail-dialog > .cinema-kicker {
  color: #8c977e;
  font-size: 8px;
  margin-bottom: 20px;
}
.detail-dialog h2 {
  font-size: 34px;
  color: #31554a;
  line-height: 1.12;
}
.detail-dialog > p {
  font-size: 13px;
  line-height: 1.95;
  color: #75866a;
  margin-top: 23px;
}
.detail-dialog > .text-link {
  font-size: 10px;
  margin-top: 28px;
}
.chapters-dialog {
  width: min(650px, calc(100% - 40px));
  max-height: 88dvh;
  background: #f2eddf;
  padding: 38px 35px 25px;
  border: 0;
  border-radius: 4px;
}
.chapters-dialog > .cinema-kicker {
  font-size: 8px;
  color: #86967a;
  margin-bottom: 16px;
}
.chapters-dialog h2 {
  font-size: 40px;
}
.chapter-list {
  margin-top: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
}
.chapter-list > button {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 13px;
  border-top: 1px solid #d6ddca;
  padding: 14px 0;
  color: #718269;
  min-width: 0;
}
.chapter-list > button > span {
  font-size: 8px;
  color: #9aa48b;
  letter-spacing: 1px;
}
.chapter-list strong {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  flex: 1;
}
.chapter-list small {
  font-size: 6px;
  color: #a4ab96;
  white-space: nowrap;
}
.chapter-list > button[aria-current="step"] {
  color: #284f44;
  font-weight: 600;
  border-top-color: #90a87b;
}
.chapter-list > button[aria-current="step"] > span {
  color: #a86440;
}
.clear-reading {
  font-size: 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #919e80;
  padding: 20px 0 0;
}
.map-dialog {
  width: min(1000px, calc(100% - 40px));
  max-height: 90dvh;
  border: 0;
  border-radius: 4px;
  padding: 30px;
  background: #f1eddf;
}
.map-dialog > .cinema-kicker {
  font-size: 8px;
  color: #88957c;
  margin-bottom: 10px;
}
.map-dialog > h2 {
  font-size: 35px;
  margin-bottom: 25px;
}
.map-dialog .map-board {
  border: 1px solid #d6ddc9;
}
.cinema .toast,
.character-dialog .toast,
.style-dialog .toast {
  position: fixed;
  z-index: 50;
}
.cinema[data-scene-type="map"] .map-board {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cinema[data-scene-type="map"] .map-canvas {
  aspect-ratio: auto;
}
.cinema[data-scene-type="map"] .map-info {
  flex-shrink: 0;
  padding: 14px 24px;
}
.cinema[data-scene-type="map"] .map-info p {
  margin-top: 6px;
}
.cinema[data-scene-type="map"] .map-disclaimer {
  flex-shrink: 0;
  padding-bottom: 12px;
}
.cinema[data-scene-type="compare"] .compare-frame {
  height: 100%;
  aspect-ratio: auto;
}
@keyframes words-dissolve {
  0%,
  38% {
    opacity: 1;
    transform: translateY(0);
  }
  70%,
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
@keyframes name-arrive {
  0%,
  45% {
    opacity: 0;
    transform: translateY(25px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 1100px) {
  .cinema .player-content {
    max-width: 570px;
    left: 6%;
  }
  .cinema .player-content h2 {
    font-size: 57px;
  }
  .cinema[data-layout="character"] .player-content {
    max-width: 370px;
  }
  .cinema[data-layout="character"] .player-content h2 {
    font-size: 60px;
  }
  .actor-label {
    left: 56%;
    font-size: 9px;
  }
  .character-bio {
    padding: 60px 30px 35px;
  }
  .character-bio h2 {
    font-size: 43px;
  }
  .character-dialog[open] {
    min-height: 560px;
  }
  .character-portrait {
    min-height: 560px;
  }
  .character-bio > #character-description {
    font-size: 13px;
  }
  .character-bio > small {
    font-size: 8px;
  }
  .cinema .class-hint {
    max-width: 300px;
  }
  .word-pair {
    gap: 40px;
  }
  .word-pair button {
    min-width: 175px;
  }
  .cinema[data-scene-type="map"] .scene-interaction,
  .cinema[data-scene-type="compare"] .scene-interaction {
    left: 6%;
    right: 6%;
  }
  .cinema .chapter-trigger {
    font-size: 9px;
  }
}
@media (max-width: 800px) {
  .style-dialog {
    padding: 30px 25px 19px;
  }
  .style-choice {
    height: 325px;
  }
  .style-choice-caption {
    left: 20px;
    bottom: 22px;
  }
  .style-choice-caption strong {
    font-size: 28px;
  }
  .style-choice-caption > small {
    font-size: 6px;
  }
  .style-choice-caption > span {
    font-size: 9px;
  }
  .style-intro h2 {
    font-size: 37px;
  }
  .cinema .player-header {
    padding: 17px 20px;
  }
  .cinema .player-brand > .icon {
    width: 19px;
    margin-right: 7px;
  }
  .chapter-trigger {
    display: none;
  }
  .cinema .player-tools {
    gap: 5px;
  }
  .visual-toggle {
    margin-right: 5px;
  }
  .cinema .player-content {
    left: 6%;
    bottom: 145px;
    max-width: 600px;
    width: 88%;
    max-height: calc(100% - 255px);
  }
  .cinema .player-content h2 {
    font-size: 50px;
  }
  .cinema .player-content > p {
    font-size: 13px;
    max-width: 380px;
  }
  .cinema[data-layout="character"] .player-content {
    bottom: 150px;
    max-width: 300px;
  }
  .cinema[data-layout="character"] .player-content h2 {
    font-size: 51px;
  }
  .cinema[data-layout="character"] .player-content > p {
    font-size: 12px;
    max-width: 250px;
  }
  .actor-label {
    top: 43%;
    left: 54%;
    font-size: 8px;
  }
  .scene-hotspot {
    gap: 7px;
  }
  .hotspot-caption {
    font-size: 9px;
    padding: 4px 7px;
  }
  .hotspot-ring {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }
  .cinema .player-footer {
    padding: 0 22px 20px;
  }
  .cinema .player-content > .cinema-kicker {
    font-size: 8px;
    letter-spacing: 1.8px;
  }
  .cinema .class-hint {
    bottom: 105px;
    right: 22px;
    max-width: 260px;
    padding: 12px 14px;
  }
  .cinema.class-mode .player-content {
    bottom: 210px;
  }
  .cinema.class-mode .player-content > p {
    font-size: 17px;
  }
  .cinema .scene-count {
    font-size: 8px;
    letter-spacing: 1.5px;
  }
  .cinema .player-next-group {
    gap: 19px;
  }
  .cinema .player-next-group > .button {
    min-width: 110px;
    gap: 20px;
  }
  .cinema[data-scene-type="map"] .player-content,
  .cinema[data-scene-type="compare"] .player-content {
    top: 95px;
    max-height: none;
  }
  .cinema[data-scene-type="map"] .player-content h2,
  .cinema[data-scene-type="compare"] .player-content h2 {
    font-size: 34px;
  }
  .cinema[data-scene-type="map"] .scene-interaction,
  .cinema[data-scene-type="compare"] .scene-interaction {
    top: 210px;
    bottom: 118px;
  }
  .word-pair {
    gap: 28px;
  }
  .word-pair button {
    min-width: 150px;
  }
  .word-pair strong {
    font-size: 78px;
    letter-spacing: -3px;
  }
  .name-reveal {
    min-width: 0;
    font-size: 90px;
    gap: 15px;
    width: 100%;
    letter-spacing: -4px;
  }
  .name-reveal > i {
    font-size: 30px;
  }
  .cinema[data-scene-type="ending"] .player-content {
    bottom: 150px;
    width: 88%;
    max-height: calc(100% - 250px);
  }
  .cinema[data-scene-type="ending"] .player-content h2 {
    font-size: 56px;
  }
  .character-dialog[open] {
    min-height: 530px;
    grid-template-columns: 0.85fr 1fr;
  }
  .character-portrait {
    min-height: 530px;
  }
  .character-portrait > img {
    width: 315%;
    left: -105%;
    top: -3%;
  }
  .character-bio {
    padding: 50px 25px 30px;
  }
  .character-bio h2 {
    font-size: 37px;
  }
  .character-bio > .cinema-kicker {
    margin-bottom: 17px;
    font-size: 7px;
  }
  .character-bio > #character-description {
    font-size: 12px;
  }
  .character-alias {
    font-size: 10px;
  }
  .profile-rule {
    margin: 20px 0;
  }
  .character-tags {
    margin-top: 20px;
  }
  .character-tags > span {
    font-size: 7px;
    padding: 4px 7px;
  }
  .character-bio > small {
    font-size: 7px;
    margin-top: 16px;
  }
  .character-bio > .text-link {
    font-size: 9px;
    margin-top: 16px;
  }
  .character-bio > .button {
    font-size: 9px;
    margin-top: 23px;
    padding: 9px 12px;
    gap: 11px;
  }
  .map-dialog {
    padding: 25px;
  }
  .map-dialog > h2 {
    font-size: 31px;
  }
}
@media (max-width: 550px) {
  .style-dialog {
    width: calc(100% - 24px);
    padding: 35px 16px 18px;
    max-height: 93dvh;
  }
  .style-intro {
    margin-bottom: 23px;
  }
  .style-intro > .cinema-kicker {
    font-size: 6px;
    letter-spacing: 1.6px;
  }
  .style-intro h2 {
    font-size: 33px;
    letter-spacing: -1px;
  }
  .style-intro > p {
    font-size: 10px;
    margin-top: 12px;
  }
  .style-choices {
    gap: 11px;
  }
  .style-choice-actor {
    right: -32%;
    height: 100%;
    bottom: 0;
  }
  .style-choice-caption {
    left: 14px;
    right: 12px;
    bottom: 20px;
  }
  .style-choice-caption > small {
    font-size: 5px;
    letter-spacing: 0.7px;
  }
  .style-choice-caption strong {
    font-size: 25px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 12px 0;
  }
  .style-choice-caption > span {
    font-size: 8px;
    line-height: 1.7;
    gap: 10px;
  }
  .style-choice-caption .icon {
    width: 12px;
  }
  .style-footnote {
    font-size: 8px;
    line-height: 1.8;
  }
  .cinema .player-brand > .icon {
    height: 18px;
  }
  .cinema .player-tool {
    border-radius: 3px;
  }
  .cinema .player-tool > .icon {
    width: 13px;
    height: 13px;
  }
  .visual-toggle {
    padding: 2px;
    margin-right: 3px;
  }
  .visual-toggle button {
    font-size: 7px;
    padding: 5px 7px;
    min-height: 23px;
  }
  .cinema .player-content {
    left: 24px;
    right: 24px;
    width: auto;
    bottom: 144px;
    max-height: calc(100% - 245px);
    max-width: none;
    padding: 0;
  }
  .cinema .player-content > .cinema-kicker {
    font-size: 6px;
    letter-spacing: 1.5px;
    margin-bottom: 19px;
  }
  .cinema .player-content h2 {
    font-size: 44px;
    line-height: 1.09;
    max-width: none;
  }
  .cinema .player-content > p {
    font-size: 12px;
    line-height: 1.9;
    margin-top: 19px;
    max-width: 290px;
  }
  .cinema[data-layout="opening"] .player-content {
    bottom: 24%;
    max-width: none;
  }
  .cinema[data-layout="opening"] .player-content h2 {
    font-size: 55px;
    letter-spacing: -2px;
  }
  .cinema[data-layout="character"] .player-content {
    bottom: 145px;
    max-width: 290px;
  }
  .cinema[data-layout="character"] .player-content h2 {
    font-size: 43px;
    max-width: 280px;
  }
  .cinema[data-layout="character"] .player-content > p {
    font-size: 11px;
    max-width: 260px;
  }
  .cinema-vignette {
    background: linear-gradient(0deg, #0a2b3bf9 0%, #0b2b3bd6 18%, #183b4a00 70%, #0d2b3b80 100%);
  }
  .scene-actor {
    bottom: 95px;
  }
  .actor-label {
    top: 36%;
    left: 53%;
    font-size: 7px;
    padding: 4px 7px 4px 4px;
    gap: 7px;
  }
  .actor-pulse {
    min-width: 24px;
    height: 24px;
    font-size: 14px;
  }
  .cinema-actors:has([data-actor="putra-pandan"].is-visible) [data-actor="made-pandan"] {
    left: 40% !important;
    height: 70% !important;
  }
  .cinema-actors:has([data-actor="putra-pandan"].is-visible) [data-actor="putra-pandan"] {
    left: 78% !important;
    height: 62% !important;
  }
  .scene-hotspot {
    position: static;
    transform: none;
    gap: 6px;
  }
  .hotspot-ring {
    width: 24px;
    height: 24px;
    font-size: 14px;
    box-shadow: 0 0 0 3px #ffffff10;
  }
  .hotspot-caption {
    font-size: 8px;
    padding: 5px 7px;
  }
  .cinema-hotspots {
    inset: 92px 20px auto;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .cinema[data-scene-type="explore"] .cinema-hotspots {
    justify-content: flex-start;
    gap: 17px;
  }
  .cinema .player-footer {
    padding: 0 19px 18px;
  }
  .cinema .player-progress {
    gap: 4px;
    margin-bottom: 15px;
  }
  .cinema .progress-segment {
    height: 2px;
  }
  .cinema .prev-button {
    font-size: 9px;
    gap: 5px;
    padding: 10px 0;
    min-height: 37px;
  }
  .cinema .prev-button > .icon {
    width: 14px;
    height: 14px;
  }
  .cinema .player-bottom {
    gap: 8px;
  }
  .cinema .scene-count {
    font-size: 8px;
    letter-spacing: 1px;
    padding: 10px 5px;
  }
  .cinema .player-next-group {
    gap: 17px;
  }
  .map-shortcut {
    font-size: 8px;
    gap: 3px;
  }
  .map-shortcut > .icon {
    width: 11px;
    height: 11px;
  }
  .cinema .player-next-group > .button {
    min-width: 89px;
    padding: 9px 12px;
    gap: 18px;
  }
  .cinema .player-next-group > .button > span {
    font-size: 16px;
  }
  .cinema .class-hint {
    bottom: 98px;
    left: 20px;
    right: 20px;
    max-width: none;
    padding: 11px 13px;
    gap: 10px;
  }
  .cinema .class-hint strong {
    font-size: 6px;
    letter-spacing: 1.3px;
  }
  .cinema .class-hint p {
    font-size: 9px;
    line-height: 1.75;
    margin-top: 4px;
  }
  .cinema .class-hint > .icon {
    width: 16px;
    height: 16px;
  }
  .cinema.class-mode .player-content,
  .cinema.class-mode[data-layout="character"] .player-content {
    bottom: 215px;
    max-height: calc(100% - 305px);
  }
  .cinema.class-mode .player-content > p {
    font-size: 15px;
    line-height: 1.8;
  }
  .cinema[data-scene-type="map"] .player-content,
  .cinema[data-scene-type="compare"] .player-content {
    top: 94px;
    left: 24px;
    right: 24px;
    bottom: auto;
    max-height: none;
  }
  .cinema[data-scene-type="map"] .player-content h2,
  .cinema[data-scene-type="compare"] .player-content h2 {
    font-size: 33px;
    letter-spacing: -1.1px;
    max-width: 320px;
  }
  .cinema[data-scene-type="map"] .player-content .cinema-kicker,
  .cinema[data-scene-type="compare"] .player-content .cinema-kicker {
    font-size: 6px;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
  }
  .cinema[data-scene-type="map"] .player-content > p,
  .cinema[data-scene-type="compare"] .player-content > p {
    font-size: 10px;
    line-height: 1.8;
    margin-top: 15px;
  }
  .cinema[data-scene-type="map"] .scene-interaction,
  .cinema[data-scene-type="compare"] .scene-interaction {
    top: 235px;
    bottom: 125px;
    left: 18px;
    right: 18px;
  }
  .map-geography {
    inset: 0 -12%;
  }
  .map-info .cinema-kicker {
    letter-spacing: 1.5px;
  }
  .map-travel {
    margin-top: 16px;
  }
  .map-pin > span {
    width: 19px;
    height: 19px;
    margin-bottom: 9px;
  }
  .map-zoom {
    bottom: 12px;
    right: 12px;
  }
  .map-zoom button {
    font-size: 17px;
  }
  .cinema[data-scene-type="quiz"] .player-content {
    bottom: 140px;
    max-height: calc(100% - 235px);
  }
  .cinema-quiz {
    padding: 25px 21px 21px;
  }
  .cinema .cinema-quiz h2 {
    font-size: 34px;
    letter-spacing: -1.1px;
    line-height: 1.15;
  }
  .cinema .cinema-quiz > .cinema-kicker {
    font-size: 6px;
    margin-bottom: 17px;
    letter-spacing: 1.6px;
  }
  .cinema-quiz > p {
    font-size: 11px;
    margin-top: 14px;
  }
  .cinema .quiz-options {
    margin-top: 22px;
    gap: 10px;
  }
  .cinema .quiz-option {
    font-size: 11px;
    padding: 11px 12px;
    gap: 12px;
    line-height: 1.6;
  }
  .cinema .quiz-option > span {
    font-size: 9px;
    width: 24px;
    height: 24px;
  }
  .cinema .quiz-feedback {
    font-size: 10px;
    line-height: 1.9;
    margin-top: 16px;
  }
  .cinema[data-scene-type="words"] .scene-interaction,
  .cinema[data-scene-type="name"] .scene-interaction {
    inset: 120px 24px 270px;
  }
  .word-pair {
    gap: 17px;
    width: 100%;
    justify-content: center;
  }
  .word-pair button {
    min-width: 0;
    flex: 1;
    max-width: 145px;
    padding-bottom: 13px;
  }
  .word-pair strong {
    font-size: 62px;
    letter-spacing: -3px;
  }
  .word-pair > i {
    font-size: 22px;
  }
  .word-pair button > small {
    font-size: 7px;
    margin-bottom: 12px;
  }
  .word-pair button > span {
    font-size: 6px;
    margin-top: 17px;
  }
  .cinema[data-scene-type="words"] .player-content > p,
  .cinema[data-scene-type="name"] .player-content > p {
    font-size: 11px;
  }
  .name-reveal {
    font-size: 60px;
    gap: 11px;
    min-height: 140px;
    letter-spacing: -2px;
  }
  .name-reveal > i {
    font-size: 23px;
  }
  .name-reveal > b {
    font-size: 72px;
  }
  .compare-frame {
    aspect-ratio: 3/3.5;
  }
  .compare-frame > img,
  .compare-past > img {
    object-position: center;
  }
  .compare-label {
    font-size: 5px;
    letter-spacing: 1px;
    padding: 6px 8px;
    top: 14px;
  }
  .past-label {
    left: 12px;
  }
  .now-label {
    right: 12px;
  }
  .compare-line > span {
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
  .compare-caption {
    font-size: 6px;
    left: 12px;
    right: 12px;
    bottom: 13px;
    max-width: max-content;
  }
  .cinema[data-scene-type="ending"] .player-content {
    bottom: 155px;
    width: calc(100% - 48px);
    left: 24px;
    right: 24px;
    transform: none;
    max-height: calc(100% - 260px);
    text-align: left;
  }
  .cinema[data-scene-type="ending"] .player-content h2 {
    font-size: 45px;
    letter-spacing: -1.8px;
  }
  .cinema[data-scene-type="ending"] .player-content > p {
    font-size: 12px;
    margin-top: 22px;
  }
  .ending-values {
    justify-content: flex-start;
    gap: 12px;
    margin-top: 25px;
    font-size: 7px;
    letter-spacing: 0;
    flex-wrap: wrap;
  }
  .reflection-drawer {
    margin-top: 25px;
    padding: 12px 0;
  }
  .reflection-drawer > summary {
    font-size: 10px;
  }
  .cinema .reflection-input {
    font-size: 11px;
    min-height: 75px;
    max-height: 110px;
  }
  .reflection-drawer small {
    font-size: 7px;
    line-height: 1.8;
  }
  .cinema .ending-actions {
    justify-content: flex-start;
    gap: 21px;
    margin-top: 20px;
  }
  .cinema .ending-actions button {
    font-size: 8px;
  }
  .character-dialog {
    width: calc(100% - 26px);
    max-height: 92dvh;
  }
  .character-dialog[open] {
    display: block;
    min-height: 0;
  }
  .character-portrait {
    height: 270px;
    min-height: 0;
    width: 100%;
  }
  .character-portrait > img {
    width: 240%;
    left: -70%;
    top: -55px;
  }
  .character-portrait > span {
    font-size: 6px;
    bottom: 12px;
    letter-spacing: 1.5px;
  }
  .character-portrait:after {
    inset: 70% 0 0;
    background: linear-gradient(0deg, #1b434ca0, transparent);
  }
  .character-bio {
    padding: 30px 27px 30px;
  }
  .character-bio > .cinema-kicker {
    font-size: 7px;
    margin-bottom: 14px;
    letter-spacing: 2px;
  }
  .character-bio h2 {
    font-size: 39px;
    letter-spacing: -1.3px;
    max-width: 290px;
  }
  .character-alias {
    font-size: 11px;
    margin-top: 16px;
    line-height: 1.8;
  }
  .profile-rule {
    margin: 20px 0;
    width: 35px;
  }
  .character-bio > #character-description {
    font-size: 12px;
    line-height: 1.95;
  }
  .character-tags {
    gap: 7px;
    margin-top: 20px;
  }
  .character-tags > span {
    font-size: 7px;
    padding: 5px 8px;
  }
  .character-bio > small {
    font-size: 7px;
    line-height: 1.9;
    margin-top: 17px;
  }
  .character-bio > .text-link {
    font-size: 9px;
    margin-top: 18px;
  }
  .character-bio > .button {
    font-size: 9px;
    padding: 10px 13px;
    margin-top: 24px;
    min-height: 39px;
  }
  .profile-close {
    background: #eee9d9e6;
    border-color: #f6f0ddb0;
    color: #3c6254;
    top: 13px;
    right: 13px;
    width: 31px;
    height: 31px;
  }
  .profile-close > .icon {
    width: 16px;
  }
  .detail-dialog > .cinema-kicker {
    font-size: 7px;
    margin-bottom: 18px;
  }
  .detail-dialog h2 {
    font-size: 32px;
  }
  .detail-dialog > p {
    font-size: 12px;
    margin-top: 22px;
  }
  .detail-dialog > .text-link {
    font-size: 10px;
    margin-top: 25px;
  }
  .chapters-dialog {
    width: calc(100% - 26px);
    padding: 35px 25px 25px;
    max-height: 90dvh;
  }
  .chapters-dialog > .cinema-kicker {
    font-size: 6px;
    letter-spacing: 1.7px;
  }
  .chapters-dialog h2 {
    font-size: 35px;
  }
  .chapter-list {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 23px;
  }
  .chapter-list > button {
    padding: 14px 0;
    gap: 15px;
  }
  .chapter-list strong {
    font-size: 11px;
  }
  .chapter-list > button > span {
    font-size: 8px;
  }
  .chapter-list small {
    font-size: 7px;
  }
  .clear-reading {
    font-size: 8px;
    line-height: 1.8;
    text-align: left;
    padding-top: 22px;
  }
  .map-dialog {
    width: calc(100% - 24px);
    padding: 32px 16px 18px;
    max-height: 92dvh;
  }
  .map-dialog > .cinema-kicker {
    font-size: 6px;
    letter-spacing: 1.5px;
    margin-left: 6px;
  }
  .map-dialog > h2 {
    font-size: 32px;
    margin-left: 6px;
    margin-top: 12px;
    margin-bottom: 24px;
  }
  .cinema.class-mode[data-scene-type="map"] .scene-interaction,
  .cinema.class-mode[data-scene-type="compare"] .scene-interaction {
    bottom: 225px;
  }
  .cinema.class-mode[data-scene-type="ending"] .player-content {
    bottom: 225px;
    max-height: calc(100% - 325px);
  }
}
@media (max-height: 720px) and (min-width: 551px) {
  .cinema .player-content {
    bottom: 130px;
    max-height: calc(100% - 225px);
  }
  .cinema .player-content h2 {
    font-size: 48px;
  }
  .cinema[data-layout="character"] .player-content {
    bottom: 145px;
  }
  .cinema[data-layout="character"] .player-content h2 {
    font-size: 49px;
  }
  .cinema[data-layout="opening"] .player-content h2 {
    font-size: 70px;
  }
  .cinema .player-content > p {
    font-size: 13px;
  }
  .cinema .cinema-quiz h2 {
    font-size: 32px;
  }
  .cinema-quiz {
    padding: 24px 28px 20px;
  }
  .cinema .quiz-option {
    padding: 9px 12px;
  }
  .cinema .quiz-feedback {
    margin-top: 12px;
    font-size: 10px;
  }
  .cinema[data-scene-type="map"] .player-content,
  .cinema[data-scene-type="compare"] .player-content {
    top: 90px;
  }
  .cinema[data-scene-type="map"] .player-content h2,
  .cinema[data-scene-type="compare"] .player-content h2 {
    font-size: 31px;
  }
  .cinema[data-scene-type="map"] .scene-interaction,
  .cinema[data-scene-type="compare"] .scene-interaction {
    top: 195px;
    bottom: 120px;
  }
  .map-board {
    max-width: 850px;
    margin: auto;
  }
  .cinema[data-scene-type="ending"] .player-content {
    bottom: 130px;
    max-height: calc(100% - 210px);
  }
  .cinema[data-scene-type="ending"] .player-content h2 {
    font-size: 51px;
  }
  .cinema[data-scene-type="ending"] .player-content > p {
    font-size: 12px;
    margin-top: 15px;
  }
  .ending-values {
    margin-top: 16px;
    font-size: 8px;
  }
  .reflection-drawer {
    margin-top: 17px;
    padding: 8px 0;
  }
  .cinema .ending-actions {
    margin-top: 18px;
  }
  .cinema .class-hint {
    max-width: 270px;
    bottom: 103px;
    padding: 10px 13px;
  }
  .cinema.class-mode .player-content {
    max-height: calc(100% - 245px);
    bottom: 150px;
  }
  .cinema.class-mode .player-content > p {
    font-size: 16px;
  }
  .character-dialog[open] {
    min-height: 0;
  }
  .character-portrait {
    min-height: 530px;
  }
  .character-bio {
    padding-top: 40px;
    padding-bottom: 30px;
  }
  .style-choice {
    height: 290px;
  }
  .style-dialog {
    padding-top: 26px;
  }
  .style-intro h2 {
    font-size: 35px;
  }
  .style-intro {
    margin-bottom: 22px;
  }
}
@media (max-height: 760px) and (max-width: 550px) {
  .cinema .player-content h2 {
    font-size: 39px;
  }
  .cinema .player-content {
    bottom: 125px;
    max-height: calc(100% - 215px);
  }
  .cinema[data-layout="opening"] .player-content h2 {
    font-size: 49px;
  }
  .cinema[data-layout="character"] .player-content {
    bottom: 125px;
  }
  .cinema[data-layout="character"] .player-content h2 {
    font-size: 38px;
  }
  .cinema[data-scene-type="quiz"] .player-content {
    bottom: 122px;
    max-height: calc(100% - 205px);
  }
  .cinema-quiz {
    padding: 22px 18px 17px;
  }
  .cinema .cinema-quiz h2 {
    font-size: 30px;
  }
  .cinema .quiz-option {
    padding: 9px 11px;
  }
  .cinema .quiz-feedback {
    margin-top: 12px;
    font-size: 9px;
  }
  .cinema[data-scene-type="map"] .scene-interaction,
  .cinema[data-scene-type="compare"] .scene-interaction {
    top: 220px;
    bottom: 105px;
  }
  .cinema[data-scene-type="ending"] .player-content {
    bottom: 120px;
    max-height: calc(100% - 210px);
  }
  .cinema[data-scene-type="ending"] .player-content h2 {
    font-size: 39px;
  }
  .ending-values {
    margin-top: 19px;
    font-size: 6px;
  }
  .cinema[data-scene-type="ending"] .player-content > p {
    font-size: 11px;
    margin-top: 18px;
  }
  .reflection-drawer {
    margin-top: 18px;
  }
  .cinema .ending-actions {
    margin-top: 15px;
  }
  .character-portrait {
    height: 220px;
  }
  .character-portrait > img {
    top: -60px;
  }
  .character-bio {
    padding: 25px;
  }
  .character-bio h2 {
    font-size: 34px;
  }
}
.scene-actor > img {
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
}
.cinema.class-mode .player-content {
  padding: 0;
}
@media (max-width: 550px) {
  .cinema-actors [data-actor="putra-pandan"] .actor-label {
    left: 28%;
    font-size: 8px;
    max-width: 132px;
    white-space: normal;
    text-align: left;
    line-height: 1.4;
  }
  .cinema[data-scene-type="story"]:not([data-layout="character"])
    .cinema-actors:has([data-actor="putra-pandan"].is-visible)
    [data-actor="made-pandan"] {
    left: 62% !important;
    height: 62% !important;
  }
  .cinema[data-scene-type="story"]:not([data-layout="character"])
    .cinema-actors:has([data-actor="putra-pandan"].is-visible)
    [data-actor="putra-pandan"] {
    left: 82% !important;
    height: 55% !important;
  }
  .cinema .player-tool {
    min-height: 36px;
  }
  .scene-hotspot {
    min-height: 40px;
  }
  .map-zoom button {
    width: 35px;
    height: 35px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-image-layer,
  .scene-actor,
  .map-geography {
    transition: none !important;
  }
  .name-reveal > span,
  .name-reveal > i {
    display: none;
  }
  .name-reveal > b {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* enhancements.css — aturan bersama *//* Story v3: illustrated details, independently selectable reading modes and briefs. */
.cinema .class-hint > details {
  width: 100%;
}
.class-hint summary {
  display: flex;
  align-items: center;
  gap: 11px;
  list-style: none;
  cursor: pointer;
}
.class-hint summary::-webkit-details-marker {
  display: none;
}
.class-hint summary > .icon {
  width: 17px;
  height: 17px;
}
.class-hint summary > span {
  margin-left: auto;
  font-size: 15px;
  font-weight: 300;
}
.class-hint details[open] summary > span {
  transform: rotate(45deg);
}
.class-hint details > p {
  margin-left: 28px;
}
.reading-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.reading-choices button {
  padding: 14px 17px;
  text-align: left;
  border: 1px solid #355e4e30;
  border-radius: 3px;
  color: #365a4c;
}
.reading-choices button[aria-pressed="true"] {
  background: #dce3d4;
  border-color: #68806c;
}
.reading-choices strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.reading-choices span {
  display: block;
  font-size: 10px;
  margin-top: 5px;
  line-height: 1.6;
  color: #6e7a64;
}
.reading-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #f5efdc40;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  background: #153b4560;
}
.reading-toggle button {
  font-size: 9px;
  color: #f0eedb;
  padding: 8px 10px;
  border-radius: 2px;
  white-space: nowrap;
}
.reading-toggle button[aria-pressed="true"] {
  background: #ede8d8;
  color: #315549;
}
.cinema .player-tools {
  margin-left: auto;
}
.cinema .visual-toggle {
  margin-right: 2px;
}
.cinema .chapter-trigger {
  gap: 12px;
}
.detail-dialog {
  width: min(850px, calc(100% - 40px));
  padding: 0;
  overflow: auto;
  max-height: 90dvh;
  background: #eeecdd;
}
.detail-dialog[open] {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.detail-visual {
  position: relative;
  min-height: 400px;
  background: #ccd5bd;
}
.detail-visual img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
.detail-visual small {
  position: absolute;
  bottom: 17px;
  left: 22px;
  font-size: 7px;
  letter-spacing: 1.3px;
  color: #fff8df;
  text-shadow: 0 1px 5px #12392f;
  background: #1b453a80;
  padding: 6px 9px;
}
.detail-copy {
  padding: 55px 35px 35px;
  align-self: center;
}
.detail-copy .cinema-kicker {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #738269;
}
.detail-copy h2 {
  font-size: 37px;
  line-height: 1.15;
  margin-top: 20px;
  color: #315a48;
}
.detail-copy p {
  font-size: 13px;
  line-height: 1.9;
  color: #68775f;
  margin-top: 23px;
}
.detail-copy .text-link {
  font-size: 11px;
  margin-top: 30px;
}
.detail-dialog .close-dialog {
  z-index: 2;
  background: #efebdcdd;
}/* Fit the map to its available height, including its caption. */
.cinema[data-scene-type="map"] .scene-interaction {
  overflow: visible;
}
.map-board {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.map-canvas {
  min-height: 0;
  flex: 1 1 0;
  aspect-ratio: auto;
}
.map-info {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  flex: 0 0 auto;
  padding: 14px 22px;
}
.map-place-image {
  width: 88px;
  height: 78px;
  object-fit: cover;
  border-radius: 2px;
}
.map-info h3 {
  font-size: 27px;
  line-height: 1.05;
  margin-top: 7px;
}
.map-info p {
  font-size: 10px;
  line-height: 1.7;
  margin-top: 8px;
  max-width: 520px;
}
.map-info .cinema-kicker {
  font-size: 6px;
}
.map-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.map-travel,
.map-video {
  font-size: 9px;
  white-space: nowrap;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 6px;
  border-bottom: 1px solid #8fa67e;
}
.map-video .icon {
  width: 13px;
  height: 13px;
}
.map-disclaimer {
  flex: 0 0 auto;
  font-size: 7px;
  padding: 0 22px 11px;
  margin: 0;
  line-height: 1.5;
}
.map-dialog #map-dialog-slot {
  height: min(510px, 65dvh);
}
.map-dialog .map-board {
  max-width: none;
}
.map-pin strong {
  font-size: 25px;
}
.map-pin small {
  font-size: 8px;
}
.cinema[data-reading="narasi"] .player-content {
  left: 6%;
  bottom: 130px;
  max-width: 560px;
  width: 45%;
  max-height: calc(100% - 240px);
  padding: 22px 25px !important;
  border-radius: 3px;
  background: linear-gradient(110deg, #143942f5, #143942b3);
  backdrop-filter: blur(8px);
  text-align: left;
  transform: none;
}
.cinema[data-reading="narasi"] .player-content h2 {
  font-size: 41px;
  line-height: 1.12;
  letter-spacing: -1.2px;
}
.cinema[data-reading="narasi"] .player-content > .cinema-kicker {
  margin-bottom: 16px;
}
.cinema[data-reading="narasi"] .player-content > p {
  font-size: 14px;
  line-height: 1.85;
  max-width: none;
  margin-top: 18px;
}
.cinema[data-reading="narasi"][data-layout="opening"] .player-content {
  bottom: 20%;
  max-width: 600px;
}
.cinema[data-reading="narasi"][data-layout="character"] .player-content {
  bottom: 140px;
  max-width: 540px;
}
.cinema[data-reading="narasi"][data-scene-type="map"] .player-content,
.cinema[data-reading="narasi"][data-scene-type="compare"] .player-content {
  top: 145px;
  bottom: auto;
  width: 29%;
  left: 5%;
  max-height: calc(100% - 265px);
}
.cinema[data-reading="narasi"][data-scene-type="map"] .player-content h2,
.cinema[data-reading="narasi"][data-scene-type="compare"] .player-content h2 {
  font-size: 34px;
}
.cinema[data-reading="narasi"][data-scene-type="map"] .player-content > p,
.cinema[data-reading="narasi"][data-scene-type="compare"] .player-content > p {
  font-size: 12px;
}
.cinema[data-reading="narasi"][data-scene-type="map"] .scene-interaction,
.cinema[data-reading="narasi"][data-scene-type="compare"] .scene-interaction {
  left: 38%;
  right: 5%;
  top: 145px;
  bottom: 130px;
}
.cinema[data-reading="narasi"] .map-info {
  grid-template-columns: 65px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
}
.cinema[data-reading="narasi"] .map-place-image {
  width: 65px;
  height: 65px;
}
.cinema[data-reading="narasi"] .map-actions {
  grid-column: 1/-1;
  flex-direction: row;
  gap: 22px;
}
.cinema[data-reading="narasi"] .map-info h3 {
  font-size: 24px;
}
.cinema[data-reading="narasi"] .map-disclaimer {
  padding-left: 16px;
  padding-right: 16px;
}
.cinema[data-reading="narasi"][data-scene-type="quiz"] .player-content {
  padding: 0 !important;
  background: none;
  backdrop-filter: none;
  max-width: 570px;
  width: 50%;
}
.cinema[data-reading="narasi"][data-scene-type="words"] .player-content,
.cinema[data-reading="narasi"][data-scene-type="name"] .player-content {
  width: 75%;
  max-width: 820px;
  bottom: 120px;
}
.cinema[data-reading="narasi"][data-scene-type="words"] .player-content h2,
.cinema[data-reading="narasi"][data-scene-type="name"] .player-content h2 {
  font-size: 32px;
}
.cinema[data-reading="narasi"][data-scene-type="words"] .scene-interaction,
.cinema[data-reading="narasi"][data-scene-type="name"] .scene-interaction {
  top: 100px;
  bottom: 350px;
}
.cinema[data-reading="narasi"] .word-pair strong {
  font-size: 85px;
}
.cinema[data-reading="narasi"] .name-reveal {
  font-size: 90px;
}
.cinema[data-reading="narasi"][data-scene-type="ending"] .player-content {
  width: 70%;
  max-width: 900px;
  left: 15%;
  bottom: 120px;
  max-height: calc(100% - 220px);
}
.cinema[data-reading="narasi"][data-scene-type="ending"] .player-content > p {
  max-width: 800px;
}
.cinema[data-reading="narasi"].class-mode .player-content {
  bottom: 145px;
}
.cinema[data-reading="narasi"].class-mode .class-hint {
  z-index: 8;
}
.cinema[data-scene-type="map"] .map-board {
  min-height: 0;
  max-height: 100%;
}
.cinema[data-scene-type="map"] .map-canvas {
  min-height: 0;
  flex: 1 1 0;
}/* A contributor writes a reusable story brief, with a private saved prompt. */
.brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(240px, 1fr);
  gap: 70px;
  align-items: start;
}
.brief-editor-title {
  margin-bottom: 27px;
}
.brief-editor-title .cinema-kicker,
.prompt-panel .cinema-kicker {
  font-size: 8px;
  letter-spacing: 2px;
  color: #7d8e6b;
}
.brief-editor-title h2,
.prompt-panel h2 {
  font-size: 43px;
  margin-top: 13px;
}
.brief-editor-title p,
.prompt-panel > p {
  font-size: 12px;
  line-height: 1.9;
  color: #7b846e;
  margin-top: 16px;
}
.brief-section {
  border-top: 1px solid #ced3bf;
}
.brief-section > summary {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 24px 0;
  list-style: none;
  font-size: 15px;
  cursor: pointer;
  color: #365b47;
}
.brief-section > summary::-webkit-details-marker {
  display: none;
}
.brief-section > summary > span {
  font-size: 10px;
  color: #929a7e;
}
.brief-section > summary > i {
  margin-left: auto;
  font-style: normal;
  font-size: 20px;
}
.brief-section[open] > summary > i {
  transform: rotate(45deg);
}
.brief-section-body {
  padding: 0 0 25px;
}
.brief-section-body label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 11px;
  line-height: 1.6;
  margin: 18px 0;
  color: #4f6854;
}
.brief-section-body label > span {
  display: contents;
}
.brief-section-body input,
.brief-section-body textarea,
.brief-section-body select {
  font-size: 12px;
  line-height: 1.7;
  background: #fffdf64a;
  border: 1px solid #c7ceba;
  border-radius: 3px;
  color: #345544;
  padding: 12px 13px;
  min-width: 0;
  width: 100%;
}
.brief-section-body textarea {
  resize: vertical;
  min-height: 80px;
}
.brief-section-body .form-row {
  align-items: start;
  gap: 20px;
}
.brief-section-body .form-row label {
  min-width: 0;
}
.brief-row {
  position: relative;
  border: 1px solid #ccd2bf;
  padding: 12px 22px 18px;
  margin: 20px 0;
  background: #e9ebdf60;
  border-radius: 3px;
}
.brief-row legend {
  font-size: 10px;
  letter-spacing: 1px;
  padding: 0 8px;
  color: #627a59;
}
.brief-row label:last-child {
  margin-bottom: 0;
}
.remove-row {
  position: absolute;
  right: 18px;
  top: -17px;
  background: var(--paper, #f5f2e8);
  padding: 7px;
  font-size: 9px;
  color: #896958;
  text-decoration: underline;
}
.brief-section-body > .text-link {
  font-size: 11px;
  margin: 0 0 12px;
}
.brief-help {
  font-size: 11px;
  line-height: 1.9;
  color: #7b876d;
  margin: 13px 0;
}
.brief-help.is-required {
  padding: 15px;
  border-left: 2px solid #a89b68;
  background: #e8e3cf60;
}
.brief-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 25px;
  border-top: 1px solid #ccd2bd;
}
.brief-actions .button {
  font-size: 11px;
  padding: 13px 17px;
  gap: 15px;
}
.prompt-panel {
  margin-top: 45px;
  padding: 30px;
  background: #e9ecdf;
  border: 1px solid #d0d8c1;
  border-radius: 3px;
  scroll-margin-top: 25px;
}
.prompt-panel textarea {
  display: block;
  width: 100%;
  min-height: 300px;
  max-height: 600px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.9;
  font-size: 12px;
  padding: 18px;
  background: #fffef7a0;
  color: #42604c;
  border: 1px solid #c3cdb5;
  margin-top: 22px;
}
.prompt-actions {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}
.prompt-actions .text-link {
  font-size: 11px;
  gap: 10px;
}
.prompt-panel small {
  font-size: 9px;
  line-height: 1.8;
  color: #7c896e;
  display: block;
  margin-top: 17px;
}
#prompt-notice {
  font-size: 11px;
  line-height: 1.8;
  color: #7c623e;
  margin-top: 14px;
}
#prompt-notice ul {
  padding-left: 18px;
  margin-top: 10px;
}
.draft-links {
  display: flex;
  gap: 17px;
  font-size: 10px;
  margin-top: 16px;
  color: #45664b;
}
.draft.is-editing {
  border-left: 2px solid #7e9570;
  padding-left: 15px;
}
.draft-list > .text-link {
  font-size: 11px;
  margin-top: 20px;
}
.brief-layout .draft-list {
  position: sticky;
  top: 30px;
}
@media (max-width: 1100px) {
  .reading-toggle button {
    padding: 8px;
    font-size: 8px;
  }
  .brief-layout {
    gap: 35px;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  }
}
@media (max-width: 800px) {
  .cinema .reading-toggle {
    position: absolute;
    top: 66px;
    left: 20px;
  }
  .cinema[data-reading="ringkas"][data-scene-type="map"] .player-content,
  .cinema[data-reading="ringkas"][data-scene-type="compare"] .player-content {
    top: 120px;
  }
  .cinema[data-reading="ringkas"][data-scene-type="map"] .scene-interaction,
  .cinema[data-reading="ringkas"][data-scene-type="compare"] .scene-interaction {
    top: 235px;
  }
  .cinema[data-reading="narasi"] .player-content {
    width: 65%;
    max-width: 550px;
  }
  .cinema[data-reading="narasi"][data-scene-type="map"] .player-content,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .player-content {
    left: 4%;
    width: 35%;
    top: 130px;
    padding: 18px !important;
  }
  .cinema[data-reading="narasi"][data-scene-type="map"] .scene-interaction,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .scene-interaction {
    left: 42%;
    right: 4%;
    top: 130px;
  }
  .cinema[data-reading="narasi"] .map-place-image {
    display: none;
  }
  .cinema[data-reading="narasi"] .map-info {
    grid-template-columns: 1fr;
  }
  .cinema[data-reading="narasi"] .map-actions {
    gap: 14px;
    flex-wrap: wrap;
  }
  .cinema[data-reading="narasi"] .map-info h3 {
    font-size: 21px;
  }
  .detail-copy {
    padding: 45px 24px 30px;
  }
  .detail-copy h2 {
    font-size: 31px;
  }
  .brief-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .brief-layout .draft-list {
    position: static;
    order: -1;
  }
  .brief-layout .draft-list:has(.draft-empty) {
    order: 1;
  }
  .brief-layout .draft {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 12px);
    margin-right: 12px;
  }
  .brief-layout .draft-list > .brief-help {
    display: none;
  }
}
@media (max-width: 550px) {
  .reading-toggle button {
    font-size: 8px;
    padding: 7px 12px;
  }
  .cinema-hotspots {
    top: 111px;
    left: 22px;
    right: 22px;
    gap: 10px;
  }
  .reading-choices {
    margin: 14px 0;
    gap: 9px;
  }
  .reading-choices button {
    padding: 11px;
  }
  .reading-choices strong {
    font-size: 10px;
  }
  .reading-choices span {
    font-size: 8px;
  }
  .style-choice {
    height: 270px;
  }
  .style-footnote {
    margin-top: 12px;
  }
  .detail-dialog {
    width: calc(100% - 26px);
  }
  .detail-dialog[open] {
    display: block;
  }
  .detail-visual {
    height: 250px;
    min-height: 0;
  }
  .detail-copy {
    padding: 28px;
  }
  .detail-copy h2 {
    font-size: 32px;
    margin-top: 15px;
  }
  .detail-copy p {
    font-size: 12px;
    margin-top: 18px;
  }
  .detail-copy .text-link {
    font-size: 10px;
    margin-top: 23px;
  }
  .map-info {
    padding: 13px 15px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
  }
  .map-place-image {
    width: 62px;
    height: 73px;
  }
  .map-info h3 {
    font-size: 24px;
    margin-top: 5px;
  }
  .map-info p {
    font-size: 9px;
    line-height: 1.75;
    margin-top: 7px;
  }
  .map-actions {
    grid-column: 1/-1;
    flex-direction: row;
    gap: 23px;
  }
  .map-travel,
  .map-video {
    font-size: 9px;
    gap: 9px;
    padding-bottom: 5px;
  }
  .map-disclaimer {
    font-size: 6px;
    padding: 0 15px 12px;
  }
  .cinema[data-scene-type="map"] .scene-interaction {
    bottom: 115px;
  }
  .cinema[data-scene-type="map"] .map-board {
    height: 100%;
    min-height: 0;
  }
  .cinema[data-scene-type="map"] .map-canvas {
    min-height: 0;
  }
  .cinema[data-reading="ringkas"][data-scene-type="map"] .player-content,
  .cinema[data-reading="ringkas"][data-scene-type="compare"] .player-content {
    top: 120px;
  }
  .cinema[data-reading="ringkas"][data-scene-type="map"] .scene-interaction,
  .cinema[data-reading="ringkas"][data-scene-type="compare"] .scene-interaction {
    top: 245px;
  }
  .cinema[data-reading="narasi"] .player-content,
  .cinema[data-reading="narasi"][data-layout="opening"] .player-content,
  .cinema[data-reading="narasi"][data-layout="character"] .player-content {
    left: 19px;
    right: 19px;
    width: auto;
    max-width: none;
    bottom: 113px;
    max-height: calc(100% - 250px);
    padding: 21px !important;
  }
  .cinema[data-reading="narasi"] .player-content h2 {
    font-size: 31px;
    letter-spacing: -0.8px;
  }
  .cinema[data-reading="narasi"] .player-content > .cinema-kicker {
    font-size: 6px;
    margin-bottom: 14px;
  }
  .cinema[data-reading="narasi"] .player-content > p {
    font-size: 12px;
    line-height: 1.85;
    margin-top: 15px;
    max-width: none;
  }
  .cinema[data-reading="narasi"][data-scene-type="map"] .player-content,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .player-content {
    top: auto;
    bottom: 107px;
    left: 18px;
    right: 18px;
    width: auto;
    max-height: 245px;
    padding: 17px 19px !important;
  }
  .cinema[data-reading="narasi"][data-scene-type="map"] .player-content h2,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .player-content h2 {
    font-size: 24px;
  }
  .cinema[data-reading="narasi"][data-scene-type="map"] .player-content > .cinema-kicker,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .player-content > .cinema-kicker {
    margin-bottom: 9px;
  }
  .cinema[data-reading="narasi"][data-scene-type="map"] .player-content > p,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .player-content > p {
    font-size: 10px;
    line-height: 1.8;
    margin-top: 10px;
  }
  .cinema[data-reading="narasi"][data-scene-type="map"] .scene-interaction,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .scene-interaction {
    left: 18px;
    right: 18px;
    top: 116px;
    bottom: 369px;
  }
  .cinema[data-reading="narasi"] .map-info {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 9px;
    padding: 10px 12px;
  }
  .cinema[data-reading="narasi"] .map-place-image {
    display: block;
    width: 52px;
    height: 55px;
  }
  .cinema[data-reading="narasi"] .map-info h3 {
    font-size: 21px;
  }
  .cinema[data-reading="narasi"] .map-info p {
    font-size: 8px;
    line-height: 1.7;
    margin-top: 4px;
  }
  .cinema[data-reading="narasi"] .map-actions {
    gap: 20px;
  }
  .cinema[data-reading="narasi"] .map-travel,
  .cinema[data-reading="narasi"] .map-video {
    font-size: 8px;
  }
  .cinema[data-reading="narasi"] .map-disclaimer {
    padding: 0 12px 8px;
    font-size: 5px;
  }
  .cinema[data-reading="narasi"] .map-pin strong {
    font-size: 21px;
  }
  .cinema[data-reading="narasi"] .map-pin small {
    font-size: 6px;
  }
  .cinema[data-reading="narasi"][data-scene-type="words"] .scene-interaction,
  .cinema[data-reading="narasi"][data-scene-type="name"] .scene-interaction {
    top: 130px;
    bottom: 435px;
  }
  .cinema[data-reading="narasi"] .word-pair strong {
    font-size: 59px;
  }
  .cinema[data-reading="narasi"] .word-pair button > span {
    font-size: 6px;
  }
  .cinema[data-reading="narasi"] .name-reveal {
    font-size: 56px;
  }
  .cinema[data-reading="narasi"] .name-reveal > b {
    font-size: 68px;
  }
  .cinema[data-reading="narasi"][data-scene-type="words"] .player-content,
  .cinema[data-reading="narasi"][data-scene-type="name"] .player-content {
    width: auto;
    bottom: 110px;
    max-height: 310px;
  }
  .cinema[data-reading="narasi"][data-scene-type="quiz"] .player-content {
    width: auto;
    max-width: none;
    left: 20px;
    right: 20px;
    max-height: calc(100% - 230px);
    bottom: 110px;
  }
  .cinema[data-reading="narasi"][data-scene-type="ending"] .player-content {
    width: auto;
    left: 19px;
    right: 19px;
    bottom: 110px;
    max-height: calc(100% - 240px);
  }
  .cinema[data-reading="narasi"].class-mode .player-content,
  .cinema[data-reading="narasi"].class-mode[data-scene-type="ending"] .player-content {
    bottom: 215px;
    max-height: calc(100% - 345px);
  }
  .cinema[data-reading="narasi"].class-mode[data-scene-type="map"] .scene-interaction,
  .cinema[data-reading="narasi"].class-mode[data-scene-type="compare"] .scene-interaction {
    bottom: 475px;
  }
  .cinema[data-reading="narasi"].class-mode[data-scene-type="map"] .player-content,
  .cinema[data-reading="narasi"].class-mode[data-scene-type="compare"] .player-content {
    max-height: 245px;
  }
  .brief-editor-title h2,
  .prompt-panel h2 {
    font-size: 35px;
  }
  .brief-section > summary {
    font-size: 13px;
    gap: 12px;
    padding: 21px 0;
  }
  .brief-row {
    padding: 8px 14px 15px;
  }
  .brief-section-body .form-row {
    display: block;
  }
  .brief-section-body label {
    font-size: 11px;
  }
  .brief-section-body input,
  .brief-section-body textarea,
  .brief-section-body select {
    font-size: 16px;
  }
  .brief-actions {
    gap: 10px;
  }
  .brief-actions .button {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
  .prompt-panel {
    padding: 23px 19px;
  }
  .prompt-panel textarea {
    font-size: 12px;
    padding: 13px;
  }
  .prompt-actions {
    gap: 23px;
  }
  .brief-layout .draft {
    width: 100%;
    margin: 0;
  }
  .brief-help {
    font-size: 10px;
  }
}
@media (max-height: 720px) and (min-width: 801px) {
  .cinema[data-reading="narasi"][data-scene-type="map"] .player-content,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .player-content {
    top: 110px;
    max-height: calc(100% - 230px);
  }
  .cinema[data-reading="narasi"][data-scene-type="map"] .scene-interaction,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .scene-interaction {
    top: 110px;
    bottom: 120px;
  }
  .cinema[data-reading="narasi"] .player-content h2 {
    font-size: 34px;
  }
  .cinema[data-reading="narasi"] .player-content > p {
    font-size: 12px;
  }
  .cinema[data-reading="narasi"][data-scene-type="words"] .scene-interaction,
  .cinema[data-reading="narasi"][data-scene-type="name"] .scene-interaction {
    top: 80px;
    bottom: 325px;
  }
  .cinema[data-reading="narasi"] .word-pair strong {
    font-size: 63px;
  }
  .cinema[data-reading="narasi"] .name-reveal {
    font-size: 70px;
  }
  .cinema[data-reading="narasi"][data-scene-type="ending"] .player-content h2 {
    font-size: 36px;
  }
}
@media (max-height: 740px) and (max-width: 550px) {
  .cinema[data-reading="narasi"][data-scene-type="map"] .scene-interaction,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .scene-interaction {
    top: 105px;
    bottom: 335px;
  }
  .cinema[data-reading="narasi"][data-scene-type="map"] .player-content,
  .cinema[data-reading="narasi"][data-scene-type="compare"] .player-content {
    bottom: 103px;
    max-height: 220px;
  }
  .cinema[data-reading="narasi"] .map-place-image {
    height: 35px;
    width: 45px;
  }
  .cinema[data-reading="narasi"] .map-info {
    padding: 8px 12px;
  }
  .cinema[data-reading="narasi"][data-scene-type="words"] .scene-interaction,
  .cinema[data-reading="narasi"][data-scene-type="name"] .scene-interaction {
    top: 110px;
    bottom: 385px;
  }
  .cinema[data-reading="narasi"][data-scene-type="words"] .player-content,
  .cinema[data-reading="narasi"][data-scene-type="name"] .player-content {
    max-height: 270px;
  }
  .reading-choices span {
    display: none;
  }
  .style-choice {
    height: 230px;
  }
}

@media (max-height: 740px) and (max-width: 550px) {
  .cinema[data-reading="narasi"].class-mode[data-scene-type="map"] .scene-interaction,
  .cinema[data-reading="narasi"].class-mode[data-scene-type="compare"] .scene-interaction {
    top: 105px;
    bottom: 365px;
  }
  .cinema[data-reading="narasi"].class-mode[data-scene-type="map"] .player-content,
  .cinema[data-reading="narasi"].class-mode[data-scene-type="compare"] .player-content {
    max-height: 190px;
  }
  .cinema .class-hint details > p {
    margin-left: 0;
  }
  .cinema .class-hint summary > .icon {
    width: 14px;
    height: 14px;
  }
}
.cinema[data-scene-type="compare"] .compare-frame {
  min-height: 0;
}
@media (max-height: 740px) and (max-width: 550px) {
  .cinema[data-reading="narasi"].class-mode[data-scene-type="map"] .map-pin {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    transform: translate(-50%, -50%);
  }
  .cinema[data-reading="narasi"].class-mode[data-scene-type="map"] .map-pin > span {
    width: 12px;
    height: 12px;
    min-width: 12px;
    margin: 0;
  }
  .cinema[data-reading="narasi"].class-mode[data-scene-type="map"] .map-pin strong {
    font-size: 15px;
    line-height: 1.2;
  }
  .cinema[data-reading="narasi"].class-mode[data-scene-type="map"] .map-pin small {
    display: none;
  }
  .cinema[data-reading="narasi"].class-mode[data-scene-type="map"] .player-content,
  .cinema[data-reading="narasi"].class-mode[data-scene-type="compare"] .player-content {
    bottom: 155px;
  }
}
/* immersive.css — aturan bersama *//* Item exploration is another state of the same cinematic stage. */
.cinema .scene-actor {
  transition:
    height 1.2s cubic-bezier(0.2, 0.75, 0.2, 1),
    left 1.2s cubic-bezier(0.2, 0.75, 0.2, 1),
    bottom 1.2s cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 1.2s ease,
    opacity 0.7s ease;
  pointer-events: none;
}
.cinema .scene-actor.is-visible {
  pointer-events: none;
}
.cinema .scene-actor.is-visible::before {
  content: "";
  position: absolute;
  inset: 6% 25% 15%;
  pointer-events: auto;
  z-index: 1;
}
.cinema .scene-actor.is-visible .actor-label {
  pointer-events: auto;
  z-index: 2;
}
.cinema.is-exploring .scene-actor.is-visible::before,
.cinema.is-exploring .scene-actor.is-visible .actor-label {
  pointer-events: none;
}
.cinema .cinema-vignette {
  transition: background 1s ease;
}
.cinema .player-content,
.cinema .scene-interaction,
.cinema .cinema-hotspots,
.cinema .player-footer,
.cinema .class-hint {
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}
.cinema.is-exploring .player-content,
.cinema.is-exploring > .player-stage > .scene-interaction,
.cinema.is-exploring .cinema-hotspots,
.cinema.is-exploring .player-footer,
.cinema.is-exploring .class-hint {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
.cinema.is-exploring .cinema-vignette {
  background:
    linear-gradient(90deg, #092b36c9 0%, #0d303b71 36%, #0d303b00 70%),
    linear-gradient(0deg, #082b38ed 0%, #0e303b85 18%, transparent 65%, #12363c70 100%);
}
.focus-view {
  position: absolute;
  inset: 0;
  z-index: 7;
  color: #f7f0dd;
  pointer-events: none;
}
.focus-view[hidden] {
  display: none;
}
.focus-copy {
  position: absolute;
  left: 7%;
  bottom: 158px;
  width: 44%;
  max-width: 590px;
  max-height: calc(100% - 270px);
  overflow-y: auto;
  pointer-events: auto;
  padding: 4px 0;
}
.focus-copy > .cinema-kicker {
  font-size: 9px;
  letter-spacing: 2.5px;
  color: #d3dfbe;
  text-transform: uppercase;
  display: block;
  margin-bottom: 21px;
}
.focus-copy h2 {
  font-size: clamp(43px, 5.3vw, 76px);
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 1.04;
  max-width: 590px;
  outline: none;
  text-shadow: 0 2px 24px #0e303b35;
}
.focus-copy > p {
  font-size: 14px;
  line-height: 1.95;
  margin-top: 25px;
  color: #f0f0e1;
  max-width: 470px;
}
.focus-copy > small {
  display: block;
  font-size: 9px;
  line-height: 1.8;
  color: #d1dabcbb;
  margin-top: 18px;
  max-width: 460px;
}
.focus-copy > small:empty {
  display: none;
}
.focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 23px;
}
.focus-tags:empty {
  display: none;
}
.focus-tags > span {
  font-size: 8px;
  border-bottom: 1px solid #eff2da60;
  padding-bottom: 6px;
  color: #dce4c9;
}
.focus-source {
  font-size: 10px;
  letter-spacing: 0.3px;
  margin-top: 23px;
  border-bottom: 1px solid #f0ecd660;
  padding-bottom: 9px;
  color: #f1ebd7;
}
.focus-source[hidden] {
  display: none;
}
.focus-bottom {
  position: absolute;
  left: 35px;
  right: 35px;
  bottom: 29px;
  border-top: 1px solid #f1ecdc5e;
  padding-top: 19px;
  display: flex;
  align-items: center;
  gap: 25px;
  pointer-events: auto;
}
.focus-back {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  padding-right: 15px;
  color: #f4eedb;
}
.focus-back .icon {
  transform: rotate(180deg);
  width: 17px;
  height: 17px;
}
.focus-counter {
  margin-left: auto;
  font-size: 8px;
  letter-spacing: 2px;
  color: #e1e8ce;
}
.focus-next {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-left: auto;
  font-size: 11px;
  min-height: 44px;
  border-bottom: 1px solid #f1eed159;
  color: #f4efdf;
}
.focus-next > span {
  font-size: 23px;
  font-weight: 300;
}
.focus-next[hidden] {
  display: none;
}
.focus-interaction {
  pointer-events: auto;
  position: absolute;
  inset: 200px 12% 140px;
  display: none;
}
.cinema[data-focus-type="map"] .focus-interaction {
  display: block;
}
.cinema[data-focus-type="map"] .focus-copy {
  top: 100px;
  bottom: auto;
  width: auto;
  max-width: none;
  max-height: none;
}
.cinema[data-focus-type="map"] .focus-copy > .cinema-kicker {
  font-size: 7px;
  margin-bottom: 13px;
}
.cinema[data-focus-type="map"] .focus-copy h2 {
  font-size: 34px;
  letter-spacing: -1px;
}
.cinema[data-focus-type="map"] .focus-copy p {
  font-size: 11px;
  margin-top: 12px;
}
.focus-interaction .map-board {
  max-width: 1000px;
  margin: 0 auto;
  min-height: 0;
}
.focus-interaction .map-canvas {
  min-height: 0;
  flex: 1 1 0;
}
.cinema[data-focus-type="map"] .cinema-vignette {
  background: linear-gradient(0deg, #0d303be6, transparent 70%, #0d303b80);
}
.cinema.is-exploring .scene-actor .actor-label {
  opacity: 0;
  visibility: hidden;
}
.cinema.is-exploring .scene-actor {
  pointer-events: none;
}
.cinema[data-focus-type="character"] .scene-actor.is-visible {
  left: 77% !important;
  height: 185% !important;
  bottom: -100%;
  max-width: none;
  transform: translateX(-50%) scale(1);
}
.cinema[data-focus-type="character"] .scene-actor > img {
  mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
}
.cinema[data-focus-type="character"] .focus-copy {
  bottom: 143px;
  max-width: 500px;
  width: 39%;
}
.cinema[data-focus-type="character"] .focus-copy h2 {
  font-size: clamp(48px, 5.5vw, 80px);
}
.cinema audio {
  display: none;
}
@media (max-width: 1000px) {
  .focus-copy {
    width: 50%;
    left: 6%;
  }
  .focus-copy h2 {
    font-size: 55px;
  }
  .focus-copy > p {
    font-size: 13px;
  }
  .cinema[data-focus-type="character"] .focus-copy {
    width: 44%;
  }
  .cinema[data-focus-type="character"] .scene-actor.is-visible {
    left: 80% !important;
    height: 175% !important;
    bottom: -95%;
  }
  .focus-interaction {
    inset: 205px 7% 135px;
  }
}
@media (max-width: 800px) {
  .focus-copy {
    bottom: 150px;
    max-height: calc(100% - 275px);
    width: 58%;
  }
  .focus-copy h2 {
    font-size: 49px;
  }
  .cinema[data-focus-type="map"] .focus-copy {
    top: 117px;
  }
  .focus-interaction {
    top: 225px;
  }
  .focus-bottom {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }
  .focus-copy > p {
    font-size: 12px;
  }
  .cinema[data-focus-type="character"] .focus-copy {
    width: 48%;
  }
  .cinema[data-focus-type="character"] .focus-copy h2 {
    font-size: 55px;
  }
}
@media (max-width: 550px) {
  .cinema.is-exploring .cinema-vignette {
    background: linear-gradient(
      0deg,
      #0b2b38fb 0%,
      #0d2c38da 18%,
      #10313a9c 37%,
      transparent 69%,
      #0f303c90 100%
    );
  }
  .focus-copy {
    left: 25px;
    right: 25px;
    width: auto;
    bottom: 135px;
    max-width: none;
    max-height: calc(100% - 280px);
    padding: 0;
  }
  .focus-copy > .cinema-kicker {
    font-size: 7px;
    letter-spacing: 1.8px;
    margin-bottom: 18px;
  }
  .focus-copy h2 {
    font-size: 43px;
    letter-spacing: -1.5px;
    max-width: 340px;
    line-height: 1.07;
  }
  .focus-copy > p {
    font-size: 12px;
    line-height: 1.9;
    margin-top: 21px;
    max-width: 340px;
  }
  .focus-copy > small {
    font-size: 8px;
    margin-top: 17px;
    line-height: 1.85;
  }
  .focus-tags {
    gap: 13px;
    margin-top: 18px;
  }
  .focus-tags > span {
    font-size: 7px;
  }
  .focus-source {
    font-size: 9px;
    margin-top: 18px;
  }
  .focus-bottom {
    left: 21px;
    right: 21px;
    bottom: 18px;
    gap: 12px;
    padding-top: 13px;
    flex-wrap: wrap;
  }
  .focus-back {
    font-size: 9px;
    gap: 7px;
    padding-right: 0;
    min-height: 44px;
  }
  .focus-back .icon {
    width: 14px;
    height: 14px;
  }
  .focus-counter {
    font-size: 7px;
    letter-spacing: 1px;
    margin-left: auto;
  }
  .focus-next {
    font-size: 9px;
    gap: 13px;
    min-height: 44px;
  }
  .focus-next > span {
    font-size: 20px;
  }
  .cinema[data-focus-type="character"] .scene-actor.is-visible {
    left: 61% !important;
    height: 150% !important;
  }
  .cinema[data-focus-type="character"] .focus-copy {
    left: 25px;
    right: 25px;
    width: auto;
    bottom: 130px;
    max-width: none;
    max-height: 47%;
  }
  .cinema[data-focus-type="character"] .focus-copy h2 {
    font-size: 42px;
  }
  .cinema[data-focus-type="character"] .focus-copy > p {
    font-size: 11px;
    line-height: 1.85;
  }
  .cinema[data-focus-type="character"] .focus-copy > small {
    font-size: 7px;
    max-width: 320px;
  }
  .cinema[data-focus-type="character"] .focus-tags {
    margin-top: 17px;
  }
  .cinema[data-focus-type="map"] .focus-copy {
    left: 24px;
    right: 24px;
    top: 124px;
    bottom: auto;
    max-height: none;
  }
  .cinema[data-focus-type="map"] .focus-copy h2 {
    font-size: 29px;
  }
  .cinema[data-focus-type="map"] .focus-copy > .cinema-kicker {
    font-size: 6px;
    margin-bottom: 12px;
  }
  .cinema[data-focus-type="map"] .focus-copy p {
    font-size: 9px;
    margin-top: 11px;
  }
  .focus-interaction {
    left: 18px;
    right: 18px;
    top: 240px;
    bottom: 120px;
  }
  .focus-interaction .map-info {
    grid-template-columns: 62px minmax(0, 1fr);
  }
  .focus-interaction .map-actions {
    grid-column: 1/-1;
  }
  .focus-interaction .map-place-image {
    display: block;
    width: 62px;
    height: 62px;
  }
  .focus-interaction .map-info p {
    display: block;
    font-size: 9px;
  }
  .focus-interaction .map-pin strong {
    font-size: 25px;
  }
}
@media (max-height: 720px) and (min-width: 551px) {
  .focus-copy {
    bottom: 127px;
    max-height: calc(100% - 230px);
  }
  .focus-copy h2 {
    font-size: 51px;
  }
  .focus-copy > p {
    font-size: 12px;
    line-height: 1.9;
    margin-top: 21px;
  }
  .focus-copy > .cinema-kicker {
    margin-bottom: 18px;
  }
  .cinema[data-focus-type="character"] .focus-copy {
    bottom: 123px;
    max-height: calc(100% - 220px);
  }
  .cinema[data-focus-type="character"] .focus-copy h2 {
    font-size: 57px;
  }
  .focus-tags {
    margin-top: 18px;
  }
  .focus-copy > small {
    margin-top: 15px;
  }
  .focus-source {
    margin-top: 15px;
  }
  .cinema[data-focus-type="map"] .focus-copy {
    top: 90px;
  }
  .cinema[data-focus-type="map"] .focus-copy h2 {
    font-size: 31px;
  }
  .focus-interaction {
    top: 190px;
    bottom: 120px;
  }
}
@media (max-height: 740px) and (max-width: 550px) {
  .focus-copy {
    bottom: 125px;
    max-height: calc(100% - 260px);
  }
  .focus-copy h2 {
    font-size: 37px;
  }
  .focus-copy > p {
    font-size: 11px;
    line-height: 1.9;
    margin-top: 17px;
  }
  .cinema[data-focus-type="character"] .focus-copy {
    bottom: 116px;
    max-height: 48%;
  }
  .cinema[data-focus-type="character"] .focus-copy h2 {
    font-size: 36px;
  }
  .cinema[data-focus-type="character"] .focus-copy > p {
    font-size: 10px;
    line-height: 1.8;
  }
  .cinema[data-focus-type="character"] .scene-actor.is-visible {
    height: 155% !important;
    bottom: -73%;
  }
  .focus-copy > small {
    font-size: 7px;
  }
  .focus-bottom {
    padding-top: 9px;
    bottom: 13px;
  }
  .cinema[data-focus-type="map"] .focus-copy {
    top: 113px;
  }
  .focus-interaction {
    top: 216px;
    bottom: 112px;
  }
  .focus-interaction .map-info {
    padding: 10px 12px;
  }
  .focus-interaction .map-info p {
    font-size: 8px;
  }
  .focus-interaction .map-place-image {
    width: 50px;
    height: 55px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinema .player-content,
  .cinema .scene-interaction,
  .cinema .cinema-hotspots,
  .cinema .player-footer,
  .cinema .class-hint,
  .cinema .cinema-vignette {
    transition: none;
  }
}
@media (max-width: 550px) {
  .cinema[data-focus-type="character"] .scene-actor.is-visible {
    bottom: -55%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinema .scene-actor {
    transition: none !important;
  }
}
@media (max-width: 550px) {
  .cinema[data-focus-type="character"] .focus-view::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #092b38fa 0%, #0c2e38df 23%, #0c2e38a0 40%, transparent 63%);
    pointer-events: none;
  }
  .cinema[data-focus-type="character"] .focus-copy,
  .cinema[data-focus-type="character"] .focus-bottom {
    z-index: 1;
  }
}
/* library.css — aturan bersama *//* PustakaDongeng: a shared library and a simpler stage for early years. */
.brand {
  white-space: nowrap;
}
.brand small {
  letter-spacing: 1.3px;
  font-size: 6px;
}
.library-grid {
  display: grid;
}
.library-card.story-card {
  min-height: 0;
}
.library-card .story-cover {
  flex: none;
}
.library-card .story-cover > img:not(.card-animal) {
  object-position: center;
}
.library-card .story-cover > .card-animal {
  width: 63%;
  height: 110%;
  left: 35%;
  top: 4%;
  object-fit: contain;
  z-index: -1;
}
.library-card .story-cover:after {
  z-index: 0;
  pointer-events: none;
}
.library-card .story-cover .cover-label,
.library-card .story-cover .cover-play {
  z-index: 1;
}
.library-card .story-meta {
  margin-bottom: 23px;
}
.library-grid > [hidden] {
  display: none;
}
.catalog-controls {
  display: flex;
  flex-wrap: wrap;
}
.catalog-controls .filter-tabs {
  margin-right: auto;
  flex-wrap: wrap;
}
.catalog-controls .search-box {
  min-width: 210px;
}
.catalog-controls .region-select {
  min-width: 130px;
}
.catalog-controls select {
  width: 100%;
}
.cinema .player-brand {
  white-space: nowrap;
  font-size: 16px;
}
.cinema .player-header {
  gap: 18px;
}
.cinema .chapter-trigger {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cinema .reading-toggle button {
  font-size: 8px;
  padding: 8px;
}
.animal-sound-toggle[hidden],
.animal-feedback[hidden],
#open-map[hidden] {
  display: none !important;
}
.animal-sound-toggle {
  position: absolute;
  right: 7%;
  top: 105px;
  z-index: 21;
  font-size: 10px;
  padding: 10px 14px;
  border: 1px solid #edf0d06b;
  border-radius: 20px;
  background: #244d48bd;
  color: #fff3db;
  backdrop-filter: blur(6px);
}
.animal-feedback {
  position: absolute;
  right: 7%;
  top: 155px;
  z-index: 22;
  padding: 12px 18px;
  border-radius: 22px 22px 3px 22px;
  background: #fff0d1;
  color: #4b6543;
  font-size: 15px;
  max-width: 280px;
  box-shadow: 0 6px 20px #20432e12;
  pointer-events: none;
}
.cinema[data-audience="paud-tk"] .cinema-vignette {
  background:
    linear-gradient(90deg, #173f494d, transparent 60%),
    linear-gradient(0deg, #153e48f5, transparent 58%, #204b4250);
}
.cinema[data-audience="paud-tk"] .scene-actor {
  aspect-ratio: 1/1;
  bottom: 105px;
  filter: drop-shadow(0 12px 12px #305d3330);
}
.cinema[data-audience="paud-tk"] .scene-actor > img {
  mask-image: none;
}
.cinema[data-audience="paud-tk"] .actor-label {
  top: 65%;
  left: 45%;
  font-size: 10px;
  background: #fff0d1e6;
  color: #4c6b47;
  text-shadow: none;
  white-space: nowrap;
}
.cinema[data-audience="paud-tk"] .actor-pulse {
  border-color: #8caa6d;
  background: #faf2d8;
  color: #50724e;
}
.cinema[data-audience="paud-tk"] .player-content {
  left: 7%;
  bottom: 150px;
  max-width: 470px;
  width: 39%;
}
.cinema[data-audience="paud-tk"] .player-content h2 {
  font-size: clamp(42px, 4.5vw, 66px);
  line-height: 1.08;
  letter-spacing: -1.7px;
}
.cinema[data-audience="paud-tk"] .player-content > p {
  font-size: 17px;
  line-height: 1.8;
  max-width: 390px;
}
.cinema[data-audience="paud-tk"][data-reading="narasi"] .player-content {
  padding: 24px !important;
  max-width: 550px;
  width: 44%;
  background: #173f48e8;
  bottom: 135px;
  max-height: calc(100% - 260px);
}
.cinema[data-audience="paud-tk"][data-reading="narasi"] .player-content h2 {
  font-size: 36px;
}
.cinema[data-audience="paud-tk"][data-reading="narasi"] .player-content > p {
  font-size: 15px;
  line-height: 1.9;
  max-width: none;
}
.cinema[data-audience="paud-tk"] .reflection-drawer {
  display: none;
}
.cinema[data-audience="paud-tk"][data-scene-type="ending"] .player-content {
  left: 7%;
  transform: none;
  text-align: left;
  width: 48%;
  max-width: 600px;
  bottom: 130px;
}
.cinema[data-audience="paud-tk"][data-scene-type="ending"] .ending-values {
  justify-content: flex-start;
  font-size: 9px;
  line-height: 1.8;
}
.cinema[data-audience="paud-tk"] .kindness-pledge {
  display: block;
  padding: 12px 17px;
  background: #f3dfaa;
  color: #446644;
  border-radius: 24px;
  font-size: 13px;
  margin-top: 22px;
  line-height: 1.6;
}
.cinema[data-audience="paud-tk"] .ending-actions {
  justify-content: flex-start;
}
.cinema[data-audience="paud-tk"] .cinema-quiz {
  padding: 24px 27px;
}
.cinema[data-audience="paud-tk"] .quiz-option {
  font-size: 14px;
  padding: 16px;
}
.cinema[data-audience="paud-tk"] .quiz-option > span {
  font-size: 0;
}
.cinema[data-audience="paud-tk"] [data-answer="0"] > span:before {
  content: "👂";
  font-size: 22px;
}
.cinema[data-audience="paud-tk"] [data-answer="1"] > span:before {
  content: "♪";
  font-size: 23px;
}
.cinema[data-audience="paud-tk"][data-scene-type="seek"] .scene-interaction {
  inset: 160px 5% 230px;
  z-index: 5;
}
.seek-garden {
  height: 100%;
  position: relative;
}
.seek-object {
  position: absolute;
  width: 90px;
  height: 90px;
  padding: 5px;
  filter: drop-shadow(0 9px 8px #35523935);
  transition: transform 0.3s;
}
.seek-object svg {
  width: 100%;
  height: 100%;
  display: block;
}
.seek-object:hover,
.seek-object.is-found {
  transform: scale(1.14) rotate(-5deg);
}
.seek-ball {
  left: 72%;
  top: 57%;
}
.seek-rock {
  left: 57%;
  top: 69%;
}
.seek-leaf {
  left: 83%;
  top: 64%;
}
.seek-feedback {
  font-size: 13px;
  background: #fbefd2;
  color: #426341;
  padding: 10px 17px;
  border-radius: 25px;
  position: absolute;
  right: 5%;
  bottom: -32px;
  max-width: 330px;
  text-align: center;
}
.cinema[data-audience="paud-tk"][data-scene-type="seek"] .player-content {
  width: 40%;
}
@media (min-width: 801px) {
  .cinema[data-audience="paud-tk"] .style-choice-actor {
    object-fit: contain;
  }
}
@media (max-width: 1100px) {
  .cinema .chapter-trigger {
    display: none;
  }
  .catalog-controls .filter-tabs {
    flex-basis: 100%;
  }
  .cinema[data-audience="paud-tk"] .player-content {
    max-width: 400px;
  }
}
@media (max-width: 800px) {
  .cinema .player-brand {
    font-size: 14px;
  }
  .cinema[data-audience="paud-tk"] .animal-sound-toggle {
    top: 69px;
    right: 20px;
    font-size: 9px;
    padding: 8px 11px;
  }
  .cinema[data-audience="paud-tk"] .animal-feedback {
    top: 115px;
    right: 20px;
    font-size: 13px;
  }
  .cinema[data-audience="paud-tk"] .player-content {
    width: 48%;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"] .player-content {
    width: 53%;
  }
}
@media (max-width: 550px) {
  .catalog-controls .search-box {
    width: 100%;
    min-width: 0;
  }
  .catalog-controls .region-select {
    flex: 1;
    min-width: 0;
  }
  .catalog-controls select {
    min-height: 43px;
  }
  .cinema .player-brand {
    font-size: 12px;
  }
  .cinema .player-brand > .icon {
    width: 16px;
    margin-right: 3px;
  }
  .cinema .player-header {
    gap: 5px;
    padding: 12px;
  }
  .cinema .player-tools {
    gap: 3px;
  }
  .cinema .player-tool {
    padding: 6px;
  }
  .cinema .reading-toggle {
    top: 61px;
    left: 16px;
  }
  .cinema .reading-toggle button {
    font-size: 7px;
    padding: 8px 9px;
  }
  .cinema[data-audience="paud-tk"] .animal-sound-toggle {
    top: 63px;
    right: 15px;
    font-size: 8px;
    padding: 8px 9px;
  }
  .cinema[data-audience="paud-tk"] .animal-feedback {
    top: 111px;
    right: 18px;
    font-size: 12px;
    padding: 10px 15px;
  }
  .cinema[data-audience="paud-tk"] .scene-actor {
    bottom: 250px;
  }
  .cinema[data-audience="paud-tk"] .cinema-actors [data-actor="luma"].is-visible {
    left: 48% !important;
    height: 47% !important;
  }
  .cinema[data-audience="paud-tk"] .cinema-actors [data-actor="pipi"].is-visible {
    left: 83% !important;
    height: 25% !important;
    bottom: 400px;
  }
  .cinema[data-audience="paud-tk"] .actor-label {
    top: 75%;
    left: 40%;
    font-size: 9px;
    gap: 7px;
    padding: 5px 8px;
  }
  .cinema[data-audience="paud-tk"] .actor-pulse {
    min-width: 23px;
    height: 23px;
    font-size: 14px;
  }
  .cinema[data-audience="paud-tk"] .player-content,
  .cinema[data-audience="paud-tk"][data-layout="opening"] .player-content {
    left: 23px;
    right: 23px;
    width: auto;
    max-width: none;
    bottom: 120px;
    max-height: 35%;
    padding: 0;
  }
  .cinema[data-audience="paud-tk"] .player-content h2,
  .cinema[data-audience="paud-tk"][data-layout="opening"] .player-content h2 {
    font-size: 35px;
    line-height: 1.08;
    letter-spacing: -1px;
  }
  .cinema[data-audience="paud-tk"] .player-content > p {
    font-size: 15px;
    line-height: 1.8;
    max-width: 320px;
    margin-top: 16px;
  }
  .cinema[data-audience="paud-tk"] .player-content > .cinema-kicker {
    font-size: 6px;
    margin-bottom: 16px;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"] .player-content {
    width: auto;
    left: 18px;
    right: 18px;
    bottom: 110px;
    max-height: 39%;
    padding: 20px !important;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"] .player-content h2 {
    font-size: 27px;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"] .player-content > p {
    font-size: 12px;
    line-height: 1.9;
    max-width: none;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"] .scene-actor {
    bottom: 365px;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"]
    .cinema-actors
    [data-actor="luma"].is-visible {
    height: 39% !important;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"]
    .cinema-actors
    [data-actor="pipi"].is-visible {
    height: 20% !important;
    bottom: 480px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="quiz"] .player-content {
    bottom: 115px;
    max-height: calc(100% - 240px);
  }
  .cinema[data-audience="paud-tk"] .cinema-quiz {
    padding: 23px 20px;
  }
  .cinema[data-audience="paud-tk"] .quiz-option {
    font-size: 13px;
    padding: 14px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="ending"] .player-content {
    left: 22px;
    right: 22px;
    bottom: 115px;
    width: auto;
    max-width: none;
    max-height: 48%;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="ending"] .player-content h2 {
    font-size: 34px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="ending"] .player-content > p {
    font-size: 13px;
  }
  .cinema[data-audience="paud-tk"] .kindness-pledge {
    font-size: 12px;
    margin-top: 17px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="ending"] .ending-values {
    font-size: 8px;
    gap: 14px;
    margin-top: 18px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="ending"] .scene-actor {
    bottom: 370px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="ending"]
    .cinema-actors
    [data-actor="luma"].is-visible {
    height: 39% !important;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="ending"]
    .cinema-actors
    [data-actor="pipi"].is-visible {
    bottom: 490px;
    height: 20% !important;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="seek"] .scene-interaction {
    inset: 165px 15px 300px;
  }
  .seek-object {
    width: 67px;
    height: 67px;
  }
  .seek-ball {
    left: 58%;
    top: 67%;
  }
  .seek-leaf {
    left: 78%;
    top: 59%;
  }
  .seek-rock {
    left: 39%;
    top: 75%;
  }
  .seek-feedback {
    bottom: -39px;
    left: 0;
    right: 0;
    font-size: 10px;
    padding: 9px 14px;
    max-width: none;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="seek"] .player-content {
    width: auto;
    bottom: 115px;
    max-height: 160px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="seek"]
    .cinema-actors
    [data-actor="luma"].is-visible {
    bottom: 320px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="seek"]
    .cinema-actors
    [data-actor="pipi"].is-visible {
    bottom: 470px;
  }
}
@media (max-height: 740px) and (max-width: 550px) {
  .cinema[data-audience="paud-tk"] .scene-actor {
    bottom: 225px;
  }
  .cinema[data-audience="paud-tk"] .cinema-actors [data-actor="pipi"].is-visible {
    bottom: 340px;
  }
  .cinema[data-audience="paud-tk"] .player-content {
    bottom: 110px;
  }
  .cinema[data-audience="paud-tk"] .player-content h2 {
    font-size: 31px;
  }
  .cinema[data-audience="paud-tk"] .player-content > p {
    font-size: 13px;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"] .scene-actor {
    bottom: 330px;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"]
    .cinema-actors
    [data-actor="pipi"].is-visible {
    bottom: 410px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="ending"] .scene-actor {
    bottom: 330px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="ending"]
    .cinema-actors
    [data-actor="pipi"].is-visible {
    bottom: 420px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="seek"] .scene-interaction {
    inset: 150px 15px 270px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="seek"]
    .cinema-actors
    [data-actor="luma"].is-visible {
    bottom: 290px;
  }
  .cinema[data-audience="paud-tk"][data-scene-type="seek"]
    .cinema-actors
    [data-actor="pipi"].is-visible {
    bottom: 390px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .seek-object {
    transition: none;
  }
}
@media (max-width: 550px) {
  .cinema[data-audience="paud-tk"][data-scene-type="seek"]
    .cinema-actors
    [data-actor="luma"].is-visible {
    height: 32% !important;
    left: 35% !important;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="seek"]
    .scene-interaction {
    inset: 145px 15px 455px;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="seek"] .player-content {
    max-height: 35%;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="seek"]
    .cinema-actors
    [data-actor="luma"].is-visible {
    bottom: 440px;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="seek"]
    .cinema-actors
    [data-actor="pipi"].is-visible {
    bottom: 530px;
  }
}
@media (max-height: 740px) and (max-width: 550px) {
  .cinema[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="seek"]
    .scene-interaction {
    inset: 135px 15px 380px;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="seek"] .player-content {
    max-height: 30%;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="seek"]
    .cinema-actors
    [data-actor="luma"].is-visible {
    bottom: 355px;
  }
  .cinema[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="seek"]
    .cinema-actors
    [data-actor="pipi"].is-visible {
    bottom: 420px;
  }
}
/* stage-v6.css — aturan bersama *//* Shared story stage: illustration first, text sits directly in the scene. */
#story-player .player-content,
#story-player .cinema-quiz,
#story-player .focus-copy,
#story-player .class-hint {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#story-player .player-content {
  padding: 0 !important;
  scrollbar-width: none;
  text-shadow: 0 2px 18px #102f35a3;
}
#story-player .focus-copy {
  scrollbar-width: none;
}
#story-player .focus-copy::-webkit-scrollbar {
  display: none;
}
#story-player .player-content::-webkit-scrollbar {
  display: none;
}
#story-player .cinema-quiz {
  padding: 0 !important;
  width: 100%;
  color: #fff2d9;
}
#story-player .cinema-quiz h2,
#story-player .cinema-quiz p,
#story-player .cinema-quiz .cinema-kicker,
#story-player .quiz-feedback {
  color: #fff2d9;
}
#story-player .cinema-quiz h2 {
  font-size: clamp(34px, 3.7vw, 54px);
  line-height: 1.08;
  letter-spacing: -1.1px;
}
#story-player .cinema-quiz p {
  font-size: 14px;
  line-height: 1.8;
  max-width: 500px;
  margin-top: 20px;
}
#story-player .quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 22px;
}
#story-player .quiz-option {
  background: none !important;
  border: 0;
  border-bottom: 1px solid #f4eadb6e;
  border-radius: 0;
  color: #fff2d9;
  padding: 15px 0 !important;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: none;
  min-height: 54px;
  text-shadow: 0 1px 10px #153e40;
}
#story-player .quiz-option > span {
  font-size: 11px !important;
  display: inline-block;
  color: #e8cf8b;
  min-width: 26px;
  background: none !important;
  border: 0;
  border-radius: 0;
}
#story-player .quiz-option > span:before {
  content: none !important;
}
#story-player .quiz-option:hover {
  border-color: #ffdf96;
  transform: translateX(5px);
}
#story-player .quiz-option.correct {
  color: #ffe5a6;
  border-bottom: 2px solid #ffe5a6;
}
#story-player .quiz-option.incorrect {
  color: #f9d2be;
  border-color: #f9d2be;
}
#story-player .quiz-option img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-right: 14px;
  vertical-align: middle;
  filter: drop-shadow(0 2px 3px #133c3a50);
}
#story-player .quiz-feedback {
  background: none;
  border: 0;
  margin-top: 17px;
  font-size: 12px;
  line-height: 1.8;
  padding: 0;
  min-height: 24px;
}
#story-player .quiz-reading-hint {
  display: none;
}
#story-player[data-scene-type="quiz"] .player-content {
  left: 7%;
  bottom: 145px;
  width: 40%;
  max-width: 550px;
  max-height: calc(100% - 260px);
  transform: none;
  text-align: left;
}
#story-player .animal-feedback {
  background: none;
  color: #fff2d9;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.7;
  max-width: 420px;
  text-shadow: 0 2px 14px #103b3e;
  padding: 0;
  left: 7%;
  right: auto;
  top: 130px;
}
#story-player .seek-feedback {
  background: none;
  color: #fff2d9;
  border: 0;
  border-radius: 0;
  text-shadow: 0 2px 14px #103b3e;
  font-size: 12px;
}
#story-player .seek-object img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
#story-player .scene-actor {
  isolation: isolate;
}
#story-player .scene-actor > img {
  position: absolute;
  inset: 0;
  transition: opacity 0.32s ease;
  mask-image: none;
}
#story-player .scene-actor > .actor-base {
  opacity: 1;
}
#story-player .scene-actor > .actor-reaction {
  opacity: 0;
  display: block;
}
#story-player .scene-actor > .actor-reaction[hidden] {
  display: none;
}
#story-player .scene-actor.is-reacting > .actor-base {
  opacity: 0;
}
#story-player .scene-actor.is-reacting > .actor-reaction {
  opacity: 1;
}
#story-player .kindness-pledge {
  border: 0;
  border-bottom: 1px solid #f4dfa0;
  border-radius: 0;
  background: none;
  color: #ffe1a0;
  padding: 8px 0;
  text-align: left;
  font-size: 14px;
}
#story-player .class-hint {
  color: #fff2d9;
  text-shadow: 0 2px 12px #173e40;
  padding: 0;
  font-size: 11px;
}
#story-player .class-hint details > p {
  color: inherit;
}
#story-player .player-tool:disabled {
  opacity: 0.4;
  cursor: default;
}
#story-player .cinema-vignette {
  background:
    linear-gradient(90deg, #10343ec4, transparent 72%),
    linear-gradient(0deg, #113c47f2, transparent 65%, #153c3f35);
}
#story-player[data-audience="paud-tk"] .player-content {
  width: 40%;
  max-width: 530px;
  bottom: 145px;
}
#story-player[data-audience="paud-tk"][data-reading="narasi"] .player-content {
  width: 43%;
  max-width: 570px;
  bottom: 140px;
  max-height: calc(100% - 255px);
}
#story-player[data-reading="narasi"] .player-content h2 {
  font-size: 37px;
  line-height: 1.1;
}
#story-player[data-reading="narasi"] .player-content p {
  font-size: 15px;
  line-height: 1.95;
}
#story-player .focus-object-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 30px #143f3e35);
}
#story-player[data-focus-type="object"] .focus-interaction {
  left: 52%;
  right: 7%;
  top: 130px;
  bottom: 135px;
  display: grid;
  place-items: center;
}
#story-player .story-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#story-player .story-prop {
  position: absolute;
  width: 125px;
  height: 125px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  transition: transform 0.25s;
}
#story-player .story-prop:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
#story-player .story-prop > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px #173f3830);
}
#story-player .story-prop > span {
  color: #fff2d9;
  font-size: 10px;
  white-space: nowrap;
  text-shadow: 0 2px 10px #123b38;
}
#story-player[data-audience="paud-tk"] .scene-interaction:has(.story-props) {
  inset: 105px 0 130px;
  pointer-events: none;
  z-index: 7;
}
.source-title {
  display: block;
  font: 22px var(--serif);
  color: var(--green);
  margin-bottom: 12px;
}
.story-credit {
  display: block;
  margin: 14px 0;
  color: #a6b786;
  letter-spacing: 0.2px;
}
#story-player[data-focus-type="character"] .scene-actor.is-visible {
  height: 185% !important;
  left: 76% !important;
  bottom: -95%;
}
@media (min-width: 801px) {
  #story-player[data-story="kaki-seribu-dan-kesabaran"]:not([data-focus-type])
    .scene-actor:nth-child(2) {
    height: 35% !important;
    left: 90% !important;
    bottom: 105px;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="quiz"] .scene-actor:first-child {
    height: 50% !important;
    left: 69% !important;
    bottom: 145px;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="quiz"] .scene-actor:nth-child(2) {
    height: 28% !important;
    left: 87% !important;
    bottom: 135px;
  }
  #story-player[data-reading="narasi"][data-audience="paud-tk"][data-scene-type="ending"]
    .player-content {
    width: 48%;
    max-width: 610px;
  }
}
@media (max-width: 800px) and (min-width: 551px) {
  #story-player[data-audience="paud-tk"] .player-content {
    width: 48%;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"] .player-content {
    width: 53%;
  }
  #story-player[data-scene-type="quiz"] .player-content {
    width: 49%;
  }
}
@media (max-width: 550px) {
  #story-player .cinema-vignette {
    background:
      linear-gradient(0deg, #103541fa 3%, #163d47c7 36%, transparent 80%),
      linear-gradient(180deg, #103b4350, transparent 25%);
  }
  #story-player[data-audience="paud-tk"] .player-content,
  #story-player[data-audience="paud-tk"][data-reading="narasi"] .player-content {
    left: 24px;
    right: 24px;
    width: auto;
    max-width: none;
    bottom: 112px;
    max-height: 36%;
    padding: 0 !important;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"] .player-content {
    max-height: 42%;
  }
  #story-player[data-reading="narasi"] .player-content h2 {
    font-size: 29px;
  }
  #story-player[data-reading="narasi"] .player-content p {
    font-size: 13px;
    line-height: 1.85;
  }
  #story-player[data-audience="paud-tk"] .scene-actor:first-child {
    height: 38% !important;
    left: 39% !important;
    bottom: 285px;
  }
  #story-player[data-audience="paud-tk"] .scene-actor:nth-child(2) {
    height: 25% !important;
    left: 78% !important;
    bottom: 390px;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"] .scene-actor:first-child {
    height: 32% !important;
    bottom: 390px;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"] .scene-actor:nth-child(2) {
    height: 21% !important;
    bottom: 490px;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="quiz"] .player-content {
    left: 24px;
    right: 24px;
    width: auto;
    bottom: 112px;
    max-height: 45%;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="quiz"]
    .player-content {
    max-height: 53%;
  }
  #story-player .cinema-quiz h2 {
    font-size: 30px !important;
  }
  #story-player .cinema-quiz p {
    font-size: 12px;
    line-height: 1.8;
    margin-top: 13px;
  }
  #story-player[data-reading="narasi"] .cinema-quiz p {
    font-size: 12px;
    line-height: 1.8;
  }
  #story-player .quiz-options {
    margin-top: 12px;
  }
  #story-player .quiz-option {
    font-size: 13px;
    min-height: 47px;
    padding: 10px 0 !important;
  }
  #story-player .quiz-option img {
    width: 37px;
    height: 37px;
    margin-right: 10px;
  }
  #story-player .quiz-feedback {
    font-size: 11px;
    margin-top: 12px;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="quiz"] .scene-actor:first-child {
    height: 28% !important;
    bottom: 440px;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="quiz"] .scene-actor:nth-child(2) {
    height: 19% !important;
    bottom: 510px;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="quiz"]
    .scene-actor:first-child {
    height: 24% !important;
    bottom: 535px;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="quiz"]
    .scene-actor:nth-child(2) {
    height: 17% !important;
    bottom: 580px;
  }
  #story-player .animal-feedback {
    top: 110px;
    left: 24px;
    right: 24px;
    max-width: none;
    font-size: 11px;
  }
  #story-player .seek-feedback {
    font-size: 11px;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="ending"] .player-content {
    max-height: 46%;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="ending"] .scene-actor:first-child {
    bottom: 390px;
    height: 30% !important;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="ending"] .scene-actor:nth-child(2) {
    bottom: 470px;
    height: 20% !important;
  }
  #story-player[data-focus-type="object"] .focus-interaction {
    left: 12%;
    right: 12%;
    top: 125px;
    bottom: 330px;
  }
  #story-player[data-focus-type="object"] .focus-copy {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: 120px;
    max-height: 210px;
  }
  #story-player[data-focus-type="object"] .focus-copy h2 {
    font-size: 38px;
  }
  #story-player[data-focus-type="object"] .focus-copy p {
    font-size: 13px;
    line-height: 1.8;
  }
  #story-player[data-focus-type="character"] .scene-actor.is-visible {
    height: 150% !important;
    left: 61% !important;
    bottom: -70%;
  }
  #story-player[data-audience="paud-tk"][data-focus-type="character"] .scene-actor.is-visible {
    height: 100% !important;
    left: 61% !important;
    bottom: 5%;
  }
  #story-player .story-prop {
    width: 86px;
    height: 86px;
  }
  #story-player[data-audience="paud-tk"] .scene-interaction:has(.story-props) {
    inset: 130px 0 280px;
  }
  #story-player[data-story="kaki-seribu-dan-kesabaran"] .scene-actor:nth-child(2) {
    height: 21% !important;
    bottom: 525px;
  }
  #story-player[data-story="kaki-seribu-dan-kesabaran"][data-reading="narasi"]
    .scene-actor:nth-child(2) {
    height: 18% !important;
    bottom: 590px;
  }
  #story-player[data-story="kaki-seribu-dan-kesabaran"][data-scene-type="quiz"]
    .scene-actor:first-child {
    height: 26% !important;
    left: 33% !important;
  }
  #story-player[data-story="kaki-seribu-dan-kesabaran"][data-scene-type="quiz"]
    .scene-actor:nth-child(2) {
    height: 16% !important;
    left: 82% !important;
    bottom: 535px;
  }
  #story-player[data-story="kaki-seribu-dan-kesabaran"][data-reading="narasi"][data-scene-type="quiz"]
    .scene-actor:nth-child(2) {
    height: 15% !important;
    bottom: 590px;
  }
}
@media (max-height: 740px) and (max-width: 550px) {
  #story-player[data-audience="paud-tk"] .scene-actor:first-child {
    height: 34% !important;
    bottom: 235px;
  }
  #story-player[data-audience="paud-tk"] .scene-actor:nth-child(2) {
    height: 23% !important;
    bottom: 320px;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"] .scene-actor:first-child {
    bottom: 345px;
    height: 28% !important;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"] .scene-actor:nth-child(2) {
    bottom: 410px;
    height: 19% !important;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="quiz"] .player-content {
    max-height: 49%;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="quiz"]
    .player-content {
    max-height: 54%;
  }
  #story-player[data-reading="narasi"] .cinema-quiz > p {
    max-height: 100px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  #story-player[data-reading="narasi"] .quiz-reading-hint {
    display: block;
    margin-top: 5px;
    font-size: 8px;
    color: #e4dcb8;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="quiz"] .scene-actor:first-child {
    bottom: 400px;
    height: 23% !important;
  }
  #story-player[data-audience="paud-tk"][data-scene-type="quiz"] .scene-actor:nth-child(2) {
    bottom: 440px;
    height: 17% !important;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="quiz"]
    .scene-actor:first-child {
    bottom: 465px;
    height: 18% !important;
  }
  #story-player[data-audience="paud-tk"][data-reading="narasi"][data-scene-type="quiz"]
    .scene-actor:nth-child(2) {
    bottom: 470px;
    height: 15% !important;
  }
  #story-player[data-focus-type="object"] .focus-interaction {
    bottom: 320px;
    top: 120px;
  }
  #story-player[data-story="kaki-seribu-dan-kesabaran"] .scene-actor:nth-child(2) {
    height: 18% !important;
    bottom: 415px;
  }
  #story-player[data-story="kaki-seribu-dan-kesabaran"][data-reading="narasi"]
    .scene-actor:nth-child(2) {
    height: 14% !important;
    bottom: 480px;
  }
  #story-player[data-story="kaki-seribu-dan-kesabaran"][data-scene-type="quiz"]
    .scene-actor:nth-child(2) {
    height: 14% !important;
    bottom: 440px;
  }
  #story-player[data-story="kaki-seribu-dan-kesabaran"][data-reading="narasi"][data-scene-type="quiz"]
    .scene-actor:nth-child(2) {
    height: 13% !important;
    bottom: 485px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #story-player .scene-actor > img,
  #story-player .story-prop {
    transition: none;
  }
}
/* benayuk.css — aturan bersama */
.cinema[data-story="benayuk"] .story-credit {
  display: block;
  max-width: 440px;
  font-size: 10px;
  line-height: 1.65;
  margin: 12px 0;
  color: #ecebd5;
}
.cinema[data-story="benayuk"][data-layout="opening"] .player-content {
  max-width: 580px;
}
@media (max-width: 650px) {
  #story-player.cinema .player-content {
    left: 22px;
    right: 22px;
    width: auto !important;
    max-width: none;
  }
}
@media (max-width: 700px) {
  .cinema[data-story="benayuk"] .story-credit {
    font-size: 9px;
    max-width: 350px;
  }
}
/* storybook.css — aturan bersama *//* Picture books use an actual landscape page; text and controls stay outside the art. */
.book-player {
  --ink: #e8e7da;
  --muted: #b3c2b4;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #173c32;
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}
.book-player[open] {
  flex-direction: column;
}
.book-player::backdrop {
  background: #173c32;
}
.book-player button,
.book-player a,
.book-player select {
  color: inherit;
}
.book-player button {
  cursor: pointer;
}
.book-player button:focus-visible,
.book-player a:focus-visible,
.book-player select:focus-visible {
  outline: 2px solid #f5d584;
  outline-offset: 4px;
}
.book-player button:disabled {
  opacity: 0.3;
  cursor: default;
}
.book-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 26px;
  flex-shrink: 0;
}
.book-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.book-heading > a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 19px;
  white-space: nowrap;
  text-decoration: none;
}
.book-heading em {
  font-style: normal;
}
.book-heading > button {
  font-size: 11px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: none;
}
.book-heading > button span {
  margin-left: 14px;
}
.book-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.book-tools .icon-button {
  background: #ffffff06;
  border: 1px solid #ffffff1f;
  width: 36px;
  height: 36px;
  border-radius: 5px;
}
.book-tools .icon-button .icon {
  width: 17px;
  height: 17px;
}
.book-tools .icon-button[aria-pressed="true"] {
  background: #f0ead4;
  color: #214d3e;
}
.book-reading-label select {
  font: inherit;
  font-size: 11px;
  border: 1px solid #ffffff35;
  background: #244b3e;
  padding: 9px 22px 9px 9px;
  border-radius: 4px;
  max-width: 130px;
}
.book-reading-label option {
  background: #214b3d;
  color: white;
}
.book-style-switch {
  display: flex;
  padding: 3px;
  background: #ffffff12;
  border: 1px solid #ffffff26;
  border-radius: 4px;
  margin-right: 7px;
}
.book-style-switch button {
  font-size: 11px;
  padding: 6px 9px;
  border: 0;
  background: none;
  border-radius: 2px;
}
.book-style-switch button[aria-pressed="true"] {
  background: #f1ecd9;
  color: #254d3d;
}
.book-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 24px;
}
.book-art-area {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
}
.book-sheet {
  position: relative;
  width: min(calc(100vw - 48px), calc((100dvh - 190px) * 1.4142857));
  aspect-ratio: 297/210;
  overflow: hidden;
  background: #294e3e;
  box-shadow: 0 16px 60px #041b2055;
  isolation: isolate;
  flex-shrink: 0;
}
.book-page-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateX(2%) scale(1.015);
  transition:
    opacity 0.65s ease,
    transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 0;
}
.book-page-art.is-current {
  opacity: 1;
  transform: none;
  z-index: 1;
}
.book-sheet[data-direction="back"] .book-page-art:not(.is-current) {
  transform: translateX(-2%) scale(1.015);
}
.book-touch-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.book-touch {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  border-radius: 35%;
  padding: 0;
  min-width: 30px;
  min-height: 30px;
}
.book-touch:focus-visible {
  outline-offset: -6px !important;
  background: #fff3;
}
.book-touch:after {
  content: "+";
  position: absolute;
  right: 12%;
  bottom: 8%;
  font-family: Arial, sans-serif;
  font-size: 17px;
  line-height: 24px;
  width: 25px;
  height: 25px;
  color: #f8f5df;
  background: #234a3c8c;
  border: 1px solid #f1efd071;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}
.book-touch:hover:after,
.book-touch:focus-visible:after {
  opacity: 1;
}
.book-touch.object-touch {
  z-index: 3;
}
.book-touch-layer.has-shoes .book-touch {
  z-index: 0;
}
.book-activity-line {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 11px;
  color: #c0d0bd;
  max-width: 100%;
  text-align: center;
}
.book-activity-line p {
  margin: 0;
}
.book-activity-line button {
  border: 0;
  border-bottom: 1px solid #b6cdb566;
  padding: 3px 0;
  background: none;
  font-size: 11px;
  white-space: nowrap;
}
.book-caption {
  width: min(800px, 100%);
  text-align: center;
  flex-shrink: 0;
}
.book-caption > span {
  font-size: 8px;
  letter-spacing: 2px;
  color: #c7d5b5;
}
.book-caption h2 {
  font-size: 23px;
  line-height: 1.2;
  margin: 5px 0;
  font-family: Georgia, serif;
  font-weight: 400;
}
.book-caption p {
  font-size: 14px;
  line-height: 1.7;
  margin: 6px 0;
}
.book-caption small {
  font-size: 10px;
  color: #c0cbb7;
}
.book-player[data-reading="narasi"] .book-sheet {
  width: min(calc(100vw - 48px), calc((100dvh - 355px) * 1.4142857));
}
.book-player[data-reading="ringkas"] .book-sheet {
  width: min(calc(100vw - 48px), calc((100dvh - 285px) * 1.4142857));
}
.book-player[data-reading="narasi"] .book-caption p {
  text-align: left;
}
.book-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 28px 8px;
  flex-shrink: 0;
}
.book-footer > button {
  border: 0;
  background: none;
  font-size: 12px;
  min-width: 110px;
  min-height: 36px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.book-footer > button:last-child {
  background: #f0ead5;
  color: #244b3b;
  border-radius: 3px;
}
.book-progress {
  display: flex;
  justify-content: center;
  gap: 7px;
  max-width: 490px;
  flex: 1;
}
.book-progress button {
  width: 100%;
  height: 27px;
  min-width: 7px;
  padding: 12px 0;
  background: none;
  border: 0;
  position: relative;
}
.book-progress button:before {
  content: "";
  height: 2px;
  background: #b1c3ae50;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
}
.book-progress button[aria-current="page"]:before {
  background: #f3d17c;
  height: 3px;
}
.book-progress button.is-done:before {
  background: #d5debd;
}
.book-utilities {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 4px 24px 13px;
  flex-shrink: 0;
  font-size: 10px;
  color: #bfd0bb;
}
.book-utilities a,
.book-utilities button {
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 10px;
}
.book-utilities .icon {
  width: 12px;
  height: 12px;
}
.book-utilities > span {
  letter-spacing: 2px;
}
.book-focus {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: linear-gradient(90deg, #173f36dd, #173f36f5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
  padding: 5%;
  animation: book-focus-in 0.5s ease;
}
.book-focus[hidden] {
  display: none;
}
.book-focus > img {
  width: 52%;
  height: 95%;
  object-fit: contain;
  filter: drop-shadow(0 15px 15px #041c2440);
  animation: book-character-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.book-focus-copy {
  width: 42%;
  max-width: 350px;
}
.book-focus-copy > span {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c6d3b7;
}
.book-focus h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 3vw, 46px);
  line-height: 1.1;
  margin: 12px 0 16px;
}
.book-focus p {
  font-size: clamp(10px, 1.1vw, 15px);
  line-height: 1.8;
  color: #d6e0cc;
}
.book-focus button {
  border: 0;
  background: none;
  padding: 10px 0;
  border-bottom: 1px solid #c7d1aa80;
  font-size: 11px;
}
.book-focus button span {
  margin-left: 15px;
}
.book-focus.is-page-reaction > img {
  width: 65%;
  object-fit: cover;
  object-position: 70% center;
  clip-path: ellipse(48% 47% at 50% 50%);
}
.book-focus.is-page-reaction .book-focus-copy {
  width: 32%;
}
.book-focus.is-leaving {
  animation: book-focus-out 0.25s ease forwards;
}
.book-chooser {
  max-width: 900px;
  width: calc(100% - 36px);
  background: #f1eedf;
  color: #2b5344;
  border: 0;
  border-radius: 4px;
  padding: 45px;
}
.book-chooser h2 {
  font-size: 36px;
  font-family: Georgia, serif;
  font-weight: 400;
  margin: 12px 0;
}
.book-chooser > p {
  font-size: 13px;
  line-height: 1.7;
}
.book-chooser .close-dialog {
  color: #315643;
}
.book-editions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 25px 0;
}
.book-editions button {
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  padding: 0;
}
.book-editions img {
  display: block;
  width: 100%;
  aspect-ratio: 297/210;
  object-fit: cover;
  border-radius: 2px;
  transition: transform 0.5s;
}
.book-editions button:hover img {
  transform: translateY(-4px);
}
.book-editions strong {
  font-size: 17px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.book-chapters {
  position: absolute;
  z-index: 20;
  top: 65px;
  left: 24px;
  right: 24px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  padding: 14px;
  background: #214a3f;
  box-shadow: 0 14px 40px #061f2044;
  border: 1px solid #d2dfbd30;
}
.book-chapters[hidden] {
  display: none;
}
.book-chapters button {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.book-chapters img {
  width: 100%;
  aspect-ratio: 297/210;
  object-fit: cover;
}
.book-chapters span {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  padding: 5px 0;
}
.book-chapters button[aria-current="page"] img {
  outline: 2px solid #e6cb82;
}
.book-chapters #book-clear {
  grid-column: 1/-1;
  font-size: 10px;
  text-align: right;
  padding: 5px;
}
.shoe-token {
  position: absolute;
  z-index: 5;
  border: 0;
  background: none;
  padding: 0;
  width: 14%;
  aspect-ratio: 1;
  touch-action: none;
  cursor: grab;
}
.shoe-token img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(1px 5px 3px #0c2f3533);
  pointer-events: none;
}
.shoe-token[aria-pressed="true"] {
  outline: 2px dashed #fff5c8;
  outline-offset: -5px;
  border-radius: 50%;
  background: #fff1bc22;
}
.shoe-token.is-dragging {
  z-index: 10;
  cursor: grabbing;
}
.shoe-token.is-fitted {
  width: 9%;
  pointer-events: none;
}
.shoe-slot {
  position: absolute;
  z-index: 4;
  width: 9%;
  height: 11%;
  transform: translate(-50%, -50%);
  border: 1px dashed #f9f5c586;
  border-radius: 50%;
  background: #fff9d311;
  box-shadow: 0 0 0 5px #fff5c209;
}
.shoe-slot:focus-visible {
  outline-offset: 0 !important;
}
.shoe-slot.is-filled {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}
.book-step-track {
  position: absolute;
  left: 3%;
  bottom: 4%;
  display: flex;
  gap: 6px;
}
.book-step-track span {
  width: 10px;
  height: 10px;
  border: 1px solid #eff0d9;
  border-radius: 50%;
  background: #224f4044;
}
.book-step-track span.is-done {
  background: #f3d17c;
}
@keyframes book-focus-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes book-focus-out {
  to {
    opacity: 0;
  }
}
@keyframes book-character-in {
  from {
    transform: scale(0.8) translateY(15px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (min-width: 1500px) {
  .book-topbar {
    padding: 20px 38px;
  }
  .book-heading > a {
    font-size: 23px;
  }
  .book-heading > button {
    font-size: 13px;
  }
  .book-tools {
    gap: 10px;
  }
  .book-tools .icon-button {
    width: 40px;
    height: 40px;
  }
  .book-caption h2 {
    font-size: 28px;
  }
}
@media (max-width: 820px) {
  .book-topbar {
    gap: 10px;
    padding: 12px 15px;
    flex-wrap: wrap;
  }
  .book-heading {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
  .book-heading > a {
    font-size: 17px;
  }
  .book-heading > button {
    max-width: 56%;
    font-size: 10px;
  }
  .book-tools {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }
  .book-reading-label {
    margin-right: auto;
  }
  .book-tools .icon-button {
    width: 32px;
    height: 32px;
  }
  .book-style-switch {
    margin-right: 0;
  }
  .book-body {
    padding: 0 12px;
    justify-content: center;
  }
  .book-sheet,
  .book-player[data-reading="narasi"] .book-sheet,
  .book-player[data-reading="ringkas"] .book-sheet {
    width: min(calc(100vw - 24px), calc((100dvh - 245px) * 1.4142857));
  }
  .book-caption {
    margin: 4px 0;
  }
  .book-caption h2 {
    font-size: 23px;
  }
  .book-caption p {
    font-size: 13px;
    line-height: 1.7;
  }
  .book-player[data-reading="narasi"] .book-body {
    justify-content: flex-start;
    padding-top: 10px;
    min-height: auto;
  }
  .book-player[data-reading="narasi"] .book-sheet {
    width: min(calc(100vw - 24px), calc((100dvh - 440px) * 1.4142857));
  }
  .book-activity-line {
    font-size: 10px;
    min-height: 32px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .book-footer {
    padding: 8px 14px;
    gap: 12px;
  }
  .book-footer > button {
    font-size: 11px;
    min-width: 80px;
    gap: 6px;
  }
  .book-progress {
    gap: 4px;
  }
  .book-utilities {
    gap: 14px;
    font-size: 9px;
    padding: 8px 12px 14px;
    flex-wrap: wrap;
  }
  .book-utilities a,
  .book-utilities button {
    font-size: 9px;
  }
  .book-chapters {
    top: 105px;
    left: 12px;
    right: 12px;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .book-focus {
    padding: 3%;
    gap: 1%;
  }
  .book-focus-copy > span {
    font-size: 7px;
    letter-spacing: 0.7px;
  }
  .book-focus h2 {
    font-size: 22px;
    margin: 7px 0;
  }
  .book-focus p {
    font-size: 10px;
    line-height: 1.5;
    margin: 7px 0;
  }
  .book-focus button {
    font-size: 9px;
    padding: 7px 0;
  }
  .book-focus button span {
    margin-left: 5px;
  }
  .book-chooser {
    padding: 30px 22px;
  }
  .book-chooser h2 {
    font-size: 28px;
  }
  .book-editions {
    gap: 12px;
  }
  .book-editions strong {
    font-size: 14px;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .book-topbar {
    padding: 7px 15px;
    flex-wrap: nowrap;
  }
  .book-heading {
    width: auto;
  }
  .book-heading > button {
    display: none;
  }
  .book-tools {
    width: auto;
  }
  .book-heading > a {
    font-size: 16px;
  }
  .book-sheet {
    width: min(calc(100vw - 28px), calc((100dvh - 155px) * 1.4142857));
  }
  .book-player[data-reading="ringkas"] .book-sheet {
    width: min(calc(100vw - 28px), calc((100dvh - 230px) * 1.4142857));
  }
  .book-player[data-reading="narasi"] .book-body {
    min-height: auto;
  }
  .book-player[data-reading="narasi"] .book-sheet {
    width: 58vw;
  }
  .book-footer {
    padding: 3px 18px;
  }
  .book-utilities {
    padding: 2px 12px 7px;
  }
  .book-activity-line {
    min-height: 20px;
  }
  .book-caption p {
    max-width: 600px;
  }
  .book-chapters {
    top: 48px;
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-page-art,
  .book-editions img {
    transition: none;
  }
  .book-focus,
  .book-focus > img {
    animation: none;
  }
}
.book-player .shoe-token.is-fitted {
  opacity: 1;
}
.book-heading em {
  color: inherit;
}
/* storybook-immersive.css — aturan bersama *//* Web artwork fills the viewport; print images retain their separate A4 page. */
.book-player[open] {
  display: block;
  overflow: hidden;
  background: #173c32;
}
.book-player .book-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 15;
  min-height: 78px;
  background: linear-gradient(#12382ed9, #12382e42, transparent);
  align-items: flex-start;
  padding: 19px 26px 30px;
}
.book-player .book-topbar > * {
  pointer-events: auto;
}
.book-player[data-reading] .book-body {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
}
.book-player .book-art-area {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.book-player[data-reading] .book-sheet {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: #173c32;
  box-shadow: none;
}
.book-player .book-page-art {
  object-fit: cover;
  object-position: center;
}
.book-player .book-body:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(transparent 67%, #0a342abe 100%);
}
.book-player[data-reading="ringkas"] .book-body:after,
.book-player[data-reading="narasi"] .book-body:after {
  background: linear-gradient(0deg, #0c332aee, transparent 70%);
}
.book-player .book-caption {
  position: absolute;
  z-index: 5;
  left: 6%;
  bottom: 145px;
  text-align: left;
  width: min(680px, 70%);
  pointer-events: none;
  text-shadow: 0 2px 12px #072c267a;
}
.book-player .book-caption h2 {
  font-size: clamp(25px, 3.3vw, 46px);
  margin: 7px 0 12px;
  line-height: 1.12;
}
.book-player .book-caption p {
  font-size: 15px;
  line-height: 1.8;
  max-width: 640px;
  color: #fff8e5;
}
.book-player .book-caption > span {
  color: #f2e4b7;
}
.book-player .book-caption[hidden] {
  display: none;
}
.book-player .book-activity-line {
  position: absolute;
  z-index: 6;
  bottom: 101px;
  left: 5%;
  right: 5%;
  min-height: 24px;
  color: #fff6dc;
  text-shadow: 0 1px 8px #092c24;
}
.book-player .book-activity-line p {
  color: #fff6dc;
}
.book-player .book-footer {
  position: absolute;
  z-index: 12;
  left: 0;
  right: 0;
  bottom: 38px;
  padding: 10px 28px;
}
.book-player .book-footer > button {
  background: #183e3280;
  backdrop-filter: blur(8px);
  border: 1px solid #f6edce2e;
}
.book-player .book-utilities {
  position: absolute;
  z-index: 12;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 20px 12px;
  color: #f0e8cc;
}
.book-player .book-focus {
  z-index: 10;
}
.book-player .book-focus.is-page-reaction > img {
  width: 47%;
  height: 85%;
  object-fit: cover;
  clip-path: ellipse(48% 48% at 50% 50%);
}
.book-player .book-focus.is-page-reaction .book-focus-copy {
  width: 40%;
}
.book-player .book-chapters {
  z-index: 25;
}
.book-player .book-touch-layer {
  inset: auto;
  position: absolute;
}
.book-calm-leaf {
  position: absolute;
  z-index: 5;
  width: 17%;
  height: 24%;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.book-calm-leaf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px #103d2c35);
}
.book-calm-leaf.is-breathing img {
  animation: book-leaf-breathe 6s ease-in-out infinite;
}
.book-calm-leaf[aria-pressed="true"] {
  outline: 1px dashed #fff3b988;
  outline-offset: 5px;
  border-radius: 50%;
}
.book-player .book-step-track {
  bottom: 16%;
  left: 4%;
}
@keyframes book-leaf-breathe {
  0%,
  100% {
    transform: scale(0.9) rotate(-5deg);
  }
  50% {
    transform: scale(1.12) rotate(5deg);
  }
}
@media (orientation: portrait) {
  .book-player .book-page-art {
    object-fit: contain;
  }
  .book-player .book-topbar {
    flex-wrap: wrap;
    gap: 9px;
    padding: 12px 15px 30px;
  }
  .book-player .book-heading {
    width: 100%;
  }
  .book-player .book-tools {
    width: 100%;
    justify-content: flex-end;
  }
  .book-player .book-caption {
    left: 6%;
    bottom: 150px;
    width: 88%;
    max-width: none;
  }
  .book-player .book-caption h2 {
    font-size: 27px;
  }
  .book-player .book-caption p {
    font-size: 13px;
    line-height: 1.7;
  }
  .book-player[data-reading="narasi"] .book-page-art {
    object-position: center 28%;
  }
  .book-player[data-reading="narasi"] .book-caption {
    bottom: 137px;
  }
  .book-player[data-reading="narasi"] .book-caption h2 {
    font-size: 23px;
  }
  .book-player .book-activity-line {
    bottom: 98px;
    font-size: 9px;
    gap: 9px;
  }
  .book-player .book-footer {
    padding: 8px 14px;
    bottom: 37px;
  }
  .book-player .book-utilities {
    font-size: 8px;
    gap: 10px;
    padding: 7px 10px 12px;
  }
  .book-player .book-utilities a,
  .book-player .book-utilities button {
    font-size: 8px;
  }
  .book-player .book-chapters {
    top: 105px;
  }
  .book-player .book-focus.is-page-reaction > img {
    width: 53%;
    height: 62%;
  }
  .book-player .book-focus-copy p {
    font-size: 11px;
    line-height: 1.7;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .book-player .book-topbar {
    padding: 8px 15px 23px;
    min-height: 50px;
    flex-wrap: nowrap;
  }
  .book-player .book-heading {
    width: auto;
  }
  .book-player .book-tools {
    width: auto;
  }
  .book-player .book-heading > button {
    display: none;
  }
  .book-player .book-footer {
    bottom: 25px;
    padding: 5px 18px;
  }
  .book-player .book-utilities {
    padding: 4px 14px 5px;
    font-size: 8px;
  }
  .book-player .book-utilities a,
  .book-player .book-utilities button {
    font-size: 8px;
  }
  .book-player .book-activity-line {
    bottom: 77px;
    font-size: 9px;
    min-height: 15px;
  }
  .book-player .book-caption {
    bottom: 108px;
    width: 68%;
    left: 5%;
  }
  .book-player .book-caption h2 {
    font-size: 25px;
    margin: 4px 0 7px;
  }
  .book-player .book-caption p {
    font-size: 11px;
    line-height: 1.6;
  }
  .book-player .book-caption small {
    font-size: 8px;
  }
  .book-player .book-chapters {
    top: 48px;
  }
  .book-player .book-tools .icon-button {
    width: 30px;
    height: 30px;
  }
  .book-player .book-reading-label select {
    font-size: 10px;
    padding: 7px;
  }
  .book-player .book-style-switch button {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-calm-leaf.is-breathing img {
    animation: none;
  }
}
/* end-games.css — aturan bersama */
.endgame {
  position: absolute;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #f8f0da;
  color: #315b4b;
  font-family: var(--sans);
  isolation: isolate;
  animation: game-arrive 0.55s ease;
}
.endgame[hidden] {
  display: none;
}
.endgame-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  opacity: 0.55;
}
.endgame-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#fff7e8f5 0%, #fff7e8c9 25%, #fff7e888 65%, #fff7e8f5 100%);
  pointer-events: none;
}
.endgame-header {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 38px;
  border-bottom: 1px solid #6e866623;
}
.endgame-header > span {
  font: 20px var(--serif);
}
.endgame-header strong {
  font-weight: 400;
}
.endgame-header i {
  font-style: normal;
  padding: 0 12px;
  color: #c58a4c;
}
.endgame-header > div {
  display: flex;
  gap: 24px;
}
.endgame-header button {
  font-size: 13px;
  padding: 9px 5px;
}
.endgame-header button:last-child {
  color: #99694d;
}
.endgame-intro {
  position: absolute;
  top: 100px;
  left: 5%;
  right: 5%;
  text-align: center;
  pointer-events: none;
}
.endgame-eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
  color: #a56c43;
}
.endgame-intro h2 {
  font-size: clamp(36px, 3.5vw, 54px);
  line-height: 1.2;
  margin: 10px 0;
  color: #35634f;
  letter-spacing: -1.5px;
}
.endgame-intro p {
  font-size: 16px;
  color: #5c745b;
}
.endgame-board {
  position: absolute;
  inset: 245px 8% 155px;
}
.endgame-footer {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 22px;
  min-height: 95px;
  text-align: center;
}
.endgame-status {
  font-size: 17px;
  line-height: 1.5;
  min-height: 50px;
  color: #3c674f;
  margin: 0 auto 15px;
  max-width: 1000px;
}
.endgame-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid #6e866630;
  padding-top: 14px;
}
.endgame-bottom > button {
  font-size: 13px;
  padding: 9px 20px;
  border-radius: 25px;
  background: #fff8e6;
  border: 1px solid #d8ddc3;
}
.endgame-comfort {
  font-size: 11px;
  color: #6e8066;
}
.endgame-dots {
  display: flex;
  gap: 9px;
}
.endgame-dots span {
  width: 11px;
  height: 11px;
  border: 1px solid #90a582;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s;
}
.endgame-dots span.is-done {
  background: #5e936c;
  border-color: #5e936c;
}
.endgame.is-complete .endgame-bottom > button {
  background: #f7d67a;
  border-color: #f7d67a;
}
.endgame button:focus-visible {
  outline: 3px solid #b76e3f;
  outline-offset: 5px;
}
.endgame button {
  transition:
    transform 0.3s,
    opacity 0.3s,
    background 0.3s;
}
.endgame button:hover:not(:disabled) {
  transform: translateY(-3px);
}
.endgame-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 20px;
  min-width: 0;
}
.endgame-item img {
  width: 100%;
  height: clamp(120px, 21vh, 230px);
  object-fit: contain;
  filter: drop-shadow(0 8px 9px #36513418);
  transition: transform 0.4s;
}
.endgame-item > span {
  font-size: 19px;
  color: #355e4c;
  line-height: 1.3;
}
.endgame-item[aria-pressed="true"] {
  outline-offset: 4px;
}
.endgame-item:hover img {
  transform: scale(1.045);
}
.endgame-mark {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #54805b;
  font-size: 20px;
}
.endgame-item.is-done .endgame-mark:after {
  content: "✓";
}
.endgame-item:disabled {
  opacity: 0.42;
}
.endgame-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  height: 100%;
  align-items: center;
}
.endgame-gallery .endgame-item {
  padding: 0 0 14px;
  gap: 17px;
}
.endgame-gallery .endgame-item img {
  object-fit: cover;
  aspect-ratio: 16/9;
  height: auto;
  max-height: 30vh;
  border-radius: 45% 45% 16px 16px;
}
.endgame-gallery .endgame-item > span {
  font-size: 18px;
  max-width: 90%;
}
.endgame[data-kind="match"] .endgame-board {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 7%;
  align-items: center;
  inset: 235px 7% 160px;
}
.endgame-pieces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.endgame-pieces .endgame-item img {
  height: clamp(95px, 18vh, 190px);
  border-radius: 40%;
  object-fit: contain;
}
.endgame-pieces .endgame-item > span {
  font-size: 17px;
}
.endgame-targets {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.endgame-targets > button {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #869c7070;
  padding: 14px 8px;
  min-height: 75px;
  text-align: left;
  font-size: 17px;
  line-height: 1.35;
}
.endgame-targets small {
  font-size: 22px;
  margin-left: auto;
  color: #789466;
}
.endgame-target-image {
  width: 54px;
  height: 54px;
  border: 1px dashed #7d9a6670;
  border-radius: 50%;
  flex-shrink: 0;
}
.endgame-target-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.endgame-targets > button.is-done {
  opacity: 1;
  color: #36734e;
}
.endgame-targets > button.is-done small {
  font-size: 0;
}
.endgame-targets > button.is-done small:after {
  content: "✓";
  font-size: 21px;
}
.endgame-friends {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13%;
  max-width: 850px;
  margin: auto;
}
.endgame-friends .endgame-item img {
  height: clamp(180px, 30vh, 350px);
}
.endgame-friends .endgame-item > span {
  font-size: 23px;
}
.endgame-friends .endgame-item.has-turn:after {
  content: "Giliranmu";
  position: absolute;
  top: -15px;
  padding: 5px 13px;
  border-radius: 20px;
  background: #f4d775;
  color: #5e6c42;
  font-size: 13px;
}
.endgame-ball {
  position: absolute;
  width: 85px;
  height: 85px;
  object-fit: contain;
  bottom: 20px;
  transform: translateX(-50%);
  transition:
    left 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s;
  pointer-events: none;
  filter: drop-shadow(0 8px 6px #48603528);
}
.endgame.is-complete .endgame-friends .endgame-item {
  opacity: 1;
}
.endgame-trail {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 210px;
}
.endgame-walker {
  position: absolute;
  height: 200px;
  width: 220px;
  object-fit: contain;
  transform: translate(-50%, -75%);
  z-index: 3;
  pointer-events: none;
  transition:
    left 1.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    top 1.4s ease;
}
.endgame-trail > button {
  position: absolute;
  left: var(--trail-x);
  top: var(--trail-y);
  width: 62px;
  height: 62px;
  background: #fff7d7;
  border: 2px dashed #89a578;
  color: #557951;
  font-size: 25px;
  transform: translate(-50%, -50%);
  z-index: 4;
}
.endgame-trail > button.has-turn {
  background: #f7d47a;
  box-shadow: 0 0 0 9px #fffcde7d;
}
.endgame-trail > button.is-done {
  background: #8bb17c;
  opacity: 1;
  color: #fff;
}
.endgame-trail-line {
  position: absolute;
  left: 6%;
  right: 10%;
  top: 54%;
  border-top: 3px dashed #8caa7380;
  transform: rotate(-1deg);
}
.endgame[data-kind="shoes"] {
  background: #d6e9ac;
}
.endgame-shoe-frame {
  position: absolute;
  z-index: -2;
}
.endgame-shoe-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.endgame[data-kind="shoes"] .endgame-board {
  display: none;
}
.endgame[data-kind="shoes"] .endgame-intro {
  text-align: left;
  top: 100px;
}
.endgame[data-kind="shoes"] .endgame-intro p {
  max-width: 370px;
}
.endgame-shoe-frame button {
  position: absolute;
  z-index: 2;
  padding: 0;
  background: none;
  aspect-ratio: 1;
  border-radius: 50%;
}
.endgame-foot {
  transform: translate(-50%, -60%);
  border: 2px dashed #fff7d2;
  box-shadow: 0 0 0 2px #65855577;
}
.endgame-foot > span {
  font-size: 27px;
  color: #3b694a;
  background: #fff9daaa;
  border-radius: 50%;
  padding: 0 9px;
}
.endgame-foot.is-done {
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
}
.endgame-foot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.endgame-loose-shoe {
  width: 9%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 5px 5px #4d60264d);
}
.endgame-loose-shoe img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.endgame-loose-shoe[aria-pressed="true"] {
  outline: 3px dashed #fff8bd;
  outline-offset: 5px;
}
.endgame-loose-shoe.is-done {
  opacity: 0;
  pointer-events: none;
}
.endgame-shoe-frame button:hover:not(:disabled) {
  transform: translate(-50%, -55%) scale(1.06);
}
@keyframes game-arrive {
  from {
    opacity: 0;
    transform: scale(1.025);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.endgame-trail > button:hover:not(:disabled) {
  transform: translate(-50%, -55%);
}
.endgame[data-kind="order"] .endgame-item.is-done {
  opacity: 1;
}
.endgame[data-kind="order"] .endgame-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6d278;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: #446a49;
  font-weight: 600;
}
.endgame[data-kind="order"] .endgame-mark:empty {
  display: none;
}
.endgame[data-kind="order"] .endgame-mark:after {
  content: none;
}
.endgame .endgame-foot.is-done {
  opacity: 1;
}
.endgame-header {
  position: relative;
  z-index: 10;
  background: #fff9e8bd;
}
.endgame-item[aria-pressed="true"],
.endgame[data-kind="choices"] .endgame-item.is-done {
  background: none;
  outline: none;
}
.endgame-item[aria-pressed="true"] > span {
  border-bottom: 2px solid #b79143;
  padding-bottom: 4px;
}
.endgame-item[aria-pressed="true"] > img {
  filter: drop-shadow(0 7px 10px #d7b75355);
}
.endgame[data-kind="shoes"] .endgame-wash {
  background:
    radial-gradient(ellipse 62% 55% at 12% 8%, #fff6e5 0%, #fff6e5e8 35%, #fff6e500 78%),
    linear-gradient(transparent 73%, #fff4dff2);
}
.endgame[data-kind="shoes"] .endgame-intro {
  right: 56%;
}
.endgame[data-kind="shoes"] .endgame-intro p {
  color: #365b42;
  font-weight: 500;
  text-shadow: 0 1px 5px #fff7dd;
}
.endgame[data-kind="shoes"] .endgame-eyebrow {
  color: #86562e;
}
@media (min-height: 850px) {
  .endgame-board {
    inset: 290px 8% 200px;
  }
  .endgame[data-kind="match"] .endgame-board {
    inset: 280px 7% 220px;
  }
  .endgame-intro {
    top: 120px;
  }
  .endgame-footer {
    bottom: 35px;
  }
  .endgame-item img {
    height: 240px;
  }
  .endgame-friends .endgame-item img {
    height: 350px;
  }
  .endgame-walker {
    height: 260px;
    width: 280px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .endgame,
  .endgame * {
    animation: none !important;
    transition: none !important;
  }
}
/* library-v18.css — aturan bersama */
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/SourceSans3-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/SourceSans3-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --serif: var(--sans);
  --paper: #fbf6ec;
  --white: #fffdf7;
  --ink: #2f2b24;
  --muted: #5e5749;
  --green: #2f6b40;
  --green-dark: #234f30;
  --gold: #e0a33a;
  --line: #ebe2cf;
}
@media (min-width: 1600px) {
  #story-player.cinema[data-reading] .player-content {
    width: 46vw;
    max-width: 1600px;
    bottom: 12vw;
  }
  #story-player.cinema[data-reading] .player-content h2 {
    font-size: clamp(42px, 2.5vw, 94px);
    line-height: 1.15;
  }
  #story-player.cinema[data-reading] .player-content p {
    font-size: clamp(22px, 1.15vw, 44px);
    line-height: 1.8;
    max-width: none;
  }
  #story-player.cinema .quiz-option {
    font-size: clamp(23px, 1.15vw, 44px);
    min-height: 3vw;
  }
  #story-player.cinema .quiz-feedback {
    font-size: clamp(20px, 1vw, 36px);
  }
  #story-player.cinema .ending-values,
  #story-player.cinema .ending-actions button {
    font-size: clamp(18px, 0.9vw, 32px);
  }
  #story-player.cinema .focus-copy p {
    font-size: clamp(22px, 1.15vw, 44px);
  }
  #story-player.cinema .focus-copy h2 {
    font-size: clamp(42px, 2.5vw, 94px);
  }
  #story-player.book-player .book-caption p {
    font-size: clamp(22px, 1.15vw, 44px);
    line-height: 1.75;
    max-width: 1400px;
  }
  #story-player.book-player .book-caption h2 {
    font-size: clamp(38px, 2.1vw, 76px);
  }
}
body {
  font-size: 17px;
}
h1 {
  font-size: 46px;
  line-height: 1.15;
}
h2 {
  font-size: 31px;
  line-height: 1.25;
}
h3 {
  font-size: 22px;
}
em {
  font-style: normal;
  color: inherit;
}
.container {
  width: min(1380px, calc(100% - 100px));
}
.button {
  font-size: 16px;
  min-height: 46px;
  padding: 11px 22px;
  box-shadow: none;
}
.button:hover {
  box-shadow: none;
  transform: none;
}
.button-small {
  font-size: 15px;
}
.button-outline {
  border-color: var(--green);
  color: var(--green);
}
.text-link {
  font-size: 15px;
}
.eyebrow,
.cinema-kicker {
  letter-spacing: 1.2px;
}
.site-header {
  height: 86px;
}
.header-inner {
  width: min(1460px, calc(100% - 80px));
}
.brand {
  gap: 12px;
}
.brand > span:last-child {
  font-size: 26px;
}
.brand-serif {
  font-family: var(--sans);
  font-weight: 600;
}
.brand small {
  display: none;
}
.brand-mark {
  width: 43px;
  height: 43px;
}
.brand-mark > i {
  display: none;
}
.main-nav {
  gap: 32px;
  font-size: 17px;
}
.main-nav > a[aria-current="page"] {
  color: var(--green);
  font-weight: 600;
}
.nav-divider {
  display: none;
}
.main-nav .button-small {
  padding: 10px 20px;
  border-radius: 8px;
}
.site-footer {
  padding-top: 26px;
  margin-top: 65px;
}
.footer-top {
  padding-bottom: 22px;
  justify-content: space-between;
}
.footer-top p {
  display: none;
}
.footer-top nav {
  margin-left: auto;
  font-size: 15px;
}
.footer-bottom {
  padding-top: 15px;
  padding-bottom: 22px;
  font-size: 13px;
}
.page-intro {
  padding-top: 52px;
  padding-bottom: 36px;
}
.page-intro > p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 800px;
}
.page-intro h1 {
  font-size: 44px;
}
.catalog-title {
  padding-top: 40px;
  padding-bottom: 25px;
}
.catalog-title h1 {
  font-size: 32px;
}
.catalog-controls {
  gap: 12px;
  padding: 0;
  margin-bottom: 15px;
  align-items: center;
}
.catalog-controls .filter-tabs {
  gap: 9px;
}
.filter-tabs button {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 15px;
}
.filter-tabs button.active {
  color: white;
}
.search-box,
.catalog-controls .region-select {
  min-height: 44px;
}
.search-box input,
.catalog-controls select {
  font-size: 15px;
}
.result-count {
  font-size: 14px;
  margin-bottom: 28px;
}
.library-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.library-card.story-card {
  box-shadow: none;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.library-card .story-cover {
  height: auto;
  aspect-ratio: 1.18;
  min-height: 0;
  background: #f0f5ed;
}
.library-card .story-cover > img:not(.card-animal) {
  object-fit: cover;
}
.library-card .story-cover:after {
  background: linear-gradient(transparent 80%, #17391c20);
}
.library-card .cover-label {
  top: 12px;
  left: 12px;
  font-size: 12px;
  border: 0;
  letter-spacing: 0;
}
.library-card .cover-play {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 0;
  right: 13px;
  bottom: 13px;
}
.library-card .story-info {
  padding: 15px 0 20px;
  min-height: 0;
  flex: 1;
}
.library-card .story-info h3 {
  font-size: 24px;
  line-height: 1.23;
  margin-top: 9px;
}
.library-card .story-info > p {
  font-size: 15px;
  line-height: 1.55;
  margin-top: 9px;
  min-height: 46px;
}
.story-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.story-tags .story-game-tag {
  display: none;
}
.library-card .story-meta {
  font-size: 12px;
  margin: 15px 0 16px;
}
.library-card .story-info > .text-link {
  font-size: 15px;
}
.library-card .source-link {
  font-size: 11px;
  margin-top: 11px;
}
.story-credit {
  font-size: 12px;
  line-height: 1.5;
}
.library-card .story-credit {
  margin-top: 10px;
  display: block;
}
.home-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 55px;
}
.home-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.home-search > div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 7px 8px 7px 17px;
  width: min(630px, 100%);
}
.home-search input {
  border: 0;
  outline: 0;
  width: 100%;
  background: none;
  padding: 6px;
  font-size: 18px;
  color: #36463e;
}
.home-shelf {
  margin-bottom: 50px;
}
.shelf-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.shelf-heading h2 {
  font-size: 30px;
}
.shelf-heading > a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.shelf-books {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 25px;
}
.shelf-books .story-info h3 {
  font-size: 22px;
}
.shelf-books .story-cover {
  aspect-ratio: 1.05;
}
.shelf-books .story-meta,
.shelf-books .source-link {
  display: none;
}
.shelf-books .story-info > p {
  min-height: 0;
  font-size: 14px;
}
.shelf-books .story-info > .text-link {
  margin-top: 16px;
}
.shelf-books .story-credit {
  font-size: 11px;
}
.contributor-profiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.contributor-profile {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 24px;
  border-top: 1px solid #e3e8e4;
  padding-top: 30px;
}
.profile-avatar {
  height: 74px;
  width: 74px;
  border-radius: 50%;
  background: #edf4e8;
  color: #397744;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 25px;
}
.contributor-profile h2 {
  font-size: 27px;
  max-width: 380px;
}
.contributor-profile p {
  font-size: 16px;
  margin-top: 9px;
}
.profile-role {
  display: block;
  font-size: 13px;
  color: #748174;
  margin-top: 12px;
}
.profile-story {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e6ece6;
}
.profile-story img {
  width: 95px;
  height: 75px;
  object-fit: cover;
  border-radius: 5px;
}
.profile-story > span {
  font-size: 12px;
  color: #70806f;
}
.profile-story strong {
  display: block;
  font-size: 18px;
  color: #316e40;
  margin-top: 4px;
}
.profile-story > span:last-child {
  margin-left: auto;
  font-size: 23px;
}
.about-intro {
  max-width: 1380px;
}
.about-intro h1 {
  font-size: 47px;
  max-width: 900px;
}
.about-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding-top: 15px;
}
.about-overview > img {
  width: 100%;
  height: 345px;
  object-fit: cover;
  border-radius: 7px;
}
.about-overview h2 {
  font-size: 30px;
  margin-bottom: 18px;
}
.about-overview p {
  font-size: 17px;
  line-height: 1.8;
  margin-top: 12px;
}
.about-process ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
  padding-left: 25px;
  margin-top: 28px;
}
.about-process li {
  padding-left: 6px;
  color: #3e6e47;
}
.about-process strong {
  font-size: 20px;
  color: #33463a;
}
.about-process p {
  font-size: 16px;
  margin-top: 12px;
}
.prose p,
.guide-steps p {
  font-size: 17px;
}
.account-form h1 {
  font-size: 38px;
}
.account-form label,
.simple-form label {
  font-size: 16px;
}
.account-form input,
.account-form select,
.account-form textarea {
  font-size: 16px;
}
.account-form .small-text:empty {
  display: none;
}
.activation-page {
  max-width: 650px;
  padding: 65px 0;
}
.activation-page > p {
  margin: 20px 0 28px;
}
.activation-page h1 {
  font-size: 38px;
}
.pre-line {
  white-space: pre-line;
}/* Story controls use the same type system; artwork retains its own colours. */
.book-player .book-footer > button {
  border-radius: 6px;
  min-height: 44px;
  font-size: 15px;
}
.book-player .book-footer > button:last-child {
  background: #fff;
  color: #245a32;
}
.cinema .player-next-group > .button {
  border-radius: 6px;
  min-height: 46px;
  font-size: 15px;
}
.book-player .book-caption h2,
.cinema .player-content h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.book-player .book-topbar button,
.book-player .book-topbar select {
  min-height: 42px;
}
.endgame h2 {
  font-family: var(--sans);
  font-weight: 600;
}
.endgame-header > span {
  font-family: var(--sans);
}
.endgame-header button,
.endgame-bottom > button {
  min-height: 44px;
}
.endgame button {
  border-radius: 7px;
}
.endgame-trail > button {
  border-radius: 50%;
}
.endgame .endgame-foot,
.endgame .endgame-loose-shoe {
  border-radius: 50%;
}
@media (min-width: 1600px) {
  .book-player .book-topbar,
  .cinema .player-header {
    padding: 1.4vw 2vw;
    min-height: 6vw;
  }
  .book-heading > a,
  .cinema .player-brand {
    font-size: clamp(20px, 1.4vw, 48px);
  }
  .book-heading > button,
  .cinema .chapter-trigger {
    font-size: clamp(15px, 1vw, 32px);
    max-width: 21vw;
  }
  .book-tools {
    gap: 0.7vw;
  }
  .book-tools .icon-button,
  .cinema .player-tool {
    min-width: clamp(48px, 3vw, 110px);
    min-height: clamp(48px, 3vw, 110px);
  }
  .book-tools .icon,
  .cinema .player-tool .icon {
    width: clamp(24px, 1.6vw, 50px);
    height: clamp(24px, 1.6vw, 50px);
  }
  .book-tools select,
  .book-style-switch button,
  .cinema .reading-toggle button,
  .cinema .visual-toggle button {
    font-size: clamp(15px, 1vw, 34px);
    padding: 0.6vw 0.8vw;
  }
  .book-player .book-footer {
    bottom: 3vw;
    padding: 1vw 2vw;
  }
  .book-player .book-footer > button {
    font-size: clamp(18px, 1.1vw, 38px);
    padding: 0.6vw 1.6vw;
    min-height: 3vw;
  }
  .book-player .book-utilities {
    font-size: clamp(12px, 0.75vw, 25px);
    padding: 0.5vw 2vw;
  }
  .book-player .book-utilities a,
  .book-player .book-utilities button {
    font-size: inherit;
  }
  .book-player .book-activity-line {
    bottom: 7.2vw;
    font-size: clamp(14px, 0.85vw, 29px);
  }
  .book-player .book-caption {
    bottom: 10vw;
    width: min(56vw, 1450px);
  }
  .book-player .book-caption p {
    font-size: clamp(20px, 1.15vw, 42px);
    max-width: 1400px;
  }
  .book-player .book-caption h2 {
    font-size: clamp(36px, 2.2vw, 78px);
  }
  .book-player .book-caption > span {
    font-size: clamp(12px, 0.8vw, 26px);
  }
  .book-player .book-focus-copy p,
  .cinema .focus-copy p {
    font-size: clamp(20px, 1.15vw, 42px);
  }
  .book-player .book-focus-copy h2,
  .cinema .focus-copy h2 {
    font-size: clamp(38px, 2.5vw, 88px);
  }
  .cinema .player-content > p {
    font-size: clamp(22px, 1.3vw, 46px);
    max-width: 1300px;
  }
  .cinema[data-reading="narasi"] .player-content {
    width: 48%;
    max-width: 1600px;
  }
  .cinema[data-reading="narasi"] .player-content h2 {
    font-size: clamp(40px, 2.6vw, 90px);
  }
  .cinema[data-reading="narasi"] .player-content > p {
    font-size: clamp(20px, 1.15vw, 42px);
  }
  .cinema .player-content {
    bottom: 12vw;
  }
  .cinema .player-footer {
    padding: 1.5vw 2vw;
  }
  .cinema .scene-count {
    font-size: clamp(14px, 0.9vw, 29px);
  }
  .cinema .player-next-group > .button {
    font-size: clamp(18px, 1.1vw, 38px);
    min-height: 3vw;
    padding: 0.6vw 1.4vw;
  }
  .cinema .cinema-kicker {
    font-size: clamp(12px, 0.7vw, 24px);
  }
  .endgame-header {
    height: 9vh;
    padding: 1.4vw 3vw;
  }
  .endgame-header > span {
    font-size: clamp(24px, 1.5vw, 48px);
  }
  .endgame-header button {
    font-size: clamp(18px, 1vw, 34px);
  }
  .endgame-intro {
    top: 13vh;
  }
  .endgame-intro h2 {
    font-size: clamp(44px, 2.5vw, 96px);
  }
  .endgame-intro p {
    font-size: clamp(22px, 1.3vw, 44px);
  }
  .endgame-eyebrow {
    font-size: clamp(12px, 0.7vw, 25px);
  }
  .endgame-board,
  .endgame[data-kind="match"] .endgame-board {
    inset: 31vh 7% 24vh;
  }
  .endgame-item img {
    height: clamp(220px, 22vh, 620px);
  }
  .endgame-friends .endgame-item img {
    height: clamp(260px, 30vh, 780px);
  }
  .endgame-item > span,
  .endgame-friends .endgame-item > span,
  .endgame-gallery .endgame-item > span,
  .endgame-pieces .endgame-item > span {
    font-size: clamp(24px, 1.3vw, 44px);
  }
  .endgame-pieces .endgame-item img {
    height: clamp(190px, 20vh, 550px);
  }
  .endgame-targets > button {
    font-size: clamp(23px, 1.2vw, 42px);
    min-height: 6vh;
  }
  .endgame-target-image {
    width: clamp(65px, 4vw, 150px);
    height: clamp(65px, 4vw, 150px);
  }
  .endgame-footer {
    bottom: 3vh;
  }
  .endgame-status {
    font-size: clamp(22px, 1.25vw, 43px);
    max-width: 80vw;
    min-height: 7vh;
  }
  .endgame-bottom {
    padding-top: 2vh;
  }
  .endgame-bottom > button {
    font-size: clamp(18px, 1vw, 35px);
  }
  .endgame-comfort {
    font-size: clamp(15px, 0.8vw, 28px);
  }
  .endgame-dots span {
    width: 1vw;
    height: 1vw;
  }
  .endgame-ball {
    width: 6vw;
    height: 6vw;
  }
  .endgame-walker {
    width: 18vw;
    height: 18vw;
  }
  .endgame-trail > button {
    width: 5vw;
    height: 5vw;
    font-size: 2vw;
  }
  .endgame[data-kind="shoes"] .endgame-intro {
    top: 13vh;
  }
  .endgame[data-kind="shoes"] .endgame-intro p {
    max-width: 35vw;
  }
  .endgame-foot > span {
    font-size: 2vw;
  }
  .endgame-friends .endgame-item.has-turn:after {
    font-size: clamp(16px, 1vw, 32px);
    top: -3vh;
  }
  .book-player .book-chapters {
    top: 7vw;
  }
  .book-player .book-chapters button {
    font-size: clamp(16px, 1vw, 32px);
  }
}

.age-guidance {
  font-size: 14px;
  color: #526776;
  margin: 14px 0 4px;
}
.book-player.is-screen-view,
.cinema.is-screen-view {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  inset: 0;
  margin: 0;
}
/* forms.css — formulir bersama (masuk, daftar, kontributor, aktivasi) */

.simple-form {
  max-width: 980px;
}
.simple-form label {
  display: block;
  margin-bottom: 20px;
  font-weight: 600;
}
.simple-form input,
.simple-form textarea,
.simple-form select {
  display: block;
  width: 100%;
  border: 1px solid #cfd8d0;
  border-radius: 5px;
  padding: 11px 13px;
  font-size: 16px;
  background: #fff;
  color: #34453a;
  margin-top: 8px;
  font-weight: 400;
}
.simple-form textarea {
  line-height: 1.65;
  resize: vertical;
}
.simple-form .checkbox-label {
  display: flex;
  font-size: 15px;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400;
}
.simple-form .checkbox-label input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 3px 0 0;
}
.simple-form .optional {
  font-size: 13px;
  color: #7a857a;
  font-weight: 400;
}
.submission-layout {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 75px;
}
.submission-layout .draft-list h2 {
  font-size: 26px;
}
.submission-layout .draft h3 {
  font-size: 22px;
}
.submission-layout .draft a {
  color: var(--green);
  font-size: 15px;
}
.submission-layout .small-text {
  margin-top: 20px;
}

.small-text {
  font-size: 14px;
}
.simple-form > details summary {
  cursor: pointer;
}
.simple-form .form-row {
  gap: 20px;
}
.activation-page .simple-form {
  max-width: 550px;
}
/* home-preview.css — aturan bersama */
.home-story-preview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 6px 24px 0;
  min-height: 520px;
  height: min(690px, calc(100vh - 108px));
}
.home-preview-landscape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  z-index: -3;
}
.home-preview-light {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.home-preview-rima {
  position: absolute;
  right: -2%;
  bottom: -11%;
  width: 47%;
  height: 94%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 22px #274b201c);
  z-index: -1;
}
.home-preview-copy {
  position: absolute;
  left: 5.5%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 58%;
  padding-bottom: 15px;
}
.home-preview-copy h1 {
  font-style: normal;
  font-size: clamp(50px, 5.4vw, 90px);
  line-height: 1.04;
}
.home-preview-copy p {
  font-size: clamp(17px, 1.4vw, 23px);
  line-height: 1.55;
  margin: 26px 0;
}
.home-preview-copy .button {
  min-width: 190px;
  justify-content: space-between;
  gap: 36px;
  font-size: 17px;
  padding: 17px 24px;
}
.home-preview-count {
  position: absolute;
  right: 4%;
  bottom: 22px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
}
.home-search {
  margin-top: 40px;
}
.home-preview-copy a:focus-visible {
  outline: 3px solid #d6a237;
  outline-offset: 5px;
}
@media (min-width: 1800px) {
  .home-story-preview {
    margin-left: 3%;
    margin-right: 3%;
    height: min(1000px, calc(100vh - 150px));
  }
  .home-preview-copy h1 {
    font-size: clamp(90px, 5vw, 180px);
  }
  .home-preview-copy p {
    font-size: clamp(23px, 1.35vw, 45px);
  }
  .home-preview-copy .button {
    font-size: clamp(18px, 1vw, 30px);
    padding: 23px 36px;
  }
}
@media (max-width: 900px) {
  .home-preview-copy h1 {
    font-size: 52px;
  }
  .home-preview-rima {
    right: -12%;
    width: 58%;
  }
  .home-preview-copy {
    max-width: 65%;
  }
}
/* scene-editor.css — aturannya kini di pustakadongeng-admin.css */

@keyframes studio-notice-fade {
  0%,
  80% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
/* story-editor-playback.css — aturan bersama */
.cinema .scene-actor.is-touch-area {
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
}
.cinema .scene-actor.is-touch-area > .actor-base,
.cinema .scene-actor.is-touch-area > .actor-reaction {
  visibility: hidden;
}
.cinema .scene-actor.is-touch-area > .actor-label {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}
#story-player.cinema[data-text-position="right"] .player-content {
  left: auto;
  right: 7%;
  text-align: left;
}
#story-player.cinema[data-text-position="right"] .cinema-vignette {
  transform: scaleX(-1);
}
#story-player.cinema[data-text-position="bottom"] .player-content {
  left: 7%;
  right: 7%;
  bottom: 15%;
  width: 86%;
  max-width: none;
}
#story-player.cinema[data-text-position="bottom"] .player-content p {
  max-width: 75%;
}
#story-player.book-player[data-text-position="none"] .book-caption {
  display: none;
}
#story-player.book-player[data-text-position="right"] .book-caption {
  left: auto;
  right: 6%;
  text-align: left;
}
#story-player.book-player[data-text-position="bottom"] .book-caption {
  left: 6%;
  right: 6%;
  bottom: 15%;
  width: 88%;
  max-width: none;
}
.book-layer-actor {
  position: absolute;
  transform: translate(-50%, -100%);
  width: auto;
  max-width: 90%;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: end;
}
.book-layer-actor img {
  height: 100%;
  width: auto;
  object-fit: contain;
  max-width: none;
}
.book-layer-actor:focus-visible {
  outline: 3px solid #f1d182;
  outline-offset: 4px;
}
.book-detail-target:before {
  content: "+";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border: 1px solid white;
  border-radius: 50%;
  background: #1e5b4b99;
  color: white;
  font-size: 25px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 7px #ffffff19;
}
.book-detail-target:after {
  display: none !important;
}
/* screen.css — aturan bersama *//* Desktop storytelling controls scale with a Full HD or 4K classroom display. */
@media (min-width: 1200px) {
  #story-player .book-tools .icon-button,
  #story-player .player-tools .player-tool {
    width: clamp(44px, 3vw, 88px);
    height: clamp(44px, 3vw, 88px);
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    background: #143d35b8;
    border: 1px solid #ffffff65;
    color: #fff;
  }
  #story-player .book-tools .icon-button .icon,
  #story-player .player-tools .player-tool .icon {
    width: clamp(20px, 1.4vw, 40px);
    height: clamp(20px, 1.4vw, 40px);
  }
  #story-player .book-tools .icon-button[aria-pressed="true"],
  #story-player .player-tools .player-tool[aria-pressed="true"] {
    background: #f0ead4;
    color: #214d3e;
  }
  #story-player .book-tools .icon-button:disabled {
    opacity: 0.45;
  }
  #story-player .book-reading-label select {
    font-size: clamp(14px, 0.9vw, 32px);
    height: clamp(44px, 3vw, 88px);
    max-width: 20vw;
  }
  #story-player .book-heading > button {
    font-size: clamp(14px, 0.9vw, 32px);
    max-width: 26vw;
    min-height: 44px;
  }
  #story-player .book-heading > a {
    font-size: clamp(19px, 1.25vw, 42px);
  }
  #story-player .book-style-switch button,
  #story-player .reading-toggle button,
  #story-player .visual-toggle button {
    min-height: 44px;
    font-size: clamp(13px, 0.85vw, 30px);
  }
  #story-player .book-topbar {
    align-items: flex-start;
  }
  #book-prev,
  #book-next,
  #prev-scene,
  #next-scene {
    min-height: clamp(48px, 3.2vw, 100px);
    font-size: clamp(16px, 1vw, 36px);
  }
  #book-progress {
    max-width: 58vw;
  }
  #book-progress button {
    min-height: 44px;
  }
  #story-player .book-touch-hint {
    font-size: clamp(14px, 0.9vw, 32px);
  }
}
@media (min-width: 2200px) {
  #story-player .book-caption {
    max-width: 48vw;
    width: 48vw;
    bottom: 12vh;
  }
  #story-player .book-focus-copy h2 {
    font-size: clamp(42px, 2.2vw, 84px);
  }
  #story-player .book-focus-copy p {
    font-size: clamp(24px, 1.1vw, 42px);
    max-width: none;
  }
}/* Amanat legenda: lapisan latar meredup, teks tetap menyatu dengan panggung. */
#story-player.cinema[data-scene-type="ending"] .cinema-vignette {
  background: linear-gradient(90deg, #062b27ed 0%, #082e28db 57%, #092b2766 100%);
}
#story-player.cinema[data-scene-type="ending"] .player-content {
  left: 7%;
  bottom: 140px;
  transform: none;
  width: 78vw;
  max-width: 1500px;
  text-align: left;
  color: #fff;
}
#story-player.cinema[data-scene-type="ending"] .player-content h2 {
  color: #fff;
  text-shadow: 0 2px 8px #001c1c;
  font-weight: 700;
  line-height: 1.15;
}
#story-player.cinema[data-scene-type="ending"] .player-content > p {
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 4px #001b16;
  line-height: 1.75;
  max-width: none;
}
#story-player.cinema[data-scene-type="ending"] .player-content .cinema-kicker,
#story-player.cinema[data-scene-type="ending"] .cinema-credit {
  color: #e4efe8;
  opacity: 1;
}
#story-player.cinema[data-scene-type="ending"] .ending-values {
  justify-content: flex-start;
  gap: 12px;
}
#story-player.cinema[data-scene-type="ending"] .ending-values span {
  color: #fff;
  background: #0b352be6;
  border: 1px solid #ffffff70;
  padding: 8px 12px;
  font-size: clamp(14px, 0.9vw, 32px);
  font-weight: 600;
}
#story-player.cinema[data-scene-type="ending"] .reflection-drawer {
  color: #fff;
  max-width: 100%;
  border-color: #ffffff80;
}
#story-player.cinema[data-scene-type="ending"] .reflection-drawer summary {
  color: #fff;
  font-size: clamp(15px, 0.95vw, 34px);
}
#story-player.cinema[data-scene-type="ending"] .reflection-input {
  color: #153d32;
  background: #ffffffed;
  line-height: 1.5;
}
#story-player.cinema[data-scene-type="ending"] .ending-actions {
  justify-content: flex-start;
  gap: 22px;
}
#story-player.cinema[data-scene-type="ending"] .ending-actions button {
  color: #fff;
  font-size: clamp(14px, 0.85vw, 30px);
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media (min-width: 2200px) {
  #story-player.cinema[data-scene-type="ending"] .player-content {
    bottom: 12vh;
    width: 76vw;
    max-width: 2800px;
  }
}/* Penyiapan hosting memakai lembar gaya yang sama; aturan dibatasi ke halaman ini. */
body.setup-page{font:18px/1.55 var(--sans,Arial,sans-serif);color:#21452c;background:#f5f8f4;margin:0;padding:5vh 24px}
.setup-page main{max-width:680px;background:#fff;margin:auto;padding:36px;border:1px solid #dce6dc;border-radius:12px}.setup-page h1{font-size:36px;line-height:1.1}.setup-page main>p:first-child{font-size:13px;letter-spacing:.12em}.setup-page label{display:block;margin:20px 0;font-weight:600}.setup-page input{display:block;margin:8px 0;width:100%;padding:12px;border:1px solid #b9cbbc;border-radius:5px;font:inherit}.setup-page button,.setup-page a{background:var(--green);color:white;border:0;border-radius:5px;padding:14px 22px;font-size:17px;cursor:pointer}.setup-page a{display:inline-block;text-decoration:none}.setup-page .note{font-size:14px;color:#586e5e}.setup-page [role=alert]{border-left:4px solid #b65025;padding:12px;background:#fff3e9}
/* tema-dongeng.css — nuansa buku cerita untuk halaman publik (palet ada di :root library-v18) */
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --display: "Fredoka", var(--sans);
  --honey-soft: #fbecc8;
  --leaf-soft: #e4efd9;
  --cream-deep: #f3e9d2;
  --card-shadow: 0 6px 18px #6b4f2414;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6Q15 0 30 6T60 6T90 6T120 6' fill='none' stroke='%23e0a33a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 10 10 4 21 3c0 10-6 17-17 17z' fill='%2393b874'/%3E%3Cpath d='M4 20 14 10' stroke='%232f6b40' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
body {
  background: var(--paper);
  color: var(--ink);
}
p {
  color: var(--muted);
}
h1,
h2,
h3,
.brand > span:last-child {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.button {
  border-radius: 999px;
  font-weight: 600;
}
.button-outline {
  background: var(--white);
}/* Header dan footer */
.site-header {
  background: var(--paper);
  border-bottom: 0;
  box-shadow: none;
}
.site-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 12px;
  background: var(--wave) repeat-x center / 120px 12px;
  opacity: 0.55;
  pointer-events: none;
}
.brand-mark {
  background: var(--honey-soft);
  color: var(--green);
  border-radius: 14px;
}
.main-nav > a {
  font-weight: 600;
}
.site-footer {
  position: relative;
  background: var(--cream-deep);
  border-top: 0;
}
.site-footer:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 12px;
  background: var(--wave) repeat-x center / 120px 12px;
}/* Beranda */
.home-story-preview {
  border-radius: 28px;
  background: var(--leaf-soft);
}
.home-preview-light {
  background: linear-gradient(90deg, #fbf6ecf5 0%, #fbf6ece0 26%, #fbf6ec99 44%, #fbf6ec00 70%);
}
.home-preview-copy h1 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: -0.5px;
}
.home-preview-copy p {
  color: #4b4538;
}
.home-preview-copy .button {
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--green-dark);
}
.home-preview-copy .button:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--green-dark);
}
.home-preview-count {
  border-radius: 999px;
  background: var(--honey-soft);
  color: var(--green-dark);
  font-family: var(--display);
}
.home-search > div {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--card-shadow);
}
.home-search > div:focus-within {
  border-color: var(--gold);
}
.home-search .icon {
  color: var(--green);
}
.shelf-heading h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--green-dark);
}
.shelf-heading h2:before {
  content: "";
  width: 30px;
  height: 30px;
  background: var(--leaf) no-repeat center / contain;
}
.home-shelf + .home-shelf {
  padding-top: 42px;
  background: var(--wave) repeat-x top / 120px 12px;
}
.shelf-heading > a {
  color: var(--green);
  font-weight: 600;
}/* Kartu cerita */
.library-card.story-card {
  background: transparent;
}
.library-card .story-cover {
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s, box-shadow 0.25s;
}
.library-card:hover .story-cover,
.library-card .story-cover:focus-visible {
  transform: translateY(-5px) rotate(-0.6deg);
  box-shadow: 0 14px 26px #6b4f2426;
}
.library-card .cover-label {
  border-radius: 999px;
  background: var(--honey-soft);
  color: var(--green-dark);
  font-family: var(--display);
  font-weight: 600;
  padding: 4px 12px;
}
.library-card .cover-play {
  background: var(--white);
  color: var(--green);
  box-shadow: 0 3px 10px #0000001f;
}
.library-card .story-info h3 {
  color: var(--ink);
  letter-spacing: 0;
}
.story-tags > span,
.story-tags > span + span {
  background: var(--leaf-soft);
  color: var(--green-dark);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
}
.story-tags > span + span {
  background: var(--honey-soft);
}
.shelf-books .story-credit {
  display: none;
}
.library-card .story-meta,
.library-card .story-credit {
  color: var(--muted);
}/* Katalog */
.filter-tabs button {
  border-radius: 999px;
  background: var(--white);
  border-color: var(--line);
  font-weight: 600;
}
.filter-tabs button.active {
  background: var(--green);
  border-color: var(--green);
}
.search-box,
.catalog-controls .region-select {
  border-radius: 999px;
  background: var(--white);
  border-color: var(--line);
}
.search-box input {
  border: 0;
  background: transparent;
  outline: 0;
}
.catalog-controls .region-select select {
  border-radius: 999px;
  border: 1px solid var(--line);
  background-color: var(--white);
  padding-left: 16px;
}
.result-count {
  color: var(--muted);
}
.page-intro h1,
.catalog-title h1 {
  color: var(--green-dark);
}
@media (prefers-reduced-motion: reduce) {
  .library-card .story-cover {
    transition: none;
  }
  .library-card:hover .story-cover {
    transform: none;
  }
}/* Pemutar cerita: judul seragam dan teks terbaca dari jarak kelas */
#story-player h2,
#style-dialog h2,
.book-heading a > span,
.player-brand {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0;
}
#story-player.book-player .book-caption p {
  text-shadow: 0 1px 3px #000a, 0 0 18px #0006;
}
#story-player.book-player .book-caption h2 {
  text-shadow: 0 2px 6px #0008;
}
#book-activity-hint {
  font-size: 14px;
  text-shadow: 0 1px 3px #000b;
}
#book-page-count,
#book-sources {
  font-size: 13px;
}
@media (max-width: 1599px) {
  #story-player.book-player .book-caption p {
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1.7;
  }
  #story-player.cinema[data-reading] .player-content p {
    font-size: clamp(17px, 1.45vw, 22px);
  }
}/* Layar sedang dan kecil (library-v18 belum memilikinya) */
@media (max-width: 1100px) {
  .shelf-books,
  .library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .container {
    width: calc(100% - 32px);
  }
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }
  .catalog-controls .search-box {
    flex: 1 1 100%;
  }
  .catalog-controls .region-select {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
  .catalog-controls .region-select select {
    width: 100%;
  }
  .shelf-books {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 64%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 16px 10px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .shelf-books::-webkit-scrollbar {
    display: none;
  }
  .shelf-books > * {
    scroll-snap-align: start;
  }
  .shelf-heading h2 {
    font-size: 26px;
  }
  .home-story-preview {
    margin: 6px 12px 0;
    height: auto;
    min-height: 600px;
    border-radius: 24px;
  }
  .home-preview-light {
    background: linear-gradient(180deg, #fbf6ecf2 0%, #fbf6ecd9 38%, #fbf6ec00 62%);
  }
  .home-preview-copy {
    top: 34px;
    left: 22px;
    right: 22px;
    transform: none;
    max-width: none;
  }
  .home-preview-copy h1 {
    font-size: clamp(36px, 10.5vw, 46px);
  }
  .home-preview-copy p {
    margin: 16px 0 22px;
  }
  .home-preview-rima {
    width: 82%;
    height: 50%;
    right: -6%;
    bottom: -4%;
  }
}
@media (max-width: 420px) {
  .library-grid {
    grid-template-columns: 1fr;
  }
}
/* kontributor-tentang.css — halaman Kontributor, Tentang, foto profil, kredit footer */
.text-button {
  padding: 0;
  color: var(--muted);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-button:hover {
  color: #a3442f;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
}
.footer-credit {
  color: var(--muted);
}
.person-photo {
  width: 112px;
  height: 112px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--honey-soft);
  color: var(--green-dark);
  font: 600 36px/1 var(--display);
  border: 4px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold), var(--card-shadow);
}
.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}/* Kontributor */
.people-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: end;
  padding-top: 56px;
  padding-bottom: 40px;
}
.people-hero h1,
.about-hero h1 {
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.1;
  color: var(--green-dark);
  margin: 12px 0 18px;
}
.people-hero p,
.about-hero p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 620px;
}
.people-stats,
.about-collection dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin: 0;
}
.people-stats div,
.about-collection dl div {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 16px 18px;
}
.people-stats dt,
.about-collection dt {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.people-stats dd,
.about-collection dd {
  margin: 2px 0 0;
  font: 600 38px/1.1 var(--display);
  color: var(--green-dark);
}
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
  padding-top: 42px;
  background: var(--wave) repeat-x top / 120px 12px;
}
.person-card {
  background: var(--white);
  border-radius: 28px;
  padding: 30px 26px 24px;
  text-align: center;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.person-card h2 {
  font-size: 24px;
  margin-top: 18px;
  color: var(--ink);
}
.person-role {
  margin-top: 6px;
  color: var(--green);
  font-weight: 600;
  font-size: 15px;
}
.person-place {
  font-size: 14px;
  margin-top: 2px;
}
.person-count {
  margin: 14px 0 12px;
  background: var(--leaf-soft);
  color: var(--green-dark);
  border-radius: 999px;
  padding: 3px 14px;
  font-size: 13px;
  font-weight: 700;
}
.person-stories {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: grid;
  gap: 8px;
  text-align: left;
}
.person-stories a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: 14px;
  background: var(--paper);
  transition: background 0.2s;
}
.person-stories a:hover {
  background: var(--honey-soft);
  color: inherit;
}
.person-stories img {
  width: 56px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
}
.person-stories span {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}
.person-stories small {
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
}
.people-team,
.about-credits {
  background: var(--cream-deep);
  border-radius: 32px;
  padding: 40px;
  margin-top: 56px;
}
.people-team h2 {
  margin-top: 8px;
  color: var(--green-dark);
}
.people-team-grid,
.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.people-team-grid article,
.about-feature-grid article {
  background: var(--white);
  border-radius: 22px;
  padding: 24px;
}
.people-team-grid .icon,
.about-feature-grid .icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 14px;
  background: var(--honey-soft);
  color: var(--green-dark);
}
.people-team-grid h3,
.about-feature-grid h3 {
  font-size: 21px;
  margin: 14px 0 6px;
}
.people-team-grid p,
.about-feature-grid p {
  font-size: 15px;
  line-height: 1.6;
}
.people-invite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-top: 56px;
  padding: 40px;
  border-radius: 32px;
  background: var(--green-dark);
}
.people-invite h2 {
  color: #fffaf0;
}
.people-invite p {
  color: #e6efe0;
  margin-top: 8px;
  max-width: 620px;
}
.people-invite ol,
.about-flow ol {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  counter-reset: langkah;
}
.people-invite li {
  counter-increment: langkah;
  color: #e6efe0;
  font-size: 14px;
}
.people-invite li strong,
.about-flow li strong {
  display: block;
  font: 600 18px/1.3 var(--display);
}
.people-invite li strong {
  color: #fffaf0;
}
.people-invite li strong:before,
.about-flow li strong:before {
  content: counter(langkah);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--green-dark);
  font-size: 15px;
}
.people-invite .button {
  flex: none;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-dark);
}/* Tentang */
.about-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 40px;
}
.about-hero > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: var(--card-shadow);
}
.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.about-audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.about-audience article {
  background: var(--white);
  border-radius: 28px;
  padding: 30px;
  box-shadow: var(--card-shadow);
}
.about-audience h2 {
  font-size: 26px;
  margin: 12px 0 8px;
  color: var(--ink);
}
.about-tag {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 14px;
  background: var(--leaf-soft);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 13px;
}
.about-tag-honey {
  background: var(--honey-soft);
}
.about-features h2,
.about-flow h2,
.about-collection h2 {
  color: var(--green-dark);
}
.about-collection {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 32px;
  align-items: center;
  padding: 36px 40px;
  border-radius: 32px;
  background: var(--leaf-soft);
}
.about-flow li {
  counter-increment: langkah;
  background: var(--white);
  border-radius: 22px;
  padding: 22px;
}
.about-flow li strong {
  color: var(--ink);
}
.about-flow li p {
  margin-top: 8px;
  font-size: 15px;
}
.about-credits {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}
.about-dev {
  display: flex;
  gap: 24px;
  align-items: center;
}
.about-dev h2 {
  margin: 4px 0 8px;
  color: var(--green-dark);
}
.about-credit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.about-credit-list li {
  background: var(--white);
  border-radius: 18px;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--muted);
}
.about-credit-list strong {
  display: block;
  color: var(--ink);
}/* Foto profil di Ruang Saya */
.my-photo-card {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--white);
  border-radius: 28px;
  padding: 24px 28px;
  margin-bottom: 32px;
  box-shadow: var(--card-shadow);
}
.my-photo-card .my-photo {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--honey-soft);
  color: var(--green-dark);
  font: 600 30px/1 var(--display);
  box-shadow: 0 0 0 2px var(--gold);
}
.my-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.my-photo-card h2 {
  font-size: 22px;
}
.my-photo-card p {
  font-size: 15px;
  margin: 4px 0 12px;
}
.my-photo-card form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.my-photo-card form + form {
  margin-top: 8px;
}
@media (max-width: 900px) {
  .people-hero,
  .about-hero,
  .about-collection,
  .about-credits {
    grid-template-columns: 1fr;
  }
  .people-team-grid,
  .about-feature-grid {
    grid-template-columns: 1fr 1fr;
  }
  .people-invite {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 600px) {
  .about-audience,
  .people-team-grid,
  .about-feature-grid,
  .people-invite ol,
  .about-flow ol {
    grid-template-columns: 1fr;
  }
  .people-team,
  .about-credits,
  .people-invite,
  .about-collection {
    padding: 26px 20px;
    border-radius: 24px;
  }
  .about-dev,
  .my-photo-card {
    flex-direction: column;
    text-align: center;
  }
}/* Tentang: ekosistem, mode pendongeng, alur 6 langkah, pernyataan */
.about-features .eyebrow,
.about-flow .eyebrow {
  margin-bottom: 8px;
}
.about-lead {
  font-size: 17px;
  max-width: 720px;
  margin-top: 8px;
}
.about-feature-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.about-modes {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.about-modes li {
  background: var(--paper);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--muted);
}
.about-modes strong {
  display: block;
  font: 600 17px/1.3 var(--display);
  color: var(--green-dark);
}
.about-flow-6 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.about-flow-6 li:last-child {
  background: var(--honey-soft);
}
.about-statement {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 36px 40px;
  border-radius: 32px;
  background: var(--green-dark);
}
.about-statement > .icon {
  width: 56px;
  height: 56px;
  padding: 12px;
  flex: none;
  border-radius: 18px;
  background: var(--gold);
  color: var(--green-dark);
}
.about-statement h2 {
  color: #fffaf0;
}
.about-statement p {
  color: #e6efe0;
  font-size: 17px;
  line-height: 1.7;
  margin-top: 8px;
  max-width: 860px;
}
@media (max-width: 1100px) {
  .about-flow-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) {
  .about-feature-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .about-feature-grid-4,
  .about-modes,
  .about-flow-6 {
    grid-template-columns: 1fr !important;
  }
  .about-statement {
    flex-direction: column;
    padding: 26px 20px;
    border-radius: 24px;
  }
}
.about-statement + .about-collection {
  margin-top: 24px;
}/* Tentang: profil pengembang */
.about-profile {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 720px;
  margin-top: 48px;
  margin-bottom: 56px;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 6px 24px #3a4a2a14;
}
.about-profile img {
  width: 104px;
  height: 104px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--honey-soft);
}
.about-profile h2 {
  margin: 4px 0 6px;
  font-size: 22px;
}
.about-profile h2 a {
  color: var(--green-dark);
}
.about-profile h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.about-profile h2 .icon {
  width: 16px;
  height: 16px;
  transform: rotate(-45deg);
}
.about-profile p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .about-profile {
    flex-direction: column;
    text-align: center;
  }
}
.people-team-grid h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #e0a33a;
  text-underline-offset: 4px;
}
/* Bilah atas pemutar legenda di HP: sisakan ruang untuk tombol layar penuh dengan menyembunyikan tulisan merek (ikon buku tetap). */
@media (max-width: 550px) {
  .cinema .player-brand {
    font-size: 0;
  }
}
/* Saran layar penuh di HP (dibuat oleh PustakaScreen di pustakadongeng.js) */
.screen-hint {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 60;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: #f6f1de;
  color: #214d3e;
  box-shadow: 0 8px 30px #0006;
  font-size: 14px;
  line-height: 1.5;
}
.screen-hint[hidden] {
  display: none;
}
.screen-hint p {
  margin: 0;
}
.screen-hint div {
  display: flex;
  gap: 8px;
}
.screen-hint button {
  flex: 1;
  min-height: 44px;
  border-radius: 8px;
  font-weight: 600;
}
.screen-hint-go {
  background: #214d3e;
  color: #fff;
}
.screen-hint-skip {
  background: #e6dfc4;
  color: #214d3e;
}
/* Beranda: foto utama menempel di bawah bilah navigasi. Batasnya berupa gelombang berisi warna kertas,
   sehingga tidak ada bagian foto yang muncul di atas garis. */
body[data-page="beranda"] .site-header::after {
  bottom: -6px;
  height: 18px;
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6Q15 0 30 6T60 6T90 6T120 6V0H0Z' fill='%23fbf6ec'/%3E%3Cpath d='M0 6Q15 0 30 6T60 6T90 6T120 6' fill='none' stroke='%23e0a33a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom / 120px 12px,
    linear-gradient(#fbf6ec, #fbf6ec) no-repeat left top / 100% 6px;
}
body[data-page="beranda"] .home-story-preview {
  margin: 0;
  border-radius: 0 0 28px 28px;
}
@media (max-width: 700px) {
  body[data-page="beranda"] .home-story-preview {
    border-radius: 0 0 24px 24px;
  }
}
/* HP dalam posisi melebar (tinggi layar kecil): kecilkan judul, teks, dan tombol pemutar legenda agar tidak menutupi gambar */
@media (orientation: landscape) and (max-height: 520px) {
  .cinema .player-header {
    padding: 10px 18px;
  }
  .cinema .player-brand {
    font-size: 14px;
  }
  .cinema .player-tool {
    min-height: 32px;
    padding: 6px;
  }
  .cinema .player-tool > .icon {
    width: 14px;
    height: 14px;
  }
  .cinema .visual-toggle button,
  .cinema .reading-toggle button {
    font-size: 9px;
    padding: 6px 9px;
    min-height: 26px;
  }
  .cinema .reading-toggle {
    top: 52px;
    left: 18px;
  }
  .cinema .player-content {
    left: 5%;
    bottom: 70px;
    max-width: 62%;
    max-height: calc(100% - 140px);
  }
  .cinema .player-content > .cinema-kicker {
    font-size: 8px;
    margin-bottom: 6px;
  }
  .cinema .player-content h2,
  .cinema[data-layout] .player-content h2 {
    font-size: clamp(20px, 3.4vw, 28px) !important;
    line-height: 1.15;
    max-width: none;
  }
  .cinema[data-layout="opening"] .player-content h2 {
    font-size: clamp(24px, 4vw, 34px) !important;
  }
  .cinema .player-content > p,
  .cinema[data-layout] .player-content > p {
    font-size: 12.5px;
    line-height: 1.55;
    margin-top: 6px;
    max-width: 420px;
  }
  .cinema .player-footer {
    padding: 0 18px 10px;
  }
  .cinema .prev-button {
    font-size: 12px;
  }
  .cinema .scene-count {
    font-size: 10px;
  }
  .cinema #next-scene {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 13px;
  }
  .cinema .player-progress {
    margin-bottom: 8px;
  }
}