[hidden] { display: none !important; }

/* Font sama dengan thrivian.life, dibundel lokal (aplikasi offline). Lisensi SIL OFL. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-vietnamese-500-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-vietnamese-500-italic.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-vietnamese-600-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-vietnamese-600-italic.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/montserrat-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/montserrat-vietnamese-400-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/montserrat-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/montserrat-vietnamese-500-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/montserrat-vietnamese-600-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* Token warna mengikuti thrivian.life (forest, cream, ivory, gold, ink). */
:root {
  --bg: #f7f2e8;
  --surface: #fffdf7;
  --ink: #17372e;
  --muted: #53645e;
  --line: rgba(23, 55, 46, 0.14);
  --accent: #0d4a37;
  --accent-soft: #e7ede4;
  --sun: #bd9550;
  --sun-soft: #f3e9d4;
  --care: #87362d;
  --care-soft: #f6e5df;
  --on-accent: #f9f4e9;
  --radius: 24px;
  --shadow: 0 1px 2px rgba(7, 46, 36, 0.05), 0 12px 32px rgba(7, 46, 36, 0.07);
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #081d18;
    --surface: #0d2720;
    --ink: #f0eadf;
    --muted: #b7c0b9;
    --line: rgba(228, 216, 192, 0.15);
    --accent: #8fae91;
    --accent-soft: #14332a;
    --sun: #d1ac68;
    --sun-soft: #2a2a1c;
    --care: #e5a49b;
    --care-soft: #3a2420;
    --on-accent: #061f19;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: 400 16px/1.65 var(--font-text);
  min-height: 100vh;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  -webkit-tap-highlight-color: transparent;
}
main { max-width: 560px; margin: 0 auto; padding: 20px 20px 190px; outline: none; }
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: 2.15rem; line-height: 1.08; margin: 8px 0 14px; }
h2 { font-size: 1.75rem; line-height: 1.12; margin: 4px 0 12px; }
h1 em, h2 em { font-style: italic; color: var(--sun); }
h3 { font-size: 0.95rem; margin: 18px 0 6px; font-weight: 600; }
p { margin: 0 0 12px; }
small, .muted { color: var(--muted); }
a { color: var(--accent); }
ul { padding-left: 20px; margin: 6px 0 12px; }
li { margin: 4px 0; }

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  max-width: 560px; margin: 0 auto; padding: 10px 14px;
  background: var(--bg);
}
.progress { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.35s ease; }

button { font: inherit; color: inherit; }
.ghost { background: none; border: 0; padding: 8px 6px; color: var(--muted); font-size: 0.95rem; cursor: pointer; min-height: 44px; }
.exit { color: var(--care); font-weight: 600; }
.btn {
  display: block; width: 100%; min-height: 54px; padding: 14px 18px;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
}
.btn.secondary { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn + .btn { margin-top: 10px; }
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 12px 20px calc(14px + var(--safe-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.dock > div { max-width: 520px; margin: 0 auto; }

.hero { text-align: center; padding-top: 6vh; }
.hero img { width: 112px; height: 112px; border-radius: 50%; box-shadow: var(--shadow); }
.hero p { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin: 14px 0; }
.care { background: var(--care-soft); border-color: transparent; }
.care h2, .care h3 { color: var(--care); }
.soft { background: var(--accent-soft); border-color: transparent; }
.eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun); margin: 6px 0 4px; }

.q-text { font-size: 1.12rem; line-height: 1.5; font-weight: 500; margin: 4px 0 6px; }
.hint { font-size: 0.9rem; color: var(--muted); margin-bottom: 12px; }
.anchor { font-size: 0.82rem; font-weight: 500; color: var(--muted); margin: 0 0 10px; padding-left: 10px; border-left: 3px solid var(--sun); }
.opts { display: grid; gap: 10px; margin-top: 14px; }
.opt {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  width: 100%; min-height: 56px; padding: 14px 16px;
  border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.opt .mark { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--muted); border-radius: 50%; display: grid; place-items: center; }
.opt.multi .mark { border-radius: 6px; }
.opt[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt[aria-checked="true"] .mark { border-color: var(--accent); background: var(--accent); }
.opt[aria-checked="true"] .mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); }
.opt.multi[aria-checked="true"] .mark::after { width: 10px; height: 6px; border-radius: 0; background: none; border: solid var(--surface); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }
.opt:disabled { opacity: 0.42; cursor: default; }
.opt .why { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.opt.quiet { border-style: dashed; }
input[type="text"] {
  width: 100%; margin-top: 8px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit;
}

.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.check:last-child { border-bottom: 0; }
.check input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--accent); flex: none; }

