/* Interlude: dibaca seperti percakapan. Gelap, minimal, seperti aplikasi chat. */
:root {
  --bg: #0E0F11; --panel: #16171A; --ink: #ECECEA; --muted: #8A8C90; --dim: #5E6064; --line: rgba(255,255,255,.07);
  --you: #1F2125; --arka: #7FB077; --nara: #84AEDC; --sinta: #D9B47E; --tegar: #A9A6A0;
  --nar: #B9BAB6; --sn: #CFCBC2; --me-base: #15171A; --sms: #23262C; --note: #1B1D21; --ph-a: #2A2C31; --ph-b: #17181B; --on-voice: #0E0F11;
  --f-text: var(--qm-read); --f-ui: var(--qm-ui); --size: 17px;
  color-scheme: dark;
}
/* Terang: mengikuti tema situs. Gelembung putih di atas abu-abu pucat, warna tokoh digelapkan supaya tetap terbaca. */
:root[data-theme="light"] {
  --bg: #F2F2F4; --panel: #FFFFFF; --ink: #16171A; --muted: #6B6F76; --dim: #8A8F96; --line: rgba(17,18,20,.09);
  --you: #FFFFFF; --arka: #3F7D37; --nara: #2D6CB0; --sinta: #A06E22; --tegar: #6E6A63;
  --nar: #3E4146; --sn: #4A443B; --me-base: #FFFFFF; --sms: #FFFFFF; --note: #FFFFFF; --ph-a: #D7D9DE; --ph-b: #EDEEF1; --on-voice: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F2F2F4; --panel: #FFFFFF; --ink: #16171A; --muted: #6B6F76; --dim: #8A8F96; --line: rgba(17,18,20,.09);
    --you: #FFFFFF; --arka: #3F7D37; --nara: #2D6CB0; --sinta: #A06E22; --tegar: #6E6A63;
    --nar: #3E4146; --sn: #4A443B; --me-base: #FFFFFF; --sms: #FFFFFF; --note: #FFFFFF; --ph-a: #D7D9DE; --ph-b: #EDEEF1; --on-voice: #FFFFFF;
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { font: 15px/1.5 var(--f-ui); }
.chat-h { position: sticky; top: var(--qm-top-h); z-index: 5; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.ch-back { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; color: var(--ink); }
.ch-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--c, var(--muted)) 22%, var(--panel)); color: var(--c, var(--ink)); font: 600 15px var(--f-ui); transition: background .5s, color .5s; }
.h-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.h-t b { font-weight: 600; font-size: 15px; } .h-t small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-p { font: 500 12px var(--f-ui); color: var(--dim); font-variant-numeric: tabular-nums; }
.read { max-width: 640px; margin: 0 auto; padding: 0 16px 120px; outline: none; }
.top { text-align: center; padding: 10vh 0 24px; }
.kick { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0; }
.top h1 { font: italic 400 clamp(46px, 11vw, 76px)/1 var(--f-text); margin: 14px 0 14px; }
.sub { color: var(--muted); margin: 0 auto; max-width: 28em; font-size: 14px; }
.cast { display: flex; justify-content: center; gap: 18px; margin-top: 26px; font-size: 13px; color: var(--muted); }
.cast span { display: flex; align-items: center; gap: 8px; } .cast i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--f-ui); font-style: normal; background: color-mix(in srgb, var(--c) 22%, var(--panel)); color: var(--c); }
/* bab: seperti membuka percakapan baru */
.ch { --c: var(--muted); margin: 0 0 12vh; scroll-margin-top: 120px; }
.ch[data-v="arka"] { --c: var(--arka); } .ch[data-v="nara"] { --c: var(--nara); } .ch[data-v="sinta"] { --c: var(--sinta); }
.ch-h { text-align: center; margin: 0 0 22px; padding-top: 4vh; }
.ch-n { font: 500 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.ch-t { font: 400 26px/1.2 var(--f-text); margin: 6px 0 0; }
.ch h3 { display: flex; align-items: center; gap: 10px; justify-content: center; font: 500 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--vc, var(--muted)); margin: 6vh 0 16px; }
.ch h3::before, .ch h3::after { content: ''; height: 1px; width: 40px; background: var(--line); }
.ch h3[data-v="arka"] { --vc: var(--arka); } .ch h3[data-v="nara"] { --vc: var(--nara); } .ch h3[data-v="sinta"] { --vc: var(--sinta); }
/* lokasi: pesan sistem */
.loc { display: flex; justify-content: center; margin: 26px 0 18px; }
.loc span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 12px; background: var(--panel); color: var(--muted); font-size: 12px; }
.loc svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
/* narasi: penjelasan di antara gelembung */
.nar { font: italic 400 var(--size)/1.62 var(--f-text); color: var(--nar); margin: 14px 4px; text-wrap: pretty; }
.draft .nar { font-style: normal; color: var(--ink); background: var(--panel); border-left: 2px solid color-mix(in srgb, var(--arka) 60%, transparent); border-radius: 4px 12px 12px 4px; padding: 14px 16px; margin: 10px 0; }
.draft-f { text-align: center; font-size: 12px; color: var(--dim); margin: 14px 0 0; }
/* gelembung */
.msg { display: flex; flex-direction: column; align-items: flex-start; margin: 6px 0; max-width: 84%; }
.msg.me { align-items: flex-end; margin-left: auto; }
.msg .nm { font-size: 11.5px; font-weight: 500; color: var(--nc, var(--muted)); margin: 10px 12px 3px; }
.bub { font: 400 calc(var(--size) - 1px)/1.45 var(--f-ui); margin: 2px 0; padding: 9px 14px; border-radius: 18px 18px 18px 6px; background: var(--you); text-wrap: pretty; }
.me .bub { border-radius: 18px 18px 6px 18px; background: color-mix(in srgb, var(--c) 30%, var(--me-base)); }
.msg .aside { font: italic 400 calc(var(--size) - 2px)/1.5 var(--f-text); color: var(--muted); margin: 4px 12px 6px; }
.me .aside { text-align: right; }
.msg, .nar, .loc { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.js .msg:not(.in), .js .nar:not(.in) { opacity: 0; transform: translateY(10px); }
/* sembilan puluh dan sepuluh */
.split { margin: 10px 0 22px; user-select: none; }
.split-bar { display: flex; height: 40px; border-radius: 20px; overflow: hidden; cursor: pointer; border: 0; padding: 0; width: 100%; background: none; }
.split-bar span { display: grid; place-items: center; font: 500 13px var(--f-ui); color: var(--on-voice); transition: flex-grow .9s cubic-bezier(.2,.8,.2,1); min-width: 0; overflow: hidden; }
.split-a { background: var(--arka); } .split-n { background: var(--nara); }
.split small { display: block; text-align: center; color: var(--muted); font-size: 12px; margin-top: 8px; min-height: 1.4em; }
.end-l { text-align: center; font: italic 400 20px var(--f-text); color: var(--muted); margin: 0 0 8vh; }
.after { text-align: center; padding-bottom: 6vh; } .after-next { display: grid; justify-items: center; } .after-next .jm-next { text-align: left; }
.resume { position: fixed; top: 128px; left: 50%; transform: translateX(-50%); z-index: 6; border: 0; border-radius: 18px; height: 36px; padding: 0 16px; background: var(--ink); color: var(--bg); font: 500 13px var(--f-ui); cursor: pointer; }
.sz { position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 2px; padding: 4px; border-radius: 22px; background: color-mix(in srgb, var(--panel) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--line); z-index: 5; }
.sz button { height: 36px; min-width: 40px; border: 0; border-radius: 18px; background: none; color: var(--muted); font: 500 13px var(--f-ui); cursor: pointer; white-space: nowrap; }
.sz button:hover { color: var(--ink); background: var(--you); }
.aa { font-family: var(--f-text); font-size: 15px; }
.loading { text-align: center; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .msg, .nar, .loc, .split-bar span { transition: none !important; } }
/* daftar percakapan */
.inbox { list-style: none; margin: 0 0 10vh; padding: 0; border-top: 1px solid var(--line); }
.inbox a { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.inbox a:hover { background: var(--panel); }
.inbox .av { width: 46px; height: 46px; font-style: normal; font-size: 17px; }
.ib-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ib-t b { font-weight: 600; font-size: 15px; } .ib-t small { color: var(--ink); font-size: 13px; }
.ib-t em { font-style: normal; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-m { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--dim); max-width: 34%; text-align: right; }
.ib-m small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ib-m u { width: 9px; height: 9px; border-radius: 50%; background: var(--c); order: -1; }
.h-t { cursor: pointer; }
/* pesan ponsel yang memang ada di cerita */
.sms .bub { font-family: var(--f-ui); background: var(--sms); border: 1px solid color-mix(in srgb, var(--nc, var(--muted)) 30%, transparent); }
.msg.you.sms { --nc: var(--muted); }
.me.sms .bub { background: color-mix(in srgb, var(--c) 45%, var(--me-base)); border: 0; }
.rcpt { font-size: 11px; color: var(--dim); margin: 2px 6px 0; }
/* sedang mengetik */
.h-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.h-sub small { flex: 1; min-width: 0; }
.typing-dots { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none; height: 14px; }
.typing-dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: typing-dot 1.1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .14s; } .typing-dots i:nth-child(3) { animation-delay: .28s; }
#headerTyping { color: var(--muted); padding-right: 2px; }
.msg { position: relative; }
.msg.typing > :not(.nm):not(.typing-indicator) { opacity: 0; }
.typing-indicator { position: absolute; left: 0; top: 3px; height: 35px; min-width: 58px; padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: var(--you); color: var(--muted); pointer-events: none; }
.msg:has(> .nm) .typing-indicator { top: 32px; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* kotak ketik: yang diketik lalu dihapus */
.comp { position: fixed; left: 14px; right: 14px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 56px); max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 22px; background: var(--panel); box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,.4); z-index: 6; animation: up .3s ease; }
.comp small { font-size: 11px; color: var(--dim); flex: none; }
.comp-t { font: 400 15px var(--f-ui); color: var(--ink); display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.comp .gl { display: block; height: 8px; border-radius: 4px; background: var(--muted); opacity: .45; filter: blur(1.5px); }
.caret { width: 2px; height: 18px; background: var(--nara); animation: blink2 1s steps(1) infinite; }
@keyframes blink2 { 50% { opacity: 0; } } @keyframes up { from { transform: translateY(20px); opacity: 0; } }
/* status online */
#hLoc.on::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5BD27A; margin-right: 6px; vertical-align: 1px; }
/* buku tulis Arka sebagai pesan untukmu */
.msg.note { max-width: 92%; } .note .bub { font: 400 var(--size)/1.6 var(--f-text); background: var(--note); border-left: 2px solid color-mix(in srgb, var(--arka) 60%, transparent); }
/* catatan Sinta */
.lock { display: flex; gap: 12px; align-items: center; margin: 0 auto 22px; max-width: 320px; padding: 12px 16px; border-radius: 14px; background: var(--panel); color: var(--sinta); }
.lock svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; overflow: visible; }
.lock .shackle { transition: transform .8s cubic-bezier(.2,.8,.2,1); transform-origin: 16px 11px; } .lock.open .shackle { transform: translateY(-3px) rotate(28deg); }
.lock span { display: flex; flex-direction: column; } .lock b { font-weight: 500; font-size: 13px; color: var(--ink); } .lock small { font-size: 12px; color: var(--muted); }
.nar.sn { font-style: normal; color: var(--sn); border-left: 2px solid color-mix(in srgb, var(--sinta) 45%, transparent); padding-left: 14px; }
.sz svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; vertical-align: -4px; }
#buzz[aria-pressed="false"] { opacity: .4; }
.del, .stm { display: block; height: 1px; } .stm { height: 0; }
/* foto yang dipulihkan */
.ph { position: relative; width: min(240px, 66vw); aspect-ratio: 4 / 3; border-radius: 16px 16px 16px 6px; overflow: hidden; background: radial-gradient(120% 90% at 20% 15%, color-mix(in srgb, var(--pc) 55%, var(--ph-a)), var(--ph-b) 70%); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(10px) saturate(.6); transform: scale(1.04); transition: filter 1.6s ease, transform 1.6s ease; }
.ph span { position: absolute; left: 10px; right: 10px; bottom: 9px; font-size: 12px; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.6); filter: blur(4px); opacity: .4; transition: filter 1.2s .4s, opacity 1.2s .4s; }
.photo.sharp .ph img { filter: none; transform: none; } .photo.sharp .ph span { filter: none; opacity: 1; }
/* panggilan & hari */
.call span { color: var(--ink); } .call.in svg { stroke: #5BD27A; } .call.end svg { stroke: #E5776B; transform: rotate(135deg); }
.day { text-align: center; margin: 30px 0 8px; } .day span { font: 500 11px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
/* berdua di akhir */
.av.duo { box-shadow: 14px 0 0 -2px color-mix(in srgb, var(--nara) 30%, var(--panel)); margin-right: 14px; }
.av.duo::after { content: 'N'; position: absolute; transform: translateX(15px); color: var(--nara); }
.av { position: relative; }
/* garis kemajuan di bawah kepala */
.chat-h::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1.5px; width: calc(var(--p, 0) * 100%); background: color-mix(in srgb, var(--ink) 35%, transparent); }
[hidden] { display: none !important; }
/* Posisi baca tetap mengikuti paragraf ketika ukuran huruf berubah. */
.passage { display: flow-root; scroll-margin-top: 150px; }
.ch:focus, .passage:focus { outline: none; }
.h-t { border: 0; background: none; color: inherit; text-align: left; font-family: var(--f-ui); padding: 6px 0; border-radius: 6px; }
.reading-meta, .reading-note { color: var(--muted); font-size: 12px; }
.reading-meta { margin: 22px 0 0; font-variant-numeric: tabular-nums; }
.reading-start { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 32px; }
.reading-note { margin: 0; text-align: center; }
.begin, .resume { position: static; transform: none; height: auto; min-height: 46px; padding: 12px 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--ink); color: var(--bg); font: 500 14px var(--f-ui); cursor: pointer; }
.reading-start.has-resume .begin { background: transparent; color: var(--muted); min-height: 36px; padding: 4px 14px; }
.chapter-preview { margin-bottom: 8vh; }
.chapter-preview summary { width: fit-content; margin: 0 auto 18px; padding: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
.chapter-preview .inbox { margin-bottom: 0; }
.chapter-dialog { color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 22px; padding: 0; width: min(600px, calc(100% - 24px)); max-height: 82dvh; overscroll-behavior: contain; }
.chapter-dialog::backdrop, .photo-viewer::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }
.dialog-h { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 20px; background: var(--bg); }
.dialog-h h2 { margin: 5px 0 0; font: 400 26px var(--f-text); }
.dialog-h button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 24px; cursor: pointer; }
.chapter-dialog .inbox { margin: 0 16px 16px; }
.inbox a[aria-current="location"] { background: var(--panel); box-shadow: inset 2px 0 var(--c); }
.inbox .chapter-time { font-variant-numeric: tabular-nums; }
.inbox .unread { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.inbox .ib-m { min-width: 46px; }
body:has(dialog[open]) { overflow: hidden; }
.sz { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); align-items: center; gap: 0; }
.sz button { min-width: 36px; padding: 0 9px; }
.sz button:disabled { opacity: .3; cursor: default; }
.sz button[aria-pressed="true"] { color: var(--ink); background: var(--you); }
.tool-divider { height: 18px; width: 1px; background: var(--line); margin: 0 4px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--nara); outline-offset: 4px; }
html[data-calm] *, html[data-calm] *::before, html[data-calm] *::after { animation: none !important; transition: none !important; }
html[data-calm] .msg, html[data-calm] .nar { opacity: 1 !important; transform: none !important; }
html[data-calm] .ph img, html[data-calm] .ph span { filter: none; opacity: 1; transform: none; }
@media (max-width: 400px) {
  .sz button { padding: 0 6px; min-width: 32px; font-size: 12px; }
  .sz #buzz { display: none; }
}
/* Arsip hanya menampilkan benda dan petikan yang sudah ditemui pembaca. */
.archive-toggle { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; color: var(--muted); background: none; cursor: pointer; }
.archive-toggle:hover { background: var(--panel); color: var(--ink); }
.archive-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.archive-toggle span { position: absolute; top: 0; right: -2px; min-width: 17px; padding: 1px 3px; border-radius: 9px; background: var(--nara); color: var(--bg); font: 600 10px var(--f-ui); }
.archive-point { display: block; height: 1px; }
.archive-note { margin: 0; padding: 0 20px 22px; font-size: 13px; color: var(--muted); }
.archive-list { padding: 0 20px 20px; }
.archive-empty { padding: 32px 12px 42px; text-align: center; border: 1px dashed var(--line); border-radius: 14px; }
.archive-empty p { font: italic 400 23px/1.4 var(--f-text); margin: 0 0 12px; }
.archive-empty small { color: var(--muted); font-size: 13px; }
.archive-entry { border-top: 1px solid var(--line); }
.archive-entry summary { list-style: none; position: relative; padding: 20px 22px 20px 0; cursor: pointer; }
.archive-entry summary::-webkit-details-marker { display: none; }
.archive-entry summary::after { content: '+'; position: absolute; right: 0; top: 28px; color: var(--muted); }
.archive-entry[open] summary::after { content: '−'; }
.archive-entry summary small { display: block; color: var(--c, var(--muted)); font: 500 11px/1.5 var(--f-ui); }
.archive-entry summary strong { display: block; margin-top: 6px; font: 400 23px/1.25 var(--f-text); overflow-wrap: anywhere; }
.archive-body { padding-bottom: 24px; }
.archive-excerpt { margin: 14px 0 22px; color: var(--sn); font: 400 var(--size)/1.65 var(--f-text); overflow-wrap: anywhere; }
.archive-body blockquote { margin: 0 0 10px; padding: 12px 16px; border-left: 2px solid var(--c, var(--muted)); background: var(--panel); border-radius: 0 12px 12px 0; font: 400 18px/1.5 var(--f-text); }
.archive-caption { margin: 8px 0 18px; color: var(--muted); font-size: 12px; }
.archive-return { display: inline-block; padding: 8px 0; color: var(--nara); font-size: 13px; text-underline-offset: 4px; }
.archive-body .ph img, .archive-body .ph span { filter: none; opacity: 1; transform: none; }
.archive-ghost { display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: var(--panel); }
.archive-ghost i { height: 7px; width: 78%; border-radius: 4px; background: var(--muted); opacity: .5; }
.archive-ghost i:nth-child(2) { width: 92%; opacity: .16; }
.archive-ghost i:nth-child(3) { width: 64%; opacity: .08; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Foto diperbesar dalam kiriman yang sama, tanpa membuka foto dari adegan lain. */
.photo-grid { display: grid; gap: 6px; width: min(240px, 66vw); }
.photo-grid .ph { display: block; width: 100%; border: 0; padding: 0; appearance: none; color: inherit; cursor: zoom-in; }
.photo-grid .ph span { left: 0; right: 0; bottom: 0; padding: 22px 10px 9px; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.photo-grid-many { width: min(300px, 72vw); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-grid-many .ph:first-child { grid-column: 1 / -1; }
.photo-grid-many .ph { border-radius: 8px; }
.archive-body .photo-grid { width: min(400px, 100%); }
.photo-viewer { width: min(1000px, calc(100% - 20px)); max-height: 92dvh; padding: 0; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--bg); }
.photo-viewer .dialog-h { padding: 12px 16px; }
.photo-viewer .dialog-h h2 { margin: 0; font: 400 14px/1.5 var(--f-ui); }
#photoImage { display: block; width: 100%; max-height: 70dvh; object-fit: contain; background: #08090A; }
.photo-navigation { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 6px 12px; }
.photo-navigation button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); font: 400 18px var(--f-ui); cursor: pointer; }
.photo-navigation button:disabled { opacity: .3; cursor: default; }
#photoCounter { color: var(--muted); font: 500 12px var(--f-ui); font-variant-numeric: tabular-nums; }
/* Cahaya berada di belakang bacaan; suara menunggu pilihan pembaca. */
.scene-light { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-color: var(--scene-tint, var(--bg)); opacity: .025; mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 80%); transition: background-color 2s ease, opacity 1s ease; }
.read { position: relative; z-index: 1; }
html[data-focus] .scene-light { opacity: .055; }
html[data-focus] .sz { display: none; }
html[data-focus] .bar-p { visibility: hidden; }
#openAtmosphere[data-playing]::after { content: ''; position: absolute; right: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--nara); }
.atmosphere-body { padding: 0 20px 24px; }
.sound-place { margin: 0 0 10px; font: 400 22px/1.3 var(--f-text); color: var(--ink); }
.setting-note, .setting-status { color: var(--muted); font-size: 13px; line-height: 1.6; }
.setting-note { margin: 0 0 18px; }
.setting-status { min-height: 3.2em; margin: 12px 0 20px; }
.setting-switch { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: var(--panel); font: 500 13px var(--f-ui); cursor: pointer; }
.setting-switch[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.setting-switch:disabled { opacity: .5; cursor: default; }
.volume-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 500 12px var(--f-ui); }
#soundVolume { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--nara); cursor: pointer; }
.focus-setting { padding-top: 24px; margin-top: 20px; border-top: 1px solid var(--line); }
.focus-setting .setting-note { margin: 12px 0 0; }
.chapter-pause { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 50px 0 10px; text-align: center; }
.chapter-pause > span { color: var(--c); letter-spacing: .6em; }
.chapter-next { min-height: 44px; display: inline-flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 400 20px var(--f-text); }
.chapter-next:hover { border-color: var(--c); }
.chapter-pause small { color: var(--muted); font: 400 12px var(--f-ui); }
@media (max-width: 400px) { .chat-h { gap: 6px; padding-left: 8px; padding-right: 8px; } .chat-h .ch-back { flex: none; } }
/* Dua suara tetap memakai kata-kata dari naskah, dibaca berdampingan. */
.memories-open { min-height: 44px; padding: 10px 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); color: var(--ink); font: 500 13px var(--f-ui); cursor: pointer; }
.memories-open:hover { border-color: var(--nara); }
.memories-invitation { max-width: 360px; margin: 0 auto 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.memories-invitation p { color: var(--muted); font: italic 400 19px/1.5 var(--f-text); margin: 0 0 18px; }
.archive-afterword { margin: 0 20px 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.memories-dialog { width: min(940px, calc(100% - 24px)); }
.memories-note { margin: 0; padding: 0 24px 22px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.memory-choice { padding: 0 24px; }
.memory-choice label { display: block; margin-bottom: 8px; color: var(--muted); font: 500 12px var(--f-ui); }
#memorySelect { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: 400 15px var(--f-ui); }
#memorySelect:focus-visible { outline: 2px solid var(--nara); outline-offset: 3px; }
.memory-context { color: var(--muted); margin: 16px 24px 22px; font: italic 400 17px/1.5 var(--f-text); }
.memory-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 0 24px; }
.memory-voice { min-width: 0; border-top: 2px solid var(--c); padding-top: 18px; }
.memory-voice > header { display: flex; align-items: center; gap: 10px; }
.memory-voice h3 { margin: 0; font: 500 15px var(--f-ui); color: var(--c); }
.memory-voice small { display: block; color: var(--muted); font: 400 11px/1.5 var(--f-ui); margin-top: 4px; }
.memory-text { font: 400 var(--size)/1.65 var(--f-text); color: var(--sn); overflow-wrap: anywhere; }
.memory-text p { margin: 16px 0; }
.memory-source { display: inline-block; min-height: 44px; padding: 10px 0; color: var(--c); font: 400 13px var(--f-ui); text-underline-offset: 4px; }
.memory-navigation { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 24px; }
.memory-navigation button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 18px; cursor: pointer; }
.memory-navigation button:disabled { opacity: .3; cursor: default; }
#memoryPosition { color: var(--muted); font: 400 12px var(--f-ui); }
@media (max-width: 680px) { .memory-pair { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; } }

/* ---------- bingkai situs: bilah Meja tulis di atas kepala obrolan ---------- */
:root { --qm-top-h: calc(56px + env(safe-area-inset-top)); }
.qm-top { position: sticky; top: 0; z-index: 6; height: var(--qm-top-h); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: env(safe-area-inset-top) 12px 0; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.qm-top .jm-step { min-width: 0; overflow: hidden; }
@media (max-width: 430px) { .qm-top .jm-step i { display: none; } }
@media (max-width: 360px) { .qm-top .jm-step { display: none; } }
@media (min-width: 900px) {
  .qm-top { background-color: var(--bd-b); background-image: var(--qm-sky); background-attachment: fixed; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 20px; }
  .chat-h { max-width: 700px; margin: 6px auto 0; border-radius: 24px 24px 0 0; background: color-mix(in srgb, var(--bg) 90%, transparent); overflow: hidden; }
  .read { max-width: 700px; min-height: calc(100vh - 62px - var(--qm-top-h)); padding: 0 30px 140px; background: var(--bg); box-shadow: var(--qm-shadow); }
  .scene-light { display: none; }
}