/* Usia Pulang: novel interaktif. Bahasa visualnya sama dengan situs utama (assets/style.css):
   abu-abu dingin, kartu putih, Doto untuk angka dan judul kapital, pil hitam, aksen biru, lencana navy,
   lembar hitam yang menjadi terang di tema gelap. Yang khas cerita (kertas tiap tokoh di sela, benda)
   tetap punya teksturnya sendiri, tapi warnanya mengikuti token yang sama. */
:root {
  --bg: #F6F6F7; --paper: #FFFFFF; --btn: #E8E8EC; --ink: #111113; --muted: #85858C; --line: #DEDEE3; --soft: rgb(17 17 19 / .05);
  --accent: #1662FF; --accent-soft: rgb(22 98 255 / .1); --navy: #1F4E8C; --navy-soft: #DCE6F3;
  --echo: #6A3DFF; --echo-soft: rgb(106 61 255 / .09);
  --sheet: #111113; --sheet-ink: #F4F4F5; --sheet-dim: rgb(244 244 245 / .2); --sheet-mut: rgb(244 244 245 / .62);
  --card: #FFFFFF; --card-ink: #111113; --card-line: #DEDEE3;
  --shadow: 0 18px 40px -22px rgb(30 36 50 / .30), 0 0 0 1px rgb(30 36 50 / .05);
  --spring: cubic-bezier(.34, 1.36, .5, 1); --ease-out: cubic-bezier(.2, .9, .25, 1);
  --size: 19px; --f-text: var(--qm-read); --f-ui: var(--qm-ui); --f-dot: "Doto", ui-monospace, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0E0E0F; --paper: #161618; --btn: #1C1C1F; --ink: #F4F4F5; --muted: #8B8B91; --line: #2A2A2E; --soft: rgb(255 255 255 / .05);
  --accent: #6E9BFF; --accent-soft: rgb(110 155 255 / .14); --navy: #9DB8FF; --navy-soft: #1F2A40;
  --echo: #B39BFF; --echo-soft: rgb(179 155 255 / .12);
  --sheet: #E7E9EA; --sheet-ink: #0D0D0E; --sheet-dim: rgb(13 13 14 / .14); --sheet-mut: rgb(13 13 14 / .6);
  --card: #161618; --card-ink: #F4F4F5; --card-line: #2A2A2E;
  --shadow: 0 18px 40px -22px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0E0E0F; --paper: #161618; --btn: #1C1C1F; --ink: #F4F4F5; --muted: #8B8B91; --line: #2A2A2E; --soft: rgb(255 255 255 / .05);
    --accent: #6E9BFF; --accent-soft: rgb(110 155 255 / .14); --navy: #9DB8FF; --navy-soft: #1F2A40;
    --echo: #B39BFF; --echo-soft: rgb(179 155 255 / .12);
    --sheet: #E7E9EA; --sheet-ink: #0D0D0E; --sheet-dim: rgb(13 13 14 / .14); --sheet-mut: rgb(13 13 14 / .6);
    --card: #161618; --card-ink: #F4F4F5; --card-line: #2A2A2E;
    --shadow: 0 18px 40px -22px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { font: 15px/1.5 var(--f-ui); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
button, select { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.blink { animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- bilah bingkai dan jam ---------- */
:root { --qm-top-h: calc(58px + env(safe-area-inset-top)); --ck-h: 48px; }
.qm-top { position: sticky; top: 0; z-index: 30; height: var(--qm-top-h); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: env(safe-area-inset-top) 14px 0; background: color-mix(in srgb, var(--bg) 86%, 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; } }
#openCard svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#openCard { transition: opacity .3s ease; }
#openCard.stamped { animation: stamped .8s var(--spring); }
@keyframes stamped { 30% { transform: scale(1.16); box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow); } }
#openCard.away { opacity: .35; }

.clock { position: sticky; top: var(--qm-top-h); z-index: 29; display: flex; align-items: center; gap: 12px; height: var(--ck-h); padding: 0 16px; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 12.5px/1.2 var(--f-ui); font-variant-numeric: tabular-nums; transition: background-color .4s ease, color .4s ease; }
.ck-when { display: grid; min-width: 0; }
.ck-when b { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-when span { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-time { display: inline-flex; align-items: baseline; gap: 6px; font: 900 22px/1 var(--f-dot); letter-spacing: -.02em; }
.ck-time small { font: 500 11px var(--f-ui); color: var(--muted); letter-spacing: 0; }
.ck-bar { position: absolute; left: 16px; right: 16px; bottom: 0; display: flex; gap: 3px; }
.ck-bar i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ck-bar i::after { content: ''; position: absolute; inset: 0; width: calc(var(--f) * 100%); background: var(--ink); transition: width .8s var(--ease-out); }
.ck-cast { display: flex; gap: 6px; margin-left: auto; }
.ck-p { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); font: 600 12px var(--f-ui); cursor: pointer; transition: transform .35s var(--spring); }
.ck-p:active { transform: scale(.9); }
.ck-p small { position: absolute; right: -6px; bottom: -5px; min-width: 16px; padding: 0 3px; border-radius: 8px; background: var(--btn); color: var(--muted); font: 700 9px/13px var(--f-dot); text-align: center; }
.ck-p.me { background: var(--ink); color: var(--bg); box-shadow: none; }
.ck-p:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .ck-p:nth-child(n+5) { display: none; } .ck-time small { display: none; } }
.clock.away { background: color-mix(in srgb, var(--sheet) 94%, transparent); color: var(--sheet-ink); }
.clock.away .ck-when b { font-family: var(--f-text); font-weight: 500; font-size: 14px; }
.clock.away .ck-when span { color: var(--sheet-mut); }
.clock.away .ck-p { background: color-mix(in srgb, var(--sheet-ink) 12%, var(--sheet)); color: var(--sheet-ink); box-shadow: none; }
.clock.away .ck-p small { background: var(--sheet); color: var(--sheet-mut); }
.clock.away .ck-bar i { background: var(--sheet-dim); } .clock.away .ck-bar i::after { background: var(--sheet-ink); }

/* ---------- kolom baca ---------- */
.read { position: relative; max-width: 700px; margin: 0 auto; padding: 0 20px 22vh; }
.loading { padding: 4vh 0; text-align: center; color: var(--muted); }

/* sampul: baris jam seperti halaman awal, lalu lembar hitam dengan judul Doto */
.cover { padding: 18px 0 6vh; }
.cv-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 2px 18px; }
.cv-pill { justify-self: start; height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 18px; background: var(--btn); box-shadow: inset 0 0 0 1px var(--line); font: 500 13px var(--f-ui); white-space: nowrap; }
#cvRight { justify-self: end; }
.digits { margin: 0; font: 900 clamp(50px, 15vw, 72px)/1 var(--f-dot); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cv-sheet { position: relative; padding: 18px 24px 30px; border-radius: 34px; background: var(--sheet); color: var(--sheet-ink); overflow: hidden; }
.cv-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.cv-status i { width: 34px; height: 4px; border-radius: 2px; background: var(--sheet-dim); }
#cvEnds { justify-self: end; font-variant-numeric: tabular-nums; }
.kick { margin: 34px 0 0; text-align: center; font: 600 11.5px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mut); }
.cover h1 { margin: 12px 0 8px; text-align: center; font: 900 clamp(58px, 17vw, 96px)/.86 var(--f-dot); letter-spacing: -.03em; text-transform: uppercase; }
.cover h1 span { display: block; animation: dotIn 1s var(--ease-out) both; }
.cover h1 span + span { animation-delay: .12s; }
@keyframes dotIn { from { opacity: 0; filter: blur(8px); letter-spacing: .1em; } }
.by { margin: 0 0 26px; text-align: center; color: var(--sheet-mut); }
.lede { max-width: 30em; margin: 0 auto 24px; text-align: center; font: 400 calc(var(--size) + 1px)/1.5 var(--f-text); text-wrap: pretty; }
.rules { display: grid; gap: 10px; max-width: 30em; margin: 0 auto; padding: 0; list-style: none; font-size: 14px; color: var(--sheet-mut); counter-reset: r; }
.rules li { position: relative; padding-left: 32px; counter-increment: r; text-wrap: pretty; }
.rules li::before { content: counter(r); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 12px/22px var(--f-ui); text-align: center; }
.lost { margin: 22px auto 0; max-width: 36em; padding: 10px 14px; border-radius: 14px; background: var(--sheet-dim); color: var(--sheet-mut); font-size: 13px; }
.cover-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.cv-sheet .go { background: var(--sheet-ink); color: var(--sheet); }
.cv-sheet .ghost { background: transparent; color: var(--sheet-ink); box-shadow: inset 0 0 0 1.5px var(--sheet-dim); }
.cover.started { padding-bottom: 2vh; }
.cover.started .cv-top, .cover.started .rules, .cover.started .cover-act, .cover.started .lede, .cover.started .lost { display: none; }
.cover.started .cv-sheet { padding-bottom: 22px; }

/* tombol: pil hitam seperti "Putar", pil abu seperti "Acak" */
.go, .ghost { min-height: 44px; padding: 0 22px; border: 0; border-radius: 22px; background: var(--ink); color: var(--bg); font: 500 15px var(--f-ui); cursor: pointer; transition: transform .35s var(--spring), opacity .2s; }
.go:active, .ghost:active { transform: scale(.94); }
.go:disabled { opacity: .35; cursor: default; transform: none; }
.ghost { background: var(--btn); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
:is(.go, .ghost, .opt, select, .n-back):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- simpul ---------- */
.book { position: relative; font: var(--size)/1.72 var(--f-text); }
.node { position: relative; padding: 8vh 0 2vh; scroll-margin-top: calc(var(--qm-top-h) + var(--ck-h) + 8px); }
.node + .node::before { content: ''; position: absolute; top: 3.5vh; left: 0; right: 0; height: 1px; background: var(--line); }
.node.enter { animation: enter .9s var(--ease-out) both; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }
.n-head { margin-bottom: 28px; }
.n-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font: 600 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.n-kind span:first-child { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--btn); color: var(--ink); letter-spacing: .06em; }
.k-callback .n-kind span:first-child { background: var(--echo-soft); color: var(--echo); }
.k-last .n-kind span:first-child, .k-ending .n-kind span:first-child { background: var(--ink); color: var(--bg); }
.n-head h2 { margin: 0; font: 500 clamp(30px, 7vw, 40px)/1.06 var(--f-text); letter-spacing: -.02em; text-wrap: balance; }
.k-journey .n-head h2 { font-size: clamp(26px, 6vw, 34px); }
.n-body > p { margin: 0 0 1.05em; text-wrap: pretty; hyphens: auto; }
.n-body > p:first-child::first-letter { float: left; margin: .06em .08em 0 0; font: 900 3em/.85 var(--f-dot); }

/* angka di dalam teks */
.loket { font: 900 1.04em/1 var(--f-dot); letter-spacing: -.02em; white-space: nowrap; }

/* pembuka dari dalam air */
.surface .n-body { filter: url(#water); }
.surface .n-body > p:nth-child(-n+3) { animation: surface 5.5s cubic-bezier(.3, 0, .2, 1) both; }
.surface .n-body > p:nth-child(2) { animation-delay: .5s; } .surface .n-body > p:nth-child(3) { animation-delay: 1s; }
@keyframes surface { 0% { opacity: .12; filter: blur(7px); } 45% { opacity: .55; filter: blur(3px); } 100% { opacity: 1; filter: blur(0); } }
.surface::after { content: ''; position: absolute; left: -20px; right: -20px; top: 0; height: 80vh; pointer-events: none; background: linear-gradient(180deg, rgb(22 98 255 / .16), rgb(22 98 255 / .05) 50%, transparent); animation: tint 5.5s ease-out forwards; }
@keyframes tint { to { opacity: 0; } }

/* ---------- sela: kertas tiap tokoh ---------- */
.k-perspective { --pv: var(--paper); --pv-ink: var(--ink); --pv-edge: var(--line); --pv-tex: linear-gradient(transparent, transparent); margin: 5vh -20px 0; padding: 6vh 26px 5vh; border-radius: 34px; background: var(--pv-tex), var(--pv); color: var(--pv-ink); box-shadow: inset 0 0 0 1px var(--pv-edge); }
.k-perspective .n-head, .k-perspective .n-body, .k-perspective .n-note, .k-perspective .cont { position: relative; z-index: 1; }
.k-perspective + .node::before, .node + .k-perspective::before { display: none; }
.k-perspective .n-kind { color: color-mix(in srgb, var(--pv-ink) 58%, transparent); }
.k-perspective .n-kind span:first-child { background: color-mix(in srgb, var(--pv-ink) 9%, transparent); color: var(--pv-ink); }
.n-note { display: flex; align-items: center; gap: 10px; margin: -12px 0 30px; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--pv-ink) 7%, transparent); font: 13px/1.4 var(--f-ui); color: color-mix(in srgb, var(--pv-ink) 72%, transparent); }
.n-note::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; background: linear-gradient(135deg, transparent 45%, currentColor 45% 55%, transparent 55%); }
/* Dian: kertas kotak buku kerja */
.who-Dian { --pv: #F3F6FB; --pv-ink: #18212E; --pv-edge: #D9E2EE; --pv-tex: linear-gradient(rgb(31 78 140 / .07) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgb(31 78 140 / .07) 1px, transparent 1px) 0 0 / 22px 22px; }
/* Ratna: tenunan halus */
.who-Ratna { --pv: #F7F2F1; --pv-ink: #2E1D1B; --pv-edge: #EADBD8; --pv-tex: repeating-linear-gradient(45deg, rgb(120 60 54 / .045) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgb(120 60 54 / .045) 0 2px, transparent 2px 7px); }
.node.who-Ratna::after { content: ''; position: absolute; inset: 9px; border: 1.5px dashed rgb(120 60 54 / .22); border-radius: 26px; pointer-events: none; }
/* Tama: lembar kontak yang gelap */
.who-Tama { --pv: #111113; --pv-ink: #F4F4F5; --pv-edge: #222226; }
.node.k-perspective.who-Tama::before, .node.k-perspective.who-Tama::after { content: ''; display: block; position: absolute; left: 20px; right: 20px; top: auto; height: 9px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 12px, transparent 12px 22px); border-radius: 2px; pointer-events: none; }
.node.k-perspective.who-Tama::before { top: 16px; } .node.k-perspective.who-Tama::after { bottom: 16px; }
/* Sulastri: kertas lama */
.who-Sulastri { --pv: #F4EFE6; --pv-ink: #2F271C; --pv-edge: #E6DCCB; --pv-tex: radial-gradient(ellipse at 15% 0%, rgb(150 110 50 / .08), transparent 60%), radial-gradient(ellipse at 90% 100%, rgb(150 110 50 / .09), transparent 55%); }
/* Hadi: abu kebiruan */
.who-Hadi { --pv: #EDF0F4; --pv-ink: #1E252E; --pv-edge: #D8DEE6; --pv-tex: linear-gradient(180deg, rgb(40 60 90 / .05), transparent 40%); }
:root[data-theme="dark"] .who-Dian { --pv: #12161D; --pv-ink: #DCE5F2; --pv-edge: #222B38; --pv-tex: linear-gradient(rgb(157 184 255 / .06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgb(157 184 255 / .06) 1px, transparent 1px) 0 0 / 22px 22px; }
:root[data-theme="dark"] .who-Ratna { --pv: #1B1515; --pv-ink: #F0E0DD; --pv-edge: #33282A; --pv-tex: repeating-linear-gradient(45deg, rgb(240 170 160 / .04) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgb(240 170 160 / .04) 0 2px, transparent 2px 7px); }
:root[data-theme="dark"] .node.who-Ratna::after { border-color: rgb(240 170 160 / .18); }
:root[data-theme="dark"] .who-Tama { --pv: #050506; --pv-edge: #1C1C1F; }
:root[data-theme="dark"] .who-Sulastri { --pv: #1C1915; --pv-ink: #ECE2CF; --pv-edge: #2F2A22; --pv-tex: radial-gradient(ellipse at 15% 0%, rgb(220 180 110 / .06), transparent 60%); }
:root[data-theme="dark"] .who-Hadi { --pv: #13171C; --pv-ink: #D9E0E8; --pv-edge: #232A32; --pv-tex: linear-gradient(180deg, rgb(150 180 210 / .04), transparent 40%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .who-Dian { --pv: #12161D; --pv-ink: #DCE5F2; --pv-edge: #222B38; --pv-tex: linear-gradient(rgb(157 184 255 / .06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgb(157 184 255 / .06) 1px, transparent 1px) 0 0 / 22px 22px; }
  :root:not([data-theme]) .who-Ratna { --pv: #1B1515; --pv-ink: #F0E0DD; --pv-edge: #33282A; --pv-tex: repeating-linear-gradient(45deg, rgb(240 170 160 / .04) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgb(240 170 160 / .04) 0 2px, transparent 2px 7px); }
  :root:not([data-theme]) .node.who-Ratna::after { border-color: rgb(240 170 160 / .18); }
  :root:not([data-theme]) .who-Tama { --pv: #050506; --pv-edge: #1C1C1F; }
  :root:not([data-theme]) .who-Sulastri { --pv: #1C1915; --pv-ink: #ECE2CF; --pv-edge: #2F2A22; --pv-tex: radial-gradient(ellipse at 15% 0%, rgb(220 180 110 / .06), transparent 60%); }
  :root:not([data-theme]) .who-Hadi { --pv: #13171C; --pv-ink: #D9E0E8; --pv-edge: #232A32; --pv-tex: linear-gradient(180deg, rgb(150 180 210 / .04), transparent 40%); }
}

/* ---------- gema ---------- */
.n-cause { position: relative; display: grid; gap: 4px; margin: -10px 0 30px; padding: 14px 16px; border-radius: 18px; background: var(--echo-soft); font: 14.5px/1.45 var(--f-ui); }
.n-cause small { font: 600 11px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--echo); }
.n-cause .n-quote { font: 400 calc(var(--size) - 1px)/1.45 var(--f-text); }
.n-quote::before { content: '“'; } .n-quote::after { content: '”'; }
.n-back { justify-self: start; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--echo); font: 600 12.5px var(--f-ui); cursor: pointer; }
.n-back:hover { text-decoration: underline; }
.k-callback.arrive .n-cause { animation: causeIn 1.4s var(--ease-out) .5s both; }
@keyframes causeIn { from { opacity: 0; transform: translateX(-14px); } }

/* ---------- pilihan: kartu putih, ditahan sampai menjadi pil hitam ---------- */
.choose { margin: 36px 0 10px; font: 15px/1.4 var(--f-ui); }
.ch-q { margin: 0 0 14px; font: 600 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ch-list { display: grid; gap: 10px; }
.opt { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 15px 18px; border: 0; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); text-align: left; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; transition: transform .35s var(--spring), opacity .3s ease, background-color .25s, color .25s, filter .3s; }
.opt:hover:not(:disabled) { transform: translateY(-2px); }
.o-fill { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.o-t, .o-p, .o-d { position: relative; }
.o-t { font: 400 calc(var(--size) - 1px)/1.4 var(--f-text); text-wrap: pretty; }
.o-p { display: inline-flex; }
.o-p i { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; background: var(--btn); box-shadow: 0 0 0 2px var(--paper); color: var(--muted); font: 600 11px var(--f-ui); font-style: normal; }
.o-d { padding: 4px 9px; border-radius: 999px; background: var(--btn); color: var(--ink); font: 600 10.5px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.c-doors .opt { min-height: 76px; }
.opt.holding { transform: scale(.98); background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.opt.holding .o-fill { transform: scaleX(1); transition: transform 1.1s linear; }
.choose.pressing .opt:not(.holding) { opacity: .4; filter: blur(.5px); }
.ch-hint { margin: 12px 0 0; font: 12.5px var(--f-ui); color: var(--muted); }
.ch-hint::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 0; animation: press 1.6s ease-in-out infinite; }
@keyframes press { 50% { box-shadow: 0 0 0 5px var(--accent-soft); } }
.choose.done .opt.picked { cursor: default; background: var(--ink); color: var(--bg); box-shadow: none; transform: none; margin-bottom: 8px; }
.choose.done .opt.picked .o-p i { background: color-mix(in srgb, var(--bg) 18%, var(--ink)); box-shadow: 0 0 0 2px var(--ink); color: var(--bg); }
.choose.done .opt.picked .o-d { background: color-mix(in srgb, var(--bg) 18%, var(--ink)); color: var(--bg); }
.o-stamp { position: absolute; right: 16px; bottom: -11px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); box-shadow: 0 0 0 3px var(--bg); font: 600 11px/1.4 var(--f-ui); animation: slam .5s var(--spring) both; }
.o-stamp::before { content: '✦'; font-size: 9px; }
@keyframes slam { 0% { opacity: 0; transform: scale(1.7); } 100% { opacity: 1; transform: none; } }
.opt.sink { pointer-events: none; animation: sink .9s cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes sink { to { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(4px); } }
.opt.called { animation: called 2.6s ease; }
@keyframes called { 25%, 60% { box-shadow: 0 0 0 2px var(--echo), 0 0 0 9px var(--echo-soft); } }
.ch-note { margin: 16px 0 0; font: 12px var(--f-ui); color: var(--muted); }
.cont { display: flex; margin: 30px 0 0; }
.cont.done { display: none; }
.k-perspective .cont .go { background: var(--pv-ink); color: var(--pv); }

/* ---------- akhir: pola jahitan ---------- */
.k-ending .n-head h2 { font: 900 clamp(40px, 11vw, 64px)/.9 var(--f-dot); letter-spacing: -.03em; text-transform: uppercase; }
.after { margin: 8vh 0 0; padding: 22px 20px 24px; border-radius: 34px; background: var(--sheet); color: var(--sheet-ink); font: 14px/1.45 var(--f-ui); }
.af-k { margin: 0 0 16px; text-align: center; font: 600 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sheet-mut); }
.mp-k { margin: 22px 0 10px; font: 600 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sheet-mut); }
.map .mp-k:first-child { margin-top: 0; text-align: center; }
.pattern { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.pt-cloth { fill: color-mix(in srgb, var(--sheet-ink) 6%, var(--sheet)); }
.pt-weave { stroke: var(--sheet-ink); stroke-width: .4; opacity: .07; }
.pt-day, .pt-col { fill: var(--sheet-mut); font: 700 10px var(--f-dot); letter-spacing: .02em; text-transform: uppercase; }
.pt-dot { fill: var(--sheet-ink); opacity: .22; }
.pt-thread, .pt-tail { fill: none; stroke: var(--sheet-ink); stroke-width: 1.6; stroke-dasharray: 6 4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.pt-tail { opacity: .45; }
circle.st, g.st circle { fill: var(--sheet); stroke: var(--sheet-ink); stroke-width: 1.6; }
rect.st { fill: var(--accent); }
g.st circle { fill: var(--sheet-ink); stroke: none; }
g.st text { fill: var(--sheet); font: 900 10px var(--f-dot); text-anchor: middle; }
.pt-echo { fill: none; stroke: var(--echo); stroke-width: 1.5; }
.pt-knot { fill: var(--accent); }
.map.sew .pt-run { animation: sew 2.8s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes sew { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.map.sew .st, .map.sew .pt-echo, .map.sew .pt-knot { animation: fadeIn 1.4s ease 1.2s both; }
.mp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 12px 0 0; font-size: 12px; color: var(--sheet-mut); }
.mp-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; }
.lg-c { border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--sheet-ink); }
.lg-h { background: var(--accent); transform: rotate(45deg) scale(.8); }
.lg-p { width: 11px !important; height: 11px !important; border-radius: 50%; background: var(--sheet-ink); }
.lg-e { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--echo); }
.lg-k { border-radius: 50%; background: var(--accent); }
.mp-words { margin: 18px 0 0; text-align: center; font: 400 17px/1.45 var(--f-text); }
.mp-words::first-line { font-variant-numeric: tabular-nums; }
.mp-ends { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.mp-end { display: flex; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--sheet-dim); color: var(--sheet-mut); }
.mp-end b { font: 500 14px/1.3 var(--f-text); }
.mp-end i { flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; }
.mp-end i.e-stay { background: var(--accent); }
.mp-end i.e-go { box-shadow: inset 0 0 0 1.4px currentColor; }
.mp-end.found { color: var(--sheet-ink); background: color-mix(in srgb, var(--sheet-ink) 14%, var(--sheet)); }
.mp-end.here { background: var(--sheet-ink); color: var(--sheet); }
.af-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 24px; }
.after .go { background: var(--sheet-ink); color: var(--sheet); }
.af-from { display: inline-flex; align-items: center; gap: 8px; color: var(--sheet-mut); font-size: 13px; }
.af-from select { max-width: 220px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--sheet-dim); color: var(--sheet-ink); font: 600 13.5px var(--f-ui); }
.af-next { display: grid; justify-items: center; }
.after .jm-next { color: var(--ink); }

/* ---------- Kartu Kepulangan: dialog situs, cap berupa lencana navy ---------- */
.card-dialog { width: min(460px, calc(100% - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); font-family: var(--f-ui); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .45); }
.card-dialog::backdrop { background: rgb(0 0 0 / .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.card-dialog[open] { animation: cardIn .4s var(--spring); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.card-dialog .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 18px 6px; }
.card-dialog .dialog-head h2 { margin: 2px 0 0; font: 900 26px/1 var(--f-dot); letter-spacing: -.02em; text-transform: uppercase; }
.cd-k { margin: 0; font: 600 11px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card-dialog .close { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--btn); color: var(--ink); font: 300 20px var(--f-ui); cursor: pointer; }
.cd-body { padding: 8px 18px 18px; }
.cd-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 14px; }
.cd-who span { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--btn); }
.cd-who small { font: 500 11px var(--f-ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-who b { font: 900 20px/1 var(--f-dot); letter-spacing: -.02em; }
.cd-days { display: grid; margin: 0; padding: 0; list-style: none; }
.cd-days li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cd-day { display: grid; align-content: start; line-height: 1.25; }
.cd-day b { font-weight: 600; font-size: 14px; }
.cd-day small { color: var(--muted); font-size: 12px; }
.cd-what { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.cd-empty { color: var(--muted); }
.stamp { display: inline-flex; gap: 5px; max-width: 100%; padding: 3px 10px 3px 8px; border-radius: 12px; background: var(--navy-soft); color: var(--navy); font: 600 12.5px/1.4 var(--f-ui); }
.stamp::before { content: '✦'; font-size: 9px; line-height: 1.9; }
.stamp.final { background: var(--accent); color: #fff; }
.hand { font: 400 15.5px/1.4 var(--f-text); color: var(--ink); }
.cd-echo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--echo); }
.cd-echo::before { content: ''; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.cd-days li.last { border-top: 1px dashed var(--line); }
.cd-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

/* kartu yang naik sebentar: panel hitam seperti panel sapa */
.slip { position: fixed; z-index: 58; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); translate: -50% 0; width: min(380px, calc(100% - 28px)); padding: 14px 16px; border-radius: 24px; background: var(--sheet); color: var(--sheet-ink); box-shadow: 0 24px 40px -18px rgb(0 0 0 / .5); font-family: var(--f-ui); cursor: pointer; animation: slipIn 1.9s var(--ease-out) both; }
@keyframes slipIn { 0% { transform: translateY(150%); } 18%, 82% { transform: none; } 100% { transform: translateY(150%); } }
.slip.out { opacity: 0; transition: opacity .3s ease; }
.sl-k { font: 600 11px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--sheet-mut); }
.sl-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; margin-top: 10px; }
.sl-day { display: grid; line-height: 1.25; } .sl-day b { font-size: 14px; } .sl-day small { color: var(--sheet-mut); font-size: 12px; }
.slip .stamp { justify-self: start; background: var(--accent); color: #fff; animation: slam .5s var(--spring) .4s both; }
.slip .hand { color: var(--sheet-ink); animation: write .7s ease .4s both; }
@keyframes write { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }

/* ---------- malam yang lewat: langit malam situs, angka Doto putih ---------- */
.night { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 24px; text-align: center; color: #F5F5F7; background: radial-gradient(60% 55% at 0% 100%, #4A1E4E, transparent 70%), radial-gradient(70% 60% at 100% 0%, #090B1A, transparent 75%), linear-gradient(180deg, #090B1A 0%, #1E1238 55%, #4A1E4E 100%); font-family: var(--f-ui); cursor: pointer; animation: fadeIn .5s ease both; transition: opacity .6s ease; }
.night::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 55% at 0% 100%, #C7D3F3, transparent 70%), radial-gradient(70% 60% at 100% 0%, #F6D3C4, transparent 75%), linear-gradient(180deg, #F6D3C4 0%, #F1E5EE 55%, #C7D3F3 100%); opacity: 0; transition: opacity 2.4s ease .5s; }
.night.dawn::before { opacity: .38; }
.night > * { position: relative; margin: 0; }
.night.out { opacity: 0; }
.nt-k { font: 600 12px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.nt-n b { display: block; margin-top: 10px; font: 900 clamp(96px, 32vw, 170px)/.9 var(--f-dot); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.nt-u { font: 600 12px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.nt-bar { display: flex; gap: 5px; margin-top: 24px !important; }
.nt-bar i { width: 28px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .2); }
.nt-bar i.gone { background: rgb(255 255 255 / .55); }
.nt-bar i.now { background: #fff; animation: burn 1.8s ease both; }
@keyframes burn { from { background: rgb(255 255 255 / .2); } }
.nt-d { margin-top: 18px !important; font: 400 21px var(--f-text); }
.night.last { background: #050506; }
.night.last.stopped .nt-n b { text-shadow: 0 0 34px rgb(110 155 255 / .8); transition: text-shadow .6s ease; }

/* masuk ke sela */
.cross { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; background: var(--pv-tex, none), var(--pv, #111); color: var(--pv-ink, #fff); cursor: pointer; animation: crossIn 1.6s cubic-bezier(.65, 0, .25, 1) both; }
.cross > * { margin: 0; }
.cross.out { opacity: 0; transition: opacity .3s ease; }
@keyframes crossIn { 0% { clip-path: inset(100% 0 0 0); } 30%, 72% { clip-path: inset(0); } 100% { clip-path: inset(0 0 100% 0); } }
.cr-k { font: 600 12px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.cr-n { font: 900 clamp(64px, 20vw, 120px)/.9 var(--f-dot); letter-spacing: -.03em; text-transform: uppercase; }
.cr-u { font: 13px var(--f-ui); opacity: .65; }
.cross.who-Tama::before, .cross.who-Tama::after { content: ''; position: absolute; left: 16px; right: 16px; height: 9px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 12px, transparent 12px 22px); }
.cross.who-Tama::before { top: 18px; } .cross.who-Tama::after { bottom: 18px; }

/* ---------- benang jahitan ---------- */
.thread { position: absolute; top: 0; left: -18px; width: 18px; height: 0; overflow: visible; pointer-events: none; z-index: 2; }
@media (min-width: 900px) { .thread { left: -42px; width: 30px; } }
.th-line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 7 5; stroke-linecap: round; opacity: .45; }
.th-faint { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 1.5 7; stroke-linecap: round; opacity: .5; }
.th-knots path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.th-loops path { fill: none; stroke: var(--echo); stroke-width: 1.4; stroke-dasharray: 1; opacity: .9; }
.th-loops path.fresh { animation: loop 2.4s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes loop { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* riak gema */
.ripple { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.ripple.out { opacity: 0; transition: opacity .4s ease; }
.ripple i { position: absolute; left: var(--x, 20px); top: 46%; width: 0; height: 0; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--echo); animation: rip 2.2s cubic-bezier(.2, .6, .3, 1) both; }
.ripple i:nth-child(2) { animation-delay: .35s; } .ripple i:nth-child(3) { animation-delay: .7s; }
@keyframes rip { 0% { width: 0; height: 0; opacity: .9; } 100% { width: 180vmax; height: 180vmax; opacity: 0; } }

/* yang kamu tahu, Laras tidak */
.kn { position: relative; display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted color-mix(in srgb, var(--echo) 70%, transparent) 1.5px; text-underline-offset: 4px; }
.kn::after { content: ''; position: absolute; right: -6px; top: .1em; width: 5px; height: 5px; border-radius: 50%; background: var(--echo); }
.kn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* lembar orang: lembar bawah situs */
.sheet { position: fixed; z-index: 57; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0; width: min(400px, calc(100% - 24px)); max-height: 72vh; overflow: auto; padding: 20px; border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -20px rgb(0 0 0 / .45); font-family: var(--f-ui); animation: sheetIn .4s var(--spring); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(18px); } }
.sheet .close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--btn); color: var(--ink); font: 300 19px var(--f-ui); cursor: pointer; }
.sh-k { margin: 0; font: 600 11px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sheet h3 { margin: 6px 0 2px; font: 900 34px/1 var(--f-dot); letter-spacing: -.03em; text-transform: uppercase; }
.sh-rel { margin: 4px 0 16px; color: var(--muted); font-size: 14px; }
.sh-ages { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 14px; padding: 14px 16px; border-radius: 20px; background: var(--btn); }
.sh-ages span { display: grid; }
.sh-ages small { font: 600 11px var(--f-ui); color: var(--muted); }
.sh-ages b { font: 900 48px/1 var(--f-dot); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sh-ages i { padding-bottom: 8px; font-style: normal; font-size: 20px; color: var(--muted); }
.sh-ages em { flex-basis: 100%; margin-top: 6px; font: 400 15px var(--f-text); font-style: normal; color: var(--muted); }
.sh-know { margin-top: 16px; }
.sh-know ul { display: grid; gap: 10px; margin: 8px 0; padding: 0; list-style: none; }
.sh-know li { padding: 12px 14px; border-radius: 16px; background: var(--echo-soft); }
.sh-know small { display: block; font-size: 11.5px; color: var(--echo); }
.sh-know q { font: 400 16px/1.45 var(--f-text); }
.sh-not { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ---------- benda ---------- */
.bd { margin: 6px 0 30px; font: 14.5px/1.45 var(--f-ui); transition: opacity .6s ease, translate .7s var(--ease-out); }
.bd.anim { opacity: 0; translate: 0 14px; }
.bd-m, .bd-tag, .bd-env { transition: opacity .35s ease, translate .4s ease; }
.wait { opacity: 0 !important; translate: 0 6px; }
.bd-phone { max-width: 380px; margin-left: auto; margin-right: auto; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; overflow: clip; }
.bd-phone.arrived { animation: buzz .5s ease .1s; }
@keyframes buzz { 20% { rotate: -1.2deg; } 40% { rotate: 1.2deg; } 60% { rotate: -.8deg; } 80% { rotate: .5deg; } }
.bd-bar { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); }
.bd-app { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--btn); color: transparent; font-size: 0; position: relative; }
.bd-app::after { content: ''; position: absolute; width: 15px; height: 12px; border-radius: 7px 7px 7px 2px; background: var(--ink); }
.bd-bar b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.bd-bar small { color: var(--muted); font-size: 12px; }
.bd-list { display: grid; gap: 6px; padding: 14px; }
.bd-m { display: grid; justify-items: start; max-width: 84%; }
.bd-m.out { justify-self: end; justify-items: end; }
.bd-b { padding: 9px 14px; border-radius: 20px; background: var(--btn); text-wrap: pretty; }
.bd-m.out .bd-b { background: var(--accent); color: #fff; }
.bd-m.sent { animation: sent .45s var(--spring); }
@keyframes sent { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.bd-pic { display: grid; gap: 6px; padding: 5px; }
.bd-ph { display: block; width: min(210px, 56vw); aspect-ratio: 4 / 3; border-radius: 15px; background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 14%, transparent), color-mix(in srgb, var(--ink) 5%, transparent)); }
.bd-pic small { padding: 0 8px 3px; color: var(--muted); font-size: 12px; }
.bd-m.out .bd-pic small { color: rgb(255 255 255 / .8); }
.bd-m.out .bd-ph { background: linear-gradient(160deg, rgb(255 255 255 / .35), rgb(255 255 255 / .12)); }
.voice .bd-b { display: flex; align-items: center; gap: 9px; }
.bd-play { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.bd-wave { display: flex; align-items: center; gap: 2px; }
.bd-wave i { width: 2px; height: var(--h); border-radius: 1px; background: currentColor; opacity: .5; }
.voice small { color: var(--muted); font: 700 11px var(--f-dot); }
.bd-tr { max-width: 290px; margin-top: 5px; font: 400 14.5px/1.4 var(--f-text); color: var(--muted); }
.bd .bd-note { margin: -4px 16px 12px; text-align: right; font-size: 11.5px; color: var(--muted); }
.bd-compose { display: none; }
.typing .bd-compose { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 7px 7px 7px 14px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.bd-field { flex: 1; min-height: 21px; }
.bd-field::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(1) infinite; }
.bd-send { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); }

/* foto: bingkai, label, keterangan; tidak ada gambar */
.bd-photo { width: min(300px, 86%); margin: 8px auto 32px; padding: 10px 10px 12px; border-radius: 6px; background: #FBFBFA; color: #1D1D1F; box-shadow: 0 1px 0 rgb(0 0 0 / .04), 0 18px 30px -18px rgb(30 36 50 / .45); rotate: -1.2deg; }
.bd-frame { position: relative; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 4px; aspect-ratio: 4 / 3; padding: 10px; overflow: hidden; border-radius: 3px; background: linear-gradient(165deg, #BCC0C8, #8E939C 60%, #6C717A); }
.pm-old .bd-frame { background: linear-gradient(165deg, #C9C0B0, #9B9282 60%, #776F61); }
.bd-tag { padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / .88); color: #1D1D1F; font: 600 10.5px var(--f-ui); }
.bd-photo figcaption { margin-top: 9px; font: 400 15px/1.35 var(--f-text); text-align: center; }
.pm-ribbon .bd-frame::before { content: ''; position: absolute; right: -24px; top: 14px; width: 92px; height: 13px; background: #111113; rotate: 45deg; box-shadow: 0 2px 4px rgb(0 0 0 / .3); }
.pm-plastic .bd-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 28%, rgb(255 255 255 / .5) 42%, transparent 58%); }
.pm-frame { padding: 12px 12px 14px; background: #1D1D1F; color: #F4F4F5; rotate: 0deg; }
.pm-frame .bd-frame { box-shadow: inset 0 0 0 4px #F4F4F5; }
.pm-screen { padding: 9px 9px 12px; border-radius: 30px; background: #050506; color: #D8D8DC; rotate: 0deg; }
.pm-screen .bd-frame { border-radius: 22px; }
.pm-cut .bd-frame::after { content: 'Ratna'; position: absolute; right: -22px; bottom: 12px; padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / .88); color: #1D1D1F; font: 600 10.5px var(--f-ui); }
.bd-strip { display: flex; gap: 12px; margin: 6px -20px 30px; padding: 6px 20px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bd-strip .bd-photo { flex: 0 0 220px; margin: 0; scroll-snap-align: center; }
.bd-strip .bd-photo:nth-child(2) { rotate: 1deg; } .bd-strip .bd-photo:nth-child(3) { rotate: -.4deg; }
.bd-strip .bd-photo.wait { opacity: 1 !important; }

/* kartu identitas, surat, nota, halaman kosong, amplop */
.bd-card { max-width: 360px; margin-left: auto; margin-right: auto; padding: 16px 18px 12px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.bd-card .bd-k { display: flex; align-items: center; gap: 6px; color: var(--navy); opacity: 1; }
.bd-card .bd-k::before { content: '✦'; font-size: 9px; }
.bd .bd-k { margin: 0; font: 600 10.5px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.bd-card h4 { margin: 6px 0 12px; font: 900 22px/1 var(--f-dot); letter-spacing: -.02em; text-transform: uppercase; }
.bd-card dl, .bd-letter dl { display: grid; gap: 0; margin: 0; }
.bd-card dl div, .bd-letter dl div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.bd-card dt, .bd-letter dt { font-size: 12.5px; color: var(--muted); }
.bd-card dd, .bd-letter dd { margin: 0; font-weight: 600; font-size: 13.5px; }
.bd-empty { display: inline-block; width: 120px; height: 1.1em; border-bottom: 1.5px dashed var(--muted); }
.bd-empty::after { content: ''; display: inline-block; width: 1.5px; height: 1em; background: var(--accent); animation: blink 1s steps(1) infinite; }
.bd-letter { max-width: 440px; margin-left: auto; margin-right: auto; padding: 24px 24px 18px; border-radius: 4px; background: #FDFDFB; color: #1D1D1F; box-shadow: 0 0 0 1px rgb(0 0 0 / .04), 0 22px 36px -22px rgb(30 36 50 / .45); font: 13.5px/1.6 ui-monospace, 'Courier New', monospace; }
.bd-letter header { display: grid; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 3px double rgb(29 29 31 / .3); text-align: center; }
.bd-letter header b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.bd-letter header small { font-size: 12px; opacity: .65; }
.bd-letter h4 { margin: 0 0 10px; font: 700 13.5px ui-monospace, 'Courier New', monospace; text-decoration: underline; }
.bd .bd-letter p, .bd-letter p { margin: 0 0 9px; }
.bd-letter .bd-to { font-weight: 600; }
.bd-letter dl { margin-top: 12px; }
.bd-letter dl div { border-color: rgb(29 29 31 / .12); }
.bd-letter dt { color: rgb(29 29 31 / .55); }
.bd-forged { max-width: 320px; margin-left: auto; margin-right: auto; padding: 22px 24px 14px; border-radius: 4px; background: #FDFDFB; color: #1D1D1F; box-shadow: 0 0 0 1px rgb(0 0 0 / .04), 0 18px 30px -20px rgb(30 36 50 / .45); rotate: .8deg; }
.bd-lines { display: block; }
.bd-lines i { display: block; width: var(--w); height: 7px; margin: 0 0 13px; background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 9px, currentColor 9px 13px, transparent 13px 17px, currentColor 17px 26px, transparent 26px 30px); opacity: .42; filter: blur(1.1px); transform: skewX(-14deg); border-radius: 3px; }
.bd-sign { display: block; margin-top: 4px; text-align: right; font: italic 400 26px var(--f-text); transform: skewX(-10deg); }
.bd-forged figcaption { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgb(29 29 31 / .2); font: 400 14px var(--f-text); opacity: .7; }
.bd-slip { max-width: 270px; margin-left: auto; margin-right: auto; padding: 16px 16px 12px; background: #FDFDFB; color: #1D1D1F; font: 12.5px/1.5 ui-monospace, 'Courier New', monospace; box-shadow: 0 14px 26px -18px rgb(30 36 50 / .5); rotate: -1.4deg; clip-path: polygon(0 4px, 4% 0, 8% 4px, 12% 0, 16% 4px, 20% 0, 24% 4px, 28% 0, 32% 4px, 36% 0, 40% 4px, 44% 0, 48% 4px, 52% 0, 56% 4px, 60% 0, 64% 4px, 68% 0, 72% 4px, 76% 0, 80% 4px, 84% 0, 88% 4px, 92% 0, 96% 4px, 100% 0, 100% 100%, 0 100%); }
.bd-slip .bd-k { margin-bottom: 8px; }
.bd .bd-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; border-bottom: 1px dotted rgb(29 29 31 / .3); }
.bd .bd-foot { margin: 8px 0 0; color: #E3394E; }
.bd-blank { width: min(250px, 66%); aspect-ratio: 1 / 1.414; margin: 10px auto 32px; background: #FFFFFF; box-shadow: 0 0 0 1px rgb(0 0 0 / .05), 0 22px 36px -22px rgb(30 36 50 / .45); rotate: -.6deg; }
.bd-envs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bd-env { position: relative; min-width: 128px; padding: 22px 16px 12px; border-radius: 4px; background: #FDFDFB; color: #1D1D1F; font: 400 15px var(--f-text); text-align: center; box-shadow: 0 0 0 1px rgb(0 0 0 / .04), 0 12px 22px -16px rgb(30 36 50 / .5); rotate: calc((var(--i) - 2) * 1.6deg); }
.bd-env::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: linear-gradient(to bottom right, transparent 49.5%, rgb(29 29 31 / .08) 50%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 49.5%, rgb(29 29 31 / .08) 50%) right / 50% 100% no-repeat; }
.bd-env.voice { padding: 12px 16px; border-radius: 20px; background: var(--btn); color: var(--ink); box-shadow: none; font: 500 13px var(--f-ui); }
.bd-env.voice::before { content: none; }

/* ---------- langit ---------- */
.sky-tint { position: fixed; inset: 0 0 auto; height: 45vh; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--bd-a), transparent); opacity: .3; transition: background-color 2s ease; }
:root[data-theme="dark"] .sky-tint { opacity: .5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sky-tint { opacity: .5; } }

/* layar lebar: jendela aplikasi di atas langit, seperti halaman awal */
@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 22px; }
  .clock { width: min(780px, calc(100% - 44px)); margin: 4px auto 0; padding: 0 22px; border-radius: 30px 30px 0 0; background: var(--bg); }
  .ck-bar { left: 22px; right: 22px; }
  .clock:not([hidden]) + .read { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }
  .read { max-width: 780px; margin: 4px auto 40px; padding: 0 56px 14vh; border-radius: 30px; background: var(--bg); box-shadow: var(--qm-shadow); min-height: calc(100vh - var(--qm-top-h) - 44px); }
  .cover { padding-top: 26px; }
  .k-perspective { margin-left: -30px; margin-right: -30px; padding-left: 44px; padding-right: 44px; }
}

/* gerak dikurangi */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .surface .n-body { filter: none; } .bd.anim { opacity: 1; translate: none; } }
@media (max-width: 380px) { .cv-top { grid-template-columns: 1fr; justify-items: center; } .cv-pill { display: none; } .cv-sheet { padding-left: 18px; padding-right: 18px; } }

/* ---------- tahap 2: ingatan pembaca, kartu bagikan ---------- */
.n-seen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -12px 0 26px; font: 12.5px/1.4 var(--f-ui); color: var(--muted); }
.n-seen > span { display: inline-flex; align-items: center; gap: 8px; }
.n-seen > span::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .6; }
.k-perspective .n-seen { color: color-mix(in srgb, var(--pv-ink) 60%, transparent); }
.n-skip { height: 28px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--btn); color: var(--ink); font: 500 12.5px var(--f-ui); cursor: pointer; }
.k-perspective .n-skip { background: color-mix(in srgb, var(--pv-ink) 9%, transparent); color: var(--pv-ink); }
.o-was { display: block; margin-top: 4px; font: 500 11.5px var(--f-ui); color: var(--muted); }
.o-was::before { content: '↺ '; }
.choose.done .opt.picked .o-was { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.after .ghost { background: transparent; color: var(--sheet-ink); box-shadow: inset 0 0 0 1.5px var(--sheet-dim); }
.share-dialog { width: min(440px, calc(100% - 24px)); }
.sd-body { display: grid; gap: 14px; padding: 6px 18px 18px; }
.sd-img { display: grid; place-items: center; min-height: 200px; border-radius: 18px; background: var(--btn); overflow: hidden; }
.sd-img img { display: block; width: 100%; height: auto; }
.sd-img img:not([src]) { display: none; }
.sd-img:has(img:not([src]))::after { content: '…'; color: var(--muted); }
.sd-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sd-act a.ghost { display: inline-flex; align-items: center; text-decoration: none; }