/* Slide hasil */
.slide { animation: rise 0.35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide { animation: none; } .progress span { transition: none; } }
.dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 10px; flex-wrap: wrap; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--accent); width: 18px; border-radius: 4px; }
.nav2 { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.nav2 .btn + .btn { margin-top: 0; }
.big { font-family: var(--font-display); font-size: 3rem; font-weight: 600; line-height: 1; color: var(--accent); }
.big small { font-family: var(--font-text); font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats .card { margin: 0; }
.barrow { margin: 12px 0; }
.barrow .lbl { display: flex; justify-content: space-between; gap: 8px; font-size: 0.95rem; }
.track { height: 9px; border-radius: 6px; background: var(--line); margin-top: 6px; overflow: hidden; }
.track span { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { font-size: 0.75rem; padding: 2px 9px; border-radius: 999px; background: var(--sun-soft); color: var(--ink); }
.meter { display: flex; align-items: center; gap: 14px; }
.ring { --p: 50; width: 72px; height: 72px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); }
.ring b { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.term { font-size: 0.85rem; color: var(--muted); font-style: italic; }
.plot { width: 100%; max-width: 320px; display: block; margin: 8px auto; }
.refs li { font-size: 0.92rem; }
details { border-top: 1px solid var(--line); padding: 10px 0; }
details summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.blank { min-height: 80vh; }
.typing .dock { position: static; background: none; padding: 16px 0 0; }
.typing main { padding-bottom: 40px; }

.termnote { font-size: 0.82rem; color: var(--muted); margin: 10px 0 4px; }
.qmark { background: none; border: 0; padding: 4px 2px; min-height: 32px; font: inherit; color: var(--accent); text-decoration: underline dotted; cursor: pointer; }
.qmark span { text-decoration: none; display: inline-block; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(20, 20, 18, 0.45); display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + var(--safe-bottom)); }
.modal { background: var(--surface); color: var(--ink); width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto; border-radius: 20px; padding: 20px; box-shadow: var(--shadow); animation: rise 0.25s ease; }
.modal h2 { margin-top: 0; }
ol.steps { padding-left: 22px; }
ol.steps li { margin: 8px 0; }
.card.example { background: var(--sun-soft); border-color: transparent; }
.card.example p:last-child { font-style: italic; }

/* Cormorant memakai angka gaya lama (1 mirip I); angka besar dipaksa angka modern. */
.big, .ring b, h1, h2 { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* Mandarin: Cormorant/Montserrat tidak punya huruf Han, pakai font sistem yang tersedia. */
:root:lang(zh-CN) { --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif; --font-text: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif; }
/* Thai: aksara Thai dari font sistem; huruf Latin tetap memakai font situs. */
:root:lang(th) { --font-display: "Cormorant Garamond", "Noto Serif Thai", "Noto Sans Thai", "Leelawadee UI", "Thonburi", serif; --font-text: "Montserrat", "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Tahoma", sans-serif; }
:root:lang(th) body { line-height: 1.7; }

/* Persetujuan bertahap: centang sebagai kartu yang mudah disentuh. */
label.check.card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; cursor: pointer; }

/* Ulasan */
.rating { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 6px; }
.rate { min-height: 48px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 1rem var(--font-text); cursor: pointer; }
.rate[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rating-ends { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 14px; }
.field { display: grid; gap: 6px; margin: 10px 0 14px; }
.field textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; min-height: 110px; }