:root { --bg:#0f2a1d; --card:#173a29; --inset:#0b2016; --line:#2f6148; --ink:#f1f5ec; --muted:#a9c4b3; --gold:#e0c070; --pink:#f4b8a8; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.6;
  font-family: "Noto Sans HK","PingFang HK","Microsoft JhengHei",system-ui,sans-serif; }
header, main { max-width: 720px; margin: 0 auto; padding: 16px; }
header { text-align:center; position:relative; }
#lang { position:absolute; right:16px; top:16px; background:none; color:var(--gold);
  border:1px solid var(--gold); border-radius:999px; padding:6px 14px; cursor:pointer; font-size:1rem; }
.hero { display:block; width:100%; max-width:420px; height:auto; margin:56px auto 0; border-radius:14px; }
h1 { font-size: 1.8rem; margin:.4em 0 0; color:var(--gold); font-weight:600; }
h2 { color:var(--gold); font-weight:600; font-size:1.2rem; }
.sub { color:var(--muted); margin:0; font-size:.9rem; }
section { background:var(--card); border-radius:14px; padding:20px; margin:18px 0; }
.clock { text-align:center; }
.digits { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
.digits b { display:block; font-size: clamp(1.8rem, 8vw, 3.2rem); font-variant-numeric: tabular-nums; color:var(--pink); }
.digits span { color:var(--muted); font-size:.85rem; }
.about { text-align:left; }
label { display:block; margin-bottom:12px; }
label span { display:block; color:var(--muted); font-size:.9rem; margin-bottom:4px; }
input, textarea { width:100%; padding:10px; border-radius:8px; border:1px solid var(--line);
  background:var(--inset); color:var(--ink); font:inherit; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; }
.safety { font-size:.85rem; color:var(--muted); border-left:3px solid var(--gold); padding-left:10px; }
button[type=submit] { background:var(--gold); color:var(--bg); border:0; border-radius:8px;
  padding:10px 28px; font:inherit; font-weight:600; cursor:pointer; }
button:disabled { opacity:.5; }
#wall { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
#wall li { background:var(--inset); border-radius:10px; padding:12px 14px; overflow-wrap:anywhere; white-space:pre-wrap; }
#wall small { display:block; color:var(--muted); margin-top:6px; }
a { color: var(--gold); }
.nav { text-align:center; margin: 8px 0 0; }
.tl-title { margin-top: 56px; }
.timeline { list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid var(--gold); }
.timeline li { position:relative; background:var(--card); border-radius:12px; padding:12px 16px; margin:0 0 14px; }
.timeline li::before { content:""; position:absolute; left:-25px; top:18px; width:12px; height:12px;
  border-radius:50%; background:var(--pink); }
.timeline time { color:var(--gold); font-weight:600; font-size:.95rem; }
.timeline p { margin:.3em 0; }
.timeline a { font-size:.85rem; }
.st-date { color:var(--muted); font-size:.9rem; }
.st-p { white-space:pre-wrap; overflow-wrap:anywhere; }
main button[type=button] { background:none; color:var(--gold); border:1px solid var(--gold);
  border-radius:8px; padding:6px 12px; font:inherit; cursor:pointer; margin-top:8px; }
.ev-title { font-weight:600; font-size:1.05rem; }