:root {
  color-scheme: light;
  --paper: #faf7ef;
  --ink: #263c36;
  --muted: #53665d;
  --line: #e8e0d2;
  --green: #deebe1;
  --peach: #f8e8dc;
  font-family: "Thonburi", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { width: min(100% - 48px, 1000px); margin-inline: auto; }
p, h1, h2 { margin: 0; }
svg { display: block; width: 1em; height: 1em; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 23px 0 19px; }
.brand, .family { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.brand { font-family: Georgia, serif; font-size: 19px; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: #fff5cb; background: #3b5c4c; font-size: 19px; }
.family { color: #53665d; font-size: 13px; }
.family svg { color: #a15d49; font-size: 16px; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1.04fr 1fr; align-items: center;
  min-height: 395px; padding: 35px 22px 36px 56px;
  border: 1px solid #d4e3d7; border-radius: 32px;
  background: radial-gradient(ellipse at 86% 50%, #eaf3e8, transparent 52%), #e1ece3;
}
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 750 10px/1.4 system-ui, sans-serif; letter-spacing: .16em; }
.hero .eyebrow { padding: 7px 10px; border: 1px solid #b8cbbb; border-radius: 20px; color: #395849; }
.hero .eyebrow svg { color: #856021; font-size: 13px; }
h1 { margin-top: 17px; font-size: clamp(37px, 6vw, 68px); line-height: 1.04; letter-spacing: -.048em; font-weight: 800; }
h1 span { display: block; color: #426454; margin-top: 2px; }
.nickname { display: flex; align-items: center; gap: 11px; margin-top: 10px; color: #7b4b34; font: italic 23px/1.2 Georgia, serif; }
.nickname svg { font-size: 16px; color: #9a6f31; }
.name { margin-top: 20px; line-height: 1.48; font-weight: 650; font-size: 17px; }
.name p + p { color: var(--muted); font: 500 14px/1.55 system-ui, sans-serif; }
.meaning { margin-top: 12px; color: #476252; font-size: 15px; }
.hero-art { display: block; width: 100%; max-width: 430px; height: auto; justify-self: center; }
.timeline { margin-top: 28px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.section-label { color: #4d6a59; }
.section-label span { display: block; width: 15px; height: 1px; background: #6f8b79; }
h2 { margin-top: 3px; font-size: clamp(24px, 4vw, 35px); line-height: 1.25; letter-spacing: -.02em; }
.sync { display: flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 6px 10px; border: 1px solid #dbdfd4; border-radius: 30px; background: #fffdf7; color: #53665d; font-size: 12px; line-height: 1.4; }
.signal { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #a17c3c; }
.sync[data-state="online"] .signal { background: #44805d; }
.counters { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.counter { min-width: 0; padding: 16px 23px 18px; border-radius: 24px; border: 1px solid #d6e4d8; background: #edf3ea; }
.counter.minutes { background: #fbefe6; border-color: #f0ded0; }
.counter-label { display: flex; align-items: center; gap: 9px; color: #39594a; font-size: 15px; font-weight: 750; }
.minutes .counter-label { color: #7d503b; }
.tile-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #dbe9de; font-size: 19px; }
.minutes .tile-icon { background: #f3dfd1; }
.tile-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.counter-value { margin: 5px 0 2px; color: #2e5141; font: 500 clamp(36px, 7vw, 70px)/1.03 Georgia, serif; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.045em; overflow-wrap: anywhere; }
.minutes .counter-value { color: #824c37; }
.counter p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.minutes p { color: #795642; }
.birth { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 11px 16px; border-radius: 19px; border: 1px solid var(--line); background: #fffdf8; }
.birth-date { display: flex; align-items: center; gap: 12px; }
.birth-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 12px; background: #f9ebcb; color: #875e23; font-size: 19px; }
.birth-label { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
time { display: block; font-size: 15px; font-weight: 700; }
time span { padding-inline: 3px; }
.zone { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.zone span { white-space: nowrap; }
footer { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 20px 0 23px; font-size: 13px; color: #56695e; }
footer svg { color: #a15d49; font-size: 16px; }
.noscript { margin-top: 10px; }
@media (max-width: 710px) {
  .wrap { width: calc(100% - 32px); }
  .hero { min-height: auto; padding: 27px 14px 27px 27px; border-radius: 26px; }
  .hero-art { width: 110%; max-width: none; }
  .nickname { font-size: 20px; }
  .name { margin-top: 15px; font-size: 15px; }
  .name p + p { font-size: 12px; }
  .meaning { font-size: 13px; }
}
@media (max-width: 490px) {
  .masthead { padding: 14px 0 12px; }
  .brand { font-size: 15px; gap: 6px; }
  .brand-mark { width: 29px; height: 29px; font-size: 17px; }
  .family { font-size: 11px; gap: 4px; }
  .hero { display: block; padding: 22px 17px 15px; text-align: center; }
  h1 { font-size: clamp(34px, 9.4vw, 46px); margin-top: 12px; }
  h1 span { display: inline; }
  .nickname { justify-content: center; margin-top: 5px; }
  .name { margin-top: 11px; }
  .meaning { margin-top: 7px; }
  .hero-art { width: min(100%, 247px); margin: 3px auto -3px; }
  .timeline { margin-top: 21px; }
  .section-head { margin-bottom: 12px; }
  .sync { padding: 5px 7px; font-size: 10px; gap: 5px; }
  .counters { gap: 9px; }
  .counter { padding: 12px 12px 13px; border-radius: 19px; }
  .counter-label { font-size: 13px; gap: 6px; }
  .tile-icon { width: 26px; height: 26px; font-size: 16px; }
  .counter-value { font-size: clamp(31px, 9vw, 46px); }
  .counter p, .zone { font-size: 11px; }
  .birth { padding: 9px; gap: 5px; }
  .birth-date { gap: 7px; }
  time { font-size: 13px; }
  time span { padding-inline: 0; }
}
@media (max-width: 340px) {
  .wrap { width: calc(100% - 22px); }
  .birth .zone { display: none; }
  .hero { padding-inline: 10px; }
}